/* ============================================================
   Section 2: the process film. Shared by v1.html and v2.html.
   Inherits the hero's CSS tokens (--bg, --accent, --display, ...).
   Desktop + motion: a pinned 5-scene scroll-film.
   Mobile or reduced-motion: a vertical stack (.proc-stacked).
   ============================================================ */

.proc{position:relative;background:
  radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-rgb),.10), transparent 60%),
  var(--bg);}

/* intro: the production-thread lead-in. The headline is a poster; MOVES drops and draws a red
   thread down through the pre-production beats (Pitch, Win, Start, Recon) and into the film below. */
.proc-intro{max-width:var(--maxw);margin:0 auto;padding:clamp(80px,14vh,170px) var(--pad) clamp(40px,7vh,96px);}
.proc-kick{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--accent);font-weight:700;display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.proc-kick::before{content:"";width:26px;height:1px;background:var(--accent);}
.proc-title{font-family:var(--display);text-transform:uppercase;line-height:.92;letter-spacing:.004em;color:var(--cream);font-size:clamp(34px,6.4vw,88px);max-width:16ch;display:flex;flex-direction:column;}
.proc-title .pt-w{display:block;}
.proc-title .moves{--movegap:clamp(64px,9vh,104px);color:var(--accent);will-change:transform;margin:clamp(4px,.9vh,12px) 0 var(--movegap);transform:translateY(calc(var(--movegap) * var(--mp,0) * .9));}
.proc-sub{font-family:var(--body);color:var(--muted);font-size:clamp(15px,2vw,19px);line-height:1.6;max-width:54ch;margin-top:18px;}

/* the thread + pre-production beats. --rx = the rail x, shared by the rail, the nodes and the arrow. */
.proc-thread{--rx:clamp(5px,.8vw,11px);position:relative;margin-top:clamp(22px,4.5vh,56px);padding-bottom:clamp(30px,5vh,52px);}
.pt-rail{position:absolute;left:var(--rx);top:2px;bottom:0;width:2px;transform:translateX(-1px);border-radius:2px;background:rgba(var(--accent-rgb),.14);overflow:hidden;}
.pt-rail-fill{position:absolute;inset:0;transform:scaleY(0);transform-origin:top;will-change:transform;
  background:linear-gradient(rgba(var(--accent-rgb),.85),var(--accent));box-shadow:0 0 12px rgba(var(--accent-rgb),.55);}
.pt-beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(15px,2.8vh,30px);}
.pt-beat{position:relative;padding-left:calc(var(--rx) + clamp(20px,2.8vw,44px));display:flex;align-items:baseline;gap:clamp(11px,1.6vw,20px);
  opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
.pt-beat.lit{opacity:1;transform:none;}
.pt-node{position:absolute;left:var(--rx);top:.42em;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--bg);border:2px solid rgba(var(--accent-rgb),.5);transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;}
.pt-beat.lit .pt-node{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.7);}
.pt-tag{flex:0 0 auto;font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:clamp(12px,1.35vw,15px);color:var(--cream);min-width:clamp(58px,6.5vw,92px);}
.pt-note{font-family:var(--body);font-size:clamp(13px,1.5vw,17px);line-height:1.3;color:var(--muted);}
.pt-into{position:absolute;left:var(--rx);bottom:2px;transform:translateX(-50%);opacity:0;transition:opacity .5s ease;}
.pt-into.lit{opacity:1;}
.pt-arrow{display:block;width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);box-shadow:2px 2px 9px rgba(var(--accent-rgb),.45);}
/* the ember riding the thread's tip (the fuse-lit read; matches the trail fuse + bridge sparks) */
.pt-spark{position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#ffe0b0,#ff7a45 46%,rgba(var(--accent-rgb),0) 72%);box-shadow:0 0 10px 3px rgba(255,120,60,.7),0 0 4px 1px rgba(255,176,112,.9);}
/* belt-and-braces composed state (JS adds .lead-static on reduced-motion / no-gsap) */
.lead-static .pt-rail-fill{transform:scaleY(1);}
.lead-static .pt-beat{opacity:1;transform:none;}
.lead-static .pt-into{opacity:1;}
.lead-static .pt-spark{display:none;}
/* phones: tighten the MOVES drop-room and the thread lead so the poster is not cramped */
@media(max-width:760px){
  .proc-title .moves{--movegap:clamp(52px,8vh,74px);margin-top:6px;}
  .proc-thread{margin-top:clamp(18px,3.5vh,34px);}
}

/* the pinned stage */
.proc-pin{position:relative;height:100vh;overflow:hidden;}
.proc-scene{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none;}
.proc-scene.active{opacity:1;pointer-events:auto;}

/* world layer: graded film behind the phone */
.proc-world{position:absolute;inset:0;z-index:0;overflow:hidden;background:#070708;}
.proc-world img,.proc-world video{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.14) saturate(.86) brightness(1.02);transform:scale(1.04);}
/* the active plate drifts slowly (ken-burns), so the background reads as moving film rather than a static still */
@keyframes procKen{from{transform:scale(1.05)}to{transform:scale(1.13) translate3d(-1.4%,-1%,0)}}
.proc-scene.active .proc-world img,.proc-scene.active .proc-world video{animation:procKen 9s ease-out both;will-change:transform;}
.proc-world::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(135deg,rgba(18,46,66,.30),transparent 46%,rgba(255,150,80,.20));}
.proc-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(90% 80% at 60% 45%,transparent 38%,rgba(6,5,4,.82) 100%),
  linear-gradient(to right, rgba(6,5,4,.9), rgba(6,5,4,.55) 30%, transparent 60%);}
