/* =============================================================================
   Cambridge Book Publishing, Event Microsite
   "Storybook Wonderland" rendered in the saturated brand blue+gold world.
   Design tokens → primitives → sky/art → views. Mobile-first.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens -- */
:root{
  /* brand blues */
  --blue:#2E86C7;          /* brand primary (accents, borders, fills w/ dark text) */
  --blue-strong:#135E9E;   /* AA-safe blue for white-on-blue buttons/links-on-light */
  --blue-bright:#1580ED;
  --navy:#003E7A;
  --navy-deep:#002A57;
  --grad-h-from:#1787F3;   /* signature gradient-clipped heading */
  --grad-h-to:#003787;

  /* sky */
  --sky-top:#9AD4FF;
  --sky-mid:#3E97DE;
  --sky-bot:#1667AE;
  --sky-deep:#0A4A86;

  /* warm + candy */
  --gold:#F5A623;
  --gold-deep:#E0900F;
  --gold-soft:#FFC845;
  --candy:#FF7A6B;
  --coral-deep:#E8543F;
  --mint:#37C9A6;

  /* paper / ink */
  --cream:#FFF7EC;
  --paper:#FFFFFF;
  --paper-2:#FFFDF9;
  --ink:#1B2430;
  --muted:#586377;         /* AA on cream & paper */
  --line:#E9E1D3;          /* warm hairline */
  --line-cool:#D8E6F4;

  /* radii */
  --r-pill:999px;
  --r-card:16px;
  --r-lg:24px;
  --r-door:26px;

  /* shadows, real offset + blur, tinted from navy */
  --sh-soft:0 6px 18px -8px rgba(3,42,86,.28);
  --sh-card:0 16px 34px -14px rgba(3,42,86,.34);
  --sh-lift:0 26px 50px -18px rgba(3,42,86,.42);
  --sh-glow:0 26px 54px -20px rgba(37,99,235,.55);
  --sh-gold:0 16px 30px -12px rgba(224,144,15,.5);

  --ring:0 0 0 3px rgba(21,94,158,.35);
  --wrap:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pop:cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------------ reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Lexend","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--blue-strong);text-decoration-thickness:.08em;text-underline-offset:.15em}
