/* Homepage hero film (film.js). The app screens play inside .nfx-stage as scaled iframes. */
.nfx{ max-width:1180px; margin:clamp(28px,4vw,56px) auto 0; }
.nfx-stage{ position:relative; width:100%; aspect-ratio:1512/945; border-radius:16px; overflow:hidden; background:#f7f7f8; border:1px solid rgba(19,19,18,.12); box-shadow:0 60px 120px -60px rgba(19,19,18,.5), 0 20px 40px -24px rgba(19,19,18,.2); }
.nfx-frame{ position:absolute; top:0; left:0; width:1512px; height:945px; border:0; transform-origin:0 0; opacity:0; transition:opacity .28s ease, transform 1s cubic-bezier(.65,0,.3,1); pointer-events:none; background:#f7f7f8; will-change:transform; }
.nfx-frame.nfx-snap{ transition:opacity .28s ease !important; }
.nfx-frame.nfx-pre{ opacity:1; z-index:1; transition:none; }
.nfx-frame.on{ z-index:2; }
.nfx-frame.nfx-out{ z-index:3; }
.nfx-frame.on{ opacity:1; }
/* the cursor is a name-tagged pointer ("You"), like a live collaborator's cursor */
.nfx-cursor{ position:absolute; top:0; left:0; width:22px; height:22px; z-index:5; opacity:0; transition:opacity .4s; pointer-events:none; filter:drop-shadow(0 4px 8px rgba(210,34,34,.3)); }
.nfx-ring{ position:absolute; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,88,32,.8); animation:nfxring .6s ease-out forwards; }
@keyframes nfxring{ from{ transform:scale(.3); opacity:1; } to{ transform:scale(1.6); opacity:0; } }
.nfx-cursor.on{ opacity:1; }
.nfx-cursor.nfx-enter{ transition:opacity .95s ease; }
.nfx-cursor svg{ width:100%; height:100%; display:block; transition:transform .15s; transform-origin:14% 9%; }
.nfx-tag{ position:absolute; left:16px; top:20px; padding:4px 9px 5px; border-radius:4px 10px 10px 10px; background:var(--accent-warm-bright,#ff5820); color:#fff; font:600 12.5px/1 var(--font-body,"Figtree",sans-serif); letter-spacing:.01em; white-space:nowrap; }
.nfx-cursor.down svg{ transform:scale(.8); }
.nfx-end{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px; background:rgba(22,22,19,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; pointer-events:none; transition:opacity .9s ease; }
.nfx-end.on{ opacity:1; pointer-events:auto; }
.nfx-end img{ height:clamp(24px,2.6vw,34px); width:auto; opacity:0; transform:translateY(10px); transition:opacity .7s ease .25s, transform .9s cubic-bezier(.22,.61,.36,1) .25s; }
/* same headline treatment as the page: grey lead-in, italic gradient finish, regular weight, tight tracking */
.nfx-end h3{ margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(30px,4.4vw,58px); line-height:.95; letter-spacing:-.05em; opacity:0; transform:translateY(14px); transition:opacity .8s ease .5s, transform 1s cubic-bezier(.22,.61,.36,1) .5s; }
.nfx-end h3 .tone{ color:rgba(255,255,235,.44); }
.nfx-end h3 .serif{ font-style:italic; padding-right:.06em; background:linear-gradient(115deg,#ff7429,#d22222); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.nfx-end p{ margin:0; font-size:clamp(14px,1.4vw,17px); color:rgba(255,255,235,.5); opacity:0; transition:opacity .8s ease .9s; }
.nfx-end-cta{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:6px; opacity:0; transform:translateY(10px); transition:opacity .8s ease 1.1s, transform 1s cubic-bezier(.22,.61,.36,1) 1.1s; }
.nfx-end-terms{ font-size:12.5px; color:rgba(255,255,235,.42); }
.nfx-replay{ position:absolute; right:clamp(14px,2vw,24px); bottom:clamp(12px,1.8vw,20px); display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:0; border-radius:99px; background:rgba(255,255,235,.08); color:rgba(255,255,235,.7); font:600 12.5px/1 var(--font-body); cursor:pointer; opacity:0; transition:opacity .6s ease 1.6s, background .2s, color .2s; }
.nfx-replay:hover{ background:rgba(255,255,235,.14); color:#fffef7; }
.nfx-replay svg{ width:14px; height:14px; }
.nfx-end.on img, .nfx-end.on h3, .nfx-end.on p, .nfx-end.on .nfx-end-cta{ opacity:1; transform:none; }
.nfx-end.on .nfx-replay{ opacity:1; }
/* the opening title card: the same look as the end card, so the film is bookended */
.nfx-intro{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:24px; background:rgba(22,22,19,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:#fffef7; opacity:0; pointer-events:none; transition:opacity .45s ease; }
.nfx-intro.on{ opacity:1; }
.nfx-intro h3{ margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(30px,4.4vw,58px); line-height:.95; letter-spacing:-.05em; opacity:0; transform:translateY(14px); transition:opacity .7s ease .15s, transform .9s cubic-bezier(.22,.61,.36,1) .15s; }
.nfx-intro h3 .tone{ color:rgba(255,255,235,.44); }
.nfx-intro h3 .serif{ font-style:italic; padding-right:.06em; background:linear-gradient(115deg,#ff7429,#d22222); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.nfx-intro p{ margin:0; font-size:clamp(14px,1.4vw,17px); color:rgba(255,255,235,.5); opacity:0; transition:opacity .7s ease .5s; }
.nfx-intro.on h3, .nfx-intro.on p{ opacity:1; transform:none; }
/* "in about a minute", in the site's handwriting */
.nfx-intro .nfx-intro-hand{ font-family:"Gloria Hallelujah","Comic Sans MS",cursive; font-size:clamp(20px,2.3vw,29px); line-height:1.2; color:var(--accent-warm-bright,#ff5820); transform:translateY(8px) rotate(-3deg); }
.nfx-intro.on .nfx-intro-hand{ transform:rotate(-3deg); }
/* the 3-second countdown: only once the film is actually starting */
.nfx-count{ position:relative; width:40px; height:40px; margin-top:6px; opacity:0; transition:opacity .35s ease; }
.nfx-intro.counting .nfx-count{ opacity:1; }
.nfx-count svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.nfx-count circle{ fill:none; stroke-width:2.2; }
.nfx-count-track{ stroke:rgba(255,255,235,.14); }
.nfx-count-ring{ stroke:var(--accent-warm-bright,#ff5820); stroke-linecap:round; stroke-dasharray:100.53; stroke-dashoffset:0; }
.nfx-count span{ position:absolute; inset:0; display:grid; place-items:center; font:600 14px/1 var(--font-body,"Figtree",sans-serif); color:rgba(255,255,235,.8); font-variant-numeric:tabular-nums; }
/* pause / play, at the start of the chapter bar */
.nfx-pause{ flex:none; align-self:flex-start; width:26px; height:26px; margin-top:-2px; padding:0; border:0; border-radius:50%; background:rgba(19,19,18,.07); color:rgba(19,19,18,.62); display:grid; place-items:center; cursor:pointer; transition:background .2s, color .2s; }
.nfx-pause:hover{ background:rgba(19,19,18,.12); color:var(--ink,#131312); }
.nfx-pause:focus{ outline:none; } .nfx-pause:focus-visible{ box-shadow:0 0 0 2px var(--accent-warm-bright,#ff5820); }
.nfx-pause svg{ width:12px; height:12px; fill:currentColor; }
.nfx-pause .i-play, .nfx-pause .i-replay, .nfx.is-paused .nfx-pause .i-pause{ display:none; }
.nfx.is-paused .nfx-pause .i-play{ display:block; }
.nfx.is-ended .nfx-pause .i-pause, .nfx.is-ended .nfx-pause .i-play{ display:none; }
.nfx.is-ended .nfx-pause .i-replay{ display:block; fill:none; }
@media (max-width:699px){ .nfx-end{ gap:12px; } .nfx-end-terms{ font-size:11.5px; } .nfx-replay{ left:50%; right:auto; transform:translateX(-50%); } }

.nfx-frame.nfx-snapin{ transition:transform 1s cubic-bezier(.65,0,.3,1) !important; }
/* a chapter click: the screen dips out quickly while the next section is set up */
.nfx-stage.nfx-blank .nfx-frame{ opacity:0 !important; transition:opacity .14s ease !important; }
.nfx-vig{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity 1s cubic-bezier(.65,0,.3,1); background:radial-gradient(ellipse 62% 58% at 50% 50%, transparent 55%, rgba(12,12,16,.16) 100%); }
.nfx-fly{ position:absolute; z-index:4; object-fit:cover; transform-origin:0 0; pointer-events:none; will-change:transform; }

/* chapters: a segmented progress bar with its section names underneath. The playing
   segment fills orange and its name darkens; click any one to jump there */
.nfx-chaps{ display:flex; gap:6px; width:min(520px,86%); margin:clamp(16px,2vw,22px) auto 0; }
.nfx-chap{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 0 4px; border:0; background:none; cursor:pointer; }
.nfx-seg{ display:block; width:100%; height:3px; border-radius:3px; background:rgba(19,19,18,.13); overflow:hidden; transition:background .3s; }
.nfx-seg b{ display:block; height:100%; width:0; border-radius:inherit; background:var(--accent-warm-bright,#ff5820); }
.nfx-chap.done .nfx-seg b{ width:100%; } /* played sections stay orange, like elapsed time on a video */
.nfx-chap:hover .nfx-seg{ background:rgba(19,19,18,.24); }
.nfx-chap em{ font:600 11.5px/1 var(--font-body); font-style:normal; letter-spacing:.01em; color:rgba(19,19,18,.38); white-space:nowrap; transition:color .3s; }
.nfx-chap.done em{ color:rgba(19,19,18,.55); }
.nfx-chap.on em, .nfx-chap:hover em{ color:var(--ink,#131312); }
.nfx-chap:focus{ outline:none; }
.nfx-chap:focus-visible em{ text-decoration:underline; text-underline-offset:3px; }
#machine.hero-stage{ background:none; }
@media (max-width:699px){ .nfx-stage{ aspect-ratio:4/5; border-radius:14px; } .nfx-chaps{ width:100%; gap:4px; } .nfx-chap em{ font-size:10px; letter-spacing:0; } .nfx-tag{ font-size:11px; padding:3px 7px 4px; left:14px; top:17px; } }