/* ════════════════ WIN THE WORK · SHOWCASE — one phone pinned while you scroll (assets/js/showcase.js) ════════════════ */
/* The default is the still version (no JS, or reduced motion): the five screens in a row, their captions beneath.
   The pinned film lives under `.js` + prefers-reduced-motion: no-preference, the same test showcase.js makes. */
.showcase { position: relative; padding: clamp(104px, 13vw, 184px) var(--gutter); }
.sc-pin { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 28px; }
.sc-copy { display: contents; }
.sc-final { order: 1; grid-column: 1 / -1; margin: 0 0 clamp(40px, 5vw, 64px); text-align: center; }
.sc-stage { order: 2; grid-column: 1 / -1; }
.sc-cap { order: 3; margin-top: 44px; }
.sc-tag, .sc-rail, .sc-skip, .sc-pause, .sc-rig > .halo, .sc-voice, .sc-rig .float-chip { display: none; }
.sc-rig { display: flex; justify-content: center; gap: clamp(12px, 2vw, 28px); }
.sc-rig .device { width: clamp(150px, 15vw, 200px); flex-shrink: 0; }

.sc-cap .eyebrow { margin-bottom: 18px; }
.sc-cap h3 { font-family: var(--display); font-weight: 900; letter-spacing: -.012em; font-size: clamp(24px, 2vw, 30px); line-height: 1; text-wrap: balance; }
.sc-cap h3 em { font-style: italic; color: var(--mint); }
.sc-cap p { margin-top: 14px; color: var(--ink-2); font-size: 16px; max-width: 42ch; text-wrap: pretty; }
.sc-tag { font-family: var(--display); font-weight: 900; letter-spacing: -.02em; font-size: clamp(44px, 5.6vw, 96px); line-height: .96; }
.sc-tag > span { display: block; }
.sc-tag .glow {
  font-style: italic; padding-right: .08em;
  background: linear-gradient(100deg, var(--mint-hi) 0%, var(--mint) 30%, var(--icon-amber-b) 52%, var(--mint) 72%, var(--mint-hi) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 9s linear infinite;
}
/* scrubbed details inside the screens (showcase.js drives --fill; .press is the tap) */
.sc-rig .conduit::before { transform: scaleY(var(--fill, 1)); transform-origin: top; }
.sc-rig .co-pay { transition: transform .2s, opacity .2s; }
.sc-rig .co-pay.press { transform: scale(.97); opacity: .82; }

@media (max-width: 960px) {
  .sc-rig { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .sc-rig::-webkit-scrollbar { display: none; }
  .sc-rig .device { width: min(56vw, 240px); scroll-snap-align: center; }
}

/* ── the film ── */
@media (prefers-reduced-motion: no-preference) {
  .js .showcase { padding: 0 0 clamp(56px, 8vw, 120px); }
  /* one screen of pin + 6.1 of scroll: the sum of showcase.js's chapter lengths */
  .js .sc-track { height: calc(100svh * 7.1); }
  .js .sc-pin { position: sticky; top: 0; display: block; max-width: none; height: 100svh; overflow: hidden; }
  .js .sc-stage { position: absolute; inset: 72px 0 60px; display: grid; place-items: center; perspective: 1600px; }
  .js .sc-rig {
    position: relative; display: block; overflow: visible; margin: 0; padding: 0;
    width: max(220px, min(clamp(250px, 24vw, 320px), calc((100svh - 190px) * .462))); aspect-ratio: 390 / 844;
    perspective: 1800px; will-change: transform;
  }
  .js .sc-rig .device { position: absolute; inset: 0; width: 100%; transition: none; will-change: transform, opacity; }
  .js .sc-rig .device:not(.sc-voice) { opacity: 0; visibility: hidden; } /* the voice phone leads until showcase.js takes over */
  .js .sc-voice { display: block; }
  .js .sc-voice .sheet, .js .sc-voice .notif, .js .sc-voice .editor { will-change: transform, opacity; }
  .js .sc-rig > .halo { display: block; width: 190%; left: 50%; top: 50%; translate: -50% -50%; }

  /* the hero's floating chips, just off the phone's edge, level with screen space they can't hide
     (the gap between transcript and waveform; the dimmed editor above the sheet) */
  .js .sc-rig .float-chip { display: inline-flex; opacity: 0; visibility: hidden; bottom: auto; }
  .js .sc-rig .chip-lang { top: 52%; right: 95%; left: auto; }
  .js .sc-rig .chip-sent { top: 36%; left: 95%; right: auto; }
  .js .sc-rig .chip-paid { top: 25%; right: 95%; left: auto; }

  .js .sc-copy { display: block; position: absolute; z-index: 3; inset: 0; max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); pointer-events: none; }
  .js .sc-tag, .js .sc-cap, .js .sc-final { position: absolute; margin: 0; }
  .js .sc-tag > span, .js .sc-cap, .js .sc-final { opacity: 0; visibility: hidden; }
  .js .sc-tag { display: block; left: var(--gutter); top: 50%; translate: 0 -50%; width: calc((100% - 2 * var(--gutter)) * .46); }
  .js .sc-cap { right: var(--gutter); top: 50%; translate: 0 -50%; width: calc((100% - 2 * var(--gutter)) * .42); }
  .js .sc-cap h3 { font-size: clamp(32px, 3.4vw, 50px); }
  .js .sc-cap p { margin-top: 18px; font-size: 18px; }
  .js .sc-final { left: var(--gutter); right: var(--gutter); top: calc(var(--nav-h) + 3svh); }

  .js .sc-rail {
    display: flex; position: absolute; z-index: 5; left: 50%; bottom: 16px; translate: -50% 0; gap: 2px; padding: 4px; border-radius: 99px;
    background: rgba(18,26,22,.5); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 0 0 1px var(--hair-soft); transition: opacity .5s var(--ease), translate .5s var(--ease);
  }
  .js .sc-rail.gone { opacity: 0; translate: -50% 14px; pointer-events: none; }
  .sc-rail button { border: 0; background: none; cursor: pointer; padding: 9px 14px; border-radius: 99px; font: 600 13px/1 var(--sans); color: var(--ink-3); white-space: nowrap; transition: color .3s, background .3s; }
  .sc-rail button:hover { color: var(--ink-2); }
  .sc-rail button[aria-current="step"] { color: #fff; background: rgba(255,255,255,.08); }

  /* the glass pills over the film, filling as it plays itself: Skip (desktop) and the phones' Pause · Play · Replay */
  .js .sc-skip, .js .sc-pause {
    position: absolute; z-index: 6; right: var(--gutter); bottom: 16px; border: 0; border-radius: 99px; overflow: hidden; cursor: pointer; color: #fff;
    background: rgba(18,26,22,.5); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 0 0 1px var(--hair-soft);
  }
  .sc-skip::before, .sc-pause::before { content: ""; position: absolute; inset: 0; background: rgba(135,189,159,.2); transform-origin: left; transform: scaleX(var(--k, 0)); }
  .sc-skip > span, .sc-pause > svg { position: relative; }
  .sc-skip:hover, .sc-pause:hover { box-shadow: inset 0 0 0 1px var(--mint); }
  /* Skip: while the film plays itself, the one way out, pulsing when the wheel is held */
  .js .sc-skip {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; font: 600 13px/1 var(--sans);
    opacity: 0; visibility: hidden; translate: 0 10px; transition: opacity .5s var(--ease), translate .5s var(--ease), visibility 0s .5s;
  }
  .js .sc-playing .sc-skip { opacity: 1; visibility: visible; translate: none; transition: opacity .5s var(--ease), translate .5s var(--ease); }
  .sc-skip.nudge { animation: skipNudge .7s var(--ease); }
  @keyframes skipNudge { 35% { scale: 1.1; box-shadow: inset 0 0 0 1px var(--mint), 0 0 24px rgba(135,189,159,.45); } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 960px) {
  /* phones: captions on top, the phone centered beneath, no side-to-side glide */
  .js .sc-stage { inset: 36% 0 52px; }
  .js .sc-rig { width: max(150px, min(60vw, calc((64svh - 72px) * .462))); }
  .js .sc-tag, .js .sc-cap { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--nav-h) + 12px); translate: none; text-align: center; }
  .js .sc-tag { font-size: clamp(36px, 10vw, 54px); }
  .js .sc-cap h3 { font-size: clamp(28px, 7.4vw, 36px); }
  .js .sc-cap p { margin: 12px auto 0; font-size: 15px; line-height: 1.5; }
  .js .sc-final { top: calc(var(--nav-h) + 12px); font-size: clamp(32px, 8.4vw, 44px); }
  .js .sc-rig .chip-lang { right: 64%; }
  .js .sc-rig .chip-sent { left: 64%; }
  .js .sc-rig .chip-paid { right: 60%; }
  /* the rail becomes a page control: dots, the current one stretched */
  .sc-rail button { padding: 8px 5px; }
  .sc-rail button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sc-rail button::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--ink-4); transition: width .4s var(--ease), background .3s; }
  .sc-rail button[aria-current="step"] { background: none; }
  .sc-rail button[aria-current="step"]::before { width: 18px; background: var(--mint); }
  /* the reel (showcase.js): a screen tall, playing itself in place, so no scroll length; Pause · Play · Replay stands in for Skip */
  .js .sc-track { height: 100svh; }
  .js .sc-skip { display: none; }
  .js .sc-pause { display: grid; place-items: center; width: 40px; height: 40px; bottom: 11px; padding: 0; }
  .sc-pause > svg { display: none; width: 14px; height: 14px; }
  .sc-pause[data-state="playing"] .i-pause, .sc-pause[data-state="paused"] .i-play, .sc-pause[data-state="ended"] .i-replay { display: block; }
}