h1,h2,h3{line-height:1.12;margin:0;font-weight:700;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
.ic{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.18em;fill:none;flex:none}
[hidden]{display:none !important}
.req{color:var(--coral-deep)}
.opt{color:var(--muted);font-weight:400;font-size:.85em}

/* ----------------------------------------------------------- gradient head -- */
.ghead{
  font-size:clamp(1.7rem,5.4vw,2.5rem);
  font-weight:800;
  background:linear-gradient(180deg,var(--grad-h-from),var(--grad-h-to));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  width:fit-content;
}

/* --------------------------------------------------------------- buttons --- */
.btn{
  --bg:var(--blue-strong);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.5em;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  font-weight:600;font-size:1rem;line-height:1;text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
  box-shadow:var(--sh-soft);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--gold{--bg:var(--gold);--fg:var(--navy-deep);box-shadow:var(--sh-gold)}
.btn--gold:hover{--bg:var(--gold-deep)}
.btn--blue{--bg:var(--blue-strong)}
.btn--blue:hover{--bg:#0f5088}
.btn--ghost{--bg:transparent;--fg:var(--blue-strong);--bd:var(--blue);box-shadow:none}
.btn--ghost:hover{--bg:rgba(46,134,199,.1)}
.btn--lg{padding:1.05em 1.9em;font-size:1.08rem}
.btn--sm{padding:.6em 1.05em;font-size:.9rem}
.btn__spin{width:1.1em;height:1.1em;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.btn.is-busy{pointer-events:none}
.btn.is-busy .btn__label{opacity:.55}

/* =================================================================== topbar */
.topbar{
  position:sticky;top:0;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:.6rem clamp(1rem,4vw,2rem);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(216,230,244,.7);
}
.brand{grid-column:2;justify-self:center;display:inline-flex;align-items:center}
.brand__logo{height:34px;width:auto}
.topnav{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.5rem}
.topnav__cta{
  display:inline-flex;align-items:center;padding:.5em 1em;border-radius:var(--r-pill);
  font-weight:600;font-size:.92rem;line-height:1;text-decoration:none;white-space:nowrap;
  color:var(--blue-strong);background:rgba(46,134,199,.1);
  transition:background .16s,transform .16s var(--ease);
}
.topnav__cta:hover{background:rgba(46,134,199,.18);transform:translateY(-1px)}
.topnav__cta--primary{color:var(--navy-deep);background:var(--gold);box-shadow:var(--sh-gold)}
.topnav__cta--primary:hover{background:var(--gold-deep)}
.topnav__back{
  grid-column:1;justify-self:start;
  display:inline-flex;align-items:center;gap:.25em;
  padding:.5em .9em;border-radius:var(--r-pill);
  color:var(--blue-strong);font-weight:600;font-size:.95rem;text-decoration:none;
}
.topnav__back:hover{background:rgba(46,134,199,.1)}
.wishbtn{
  position:relative;display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:50%;border:none;
  background:rgba(46,134,199,.12);color:var(--blue-strong);
  transition:background .18s,transform .18s var(--ease);
}
.wishbtn:hover{background:rgba(46,134,199,.2);transform:translateY(-1px)}
.wishbtn.is-pulse{animation:pop .4s var(--pop)}
.wishbtn__count{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--candy);color:#fff;font-size:.72rem;font-weight:700;border:2px solid #fff;
}

/* ==================================================================== views */
.view{animation:viewIn .5s var(--ease) both}
.view--home,.view--thanks{position:relative;overflow:hidden}
.wrap{max-width:var(--wrap);margin-inline:auto;padding:clamp(1.5rem,4vw,2.75rem) clamp(1rem,4vw,2rem) 3rem}
.wrap--narrow{max-width:660px}
.section-head{margin-bottom:1.6rem}
.section-head__sub{margin-top:.5rem;color:var(--muted);max-width:60ch}

/* ===================================================================== SKY */
.sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky__day,.sky__night{position:absolute;inset:0;transition:opacity 1s var(--ease)}
.sky__day{opacity:1;background:
  radial-gradient(140% 95% at 82% -4%, rgba(255,226,150,.6), rgba(255,226,150,0) 42%),
  radial-gradient(120% 120% at 8% 114%, rgba(120,196,240,.4), rgba(120,196,240,0) 55%),
  linear-gradient(180deg,#B7E4FF 0%,#8FCCF2 24%,#57A4E6 55%,#2E86C7 82%,#155F9E 100%)}
.sky__night{opacity:0;background:
  radial-gradient(120% 85% at 82% 3%, rgba(190,205,255,.32), rgba(190,205,255,0) 46%),
  linear-gradient(180deg,#243560 0%,#182647 34%,#0E1A36 68%,#070E20 100%)}
[data-theme="dark"] .sky__day{opacity:0}
[data-theme="dark"] .sky__night{opacity:1}
.celestial{position:absolute;top:-6px;right:5%;width:clamp(108px,26vw,168px);height:clamp(108px,26vw,168px);
  transition:transform 1.15s cubic-bezier(.34,.66,.3,1),opacity 1.15s var(--ease)}
.celestial__body{width:100%;height:100%;display:block}
.celestial--sun .celestial__body{color:var(--gold-soft);animation:sunSpin 60s linear infinite,glowPulse 6s ease-in-out infinite}
.celestial--moon .celestial__body{filter:drop-shadow(0 0 20px rgba(180,205,255,.55));animation:moonBob 8s ease-in-out infinite}
.celestial--sun{transform:translateY(0) scale(1);opacity:1}
.celestial--moon{transform:translateY(-46vh) scale(.9);opacity:0}
[data-theme="dark"] .celestial--sun{transform:translateY(80vh) scale(.7);opacity:0}
[data-theme="dark"] .celestial--moon{transform:translateY(-3vh) scale(.9);opacity:1}
.cloud{position:absolute;color:#fff;opacity:.9;filter:drop-shadow(0 10px 14px rgba(3,42,86,.12))}
.cloud--1{width:150px;top:14%;left:-40px;animation:drift 34s linear infinite}
.cloud--2{width:96px;top:30%;left:60%;opacity:.75;animation:drift 46s linear infinite;animation-delay:-12s}
.cloud--3{width:120px;top:60%;left:20%;opacity:.6;animation:drift 40s linear infinite;animation-delay:-24s}
/* starfield, only lit at night */
.starfield{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
[data-theme="dark"] .starfield{opacity:1}
.sf-star{position:absolute;border-radius:50%;background:#FFF6D8;box-shadow:0 0 6px rgba(255,244,200,.9);animation:twinkle var(--d,4s) ease-in-out infinite}
.shooting{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 7px 1px rgba(255,255,255,.9);animation:shoot var(--sd,8s) ease-in infinite;animation-delay:var(--sdelay,3s)}
.shooting::after{content:"";position:absolute;right:2px;top:50%;width:74px;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0));border-radius:2px}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(22deg)}5%{opacity:1}16%{opacity:1}24%{opacity:0;transform:translate(-280px,150px) rotate(22deg)}100%{opacity:0;transform:translate(-280px,150px) rotate(22deg)}}

/* landscape: mountains, hills, trees (sun sets behind it) */
.scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(180px,44vh,360px)}
.scene *{transition:fill .6s var(--ease)}
.sc-mtn{fill:#88A6C8}
.sc-snow{fill:#F3F8FF}
.sc-hill1{fill:#79C079}
.sc-hill2{fill:#4E9E57}
.sc-trunk{fill:#7A4A25}
.sc-leaf{fill:#2F8B49}
[data-theme="dark"] .sc-mtn{fill:#1A2947}
[data-theme="dark"] .sc-snow{fill:#41537B}
[data-theme="dark"] .sc-hill1{fill:#15351F}
[data-theme="dark"] .sc-hill2{fill:#0E2817}
[data-theme="dark"] .sc-trunk{fill:#2A1A10}
[data-theme="dark"] .sc-leaf{fill:#0B2011}
.balloon{position:absolute;width:64px;height:auto;filter:drop-shadow(0 14px 16px rgba(3,42,86,.22))}
.balloon--a{color:var(--gold);top:24%;left:8%;animation:float 9s ease-in-out infinite}
.balloon--b{color:var(--candy);top:12%;left:74%;width:52px;animation:float 11s ease-in-out infinite .6s}
.balloon--c{color:var(--mint);top:51%;left:78%;width:46px;animation:float 10s ease-in-out infinite 1.2s}
.balloon--d{color:#fff;top:66%;left:6%;width:40px;opacity:.9;animation:float 12s ease-in-out infinite .3s}

/* ==================================================================== HERO */
.view--home{
  min-height:calc(100svh - 52px);
  display:flex;flex-direction:column;
  padding-bottom:2rem;
}
.hero{
  position:relative;z-index:2;
  max-width:760px;margin:0 auto;padding:clamp(1.25rem,4.5vh,2.75rem) clamp(1.2rem,5vw,2rem) 1rem;
  text-align:center;
}
.hero::before{content:"";position:absolute;inset:-6% -10% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 64% at 50% 42%,rgba(2,28,64,.62),rgba(2,28,64,0) 50%)}
.hero__kicker{
  display:inline-block;margin:0 0 1rem;
  padding:.5em 1.1em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.22);color:#003787;font-weight:500;font-size:.95rem;
  border:1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
[data-theme="dark"] .hero__kicker{color:#fff}
.hero__title{
  color:#fff;font-size:clamp(2.3rem,8.5vw,4rem);font-weight:800;
  text-shadow:0 2px 18px rgba(2,32,70,.35);text-wrap:balance;
}
.hero__event{color:var(--gold-soft)}
/* dark mode: the moon can sit behind the headline, halo keeps letters legible */
[data-theme="dark"] .hero__title{text-shadow:0 2px 10px rgba(4,12,28,.9),0 0 24px rgba(4,12,28,.62)}
.hero__sub{
  margin:1.1rem auto 0;max-width:46ch;
  color:rgba(255,255,255,.94);font-size:clamp(1.02rem,2.6vw,1.22rem);font-weight:400;
  text-shadow:0 1px 10px rgba(2,32,70,.28);
}

/* doors */
.doors{margin-top:clamp(1.8rem,5vw,2.6rem);display:grid;gap:1rem}
@media(min-width:680px){.doors{grid-template-columns:1fr 1fr;gap:1.25rem}}
.door{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1.6rem 1.25rem 1.4rem;
  border-radius:var(--r-door) var(--r-door) 20px 20px;
  text-decoration:none;text-align:center;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:var(--sh-card);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
  isolation:isolate;
}
.door::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit}
.door:hover{transform:translateY(-6px)}
.door:active{transform:translateY(-2px)}
.door--explore{background:linear-gradient(165deg,#FFD264,var(--gold));color:var(--navy-deep)}
.door--explore:hover{box-shadow:var(--sh-gold)}
.door--submit{
  background:linear-gradient(165deg,rgba(6,46,95,.46),rgba(6,46,95,.28));
  color:#fff;border-color:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.door--submit:hover{box-shadow:var(--sh-glow)}
.door__art{
  width:60px;height:60px;display:grid;place-items:center;border-radius:18px;
  background:rgba(255,255,255,.55);color:var(--navy);
}
.door__art--alt{background:rgba(255,255,255,.2);color:#fff}
.door__ic{width:32px;height:32px}
.door__label{font-size:1.22rem;font-weight:700;letter-spacing:-.01em;text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:.06em}
.door--explore .door__label{color:var(--navy-deep)}
.door__hint{font-size:.92rem;line-height:1.35;max-width:24ch}
.door--explore .door__hint{color:rgba(0,42,87,.82)}
.door--submit .door__hint{color:rgba(255,255,255,.9)}

/* peek strip */
.peek{position:relative;z-index:2;padding:1.5rem 1rem 2rem;text-align:center}
.peek__lead{color:rgba(255,255,255,.9);font-weight:500;margin-bottom:.9rem;font-size:.95rem;letter-spacing:.02em}
.peek__row{display:flex;gap:.85rem;justify-content:flex-start;overflow-x:auto;padding:.4rem .2rem 1rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.peek__row::-webkit-scrollbar{height:6px}
.peek__row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:99px}
@media(min-width:680px){.peek__row{justify-content:center;flex-wrap:nowrap}}
.peek__cover{flex:0 0 auto;display:block;width:104px;scroll-snap-align:center;border-radius:10px;overflow:hidden;box-shadow:var(--sh-card);transition:transform .2s var(--ease)}
.peek__cover .cover{border-radius:0}
.peek__cover:hover{transform:translateY(-5px) rotate(-1.5deg)}

/* ================================================================== COVERS */
.cover{position:relative;aspect-ratio:3/4.4;border-radius:12px;overflow:hidden;background:var(--paper)}
.cover img{width:100%;height:100%;object-fit:cover}
.cover--ph{display:flex;flex-direction:column;justify-content:flex-end;padding:.7rem;color:#fff;text-align:left}
.cover--ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.16))}
.cover--ph .cover__t{position:relative;z-index:1;font-weight:700;font-size:.82rem;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.cover--ph .cover__spine{position:absolute;top:0;left:9px;bottom:0;width:3px;background:rgba(255,255,255,.35)}
.cover__badge{position:absolute;top:8px;right:8px;z-index:2;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.85);color:var(--gold-deep);display:grid;place-items:center}

/* ==================================================================== GRID */
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:860px){.grid{grid-template-columns:repeat(4,1fr);gap:1.4rem}}
.surprise{margin-top:1rem}
.sample-note{margin-top:.9rem;font-size:.85rem;color:#7a5a12;background:#fff7ec;border:1px solid #f3dcae;border-radius:12px;padding:.6rem .85rem;max-width:60ch}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--sh-card);border:1px solid var(--line);
  cursor:pointer;text-align:left;padding:0;width:100%;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.card__cover{margin:0}
.card .cover{border-radius:0;aspect-ratio:3/4.2}
.card__body{padding:.8rem .85rem 1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card__age{align-self:flex-start;font-size:.72rem;font-weight:600;color:var(--blue-strong);background:rgba(46,134,199,.12);padding:.2em .7em;border-radius:var(--r-pill)}
.card__title{font-size:1rem;font-weight:700;line-height:1.2;color:var(--ink)}
.card__blurb{font-size:.85rem;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__fav{
  position:absolute;top:8px;right:8px;z-index:3;width:36px;height:36px;border-radius:50%;
  border:none;background:rgba(255,255,255,.9);color:var(--candy);display:grid;place-items:center;
  box-shadow:var(--sh-soft);transition:transform .16s var(--pop),background .16s;
}
.card__fav:hover{transform:scale(1.1)}
.card__fav[aria-pressed="true"]{background:var(--candy);color:#fff}
.card__fav.is-pop{animation:pop .4s var(--pop)}
.card__link{color:inherit;text-decoration:none}
.card__link::after{content:"";position:absolute;inset:0;z-index:1}

/* ================================================================== DETAIL */
.btn--back{margin-bottom:1.4rem}
.detail{display:grid;gap:1.6rem}
@media(min-width:720px){.detail{grid-template-columns:minmax(220px,300px) 1fr;gap:2.4rem;align-items:start}}
.detail__cover{position:relative;max-width:300px;margin-inline:auto;width:100%}
.detail__cover .cover{box-shadow:var(--sh-lift);border-radius:14px;transform:perspective(900px) rotateY(-6deg);transition:transform .4s var(--ease)}
.detail__cover .cover:hover{transform:perspective(900px) rotateY(0)}
.detail__info{display:flex;flex-direction:column;gap:.9rem}
.detail__age{align-self:flex-start;font-size:.8rem;font-weight:600;color:var(--blue-strong);background:rgba(46,134,199,.12);padding:.32em .9em;border-radius:var(--r-pill)}
.detail__title{margin:0}
.detail__blurb{color:var(--ink);font-size:1.05rem;line-height:1.6;max-width:60ch}
/* author shown as a simple name pill below the blurb */
.detail__byline{align-self:flex-start;display:inline-flex;align-items:center;
  font-size:.86rem;font-weight:600;color:var(--gold-deep);
  background:rgba(245,166,35,.14);padding:.42em 1em;border-radius:var(--r-pill)}
[data-theme="dark"] .detail__byline{color:var(--gold-soft);background:rgba(255,200,69,.16)}
.detail__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.4rem}
.detail__note{font-size:.82rem;color:var(--muted)}

/* ==================================================================== FORM */
.form{display:flex;flex-direction:column;gap:1.15rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field-row{display:grid;gap:1.15rem}
@media(min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.field>label,.check__label{font-weight:600;font-size:.95rem;color:var(--ink)}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);width:100%;
  padding:.8em .95em;border-radius:12px;background:var(--paper);
  border:1.5px solid var(--line-cool);
  transition:border-color .16s,box-shadow .16s;
}
.field input::placeholder,.field textarea::placeholder{color:#9aa4b2}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
.field textarea{resize:vertical;min-height:120px;line-height:1.55}
.field__hint{font-size:.82rem;color:var(--muted)}
.field__count{font-size:.8rem;color:var(--muted);text-align:right}
.field__count.is-max{color:var(--coral-deep);font-weight:600}
.field__err{font-size:.83rem;color:var(--coral-deep);font-weight:500;min-height:0}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--coral-deep);box-shadow:0 0 0 3px rgba(232,84,63,.16)}

/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* file drop */
.drop{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;
  padding:1.6rem 1rem;border-radius:14px;cursor:pointer;
  border:2px dashed var(--blue);background:rgba(46,134,199,.06);color:var(--navy);
  transition:background .16s,border-color .16s;
}
.drop:hover,.drop.is-drag{background:rgba(46,134,199,.13)}
.drop__ic{width:30px;height:30px;color:var(--blue-strong)}
.drop__text{font-size:.95rem}
.drop__meta{font-size:.8rem;color:var(--muted)}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.drop__file{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.5rem;padding:.7em .9em;border-radius:12px;background:rgba(55,201,166,.14);border:1px solid rgba(55,201,166,.5)}
.drop__name{font-size:.9rem;font-weight:500;word-break:break-all}
.drop__remove{width:30px;height:30px;flex:none;border:none;background:rgba(0,0,0,.06);border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.drop__remove:hover{background:rgba(232,84,63,.16);color:var(--coral-deep)}

/* consent check */
.field--consent{margin-top:.2rem}
.check{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;cursor:pointer}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__box{width:24px;height:24px;border-radius:7px;border:2px solid var(--blue);background:#fff;display:grid;place-items:center;color:#fff;transition:background .14s,border-color .14s;margin-top:1px}
.check__box .ic{width:16px;height:16px;opacity:0;transform:scale(.6);transition:.14s var(--pop)}
.check input:checked+.check__box{background:var(--blue-strong);border-color:var(--blue-strong)}
.check input:checked+.check__box .ic{opacity:1;transform:scale(1)}
.check input:focus-visible+.check__box{box-shadow:var(--ring)}
.check__label{font-weight:400;font-size:.9rem;color:var(--muted);line-height:1.5}

.form__submit{align-self:flex-start;margin-top:.4rem}
.form__note{font-size:.92rem;font-weight:500;min-height:1.2em}
.form__note.is-error{color:var(--coral-deep)}
.form__note.is-ok{color:#0f8a5f}

/* ================================================================= THANKS */
.view--thanks{min-height:calc(100svh - 52px);display:grid;place-items:center;text-align:center}
.thanks{position:relative;z-index:2;max-width:520px;padding:2rem 1.4rem}
.thanks__badge{width:84px;height:84px;margin:0 auto 1.2rem;border-radius:50%;background:linear-gradient(150deg,var(--mint),#1FA588);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-glow);animation:pop .5s var(--pop) both}
.thanks__badge .ic{width:44px;height:44px}
.thanks__title{color:var(--navy);font-size:clamp(2rem,7vw,2.8rem)}
.thanks__body{margin-top:.9rem;color:var(--ink);font-size:1.06rem;line-height:1.6}
.thanks__actions{margin-top:1.6rem;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ================================================================== FOOTER */
.footer{background:linear-gradient(184deg,#3B82F6,#1E40AF);color:#fff;margin-top:auto}
.view--home + .footer,.view--thanks + .footer{margin-top:0}
.footer__inner{max-width:var(--wrap);margin-inline:auto;min-height:88px;
  padding:.55rem clamp(1rem,4vw,1.75rem);
  display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;gap:.4rem 1.25rem}
.footer__logo{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.footer__legal{font-size:.82rem;color:rgba(255,255,255,.82);margin:0}
.footer__legal a{color:#fff}
.footer__social{display:flex;gap:.5rem}
.footer__social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.15);color:#fff;transition:background .16s,transform .16s var(--ease)}
.footer__social a:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}

/* ================================================================== DRAWER */
.drawer{position:fixed;inset:0;z-index:60}
.drawer__scrim{position:absolute;inset:0;z-index:1;background:rgba(6,28,54,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fade .25s ease both}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;z-index:2;width:min(380px,90vw);
  background:var(--cream);box-shadow:-20px 0 50px -20px rgba(3,42,86,.5);
  display:flex;flex-direction:column;animation:slideIn .3s var(--ease) both;
}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line)}
.drawer__title{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;color:var(--navy)}
.drawer__title .ic{color:var(--candy)}
.drawer__close{width:40px;height:40px;border-radius:50%;border:none;background:rgba(0,0,0,.05);display:grid;place-items:center;color:var(--ink)}
.drawer__close:hover{background:rgba(0,0,0,.1)}
.drawer__body{flex:1;overflow-y:auto;padding:1rem 1.2rem}
.drawer__foot{display:flex;gap:.6rem;padding:1rem 1.2rem;border-top:1px solid var(--line)}
.wish{display:flex;gap:.8rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line)}
.wish__cover{width:48px;flex:none}
.wish__cover .cover{border-radius:7px;aspect-ratio:3/4.2}
.wish__info{flex:1;min-width:0}
.wish__title{font-weight:600;font-size:.92rem;line-height:1.25}
.wish__age{font-size:.76rem;color:var(--muted)}
.wish__remove{width:32px;height:32px;flex:none;border:none;background:transparent;color:var(--muted);border-radius:50%;display:grid;place-items:center}
.wish__remove:hover{background:rgba(232,84,63,.14);color:var(--coral-deep)}
.wish-clear{color:var(--muted);--bd:var(--line)}
.wish-empty{text-align:center;color:var(--muted);padding:2.5rem 1rem}
.wish-empty__balloon{width:64px;margin:0 auto 1rem;color:var(--blue);animation:float 8s ease-in-out infinite}

/* ================================================================= CONSENT */
.consent{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:55;
  width:min(640px,calc(100vw - 1.5rem));
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;
  padding:.9rem 1.1rem;border-radius:16px;
  background:#fff;box-shadow:var(--sh-lift);border:1px solid var(--line-cool);
  animation:consentIn .4s var(--ease) both;
}
.consent__text{font-size:.9rem;color:var(--ink);flex:1;min-width:220px}
.consent__btns{display:flex;gap:.5rem}

/* ============================================================== animations */
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-22px) rotate(3deg)}}
@keyframes drift{from{transform:translateX(-120px)}to{transform:translateX(110vw)}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@keyframes sunPulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.06);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.82)}100%{transform:scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes consentIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

/* staggered hero entrance */
.view--home.is-active .hero__kicker{animation:viewIn .6s var(--ease) both .05s}
.view--home.is-active .hero__title{animation:viewIn .6s var(--ease) both .13s}
.view--home.is-active .hero__sub{animation:viewIn .6s var(--ease) both .22s}
.view--home.is-active .doors{animation:viewIn .6s var(--ease) both .32s}
.view--home.is-active .peek{animation:viewIn .7s var(--ease) both .45s}

/* ===================================================== theme toggle button */
.dnt{border:none;background:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;line-height:0}
.dnt__track{position:relative;width:62px;height:30px;border-radius:999px;overflow:hidden;background:linear-gradient(#84C3F1,#4C9BE0);box-shadow:inset 0 2px 4px rgba(4,30,66,.3);transition:background .5s var(--ease)}
[data-theme="dark"] .dnt__track{background:linear-gradient(#22335F,#0D1930)}
.dnt__thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE888,#FFB01F);box-shadow:0 1px 4px rgba(180,110,0,.5),0 0 9px rgba(255,190,60,.85);transition:transform .55s var(--ease),background .4s,box-shadow .4s}
[data-theme="dark"] .dnt__thumb{transform:translateX(32px);background:radial-gradient(circle at 60% 38%,#F1F5FF,#C6D2EC);box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 9px rgba(190,205,255,.7)}
.dnt__thumb::after{content:"";position:absolute;top:1px;right:1px;width:17px;height:17px;border-radius:50%;background:#12213F;opacity:0;transform:scale(.3);transition:opacity .4s,transform .4s}
[data-theme="dark"] .dnt__thumb::after{opacity:1;transform:scale(1)}
.dnt__cloud{position:absolute;background:#fff;border-radius:999px;transition:opacity .4s,transform .5s}
.dnt__cloud--1{width:16px;height:7px;bottom:6px;left:30px}
.dnt__cloud--2{width:11px;height:5px;top:7px;left:38px;opacity:.85}
[data-theme="dark"] .dnt__cloud{opacity:0;transform:translateY(8px)}
.dnt__star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;transition:opacity .5s}
.dnt__star--1{top:8px;left:11px}
.dnt__star--2{top:16px;left:19px}
.dnt__star--3{top:10px;left:25px}
[data-theme="dark"] .dnt__star{opacity:.9}
.dnt:focus-visible .dnt__track{box-shadow:inset 0 2px 4px rgba(4,30,66,.3),0 0 0 3px rgba(21,94,158,.45)}
.dnt:hover .dnt__thumb{filter:brightness(1.05)}

/* ======================================================= celestial keyframes */
@keyframes sunSpin{to{transform:rotate(360deg)}}
@keyframes glowPulse{0%,100%{filter:drop-shadow(0 0 18px rgba(255,196,80,.5))}50%{filter:drop-shadow(0 0 32px rgba(255,212,110,.9))}}
@keyframes moonBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}

/* smooth day <-> night (the sky + celestial run their own transitions) */
body{transition:background-color .55s var(--ease),color .55s var(--ease)}
.topbar,.drawer__panel,.consent,.detail__author{transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}

/* ================================================================ DARK MODE */
:root[data-theme="dark"]{
  --cream:#0E1A2E; --paper:#152238; --paper-2:#1B2A44;
  --ink:#E9F0FB; --muted:#9DB0CC; --line:#26364F; --line-cool:#2C3E5A;
}
[data-theme="dark"] .cloud{opacity:.16}
[data-theme="dark"] .topbar{background:rgba(12,22,40,.82);border-bottom-color:rgba(40,54,79,.85)}
[data-theme="dark"] .brand__logo{filter:brightness(0) invert(1);opacity:.9}
[data-theme="dark"] .topnav__back{color:#8CCBFF}
[data-theme="dark"] .topnav__cta{color:#8CCBFF;background:rgba(124,196,255,.14)}
[data-theme="dark"] .topnav__cta:hover{background:rgba(124,196,255,.22)}
[data-theme="dark"] .topnav__cta--primary{color:var(--navy-deep);background:var(--gold)}
[data-theme="dark"] .topnav__cta--primary:hover{color:#fff;background:var(--gold-deep)}
[data-theme="dark"] .ghead{background-image:linear-gradient(180deg,#9BD0FF,#4A97E8)}
[data-theme="dark"] .btn--ghost{--fg:#9BD0FF;--bd:#3E8AD8}
[data-theme="dark"] .btn--ghost:hover{--bg:rgba(124,196,255,.16)}
[data-theme="dark"] .card{box-shadow:0 16px 34px -16px rgba(0,0,0,.6)}
[data-theme="dark"] .card__age,[data-theme="dark"] .detail__age{color:#9BD0FF;background:rgba(124,196,255,.14)}
[data-theme="dark"] .detail__author-name{color:#DCE8F8}
[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background:#111D33}
[data-theme="dark"] .drop{color:#DCE8F8;background:rgba(124,196,255,.07);border-color:#3E8AD8}
[data-theme="dark"] .drawer__title{color:#DCE8F8}
[data-theme="dark"] .drawer__close{background:rgba(255,255,255,.08)}
[data-theme="dark"] .drawer__close:hover{background:rgba(255,255,255,.15)}
[data-theme="dark"] .consent{background:#152238;border-color:#2C3E5A}
[data-theme="dark"] .thanks__title{color:#DCE8F8}

/* ===================================================================
   ASSET SCENE, layered day/night landscape (user assets, natural motion)
   =================================================================== */
.range,.shooters,.cute-stars,.balloons{position:absolute;inset:0;pointer-events:none}

/* celestial (cute sun / moon), the rise/set transform lives in the day-night section */
.celestial{transition:transform 1.15s cubic-bezier(.34,.66,.3,1),opacity 1.15s var(--ease)}
.celestial__body{width:100%;height:100%;display:block;object-fit:contain}
.celestial--sun .celestial__body{animation:celPulse 5s ease-in-out infinite}
.celestial--moon .celestial__body{filter:drop-shadow(0 0 24px rgba(205,222,255,.7));animation:celBob 8s ease-in-out infinite}

/* landscape (scenery-land): full width, re-lit for night */
.range__img{position:absolute;left:0;bottom:0;width:100%;height:auto;transition:filter .9s var(--ease)}
[data-theme="dark"] .range__img{filter:brightness(.5) saturate(.62) hue-rotate(4deg) contrast(1.04)}

/* clouds, extracted pieces, spread; day fuller, night sparse + dim */
.cloud{position:absolute;height:auto;transition:opacity .9s var(--ease);will-change:transform}
.cloud--back{opacity:.85}
.cloud--b1{top:22%;left:5%;width:clamp(130px,20vw,300px);animation:driftRL 118s ease-in-out infinite}
.cloud--b2{top:33%;left:60%;width:clamp(150px,24vw,360px);animation:driftLR 140s ease-in-out infinite}
.cloud--front{opacity:.97}
.cloud--f1{top:11%;left:-2%;width:clamp(150px,25vw,360px);animation:driftLR 86s ease-in-out infinite}
.cloud--f2{top:5%;left:46%;width:clamp(130px,21vw,300px);animation:driftRL 72s ease-in-out infinite}
.cloud--f3{top:5%;left:76%;width:clamp(160px,27vw,380px);animation:driftLR 104s ease-in-out infinite}
[data-theme="dark"] .cloud{opacity:0}
[data-theme="dark"] .cloud--b1{opacity:.13}
[data-theme="dark"] .cloud--b2{opacity:.11}

/* trees (foreground row), wind sway */
/* trees are static (flat art); wind/leaf motion isn't possible on a flattened image */
.trees{position:absolute;left:0;bottom:-90px;width:100%;height:auto}
[data-theme="dark"] .trees{filter:brightness(.42) saturate(.5) hue-rotate(14deg)}

/* day: a bird flies across the sky (Lottie); two more perch in the trees (both modes) */
.lottie-flyer,.lottie-perch,.lottie-feed{position:absolute;pointer-events:none}
/* flyer sits high + small so the flock reads as distant */
.lottie-flyer{top:3%;left:15%;width:clamp(150px,34vw,380px);aspect-ratio:1920/300}
/* single bird perched in the tree (original spot); feeding bird pecks the ground by the flowers (~62%) */
.lottie-perch{bottom:16%;left:15%;width:clamp(58px,9vw,104px);aspect-ratio:1022/624}
.lottie-feed{bottom:2.5%;left:58%;width:clamp(44px,7vw,80px);aspect-ratio:1/1}
/* all three day birds are hidden at night */
[data-theme="dark"] .lottie-flyer,[data-theme="dark"] .lottie-perch,[data-theme="dark"] .lottie-feed{display:none}
.lottie-flyer canvas,.lottie-perch canvas,.lottie-feed canvas{display:block;width:100%;height:100%}
/* night flapping bird swoops */
.nightbird{position:absolute;top:0;left:0;width:clamp(40px,6.5vw,74px);height:auto;overflow:visible;display:none}
.nb-part{fill:#0a1a38}
.nb-wing{fill:#132b4f;transform-box:fill-box}
.nb-wing--l{transform-origin:100% 55%;animation:flapL .3s ease-in-out infinite}
.nb-wing--r{transform-origin:0% 55%;animation:flapR .3s ease-in-out infinite}
[data-theme="dark"] .nightbird{display:block;animation:swoop 23s linear infinite}

/* shooting star, Lottie streak in the upper sky, night only (JS-triggered) */
.shooters{bottom:auto;height:64%;overflow:hidden}
#shootingStar{opacity:0;transition:opacity .6s var(--ease)}
[data-theme="dark"] #shootingStar{opacity:1}
#shootingStar canvas{display:block}

/* cute gold stars (hand-drawn), night only */
.cute-stars{opacity:0;transition:opacity .9s var(--ease)}
[data-theme="dark"] .cute-stars{opacity:1}
.cstar{position:absolute;display:block;filter:drop-shadow(0 0 6px rgba(255,205,70,.7));animation:twinkle var(--d,4s) ease-in-out infinite}

@keyframes celPulse{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 20px rgba(255,206,90,.55))}50%{transform:translateY(-6px);filter:drop-shadow(0 0 34px rgba(255,220,120,.9))}}
@keyframes celBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
/* clouds drift slowly across the sky, two directions for a living sky */
@keyframes driftLR{0%{transform:translateX(-8vw)}50%{transform:translateX(9vw)}100%{transform:translateX(-8vw)}}
@keyframes driftRL{0%{transform:translateX(8vw)}50%{transform:translateX(-9vw)}100%{transform:translateX(8vw)}}
@keyframes sway{0%,100%{transform:rotate(-1deg) skewX(.7deg)}50%{transform:rotate(1deg) skewX(-.7deg)}}
@keyframes flyAcross{0%{transform:translateX(112vw) translateY(0) scaleX(-1)}50%{transform:translateX(40vw) translateY(-4vh) scaleX(-1)}100%{transform:translateX(-30vw) translateY(2vh) scaleX(-1)}}
@keyframes flapL{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-46deg)}}
@keyframes flapR{0%,100%{transform:rotate(8deg)}50%{transform:rotate(46deg)}}
@keyframes swoop{0%{transform:translate(112vw,7vh) scaleX(-1)}22%{transform:translate(80vw,-1vh) scaleX(-1)}45%{transform:translate(52vw,9vh) scaleX(-1)}70%{transform:translate(24vw,-1vh) scaleX(-1)}100%{transform:translate(-14vw,5vh) scaleX(-1)}}
@keyframes shoot{0%{opacity:0;transform:translate(60px,-42px) rotate(-28deg)}5%{opacity:1}15%{opacity:1}26%{opacity:0;transform:translate(-280px,150px) rotate(-28deg)}100%{opacity:0;transform:translate(-280px,150px) rotate(-28deg)}}

/* ============================================================ reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .balloon,.cloud,.sf-star,.shooting,.celestial,.celestial__body{animation:none}
  .view{animation:none}
}

/* Mobile (≤768px): only the sun, moon and clouds move, everything else is static and
   no Lottie loads (see app.js), so the page paints fast and stays calm. */
@media (max-width:768px){
  /* Lottie (birds, shooting star) stays off on mobile — that was the only real load
     cost. CSS animations are free, so clouds, sun/moon, stars and balloons all breathe. */
  .nightbird{display:none}
  /* header stacks: logo centered on top, CTAs + switcher on the row beneath */
  .topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .6rem;padding:.5rem 1rem}
  .brand{order:1;flex-basis:100%;justify-content:center}
  .topnav{order:2;justify-content:center}
  .topnav__back{position:absolute;left:.75rem;top:.6rem}
  .topnav__cta{padding:.45em .8em;font-size:.85rem}
  /* footer: logo + socials on one row, legal beneath, stays ~85px */
  .footer__inner{justify-content:center;text-align:center;gap:.4rem 1rem}
  .footer__logo{order:1}
  .footer__social{order:2}
  .footer__legal{order:3;flex-basis:100%}
}