/* Brandly landing — "Card Nº 0000 0001". Dark cinema stage; one bold wide grotesk for headlines, mono for the HUD. */
:root {
  --black: #050506;
  --graphite: #17181b;
  --ink: #f2f3ee;
  --ink-dim: rgba(242, 243, 238, .72);
  --ink-dark: #16171a;
  --lime: #c6da52;
  --red: #ff2a2a;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gut: clamp(16px, 2.4vw, 36px);
  --hud: rgba(242, 243, 238, .86);
  color-scheme: dark;
}
body[data-tone="light"] { --hud: rgba(22, 23, 26, .82); }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--ink); }
body { font: 15px/1.5 var(--mono); overflow-x: clip; -webkit-font-smoothing: antialiased; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.loading { overflow: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Scroll runway: one beat per scene, heights in svh units via --len */
main { position: relative; }
.beat { height: calc(var(--len) * 1svh); }

/* Stage */
#stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--black); }
.layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; will-change: opacity; }
.layer.on { visibility: visible; }
.layer > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate, .loop { object-fit: cover; object-position: var(--fx, 50%) 50%; display: block; }
canvas.seq { opacity: 0; }
canvas.seq.ready { opacity: 1; }
.studio { background: radial-gradient(120% 90% at 55% 45%, #2a2c30 0%, #121316 55%, #050506 100%); }
.scrim { pointer-events: none; background: linear-gradient(180deg, rgba(5,5,6,.5) 0%, rgba(5,5,6,0) 26%, rgba(5,5,6,0) 74%, rgba(5,5,6,.45) 100%); }

.gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.void { background: var(--black); }
.grain { z-index: 40; }
.copy { z-index: 41; }
.grain { pointer-events: none; opacity: .09; mix-blend-mode: overlay; background-size: 256px; animation: grain .9s steps(4) infinite; }
@keyframes grain { 0% { background-position: 0 0 } 25% { background-position: -60px 40px } 50% { background-position: 50px -30px } 75% { background-position: -20px -70px } }

/* Headlines */
.copy { position: absolute; inset: 0; pointer-events: none; }
.head { position: absolute; margin: 0; font: 900 clamp(34px, 6.4vw, 118px)/.9 var(--display); font-stretch: 125%; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--ink); max-width: 13ch; text-wrap: balance; visibility: hidden;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 10px 40px rgba(0,0,0,.45)); }
.head.on { visibility: visible; }
.head[data-pos="bl"] { left: var(--gut); bottom: 15svh; max-width: 11ch; }
.head[data-pos="ml"] { left: var(--gut); top: 34svh; }
.head[data-pos="tr"] { right: var(--gut); top: 12svh; text-align: right; }
.head[data-pos="tl"] { left: var(--gut); top: 12svh; }
.head[data-pos="c"] { left: 0; right: 0; top: 50%; translate: 0 -50%; margin-inline: auto; text-align: center; font-size: clamp(80px, 19vw, 360px); max-width: none; }
.head[data-pos="fr"] { right: var(--gut); top: 14svh; width: min(440px, calc(100vw - 2 * var(--gut))); max-width: none; font-size: clamp(30px, 3.6vw, 60px); }
.head[data-scene="4"] { font-size: clamp(30px, 5vw, 92px); max-width: 16ch; }
.head[data-scene="5"] { max-width: none; }
.head.dark { color: var(--ink-dark); filter: none; font-size: clamp(30px, 4.8vw, 88px); }
.head .line { padding-bottom: .04em; }
/* the app steps: heading + one sentence, opposite the phone, vertically centred */
.head.step { top: 50%; translate: 0 -50%; width: min(36vw, 560px); max-width: none; text-transform: none; letter-spacing: -.02em; }
.head.step[data-pos="sl"] { left: calc(var(--gut) + 3vw); }
.head.step[data-pos="sr"] { right: calc(var(--gut) + 3vw); }
.head.step h3 { margin: 0 0 .5em; font: 900 clamp(30px, 3.4vw, 60px)/.95 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.035em; text-wrap: balance; }
.head.step p { margin: 0; font: 500 clamp(15px, 1.25vw, 20px)/1.45 var(--display); font-stretch: 105%; letter-spacing: 0; color: var(--ink-dim); max-width: 34ch; }

/* the descent film (plays on its own after the burst) */
#descent { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) 50%; display: block; opacity: 0; visibility: hidden; }
#descent.on { opacity: 1; visibility: visible; }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; color: var(--hud); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: color .5s;
  text-shadow: 0 0 12px rgba(0,0,0,.45); }
