/* Goalendar — coming soon.
   Opening choreography ported from the "Stadium ignition" reference (timings, easing and geometry as specified).
   Palette: deep emerald darkness, mint lines and emblem, restrained gold. */
:root{
  --bg:#04100c; --bg-2:#081e16; --amb:#123d2a;
  --card:rgba(14,32,24,.82); --stroke:#254234; --line:#1a3026;
  --ink:#eef0e7; --ink-2:#c9d6cb; --dim:#98a99d; --faint:#6b8073; --placeholder:#3a5245;
  --mint:#31cd94; --mint-2:#4df5ba; --gold:#ffb52e; --gold-dim:#c9a362;
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --e:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{color-scheme:dark;background:var(--bg);}
body{
  margin:0;min-height:100vh;min-height:100svh;
  background:var(--bg);color:var(--ink);font-family:var(--f);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
button,input{font-family:inherit;font-size:inherit;color:inherit;}
button{border:none;background:none;padding:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;}
.mono{font-family:var(--m);}
img{display:block;}

/* ---------- 0.00–1.63 s · Illuminate: the emerald atmosphere lifts, two floodlights sweep inward ---------- */
.ambience{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 72% 62% at 50% 34%,var(--amb) 0%,var(--bg-2) 60%,var(--bg) 100%);
  opacity:.1;animation:ambience 2400ms var(--e) forwards;
}
.beam{
  position:fixed;z-index:0;pointer-events:none;top:-12vh;width:64vw;height:150vh;
  background:linear-gradient(180deg,rgba(179,255,224,.22) 0%,rgba(56,203,144,.07) 42%,rgba(56,203,144,0) 74%);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 68%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 68%,transparent 100%);
  transform-origin:50% 0;opacity:0;filter:blur(12px);
}
.beam-l{left:-22vw;animation:beamL 3300ms 100ms linear forwards;}
.beam-r{right:-22vw;animation:beamR 3300ms 220ms linear forwards;}

/* ---------- stage ---------- */
.stage{
  position:relative;z-index:1;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:30px;padding:48px 16px 26px;text-align:center;
  padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));
}

/* ---------- 1.40–3.75 s · Reveal the emblem, complete the identity ---------- */
.ignition{display:flex;flex-direction:column;align-items:center;gap:0;}
.kicker{
  margin:0 0 14px;display:flex;flex-direction:column;align-items:center;gap:9px;
  font-weight:700;font-size:10px;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#96b4a1;
  opacity:0;animation:rise 950ms 2500ms var(--e) forwards;
}
.kicker .rule{display:block;width:30px;height:1.5px;background:var(--gold);}

.markwrap{position:relative;width:168px;height:171px;}
.mark{
  position:relative;z-index:2;width:168px;height:171px;
  opacity:0;filter:blur(9px);animation:mark 1350ms 1400ms linear forwards;
}
.fx{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:1;}
/* pitch: reference 312×472, centre circle 40px below the emblem's centre; drawn, tilted up, then expands and fades */
.pitch{
  position:absolute;left:-156px;top:-196px;width:312px;height:472px;overflow:visible;
  color:#39ca92;opacity:0;transform-origin:50% 48%;
  animation:pitchIn 2600ms linear forwards;
}
.pitch .draw{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:draw 1450ms 180ms var(--e) forwards;}
.sparks{position:absolute;left:-195px;top:-368px;width:390px;height:800px;overflow:visible;}
.sparks circle{opacity:0;animation:spark 2300ms linear forwards;}
.pulse{
  position:absolute;left:-137px;top:-129px;width:274px;height:274px;border-radius:50%;
  border:1px solid var(--mint-2);opacity:0;animation:pulse 1400ms 1400ms linear forwards;
}
.halo{
  position:absolute;left:-145px;top:-190px;width:290px;height:380px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(51,206,151,.35) 0%,rgba(51,206,151,0) 70%);
  opacity:0;animation:halo 2500ms 1100ms linear forwards;
}
.word{margin:30px 0 0;opacity:0;animation:rise 950ms 2230ms var(--e) forwards;}
.word img{width:260px;height:auto;}
.tagline{
  margin:16px 0 0;font-size:13px;font-weight:500;letter-spacing:.05em;color:#a7c5b3;
  opacity:0;animation:rise 800ms 2710ms var(--e) forwards;
}

