/* ============================================================
   USP PARALLAX SHOWCASE
   Dark premium glassmorphism cards — scroll-driven parallax.
   12 product USPs, one viewport height of scroll each.
   ============================================================ */

/* ---- Dim overlay: sits above sem1/patchFinal, dims them during USP reveal ---- */
#uspDimOverlay {
  position: fixed;
  inset: 0;
  z-index: 492;
  pointer-events: none;
  opacity: 0;
  background: rgba(4, 7, 14, 0);
}

#uspDimOverlay.dimmed {
  background: rgba(4, 7, 14, 0);
}

/* ---- USP outer section (scroll-driver only — no visual content) ---- */
/* NOTE: no z-index here — setting z-index would create a stacking context
   that traps #uspSticky (fixed) below sem1Bg (z-index 485). */
#uspSection {
  position: relative;
  pointer-events: none;
}

/* ---- Fixed viewport: frees USP from DOM position so it starts the moment
        sem1 is ready, not when the section scrolls into view ---- */
#uspSticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;   /* stabilises against mobile address-bar; ignored where unsupported */
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 493;
  visibility: hidden;
}

#uspSticky.active {
  visibility: visible;
}

/* ---- Highlight regions container — child of #sem1Bg ---- */
/* position:absolute + inset:0 fills sem1's box exactly;
   highlights inherit sem1's transform so they scale with the image. */
#uspHighlights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* above sem1's ::after laser ring */
}

/* ---- Highlight scanning arcs ---- */
@property --hlSabre {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes hlSabreSpin { to { --hlSabre: 360deg; } }

/* ---- Individual highlight box ---- */
.usp-highlight {
  position: absolute;
  box-sizing: border-box;
  border-radius: 4px;
  border: none;
  background: rgba(68, 175, 229, 0.018);

  /* Spotlight — darkens everything outside this region, no blur */
  box-shadow: 0 0 0 2000px rgba(4, 7, 16, 0.62);

  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}

/* 5 uniform comet arcs — 72° apart, identical size, same speed */
.usp-highlight::before {
  content: '';
  position: absolute;
  inset: -2.5px;
  border-radius: 7px;
  padding: 2.5px;
  background: conic-gradient(
    from var(--hlSabre),
    /* — Comet 1 : 0° – 48° — */
    transparent               0deg,
    rgba(44,  150, 215, 0.08)  6deg,
    rgba(68,  175, 229, 0.38) 22deg,
    rgba(120, 205, 255, 0.78) 38deg,
    rgba(200, 238, 255, 0.97) 45deg,
    rgba(225, 248, 255, 1.00) 47deg,
    transparent               50deg,
    /* — Comet 2 : 72° – 120° — */
    transparent               72deg,
    rgba(44,  150, 215, 0.08) 78deg,
    rgba(68,  175, 229, 0.38) 94deg,
    rgba(120, 205, 255, 0.78) 110deg,
    rgba(200, 238, 255, 0.97) 117deg,
    rgba(225, 248, 255, 1.00) 119deg,
    transparent              122deg,
    /* — Comet 3 : 144° – 192° — */
    transparent              144deg,
    rgba(44,  150, 215, 0.08) 150deg,
    rgba(68,  175, 229, 0.38) 166deg,
    rgba(120, 205, 255, 0.78) 182deg,
    rgba(200, 238, 255, 0.97) 189deg,
    rgba(225, 248, 255, 1.00) 191deg,
    transparent              194deg,
    /* — Comet 4 : 216° – 264° — */
    transparent              216deg,
    rgba(44,  150, 215, 0.08) 222deg,
    rgba(68,  175, 229, 0.38) 238deg,
    rgba(120, 205, 255, 0.78) 254deg,
    rgba(200, 238, 255, 0.97) 261deg,
    rgba(225, 248, 255, 1.00) 263deg,
    transparent              266deg,
    /* — Comet 5 : 288° – 336° — */
    transparent              288deg,
    rgba(44,  150, 215, 0.08) 294deg,
    rgba(68,  175, 229, 0.38) 310deg,
    rgba(120, 205, 255, 0.78) 326deg,
    rgba(200, 238, 255, 0.97) 333deg,
    rgba(225, 248, 255, 1.00) 335deg,
    transparent              338deg,
    transparent              360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: hlSabreSpin 8s linear infinite;
  filter: blur(0.5px);
}


/* ---- Cards container ---- */
#uspCards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---- Feature media layer — centred below the patch image ---- */
#uspMedia {
  position: absolute;
  left: 50%;
  top: 70%;                 /* overridden each frame by usp-scene.js */
  transform: translateX(-50%);
  z-index: 7;               /* above patch (490) since #uspSticky is 493 */
  pointer-events: none;
  width: clamp(220px, 30vw, 440px);
}

.usp-media-img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 24vh;
  border-radius: 8px;
  border: 1px solid rgba(68, 175, 229, 0.28);
  box-shadow: 0 12px 44px rgba(0, 8, 26, 0.62);
  background: rgba(8, 14, 30, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  will-change: opacity;
}

/* Overlay variant — sits ON the sem1 image (vertically centred via the
   -50% Y translate), no border / shadow / background.
   NOTE: an explicit height is used (not max-height) so the gif is actually
   scaled UP — max-* only caps and the gifs are smaller than the viewport. */
.usp-media-over {
  transform: translate(calc(-50% - 0.5vw), -50%);   /* nudged ~0.5% left */
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
  height: 19vh;
  width: auto;
  max-width: 56vw;
  max-height: none;
}

/* usp5.gif is 800x264 (the rest are 800x185). Scale it taller so its
   on-screen WIDTH matches the others (19vh * 4.32 / 3.03 ≈ 27vh). */
.usp-media-5 { height: 27vh; }

/* Make the second USP GIF slightly smaller without affecting the others. */
.usp-media-img[src*="usp2.gif"] {
   height: 19vh !important;
   width: auto !important;
   max-height: none !important;
   max-width: 56vw !important;
}

@media (max-width: 820px) {
  #uspMedia {
    width: clamp(280px, 90vw, 500px);
  }

  .usp-media-img {
    max-height: 20vh;
  }

  /* USP 2 */
  .usp-media-img[src*="usp2.gif"] {
    height: 15vh;
    max-height: none;
    max-width: 48vw;
  }

  /* USP 4 */
  .usp-media-img[src*="usp4.gif"] {
    height: 15vh;
    max-width: 48vw;
  }
  /* USP 3 */
.usp-media-img[src*="usp3.gif"] {
    height: 18vh !important;
    width: auto !important;
    max-width: 50vw !important;
    max-height: none !important;
}
/* USP 9 */
.usp-media-img[src*="usp9"] {
    height: 18vh !important;
    width: auto !important;
    max-width: 50vw !important;
    max-height: none !important;
}
 /* Multi-Format Batch Export */
  .usp-media-img[src*="MULTI-FORMAT BATCH EXPORT"] {
      height: 18vh !important;
      width: auto !important;
      max-height: none !important;
      max-width: 50vw !important;
  }

  /* Brand Logo Integration */
  .usp-media-img[src*="BRAND LOGO INTEGRATION"] {
      height: 18vh !important;
      width: auto !important;
      max-height: none !important;
      max-width: 50vw !important;
  }

}

