:root{
  --night:#16234b;
  --night-deep:#0e1836;
  --sky:#aec9e6;
  --sky-pale:#e8f0f9;
  --meadow:#9fae4e;
  --gold:#e3b64f;
  --gold-soft:#f4d98b;
  --cream:#fdfaf2;
  --ink:#2c3145;
  --ink-soft:#5b6178;
  --star:#fff3d0;
  --radius:18px;
  --shadow:0 18px 45px rgba(22,35,75,.16);
  --display:'Cormorant Garamond', Georgia, serif;
  --body:'Nunito Sans', 'Segoe UI', sans-serif;
  --label:'Quicksand', var(--body);
  --cycle:40s; /* one full day + night */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.7;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;color:var(--ink)}
.eyebrow{font-family:var(--label);font-weight:700;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--meadow)}
.section{padding:96px 24px}
.wrap{max-width:1120px;margin:0 auto}
.section-head{text-align:center;max-width:640px;margin:0 auto 56px}
.section-head h2{font-size:clamp(2rem,4.4vw,3rem);margin:.4em 0 .35em}
.section-head p{color:var(--ink-soft)}
.btn{display:inline-block;font-family:var(--label);font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:15px 30px;border-radius:999px;transition:transform .25s ease, box-shadow .25s ease, background .25s ease;cursor:pointer;border:none}
.btn-gold{background:var(--gold);color:#3c3212;box-shadow:0 10px 24px rgba(227,182,79,.4)}
.btn-gold:hover{transform:translateY(-2px);background:#eec25c}
.btn-ghost{background:rgba(253,250,242,.25);color:inherit;border:2px solid currentColor}
.btn-ghost:hover{transform:translateY(-2px)}
.btn:focus-visible, a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease, transform .9s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(253,250,242,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(22,35,75,.08)}
.nav{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:20px}
.brand{text-decoration:none;line-height:1.1}
.brand .name{font-family:var(--display);font-weight:700;font-size:1.55rem;letter-spacing:.02em;color:var(--night)}
.brand .tag{font-family:var(--label);font-size:.62rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--meadow)}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{font-family:var(--label);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 2px;border-bottom:2px solid transparent;white-space:nowrap;transition:border-color .2s, color .2s}
.nav-links a:hover{color:var(--meadow);border-color:var(--gold)}
.nav-cta{background:var(--gold);color:#3c3212 !important;padding:10px 20px !important;border-radius:999px;border-bottom:none !important}
.nav-cta:hover{background:#eec25c;color:#3c3212 !important}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:2.6px;background:var(--night);margin:5.5px 0;border-radius:2px;transition:transform .3s ease, opacity .25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(8.1px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav-toggle.open span:nth-child(3){transform:translateY(-8.1px) rotate(-45deg)}
@media (max-width:1280px){
  .nav-links{gap:16px}
  .nav-links a{font-size:.74rem;letter-spacing:.08em}
  .nav-cta{padding:9px 16px !important}
  .brand .name{font-size:1.35rem}
}
/* tablets & phones: fast, clean slide-down menu */
@media (max-width:1080px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;inset:64px 0 auto 0;background:var(--cream);flex-direction:column;gap:0;padding:12px 0 20px;border-bottom:1px solid rgba(22,35,75,.1);transform:translateY(-130%);transition:transform .3s ease;box-shadow:0 20px 40px rgba(22,35,75,.12);z-index:49}
  .nav-links.open{transform:translateY(0)}
  .nav-links li{width:100%;text-align:center}
  .nav-links a{display:inline-block;padding:12px 0;font-size:.84rem;letter-spacing:.12em}
  .nav-cta{margin-top:8px;padding:10px 22px !important}
}

/* =============================================================
   HERO — living sky: a full day that slowly turns to night
   ============================================================= */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:7;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;padding:100px 24px 210px}

/* sky layers */
.sky{position:absolute;inset:0;z-index:0}
.sky-day{background:linear-gradient(180deg,#bcd6ef 0%, var(--sky) 34%, #d8dfb4 74%, #e9d98e 100%)}
.sky-night{background:linear-gradient(180deg,#0d1730 0%, #16234b 45%, #23345f 78%, #3c4a6b 100%);opacity:0;animation:nightfall var(--cycle) ease-in-out infinite}
@keyframes nightfall{
  0%,38%{opacity:0}
  50%,86%{opacity:.96}
  97%,100%{opacity:0}
}
/* dawn/dusk glow band */
.sky-glow{background:linear-gradient(180deg,transparent 40%, rgba(255,166,97,.55) 78%, rgba(255,203,120,.65) 100%);opacity:0;animation:duskglow var(--cycle) ease-in-out infinite;z-index:1}
@keyframes duskglow{
  0%,34%{opacity:0}
  42%{opacity:1}   /* sunset */
  50%,84%{opacity:0}
  92%{opacity:.9}  /* sunrise */
  100%{opacity:0}
}

/* sun with rotating rays, moon with craters */
.sun,.moon-hero{position:absolute;z-index:2;pointer-events:none}
.sun{top:0;left:0;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle at 45% 42%,
    #fffdf6 0%, #fff7dc 30%, #ffedb2 52%, #ffdd85 70%, rgba(255,214,120,.7) 84%, rgba(255,210,120,0) 100%);
  box-shadow:
    0 0 26px 10px rgba(255,248,224,.85),
    0 0 80px 34px rgba(255,224,150,.5),
    0 0 170px 85px rgba(255,214,140,.22);
  animation:sunarc var(--cycle) linear infinite}
.sun::before{content:"";position:absolute;inset:-42px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,236,175,.2) 0deg 7deg, transparent 7deg 26deg);
  -webkit-mask:radial-gradient(circle, transparent 48%, #000 50%, transparent 86%);
          mask:radial-gradient(circle, transparent 48%, #000 50%, transparent 86%);
  animation:rays 30s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
@keyframes sunarc{
  0%  {transform:translate(-35vw,55vh) scale(.9);opacity:0}
  4%  {opacity:1}
  10% {transform:translate(14vw,16vh)}
  25% {transform:translate(46vw,4vh)}
  40% {transform:translate(82vw,22vh)}
  45% {opacity:1}
  47% {transform:translate(115vw,60vh) scale(.9);opacity:0}
  47.01%,100%{transform:translate(-35vw,60vh);opacity:0}
}
.moon-hero{top:0;left:0;width:72px;height:72px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 32%, rgba(214,186,120,.5) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 58%, rgba(214,186,120,.45) 0 7%, transparent 8%),
    radial-gradient(circle at 48% 78%, rgba(214,186,120,.4) 0 5%, transparent 6%),
    radial-gradient(circle at 35% 35%, #fff8dd, #f0d98a 70%);
  box-shadow:0 0 50px 18px rgba(244,217,139,.4);
  opacity:0;animation:moonarc var(--cycle) linear infinite}
@keyframes moonarc{
  0%,46%{transform:translate(-35vw,55vh);opacity:0}
  52% {transform:translate(12vw,18vh);opacity:1}
  66% {transform:translate(44vw,5vh);opacity:1}
  82% {transform:translate(78vw,18vh);opacity:1}
  92% {transform:translate(115vw,50vh);opacity:0}
  100%{transform:translate(115vw,55vh);opacity:0}
}

/* stars appear only at night */
.hero-stars{position:absolute;inset:0;z-index:2;opacity:0;animation:nightfall var(--cycle) ease-in-out infinite;pointer-events:none}
.star{position:absolute;border-radius:50%;background:var(--star);animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

/* sparkling trail up the left edge at night — like the book's spine */
.spine-sparkles{position:absolute;left:0;top:0;bottom:0;width:130px;z-index:3;opacity:0;animation:nightfall var(--cycle) ease-in-out infinite;pointer-events:none}
.sparkle-dot{position:absolute;color:#fff6df;filter:drop-shadow(0 0 6px rgba(255,240,200,.95));animation:twinkle 3.4s ease-in-out infinite;font-size:10px;line-height:1}

/* drifting clouds (dim with nightfall since night layer sits above) */
.cloud{position:absolute;z-index:1;pointer-events:none;animation:cloudDrift linear infinite}
.cloud svg{width:100%;height:auto;filter:blur(.5px) drop-shadow(0 8px 18px rgba(22,35,75,.1))}
@keyframes cloudDrift{0%{transform:translateX(-30vw)}100%{transform:translateX(130vw)}}
/* hero clouds fade to dim moonlit grey while the night overlay is up */
@keyframes cloudNight{
  0%,38%{opacity:.92;filter:none}
  50%,86%{opacity:.38;filter:brightness(.5) saturate(.55)}
  97%,100%{opacity:.92;filter:none}
}
@keyframes cloudBillow{0%{transform:scale(1,1)}100%{transform:scale(1.045,.97) translateY(-3px)}}

/* birds crossing the sky */
.bird-fly{position:absolute;z-index:2;pointer-events:none;opacity:.55;animation:flyAcross linear infinite}
.bird-fly svg{width:100%;height:auto;overflow:visible}
.bird-fly .bWing,.dawn-bird .bWing{transform-box:view-box;transform-origin:62px 40px;animation:birdFlap .5s ease-in-out infinite}
.bird-fly .bWingFar,.dawn-bird .bWingFar{transform-box:view-box;transform-origin:60px 42px;animation:birdFlapFar .5s ease-in-out infinite}
@keyframes birdFlap{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-34deg)}}
@keyframes birdFlapFar{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(26deg)}}
@keyframes flyAcross{0%{transform:translate(-10vw,0)}25%{transform:translate(21vw,-3vh)}50%{transform:translate(52vw,-2vh)}75%{transform:translate(83vw,-7vh)}100%{transform:translate(115vw,-6vh)}}

/* drifting petals / dandelion seeds by day */
.petal{position:absolute;z-index:2;color:#fff;opacity:.85;pointer-events:none;animation:petalFall linear infinite}
@keyframes petalFall{
  0%{transform:translate(0,-6vh) rotate(0deg)}
  25%{transform:translate(6vw,26vh) rotate(120deg)}
  50%{transform:translate(-2vw,55vh) rotate(230deg)}
  75%{transform:translate(7vw,82vh) rotate(320deg)}
  100%{transform:translate(2vw,110vh) rotate(420deg)}
}

/* shooting star during the night phase */
.shooting{position:absolute;z-index:3;top:14%;left:64%;width:130px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,243,208,0),#fff8dd 85%,#fff);
  transform:rotate(-32deg);opacity:0;animation:shoot var(--cycle) linear infinite;pointer-events:none}
.shooting.s2{top:26%;left:20%;animation-delay:6s}
@keyframes shoot{
  0%,58%{opacity:0;transform:rotate(-32deg) translateX(0)}
  59%{opacity:1}
  61.5%{opacity:0;transform:rotate(-32deg) translateX(-260px)}
  100%{opacity:0}
}

/* fireflies rising from the meadow at night */
.firefly{position:absolute;bottom:12%;z-index:5;width:5px;height:5px;border-radius:50%;
  background:#ffe9a0;box-shadow:0 0 10px 3px rgba(255,233,160,.9);
  opacity:0;animation:fireflyRise var(--cycle) ease-in-out infinite;pointer-events:none}
@keyframes fireflyRise{
  0%,48%{opacity:0;transform:translateY(0)}
  54%{opacity:.9}
  62%{opacity:.2;transform:translateY(-60px) translateX(14px)}
  70%{opacity:.9;transform:translateY(-110px) translateX(-8px)}
  80%{opacity:.15;transform:translateY(-160px) translateX(10px)}
  88%{opacity:0;transform:translateY(-200px)}
  100%{opacity:0}
}

/* meadow silhouette + swaying grass & flowers */
.hero::after{content:"";position:absolute;inset:auto 0 -2px 0;height:110px;background:var(--cream);clip-path:ellipse(75% 100% at 50% 100%);z-index:6}
.meadow-hills{position:absolute;left:0;right:0;bottom:0;height:180px;z-index:4;pointer-events:none;
  background:
   radial-gradient(120% 140% at 20% 160%, rgba(120,140,60,.5) 40%, transparent 60%),
   radial-gradient(130% 150% at 85% 170%, rgba(150,165,80,.45) 42%, transparent 62%);}
.grass{position:absolute;left:0;right:0;bottom:96px;height:64px;z-index:5;pointer-events:none}
.blade{position:absolute;bottom:0;transform-origin:bottom center;animation:sway ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
.blade svg{display:block;height:100%;width:auto}

/* hero text: colour follows the sky */
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);margin:.35em 0 .4em;color:var(--night);animation:textDayNight var(--cycle) ease-in-out infinite}
.hero .lede{font-size:1.12rem;color:#33405f;max-width:32em;animation:ledeDayNight var(--cycle) ease-in-out infinite}
.hero .eyebrow{color:#4a5e33;animation:eyeDayNight var(--cycle) ease-in-out infinite}
.hero .btn-ghost{color:#2c3145;animation:ledeDayNight var(--cycle) ease-in-out infinite}
@keyframes textDayNight{
  0%,38%{color:#16234b;text-shadow:0 0 0 rgba(8,14,34,0)}
  50%,86%{color:#fdf8ea;text-shadow:0 2px 14px rgba(8,14,34,.9), 0 0 34px rgba(8,14,34,.6)}
  97%,100%{color:#16234b;text-shadow:0 0 0 rgba(8,14,34,0)}
}
@keyframes ledeDayNight{
  0%,38%{color:#33405f;text-shadow:0 0 0 rgba(8,14,34,0)}
  50%,86%{color:#d5ddf2;text-shadow:0 1px 10px rgba(8,14,34,.9), 0 0 24px rgba(8,14,34,.55)}
  97%,100%{color:#33405f;text-shadow:0 0 0 rgba(8,14,34,0)}
}
@keyframes eyeDayNight{
  0%,38%{color:#4a5e33;text-shadow:0 0 0 rgba(8,14,34,0)}
  50%,86%{color:#f4d98b;text-shadow:0 1px 8px rgba(8,14,34,.85)}
  97%,100%{color:#4a5e33;text-shadow:0 0 0 rgba(8,14,34,0)}
}
/* JS-driven night guarantee: these win even if an optimizer plugin breaks the keyframes */
.hero h1,.hero .lede,.hero .eyebrow,.hero .btn-ghost{animation:none !important;transition:color 4.6s cubic-bezier(.4,0,.3,1), text-shadow 4.6s cubic-bezier(.4,0,.3,1), border-color 4.6s cubic-bezier(.4,0,.3,1)}
body.accudy-night .hero h1{color:#fdf8ea !important;text-shadow:0 2px 14px rgba(8,14,34,.9), 0 0 34px rgba(8,14,34,.6) !important}
body.accudy-night .hero .lede{color:#d5ddf2 !important;text-shadow:0 1px 10px rgba(8,14,34,.9), 0 0 24px rgba(8,14,34,.55) !important}
body.accudy-night .hero .eyebrow{color:#f4d98b !important;text-shadow:0 1px 8px rgba(8,14,34,.85) !important}
body.accudy-night .hero .btn-ghost{color:#d5ddf2 !important;border-color:rgba(213,221,242,.55) !important}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
/* coming soon badge + countdown */
.coming-badge{display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-family:var(--label);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(253,250,242,.85);color:#7a5a12;border:1.5px solid var(--gold);
  padding:9px 18px;border-radius:999px;box-shadow:0 8px 20px rgba(227,182,79,.25);backdrop-filter:blur(4px)}
.coming-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
.countdown{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.count-cell{min-width:74px;text-align:center;background:rgba(253,250,242,.82);border:1px solid rgba(227,182,79,.55);
  border-radius:14px;padding:12px 10px 10px;box-shadow:0 10px 24px rgba(22,35,75,.12);backdrop-filter:blur(4px)}
.count-cell b{display:block;font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--night)}
.count-cell span{font-family:var(--label);font-weight:700;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#8a7a45}

/* the floating book: flips from day cover to night cover as the sky changes */
.hero-book{position:relative;display:flex;justify-content:center;perspective:1100px}
.hero-book::before{content:"";position:absolute;inset:-8% -14%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,240,200,.35), transparent 70%);
  opacity:0;animation:nightfall var(--cycle) ease-in-out infinite;pointer-events:none}
.book-float{position:relative;z-index:1;width:min(400px,84%,48vh);
  transform-style:preserve-3d;
  transform:rotate(2.5deg);animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-14px)}}
.book-flip{position:relative;width:100%;transform-style:preserve-3d;--depth:30px;
  animation:bookFlip var(--cycle) ease-in-out infinite}
/* day: front cover · dusk: flip to the starry night cover · dawn: flip home again */
@keyframes bookFlip{
  0%,40%{transform:rotateY(0deg) scale(1)}
  44%{transform:rotateY(-90deg) scale(1.05)}
  48%,88%{transform:rotateY(-180deg) scale(1)}
  92%{transform:rotateY(-270deg) scale(1.05)}
  96%,100%{transform:rotateY(-360deg) scale(1)}
}
.book-flip .face{width:100%;display:block;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.book-flip .face.front{transform:translateZ(calc(var(--depth)/2))}
.book-flip .face.back{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  transform:rotateY(180deg) translateZ(calc(var(--depth)/2))}
/* solid paperback body — every side is centred in depth so the box is fully sealed */
.book-flip .side{position:absolute;pointer-events:none}
/* spine: curved navy cover board — flush top to bottom, no gaps */
.book-flip .spine{left:0;top:0;bottom:0;width:var(--depth);
  transform:translateX(-50%) rotateY(90deg);transform-origin:center;
  border-radius:4px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), transparent 6% 94%, rgba(0,0,0,.22)),
    linear-gradient(90deg,#141f42 0%,#26335f 22%,#3a4a80 50%,#26335f 78%,#141f42 100%)}
/* fore-edge: paper block sealed to both cover boards (navy board lines at each face) */
.book-flip .fore-edge{right:0;top:0;bottom:0;width:var(--depth);
  transform:translateX(50%) rotateY(90deg);transform-origin:center;
  background:
    linear-gradient(90deg,#1b2750 0 3px, transparent 3px calc(100% - 3px), #1b2750 calc(100% - 3px)),
    linear-gradient(180deg, rgba(120,100,60,.28), transparent 8% 92%, rgba(120,100,60,.28)),
    repeating-linear-gradient(90deg, rgba(185,168,130,.55) 0 1px, transparent 1px 2.5px),
    linear-gradient(90deg,#e9e0c6 0%,#f8f3e4 30%,#f8f3e4 70%,#e9e0c6 100%)}
.book-flip .edge-top{left:1px;right:1px;top:0;height:var(--depth);
  transform:translateY(-50%) rotateX(90deg);transform-origin:center;
  background:
    linear-gradient(0deg,#1b2750 0 3px, transparent 3px calc(100% - 3px), #1b2750 calc(100% - 3px)),
    linear-gradient(90deg, rgba(120,100,60,.3), transparent 6% 94%, rgba(120,100,60,.3)),
    repeating-linear-gradient(0deg, rgba(185,168,130,.5) 0 1px, transparent 1px 2.5px),
    linear-gradient(0deg,#ece3ca,#f8f3e4)}
.book-flip .edge-bottom{left:1px;right:1px;bottom:0;height:var(--depth);
  transform:translateY(50%) rotateX(90deg);transform-origin:center;
  background:
    linear-gradient(0deg,#1b2750 0 3px, transparent 3px calc(100% - 3px), #1b2750 calc(100% - 3px)),
    linear-gradient(90deg, rgba(110,92,55,.35), transparent 6% 94%, rgba(110,92,55,.35)),
    repeating-linear-gradient(0deg, rgba(175,158,120,.5) 0 1px, transparent 1px 2.5px),
    linear-gradient(0deg,#f2ebd4,#e2d8bc)}
/* ---- the magic of the turn: soft glow and a storm of white butterflies ---- */
.flip-flash{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,250,230,.9), rgba(255,240,200,.35) 45%, transparent 70%);
  opacity:0;z-index:2;pointer-events:none;animation:flipFlash var(--cycle) ease-in-out infinite;filter:blur(6px)}
@keyframes flipFlash{
  0%,39%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  43%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  48%,87%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}
  91%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  96%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}
}
/* butterflies burst from the book while it turns */
.flip-bfly{position:absolute;left:50%;top:50%;z-index:3;opacity:0;pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(255,246,220,.95)) drop-shadow(0 0 16px rgba(210,225,255,.5));
  animation:bflyBurst var(--cycle) ease-in-out infinite}
@keyframes bflyBurst{
  0%,39.5%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0deg)}
  41.5%{opacity:1}
  47%{opacity:1;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1) rotate(var(--rot))}
  50%{opacity:0;transform:translate(calc(-50% + var(--tx)*1.35),calc(-50% + var(--ty)*1.35 - 60px)) scale(.85) rotate(var(--rot))}
  50.5%,87.5%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0deg)}
  89.5%{opacity:1}
  95%{opacity:1;transform:translate(calc(-50% + var(--tx2)),calc(-50% + var(--ty2))) scale(1) rotate(calc(var(--rot)*-1))}
  98%,100%{opacity:0;transform:translate(calc(-50% + var(--tx2)*1.35),calc(-50% + var(--ty2)*1.35 - 60px)) scale(.85) rotate(calc(var(--rot)*-1))}
}
.flip-bfly svg{width:100%;height:auto;overflow:visible}
.flip-bfly .wingL{transform-box:view-box;transform-origin:30px 24px;animation:flutterL .5s ease-in-out infinite}
.flip-bfly .wingR{transform-box:view-box;transform-origin:30px 24px;animation:flutterR .5s ease-in-out infinite}
@keyframes flutterL{0%,100%{transform:rotateY(0) scaleX(1)}50%{transform:scaleX(.35)}}
@keyframes flutterR{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.35)}}
/* soft elliptical ground shadow that breathes with the float */
.hero-book .ground-shadow{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);width:64%;height:36px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(22,35,75,.4), rgba(22,35,75,0) 72%);
  filter:blur(5px);z-index:0;animation:groundShadow 7s ease-in-out infinite;pointer-events:none}
@keyframes groundShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.85}50%{transform:translateX(-50%) scale(.86);opacity:.55}}
.book-sparkle{position:absolute;z-index:2;color:var(--gold);font-size:15px;line-height:1;animation:twinkle 3s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 0 5px rgba(244,217,139,.9))}
.day-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:7;white-space:nowrap;font-family:var(--label);font-weight:600;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(44,49,69,.5)}

/* =============================================================
   day sections with gentle ambient sky life
   ============================================================= */
.ambient{position:relative;overflow:hidden}
.ambient > .wrap{position:relative;z-index:2}
.soft-cloud{position:absolute;z-index:0;pointer-events:none;animation:cloudDrift linear infinite}
.soft-cloud svg{width:100%;height:auto;filter:blur(.7px) sepia(.25) saturate(.75) brightness(1.03);opacity:.6}
.float-fly{position:absolute;z-index:0;color:#c9d3ea;pointer-events:none;animation:bob 9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(10px,-16px) rotate(6deg)}}

/* ---------- book ---------- */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
/* ---- the enchanted bookshelf: hover (or tap) and the two covers fan apart ---- */
.covers{position:relative;display:flex;justify-content:center;min-height:460px;perspective:1300px;cursor:pointer}
.covers::before{content:"";position:absolute;left:50%;top:50%;width:88%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);border-radius:50%;
  background:radial-gradient(closest-side, rgba(244,217,139,.5), rgba(244,217,139,.16) 55%, transparent 75%);
  filter:blur(8px);opacity:0;transition:opacity .9s ease, transform .9s cubic-bezier(.3,1.2,.5,1);pointer-events:none;z-index:0}
.covers img{width:60%;filter:drop-shadow(0 12px 16px rgba(22,35,75,.28));
  transition:transform .95s cubic-bezier(.3,1.35,.45,1), filter .95s ease;will-change:transform}
.covers .front{position:relative;z-index:2;transform:rotate(-3deg)}
.covers .back{position:absolute;right:0;top:8%;z-index:1;transform:rotate(5deg) scale(.98)}
.covers:hover::before,.covers.fanned::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* on hover the covers glide fully apart, every area of both visible */
.covers:hover .front,.covers.fanned .front{
  transform:translateX(-44%) translateY(-10px) rotate(-5deg) rotateY(10deg) scale(.85);
  filter:drop-shadow(-12px 20px 22px rgba(22,35,75,.32)) brightness(1.04)}
.covers:hover .back,.covers.fanned .back{
  transform:translateX(10%) translateY(-6px) rotate(5deg) rotateY(-10deg) scale(.85);
  filter:drop-shadow(12px 20px 22px rgba(22,35,75,.35)) brightness(1.06)}
/* second-stage settle: the back cover drifts a breath later */
.covers .back{transition-delay:.05s}
/* butterflies escape from between the covers as they open */
.fan-bfly{position:absolute;left:50%;top:52%;z-index:3;opacity:0;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(255,246,220,.95)) drop-shadow(0 0 14px rgba(210,225,255,.5))}
.covers:hover .fan-bfly,.covers.fanned .fan-bfly{animation:fanFlight 2.6s ease-out forwards}
@keyframes fanFlight{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg)}
  12%{opacity:1}
  70%{opacity:1;transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(1) rotate(var(--fr))}
  100%{opacity:0;transform:translate(calc(-50% + var(--fx)*1.25),calc(-50% + var(--fy)*1.25 - 46px)) scale(.85) rotate(var(--fr))}
}
.fan-bfly svg{width:100%;height:auto;overflow:visible}
.fan-bfly .wingL{transform-box:view-box;transform-origin:30px 24px;animation:flutterL .45s ease-in-out infinite}
.fan-bfly .wingR{transform-box:view-box;transform-origin:30px 24px;animation:flutterR .45s ease-in-out infinite}
/* sparkles wake up while the book opens */
.covers:hover .book-sparkle,.covers.fanned .book-sparkle{animation-duration:1.1s;color:#f4d98b}
/* hint caption */
.covers-hint{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);z-index:2;white-space:nowrap;
  font-family:var(--label);font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(107,93,51,.65);
  transition:opacity .5s ease}
.covers:hover .covers-hint,.covers.fanned .covers-hint{opacity:0}
.book-copy h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.35em 0 .5em}
.book-copy p{color:var(--ink-soft);margin-bottom:1em}
.book-copy .question{font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--night);margin:1.2em 0}
.book-meta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px}
.chip{font-family:var(--label);font-weight:600;font-size:.74rem;letter-spacing:.08em;background:#f2ecd9;border:1px solid #e5dcc0;color:#6b5d33;padding:8px 14px;border-radius:999px}

/* ---------- about ---------- */
.about{background:linear-gradient(180deg,var(--cream) 0%, #eef0dd 100%)}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
/* ---- the maestro portrait: an organic breathing frame with a golden orbit ---- */
.portrait-frame{position:relative;justify-self:center;max-width:400px;cursor:pointer;
  transition:transform .9s cubic-bezier(.3,1.4,.45,1)}
.portrait-frame:hover,.portrait-frame.alive{transform:translateY(-12px)}
/* warm stage-light blooming behind him */
.portrait-frame::after{content:"";position:absolute;inset:-12%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(227,182,79,.5), rgba(227,182,79,.16) 55%, transparent 75%);
  filter:blur(12px);opacity:0;transform:scale(.7);transition:opacity .9s ease, transform .9s cubic-bezier(.3,1.2,.5,1)}
.portrait-frame:hover::after,.portrait-frame.alive::after{opacity:1;transform:scale(1)}
/* the photo: organic blob that slowly breathes, zooms alive on hover */
.portrait-photo{display:block;overflow:hidden;border:8px solid #fff;box-shadow:var(--shadow);
  border-radius:50% 50% 46% 46%/ 42% 42% 54% 54%;animation:blobBreathe 14s ease-in-out infinite}
.portrait-photo img{display:block;transform-origin:50% 38%;transition:transform 2s cubic-bezier(.25,.6,.3,1)}
.portrait-frame:hover .portrait-photo img,.portrait-frame.alive .portrait-photo img{transform:scale(1.07)}
@keyframes blobBreathe{
  0%,100%{border-radius:50% 50% 46% 46%/ 42% 42% 54% 54%}
  33%{border-radius:46% 54% 50% 44%/ 48% 40% 56% 50%}
  66%{border-radius:54% 46% 44% 52%/ 44% 50% 48% 56%}
}
/* a melody rises around him: floating notes in gold and leaf-green */
.melody{position:absolute;z-index:3;opacity:0;pointer-events:none;line-height:1;font-family:var(--body)}
.melody.gold{color:var(--gold);filter:drop-shadow(0 0 6px rgba(227,182,79,.85))}
.melody.leaf{color:#8ba04a;filter:drop-shadow(0 0 6px rgba(139,160,74,.8))}
.portrait-frame:hover .melody,.portrait-frame.alive .melody{animation:melodyRise 2.8s ease-out infinite}
@keyframes melodyRise{
  0%{opacity:0;transform:translate(0,0) scale(.4) rotate(-10deg)}
  15%{opacity:1}
  45%{transform:translate(calc(var(--mx)*.5 + 6px),calc(var(--my)*.5)) scale(1) rotate(8deg)}
  75%{opacity:.9;transform:translate(var(--mx),var(--my)) scale(1) rotate(-8deg)}
  100%{opacity:0;transform:translate(calc(var(--mx)*1.25),calc(var(--my)*1.35)) scale(.7) rotate(6deg)}
}
.portrait-frame .note{position:absolute;right:-10px;top:6px;font-size:2.2rem;color:var(--gold);animation:bob 6s ease-in-out infinite;z-index:3}
.portrait-frame .note2{position:absolute;left:-14px;bottom:30px;font-size:1.6rem;color:var(--meadow);animation:bob 7s ease-in-out infinite;animation-delay:1.4s;z-index:3}
.about-copy h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.35em 0 .5em}
.about-copy p{color:var(--ink-soft);margin-bottom:1em}
.about-quote{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--night);border-left:3px solid var(--gold);padding-left:20px;margin:1.4em 0}

/* ---------- sister's highlighted words: the golden bridge into the story ---------- */
.sister-quote{position:relative;overflow:hidden;padding:84px 24px;text-align:center;
  background:linear-gradient(135deg,#fbf3dd 0%,#f6e9c6 45%,#fbf3dd 100%)}
.sister-quote::before{content:"\201C";position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-size:13rem;line-height:1;color:rgba(227,182,79,.28);pointer-events:none}
.sister-quote .sq-inner{position:relative;max-width:1000px;margin:0 auto;
  display:grid;grid-template-columns:.78fr 1.22fr;gap:52px;align-items:center;text-align:left}
.sq-photo{position:relative;justify-self:center;margin:0;max-width:300px;transform:rotate(-2.5deg);
  transition:transform .8s cubic-bezier(.3,1.4,.45,1)}
.sister-quote:hover .sq-photo{transform:rotate(-1deg) translateY(-6px)}
.sq-photo::before{content:"";position:absolute;inset:-11px;border:2px solid rgba(227,182,79,.6);
  border-radius:26px;pointer-events:none}
.sq-photo img{display:block;border-radius:18px;border:6px solid #fff;
  box-shadow:0 22px 48px rgba(74,61,28,.28)}
.sq-photo figcaption{margin-top:14px;text-align:center;font-family:var(--display);font-style:italic;
  font-size:1.05rem;color:#8a7433}
.sister-quote blockquote{font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.55;color:#4a3d1c;margin:0}
.sister-quote blockquote strong{color:#3a2f12;font-weight:700}
.sister-quote .sq-rule{display:block;width:150px;height:3px;margin:26px 0 14px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--gold) 20%,#f6dd9a 50%,var(--gold) 80%,transparent);
  background-size:220% 100%;animation:ruleShimmer 3.5s linear infinite}
@keyframes ruleShimmer{0%{background-position:130% 0}100%{background-position:-130% 0}}
.sister-quote .sq-who{font-family:var(--label);font-weight:700;font-size:.8rem;letter-spacing:.24em;
  text-transform:uppercase;color:#8a7433}
.sister-quote .sq-star{position:absolute;color:var(--gold);pointer-events:none;
  animation:twinkle 3.4s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(227,182,79,.8));font-size:15px;line-height:1}
@media (max-width:900px){
  .sister-quote{padding:64px 20px}
  .sister-quote::before{font-size:9rem;top:-18px}
  .sister-quote .sq-inner{grid-template-columns:1fr;gap:40px;text-align:center}
  .sq-photo{max-width:250px}
  .sister-quote .sq-rule{margin:26px auto 14px}
}

/* =============================================================
   NIGHT SECTION — the letter, under a living night sky
   ============================================================= */
.night{position:relative;background:radial-gradient(1200px 600px at 70% -10%, #27407c 0%, var(--night) 45%, var(--night-deep) 100%);color:#e8ecf7;overflow:hidden}
.night .eyebrow{color:var(--gold-soft)}
.night h2{color:#fff}
.night .section-head p{color:#c3cde6}
.night-stars{position:absolute;inset:0;pointer-events:none;z-index:0}
.big-moon{position:absolute;top:56px;left:7%;width:84px;height:84px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 32%, rgba(214,186,120,.5) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 58%, rgba(214,186,120,.45) 0 7%, transparent 8%),
    radial-gradient(circle at 46% 80%, rgba(214,186,120,.4) 0 5%, transparent 6%),
    radial-gradient(circle at 35% 35%, #fff8dd, #f0d98a 70%);
  box-shadow:0 0 60px 22px rgba(244,217,139,.35);pointer-events:none;z-index:1;animation:moonGlow 6s ease-in-out infinite}
@keyframes moonGlow{0%,100%{box-shadow:0 0 60px 22px rgba(244,217,139,.35)}50%{box-shadow:0 0 84px 36px rgba(244,217,139,.5)}}
.night-cloud{position:absolute;z-index:1;pointer-events:none;animation:cloudDrift linear infinite}
.night-cloud svg{width:100%;height:auto;filter:blur(.6px) brightness(.34) saturate(.55) hue-rotate(12deg);opacity:.85}
.butterfly{position:absolute;z-index:2;pointer-events:none;color:#fff6df;filter:drop-shadow(0 0 8px rgba(255,240,200,.9));animation:riseB linear infinite}
@keyframes riseB{0%{transform:translateY(40px) rotate(-8deg);opacity:0}12%{opacity:.95}85%{opacity:.85}100%{transform:translateY(-108vh) rotate(10deg);opacity:0}}
/* falling stardust */
.stardust{position:absolute;z-index:2;width:3px;height:3px;border-radius:50%;background:#fff3d0;box-shadow:0 0 6px 2px rgba(255,243,208,.7);pointer-events:none;animation:dustFall linear infinite}
@keyframes dustFall{0%{transform:translate(0,-4vh);opacity:0}10%{opacity:.9}90%{opacity:.6}100%{transform:translate(-3vw,105vh);opacity:0}}
/* drifting ground mist */
.mist{position:absolute;bottom:-30px;height:150px;width:60%;z-index:2;border-radius:50%;
  background:radial-gradient(closest-side, rgba(190,205,240,.16), transparent 75%);
  filter:blur(6px);pointer-events:none;animation:mistDrift ease-in-out infinite alternate}
@keyframes mistDrift{0%{transform:translateX(-8%)}100%{transform:translateX(14%)}}
.night .shooting{animation-duration:14s}
.night .shooting.s2{animation-duration:19s;animation-delay:7s}

/* ---------- owls ---------- */
/* perched storybook owl: blinking eyes, gentle sway */
.owl-perch{position:absolute;right:5%;bottom:6%;width:150px;z-index:2;pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(255,240,200,.25));animation:owlSway 9s ease-in-out infinite;transform-origin:bottom center}
@keyframes owlSway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.4deg)}}
.owl-perch .eyelid{transform-origin:center 34%;transform:scaleY(0);animation:blink 6s ease-in-out infinite}
.owl-perch .eyelid.e2{animation-delay:.04s}
@keyframes blink{0%,90%,100%{transform:scaleY(0)}93%,96%{transform:scaleY(1)}}
.owl-perch .head{transform-origin:50% 60%;animation:headTilt 11s ease-in-out infinite}
@keyframes headTilt{0%,72%,100%{transform:rotate(0deg)}78%,88%{transform:rotate(-7deg)}}
.owl-perch.small{width:88px;right:auto;left:6%;bottom:auto;top:12%;animation-delay:-3s;opacity:.9}
.owl-perch.small .eyelid{animation-delay:2.2s}
/* gliding owl crossing the night sky */
.owl-glide{position:absolute;top:18%;left:0;width:110px;z-index:2;opacity:.95;pointer-events:none;
  animation:owlGlide 34s linear infinite}
.owl-glide svg{width:100%;height:auto;overflow:visible}
.owl-glide .wingNear{transform-box:view-box;transform-origin:98px 54px;animation:wingBeat 1.7s ease-in-out infinite}
.owl-glide .wingFar{transform-box:view-box;transform-origin:104px 60px;animation:wingBeatFar 1.7s ease-in-out infinite}
@keyframes wingBeat{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-20deg)}}
@keyframes wingBeatFar{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(14deg)}}
@keyframes owlGlide{
  0%{transform:translate(-14vw,0) rotate(2deg)}
  30%{transform:translate(32vw,-40px) rotate(-2deg)}
  60%{transform:translate(68vw,10px) rotate(2deg)}
  100%{transform:translate(116vw,-30px) rotate(-2deg)}
}
/* hero: owl silhouette that only flies at night */
.hero-owl{position:absolute;inset:0;z-index:3;opacity:0;animation:nightfall var(--cycle) ease-in-out infinite;pointer-events:none}
.hero-owl .owl-glide{color:#0d1730;opacity:.85;top:22%;animation-duration:46s}
.letter{position:relative;z-index:3;max-width:720px;margin:0 auto;background:rgba(253,250,242,.97);color:var(--ink);border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.45);padding:56px 58px}
.letter::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-1.5deg);width:150px;height:30px;background:rgba(244,217,139,.75);box-shadow:0 2px 4px rgba(0,0,0,.15)}
.letter p{margin-bottom:1em;color:#41465c}
.letter .open{font-family:var(--display);font-style:italic;font-size:1.45rem;color:var(--night);margin-bottom:1.1em}
.letter .sign{font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--night);margin-top:1.6em;margin-bottom:0}
.letter strong{color:var(--night)}

/* dawn divider — a real sunrise: fading stars, layered glow, haze, rising sun, morning birds */
.dawn{position:relative;height:300px;overflow:hidden;
  background:linear-gradient(180deg,
    var(--night-deep) 0%, #131f42 16%, #1d2b55 30%, #35406e 44%,
    #5d5b85 56%, #8f7391 66%, #c08e8e 74%, #e8b184 82%, #f7d49c 90%, #fbeccb 96%, var(--cream) 100%)}
.dawn-stars{position:absolute;top:0;left:0;right:0;height:45%;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 30%,transparent 100%);pointer-events:none}
/* wide atmospheric glow above the horizon */
.dawn-glow{position:absolute;left:50%;bottom:-160px;width:1200px;max-width:170vw;height:420px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
    rgba(255,236,180,.85) 0%, rgba(255,204,140,.55) 26%,
    rgba(255,170,120,.28) 48%, rgba(255,150,120,.12) 62%, transparent 74%);
  animation:glowBreathe 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes glowBreathe{0%{opacity:.8;transform:translateX(-50%) scaleY(.94)}100%{opacity:1;transform:translateX(-50%) scaleY(1.05)}}
/* the sun itself: bright core, soft corona, slow rise */
.dawn-sun{position:absolute;left:50%;bottom:-58px;width:130px;height:130px;margin-left:-65px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,
    #fffdf4 0%, #fff6d8 28%, #ffe9a8 52%, #ffd678 74%, rgba(255,196,110,.85) 88%, rgba(255,180,110,0) 100%);
  box-shadow:
    0 0 34px 12px rgba(255,244,214,.9),
    0 0 90px 40px rgba(255,214,140,.55),
    0 0 190px 90px rgba(255,190,130,.3);
  animation:dawnRise 12s ease-in-out infinite alternate;pointer-events:none}
@keyframes dawnRise{0%{transform:translateY(30px)}100%{transform:translateY(2px)}}
/* horizontal haze bands drifting slowly across the horizon */
.dawn-haze{position:absolute;left:-10%;width:120%;height:26px;border-radius:50%;
  filter:blur(9px);pointer-events:none;animation:hazeDrift ease-in-out infinite alternate}
.dawn-haze.h1{bottom:66px;background:rgba(255,205,150,.28);animation-duration:14s}
.dawn-haze.h2{bottom:40px;background:rgba(255,225,175,.35);animation-duration:18s;animation-delay:-6s}
.dawn-haze.h3{bottom:16px;background:rgba(255,240,205,.5);animation-duration:22s;animation-delay:-11s}
@keyframes hazeDrift{0%{transform:translateX(-3%)}100%{transform:translateX(3%)}}
/* morning birds crossing the sunrise */
.dawn-bird{position:absolute;opacity:.5;pointer-events:none;animation:flyAcross linear infinite;filter:brightness(.55) saturate(.85)}
.dawn-bird svg{width:100%;height:auto;overflow:visible}

/* ---------- little dreamers ---------- */
.dreamers-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}
/* ---- the living polaroid: hover (or tap) and the memory wakes up ---- */
.polaroid{position:relative;justify-self:center;max-width:400px;background:#fff;padding:16px 16px 20px;cursor:pointer;
  box-shadow:0 24px 55px rgba(22,35,75,.22);transform:rotate(-2.5deg);animation:polaroidSway 8s ease-in-out infinite;
  transition:transform .9s cubic-bezier(.3,1.4,.45,1), box-shadow .9s ease}
@keyframes polaroidSway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(-1deg)}}
.polaroid::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(2deg);width:120px;height:28px;background:rgba(244,217,139,.75);box-shadow:0 2px 4px rgba(0,0,0,.12);z-index:3;transition:transform .7s cubic-bezier(.3,1.6,.5,1)}
/* warm dream-light blooming behind the frame */
.polaroid::after{content:"";position:absolute;inset:-9% -12%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(244,217,139,.55), rgba(244,217,139,.18) 55%, transparent 75%);
  filter:blur(10px);opacity:0;transform:scale(.7);transition:opacity .9s ease, transform .9s cubic-bezier(.3,1.2,.5,1)}
.polaroid:hover,.polaroid.alive{animation:none;transform:rotate(.5deg) translateY(-16px) scale(1.04);
  box-shadow:0 40px 80px rgba(22,35,75,.3), 0 12px 28px rgba(227,182,79,.25)}
.polaroid:hover::after,.polaroid.alive::after{opacity:1;transform:scale(1)}
.polaroid:hover::before,.polaroid.alive::before{transform:translateX(-50%) rotate(-3deg) translateY(-3px)}
/* the photo itself breathes: slow Ken Burns drift */
.polaroid .photo{display:block;overflow:hidden}
.polaroid .photo img{display:block;transform-origin:60% 45%;transition:transform 2.2s cubic-bezier(.25,.6,.3,1)}
.polaroid:hover .photo img,.polaroid.alive .photo img{transform:scale(1.08) translate(-1.5%,-1%)}
/* caption ignites in flowing gold */
.polaroid .caption{display:block;margin:16px 4px 2px;text-align:center;font-family:var(--display);font-style:italic;font-size:1.08rem;line-height:1.45;color:var(--ink-soft);z-index:2;transition:color .5s}
.polaroid:hover .caption,.polaroid.alive .caption{
  background:linear-gradient(90deg,#6b5d33 20%,#e8bd55 40%,#f6dd9a 50%,#e8bd55 60%,#6b5d33 80%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:captionShine 2.6s linear infinite}
@keyframes captionShine{0%{background-position:120% 0}100%{background-position:-120% 0}}
/* wishes rise from the little owl on her shoulder: gold stars and silver butterflies */
.wish{position:absolute;z-index:3;opacity:0;pointer-events:none;line-height:1}
.wish-star{color:#f4d98b;filter:drop-shadow(0 0 6px rgba(244,217,139,.95))}
.wish-bfly{color:#fdf6e0;filter:drop-shadow(0 0 6px rgba(255,246,220,.95)) drop-shadow(0 0 12px rgba(210,225,255,.5))}
.polaroid:hover .wish,.polaroid.alive .wish{animation:wishRise 2.4s ease-out infinite}
.polaroid:hover .wish-bfly,.polaroid.alive .wish-bfly{animation-name:wishFloat}
@keyframes wishRise{
  0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}
  15%{opacity:1}
  70%{opacity:.9;transform:translate(var(--wx),var(--wy)) scale(1) rotate(160deg)}
  100%{opacity:0;transform:translate(calc(var(--wx)*1.3),calc(var(--wy)*1.4)) scale(.6) rotate(240deg)}
}
/* butterflies drift up with a gentle sway instead of spinning */
@keyframes wishFloat{
  0%{opacity:0;transform:translate(0,0) scale(.3) rotate(-8deg)}
  15%{opacity:1}
  40%{transform:translate(calc(var(--wx)*.5 + 8px),calc(var(--wy)*.45)) scale(1) rotate(10deg)}
  70%{opacity:.9;transform:translate(var(--wx),var(--wy)) scale(1) rotate(-8deg)}
  100%{opacity:0;transform:translate(calc(var(--wx)*1.25 - 6px),calc(var(--wy)*1.4)) scale(.7) rotate(6deg)}
}
/* dream-butterflies slip out from behind the frame and hover close */
.dream-bfly{position:absolute;z-index:3;opacity:0;pointer-events:none;transition:opacity .6s ease;
  filter:drop-shadow(0 0 6px rgba(255,246,220,.95)) drop-shadow(0 0 13px rgba(210,225,255,.5))}
.polaroid:hover .dream-bfly,.polaroid.alive .dream-bfly{animation:dreamOut 1.4s cubic-bezier(.3,1.3,.5,1) forwards}
@keyframes dreamOut{
  0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}
  55%{opacity:1}
  100%{opacity:.95;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--dr))}
}
.dream-bfly svg{width:100%;height:auto;overflow:visible}
.dream-bfly .wingL{transform-box:view-box;transform-origin:30px 24px;animation:flutterL .5s ease-in-out infinite}
.dream-bfly .wingR{transform-box:view-box;transform-origin:30px 24px;animation:flutterR .5s ease-in-out infinite}
.dreamers-copy h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.35em 0 .5em}
.dreamers-copy p{color:var(--ink-soft);margin-bottom:1em}
.dreamers-copy .whisper{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--night);margin:1.3em 0}
.dreamer-fly{position:absolute;z-index:3;color:var(--gold);pointer-events:none;animation:bob 7s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(227,182,79,.5))}

