/* ngaia-splash.css -- "Pip's Hollow" intro splash, ported into the Ngaia hub.
   Source: build/ngaia-splash/index.html (Studio, Wave 1). EVERY selector is
   namespaced under #ngaia-splash so nothing bleeds into the hub styles. The
   :root vars + body rules from the mockup are folded onto #ngaia-splash; the
   inner element ids are sp-* prefixed (the hub already owns #fireflies/#motes).
   Palette + polish layer matched exactly to public/ngaia/style.css.
   WARM / GENTLE / MAGICAL register -- the opposite pole from Oak's punchy comic. */

/* ===== the overlay carries the tokens + the warmth state (dusk -> golden hour) ===== */
#ngaia-splash{
  /* exact tokens from public/ngaia/style.css :root.ngaia */
  --moss:#6B8E5A;
  --bracken:#C97B4A;
  --bloom:#F4A6C9;
  --honey:#E8B547;
  --cream:#FAF3E3;
  --bark:#4A3728;
  --warm:#FBBF24;
  --dapple:rgba(245,222,179,.4);
  --spring:cubic-bezier(.2,1.4,.4,1);
  --soft:cubic-bezier(.2,.9,.3,1);

  /* Sized in viewport units, NOT inset:0 -- body.ngaia carries a `filter` (the ember
     pulse) which makes the body the containing block for position:fixed descendants, so
     inset:0 would fill the 2024px body instead of the 844px viewport (the bottom:% stage
     children would then land below the fold). 100vw/100vh pins it to the viewport. */
  position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;
  overflow:hidden;cursor:pointer;z-index:99999;
  font-family:'Nunito',system-ui,sans-serif;color:var(--cream);
  -webkit-font-smoothing:antialiased;
  /* dusk hollow at rest -- deep bark canopy fading to a warm floor. */
  background:
    radial-gradient(620px 460px at 50% 74%, rgba(232,181,71,.16) 0%, transparent 60%),
    radial-gradient(800px 600px at 92% 6%, rgba(244,166,201,.10) 0%, transparent 52%),
    linear-gradient(180deg,#2A2010 0%, #3A2C16 46%, #4A3A1E 100%);
  transition:background 1.8s var(--soft), opacity .45s ease;
}
#ngaia-splash *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;}

/* fade-out on dismiss (set by ngaia-splash.js); no-flash skip on a seen session */
#ngaia-splash.sp-out{opacity:0;pointer-events:none;}
html.ngaia-splash-skip #ngaia-splash{display:none !important;}
/* lock scroll while the splash is up so the viewport-pinned overlay can't be scrolled off */
html.ngaia-splash-active, html.ngaia-splash-active body{overflow:hidden !important;}

/* dusk warms as the lantern is lit (beat 3+) -- golden hour floods up the canopy */
#ngaia-splash[data-beat="3"],
#ngaia-splash[data-beat="4"],
#ngaia-splash[data-beat="5"]{
  background:
    radial-gradient(720px 540px at 50% 72%, rgba(232,181,71,.40) 0%, transparent 62%),
    radial-gradient(820px 600px at 92% 6%, rgba(244,166,201,.16) 0%, transparent 52%),
    linear-gradient(180deg,#3A2C14 0%, #6E5326 44%, #C99A4E 100%);
}

/* ===================== AMBIENT BACKGROUND LAYERS ===================== */
#ngaia-splash .bg-canopy{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(245,222,179,.22) 1.4px, transparent 1.8px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 95% 80% at 50% 36%,#000 24%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 95% 80% at 50% 36%,#000 24%,transparent 90%);}

#ngaia-splash .hollow{position:absolute;left:50%;bottom:0;width:min(116%,560px);height:78%;
  transform:translateX(-50%) translateY(40px);opacity:0;z-index:0;pointer-events:none;}
#ngaia-splash .hollow .cavity{position:absolute;left:8%;right:8%;bottom:0;top:14%;
  border-radius:48% 48% 0 0 / 60% 60% 0 0;
  background:radial-gradient(120% 90% at 50% 86%, #3C2D17 0%, #2A2010 60%, #1E160B 100%);
  box-shadow:inset 0 18px 50px rgba(0,0,0,.5);}