/* ---------- the tease: rises once the identity has settled ---------- */
.tease{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:600px;}
.tease > *{opacity:0;animation:rise 720ms var(--e) forwards;}
.tease > :nth-child(1){animation-delay:3100ms;}
.tease > :nth-child(2){animation-delay:3240ms;}
.tease > :nth-child(3){animation-delay:3400ms;}
.tease > :nth-child(4){animation-delay:3560ms;}
.tease > :nth-child(5){animation-delay:3700ms;}

.lock{
  margin:0;display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,181,46,.5);border-radius:999px;background:rgba(255,181,46,.08);
  padding:7px 13px 7px 11px;font-size:11.5px;font-weight:600;color:var(--gold);
}
.lock .mono{font-size:11px;color:var(--gold-dim);letter-spacing:.06em;min-width:6.2ch;text-align:left;}

.head{
  margin:0;font-size:clamp(32px,6.4vw,54px);font-weight:800;line-height:1.02;letter-spacing:-.035em;
  display:flex;flex-direction:column;text-wrap:balance;
}
.head .dim{color:var(--dim);}
.head .ink{color:var(--ink);}

.score{
  margin:2px 0 0;display:flex;align-items:center;gap:.06em;
  font-family:var(--m);font-weight:600;font-size:clamp(64px,14vw,104px);line-height:1;color:var(--mint);
  text-shadow:0 0 34px rgba(49,205,148,.22);
}
.score .sep{color:var(--stroke);font-weight:400;transform:translateY(-.06em);}
.score .d{display:inline-block;min-width:1ch;transition:opacity .18s ease,transform .18s ease,color .4s ease;}
.score .d.out{opacity:0;transform:translateY(-.16em);}
.score .d.in{animation:rollIn .3s var(--e);}
.score.mystery{color:var(--gold);text-shadow:0 0 34px rgba(255,181,46,.22);}

.sub{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:36ch;}
.strip{margin:2px 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-indent:.2em;}
.strip i{font-style:normal;color:var(--stroke);margin:0 .4em;}

/* code */
.code{
  width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:11px;
  opacity:0;animation:rise 720ms 3900ms var(--e) forwards;
}
.lbl{font-weight:700;font-size:10.5px;letter-spacing:.18em;text-indent:.18em;text-transform:uppercase;color:var(--faint);}
.field{
  width:100%;display:flex;align-items:center;gap:8px;
  border:1px solid var(--stroke);border-radius:14px;background:var(--card);padding:0 6px 0 16px;height:54px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 20px 40px -30px rgba(0,0,0,.8);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .2s ease;
}
.field:focus-within{border-color:var(--mint);}
.field input{
  flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);
  font-family:var(--m);font-size:19px;letter-spacing:.14em;text-transform:uppercase;
}
.field input::placeholder{color:var(--placeholder);letter-spacing:.14em;}
.go{
  flex:none;height:40px;padding:0 16px;border-radius:10px;background:var(--mint);color:#04140d;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;transition:background .15s ease,transform .15s ease;
}
.go:hover{background:var(--mint-2);}
.go:active{transform:scale(.97);}
.reply{margin:0;min-height:1.6em;font-size:11.5px;letter-spacing:.04em;color:var(--dim);}
.reply.show{animation:rise 360ms var(--e);}
.reply.warm{color:var(--mint);}
.code.shake .field{animation:shake 420ms var(--e);}

