/* =====================================================================
   CoreTech "Raptor 16 film": scroll-driven 3D product section (index)
   ---------------------------------------------------------------------
   Modes (classes on #raptor-film, set by the inline boot script and
   assets/film-3d.js):
     (none)    static stacked layout: photo poster + all chapter copy.
               Default for no-JS / no-WebGL / Effects off / errors.
     .boot     sticky cinematic shell while three.js + the GLB load
               (poster + intro copy + loader), avoids a layout jump.
     .live     full scroll-scrubbed film (canvas visible, poster faded).
     .gl-still reduced motion with Effects manually on: static layout,
               but the poster slot holds one rendered 3D frame.
   NOTE: no overflow:hidden on .ct-film or any ancestor (breaks sticky).
         The stage clips itself with overflow:clip.
   Plain CSS, no Tailwind utilities, so tw.css needs no rebuild.
   ===================================================================== */

/* Registered so the scrim halves can transition between copy sides */
@property --scrimL { syntax: '<number>'; inherits: true; initial-value: .78; }
@property --scrimR { syntax: '<number>'; inherits: true; initial-value: 0; }

.ct-film { position: relative; background: var(--ink-950, #05070b); border-bottom: 1px solid var(--line, rgba(160,185,225,.09)); }
.ct-film-stage { position: relative; isolation: isolate; max-width: 1280px; margin: 0 auto; padding: 96px 24px 72px; }
.ct-film-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 55% at 64% 48%, #152440 0%, #0a0f1a 52%, #05070b 100%); }
.ct-film-gl, .ct-film-scrim, .ct-film-rail, .ct-film-bar, .ct-film-foot, .ct-film-load { display: none; }

/* ---------------- cinematic shell (.boot while loading, .live running) ---------------- */
.ct-film:is(.boot, .live) { height: 760vh; }
.ct-film:is(.boot, .live) .ct-film-stage { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; padding: 0; overflow: clip; }
.ct-film:is(.boot, .live) .ct-film-gl { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.ct-film:is(.boot, .live) .ct-film-scrim { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,11,var(--scrimL, .78)) 0%, rgba(5,7,11,0) 46%),
    linear-gradient(270deg, rgba(5,7,11,var(--scrimR, 0)) 0%, rgba(5,7,11,0) 46%),
    linear-gradient(180deg, rgba(5,7,11,.55) 0%, transparent 18%, transparent 78%, rgba(5,7,11,.9) 100%);
  transition: --scrimL .6s, --scrimR .6s; }
.ct-film.boot .ct-film-load { display: flex; position: absolute; left: 50%; bottom: 96px; z-index: 6; transform: translateX(-50%);
  align-items: center; gap: 10px; white-space: nowrap; font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: #97a1b0; }
.ct-film.boot .ct-film-load .ct-p3d-spin { width: 28px; height: 28px; border-width: 2px; }
/* the photo poster doubles as the loading preview (masked + dimmed so it isn't mistaken for the 3D) */
.ct-film:is(.boot, .live) .ct-film-poster { position: absolute; z-index: 0; top: 64px; bottom: 0; right: 0; width: 62%; margin: 0; display: grid; place-items: center;
  opacity: .55; filter: saturate(.85); transition: opacity .6s ease; }
/* the mask sits on the photo box itself so every edge of the picture melts into the stage */
.ct-film:is(.boot, .live) .ct-film-poster .ct-photo { background: transparent; width: 100%; height: 100%; max-height: 70svh; display: grid; place-items: center; }
.ct-film:is(.boot, .live) .ct-film-poster .ct-photo img { width: auto; height: auto; max-width: 100%; max-height: 100%;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(50% 50% at 50% 50%, #000 50%, transparent 100%); }
.ct-film:is(.boot, .live) .ct-film-poster .ct-photo::after, .ct-film:is(.boot, .live) .ct-film-cap { display: none; }
.ct-film.live .ct-film-poster { opacity: 0; pointer-events: none; }

/* ---------------- chapters (shared) ---------------- */
.ct-film-chap { position: relative; z-index: 5; }
.ct-film-h { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: clamp(2.2rem, 4.4vw, 3.9rem); line-height: .98; letter-spacing: -.012em; color: #fff; margin-top: 14px; text-wrap: balance; }
.ct-film-chap[data-c="0"] .ct-film-h, .ct-film-chap[data-c="6"] .ct-film-h { font-size: clamp(2.5rem, 5.2vw, 4.6rem); font-weight: 700; }
.ct-film-line { margin-top: 18px; max-width: 40ch; font-size: 17px; line-height: 1.6; color: #c3cad5; }
.ct-film-specs { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ct-film-specs > div { display: flex; flex-direction: column-reverse; gap: 4px; min-width: 112px; padding: 10px 12px; border-radius: 10px;
  background: rgba(8, 10, 15, .72); border: 1px solid rgba(142, 197, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ct-film-specs dt { font: 500 11px/1.2 'JetBrains Mono', monospace; color: #97a1b0; }
.ct-film-specs dd { margin: 0; font: 600 20px/1 'Chakra Petch', sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.ct-film-badges { margin-top: 22px; display: flex; gap: 8px; }
.ct-film-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; }
.ct-film-more { display: inline-block; margin-top: 14px; font-size: 13px; color: #97a1b0; }
.ct-film-more:hover { color: #fff; }

/* ---------------- chapters in the cinematic shell ---------------- */
.ct-film:is(.boot, .live) .ct-film-chap { position: absolute; top: 50%; max-width: 440px; pointer-events: none; transform: translateY(calc(-50% + 32px)); }
.ct-film:is(.boot, .live) .ct-film-chap[data-side="l"] { left: max(96px, calc((100vw - 1280px) / 2 + 96px)); }
.ct-film:is(.boot, .live) .ct-film-chap[data-side="r"] { right: max(24px, calc((100vw - 1280px) / 2 + 24px)); }
/* inactive chapters: opacity only (never visibility/display), so screen readers still read them in order */
.ct-film:is(.boot, .live) .ct-film-chap > * { opacity: 0; transform: translateY(-16px); filter: blur(6px);
  transition: opacity .3s cubic-bezier(.4,0,1,1), transform .3s cubic-bezier(.4,0,1,1), filter .3s; }
.ct-film:is(.boot, .live) .ct-film-chap:not(.is-on) > * { transition-delay: 0s; }
.ct-film:is(.boot, .live) .ct-film-chap.is-on { pointer-events: auto; }
.ct-film:is(.boot, .live) .ct-film-chap.is-on > * { opacity: 1; transform: none; filter: none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), filter .6s; }
.ct-film:is(.boot, .live) .ct-film-chap.is-on > :nth-child(2) { transition-delay: .06s; }
.ct-film:is(.boot, .live) .ct-film-chap.is-on > :nth-child(3) { transition-delay: .12s; }
.ct-film:is(.boot, .live) .ct-film-chap.is-on > :nth-child(4) { transition-delay: .18s; }
.ct-film:is(.boot, .live) .ct-film-chap.is-on > :nth-child(n+5) { transition-delay: .24s; }
/* enter starts from below (24px), exit leaves upward (-16px) */
.ct-film:is(.boot, .live) .ct-film-chap:not(.is-on):not(.was-on) > * { transform: translateY(24px); }
.ct-film.boot .ct-film-chap[data-c="0"] { pointer-events: auto; }
.ct-film.boot .ct-film-chap[data-c="0"] > * { opacity: 1; transform: none; filter: none; }   /* intro readable while loading */
.ct-film-chap .ct-eyebrow { clip-path: inset(-20% 100% -20% 0); transition: clip-path .9s cubic-bezier(.7,0,.2,1) .05s; }
.ct-film-chap.is-on .ct-eyebrow, .ct-film:not(.boot):not(.live) .ct-eyebrow, .ct-film.boot [data-c="0"] .ct-eyebrow { clip-path: inset(-20% -2% -20% 0); }

/* ---------------- rail (desktop) ---------------- */
.ct-film:is(.boot, .live) .ct-film-rail { display: block; position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
  left: max(24px, calc((100vw - 1280px) / 2 + 24px)); }
.ct-film-rail ol { position: relative; display: grid; gap: 14px; margin: 0; padding: 0 0 0 14px; list-style: none; }
.ct-film-rail ol::before, .ct-film-rail ol::after { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; }
.ct-film-rail ol::before { background: rgba(255,255,255,.08); }
.ct-film-rail ol::after { background: var(--volt, #2f86ff); box-shadow: 0 0 12px var(--volt, #2f86ff); transform-origin: top; transform: scaleY(var(--fp, 0)); }
.ct-film-rail button { display: flex; align-items: center; gap: 10px; min-height: 28px; min-width: 44px; padding: 2px 4px; background: none; border: 0; cursor: pointer;
  font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .2em; color: #6c7686; transition: color .25s; }
.ct-film-rail button span { opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; text-transform: uppercase; white-space: nowrap; }
.ct-film-rail button:hover { color: #c3cad5; }
.ct-film-rail button:is(:hover, :focus-visible) span, .ct-film-rail button[aria-current="step"] span { opacity: 1; transform: none; }
.ct-film-rail button[aria-current="step"] { color: #fff; }
/* while the copy sits on the left, the active label would run into it: index only (label on hover/focus) */
.ct-film-rail[data-side="l"] button[aria-current="step"]:not(:hover):not(:focus-visible) span { opacity: 0; }

/* ---------------- foot counter + cue ---------------- */
.ct-film:is(.boot, .live) .ct-film-foot { display: flex; position: absolute; z-index: 4; bottom: 28px; left: max(24px, calc((100vw - 1280px) / 2 + 24px));
  gap: 24px; align-items: center; font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: #6c7686; }
.ct-film-count b { color: var(--volt-hi, #8ec5ff); font-weight: 500; }
.ct-film-cue { display: inline-flex; align-items: center; gap: 10px; color: #97a1b0; transition: opacity .3s; }
.ct-film-cue::before { content: ''; width: 28px; height: 1px; background: var(--volt, #2f86ff); box-shadow: 0 0 8px var(--volt, #2f86ff); }

/* ---------------- skip link ---------------- */
.ct-film-skip { position: absolute; left: -9999px; }
.ct-film-skip:focus { position: fixed; left: 16px; top: 76px; z-index: 70; display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
  border-radius: 10px; font-weight: 600; font-size: 13px; color: #fff; background: linear-gradient(180deg, #3d90ff, #1d6bea); }
#after-film:focus { outline: none; }

/* ---------------- static (fallback) layout ----------------
   One grid; `order` places poster, intro and CTA first while the DOM
   (reading order) stays chapter 0..6. */
.ct-film:not(.boot):not(.live) .ct-film-stage { display: grid; gap: 16px; grid-template-columns: 1fr; }
.ct-film:not(.boot):not(.live) .ct-film-poster { order: 0; position: relative; margin: 0 0 24px; aspect-ratio: 4/3; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 50px 120px -40px rgba(47,134,255,.55), 0 0 0 1px rgba(0,0,0,.4); }
.ct-film:not(.boot):not(.live) .ct-film-poster .ct-photo { position: absolute; inset: 0; }
.ct-film-cap { position: absolute; inset: auto 0 0; z-index: 2; padding: 64px 20px 18px; background: linear-gradient(0deg, #05070b, transparent);
  font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: #97a1b0; }
.ct-film-cap b { display: block; margin-top: 8px; font: 600 24px/1.1 'Chakra Petch', sans-serif; letter-spacing: 0; text-transform: none; color: #fff; }
.ct-film:not(.boot):not(.live) .ct-film-chap[data-c="0"] { order: 1; }
.ct-film:not(.boot):not(.live) .ct-film-chap[data-c="6"] { order: 2; margin: 8px 0 40px; }
.ct-film:not(.boot):not(.live) .ct-film-card { order: 3; padding: 24px; border-radius: var(--radius, 14px);
  background: linear-gradient(180deg, rgba(19,24,35,.9), rgba(13,17,25,.9)); border: 1px solid rgba(255,255,255,.06); }
.ct-film:not(.boot):not(.live) .ct-film-card .ct-film-h { font-size: 20px; line-height: 1.15; }
.ct-film:not(.boot):not(.live) .ct-film-card .ct-film-line { font-size: 14px; color: #97a1b0; }
.ct-film:not(.boot):not(.live) .ct-film-card .ct-film-specs { gap: 4px 16px; margin-top: 16px; }
.ct-film:not(.boot):not(.live) .ct-film-card .ct-film-specs > div { min-width: 0; padding: 6px 0; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ct-film:not(.boot):not(.live) .ct-film-card .ct-film-specs dd { font: 500 18px/1 'JetBrains Mono', monospace; }
@media (min-width: 641px) { .ct-film:not(.boot):not(.live) .ct-film-stage { grid-template-columns: repeat(2, 1fr); }
  .ct-film:not(.boot):not(.live) :where(.ct-film-poster, .ct-film-chap[data-c="0"], .ct-film-chap[data-c="6"]) { grid-column: 1 / -1; } } /* :where keeps specificity low so the desktop grid below wins */
@media (min-width: 1024px) {
  .ct-film:not(.boot):not(.live) .ct-film-stage { grid-template-columns: repeat(5, 1fr); column-gap: 16px; }
  .ct-film:not(.boot):not(.live) .ct-film-poster { grid-column: 1 / span 3; grid-row: span 2; margin: 0 32px 48px 0; }
  .ct-film:not(.boot):not(.live) :is(.ct-film-chap[data-c="0"], .ct-film-chap[data-c="6"]) { grid-column: 4 / span 2; align-self: end; }
  .ct-film:not(.boot):not(.live) .ct-film-chap[data-c="6"] { align-self: start; margin: 32px 0 48px; }
}

/* ---------------- gl-still: one 3D frame in the poster slot ---------------- */
.ct-film.gl-still .ct-film-poster > .ct-photo { display: none; }
.ct-film.gl-still .ct-film-gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-film.gl-still .ct-film-poster { background: radial-gradient(60% 60% at 55% 50%, #152440 0%, #0a0f1a 60%, #05070b 100%); }

/* ---------------- tablet ---------------- */
@media (max-width: 1023px) {
  .ct-film:is(.boot, .live) { height: 720vh; }
  .ct-film:is(.boot, .live) .ct-film-rail { display: none; }
  .ct-film:is(.boot, .live) .ct-film-bar { display: flex; position: absolute; z-index: 4; top: 76px; left: 24px; right: 24px; gap: 4px; }
  .ct-film-bar i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; position: relative; }
  .ct-film-bar i::after { content: ''; position: absolute; inset: 0; background: var(--volt, #2f86ff); transform-origin: left; transform: scaleX(var(--seg, 0)); }
  .ct-film:is(.boot, .live) .ct-film-chap, .ct-film:is(.boot, .live) .ct-film-chap[data-side] { top: auto; left: 24px; right: 24px; bottom: 88px; max-width: 560px; transform: none; }
  .ct-film:is(.boot, .live) .ct-film-scrim { background: linear-gradient(180deg, rgba(5,7,11,.55) 0%, transparent 16%, transparent 46%, rgba(5,7,11,.85) 66%, rgba(5,7,11,.96) 100%); }
  .ct-film:is(.boot, .live) .ct-film-poster { width: 100%; bottom: 42%; }
  .ct-film.boot .ct-film-load { bottom: auto; top: calc(58% + 8px); }  /* under the preview, clear of the copy */
  .ct-film:is(.boot, .live) .ct-film-foot { left: 24px; bottom: 24px; }
  .ct-film-cue { display: none; }
}
/* ---------------- mobile ---------------- */
@media (max-width: 640px) {
  .ct-film:is(.boot, .live) { height: 680vh; }
  .ct-film:is(.boot, .live) .ct-film-bar { top: 72px; left: 16px; right: 16px; }
  .ct-film:is(.boot, .live) .ct-film-chap, .ct-film:is(.boot, .live) .ct-film-chap[data-side] { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .ct-film:is(.boot, .live) .ct-film-poster { bottom: 48%; }
  .ct-film.boot .ct-film-load { top: calc(52% + 8px); }
  .ct-film-h, .ct-film-chap[data-c="0"] .ct-film-h, .ct-film-chap[data-c="6"] .ct-film-h { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .ct-film-line { font-size: 15px; margin-top: 12px; }
  .ct-film-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
  .ct-film-specs > div { min-width: 0; padding: 8px; }
  .ct-film-specs dd { font-size: 17px; }
  .ct-film-specs dt { font-size: 10px; }
  .ct-film-chap[data-c="6"] .ct-film-badges { margin-top: 14px; }
  /* CTA: primary full width, Add to cart + Compare share a row (keeps the laptop above a usable size) */
  .ct-film-chap[data-c="6"] .ct-film-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  .ct-film-chap[data-c="6"] .ct-film-actions .ct-btn { width: 100%; justify-content: center; height: 48px; padding: 0 12px; }
  .ct-film-chap[data-c="6"] .ct-film-actions .ct-btn:first-child { grid-column: 1 / -1; }
  .ct-film:is(.boot, .live) .ct-film-foot { display: none; }
  .ct-film:not(.boot):not(.live) .ct-film-stage { padding: 72px 16px 48px; }
}
/* ---------------- effects off / reduced motion: static and readable ---------------- */
.fx-off .ct-film .ct-film-chap > * { transition: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .ct-film .ct-film-chap > *, .ct-film .ct-film-chap .ct-eyebrow { transition: none !important; filter: none; clip-path: none; } }