#ngaia-splash .hollow .rim{position:absolute;left:0;right:0;bottom:0;top:6%;
  border-radius:46% 46% 0 0 / 56% 56% 0 0;
  background:linear-gradient(180deg,#5A4327 0%, #4A3728 55%, #3A2A1A 100%);
  box-shadow:inset 0 0 0 6px rgba(74,55,40,.6), inset 0 2px 0 rgba(245,222,179,.10);
  z-index:-1;}
#ngaia-splash .hollow .floor{position:absolute;left:6%;right:6%;bottom:0;height:14%;
  border-radius:0 0 26px 26px;
  background:linear-gradient(180deg,#5C7B49,#41592F);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.3);}
#ngaia-splash .hollow .stool{position:absolute;bottom:8%;width:26px;height:30px;}
#ngaia-splash .hollow .stool::before{content:'';position:absolute;bottom:0;left:9px;width:8px;height:18px;
  border-radius:4px;background:var(--cream);opacity:.85;}
#ngaia-splash .hollow .stool::after{content:'';position:absolute;top:0;left:0;width:26px;height:14px;
  border-radius:13px 13px 8px 8px;background:radial-gradient(circle at 40% 30%, #F4A6C9, #C97B4A);
  box-shadow:0 1px 0 rgba(74,55,40,.3);}
#ngaia-splash .hollow .stool.s1{left:16%;transform:scale(.9);} #ngaia-splash .hollow .stool.s2{right:18%;bottom:7%;}

#ngaia-splash .lantern-pool{position:absolute;left:50%;bottom:6%;width:340px;height:200px;z-index:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 60%, rgba(232,181,71,.45), transparent 70%);
  opacity:0;}

#ngaia-splash .motes{position:absolute;inset:0;z-index:1;pointer-events:none;}
#ngaia-splash .mote{position:absolute;border-radius:50%;filter:blur(2px);opacity:0;
  background:radial-gradient(circle at 40% 40%, rgba(250,243,227,.9), rgba(232,181,71,.25) 70%, transparent);}

#ngaia-splash .fireflies{position:absolute;inset:0;z-index:2;pointer-events:none;}
#ngaia-splash .fly{position:absolute;width:6px;height:6px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 50% 50%, #FFF3C8, var(--honey) 60%, transparent 75%);
  box-shadow:0 0 8px rgba(232,181,71,.8),0 0 16px rgba(232,181,71,.4);}

/* ===================== STAGE (characters) ===================== */
#ngaia-splash .stage{position:absolute;inset:0;z-index:3;pointer-events:none;}
#ngaia-splash .toon{position:absolute;opacity:0;will-change:transform,opacity;}
#ngaia-splash .toon img{width:100%;height:100%;display:block;
  filter:drop-shadow(0 8px 14px rgba(74,55,40,.4)) drop-shadow(0 0 18px rgba(232,181,71,.25));}

#ngaia-splash .toon-hazel{right:7%;bottom:22%;width:148px;height:148px;
  transform:translateY(70px) scale(.92);transform-origin:50% 100%;}
#ngaia-splash .lantern{position:absolute;left:-26px;bottom:34px;width:46px;height:62px;z-index:4;
  opacity:0;transform:translateY(10px) rotate(-6deg);transform-origin:50% 0;}
#ngaia-splash .lantern .cage{position:absolute;inset:0;}
#ngaia-splash .lantern .glow{position:absolute;left:50%;top:46%;width:90px;height:90px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, rgba(255,236,170,.95) 0%, rgba(232,181,71,.55) 38%, transparent 70%);
  opacity:.5;}

#ngaia-splash .toon-pip{left:9%;bottom:18%;width:118px;height:118px;
  transform:translate(-220px,30px) rotate(-30deg);transform-origin:50% 60%;}