/* the capture flash: a quick bloom as the shot is taken and the phone reveals */
.proc-flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(60% 50% at 50% 46%,#fff,rgba(255,255,255,.55) 38%,transparent 74%);}
/* per-stage grade. RECON gritty/raw; SHOOT DAY lifted from flat backlot grey to graded cinematic */
.proc-scene[data-stage="recon"] .proc-world video,
.proc-scene[data-stage="recon"] .proc-world img{filter:contrast(1.22) saturate(.82) brightness(.8);}
.proc-scene[data-stage="shoot"] .proc-world video,
.proc-scene[data-stage="shoot"] .proc-world img{filter:contrast(1.24) saturate(1) brightness(.64) sepia(.28);object-position:24% center;}
/* WRAP: golden bloom is bright, so a stronger bottom-left scrim keeps the copy legible at the climax */
.proc-scene[data-stage="wrap"] .proc-scrim{background:
  radial-gradient(90% 80% at 60% 42%,transparent 30%,rgba(6,5,4,.86) 100%),
  linear-gradient(to right, rgba(6,5,4,.95), rgba(6,5,4,.6) 34%, transparent 64%),
  linear-gradient(to top, rgba(6,5,4,.82), transparent 42%);}

/* the constant phone (identical frame in every scene, so it reads as one) */
.proc-phone{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(290px,23vw);aspect-ratio:9/19;border-radius:34px;background:#050505;
  border:1px solid rgba(236,230,218,.16);overflow:hidden;
  box-shadow:0 44px 120px rgba(0,0,0,.78),0 0 0 6px #131313,0 0 90px rgba(var(--accent-rgb),.14);}
.proc-phone::after{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:5px;border-radius:99px;background:#000;z-index:4;}
.proc-screen{position:absolute;inset:5px;border-radius:29px;overflow:hidden;background:#0a0a0b;
  display:flex;flex-direction:column;}

/* the REAL product screen: native full-frame captures only (393x852, the phone's own aspect),
   always cover-fitted, so no screen can ever stretch or skew. The sizzle video layers on top
   once it can play; the stills are its poster and the reduced-motion state. */
.ps{position:absolute;inset:0;background:#0a0a0b;}
.ps-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.ps-shot.b{opacity:0;will-change:opacity;}
.ps-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .45s ease;}
.ps-vid.on{opacity:1;}

/* per-stage copy card (bottom-left) */
.proc-copy{position:absolute;z-index:3;left:var(--pad);bottom:clamp(8%,12vh,15%);max-width:min(40vw,440px);}
.proc-copy .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);}
.proc-copy .task{font-family:var(--display);text-transform:uppercase;line-height:.95;letter-spacing:.004em;color:var(--cream);font-size:clamp(28px,4.4vw,58px);margin:6px 0 2px;}
.proc-copy .punch{font-family:var(--display);text-transform:uppercase;color:var(--cream);font-size:clamp(16px,2.2vw,26px);line-height:1.05;margin-top:10px;}
.proc-copy .det{font-family:var(--body);color:var(--cream);opacity:.92;font-size:14px;line-height:1.55;margin-top:12px;max-width:38ch;}

/* sticky timeline rail (right), persistent across scenes */
.proc-rail{position:absolute;z-index:4;right:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:clamp(14px,2.4vh,26px);}
.proc-rail .step{display:flex;align-items:center;gap:10px;justify-content:flex-end;opacity:.4;transition:opacity .4s ease;cursor:default;}
.proc-rail .step.on{opacity:1;}
.proc-rail .step .lab{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;font-size:clamp(14px,1.5vw,20px);color:var(--cream);line-height:1;}
.proc-rail .step.on .lab{color:var(--accent);}
.proc-rail .step .chip{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:7px;padding:2px 5px;border-radius:3px;}
.proc-rail .step .chip.live{background:var(--accent);color:var(--accent-ink);font-weight:700;}
.proc-rail .step .chip.soon{border:1px solid var(--line);color:var(--muted);}
.proc-rail .step .dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--line);flex:0 0 auto;}
.proc-rail .step.on .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.7);}

