/* ===========================================================
   Drop Alerts — Waitlist landing
   Sunrise Park · Fredoka/Nunito/Caveat · squash & stretch
   =========================================================== */
:root{
  --coral:#FF7A59; --coral-deep:#F0573A; --gold:#FFC24B; --teal:#23B3A0;
  --navy:#2C2754; --cream:#FFF6EC; --blush:#FFE2D3;
  --ink:#2C2754; --muted:#7a7299;
  --accent:var(--coral); --accent-deep:var(--coral-deep);
  --surface:#fff;
  --shadow:0 18px 40px -18px rgba(44,39,84,.45);
  --shadow-sm:0 8px 20px -10px rgba(44,39,84,.4);
  --shadow-lg:0 30px 60px -24px rgba(44,39,84,.5);
  --pop:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100%;font-family:'Nunito',system-ui,sans-serif;color:var(--ink);
  background:radial-gradient(125% 80% at 50% -8%, #FFFDF8 0%, var(--cream) 44%, #FBE7D7 100%);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;display:flex;flex-direction:column;
}
h1,h2,h3,.fred{font-family:'Fredoka',sans-serif}

/* clouds */
.sky-decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cloud{position:absolute;background:#fff;border-radius:100px;opacity:.5;box-shadow:0 12px 26px -16px rgba(44,39,84,.3)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.c1{width:170px;height:48px;top:16%;left:7%;animation:drift 28s ease-in-out infinite}
.c1::before{width:74px;height:74px;top:-34px;left:26px}.c1::after{width:56px;height:56px;top:-22px;left:84px}
.c2{width:130px;height:38px;top:11%;right:9%;opacity:.4;animation:drift 34s ease-in-out infinite reverse}
.c2::before{width:58px;height:58px;top:-28px;left:18px}.c2::after{width:44px;height:44px;top:-16px;left:66px}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(34px)}}

/* nav */
.nav{position:relative;z-index:5;display:flex;align-items:center;gap:16px;padding:20px clamp(20px,5vw,52px)}
.logo{display:flex;align-items:center;gap:2px;font-family:'Fredoka';font-weight:700;font-size:25px;
  color:var(--navy);letter-spacing:-1px;text-decoration:none;flex:1}
.logo .zap{display:inline-grid;place-items:center;width:33px;height:33px;background:var(--gold);
  border-radius:50%;font-size:19px;transform:rotate(-8deg);box-shadow:var(--shadow-sm);margin:0 1px;
  transition:transform .3s var(--pop)}
.logo:hover .zap{transform:rotate(8deg) scale(1.12)}
.theme-toggle{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;flex:none;
  background:#fff;color:var(--navy);box-shadow:var(--shadow-sm);font-size:18px;display:grid;place-items:center;
  transition:transform .2s var(--pop), background .3s ease}
.theme-toggle:hover{transform:translateY(-2px) rotate(-10deg) scale(1.07)}
.theme-toggle .ic-sun{display:none}.theme-toggle .ic-moon{display:inline}
:root[data-theme="dark"] .theme-toggle{background:#241E42;color:var(--gold)}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:inline}

/* ===================== HERO ===================== */
.hero{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,64px);align-items:center;
  max-width:1140px;margin:0 auto;padding:clamp(20px,4vw,48px) clamp(20px,5vw,52px) 40px;width:100%}
.copy{max-width:560px}
.eyebrow{font-family:'Caveat',cursive;font-weight:700;font-size:26px;color:var(--accent-deep);
  transform:rotate(-2deg);display:inline-flex;align-items:center;gap:6px;margin-bottom:6px}
.hero h1{font-size:clamp(40px,5.6vw,68px);line-height:.98;letter-spacing:-1.5px;margin:6px 0 16px;font-weight:700}
.hero h1 .hl{color:var(--accent-deep);position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:6%;height:28%;
  background:var(--gold);opacity:.45;border-radius:8px;z-index:-1;transform:rotate(-1deg)}
