/* The stage — the page's first fold: the app, in pieces, flown by the scroll.
   The film's language (the 3D trailer, 25/09) at page scale: one pinned
   frame, a real camera (perspective + a dolly), and every part of the Cuts
   Edit page on its own plane. Scrolling is the playhead: the timeline in
   stage.js is a pure function of time, so stopping the scroll stops the
   film exactly where it is, and scrolling back plays it backwards.

   World units are the phone's points (the app is 390 wide); --k scales the
   world to the viewport. Parts that fly never carry opacity on a
   preserve-3d container (Chrome flattens it): fades live on the leaves. */

.stage{position:relative;height:calc(var(--stage-vh, 900) * 1vh)}
.st-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:var(--paper)}
.st-bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at var(--fx,66%) var(--fy,55%),color-mix(in srgb,var(--surface) 80%,transparent),transparent 72%)}
.st-bg::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1.25px);background-size:18px 18px;opacity:.38;
  -webkit-mask-image:radial-gradient(ellipse 70% 64% at var(--fx,66%) var(--fy,55%),transparent 18%,#000 88%);
  mask-image:radial-gradient(ellipse 70% 64% at var(--fx,66%) var(--fy,55%),transparent 18%,#000 88%)}

/* the camera: the view holds the lens, the cam turns and dollies round the
   focus point, sc scales world units to pixels, aim brings the focus to it */
.st-view{position:absolute;inset:0;pointer-events:none}
.st-cam,.st-sc,.st-aim{position:absolute;transform-style:preserve-3d}
.st-cam{left:0;top:0;width:100%;height:100%}
.st-sc{width:0;height:0}
.st-aim{left:0;top:0;width:0;height:0}
.stage .p3{position:absolute;transform-style:preserve-3d}
.st-view .live{pointer-events:auto}

/* ---------------------------------------------------------------- the app */
.app3{left:-195px;top:-390px;width:390px;height:780px;color:var(--ink)}
.a-base{position:absolute;left:0;top:0;width:390px;height:780px;border-radius:34px;background:var(--paper);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 7%,transparent),0 30px 70px rgba(0,0,0,.16),0 6px 16px rgba(0,0,0,.06)}
.a-part{position:absolute}
/* a part casts its own shadow only while it flies (the film's rule) */
.a-sh{position:absolute;inset:0;border-radius:inherit;box-shadow:0 18px 40px rgba(0,0,0,.18);opacity:0;pointer-events:none}
.a-bar{left:8px;top:12px;width:374px;height:44px;border-radius:12px;background:var(--paper)}
.a-bar .para{position:absolute;left:6px;top:8px;height:28px;padding:0 9px;border-radius:7px;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;font:500 8.5px/1 var(--mono);letter-spacing:.12em;white-space:nowrap}
.a-bar .ttl{position:absolute;left:30px;right:0;top:13px;text-align:center;font:600 14.5px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.a-bar .caps{position:absolute;right:6px;top:8px;width:64px;height:28px;border-radius:14px;background:var(--surface2);
  display:flex;align-items:center;justify-content:space-around;color:var(--ink-3);font:500 13px/1 var(--sans)}
.a-well{left:12px;top:64px;width:366px;height:236px;border-radius:12px;background-color:var(--surface2);
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) .8px,transparent 1px);background-size:8px 8px}
.a-tel{left:9px;top:304px;width:372px;height:38px;border-radius:6px;background:var(--paper)}
.a-tel .offer,.a-tel .review{position:absolute;top:22px;font:500 8.5px/1.2 var(--mono);letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}
.a-tel .offer{left:6px} .a-tel .review{right:6px}
.a-tel .tl{position:absolute;left:6px;top:4px;display:block;font:500 9.5px/1.2 var(--mono);letter-spacing:.06em;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.a-tel .tl .d{color:var(--red)}
.a-tel .tl .was,.a-tel .tl .ar,.a-tel .tl .sep{color:var(--ink-4)} .a-tel .tl .ar,.a-tel .tl .sep{margin:0 4px}

/* the words: one strip per line, so the page can come apart line by line */
.a-words{left:8px;top:348px;width:374px}
.stage .ln{position:absolute;left:0;width:374px;height:27px;border-radius:0}
.stage .ln .tx{position:absolute;left:8px;top:0;white-space:nowrap;font:600 16px/27px var(--sans);letter-spacing:-.012em;color:var(--ink)}
.stage .meas{position:absolute;left:8px;top:0;width:358px;visibility:hidden;font:600 16px/27px var(--sans);letter-spacing:-.012em}
.stage .w{position:relative;border-radius:3px;white-space:nowrap}
.stage .w[data-cut="red"]{color:var(--red)}
.stage .w[data-cut="indigo"]{color:var(--indigo)}
.stage .w .st{position:absolute;left:-2px;right:-2px;top:14px;height:2px;border-radius:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;display:block}
.stage .w[data-tint="indigo"] .st{background:var(--indigo)}
.stage .w .us{position:absolute;left:-2px;right:-2px;top:14px;height:2px;border-radius:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;display:block;transition:transform var(--tick) ease-out}
.stage .w.ucut{color:var(--red)}
.stage .w.ucut .us{transform:scaleX(1)}
.stage .w[data-sel="1"]{background:color-mix(in srgb,var(--azure) 18%,transparent)}
.stage .w[data-now="1"]{background:color-mix(in srgb,var(--azure) 16%,transparent)}
.stage .can-edit .w{cursor:pointer}
.stage .can-edit .w:hover{background:color-mix(in srgb,var(--red) 11%,transparent)}
/* the pause chip: three drawn dots and a duration */
.stage .pz{position:relative;display:flex;width:max-content;align-items:center;gap:3px;height:17px;padding:0 6px;margin:5px 0;border-radius:5px;
  background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line-2);font:500 9px/1 var(--mono);letter-spacing:.02em;color:var(--ink-3);white-space:nowrap}
