/* golden v1.4 updated - sleep mode transition hiding ui */

/* ===================================================================
  state.css (golden v1.4) — STATE OVERRIDES (no reorder)
  Jump tags:
  [S01] Micro-interactions (wobble, pressed)
  [S02] Confetti adjustment 
  [S03] Cooldown badge states
  [S04] Egg states (idle/loading/linger/cracked)
  [S05] Fact states (show/swap + theme tints)
  [S06] Sleep mode chrome fade (html.sleep-mode …)
  [S07] Record mode (html.record-mode / .record-mode …)
  [S08] Sleep overlay (eggEmptyOverlay: sleep-in/settled/vanished/hidden)
  [S90] Utilities + debug*/

  /* THEME MAP (data-theme values)
   - biochem, mind, animals, cosmos, words, all
   - special: koop, prism
   If you add/rename categories: update tokens + these selectors.

    Naming:
  - data-cat   = category chips (filters UI)
  - data-theme = egg/fact theme styling
=================================================================== */


@layer state{


  /* [S01] Micro-interactions ================================================= */


    /* Add this class briefly to play the wobble once */
  .egg-wrap.wobble {
    animation: tiltWobble 1100ms ease-out both;
  }

  /* [S02] confetti adjustment? ==================================================== */

  /* [S02] Chips / Filters — dim non-selected chips when a category is active */
.filters:has(.chip[aria-pressed="true"]:not([data-cat="all"])) .chip{
  opacity: 0.65;
  transition: opacity 0.25s ease;
}

/* keep the selected chip fully visible */
.filters:has(.chip[aria-pressed="true"]:not([data-cat="all"]))
  .chip[aria-pressed="true"]{
  opacity: 1;
}

/* don’t punish exploration */
.chip:hover,
.chip:focus-visible{
  opacity: 1;
}


  /* When the bubble is shown */
  :root[style*="--enable-confetti:0"] #confettiLayer {
    display: none !important;
  }
  
  
  /* When a subcategory is selected, calm the (single) active category chip */
  html.is-premium #incubatorRoot.sub-focused #filters .chip[data-cat][aria-pressed="true"]{
    opacity: 0.76 !important;
    filter: saturate(0.92) brightness(0.98);
    box-shadow: 0 0 8px rgba(255,255,255,0.06) !important;
  }


  /* [S05] Fact bubble states ================================================= */