/* footer */
.foot{
  margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:5px;
  opacity:0;animation:rise 650ms 4100ms var(--e) forwards;
}
.foot p{margin:0;font-size:12.5px;color:var(--dim);}
.foot b{color:var(--ink-2);font-weight:700;}
.foot .tiny{font-size:10.5px;letter-spacing:.14em;color:var(--faint);}

/* ---------- motion (per-segment easing, as in the reference) ---------- */
@keyframes ambience{from{opacity:.1;}to{opacity:1;}}
@keyframes beamL{
  0%{opacity:0;transform:rotate(-35deg);animation-timing-function:var(--e);}
  48%{opacity:.9;transform:rotate(18deg);animation-timing-function:var(--e);}
  100%{opacity:.17;transform:rotate(3deg);}
}
@keyframes beamR{
  0%{opacity:0;transform:rotate(40deg);animation-timing-function:var(--e);}
  50%{opacity:.8;transform:rotate(-18deg);animation-timing-function:var(--e);}
  100%{opacity:.16;transform:rotate(-3deg);}
}
@keyframes draw{from{stroke-dashoffset:1;opacity:0;}to{stroke-dashoffset:0;opacity:1;}}
@keyframes pitchIn{
  0%{transform:perspective(550px) rotateX(42deg) scale(.75) translateY(105px);opacity:0;animation-timing-function:var(--e);}
  55%{transform:perspective(550px) rotateX(0deg) scale(1) translateY(0);opacity:.45;animation-timing-function:var(--e);}
  100%{transform:perspective(550px) rotateX(0deg) scale(1.65) translateY(0);opacity:0;}
}
@keyframes pulse{
  0%{opacity:0;transform:scale(.2);animation-timing-function:var(--e);}
  40%{opacity:.45;transform:scale(.7);animation-timing-function:var(--e);}
  100%{opacity:0;transform:scale(1.75);}
}
@keyframes halo{
  0%{opacity:0;animation-timing-function:var(--e);}
  50%{opacity:.85;animation-timing-function:var(--e);}
  100%{opacity:.38;}
}
@keyframes spark{
  0%{opacity:0;transform:translateY(45px);animation-timing-function:var(--e);}
  35%{opacity:.6;animation-timing-function:var(--e);}
  100%{opacity:0;transform:translateY(-70px);}
}
@keyframes mark{
  0%{opacity:0;transform:translateY(25px) scale(.73);filter:blur(9px);animation-timing-function:var(--e);}
  76%{opacity:1;transform:translateY(-3px) scale(1.035);filter:blur(0px);animation-timing-function:var(--e);}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0px);}
}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes rollIn{from{opacity:0;transform:translateY(.16em);}to{opacity:1;transform:none;}}
@keyframes shake{0%,100%{transform:none;}20%{transform:translateX(-5px);}45%{transform:translateX(4px);}70%{transform:translateX(-2px);}}

@media (prefers-reduced-motion:reduce){
  .ambience,.beam,.pitch,.pitch .draw,.sparks circle,.pulse,.halo,.mark,.word,.tagline,.kicker,.tease > *,.code,.foot{animation:none;}
  .ambience{opacity:1;}
  .beam-l{opacity:.17;transform:rotate(3deg);}
  .beam-r{opacity:.16;transform:rotate(-3deg);}
  .pitch,.sparks,.pulse{display:none;}
  .halo{opacity:.38;}
  .mark{opacity:1;filter:none;}
  .word,.tagline,.kicker,.tease > *,.code,.foot{opacity:1;}
  .score .d,.reply,.code.shake .field{animation:none;transition:none;}
}

@media (max-width:480px){
  .stage{gap:26px;padding-top:40px;}
  .markwrap,.mark{width:148px;height:151px;}
  .fx{transform:scale(.88);}
  .word{margin-top:26px;}
  .word img{width:236px;}
  .sub{font-size:15px;}
}
@media (max-height:640px){
  .stage{justify-content:flex-start;}
}