:root {
  /* tell the browser this page is dark, so native controls follow */
  color-scheme: dark;
  --bg: #050506;
  --ink: #f2f1ee;
  --muted: #8d8d92;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  /* in-app browsers (Instagram, Facebook) otherwise boost font sizes */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

/* the render / film, cropped like the poster. held still: the words are
   placed against the picture, so a slow zoom would pull them out of line */
.stage {
  position: absolute;
  inset: 0;
}
.media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* tall screens: crop from the right, so the app window is in shot and
     the pile runs off the left edge */
  object-position: 100% 60%;
  opacity: 0;
  transition: opacity .6s ease;
}
.media.on { opacity: 1; }
/* wide screens: the render fills the page, standing on its floor — any
   cropping comes off the empty sky at the top, never the floor */
@media (min-aspect-ratio: 9/10) {
  .media { object-position: 50% 100%; }
}
/* 16:9 and wider: slide the render a little left so pile, sign-up and
   app window sit centred as one group; its right edge fades into the
   page ground so there's no seam. (narrower laptops already crop the
   sides, and a slide would push the pile off the left edge.) */
@media (min-aspect-ratio: 17/10) {
  .media { transform: translateX(-4%); }
  .hero .vignette { background:
    linear-gradient(to bottom, rgba(5,5,6,.75) 0%, rgba(5,5,6,0) 32%),
    linear-gradient(to top, rgba(5,5,6,.35) 0%, rgba(5,5,6,0) 20%),
    linear-gradient(to left, rgba(5,5,6,1) 0%, rgba(5,5,6,1) 4.5%, rgba(5,5,6,.5) 7.5%, rgba(5,5,6,0) 12%); }
}


.vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,5,6,.75) 0%, rgba(5,5,6,0) 32%),
    linear-gradient(to top, rgba(5,5,6,.35) 0%, rgba(5,5,6,0) 20%);
  pointer-events: none;
}

.head {
  position: absolute;
  top: clamp(28px, 11vh, 140px);
  left: clamp(22px, 6vw, 96px);
  right: 22px;
  z-index: 2;
}
h1 {
  margin: 0;
  /* tall screens: sized so each sentence holds one line */
  font-size: clamp(44px, 7.6vw, 112px);
  /* Jost Medium: plain, but with character — and the same face as the
     home page's brand */
  font-family: 'Jost', 'Century Gothic', sans-serif;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1;
  color: #eeede9;
  opacity: 0;
  animation: rise .6s .1s cubic-bezier(.2,.8,.2,1) forwards;
}
h1 .line1, h1 .line2 { display: block; }
/* the second sentence is the turn — same voice, stepped back */
/* nudges the "i" of "is" to sit under the middle of the "T" above it —
   an optical, not a literal, alignment */
h1 .line2 { margin-left: 0.118em; } /* Jost 500: i stem under the T's centre */
.this-is {
  position: absolute;
  left: 0; top: 0;
  margin: 0;
  font-size: clamp(18px, 2.2vw, 30px);
  font-family: 'Jost', 'Century Gothic', sans-serif;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #eeede9;
  text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
  white-space: nowrap;
  opacity: 0;
  /* lands on the window: a short drop as it fades in (translate composes
     with the transform the script uses to place it) */
  translate: 0 -14px;
  transition: opacity .45s ease .1s, translate .6s cubic-bezier(.2,.8,.2,1) .1s;
  -webkit-font-smoothing: antialiased; backface-visibility: hidden;
  z-index: 2;
}
.this-is.on { opacity: 1; translate: 0 0; }

