/* ==========================================================================
   THE FILM: a whole team inside one computer (js/film.js)
   Always a dark stage, in both themes, so it redefines the dark tokens.
   ========================================================================== */
.film {
  --background: #03051a; --foreground: #f5f3fb; --muted-foreground: #aaa4bd; --text-ghost: #9b93b3; --link: #c4b5fd;
  --hair: color-mix(in oklch, #f5f3fb 9%, transparent); --tint: color-mix(in oklch, #f5f3fb 4.5%, transparent);
  --hl: linear-gradient(90deg, #a78bfa, #e879f9);
  --spectrum: linear-gradient(90deg, #c4b5fd 0%, #a5b4fc 22%, #f0abfc 55%, #fcd34d 100%);
  position: relative; height: 420vh; height: 420svh;
  background: #03051a; color: var(--foreground); color-scheme: dark;
}
.fm-pin { background: #03051a; }
/* The room: a pool of light from the screen behind the Computer, and on the floor under it */
.fm-room {
  --room: 124 58 237; --rx: 50%; --ry: 45%;
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(34% 42% at var(--rx) var(--ry), rgb(var(--room) / .2), transparent 72%),
    radial-gradient(60% 22% at var(--rx) 96%, rgb(var(--room) / .12), transparent 70%);
}
/* The stage: two stills whose edges already fade out, lightening what's behind them. No CSS mask,
   so the browser can scale it on the GPU without repainting while the camera moves. */
.fm-stage { position: absolute; z-index: 1; transform-origin: 50% 50%; will-change: transform, opacity; mix-blend-mode: lighten; }
/* Hidden until js/film.js has placed it, so the screen never shows unplaced at the top left while the page loads */
.film:not(.set):not(.still) .fm-stage { visibility: hidden; }
.fm-far { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fm-near { position: absolute; left: 0; top: 0; display: block; opacity: 0; transform-origin: 0 0; will-change: opacity; }

/* ---------- The screen: 1200 by 900, pinned to the glass ---------- */
.fm-screen {
  --crt: 1; --boot: 0;
  position: absolute; left: 0; top: 0; width: 1200px; height: 900px; transform-origin: 0 0;
  border-radius: 64px; overflow: hidden; background: #07061a; will-change: transform;
  font-family: var(--font-body, Inter, sans-serif); color: #f5f3fb;
}
.fm-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fm-glass {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(to bottom, rgb(255 255 255 / calc(var(--crt) * .045)) 0 2px, transparent 2px 6px),
    linear-gradient(118deg, rgb(255 255 255 / .09) 0%, rgb(255 255 255 / .02) 26%, transparent 27%),
    radial-gradient(115% 95% at 50% 45%, transparent 58%, rgb(3 2 12 / .7));
  box-shadow: inset 0 0 90px rgb(140 100 255 / .32), inset 0 0 0 2px rgb(196 181 253 / .1);
}
/* the picture opens out of a bright line when it switches on */
.fm-glass::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; opacity: var(--boot);
  background: #fff; box-shadow: 0 0 30px 8px #c4b5fd, 0 0 90px 24px #8b5cf6;
}

/* type at the Computer (an easter egg) */
.fm-type {
  position: absolute; left: 80px; right: 80px; bottom: 90px; margin: 0; z-index: 2;
  font: 500 40px/1.35 "JetBrains Mono", ui-monospace, monospace; color: #ede9fe;
  text-shadow: 0 0 18px rgb(167 139 250 / .8); opacity: 0; transition: opacity .25s;
}
.fm-type.on { opacity: 1; }
.fm-type span { display: block; }
.fm-type .r { color: #fcd34d; text-shadow: 0 0 18px rgb(251 191 36 / .6); }

/* ---------- The headline ---------- */
.fm-hero { position: absolute; z-index: 4; left: 0; right: 0; top: calc(64px + 4.5vh); padding: 0 var(--gutter); text-align: center; will-change: transform, opacity; }
/* The eyebrow: a short spectrum rule that draws in with the headline, then the name */
.fm-k { display: flex; align-items: center; justify-content: center; gap: .85rem; margin: 0 0 1.1rem; font: 500 1rem/1 var(--font-display); letter-spacing: .04em; color: #e4def2; }
.fm-k::before, .fm-k::after { content: ""; width: 2.4rem; height: 1px; background: var(--spectrum); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.16, .8, .12, 1) .25s; }
.fm-k::after { transform-origin: right; }
.fm-logo img { display: block; width: auto; height: clamp(1.6rem, 2.3vw, 2.15rem); }
.film.lit .fm-k::before, .film.lit .fm-k::after { transform: none; }
.fm-h { margin: 0 auto; font-size: clamp(2.6rem, min(6.3vw, 9.6vh), 7.2rem); line-height: .96; letter-spacing: -.035em; font-weight: 600; }
.fm-h .ln { display: block; overflow: hidden; padding: 0 .04em .1em; margin-bottom: -.1em; }
.fm-h .ln > span { display: inline-block; transform: translateY(108%); transition: transform 1.2s cubic-bezier(.16, .8, .12, 1); }
.fm-h .ln.dim > span { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; transition-delay: .12s; }
.film.lit .fm-h .ln > span { transform: none; }
.fm-in { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s cubic-bezier(.16, .8, .12, 1); transition-delay: calc(.3s + var(--d, 0) * .09s); }
.film.lit .fm-in { opacity: 1; transform: none; }
.fm-sub { max-width: 34rem; margin: 1.1rem auto 0; font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.5; color: #b6b0c8; text-wrap: balance; }
.fm-hero .cta-row { justify-content: center; margin-top: 1.6rem; }
.fm-hint { position: absolute; z-index: 4; left: 50%; bottom: 3.2vh; margin: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .55rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #8e88a3; opacity: 0; pointer-events: none; }
.fm-hint i { width: 1px; height: 34px; background: linear-gradient(#8e88a3, transparent); transform-origin: top; animation: fm-hint 2.2s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes fm-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.fm-fade { height: 36vh; margin-bottom: -26vh; position: relative; z-index: 1; pointer-events: none; background: linear-gradient(#0b0910, rgb(11 9 16 / .8) 32%, rgb(11 9 16 / .35) 64%, transparent); }

/* the team at work, one line at a time */
.fm-live { display: none; }
.fm-live-k { margin: 0 0 .7rem; font: 500 .82rem/1 var(--font-display); letter-spacing: .03em; color: #8e88a3; }
.fm-live-line { display: flex; align-items: center; gap: .75rem; min-height: 2.25rem; margin: 0; font-size: .98rem; color: #b6b0c8; transition: opacity .35s ease, transform .35s ease, filter .35s ease; }
.fm-live-line.out { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
.fm-live-line img { width: 34px; height: 34px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px rgb(196 181 253 / .35), 0 6px 18px -6px rgb(124 58 237 / .7); }
.fm-live-line b { color: #f5f3fb; font-weight: 600; }

/* ---------- Wide windows: the words on the left, the Computer on the right (js/film.js places it) ---------- */
@media (min-width: 961px) {
  .fm-hero {
    top: 0; bottom: 0; right: auto; left: max(var(--gutter), calc((100vw - 84rem) / 2)); width: min(44vw, 40rem);
    padding: 64px 0 0; display: flex; flex-direction: column; justify-content: center; text-align: left;
  }
  .fm-k { justify-content: flex-start; margin: 0 0 1.3rem; }
  .fm-k::after { display: none; }
  .fm-h { margin: 0; font-size: clamp(3rem, min(5.3vw, 9.4vh), 6.6rem); }
  .fm-sub { margin: 1.5rem 0 0; max-width: 30rem; text-wrap: pretty; }
  .fm-hero .cta-row { justify-content: flex-start; margin-top: 2.1rem; }
  .fm-live { display: block; margin-top: clamp(2rem, 6vh, 3.6rem); padding-top: 1.2rem; max-width: 30rem; border-top: 1px solid rgb(245 243 251 / .09); }
  .fm-hint { left: max(var(--gutter), calc((100vw - 84rem) / 2)); transform: none; align-items: flex-start; }
}
@media (min-width: 961px) and (max-height: 700px) { .fm-live { display: none; } }
@media (min-width: 961px) and (max-height: 860px) { .fm-hint { display: none; } }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .fm-hero { top: calc(64px + 3vh); }
  .fm-h { font-size: clamp(2.3rem, 11vw, 3.2rem); line-height: 1.06; }
  /* A wrapped line needs room for descenders (the g in "agents") above the next line's ascenders (the f in "for") */
  .fm-h .ln { padding-bottom: .14em; margin-bottom: -.06em; }
  .fm-logo img { height: 1.5rem; }
  .fm-sub { font-size: .98rem; max-width: 22rem; }
  .fm-hero .cta-row { margin-top: 1.2rem; }
  .fm-hint { display: none; }
}
@media (max-height: 640px) and (min-width: 761px) { .fm-sub { display: none; } }

/* ---------- Reduced motion: no film, the headline and then the chat ---------- */
/* Phones and touch tablets (js/film.js): the scene as a still, and the chat as its own section under it */
.film.phone { height: auto; }
.film.phone .fm-pin { position: relative; height: 100vh; height: 100svh; }
.film.phone .fm-stage, .film.phone .fm-near, .film.phone .fm-screen { will-change: auto; }
.film.phone .fm-hint { display: none; }
.film.phone .hc { position: relative; visibility: visible; width: 100%; height: 100vh; height: 100svh; transform: none; clip-path: none; will-change: auto; }
.film.phone .hc-in { width: 100%; height: 100%; }
.film.phone .hc-crt, .film.phone .hc-boot { display: none; }
.film.still { height: auto; }
.film.still .fm-pin { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; gap: 3rem; padding-bottom: 3rem; }
.film.still .fm-stage, .film.still .fm-room, .film.still .fm-hint { display: none; }
.film.still .fm-hero { position: relative; top: auto; padding-top: 8rem; }
.film.still .hc { position: relative; visibility: visible; width: 100%; height: 100vh; height: 100svh; }
.film.still .hc-in { width: 100%; height: 100%; }
.film.still .hc-crt { display: none; }

/* the anchor for "Company Brain" in the nav */
.anchor { position: relative; top: -64px; height: 0; }

/* ---------- The rest of the page speaks like the film: two-tone headlines, plain labels ---------- */
main .h2x .hl, main .h2 .hl, main .h1 .hl { background: none; color: #85809a; -webkit-text-fill-color: currentColor; }
main .eyebrow { font: 500 .98rem/1 var(--font-display); letter-spacing: .02em; text-transform: none; color: var(--muted-foreground); }
main .h2x { letter-spacing: -.035em; }