/* ---------- world / bookshop ---------- */
.world-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
/* gallery-framed author photo: on hover the author "signs" it in golden ink while music rises */
.world-photo{position:relative;border-radius:var(--radius);cursor:pointer}
.world-photo::before{content:"";position:absolute;inset:-13px;border:2px solid rgba(227,182,79,.55);border-radius:calc(var(--radius) + 10px);pointer-events:none;transition:inset .5s ease, border-color .5s ease}
.world-photo:hover::before,.world-photo.alive::before{inset:-8px;border-color:var(--gold)}
.world-photo .wp-clip{display:block;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);position:relative}
.world-photo img{display:block;border-radius:var(--radius);transition:transform 1.7s cubic-bezier(.25,.6,.3,1)}
.world-photo:hover img,.world-photo.alive img{transform:scale(1.05)}
/* soft ink-dusk at the base so the golden signature reads on any photo */
.world-photo .wp-clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:
    radial-gradient(70% 130% at 22% 100%, rgba(14,24,54,.6), transparent 70%),
    linear-gradient(180deg,transparent,rgba(14,24,54,.3));
  opacity:0;transition:opacity .8s ease;pointer-events:none}
.world-photo:hover .wp-clip::after,.world-photo.alive .wp-clip::after{opacity:1}
/* the signature writes itself in golden ink */
.autograph{position:absolute;left:5%;bottom:3.5%;width:46%;max-width:270px;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:2;overflow:visible}
.world-photo:hover .autograph,.world-photo.alive .autograph{opacity:1}
.autograph .sig{font-family:'Great Vibes',cursive;font-size:58px;
  fill:#f4d98b;fill-opacity:0;stroke:#f4d98b;stroke-width:1.3;
  stroke-dasharray:1100;stroke-dashoffset:1100;
  filter:drop-shadow(0 0 6px rgba(244,217,139,.8))}
