/* ============================================================
   whimsy.css — aurora gradient, stars, motes, shooting star, mist
   All motion disabled under prefers-reduced-motion.
   ============================================================ */

.sky { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sky-top { position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden; }

/* clickable creatures */
.bubble, .bee, .fish, .leaf, .butterfly, .star, .firefly { pointer-events:auto; cursor:pointer; }
.star::before, .firefly::before { content:""; position:absolute; inset:-9px; border-radius:50%; }   /* bigger hit area */

.bubble.pop { animation:pop .34s cubic-bezier(.3,1.5,.6,1) forwards !important; }
@keyframes pop { 0%{ transform:scale(1); opacity:1; } 38%{ transform:scale(1.6); opacity:1; } 100%{ transform:scale(.1); opacity:0; } }

/* satisfying splash burst */
.pop-burst { position:fixed; z-index:80; transform:translate(-50%,-50%); pointer-events:none; }
.pop-burst .ring {
  position:absolute; left:-13px; top:-13px; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--accent-2); animation:popRing .5s ease-out forwards;
}
@keyframes popRing { 0%{ transform:scale(.3); opacity:.9; } 100%{ transform:scale(2.3); opacity:0; } }
.pop-burst .drop {
  position:absolute; left:0; top:0; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--accent-2));
  animation:popDrop .55s ease-out forwards;
}
@keyframes popDrop {
  0%{ transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(var(--dx), var(--dy)) scale(.3); opacity:0; }
}
.star.caught { animation:starBurst .6s ease-out forwards !important; }
@keyframes starBurst { 0%{ transform:scale(1); opacity:1; } 40%{ transform:scale(3.4); opacity:1; } 100%{ transform:scale(0); opacity:0; } }

.wish-toast {
  position:fixed; z-index:80; transform:translate(-50%,-50%);
  background:var(--card-bg-2); border:1px solid var(--card-bd); color:var(--ink);
  padding:.55rem 1rem; border-radius:999px; font-size:.82rem; letter-spacing:.03em;
  white-space:nowrap; pointer-events:none; backdrop-filter:blur(8px);
  animation:wishFloat 2.6s ease-out forwards;
}
@keyframes wishFloat {
  0%{ opacity:0; transform:translate(-50%,-40%) scale(.9); }
  14%{ opacity:1; } 80%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-150%) scale(1.02); }
}

/* ---- aurora gradient background ---- */
.aurora {
  position:absolute; inset:-20%;
  background:linear-gradient(125deg, var(--grad-1) 0%, var(--grad-2) 32%, var(--grad-3) 64%, var(--grad-4) 100%);
  background-size:220% 220%;
  animation:aurora 22s ease-in-out infinite;
  transition:background .8s var(--ease);
}
@keyframes aurora {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

/* ---- warm sun (cloud world only) ---- */
.sun {
  position:absolute; top:16%; right:11%; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #fff7d4 0%, #ffe49a 42%, #ffd277 68%, rgba(255,210,119,0) 72%);
  box-shadow:0 0 90px 34px rgba(255,224,150,.5);
  display:none; animation:sunPulse 6s ease-in-out infinite;
}
[data-realm="castle"] .sun { display:block; }
@keyframes sunPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce){ .sun{ animation:none; } }

/* ---- stars (generated by JS as .star spans) ---- */
.starfield { position:absolute; inset:0; }
.star {
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--star); box-shadow:0 0 4px var(--star);
  animation:twinkle var(--dur,3s) ease-in-out var(--delay,0s) infinite;
}
@keyframes twinkle {
  0%,100% { opacity:.18; transform:scale(.7); }
  50%     { opacity:1;   transform:scale(1.35); }
}