/* [S05a] Show / swap ======================================================= */
    /* When a fact is revealed, fade and scale it into view */
    .fact.show{
    opacity: 1; 
    pointer-events: auto;
    transform: 
      translate3d(-50%, -50%, 0) 
      rotate(calc(var(--tilt) * -1)) 
      scale(1);

    /*transform: translate3d(-50%, -50%, 0) scale(1);*/

    /*added transition line below from golden 1.2*/
    transition: transform .28s ease, opacity .28s ease, box-shadow .3s;
    color: var(--ink-dark);

    /* your warm parchment feel */
    background: rgba(255, 247, 209, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.22),
      0 0 18px rgba(255, 235, 150, 0.45);

    /* nice touch */
    backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    padding: .9rem 2.6rem 1rem 1rem; 
    position: absolute;/* Was .65rem .9rem*/
    }

      /* Fact: shown + perfectly level (counter-rotates by whatever --tilt is)   rotate(calc(var(--tilt) * -1)) */

    /* Dim the hint when the egg is active */
  .egg-wrap.cracked ~ .hint {
    opacity: 0.3;
    filter: blur(0.5px);
    transition: opacity 0.5s ease, filter 0.5s ease;
  }

  /* [S03] Modebar + segmented buttons + status light ======================================= */
  /* (Declared here to preserve cascade order — see header map) */

 /*Segmented button: pressed mode active*/
    .segbtn[aria-pressed="true"] {
    background: radial-gradient(120% 120% at 50% 0%, rgba(255,214,102,0.35) 0%, rgba(255,214,102,0.18) 55%, rgba(255,255,255,0.10) 100%);
    border-color: rgba(255,214,102,0.55);
    box-shadow: 0 0 12px rgba(255,214,102,0.28);
    }

  /* Focus button cooling: subdued / resting state (dot handles urgency) */
  .segbtn.cooling {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;

    color: rgba(255, 255, 255, 0.65);
    cursor: not-allowed;
  }

    /* Orange dot while cooling */
    .cooldown-badge.cooling::after {
    background: #ff7a00;
    box-shadow: 0 0 6px #ff7a00aa;
    animation: none;
    }

    /* Daily-done must beat cooling visuals */
    #cooldown-badge.daily-done::after {
    background: rgba(147,197,253,.95) !important;
    box-shadow: 0 0 6px rgba(147,197,253,.40) !important;
    animation: none !important;
    }

    /* If both classes exist (daily-done + cooling), still force blue */
    #cooldown-badge.daily-done.cooling::after {
    background: rgba(147,197,253,.95) !important;
    box-shadow: 0 0 6px rgba(147,197,253,.40) !important;
    animation: none !important;
    }

    /* And make the Focus button stop looking "cooling" when daily-done */
    #mode-learning.daily-done.cooling {
    background: rgba(147,197,253,.18) !important;
    border-color: rgba(147,197,253,.45) !important;
    box-shadow: 0 0 0 2px rgba(147,197,253,.18) !important;
    color: rgba(147,197,253,.95) !important;
    }

    /* then your existing daily-done rules can stay */
    #cooldown-badge.daily-done{
    background: rgba(147,197,253,.18);
    border-color: rgba(147,197,253,.45);
    box-shadow: 0 0 0 2px rgba(147,197,253,.20), 0 0 14px rgba(147,197,253,.18);
    color: rgba(147,197,253,.95);
    }
    #mode-learning.daily-done{
    border-color: rgba(147,197,253,.45);
    box-shadow: 0 0 0 2px rgba(147,197,253,.18);
    }


    /* [S04] Egg + ring states (idle/loading/linger/cracked) ==================== */

   
/* [S04.1] Idle states ------------------------------------------------------ */

    
    /* Egg idle states (toggled by JS) */
    .egg.idle{ animation: idleGlow 3.5s ease-in-out infinite; }
    .egg.fullIdle::after{ opacity: .35; animation: idleShine 5s linear infinite; }


  /* [S04.2] Ring states ------------------------------------------------------ */
    
  .egg-wrap.linger .ring{
    opacity: .45;               /* soft afterglow */
    animation: none;
    scale: 1.3;
    box-shadow: 0 0 22px 10px color-mix(in oklab, currentColor 55%, transparent);
  }
  .egg-wrap.loading .ring{
    opacity: .65;
    animation: ringPulse 900ms cubic-bezier(.2,.6,.2,1) 1;
    transition: none !important;
  }

  .egg-wrap.loading.loading-prism .ring{
    color: #d99dff;
    animation: prismLoadAura 1.15s ease-in-out infinite;
    opacity: .56;
    scale: 1.06;
    box-shadow: 0 0 18px 7px color-mix(in oklab, currentColor 36%, transparent);
  }

  /* [S04.3] Egg loading / cracked vars -------------------------------------- */

  /* Egg states */
  /*.egg-wrap.cracked .egg{ transform: rotate(6deg) scale(.96); }*/
  .egg-wrap.loading .egg{ filter: saturate(1.05) brightness(1.05); }
  .egg-wrap.loading .egg::after{ opacity: .7; animation: shine 1s linear infinite; }
  .egg-wrap.loading.loading-prism .egg{
    filter: saturate(1.12) brightness(1.08);
  }
  .egg-wrap.loading.loading-prism .egg::after{
    opacity: .92;
    background: linear-gradient(
      115deg,
      transparent 26%,
      rgba(255,214,102,.42) 44%,
      rgba(165,180,252,.40) 52%,
      rgba(52,211,153,.34) 60%,
      transparent 74%
    );
    background-size: 230% 230%;
    animation: shine 760ms linear infinite;
  }

  /*Fact theme tints in factbox*/
  .egg-wrap.cracked { --tilt: 6deg; --scale: .96; }


  /* [S05] Fact bubble states ================================================ */