.stage .pz i{display:block;width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.stage .pz b{font-weight:500;margin-left:2px}
.stage .pz .st{position:absolute;left:4px;right:4px;top:8px;height:1.5px;border-radius:1px;background:var(--ink-3);transform:scaleX(0);transform-origin:0 50%;display:block}

/* the verb bar that answers a selection, and a finger */
.stage .verbs{position:absolute;display:flex;padding:6px 4px;border-radius:12px;background:var(--surface);opacity:0;
  box-shadow:0 10px 30px rgba(0,0,0,.16),0 0 0 1px var(--line)}
.stage .vb{width:54px;display:flex;flex-direction:column;align-items:center;gap:3px;font:500 10.5px/1.1 var(--sans);color:var(--ink-2)}
.stage .vb svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stage .vb.rm{color:var(--red)}
.stage .ring{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;opacity:0;pointer-events:none;
  background:color-mix(in srgb,var(--ink) 14%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 50%,transparent)}

/* the dock: the tools, then the three passes */
.a-dock{left:50px;top:668px;width:290px;height:46px;border-radius:23px;background:var(--surface);
  box-shadow:0 12px 30px rgba(0,0,0,.14),0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent)}
.a-dock .ic{position:absolute;top:13px;width:20px;height:20px}
.a-dock .ic svg{width:20px;height:20px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stage .bb{position:absolute;top:6px;width:34px;height:34px;border-radius:50%;background:var(--surface2)}
.stage .bb .fill{position:absolute;inset:0;border-radius:50%;opacity:0}
.stage .bb svg{position:absolute;left:8px;top:8px;width:18px;height:18px;fill:none;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.stage .bb svg.on{stroke:#fff;opacity:0}
.stage .bb .bl{position:absolute;left:50%;top:44px;transform:translateX(-50%);font:500 6.5px/1 var(--mono);letter-spacing:.04em;color:var(--ink-3);white-space:nowrap;opacity:0}
.a-play{left:20px;top:722px;width:350px;height:44px;border-radius:22px;background:var(--surface);
  box-shadow:0 12px 30px rgba(0,0,0,.14),0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent)}
.a-play .pb{position:absolute;left:10px;top:8px;width:28px;height:28px;border-radius:50%;background:var(--ink)}
.a-play .pb::after{content:'';position:absolute;left:11px;top:8px;border-left:9px solid var(--paper);border-top:6px solid transparent;border-bottom:6px solid transparent}
.a-play .wv{position:absolute;left:48px;top:10px;width:262px;height:24px;display:flex;align-items:center;gap:2.6px}
.a-play .wv i{display:block;flex:1;border-radius:2px;background:var(--line-2)}
.a-play .wv i.on{background:var(--azure)}
.a-play .menu{position:absolute;right:13px;top:14px;width:16px}
.a-play .menu i{display:block;height:2px;border-radius:1px;background:var(--ink-2);margin:0 0 4px}

/* the preview: authored big, carried small inside the well */
.stage .tile{left:-90px;top:-160px;width:180px;height:320px}
.stage .tile .tv{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:var(--scene);
  box-shadow:0 20px 50px rgba(0,0,0,.26),0 0 0 1px rgba(0,0,0,.08)}
.stage .tile video,.stage .tile img,.stage .tile canvas{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.stage .tile .flash{position:absolute;inset:0;background:#fff;opacity:0}
.stage .tile .jump{position:absolute;left:10px;top:10px;font:500 8.5px/1 var(--mono);letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.55);padding:4px 6px;border-radius:999px;opacity:0}

/* ---------------------------------------------------------------- the other way */
.nle{left:-660px;top:-236px;width:1320px;height:472px}
.nle-rl,.nle-tk{position:absolute;left:0;width:1320px}
.nle-rl{top:0;height:26px;border-radius:10px 10px 0 0;background:#232326}
.nle-rl b{position:absolute;top:8px;font:500 8.5px/1 var(--mono);letter-spacing:.06em;color:#86868B;white-space:nowrap}
.nle-rl .tcd{position:absolute;right:14px;top:6px;font:500 11px/1 var(--mono);letter-spacing:.06em;color:#D8D8DC}
.nle-tk{height:37px;background:#1B1B1D;box-shadow:inset 0 -1px 0 #2A2A2E}
.nle-tk.last{border-radius:0 0 10px 10px}
.nle-tk .hd{position:absolute;left:0;top:0;width:74px;height:37px;background:#202023;box-shadow:inset -1px 0 0 #2A2A2E}
.nle-tk .hd b{position:absolute;left:10px;top:9px;font:500 9px/1 var(--mono);letter-spacing:.08em;color:#C9C9CE}
.nle-tk .hd s{position:absolute;left:10px;top:21px;text-decoration:none;font:500 6.5px/1 var(--mono);letter-spacing:.08em;color:#6E6E73;white-space:nowrap}
.nle-tk .ln2{position:absolute;left:74px;top:0;right:0;height:37px}
.stage .cl{position:absolute;top:3px;height:31px;border-radius:4px;overflow:hidden}
.stage .cl .nm{position:absolute;left:5px;top:2px;font:500 6.5px/1 var(--mono);letter-spacing:.04em;color:rgba(255,255,255,.74);white-space:nowrap}
.stage .cl.v{background-color:#3C4A5C;background-image:url('stage/strip-take.jpg');background-size:auto 22px;background-repeat:repeat-x;background-position:0 9px}
.stage .cl.b{background-color:#4A405A;background-image:url('stage/strip-broll.jpg');background-size:auto 22px;background-repeat:repeat-x;background-position:0 9px}
.stage .cl.t{background:#5A4D37} .cl.g{background:#5E4A3E} .cl.c{background:#45474D} .cl.k{background:#5A3E4E}
.stage .cl.adj{background:repeating-linear-gradient(135deg,#3A3A40 0 6px,#333338 6px 12px)}
.stage .cl.t i,.stage .cl.g i,.stage .cl.c i,.stage .cl.k i{position:absolute;left:6px;top:15px;height:4px;border-radius:2px;background:rgba(255,255,255,.3)}
.stage .cl.a{background-color:#2D4536} .cl.r{background-color:#2F3F3A} .cl.m{background-color:#2C3B48} .cl.s{background-color:#4A3838} .cl.o{background-color:#3F3A4F} .cl.e{background-color:#3A4535}
.stage .cl.a,.stage .cl.r,.stage .cl.m,.stage .cl.s,.stage .cl.o,.stage .cl.e{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 1.5px,transparent 1.5px 3.5px,rgba(255,255,255,.13) 3.5px 4.5px,transparent 4.5px 7px);
  background-size:100% 16px;background-repeat:no-repeat;background-position:0 12px}
.stage .kf{position:absolute;width:5px;height:5px;background:#F2D06B;transform:rotate(45deg)}
.stage .vol{position:absolute;left:0;right:0;height:1px;background:rgba(242,208,107,.7)}
.nle .ph{position:absolute;left:0;top:-6px;width:1.5px;height:478px;background:#F2F2F2;box-shadow:0 0 6px rgba(0,0,0,.4)}
.nle .ph::before{content:'';position:absolute;left:-5px;top:0;border-left:5.75px solid transparent;border-right:5.75px solid transparent;border-top:9px solid #F2F2F2}
.nle .um{position:absolute;font:500 8px/1 var(--mono);letter-spacing:.1em;color:#FFD6A0;background:rgba(0,0,0,.5);padding:3px 5px;border-radius:3px;opacity:0;white-space:nowrap}
.nle .blade{position:absolute;width:1.5px;background:#FFFFFF;opacity:0;box-shadow:0 0 4px rgba(255,255,255,.7)}
.nle .selw{position:absolute;background:rgba(255,255,255,.34);border-radius:3px;opacity:0}
.nle .gap{position:absolute;border-radius:3px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 2px,rgba(255,255,255,.05) 2px 6px);opacity:0}
.nle .strike{position:absolute;left:-40px;top:226px;width:1400px;height:14px;border-radius:7px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.2)}

/* ---------------------------------------------------------------- the voice */
.st-hud{position:absolute;inset:0;pointer-events:none}
.stage .slot{position:absolute;opacity:0;pointer-events:none}
.stage .slot.on{pointer-events:auto}
.stage .slot .lbl{display:block;margin-bottom:18px}
.stage .hl{position:relative;font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.026em;line-height:1.04;text-wrap:balance}
.stage .hl .ch{opacity:1}
.stage .hl .hc{position:absolute;left:0;top:0;width:.055em;height:.74em;border-radius:2px;background:var(--azure);opacity:0}
.stage .hl.big{font-size:clamp(46px,6.2vw,92px)}
.stage .hl.mid{font-size:clamp(34px,4.4vw,64px)}
.stage .hl .soft{color:var(--ink-3)}
.stage .slot .sub{margin-top:18px;font-family:var(--sans);font-size:clamp(15px,1.35vw,17px);line-height:1.55;color:var(--ink-3);max-width:40ch}
.stage .slot .cta-line{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.stage .slot .fine{margin-top:16px}
.stage .steps{margin-top:18px;font:500 11px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);max-width:34ch}
.stage .steps span{transition:none}
.stage .steps span[data-on="1"]{color:var(--ink)}
.stage .steps .n{display:block;margin-top:6px;color:var(--ink-4)}
.stage .steps .n[data-on="1"]{color:var(--red)}
.stage .readout{position:relative;height:18px;margin-top:18px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.stage .readout .was{color:var(--ink-4)} .readout .ar{color:var(--ink-4);margin:0 6px} .readout .d{color:var(--red)} .readout .sep{color:var(--ink-4);margin:0 6px}
.stage .readout .r{position:absolute;left:0;top:0;opacity:0}
.stage .hint{margin-top:16px;display:block}
.stage .hint::before{content:'['} .hint::after{content:']'}

/* the station meter: D4 blocks and a numeric readout */
.st-meter{position:absolute;left:32px;bottom:26px;display:flex;align-items:center;gap:12px;pointer-events:none;white-space:nowrap}
.st-meter .blocks i{width:14px;height:5px;border-radius:1px}
.st-meter .blocks i.on{background:var(--ink)}
.st-scroll{position:absolute;right:32px;bottom:26px;pointer-events:none}

/* landscape: the voice on the left, the world on the right */
.stage .slot{left:clamp(24px,6vw,96px);top:0;bottom:0;width:min(42vw,560px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}

/* portrait: the voice on top, the world below */
@media (max-aspect-ratio:1/1){
  .stage .slot{left:22px;right:22px;top:calc(env(safe-area-inset-top,0px) + 70px);bottom:auto;width:auto;display:block;text-align:center}
  .stage .slot .sub{margin-left:auto;margin-right:auto;max-width:34ch;font-size:15px}
  .stage .slot .cta-line{justify-content:center;flex-wrap:nowrap;gap:8px;margin-top:20px}
  .stage .slot .cta-line .btn{padding:10px 11px;font-size:10px;letter-spacing:.08em}
  .stage .steps{margin-left:auto;margin-right:auto}
  .stage .hl.big{font-size:clamp(38px,11vw,58px)}
  .stage .hl.mid{font-size:clamp(30px,8.6vw,46px)}
  .stage .slot .lbl{margin-bottom:12px}
  .stage .readout .r{left:0;right:0}
  .st-meter{left:50%;transform:translateX(-50%);bottom:18px}
  .st-scroll{display:none}
  .stage .slot.s-hero .sub,.stage .slot[data-slot="auto"] .sub{display:none}
}

/* no JS: the first fold is a plain hero */
html:not(.js-anim) .stage{height:auto}
html:not(.js-anim) .st-pin{position:relative;height:auto;padding:120px 0 96px}
html:not(.js-anim) .st-view,html:not(.js-anim) .st-meter,html:not(.js-anim) .st-scroll{display:none}
html:not(.js-anim) .st-hud{position:relative}
html:not(.js-anim) .slot{display:none}
html:not(.js-anim) .slot.s-hero{display:block;position:relative;opacity:1;transform:none;left:auto;top:auto;margin:0 auto;width:min(90vw,640px)}