/* ---- fireflies (greenery): scattered blinking dots ---- */
.firefly {
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, #fff6b0, rgba(255,224,120,0) 70%);
  box-shadow:0 0 7px 2px rgba(255,226,130,.55);
  animation:fireflyFloat var(--dur,9s) ease-in-out var(--delay,0s) infinite,
            fireflyBlink var(--bdur,3s) ease-in-out var(--delay,0s) infinite;
}
@keyframes fireflyFloat {
  0%,100% { transform:translate(0,0); }
  33% { transform:translate(var(--dx,20px), var(--dy,-20px)); }
  66% { transform:translate(var(--dy,15px), var(--dx,18px)); }
}
@keyframes fireflyBlink { 0%,100%{ opacity:.12; } 50%{ opacity:1; } }

/* ---- glow motes (generated by JS as .mote spans) ---- */
.motes { position:absolute; inset:0; }
.mote {
  position:absolute; bottom:-10px; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle, var(--accent-2), transparent 70%);
  animation:rise var(--dur,12s) linear var(--delay,0s) infinite;
}

/* drifting stardust (celestial) — twinkles & wanders, never rises like water */
.stardust {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #fff7d6, rgba(255,247,214,0) 70%);
  animation:stardust var(--dur,8s) ease-in-out var(--delay,0s) infinite;
}
@keyframes stardust {
  0%   { transform:translate(0,0); opacity:0; }
  20%  { opacity:.9; }
  50%  { transform:translate(var(--dx,18px), var(--dy,-14px)); opacity:.55; }
  80%  { opacity:.9; }
  100% { transform:translate(0,0); opacity:0; }
}
@keyframes rise {
  0%   { transform:translate(0, 0);            opacity:0; }
  12%  { opacity:.85; }
  88%  { opacity:.85; }
  100% { transform:translate(var(--drift,30px), -100vh); opacity:0; }
}

/* ---- shooting star ---- */
.shooting { position:absolute; inset:0; }
.shooting-star {
  position:absolute; height:2px; width:120px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0), #fff);
  filter:drop-shadow(0 0 6px #fff);
  opacity:0;
  animation:shoot 1.4s ease-in forwards;
}
@keyframes shoot {
  0%   { opacity:0; transform:translate(0,0) rotate(18deg); }
  10%  { opacity:1; }
  100% { opacity:0; transform:translate(420px, 170px) rotate(18deg); }
}