/* [S05.1] Show / swap / positioning --------------------------------------- */


  /* Fact: shown + perfectly level (counter-rotates by whatever --tilt is)   rotate(calc(var(--tilt) * -1)) */
  .fact.show {
    opacity: 1;
    pointer-events: auto;
    transform: 
      translate3d(-50%, -50%, 0) 
      rotate(calc(var(--tilt) * -1)) 
      scale(1);
    transition: transform .28s ease, opacity .28s ease, box-shadow .3s;
    /*transition: transform .28s ease, opacity .28s ease, box-shadow .3s, background .3s, padding .2s;*/
    /* keep your existing padding/background/shadow/color here */
    }
  
  /*.fact.show {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
    pointer-events: auto;

    /*debugging, commenting out the added transofrm for now, replacing with old*/
    
    /*
    transform: translate3d(-50%, -50%, 0) rotate(calc(var(--tilt) * -1)) scale(1);*/
    /*transition: transform .28s ease, opacity .28s ease, box-shadow .3s;
    /*transition: transform .28s ease, opacity .28s ease, box-shadow .3s, background .3s, padding .2s;*/
    /* keep your existing padding/background/shadow/color here */
   /* }*/

        /* Swap-out class for smoother change between facts */
  .fact.swap {
    opacity: 0;
    transform: translate3d(-50%, -49%, 0) rotate(calc(var(--tilt) * -1)) scale(.96);
    }