#ngaia-splash .caption{position:absolute;left:50%;bottom:45%;z-index:5;transform:translateX(-50%) scale(.6);
  transform-origin:50% 120%;opacity:0;max-width:300px;width:84%;text-align:center;
  background:linear-gradient(180deg,#FFFDF6,var(--cream));
  color:var(--bark);font-family:'Nunito';font-weight:600;font-style:italic;
  font-size:17px;line-height:1.4;padding:14px 18px;border-radius:20px;
  border:2px solid rgba(232,181,71,.55);
  box-shadow:0 10px 24px rgba(74,55,40,.22), 0 0 0 1px rgba(245,222,179,.6) inset, 0 0 26px rgba(232,181,71,.22);}
#ngaia-splash .caption b{color:var(--bracken);font-style:normal;}
#ngaia-splash .caption::after{content:'';position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  width:0;height:0;border:8px solid transparent;border-top-color:var(--cream);}

/* ===================== TITLE BLOCK (beat 4) ===================== */
#ngaia-splash .titlewrap{position:absolute;left:0;right:0;top:13%;z-index:6;text-align:center;
  padding:0 18px;pointer-events:none;}
#ngaia-splash .title{font-family:'Quicksand';font-weight:700;line-height:1.02;letter-spacing:.5px;}
#ngaia-splash .title .word{display:inline-block;opacity:0;transform:translateY(22px) scale(.8);}
#ngaia-splash .title .w1{display:block;font-size:30px;color:var(--cream);
  text-shadow:0 2px 0 rgba(74,55,40,.35),0 0 22px rgba(232,181,71,.55);}
#ngaia-splash .title .w2{display:block;font-size:56px;color:var(--honey);
  text-shadow:0 2px 0 rgba(74,55,40,.4),0 0 18px rgba(232,181,71,.7),0 0 40px rgba(232,181,71,.4);}
#ngaia-splash .title-underline{display:block;width:228px;height:34px;margin:6px auto 0;overflow:visible;}
#ngaia-splash .title-underline path{fill:none;stroke:var(--moss);stroke-width:4;stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(107,142,90,.55));
  stroke-dasharray:340;stroke-dashoffset:340;}
#ngaia-splash .title-underline .leaf{fill:var(--moss);opacity:0;
  filter:drop-shadow(0 0 6px rgba(107,142,90,.5));}

/* ===================== TAP TO START (beat 5) ===================== */
#ngaia-splash .tap{position:absolute;left:0;right:0;bottom:7%;z-index:7;text-align:center;
  opacity:0;pointer-events:none;padding:0 20px;}
#ngaia-splash .tap .cta{display:inline-block;min-height:80px;min-width:240px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:20px 38px;font-family:'Quicksand';font-weight:700;font-size:24px;
  color:var(--cream);letter-spacing:.5px;
  background:linear-gradient(160deg,#F4C56A,#E8B547 55%,#C97B4A);
  border-radius:26px;
  box-shadow:0 12px 28px rgba(74,55,40,.28), 0 0 0 1px rgba(245,222,179,.5) inset,
             0 0 30px rgba(232,181,71,.45);}
#ngaia-splash .tap .cta .leaf-ico{font-size:22px;filter:drop-shadow(0 0 6px rgba(255,243,200,.8));}
#ngaia-splash .tap .sub{margin-top:12px;font-size:15px;color:#5C4322;font-weight:600;font-style:italic;}

/* ===================== SKIP BUTTON ===================== */
#ngaia-splash .skip{position:absolute;top:14px;right:14px;z-index:20;min-width:64px;min-height:44px;
  display:none;align-items:center;justify-content:center;gap:6px;padding:9px 16px;
  background:rgba(74,55,40,.55);border:2px solid rgba(245,222,179,.35);border-radius:14px;
  cursor:pointer;color:var(--cream);font-family:'Quicksand';font-weight:700;
  font-size:13px;letter-spacing:.4px;backdrop-filter:blur(4px);
  box-shadow:0 4px 12px rgba(0,0,0,.2);transition:transform .12s,background .15s,opacity .15s;}
