/* ============================================================================
   SYBER — 3D product showcase (scroll-pinned). Loaded after styles-3d.css.
   A tall section pins its stage while the device model scrolls through the app
   tabs; a glass copy panel narrates. Fallback mode = a stacked mockup gallery.
   ============================================================================ */
#showcase {
  position: relative;
  height: 620vh;                 /* scroll runway for 6 tabs through the pinned stage */
  background:
    radial-gradient(80% 60% at 12% 8%, rgba(20,184,166,0.10), transparent 60%),
    radial-gradient(70% 60% at 100% 40%, rgba(99,102,241,0.10), transparent 60%),
    #060b16;
  color: #fff;
  border-radius: 40px;
  margin: 8px clamp(0px, 2vw, 24px);
  overflow: clip;
}

.showcase-intro {
  position: relative; z-index: 3;
  max-width: 760px; margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) clamp(20px, 5vw, 56px) 0;
  text-align: center;
}
.showcase-intro .eyebrow {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #5eead4; margin-bottom: 18px;
}
.showcase-intro h2 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 54px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 14px; }
.showcase-intro p { color: rgba(255,255,255,0.72); font-size: clamp(16px, 2vw, 19px); }

/* the pinned stage */
.showcase-stage {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  display: block;
  margin-top: -18vh;             /* pull the stage up so the device meets the intro */
}
#showcase-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1s ease;
}
#showcase-canvas.scene-ready { opacity: 1; }

/* glass narration panel */
.showcase-copy {
  position: absolute; z-index: 4;
  left: clamp(20px, 5vw, 72px); bottom: clamp(28px, 8vh, 88px);
  width: min(400px, 40vw);
  padding: 26px 28px;
  background: rgba(8,15,28,0.74);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 22px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  --accent: #14b8a6;
}
/* Fixed light-teal step label guarantees AA on the dark glass regardless of the tab accent (the
   per-tab accent only drives the larger non-text progress dots, which have no contrast minimum). */
.showcase-copy .sc-step { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: #5eead4; }
.showcase-copy .sc-title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 10px; }
.showcase-copy .sc-copy { color: rgba(255,255,255,0.80); font-size: 16px; line-height: 1.55; }
.showcase-copy .sc-dots { display: flex; gap: 8px; margin-top: 18px; }
.showcase-copy .sc-dots i { width: 22px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.20); transition: background 0.4s ease, width 0.4s ease; }
.showcase-copy .sc-dots i.on { width: 34px; background: var(--accent); }
.showcase-copy.sc-in { animation: scIn 0.6s cubic-bezier(.2,.7,.2,1); }
@keyframes scIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.showcase-hint {
  position: absolute; z-index: 4; right: clamp(20px, 5vw, 56px); bottom: 36px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  opacity: 0; transition: opacity 0.6s ease;   /* revealed only once the 3D scene is live */
}
.showcase-hint span { width: 20px; height: 32px; border: 2px solid rgba(255,255,255,0.35); border-radius: 11px; position: relative; }
.showcase-hint span::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: rgba(255,255,255,0.8); animation: scScroll 1.7s ease-in-out infinite; }
@keyframes scScroll { 0%,100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(9px); opacity: 0.3; } }
#showcase.has-3d .showcase-hint { opacity: 1; }

/* ── fallback (no WebGL / reduced-motion / weak device): stacked gallery ── */
.showcase-fallback { display: none; }
#showcase.showcase-fallback-mode { height: auto; padding-bottom: clamp(40px, 8vh, 80px); }
#showcase.showcase-fallback-mode .showcase-stage { display: none; }   /* no empty pinned 100vh */
.showcase-fallback.on { display: block; max-width: 1120px; margin: 0 auto; padding: clamp(24px,5vh,56px) clamp(20px,5vw,56px) 0; }
.sc-fb-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(20px,4vw,48px); align-items: center; margin-bottom: clamp(40px,8vh,88px); }
.sc-fb-row.alt { grid-template-columns: 1.2fr 1fr; }
.sc-fb-row.alt .sc-fb-copy { order: 2; }
.sc-fb-copy .sc-step { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: #5eead4; }
.sc-fb-copy h3 { font-family: var(--font-display); font-size: clamp(22px,3vw,32px); font-weight: 800; margin: 8px 0 10px; color: #fff; }
.sc-fb-copy h3::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 3px; background: var(--accent, #14b8a6); margin-top: 12px; }
.sc-fb-copy p { color: rgba(255,255,255,0.75); font-size: 16px; line-height: 1.55; }
.sc-fb-shot { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.12); background: #0c1526; }
.sc-fb-shot.sc-fb-phone { max-width: 300px; margin: 0 auto; border-radius: 30px; }
.sc-fb-shot img { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .showcase-hint span::after, .showcase-copy.sc-in { animation: none; } }

/* Narrow laptops/tablets: the left-anchored panel would overlap the centered device — center it
   at the bottom instead. */
@media (max-width: 1150px) {
  .showcase-copy { left: 50%; right: auto; transform: translateX(-50%); width: min(92vw, 480px); bottom: clamp(20px, 5vh, 44px); text-align: center; }
  .showcase-copy .sc-dots { justify-content: center; }
}

@media (max-width: 900px) {
  #showcase { height: 480vh; border-radius: 28px; }
  .showcase-hint { display: none; }
  .sc-fb-row, .sc-fb-row.alt { grid-template-columns: 1fr; gap: 18px; }
  .sc-fb-row.alt .sc-fb-copy { order: 0; }
}