/* [S05.2] THEME-DEPENDENT: fact backgrounds ------------------------------- */

    /* Theme tints with transparency (keeps the vibe but lets background show through) */
  .fact.show[data-theme="biochem"] { background: rgba(233, 255, 242, 0.82); }
  .fact.show[data-theme="mind"]    { background: rgba(245, 236, 255, 0.82); }
  .fact.show[data-theme="animals"] { background: rgba(243, 255, 230, 0.82); }
  .fact.show[data-theme="cosmos"]   { background: rgba(238, 241, 255, 0.82); }
  .fact.show[data-theme="words"]   { background: rgba(255, 249, 229, 0.82); }
  .fact.show[data-theme="all"]     { background: rgba(255, 247, 209, 0.85); }
  .fact.show[data-theme="koop"]    { background: rgba(255, 233, 140, 0.88); }
  .fact.show[data-theme="prism"] {background: rgba(255, 255, 255, 0.88); box-shadow: 
    0 8px 24px rgba(0,0,0,0.22), 0 0 22px rgba(255, 214, 102, 0.40),
     inset 0 0 0 1px rgba(255, 255, 255, .35); }

     /* fact bubble extra glow when cracked*/

     /* [S05.3] THEME-DEPENDENT: cracked glows ---------------------------------- */
  /* Fact bubble themes */
  .egg-wrap.cracked .fact[data-theme="biochem"] {
    box-shadow: 0 0 var(--fact-glow-blur-final) var(--fact-glow-spread-final) rgba(96,211,148,var(--glow-alpha-fact-final)), 0 4px 10px rgba(0,0,0,.12);
  }
  .egg-wrap.cracked .fact[data-theme="mind"] {
    box-shadow: 0 0 var(--fact-glow-blur-final) var(--fact-glow-spread-final) rgba(192,132,252,var(--glow-alpha-fact-final)), 0 4px 10px rgba(0,0,0,.12);
  }
  .egg-wrap.cracked .fact[data-theme="animals"] {
    box-shadow: 0 0 var(--fact-glow-blur-final) var(--fact-glow-spread-final) rgba(52,211,153,var(--glow-alpha-fact-final)), 0 4px 10px rgba(0,0,0,.12);
  }
  .egg-wrap.cracked .fact[data-theme="cosmos"] {
    box-shadow: 0 0 var(--fact-glow-blur-final) var(--fact-glow-spread-final) rgba(165,180,252,var(--glow-alpha-fact-final)), 0 4px 10px rgba(0,0,0,.12);
  }
  .egg-wrap.cracked .fact[data-theme="words"] {
    box-shadow: 0 0 var(--fact-glow-blur-final) var(--fact-glow-spread-final) rgba(255,209,102,var(--glow-alpha-fact-final)), 0 4px 10px rgba(0,0,0,.12);
  }
  .egg-wrap.cracked .fact[data-theme="all"] {
    box-shadow: 0 0 var(--fact-glow-blur-final) var(--fact-glow-spread-final) rgba(255,235,150,var(--glow-alpha-fact-final)), 0 4px 10px rgba(0,0,0,.12);
  }
  .egg-wrap.cracked .fact[data-theme="koop"]    { box-shadow: 0 0 30px #ffd70088, 0 0 70px #facc1580; }
  .egg-wrap.cracked .fact[data-theme="prism"]   { box-shadow: 0 0 28px rgba(255,214,102,.45), 0 0 60px rgba(165,180,252,.35), 0 0 90px rgba(52,211,153,.30);}
  
  /* [S05.4] THEME-DEPENDENT: shared egg↔fact glow links --------------------- */
  
  /* Gentle shared glow link */
  .egg-wrap.cracked .egg[data-theme="cosmos"],
  .egg-wrap.cracked .fact[data-theme="cosmos"] {
    box-shadow:
      0 0 var(--egg-glow-near-blur-final) var(--egg-glow-spread-near-final) rgba(165,180,252,var(--glow-alpha-near-final)),
      0 0 var(--egg-glow-far-blur-final) var(--egg-glow-spread-far-final) rgba(165,180,252,var(--glow-alpha-far-final));
  }
  /* Gentle shared glow link for Mind & Brain */
  .egg-wrap.cracked .egg[data-theme="mind"],
  .egg-wrap.cracked .fact[data-theme="mind"]{
    box-shadow:
      0 0 var(--egg-glow-near-blur-final) var(--egg-glow-spread-near-final) rgba(192,132,252,var(--glow-alpha-near-final)),
      0 0 var(--egg-glow-far-blur-final) var(--egg-glow-spread-far-final) rgba(192,132,252,var(--glow-alpha-far-final));
  }
  .egg-wrap.cracked .egg[data-theme="biochem"],
  .egg-wrap.cracked .fact[data-theme="biochem"] {
    box-shadow:
      0 0 var(--egg-glow-near-blur-final) var(--egg-glow-spread-near-final) rgba(96,211,148,var(--glow-alpha-near-final)),
      0 0 var(--egg-glow-far-blur-final) var(--egg-glow-spread-far-final) rgba(96,211,148,var(--glow-alpha-far-final));
  }
  /* Gentle shared glow link for Animals & Nature */
  .egg-wrap.cracked .egg[data-theme="animals"],
  .egg-wrap.cracked .fact[data-theme="animals"] {
    box-shadow:
      0 0 var(--egg-glow-near-blur-final) var(--egg-glow-spread-near-final) rgba(52,211,153,var(--glow-alpha-near-final)),
      0 0 var(--egg-glow-far-blur-final) var(--egg-glow-spread-far-final) rgba(190,242,100,var(--glow-alpha-far-final)),
      0 0 var(--egg-glow-outer-blur-final) var(--egg-glow-spread-outer-final) rgba(250,204,21,var(--glow-alpha-outer-final));
  }
  .egg-wrap.cracked .egg[data-theme="words"],
  .egg-wrap.cracked .fact[data-theme="words"] {
    box-shadow:
      0 0 var(--egg-glow-near-blur-final) var(--egg-glow-spread-near-final) rgba(255,209,102,var(--glow-alpha-near-final)),
      0 0 var(--egg-glow-far-blur-final) var(--egg-glow-spread-far-final) rgba(255,209,102,var(--glow-alpha-far-final));
  }

    /* [S90] Debug / layout tests ---------------------------------------------- */
    /*RUNNING TESTS TO FIX WEIRD CENTREING*/
  #egg .fact.show{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    /*transform: translate(-50%, -50%) rotate(calc(var(--tilt,0deg)*-1)) scale(1) !important;*/
  }

  /* Keep the base fact (and swap/fade states) anchored too */
  #egg .fact,
  #egg .fact.swap {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform-origin: 50% 50%;
  }