/* ---- mist ---- */
.mist {
  position:absolute; bottom:0; left:-20%; right:-20%; height:26vh;
  background:radial-gradient(120% 100% at 50% 130%,
            color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  animation:drift 18s ease-in-out infinite;
}
@keyframes drift { 0%,100%{ transform:translateX(-3%); } 50%{ transform:translateX(3%); } }

/* ============================================================
   CREATURES — ambient sea life / birds / leaves / bubbles
   Generated by JS into #creatures; tinted via currentColor.
   ============================================================ */
.creatures { position:absolute; inset:0; }
.creatures svg { width:100%; height:100%; display:block; fill:currentColor; }

.fish, .bird, .leaf, .butterfly, .bee {
  position:absolute; top:0; left:0; will-change:transform;
}
.bee { width:20px; height:14px; opacity:.85;
  animation:flutter var(--dur,20s) ease-in-out var(--delay,0s) infinite; }

/* soft fluffy drifting clouds */
.clouds { position:absolute; inset:0; }
.cloud {
  position:absolute;
  animation:cloudDrift var(--dur,60s) linear var(--delay,0s) infinite;
  filter:drop-shadow(0 3px 6px rgba(120,120,140,.12));
}
.cloud svg { width:100%; height:auto; display:block; }
@keyframes cloudDrift { from{ transform:translateX(-26vw); } to{ transform:translateX(128vw); } }

/* interactive clouds (castle world) — click to pop & reveal a bird */
.cloud--int { pointer-events:auto; cursor:pointer; }
.cloud--int .cloud-puff { position:relative; z-index:2; }
.cloud--int .hidden-bird { position:absolute; inset:0; z-index:1; display:grid; place-items:center; opacity:0; pointer-events:none; }
.cloud--int .hidden-bird svg { width:42%; height:auto; }
.cloud--int .hidden-bird.reveal-big svg { width:74%; }
.cloud--int.opened .cloud-puff { animation:cloudPop .55s ease-out forwards; }
.cloud--int.opened .hidden-bird { animation:birdReveal 1.8s ease-out forwards; }
@keyframes cloudPop { 0%{ opacity:1; } 100%{ opacity:0; transform:scale(1.35); } }
@keyframes birdReveal {
  0%{ opacity:0; transform:translate(0,0) scale(.55); }
  18%{ opacity:1; transform:translate(4px,-6px) scale(1); }
  100%{ opacity:0; transform:translate(90px,-78px) scale(1.12); }
}
.fish { width:48px; height:24px; color:var(--accent-2); opacity:.42;
  animation:swim var(--dur,26s) linear var(--delay,0s) infinite; }
.fish.rev { animation-name:swimRev; }
.bird { width:30px; height:18px; color:var(--ink-soft); opacity:.5;
  animation:fly var(--dur,24s) linear var(--delay,0s) infinite; }
.leaf { width:18px; height:18px; color:var(--accent); opacity:.55;
  animation:leafFall var(--dur,16s) linear var(--delay,0s) infinite; }

.butterfly { width:20px; height:16px; color:var(--accent); opacity:.6;
  animation:flutter var(--dur,22s) ease-in-out var(--delay,0s) infinite; }

/* rain (greenery) */
.raindrop {
  position:absolute; top:-14vh; width:1.5px; height:60px;
  background:linear-gradient(transparent, rgba(210,235,225,.45));
  animation:rainfall var(--dur,1.1s) linear var(--delay,0s) infinite;
}
@keyframes rainfall { 0%{ transform:translate(0,0); opacity:0; } 10%{opacity:.5;} 100%{ transform:translate(2vw,140vh); opacity:.5; } }

/* drifting fog banks (gated to greenery) */
.fog { position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease); }
[data-realm="greenery"] .fog { opacity:1; }
.fog span {
  position:absolute; left:-30%; right:-30%; height:44vh;
  background:radial-gradient(80% 100% at 50% 100%, rgba(222,236,226,.16), transparent 75%);
  filter:blur(10px);
}
.fog span:nth-child(1){ bottom:0; animation:fogDrift 26s ease-in-out infinite; }
.fog span:nth-child(2){ bottom:26vh; height:30vh; opacity:.7; animation:fogDrift 34s ease-in-out infinite reverse; }
@keyframes fogDrift { 0%,100%{ transform:translateX(-6%); } 50%{ transform:translateX(6%); } }

/* ground silhouettes (per realm; injected by JS) */
.ground { position:absolute; left:0; right:0; bottom:0; line-height:0; z-index:1; }
.ground svg { width:100%; height:auto; display:block; }