#ngaia-splash .skip:hover{background:rgba(74,55,40,.75);}
#ngaia-splash .skip:active{transform:scale(.95);}
#ngaia-splash .skip .ar{font-size:13px;}
#ngaia-splash[data-beat="1"] .skip,
#ngaia-splash[data-beat="2"] .skip,
#ngaia-splash[data-beat="3"] .skip,
#ngaia-splash[data-beat="4"] .skip{display:inline-flex;}

/* ============================================================================
   ANIMATION LAYER -- wrapped in no-preference so reduced-motion shows static
   ============================================================================ */
@media (prefers-reduced-motion: no-preference){

  #ngaia-splash[data-beat] .hollow{animation:spHollowRise 1.6s var(--soft) forwards;}
  @keyframes spHollowRise{from{transform:translateX(-50%) translateY(40px);opacity:0;}
    to{transform:translateX(-50%) translateY(0);opacity:1;}}

  #ngaia-splash[data-beat] .lantern-pool{animation:spPoolBreath 4.6s ease-in-out .6s infinite;}
  @keyframes spPoolBreath{0%,100%{opacity:.5;}50%{opacity:.95;}}
  #ngaia-splash[data-beat="3"] .lantern-pool,
  #ngaia-splash[data-beat="4"] .lantern-pool,
  #ngaia-splash[data-beat="5"] .lantern-pool{animation:spPoolBreathWarm 4.6s ease-in-out infinite;}
  @keyframes spPoolBreathWarm{0%,100%{opacity:.85;}50%{opacity:1;}}

  #ngaia-splash .mote.in{animation:spMoteDrift var(--dur,26s) ease-in-out infinite;}
  @keyframes spMoteDrift{0%{transform:translateY(10px);opacity:0;}
    30%{opacity:.7;}70%{opacity:.5;}100%{transform:translateY(-60px);opacity:0;}}

  #ngaia-splash .fly.lit{animation:spFlyWander var(--dur,7s) ease-in-out var(--delay,0s) infinite;}
  @keyframes spFlyWander{
    0%{transform:translate(0,0) scale(.6);opacity:0;}
    20%{opacity:1;}
    50%{transform:translate(var(--dx,16px),var(--dy,-22px)) scale(1);opacity:.9;}
    80%{opacity:.8;}
    100%{transform:translate(calc(var(--dx,16px)*-.4),-44px) scale(.7);opacity:0;}}

  /* BEAT 1 -- Master Hazel soft spring rise + lantern lift */
  #ngaia-splash .toon-hazel.is-in{animation:spHazelRise .9s var(--spring) forwards;}
  @keyframes spHazelRise{0%{transform:translateY(70px) scale(.92);opacity:0;}
    60%{opacity:1;}100%{transform:translateY(0) scale(1);opacity:1;}}
  #ngaia-splash .toon-hazel.is-in .lantern{animation:spLanternLift .7s var(--spring) .45s forwards;}
  @keyframes spLanternLift{0%{opacity:0;transform:translateY(10px) rotate(-6deg);}
    60%{transform:translateY(-4px) rotate(4deg);}100%{opacity:1;transform:translateY(0) rotate(0);}}
  #ngaia-splash .toon-hazel.settled img{animation:spHazelSway 3.4s ease-in-out infinite;}
  @keyframes spHazelSway{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-4px) rotate(1deg);}}

  /* BEAT 2 -- Pip scampers in + tiny somersault, settles upright */
  #ngaia-splash .toon-pip.is-in{animation:spPipScamper 1.1s var(--spring) forwards;}
  @keyframes spPipScamper{
    0%{transform:translate(-220px,30px) rotate(-30deg);opacity:0;}
    35%{opacity:1;}
    62%{transform:translate(6px,-10px) rotate(200deg);}
    100%{transform:translate(0,0) rotate(360deg);opacity:1;}}
  #ngaia-splash .toon-pip.settled img{animation:spPipBob 2.8s ease-in-out infinite;}
  @keyframes spPipBob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-5px) rotate(2deg);}}
  #ngaia-splash .caption.is-in{animation:spCaptionPop .6s var(--spring) .5s forwards;}
  @keyframes spCaptionPop{0%{transform:translateX(-50%) scale(.6);opacity:0;}
    65%{transform:translateX(-50%) scale(1.05);opacity:1;}100%{transform:translateX(-50%) scale(1);opacity:1;}}

  /* BEAT 3 -- lantern flame warms (glow swells) */
  #ngaia-splash .lantern .glow.warm{animation:spFlameWarm 1.4s ease-out forwards;}
  @keyframes spFlameWarm{from{opacity:.5;transform:translate(-50%,-50%) scale(1);}
    to{opacity:1;transform:translate(-50%,-50%) scale(1.5);}}

  /* BEAT 4 -- title reveal, gentle staggered rise */
  #ngaia-splash .title.is-in .word{animation:spWordRise .6s var(--spring) forwards;}
  #ngaia-splash .title.is-in .w1{animation-delay:0s;} #ngaia-splash .title.is-in .w2{animation-delay:.12s;}
  @keyframes spWordRise{0%{transform:translateY(22px) scale(.8);opacity:0;}
    70%{transform:translateY(-3px) scale(1.03);opacity:1;}100%{transform:translateY(0) scale(1);opacity:1;}}
  #ngaia-splash .title.is-in .title-underline path{animation:spVineDraw .9s ease .35s forwards;}
  @keyframes spVineDraw{to{stroke-dashoffset:0;}}
  #ngaia-splash .title.is-in .title-underline .leaf{animation:spLeafPop .4s var(--spring) forwards;}
  #ngaia-splash .title.is-in .title-underline .lf1{animation-delay:.7s;}
  #ngaia-splash .title.is-in .title-underline .lf2{animation-delay:.9s;}
  #ngaia-splash .title.is-in .title-underline .lf3{animation-delay:1.05s;}
  @keyframes spLeafPop{from{opacity:0;transform:scale(0);}to{opacity:.95;transform:scale(1);}}

  /* BEAT 5 -- tap to start, gentle warm pulse */
  #ngaia-splash .tap.is-in{animation:spTapFade .5s ease forwards;}
  @keyframes spTapFade{from{opacity:0;}to{opacity:1;}}
  #ngaia-splash .tap.is-in .cta{animation:spTapPulse 1.8s ease-in-out infinite;}
  @keyframes spTapPulse{0%,100%{transform:scale(.99);box-shadow:0 12px 28px rgba(74,55,40,.28),0 0 0 1px rgba(245,222,179,.5) inset,0 0 24px rgba(232,181,71,.4);}
    50%{transform:scale(1.03);box-shadow:0 16px 34px rgba(74,55,40,.3),0 0 0 1px rgba(245,222,179,.6) inset,0 0 40px rgba(232,181,71,.65);}}
}

