/* Teaser (fase 1): una sola pantalla, la foto manda y el texto susurra. */
:root{
  --night:#04070d;
  --ink:#eef3f8; --ink-2:#a9bccd; --ink-3:#6c8296;
  --line:rgba(169,188,205,.22);
  --ball:#e3f25a; --us:#2fd08f; --them:#ff8a8d; --glass:#7fd8e8;
  --body:"Geist", "Helvetica Neue", sans-serif;
  --mono:"Geist Mono", ui-monospace, monospace;
  --gutter:clamp(16px, 4vw, 48px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--night);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100vh;min-height:100svh;overflow-x:clip}
::selection{background:var(--ball);color:var(--night)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the photo ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden}
/* Portrait source: on wide screens it crops top and bottom; keep the ball (≈71% / 51%) in frame. */
.bg img{width:100%;height:100%;object-fit:cover;object-position:68% 66%;display:block;
  transform:scale(1.08);opacity:0;transition:opacity 2.2s ease, transform 9s var(--ease)}
body.in .bg img{opacity:1;transform:scale(1)}
/* Keep the ball clear of the headline: in landscape the photo slides up (ball in the upper third); in portrait
   the image is taller than the screen and anchored to the bottom, which lifts the ball above the text. */
@media (orientation:portrait){.bg img{position:absolute;left:0;bottom:0;height:135%;object-position:68% 50%}}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(4,7,13,.94) 0%,rgba(4,7,13,.7) 26%,rgba(4,7,13,0) 58%),
             linear-gradient(180deg,rgba(4,7,13,.55) 0%,rgba(4,7,13,0) 18%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- top bar ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:max(18px,env(safe-area-inset-top)) var(--gutter) 0}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap;font-weight:600;font-size:17px;letter-spacing:.01em;color:var(--ink)}
.logo-mark{width:24px;height:24px}
.logo b{font-weight:400;color:var(--ink-2)}
.lang{display:flex;padding:3px;border-radius:99px;background:rgba(238,243,248,.06);border:1px solid rgba(238,243,248,.08);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lang button{border:0;background:none;color:var(--ink-2);font:500 11px var(--mono);letter-spacing:.06em;min-width:34px;min-height:30px;
  border-radius:99px;cursor:pointer;transition:background .2s,color .2s}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#0b1306}

/* ---------- content ---------- */
.stage{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;text-align:center;padding:120px var(--gutter) max(40px,calc(env(safe-area-inset-bottom) + 28px))}
.tag{font-weight:300;font-size:clamp(30px,5.2vw,60px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance;max-width:16ch}
.sub{margin:16px auto 28px;max-width:440px;color:var(--ink-2);font-size:clamp(15px,1.6vw,17px);text-wrap:pretty}
.soon{margin-top:clamp(28px,6vh,56px);font:400 12px var(--mono);letter-spacing:.62em;text-transform:uppercase;
  color:var(--ink);padding-left:.62em /* balance the trailing tracking */}

/* staggered entrance */
.tag,.sub,form.wl,.form-msg,.privacy-line,.soon,.top{opacity:0;transform:translateY(14px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
body.in .top{opacity:1;transform:none;transition-delay:1.4s}
body.in .tag{opacity:1;transform:none;transition-delay:.7s}
body.in .sub{opacity:1;transform:none;transition-delay:1s}
body.in form.wl,body.in .form-msg,body.in .privacy-line{opacity:1;transform:none;transition-delay:1.25s}
.privacy-line a{color:inherit;text-decoration:underline;text-underline-offset:2px}
body.in .soon{opacity:1;transform:none;transition-delay:1.7s}

/* ---------- waitlist ---------- */
form.wl{display:flex;gap:8px;width:100%;max-width:520px;padding:6px;border-radius:999px;
  background:rgba(10,18,30,.55);border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
form.wl input{flex:1;min-width:0;min-height:46px;border:0;background:transparent;color:var(--ink);font:16px var(--body);padding:0 16px}
input::placeholder{color:var(--ink-3)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;border:0;
  background:var(--ball);color:#0b1306;font:600 15px/1 var(--body);cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 36px -8px rgba(227,242,90,.55)}
.btn:disabled{opacity:.6;cursor:wait}
.btn:focus-visible,input:focus-visible,.lang button:focus-visible{outline:2px solid var(--glass);outline-offset:3px}
.form-msg{min-height:22px;margin-top:12px;font-size:14px;color:var(--ink-2)}
.form-msg.ok{color:var(--us)}
.privacy-line{margin-top:2px;font-size:12px;color:var(--ink-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg.err{color:var(--them)}
form.wl.done{display:none}

@media (max-width:560px){
  form.wl input{padding:0 12px}
  .soon{letter-spacing:.5em;padding-left:.5em}
}

@media (prefers-reduced-motion:reduce){
  .bg img,.tag,.sub,form.wl,.form-msg,.privacy-line,.soon,.top{transition:opacity .4s;transform:none}
  body.in .tag,body.in .sub,body.in form.wl,body.in .form-msg,body.in .privacy-line,body.in .soon,body.in .top{transition-delay:0s}
}