/* Optional: tweak fade-out slightly so it scales/fades but doesn't move */
#egg .fact.swap {
  transform: translate(-50%, -50%) rotate(calc(var(--tilt, 0deg) * -1)) scale(.96);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}

  /*[S06] Sleep mode chrome fade (html.sleep-mode …)*/

/* [S06.1] Hide major chrome (filters/HUD/hint/footer) ---------------------- */
  html.sleep-mode .filters,
  html.sleep-mode .subfilters,
  html.sleep-mode .egg-hud,
  html.sleep-mode .hint,
  html.sleep-mode footer.site-footer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease;
  }

/* [S06.2] Neutralize modebar container ------------------------------------- */
    html.sleep-mode .modebar {
      background: transparent !important;
      border-color: transparent !important;
      backdrop-filter: none !important;
      box-shadow: none !important;
    }

    /* [S06.3] Hide modebar contents (except keep allowed buttons) -------------- */

    html.sleep-mode .modebar .mode-label,
    html.sleep-mode .modebar #mode-free,
    html.sleep-mode .modebar #mode-learning,
    html.sleep-mode .modebar #cooldown-badge,
    html.sleep-mode .modebar #muteBtn {
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .filters,
    .egg-hud,
    .hint,
    footer.site-footer,
    .modebar .mode-label,
    .modebar button,
    #infoBtn {
      transition: opacity 420ms ease, transform 420ms ease;
    }

    /* [S06.5] Exceptions: nest + info remain usable ---------------------------- */

    html.sleep-mode #nestBtn,
    html.sleep-mode #skyTopBtn {
      opacity: 0.86;
      pointer-events: auto;
    }

    html.sleep-mode #nestBtn{
      transform: none !important;
    }

    html.sleep-mode #skyTopBtn:not(.is-glow):not(.is-glow-long){
      transform: none !important;
    }

    html.sleep-mode #infoBtn{
      opacity: 0.28;          /* subtle */
      pointer-events: auto;   /* still usable */
      transition: opacity 420ms ease, transform 420ms ease;
    }

    html.sleep-mode #infoBtn:hover,
    html.sleep-mode #infoBtn:focus-visible{
      opacity: 0.65;          /* becomes obvious when needed */
    }

    html.sleep-mode #settingsBtn{
      opacity: 0.34;
      pointer-events: auto;
    }

    html.sleep-mode #settingsBtn:hover,
    html.sleep-mode #settingsBtn:focus-visible{
      opacity: 0.68;
    }

/* [S06.6] Sleep-specific egg + countdown styling --------------------------- */

    html.sleep-mode .egg{
      opacity: 0.72;
      transition: opacity 420ms ease;
    }

    html.sleep-mode #hatchCountdown{
      font-variant-numeric: tabular-nums;
      color: rgba(236, 208, 130, 0.85); /* soft warm gold */
      letter-spacing: 0.3px;
      opacity: 0.95;
    }

    /* [S07] Record mode (html.record-mode / .record-mode …) ==================== */