/* ============================================================================
   REDUCED MOTION -- static composition: hollow, both characters, lantern lit,
   title + tap all visible, no animation.
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  #ngaia-splash .hollow{transform:translateX(-50%);opacity:1;}
  #ngaia-splash .lantern-pool{opacity:.9;}
  #ngaia-splash .mote{display:none;}
  #ngaia-splash .fly{display:none;}
  #ngaia-splash .toon{opacity:1!important;transform:none!important;}
  #ngaia-splash .toon-hazel .lantern{opacity:1;transform:none;}
  #ngaia-splash .lantern .glow{opacity:1;transform:translate(-50%,-50%) scale(1.4);}
  #ngaia-splash .caption{opacity:1;transform:translateX(-50%);}
  #ngaia-splash .title .word{opacity:1;transform:none;}
  #ngaia-splash .title-underline path{stroke-dashoffset:0;}
  #ngaia-splash .title-underline .leaf{opacity:.95;transform:none;}
  #ngaia-splash .tap{opacity:1;}
  #ngaia-splash .skip{display:inline-flex!important;}
}

/* small-phone safety */
@media (max-width:360px){
  #ngaia-splash .title .w2{font-size:48px;} #ngaia-splash .title .w1{font-size:26px;}
  #ngaia-splash .toon-hazel{width:128px;height:128px;} #ngaia-splash .toon-pip{width:104px;height:104px;}
  #ngaia-splash .caption{font-size:15.5px;}
}