/* timed to the film: the headline and sign-up wait for their cue (classes set by main.js) */
.hero.timed h1 { animation: none; }
.hero.timed.t-head h1 { animation: rise .6s cubic-bezier(.2,.8,.2,1) forwards; }
.hero.timed .stay:not(.ready) { animation: none; pointer-events: none; }
.hero.timed.t-stay .stay:not(.ready) { animation: stayIn .5s cubic-bezier(.2,.8,.2,1) forwards; pointer-events: auto; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* the signup block: a small dark squircle behind the line and the
   pill, so the text stands out against the bright glass. */
.stay {
  font-family: 'Jost', 'Century Gothic', sans-serif;
  position: absolute;
  left: 50%; top: 50%;
  z-index: 4;
  width: min(calc(100% - 32px), 372px);
  margin: 0;
  padding: 16px;
  /* --u: 1px except on scaled portrait layouts (see the phone block) */
  border-radius: calc(22 * var(--u, 1px));
  background: rgba(5,5,6,.62);
  border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: grid;
  /* minmax(0, …): never let the input's natural width stretch the
     column past the box — enlarged text pushed it off-screen */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  animation: stayIn .5s .4s cubic-bezier(.2,.8,.2,1) forwards;
}
/* a true squircle where the browser can draw one */
@supports (corner-shape: squircle) {
  .stay { border-radius: calc(34 * var(--u, 1px)); corner-shape: squircle; }
}
@keyframes stayIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.stay label {
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
}
.stay .field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 18px;
  border-radius: 999px;
  background: rgba(10,11,13,.92);
  border: 1px solid rgba(255,255,255,.14);
}
.stay .field:focus-within { border-color: rgba(159,220,255,.85); box-shadow: 0 0 0 3px rgba(159,220,255,.14); }
.stay input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  padding: 8px 0;
  width: 100%;
}
.stay input::placeholder { color: #6e6f76; }
/* keep the field dark when focused or autofilled — browsers otherwise
   paint their own light background over it */
.stay input { -webkit-appearance: none; appearance: none; border-radius: 0; caret-color: var(--ink); }
.stay input:focus { background: transparent; outline: none; }
.stay input:-webkit-autofill,
.stay input:-webkit-autofill:hover,
.stay input:-webkit-autofill:focus,
.stay input:autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(10,11,13,1) inset;
  box-shadow: 0 0 0 1000px rgba(10,11,13,1) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 99999s ease-out 0s;
}
.stay button {
  flex: none;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: #eeede9;
  color: #050506;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
}
.stay button:disabled { opacity: .5; cursor: default; }
.stay button:focus-visible { outline: 2px solid #9fdcff; outline-offset: 2px; }
.stay-msg {
  margin: 0;
  min-height: 1.3em;
  font-size: 12px;
  text-align: center;
  color: #a3a3a8;
}
.stay-msg:empty { display: none; }
.stay-msg.err { color: #ff9a8a; }
.stay.done .field, .stay.done label { display: none; }
/* after sign-up the message is the whole point, so it reads like the label did */
.stay.done .stay-msg {
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--ink);
  text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
}
/* short phones (SE-size): headline a touch smaller and higher so it
   clears the top of the pile */
/* phones: headline a few pixels higher so it clears the top of the pile */
@media (max-aspect-ratio: 9/10) {
  .head { top: clamp(24px, 9.4vh, 140px); }
}
@media (max-aspect-ratio: 9/10) and (max-height: 720px) {
  .head { top: 6vh; }
  h1 { font-size: clamp(40px, 11vw, 112px); }
}
@media (min-aspect-ratio: 9/10) {
  /* wide: the sign-up grows with the screen so it holds its own beside
     the render (1.12× on laptops, up to 1.3× on large desktops) */
  .stay {
    --w: clamp(1.12px, 0.066vw, 1.3px);
    width: min(calc(100% - 32px), calc(372 * var(--w)));
    padding: calc(16 * var(--w)); gap: calc(10 * var(--w));
    border-radius: calc(22 * var(--w));
    /* no panel on wide screens: just the line and the pill on the render */
    background: none; border-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* centred over the field */
  .stay label { text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.9); text-align: center; font-weight: 500; }
  .stay label { font-size: calc(15 * var(--w)); }
  .stay .field { padding: calc(5 * var(--w)) calc(5 * var(--w)) calc(5 * var(--w)) calc(18 * var(--w)); }
  .stay input { font-size: calc(15 * var(--w)); padding: calc(8 * var(--w)) 0; }
  .stay button { height: calc(38 * var(--w)); padding: 0 calc(16 * var(--w)); font-size: calc(13 * var(--w)); }
  /* on the pile: a little smaller, with a dense black halo so it reads over the bright glass */
  h1 {
    font-size: clamp(40px, 4.6vw, 80px);
    text-shadow: 0 0 6px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.9), 0 0 34px rgba(0,0,0,.8), 0 0 60px rgba(0,0,0,.6);
  }
  /* wide: "This is." larger and lifted off the window's edge */
  /* same alignment as on phones: flush with the window's left edge, sitting on its top */
  .this-is { font-size: clamp(24px, 2.7vw, 52px); font-weight: 500; }
}

/* once the intro has played, the sign-up is driven by a transform that
   can glide: --lift raises it above a phone keyboard while typing */
.stay.ready {
  animation: none; opacity: 1;
  transform: translate(-50%, calc(-50% - var(--lift, 0px))) scale(var(--pop, 1));
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.stay.ready.typing { --pop: 1.02; }
/* phone: centred like the wide layout, on the tall crop */
@media (max-aspect-ratio: 9/10) {
  /* a dense, layered black glow standing in for the card's old
     dark backing — reads as a soft halo behind the text rather
     than a thin outline around it */
  .this-is, .stay label, .stay.done .stay-msg { font-weight: 500;
    text-shadow:
      0 0 4px rgba(0,0,0,1),
      0 0 10px rgba(0,0,0,1),
      0 0 18px rgba(0,0,0,.95),
      0 0 32px rgba(0,0,0,.85),
      0 0 50px rgba(0,0,0,.7);
  }
  .stay label { font-size: calc(16 * var(--u)); }
  .this-is { font-size: max(24px, calc(27 * var(--u))); }

  /* --u is 1px on a ~412px-wide phone and grows with the screen, so a
     wider portrait layout (tablet, "Desktop site" on a phone, which
     lays out ~980px wide) keeps the phone's proportions instead of
     shrinking the sign-up to a sliver. capped so tablets don't get
     oversized controls. */
  .hero { --u: clamp(1px, 0.243vw, 1.4px); }
  .stay {
    width: min(calc(100% - 32px), calc(372 * var(--u)));
    gap: calc(10 * var(--u));
    padding: calc(16 * var(--u));
  }
  .stay .field { gap: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)) calc(18 * var(--u)); }
  .stay input { font-size: calc(15 * var(--u)); padding: calc(8 * var(--u)) 0; }
  .stay button { height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: calc(13 * var(--u)); }
  .stay-msg { font-size: calc(12 * var(--u)); }
  .stay.done .stay-msg { font-size: calc(16 * var(--u)); }
}

/* reduced motion: everything simply shown, nothing animated */
@media (prefers-reduced-motion: reduce) {
  .this-is { translate: none; }
  h1 { animation: none; opacity: 1; }
  .stay { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .stay.ready { transition: none; }
}