/* [S07.1] Hide chrome (filters/chips/modebar) ------------------------------ */
  
  .record-mode .filters
  .record-mode #filters,
  .record-mode [role="group"][aria-label="Choose fact category"],
  .record-mode [aria-label="Choose fact category"],
  .record-mode .chip,
  .record-mode button.chip,
  .record-mode [class*="chip"],
  .record-mode .modebar,
  .record-mode #hud-today,
  .record-mode #hud-left 
   {
    display: none !important;
    
  }

  /* [S07.2] Keep HUD visible ------------------------------------------------- */

    html.record-mode #hud-today,
    html.record-mode #hud-left,
    html.record-mode #hud-streak,
    html.record-mode #hud-rare,
    html.record-mode #InfoBtn {
    display: none !important;
    }

    /* keep the HUD visible */
    html.record-mode .egg-hud {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    }

    /* [S07.3] Remove focus outline -------------------------------------------- */

    html.record-mode #egg:focus {
    outline: none !important;
    box-shadow: none !important;
    }

    /* [S07.4] Layout constraints (padding + max-width) ------------------------- */

    .record-mode .hint { display: none !important;}

    .record-mode body {
        padding: 8vh 8vw !important;
        box-sizing: border-box;
    }

    .record-mode .fact,
    .record-mode  #factBox {
        max-width: min(79vw,520px);
        margin: 1rem auto 0 auto;
        word-break: keep-all;
    }

    /* [S07.5] Hide WP header/footer containers -------------------------------- */

    html.record-mode #masthead,
    html.record-mode header.site-header,
    html.record-mode #colophon,
    html.record-mode footer.site-footer {
    display: none !important;
    }

    /* [S07.6] Remove site padding/background wrappers -------------------------- */

    /*keep the page containers visible, just removing extra padding/backgrounds*/

    html.record-mode .site-content,
    html.record-mode #content,
    html.record-mode .entry-content {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* [S07.7] Force incubator full height ------------------------------------- */

    html.record-mode #incubatorRoot {
        min-height: 100svh !important;
        height: auto !important;
        display: block !important;
        background: transparent !important;
    }

    /* Always hide elements marked hidden (used by the sleeping overlay + coopfucius) added 11/01, and below */
    .hidden { 
        display: none !important; 
    }

    /* [S08] Sleep visuals (egg-sleeping) + daily reset overlay ================= */

