/* ============================================================
   ACT I · CAPTURE — direction A, "The line-up"
   A pinned studio stage the height of an act. Each role arrives in turn
   (body-worn → in-vehicle → 360° → tactical → fixed & site), the product in its own
   studio light, the role set at act scale like Acts II and III.
   Uses the site tokens from styles.css; nothing here touches another section.
   ============================================================ */
.capA{
  --capA-step:68vh;            /* scroll per role */
  --capA-n:6;                  /* roles: the act pins for one screen plus a step per role after the first */
  --capA-gx:6vw;
  --capA-ease:cubic-bezier(.16,1,.3,1);
  position:relative;
  height:calc(100vh + (var(--capA-n) - 1) * var(--capA-step));
  height:calc(100svh + (var(--capA-n) - 1) * var(--capA-step));
  background:var(--bg);
}
.capA-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg);isolation:isolate;}

/* ---- the studio frames (one per role, stacked; the active one is lit) ---- */
.capA-frames{position:absolute;inset:0;z-index:0;}
.capA-frame{position:absolute;inset:0;display:block;opacity:0;transition:opacity 1s var(--capA-ease);}
.capA-frame.is-on,.capA-frame.is-near{will-change:opacity;}   /* only the lit frame and its neighbours hold a layer */
.capA-frame.is-on{opacity:1;}
.capA-frame img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:70% 100%;
  transform:scale(var(--push,1));transform-origin:68% 74%;
  will-change:transform;
}
/* the stage arrives: the first frame settles in as the act comes on screen */
.js .capA .capA-frame[data-i="0"] img{transition:transform 1.6s var(--capA-ease);}
.js .capA:not(.is-arrived) .capA-frame[data-i="0"] img{transform:scale(1.07);}