.world-photo:hover .sig,.world-photo.alive .sig{animation:sigDraw 2.6s ease forwards .15s}
@keyframes sigDraw{
  0%{stroke-dashoffset:1100;fill-opacity:0}
  72%{stroke-dashoffset:0;fill-opacity:0}
  100%{stroke-dashoffset:0;fill-opacity:1}
}
/* the golden quill glides along as it writes, then lifts away */
.quill{position:absolute;bottom:8%;left:7%;width:32px;opacity:0;pointer-events:none;z-index:3;
  color:#f4d98b;filter:drop-shadow(0 0 6px rgba(244,217,139,.9))}
.quill svg{width:100%;height:auto;transform:rotate(12deg)}
.world-photo:hover .quill,.world-photo.alive .quill{animation:quillWrite 2.6s ease forwards .15s}
@keyframes quillWrite{
  0%{opacity:0;transform:translate(0,10px)}
  6%{opacity:1;transform:translate(0,0)}
  20%{transform:translate(34px,-6px)}
  34%{transform:translate(70px,2px)}
  48%{transform:translate(108px,-5px)}
  62%{transform:translate(146px,2px)}
  72%{opacity:1;transform:translate(182px,-3px)}
  86%{opacity:.9;transform:translate(200px,-32px) rotate(-14deg)}
  100%{opacity:0;transform:translate(214px,-60px) rotate(-20deg)}
}
/* golden music notes drift up around the photo while he signs */
.world-note{position:absolute;z-index:3;opacity:0;pointer-events:none;line-height:1;color:var(--gold);
  filter:drop-shadow(0 0 6px rgba(227,182,79,.85))}
.world-photo:hover .world-note,.world-photo.alive .world-note{animation:melodyRise 2.8s ease-out infinite}
.world-copy h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.35em 0 .5em}
.world-copy p{color:var(--ink-soft);margin-bottom:1em}
.owl-note{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #eee5cd;border-radius:14px;padding:18px 20px;margin-top:24px;box-shadow:0 10px 26px rgba(22,35,75,.08)}
.owl-note .owl{font-size:1.7rem;line-height:1}
.owl-note .owl img.emoji, .owl-note .owl img{width:1em !important;height:1em !important;max-width:none;margin:0 !important;display:inline-block}
.owl-note p{margin:0;font-size:.95rem;color:var(--ink-soft)}

/* ---------- contact / footer ---------- */
.contact{background:linear-gradient(180deg,#eef0dd 0%, var(--cream) 100%);text-align:center}
.contact .box{max-width:620px;margin:0 auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:52px 44px;position:relative;z-index:2}
.contact h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:.35em 0 .45em}
.contact p{color:var(--ink-soft);margin-bottom:26px}
.contact form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.contact input{font-family:var(--body);font-size:1rem;padding:14px 18px;border-radius:999px;border:2px solid #e4ddc6;min-width:260px;flex:1}
.contact input:focus{outline:3px solid var(--gold);border-color:var(--gold)}
footer{position:relative;overflow:hidden;background:var(--night-deep);color:#aab5d4;padding:44px 24px;text-align:center}
footer .fname{font-family:var(--display);font-size:1.5rem;color:#fff;position:relative;z-index:2}
footer .ftag{font-family:var(--label);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin:6px 0 18px;position:relative;z-index:2}
footer small{font-size:.8rem;position:relative;z-index:2;display:block}
.footer-stars{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .section{padding:72px 20px}
  .hero .wrap{grid-template-columns:1fr;text-align:center;gap:44px;padding:70px 20px 190px}
  .hero-book{margin-bottom:30px}
  .hero .lede{margin:0 auto}
  .hero .cta-row{justify-content:center}
  .sun{width:66px;height:66px}
  .moon-hero{width:52px;height:52px}
  .spine-sparkles{width:70px}
  .book-grid,.about-grid,.world-grid,.dreamers-grid{grid-template-columns:1fr;gap:44px}
  .covers{min-height:0;margin-bottom:8px}
  .letter{padding:44px 28px}
  .owl-perch{width:104px;right:3%;bottom:3%}
  .owl-perch.small{width:64px;top:8%}
  .owl-glide{width:78px}
  .book-flip{--depth:22px}
  .dawn{height:220px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .sky-night,.hero-stars,.moon-hero,.shooting,.firefly,.spine-sparkles{opacity:0 !important}
  .sun{transform:translate(46vw,6vh) !important;opacity:1}
  .reveal{opacity:1 !important;transform:none !important}
}