/* [S08.1] Text styles (overlay typography) --------------------------------- */

    .egg-empty-title{
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    .egg-empty-subtitle{
      margin-top: 6px;
      font-size: 12px;
      font-weight: 400;
      opacity: 0.74;
    }

    /* [S08.2] Egg sleeping halo (moonBreath) ----------------------------------- */
    .egg-wrap.egg-sleeping{
      --sleep1: rgba(147,197,253,.22);
      --sleep2: rgba(165,180,252,.12);
    }

    .egg-wrap.egg-sleeping .egg{
      opacity: 0.55;
      filter: grayscale(0.20) brightness(0.88) saturate(0.85);
      transition: opacity 400ms ease, filter 400ms ease;
      position: relative;
      z-index: 1;
    }

    .egg-wrap.egg-sleeping .egg::before{
      content:"";
      position:absolute;
      left: -42px;
      right: -42px;
      top: -28px;
      bottom: -28px;
      border-radius: 999px;
      pointer-events:none;

      background: radial-gradient(circle,
        rgba(255,255,255,0.20) 0%,
        rgba(226,232,240,0.16) 26%,
        rgba(165,180,252,0.11) 50%,
        rgba(226,232,240,0.06) 64%,
        rgba(255,255,255,0) 78%
      );

      filter: blur(2px);
      animation: moonBreath 7.8s ease-in-out infinite;
      z-index: 0;
      opacity: 1;
    }

    @keyframes moonBreath{
      0%,100%{ transform: scale(0.985); opacity:0.28; }
      50%    { transform: scale(1.04);  opacity:0.60; }
    }

/* [S08.3] Sleep transition on last fact ----------------------------------- */
    .egg-wrap.egg-sleeping .fact.show{
      opacity: 0.35;
      filter: blur(0.2px);
      transition: opacity 600ms ease, filter 600ms ease;
    }

    /* IMPORTANT:
      Your global .hidden uses display:none which cannot animate.
      So we override it specifically for the sleep overlay.
    */

/* [S08.4] Overlay shimmer (one time completion) -------------------------------- */

    .egg-empty-overlay.shimmer::before{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius: inherit;
      background: linear-gradient(120deg,
        transparent 35%,
        rgba(255,214,102,0.55) 50%,
        transparent 65%
      );
      transform: translateX(-60%);
      filter: blur(2px);
      opacity: 0;
      animation: sleepShimmer 1100ms ease-out 1;
      pointer-events:none;
    }


    @keyframes sleepShimmer{
      0%   { opacity: 0; transform: translateX(-60%); }
      25%  { opacity: .55; }
      100% { opacity: 0; transform: translateX(60%); }
    }

/* [S08.5] Overlay states: base / sleep-in / settled / vanished / hidden ---- */
/*        ORDER MATTERS: sleep-vanished must come after sleep-in             */

/* [S08.5a] Settled visual style ------------------------------------------ */

    .egg-empty-overlay.settled{
      opacity: 0.62;
      /* glassy: brighter center, softer edges */
      background:
        radial-gradient(
          140% 160% at 50% 50%,
          rgba(255,255,255,0.12) 0%,
          rgba(255,255,255,0.06) 38%,
          rgba(0,0,0,0.10) 72%,
          rgba(0,0,0,0.14) 100%
        );

      border-color: rgba(255,255,255,0.12);
      box-shadow: 0 10px 24px rgba(0,0,0,0.16);

      backdrop-filter: blur(8px) saturate(115%);
      -webkit-backdrop-filter: blur(8px) saturate(115%);

      transform: translate(-50%, -50%) scale(0.985);
    }

    /* fade text a little more when settled */
    .egg-empty-overlay.settled .egg-empty-title{ opacity: 0.60; }
    .egg-empty-overlay.settled .egg-empty-subtitle{ opacity: 0.48; }


/* [S08.5b] Base overlay (hidden-but-measurable) --------------------------- */
    #eggEmptyOverlay,
    .egg-empty-overlay{
      position: absolute;
      left: 50%;
      top: 68%;
      width: min(74vw, 300px);
      padding: 10px 14px;
      border-radius: 11px;
      text-align: center;
      pointer-events: none;
      z-index: 10;

      /* base look (stronger, before settling) */
      background-color: rgba(0,0,0,0.24);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 10px 22px rgba(0,0,0,0.26);
      backdrop-filter: blur(8px) saturate(115%);
      -webkit-backdrop-filter: blur(8px) saturate(115%);
      color: rgba(255,255,255,0.92);

      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, -48%);
      filter: blur(2px);

      transition:
        opacity 800ms ease,
        transform 800ms ease,
        filter 800ms ease,
        background-color 900ms ease,
        border-color 900ms ease,
        box-shadow 900ms ease,
        backdrop-filter 900ms ease,
        -webkit-backdrop-filter 900ms ease,
        visibility 0s linear 800ms;

      will-change: opacity, transform, filter, background-color, backdrop-filter;
    }

/* [S08.5c] Visible state (sleep-in) -------------------------------------- */
    /* visible (JS adds .sleep-in) */
    #eggEmptyOverlay.sleep-in,
    .egg-empty-overlay.sleep-in{
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%);
      filter: blur(0);
      transition:
        opacity 800ms ease,
        transform 800ms ease,
        filter 800ms ease,
        background-color 900ms ease,
        border-color 900ms ease,
        box-shadow 900ms ease,
        backdrop-filter 900ms ease,
        -webkit-backdrop-filter 900ms ease,
        visibility 0s;
    }

/* [S08.5d] Final state (sleep-vanished) ---------------------------------- */
      /* JS adds .ssleep-vanished */
      #eggEmptyOverlay.sleep-vanished,
      .egg-empty-overlay.sleep-vanished{
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(-50%, -48%) scale(0.985) !important;
        filter: blur(2px) !important;

        transition:
          opacity 800ms ease,
          transform 800ms ease,
          filter 800ms ease,
          visibility 0s;
      }

  /* [S08.5e] Override global .hidden for this overlay ----------------------- */
    #eggEmptyOverlay.hidden,
    .egg-empty-overlay.hidden{
      display: block !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transform: translate(-50%, -48%) !important;
      filter: blur(2px) !important;
    }

}