.hero .lead{font-size:clamp(16px,1.5vw,19px);color:#5f5882;font-weight:600;line-height:1.55;max-width:46ch;margin:0 0 26px}

/* form */
.signup{display:flex;gap:10px;max-width:480px}
.signup .field{flex:1;position:relative}
.signup input{width:100%;font-family:'Nunito';font-weight:700;font-size:16px;color:var(--navy);
  background:var(--surface);border:2px solid #efe3d6;border-radius:16px;padding:16px 18px;outline:none;
  transition:border-color .18s ease, box-shadow .18s ease}
.signup input::placeholder{color:#b3aac8;font-weight:600}
.signup input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,89,.15)}
.signup input.err{border-color:#e8556f;box-shadow:0 0 0 4px rgba(232,85,111,.14)}
.signup button{font-family:'Fredoka';font-weight:600;font-size:16px;color:#fff;white-space:nowrap;
  background:linear-gradient(150deg,var(--accent),var(--accent-deep));border:none;cursor:pointer;
  border-radius:16px;padding:0 26px;box-shadow:0 12px 22px -10px rgba(240,87,58,.9);
  transition:transform .14s var(--pop)}
.signup button:hover{transform:translateY(-2px) scale(1.03)}
.signup button:active{transform:scale(.96)}
.formnote{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--muted)}
.formnote .err-msg{color:#e8556f;display:none}
.signup.invalid ~ .formnote .ok-msg{display:none}
.signup.invalid ~ .formnote .err-msg{display:inline}

/* success state */
.success{display:none;max-width:480px;background:var(--surface);border-radius:22px;box-shadow:var(--shadow);
  padding:22px 24px;animation:pop .5s var(--pop)}
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
.success.show{display:block}
.signup.done,.signup.done ~ .formnote{display:none}
.success .top{display:flex;align-items:center;gap:12px}
.success .tick{width:46px;height:46px;border-radius:14px;background:var(--teal);display:grid;place-items:center;
  flex:none;box-shadow:var(--shadow-sm);transform:rotate(-5deg)}
.success .tick svg{width:24px;height:24px}
.success h3{font-size:21px;margin:0;font-weight:600}
.success .sub-msg{font-size:13.5px;font-weight:700;color:var(--muted);margin:4px 0 0}


/* game crests */
.crests{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.crest{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:30px;padding:7px 14px 7px 8px;
  box-shadow:var(--shadow-sm);font-family:'Fredoka';font-weight:600;font-size:13.5px}
.crest .mono{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:#fff;
  font-family:'Fredoka';font-weight:700;font-size:12px;flex:none}

/* ===================== STAGE (right) ===================== */
.stage{position:relative;border-radius:36px;min-height:520px;overflow:hidden;
  background:radial-gradient(120% 110% at 50% 0%, #fff 0%, var(--blush) 68%, #FFD3BE 100%);
  box-shadow:var(--shadow-lg);display:grid;place-items:end center}
.stage .sun{position:absolute;top:-110px;left:50%;transform:translateX(-50%);width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,194,75,.6),rgba(255,194,75,0) 68%)}
.stage .sparkle{position:absolute;font-size:22px;opacity:.7;color:var(--gold);animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}
.stage .wlPocket{position:relative;z-index:3;margin-bottom:46px;transform-origin:center bottom}
.stage .wlPocket .pocket-svg{width:280px}
.stage .wlPocket.cheer{animation:cheer 1.4s var(--pop)}
@keyframes cheer{0%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-18px) scale(.92,1.1)}50%{transform:translateY(0) scale(1.1,.9)}75%{transform:translateY(-6px) scale(.98,1.02)}100%{transform:translateY(0) scale(1,1)}}
.float-bob{animation:bob 3.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
.tail{animation:tailwag 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
@keyframes tailwag{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}
.eyes{animation:blink 5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
/* floating cards in stage */
.flo{position:absolute;z-index:2;background:#fff;border-radius:16px;box-shadow:var(--shadow);
  padding:10px 12px;display:flex;gap:9px;align-items:center;animation:bob 4s ease-in-out infinite}
.flo.a{left:5%;top:22%}
.flo.b{right:5%;top:40%;animation-delay:1.1s}
.flo .mini{width:30px;height:40px;border-radius:7px;flex:none;display:grid;place-items:center;color:#fff;font-size:15px}
.flo b{font-family:'Fredoka';font-weight:600;font-size:12.5px;line-height:1.05;display:block}
.flo span{font-size:10.5px;color:var(--muted);font-weight:700}
.spark{position:absolute;width:10px;height:10px;border-radius:2px;z-index:6;opacity:0;pointer-events:none}

/* footer */
.foot{position:relative;z-index:1;text-align:center;padding:24px 20px 34px;color:var(--muted);font-size:13px;font-weight:700}

/* ===================== DARK ===================== */
:root[data-theme="dark"]{--ink:#EFEAFF;--muted:#9F98C0;--surface:#241E42;
  --shadow:0 18px 40px -18px rgba(0,0,0,.6);--shadow-sm:0 8px 20px -10px rgba(0,0,0,.55);--shadow-lg:0 30px 60px -24px rgba(0,0,0,.72)}
[data-theme="dark"] body{background:radial-gradient(125% 80% at 50% -8%, #251E48 0%, #181330 48%, #110D24 100%)}
[data-theme="dark"] .cloud{background:#2b2550;opacity:.22;box-shadow:none}
[data-theme="dark"] .cloud::before,[data-theme="dark"] .cloud::after{background:#2b2550}
[data-theme="dark"] .logo{color:#F3EEFF}
[data-theme="dark"] .hero h1{color:#F6F2FF}
[data-theme="dark"] .hero .lead{color:#C6BFE4}
[data-theme="dark"] .signup input{background:#1b1636;border-color:rgba(255,255,255,.1);color:#F3EEFF}
[data-theme="dark"] .signup input::placeholder{color:#7a7299}
[data-theme="dark"] .stage{background:radial-gradient(120% 110% at 50% 0%, #3c2c54 0%, #2a2143 62%, #1d1736 100%)}
[data-theme="dark"] .flo{background:#241E42;border:1px solid rgba(255,255,255,.07)}
[data-theme="dark"] .flo b{color:#F3EEFF}
[data-theme="dark"] .crest,[data-theme="dark"] .success{border:1px solid rgba(255,255,255,.07)}
[data-theme="dark"] .success h3{color:#F3EEFF}
[data-theme="dark"] .success .sub-msg{color:#9F98C0}

/* ===================== RESPONSIVE ===================== */
@media(max-width:880px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:8px}
  .copy{max-width:none;margin:0 auto}
  .hero .lead{margin-left:auto;margin-right:auto}
  .signup{margin:0 auto}
  .formnote,.crests{justify-content:center}
  .success{margin:0 auto}
  .stage{order:-1;min-height:360px}
  .stage .wlPocket .pocket-svg{width:210px}
  .flo.a{left:3%}.flo.b{right:3%}
}
@media(max-width:520px){
  .nav{padding:16px 20px}
  .logo{font-size:22px}
  .hero h1{font-size:36px;letter-spacing:-1px}
  .signup{flex-direction:column}
  .signup input{font-size:16px}
  .signup button{padding:15px 26px;font-size:17px}
  .success{padding:18px 18px}
  .flo{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}