/* legibility + seams: copy side and the act's top/bottom edges fall into the page black */
.capA-grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,8,10,.86) 0%,rgba(5,8,10,.58) 26%,rgba(5,8,10,.14) 46%,rgba(5,8,10,0) 58%),
  linear-gradient(180deg,#05080a 0%,rgba(5,8,10,.55) 9%,rgba(5,8,10,0) 22%),
  linear-gradient(0deg,#05080a 0%,rgba(5,8,10,0) 6%);}

/* ---- copy ---- */
.capA-head{position:absolute;z-index:2;left:var(--capA-gx);top:calc(84px + 3.5vh);max-width:min(46vw,1200px);}
.capA-kicker{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:clamp(12px,.5rem + .2vw,15px);letter-spacing:.4em;color:var(--teal);font-weight:600;}
.capA-title{margin-top:14px;font-family:"Space Grotesk",sans-serif;font-weight:600;
  font-size:clamp(1.5rem,.9rem + 1.4vw,3.6rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);max-width:20ch;text-wrap:balance;}
.capA-more-m{display:none;}

/* every role sits on the same line; its details run down from there */
.capA-beats{list-style:none;margin:0;padding:0;position:absolute;z-index:2;left:var(--capA-gx);top:37vh;width:min(40vw,880px);}
.capA-beat{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .28s ease;}
.capA-beat.is-on{opacity:1;transition:opacity .25s ease .1s;}
.capA-beat h3{margin:0;font:inherit;}
.capA-role{display:block;width:max-content;overflow:hidden;white-space:nowrap;padding:0 .06em .04em 0;margin-bottom:.06em;
  font-family:"Space Grotesk",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(3rem,min(7.2vw,14.5vh),13rem);line-height:.9;letter-spacing:-.035em;color:var(--ink);
  text-shadow:0 2px 30px rgba(0,0,0,.35);}
.capA-role>span{display:inline-block;transform:translateY(104%);transition:transform .95s var(--capA-ease);}
.capA-beat.is-on .capA-role>span{transform:none;transition-delay:.12s;}
.capA-beat.is-same .capA-role>span{transition:none;transform:none;}   /* 360° → 360°: the role holds, only the model changes */
.capA-beat.is-same-out .capA-role>span{transition:none;}

.capA-name{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.2em .8em;margin-top:clamp(10px,1.6vh,22px);
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(1.15rem,.8rem + .75vw,2.4rem);letter-spacing:-.005em;
  color:var(--ink);text-decoration:none;}
.capA-name small{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;font-size:clamp(10.5px,.5rem + .3vw,15px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.capA-name:hover{color:var(--teal);}
.capA-lead{margin-top:clamp(10px,1.4vh,18px);max-width:44ch;color:#cfd9df;
  font-size:clamp(.98rem,.7rem + .45vw,1.6rem);line-height:1.55;text-wrap:pretty;}
.capA-facts{list-style:none;margin:clamp(14px,2vh,26px) 0 0;padding:0;max-width:min(34rem,100%);border-top:1px solid rgba(255,255,255,.12);}
.capA-facts li{display:flex;justify-content:space-between;gap:16px;padding:9px 0 8px;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:clamp(.88rem,.7rem + .3vw,1.3rem);color:var(--ink);font-variant-numeric:tabular-nums;}
.capA-facts li span{color:var(--muted);text-align:right;}
.capA-note{margin-top:12px;max-width:52ch;font-size:clamp(.8rem,.6rem + .2vw,1rem);line-height:1.45;color:var(--muted);}

/* beat swap: copy fades and rises; the facts follow the role word */
.capA-beat .capA-name,.capA-beat .capA-lead,.capA-beat .capA-facts,.capA-beat .capA-note{opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .6s var(--capA-ease);}
.capA-beat.is-on .capA-name{opacity:1;transform:none;transition-delay:.22s;}
.capA-beat.is-on .capA-lead{opacity:1;transform:none;transition-delay:.3s;}
.capA-beat.is-on .capA-facts{opacity:1;transform:none;transition-delay:.38s;}
.capA-beat.is-on .capA-note{opacity:1;transform:none;transition-delay:.44s;}
.capA-beat:not(.is-on){pointer-events:none;}

/* the act arrives: head and first role come in together */
.js .capA:not(.is-arrived) .capA-head{opacity:0;transform:translateY(18px);}
.capA-head{transition:opacity .9s var(--capA-ease),transform .9s var(--capA-ease);}
.js .capA:not(.is-arrived) .capA-beat.is-on .capA-role>span{transform:translateY(104%);}
.js .capA:not(.is-arrived) .capA-beat.is-on :is(.capA-name,.capA-lead,.capA-facts,.capA-note){opacity:0;transform:translateY(12px);}

/* ---- the role index + the way to the full line ---- */
.capA-foot{position:absolute;z-index:3;left:var(--capA-gx);right:var(--capA-gx);bottom:5vh;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;}
.capA-index{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 14px;flex:1;max-width:min(64vw,1500px);}
.capA-index button{position:relative;display:block;text-align:left;cursor:pointer;background:none;border:0;padding:16px 0 0;color:var(--muted);
  font:inherit;border-top:1px solid rgba(255,255,255,.18);transition:color .3s;}
.capA-index button::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--teal);
  transform:scaleX(var(--fill,0));transform-origin:left center;box-shadow:0 0 12px rgba(52,198,212,.55);}
.capA-index b{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;font-size:clamp(11px,.4rem + .2vw,14px);letter-spacing:.24em;text-transform:uppercase;}
.capA-index span{display:block;margin-top:5px;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:clamp(.9rem,.7rem + .3vw,1.4rem);color:inherit;opacity:.85;}
.capA-index button[aria-current="true"]{color:var(--ink);}
.capA-index button[aria-current="true"] b{color:var(--teal);}
.capA-index button:hover{color:var(--ink);}
.capA-more{flex:none;display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:clamp(1rem,.8rem + .25vw,1.25rem);
  padding:13px 26px;border:1px solid var(--teal);border-radius:30px;background:rgba(5,8,10,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s,color .25s;}
.capA-more:hover{background:var(--teal);color:#04181b;}
.capA-more i{font-style:normal;}

/* ---- no JS: one role, no pin ---- */
html:not(.js) .capA{height:auto;}
html:not(.js) .capA-stage{position:relative;}

/* ---- ultrawide: give the copy more room, keep the type off the product ---- */
@media (min-aspect-ratio:2/1){
  .capA-beats{width:min(36vw,1100px);}
  .capA-grade{background:
    linear-gradient(90deg,rgba(5,8,10,.86) 0%,rgba(5,8,10,.55) 24%,rgba(5,8,10,.12) 42%,rgba(5,8,10,0) 52%),
    linear-gradient(180deg,#05080a 0%,rgba(5,8,10,.55) 9%,rgba(5,8,10,0) 22%),
    linear-gradient(0deg,#05080a 0%,rgba(5,8,10,0) 6%);}
}

/* ---- tablets / small laptops ---- */
@media (max-width:1100px) and (min-aspect-ratio:4/5){
  .capA-beats{width:min(46vw,640px);}
  .capA-lead{display:none;}
}

/* ---- phones (portrait): copy in the dark upper studio, the product on the floor below ---- */
@media (max-aspect-ratio:4/5){
  .capA{--capA-step:56vh;--capA-gx:20px;}
  .capA-frame img{object-position:50% 100%;transform-origin:50% 78%;}
  .capA-grade{background:
    linear-gradient(180deg,#05080a 0%,rgba(5,8,10,.7) 10%,rgba(5,8,10,.35) 30%,rgba(5,8,10,0) 46%),
    linear-gradient(0deg,#05080a 0%,rgba(5,8,10,.6) 6%,rgba(5,8,10,0) 16%);}
  .capA-head{top:calc(70px + 2vh);right:var(--capA-gx);max-width:none;}
  .capA-kicker{font-size:11px;letter-spacing:.34em;}
  .capA-title{margin-top:10px;font-size:clamp(1.3rem,5.6vw,1.8rem);max-width:17ch;}
  .capA-beats{top:calc(70px + 2vh + 132px);right:var(--capA-gx);width:auto;}
  .capA-role{font-size:clamp(2.4rem,12.4vw,4rem);}
  .capA-name{margin-top:8px;font-size:1.1rem;gap:.15em .6em;}
  .capA-name small{font-size:10px;letter-spacing:.16em;}
  .capA-lead{display:none;}
  .capA-facts{margin-top:12px;max-width:none;}
  .capA-facts li{padding:7px 0 6px;font-size:.86rem;}
  .capA-facts{display:none;}   /* 5 Oct (Marc: the products "look really small on the mobile view"): on a phone the role, the model and the photo; the spec rows live on the Hardware page */
  .capA-note{font-size:.72rem;margin-top:8px;}
  .capA-foot{bottom:calc(14px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:stretch;gap:14px;}
  .capA-index{gap:0 6px;max-width:none;}
  .capA-index button{padding-top:10px;}
  .capA-index b,.capA-index span{display:none;}   /* the role is already the headline: the bars just show where you are */
  .capA-index button{height:32px;}   /* a 32 px touch target; the bar is its top edge */
  .capA-more{display:none;}
  .capA-more-m{display:inline-block;margin-top:10px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);text-decoration:none;}
}
/* phones: a frame drawn smaller so its product clears the copy (capture.js fit(), 5 Oct 2026) fades into the stage on every
   side but the floor, and the stage behind it carries the studio's own dark-to-floor tone, so no edge of the photo shows */
@media (max-aspect-ratio:4/5) and (max-width:599px){
  .capA-frames{background:linear-gradient(180deg,#05080a 0%,#0d1012 55%,#1d1f22 100%);}
  .capA-frame.is-fit img{object-fit:contain;object-position:50% 100%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 34%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 34%);
    mask-composite:intersect;}
}
/* portrait tablets: the standard frame, set into the lower 60 % of the stage so the copy keeps the dark top */
@media (max-aspect-ratio:4/5) and (min-width:600px){
  .capA-frame img{top:auto;height:60%;object-position:72% 100%;transform-origin:72% 80%;}
  .capA-frames{background:linear-gradient(180deg,#05080a 0%,#0b0f12 40%,#1a1f24 100%);}
  .capA-role{font-size:clamp(3rem,10vw,5.5rem);}
  .capA-title{font-size:clamp(1.6rem,4.2vw,2.4rem);}
  .capA-facts li:nth-child(n+3){display:flex;}
}
@media (max-aspect-ratio:4/5) and (max-height:700px){
  .capA-facts{display:none;}
}
/* short landscape screens (a phone on its side): one compact line of copy over the product */
@media (min-aspect-ratio:4/5) and (max-height:560px){
  .capA-head{top:64px;}
  .capA-kicker{font-size:10px;}
  .capA-title{font-size:1.1rem;margin-top:6px;max-width:none;}
  .capA-beats{top:auto;bottom:calc(10vh + 44px);width:min(44vw,520px);}
  .capA-beat{top:auto;bottom:0;}
  .capA-role{font-size:min(8vw,16vh);}
  .capA-lead,.capA-facts,.capA-note{display:none;}
  .capA-foot{bottom:12px;}
  .capA-index b{font-size:9px;}
  .capA-index span{display:none;}
  .capA-more{padding:8px 16px;font-size:.85rem;}
}

/* reduced motion: the scroll still moves you role to role; nothing pushes or slides */
@media (prefers-reduced-motion:reduce){
  .capA-frame img{transform:none !important;}
  .capA-role>span{transform:none !important;}
}