/* ====================================================
   USP CARD — premium reflective glass
   ==================================================== */
.usp-card {
  position: absolute;
  top: calc(var(--header-h, 60px) + 18px); /* overridden by JS */
  width: clamp(240px, 22vw, 320px);
  padding: 22px 26px;

  /* No window, no glass — bare text only */
  background:    none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border:        none;
  border-radius: 0;
  box-shadow:    none;
  overflow:      visible;
  z-index:       10;

  transform: translateX(-50%);
  opacity: 0;
  box-sizing: border-box;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* ---- Card content ---- */
.usp-content {
  position: relative;
  width: 100%;
}
.usp-content::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent              0%,
    rgba(68, 175, 229, 0.65) 50%,
    transparent              100%
  );
}

/* ---- Title ---- */
.usp-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(0.80rem, 1.30vw, 1.02rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(220, 238, 255, 1.00);
  margin: 0 0 2px;
  line-height: 1.25;
  text-shadow: 0 1px 10px rgba(0, 10, 40, 0.90);
  text-align: center;
}

/* ---- Description ---- */
.usp-desc {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(0.68rem, 0.85vw, 0.78rem);
  line-height: 1.85;
  color: rgba(170, 200, 225, 0.82);
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 10, 40, 0.85);
  text-align: center;
}

/* ====================================================
   PROGRESS INDICATOR
   ==================================================== */
#uspProgress {
  position: absolute;
  bottom: clamp(22px, 4vh, 44px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  white-space: nowrap;
}

#uspProgress.visible {
  opacity: 1;
}

.usp-prog-bar-wrap {
  width: clamp(100px, 16vw, 180px);
  height: 1px;
  background: rgba(68, 175, 229, 0.10);
  position: relative;
  overflow: hidden;
}

#uspProgressBar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    rgba(68, 175, 229, 0.30) 0%,
    rgba(68, 175, 229, 0.90) 100%
  );
}

#uspProgressCount {
  font-family: 'Geist Mono', 'Oxanium', 'Open Sans', monospace;
  font-size: 0.60rem;
  letter-spacing: 0.18em;
  color: rgba(68, 175, 229, 0.50);
}

/* ====================================================
   MOBILE
   ==================================================== */
@media (max-width: 820px) {
  .usp-card {
    padding: 16px 18px;
  }

  .usp-title {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
  }

  .usp-desc {
    font-size: 0.68rem;
    line-height: 1.65;
  }

  .usp-index {
    font-size: 0.60rem;
  }
}


/* ---- USP 8 & 9 — slightly larger media (same centred position) ---- */
.usp-media-lg {
  max-height: 30vh;
  max-width: min(520px, 40vw);
}
@media (max-width: 820px) {
  .usp-media-lg { height: 34vh !important;
    max-height: none !important;
    max-width: 90vw !important;
    width: auto !important; }
  
}

@media (min-width: 821px) and (max-width: 1365px) {
  .usp-media-img[src*="usp2.gif"] {
    height: 20vh !important;
    width: auto !important;
    max-height: none !important;
    max-width: 56vw !important;
  }
}