body[data-tone="light"] #hud { text-shadow: 0 0 12px rgba(255,255,255,.6); }
#hud > * { position: absolute; }
#hud a, #hud button { pointer-events: auto; }
#hud::before, #hud::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid currentColor; opacity: .7; }
#hud::before { top: calc(var(--gut) - 8px + env(safe-area-inset-top, 0px)); left: calc(var(--gut) - 8px); border-right: 0; border-bottom: 0; }
#hud::after { bottom: calc(var(--gut) - 8px + env(safe-area-inset-bottom, 0px)); right: calc(var(--gut) - 8px); border-left: 0; border-top: 0; }
.mark { top: calc(var(--gut) + env(safe-area-inset-top, 0px)); left: calc(var(--gut) + 8px); text-decoration: none; }
.right { top: calc(var(--gut) + env(safe-area-inset-top, 0px)); right: calc(var(--gut) + 8px); display: flex; gap: 18px; align-items: center; font-variant-numeric: tabular-nums; }
.blinq { opacity: 0; transition: opacity .6s; }
.blinq.on { opacity: 1; }
.blinq b { color: var(--lime); font-weight: 500; }
body[data-tone="light"] .blinq b { color: #6f7d12; }
.ruler { top: calc(var(--gut) + 4px + env(safe-area-inset-top, 0px)); left: 50%; width: min(28vw, 320px); translate: -50% 0; height: 6px;
  background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 10%); opacity: .55; }
.ruler i { position: absolute; left: 0; top: -3px; width: 1px; height: 12px; background: currentColor; translate: calc(var(--prog, 0) * min(28vw, 320px)) 0; }
.caption { margin: 0; bottom: calc(var(--gut) + env(safe-area-inset-bottom, 0px)); left: calc(var(--gut) + 8px); max-width: 44vw; line-height: 1.4; }
.cta { bottom: calc(var(--gut) - 8px + env(safe-area-inset-bottom, 0px)); right: calc(var(--gut) + 12px); padding: 11px 16px; border-radius: 999px; text-decoration: none;
  border: 1px solid currentColor; background: rgba(5,5,6,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .25s, color .25s; }
.cta:hover { background: var(--lime); color: var(--ink-dark); border-color: var(--lime); }
.scroll-hint { margin: 0; left: 50%; translate: -50% 0; bottom: calc(var(--gut) + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; align-items: center; transition: opacity .4s; }
.scroll-hint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: translateY(5px); opacity: .4 } }

/* Click gates: a pulsing tap target on the card / the ship's door */
#tap { position: absolute; z-index: 45; left: 50%; top: 50%; width: 92px; aspect-ratio: 1; translate: -50% -50%; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85);
  font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
#tap.on { opacity: 1; visibility: visible; }
#tap span { position: relative; }
#tap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 18px var(--lime); translate: 0 -22px; animation: tapdot 1.4s ease-in-out infinite; }
#tap i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); animation: ripple 1.8s ease-out infinite; }
#tap i + i { animation-delay: .9s; }
@keyframes ripple { from { transform: scale(1); opacity: .9 } to { transform: scale(2.3); opacity: 0 } }
@keyframes tapdot { 0%, 100% { transform: scale(1) } 45% { transform: scale(.55) } }
#stage:has(#tap.on) { cursor: pointer; }

/* First-contact film: plays on top of the stage after the second tap */
#film { position: absolute; inset: 0; z-index: 44; background: #000; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
#film.on { opacity: 1; visibility: visible; }
#film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.skip { position: absolute; z-index: 46; right: calc(var(--gut) + 12px); top: calc(var(--gut) + 40px + env(safe-area-inset-top, 0px)); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: rgba(5,5,6,.3); border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 9px 14px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#descent-skip { opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
#descent-skip.on { opacity: 1; visibility: visible; }
.skip:hover { background: var(--lime); color: var(--ink-dark); border-color: var(--lime); }