/* ===== mobile + reduced-motion: each phase is a full-viewport cinematic frame. The graded plate fills the
   screen, the phone overlays on top, the copy overlays at the bottom over a scrim, and the phone + copy
   fade-and-rise in as each phase enters (no pin, no dead space). ===== */
.proc-stacked .proc-pin{height:auto;overflow:visible;}
/* each phase is a full-viewport panel in normal flow (NO overlap): a gentle scroll-snap makes it briefly
   pause when its top hits the top of the viewport, so the user views each of the 5 in full before scrolling
   on, then the next scrolls up normally. (Robust CSS scroll-snap, not the janky ScrollTrigger.pin.) */
.proc-stacked .proc-scene{position:relative;opacity:1;pointer-events:auto;
  min-height:100svh;min-height:100lvh;padding:0;display:block;overflow:hidden;border-top:1px solid var(--line-2);
  /* 100lvh, not svh: while the user scrolls, iOS Safari hides its toolbar and the window grows
     ~100px; an svh-tall scene then leaves a strip of the NEXT scene visible below it (two
     sections at once). lvh fills the scrolled window; desktop/headless lvh==svh, unchanged. */
  scroll-snap-align:start;}   /* proximity catch only: snap-stop:always was the hard yank */
.proc-stacked .proc-world{position:absolute;inset:0;height:auto;border-radius:0;}
.proc-stacked .proc-scrim{position:absolute;inset:0;background:
  linear-gradient(to top, rgba(6,5,4,.95) 5%, rgba(6,5,4,.5) 38%, rgba(6,5,4,.08) 66%, transparent 80%),
  radial-gradient(120% 78% at 50% 32%, transparent 40%, rgba(6,5,4,.5));}
.proc-stacked .proc-phone{position:absolute;left:50%;margin:0;z-index:2;
  /* the phone must never collide with the bottom-anchored copy or the fixed nav: its width is
     capped by the height LEFT OVER above the copy zone (phone box is ~2.12x its width tall),
     and it centres in that free zone. At 844svh+ this renders identically to the old fixed
     238px / top:40%; on short Safari viewports (~660svh) it shrinks instead of overlapping.
     Anchored in svh (not % of the now-lvh-tall scene) so the iOS toolbar delta cannot push
     the phone down into the copy. */
  top:calc(50svh - 90px);width:min(238px,60vw,calc((100svh - 340px)/2.12));
  opacity:0;transform:translate(-50%,-46%) scale(.96);transition:opacity .7s ease,transform .7s ease;}
.proc-stacked .proc-scene.shown .proc-phone{opacity:1;transform:translate(-50%,-50%) scale(1);}
.proc-stacked .proc-copy{position:absolute;left:var(--pad);right:var(--pad);
  /* the copy keeps its position measured from the SMALL viewport's fold, so it is never cut
     when the iOS toolbar is visible; the extra lvh strip below it is breathing room */
  bottom:clamp(40px,8svh,96px);bottom:calc(100lvh - 100svh + clamp(40px,8svh,96px));top:auto;max-width:none;z-index:3;
  opacity:0;transform:translateY(22px);transition:opacity .7s ease .12s,transform .7s ease .12s;}
.proc-stacked .proc-scene.shown .proc-copy{opacity:1;transform:none;}
.proc-stacked .proc-copy .task{font-size:clamp(38px,11vw,64px);}
.proc-stacked .proc-rail{display:none;}
/* mobile stack, stills-only fallback: b resolves on its own beat once the phase is shown
   (the sizzle video, when it plays, sits above both stills anyway) */
.proc-stacked .proc-scene.shown .ps-shot.b{opacity:1;transition:opacity .9s ease 1.05s;}
/* mobile stack has every scene active at once; skip the ken-burns so phones do not run 5 plate animations */
.proc-stacked .proc-scene.active .proc-world img,.proc-stacked .proc-scene.active .proc-world video{animation:none;transform:scale(1.04);}

@media(prefers-reduced-motion:reduce){
  .ps-shot.b{opacity:1!important;transition:none!important;}
  .ps-vid{display:none!important;}
  .proc-scene.active .proc-world img,.proc-scene.active .proc-world video{animation:none;transform:scale(1.04);}
  .proc-stacked .proc-phone{opacity:1;transform:translate(-50%,-50%) scale(1);transition:none;}
  .proc-stacked .proc-copy{opacity:1;transform:none;transition:none;}
  .proc-title .moves{--movegap:clamp(12px,2vh,20px)!important;transform:none!important;}
  .pt-rail-fill{transform:scaleY(1)!important;}
  .pt-beat{opacity:1!important;transform:none!important;}
  .pt-into{opacity:1!important;}
}