/* interactive growable mushrooms (greenery) */
.mushroom {
  position:absolute; z-index:5; pointer-events:auto; cursor:pointer;
  transform-origin:bottom center;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.mushroom svg { width:100%; height:auto; display:block; overflow:visible; }
.mushroom.burst { animation:mushBurst .38s ease-out forwards !important; }
@keyframes mushBurst { 0%{ transform:scale(3); } 35%{ transform:scale(3.5); opacity:1; } 100%{ transform:scale(.2); opacity:0; } }

/* glowing fairy mushrooms */
.mush-glow { animation:mushPulse 4.5s ease-in-out infinite; }
@keyframes mushPulse { 0%,100%{ opacity:.12; } 50%{ opacity:.4; } }
@media (prefers-reduced-motion: reduce){ .mush-glow{ animation:none; opacity:.25; } }

/* tappable wildflowers (mountain) — click to recolor with a tiny pop */
.flower { position:absolute; z-index:5; pointer-events:auto; cursor:pointer; }
.flower svg { width:100%; height:auto; display:block; overflow:visible; }
.flower .petal { transition:fill .25s ease; }
.flower__bloom { transform-box:fill-box; transform-origin:center; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.flower:hover .flower__bloom { transform:scale(1.18); }
.flower--pop .flower__bloom { animation:flowerPop .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes flowerPop { 0%{ transform:scale(1); } 45%{ transform:scale(1.55); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .flower__bloom, .flower:hover .flower__bloom { transition:none; transform:none; } .flower--pop .flower__bloom { animation:none; } }

/* swaying redwoods (greenery) — background art, click the lower trunk to sway */
.gtree { transform-box:fill-box; transform-origin:center bottom; }
.gtree.sway { animation:treeSway 1.7s ease-in-out; }
@keyframes treeSway { 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(1.8deg); } 60%{ transform:rotate(-1.3deg); } 85%{ transform:rotate(.5deg); } }
.tree-hotspot { position:absolute; bottom:0; width:120px; height:42vh; transform:translateX(-50%); z-index:1; pointer-events:auto; cursor:pointer; }
.firefly { z-index:6; }                       /* keep catchable fireflies above the tree hotspots */
@media (prefers-reduced-motion: reduce){ .gtree.sway { animation:none; } }

/* tappable pine trees (mountain) — click to shake */
.tree { position:absolute; z-index:5; pointer-events:auto; cursor:pointer; transform-origin:bottom center; }
.tree svg { width:100%; height:auto; display:block; overflow:visible; }
.tree--shake { animation:treeShake .52s ease; }
@keyframes treeShake { 0%,100%{ transform:rotate(0); } 20%{ transform:rotate(3.5deg); } 40%{ transform:rotate(-2.8deg); } 60%{ transform:rotate(2deg); } 80%{ transform:rotate(-1deg); } }
@media (prefers-reduced-motion: reduce){ .tree--shake { animation:none; } }

/* bubbles (pure CSS) */
.bubble {
  position:absolute; bottom:-4vh; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), color-mix(in srgb, var(--accent-2) 40%, transparent) 60%, transparent 72%);
  border:1px solid color-mix(in srgb, var(--accent-2) 50%, transparent);
  animation:bubble var(--dur,14s) linear var(--delay,0s) infinite;
}

@keyframes swim    { from{ transform:translate(-14vw, var(--y,0)); } to{ transform:translate(114vw, calc(var(--y,0) - 24px)); } }
@keyframes swimRev { from{ transform:translate(114vw, var(--y,0)) scaleX(-1); } to{ transform:translate(-14vw, calc(var(--y,0) - 24px)) scaleX(-1); } }
@keyframes fly     { from{ transform:translate(-14vw, calc(var(--y,0) + 6vh)); } to{ transform:translate(114vw, calc(var(--y,0) - 4vh)); } }
@keyframes leafFall{ 0%{ transform:translate(0,-10vh) rotate(0); opacity:0; } 10%{opacity:.55;} 90%{opacity:.55;} 100%{ transform:translate(9vw,112vh) rotate(230deg); opacity:0; } }
@keyframes flutter { 0%{transform:translate(-12vw,var(--y,40vh));} 25%{transform:translate(20vw,calc(var(--y,40vh) - 5vh));} 50%{transform:translate(52vw,var(--y,40vh));} 75%{transform:translate(82vw,calc(var(--y,40vh) - 5vh));} 100%{transform:translate(114vw,var(--y,40vh));} }
@keyframes bubble  { 0%{ transform:translate(0,0); opacity:0; } 12%{opacity:.75;} 88%{opacity:.75;} 100%{ transform:translate(var(--wob,14px),-118vh); opacity:0; } }

/* ---- reduced motion: freeze everything ---- */
@media (prefers-reduced-motion: reduce){
  .aurora, .star, .mote, .stardust, .mist, .firefly,
  .fish, .bird, .leaf, .bubble, .butterfly, .bee, .cloud, .raindrop, .fog span { animation:none; }
  .shooting-star { display:none; }
  .mote, .stardust { opacity:.5; }
  .aurora { background-position:50% 50%; }
  .fish, .bird, .leaf, .bubble, .butterfly, .raindrop { display:none; }
}