.sound { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer; opacity: .75; }
.sound:hover, .sound[aria-pressed="true"] { opacity: 1; }

/* Join: centred under the phone at the very end */
#waitlist { position: absolute; z-index: 42; left: 50%; translate: -50% 0; bottom: calc(var(--gut) + 40px + env(safe-area-inset-bottom, 0px)); width: min(520px, calc(100vw - 2 * var(--gut)));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: stretch; text-align: center; opacity: 0; visibility: hidden; }
#waitlist.on { visibility: visible; }
#waitlist p { margin: 0; }
#waitlist .kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.row { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#email { flex: 1; min-width: 0; font: 15px var(--mono); color: var(--ink); background: transparent; border: 0; padding: 12px 16px; }
#email:focus { outline: none; }
.row:focus-within { border-color: var(--lime); }
#email::placeholder { color: rgba(242,243,238,.45); }
#waitlist button[type="submit"] { font: 600 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 0; border-radius: 999px; padding: 0 22px; background: var(--lime); color: var(--ink-dark); cursor: pointer; }
#waitlist button[type="submit"]:hover { background: #d8ea6a; }
.status { font-size: 12px; color: var(--ink-dim); min-height: 1em; }
.status.err { color: #ff8f7a; }
.venue { display: flex; justify-content: center; align-items: center; gap: .5em; padding: 18px 24px; border-radius: 999px; text-decoration: none;
  font: 900 clamp(18px, 1.7vw, 24px)/1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink);
  border: 1.5px solid rgba(255,255,255,.75); transition: background .25s, color .25s, border-color .25s; }
.venue span { transition: translate .25s; }
.venue:hover { background: var(--ink); color: var(--ink-dark); border-color: var(--ink); }
.venue:hover span { translate: 4px 0; }

/* Loader — pixel-identical chrome to the HUD so the hand-off is invisible */
#loader { position: fixed; inset: 0; z-index: 10; background: var(--black); color: var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: opacity .7s ease, visibility .7s; }
#loader > * { position: absolute; }
#loader .mark { top: calc(var(--gut) + env(safe-area-inset-top, 0px)); left: calc(var(--gut) + 8px); }
#loader .count { top: calc(var(--gut) + env(safe-area-inset-top, 0px)); right: calc(var(--gut) + 8px); }
#loader .mid { left: 50%; top: 50%; translate: -50% -50%; display: grid; gap: 14px; justify-items: center; }
#loader .pct { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-dim); }
#loader .bar { display: block; width: min(240px, 60vw); height: 1px; background: rgba(255,255,255,.18); }
#loader .bar b { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--lime); }
html:not(.loading) #loader { opacity: 0; visibility: hidden; }

/* Phones: headlines move to the top band, HUD thins out */
@media (max-width: 700px) {
  .head { max-width: 12ch; }
  .head br { display: none; }
  .head[data-pos="bl"] { bottom: auto; top: 16svh; }
  .head[data-pos="ml"], .head[data-pos="tr"], .head[data-pos="tl"] { top: 14svh; left: var(--gut); right: var(--gut); text-align: left; }
  .head[data-pos="fr"] { display: none; }   /* the phone shows the logo, the form carries the copy */
  .ruler, .blinq { display: none; }
  .caption { max-width: calc(100vw - 2 * var(--gut) - 16px); font-size: 10px; bottom: calc(var(--gut) + 44px + env(safe-area-inset-bottom, 0px)); }
  #waitlist { bottom: calc(var(--gut) + 64px + env(safe-area-inset-bottom, 0px)); }
  .head.step { top: auto; bottom: 11svh; translate: none; left: var(--gut) !important; right: var(--gut) !important; width: auto; }
  .head.step h3 { font-size: clamp(26px, 7.4vw, 40px); }
  .head.step p { font-size: 14px; }
}

/* Reduced motion: every scene is one still screen, no smoothing, no grain */
html.rm .beat { height: 100svh; }
html.rm .grain, html.rm .scroll-hint::before { animation: none; }