@layer effects{


  /* 01. Sky (stars / drift / meteors) */

  /* 02. Cameos (UFO chicken, etc.) */

  /* 03. FX overlays (confetti layer, burst rays) */

    /* currently dev testing aurora under this section , knowlegg golden 1.3.A!*/

  /* 04. UI motion (toast in/out) */

  /* 05. All effects keyframes */


    /* ======================================================
     01. SKY LAYERS + STARS + METEORS
     ====================================================== */

  #sky, #sky .layer {
    position: fixed; inset: 0; pointer-events: none;
  }

  #sky { z-index: -1; }     /* Sky layers live behind everything */

  .star {                   /* star dots */
    position: absolute; width: 2px; height: 2px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.2) 60%, transparent 70%);
    opacity: var(--o, .5);
    filter: brightness(0.9);
    animation: twinkle var(--tw,6s) ease-in-out infinite;
  }

  .star:nth-child(3n) {filter: hue-rotate(15deg) saturate(1.2);}
  .star:nth-child(5n+2) {filter: hue-rotate(-20deg) saturate(1.3);}
  .star:nth-child(4n) {opacity: 0.4; transform:scale(0.8);}
  .star:nth-child(6n+1) {opacity: 0.4; transform:scale(1.3);}

  /* soft layer drift */
  .layer.l1 { animation: drift1 180s linear infinite; }
  .layer.l2 { animation: drift2 240s linear infinite; }
  .layer.l3 { animation: drift3 300s linear infinite; }

  /* Shooting star (we spawn a .meteor element briefly) */
  .meteor {
    position: absolute; width: 1.5px; height: 1.5px; background: white; border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255,255,255,.9);
    transform: translate(-50%,-50%); transform-origin: left center;
    animation: shoot 1200ms cubic-bezier(.22,1,.36,1) forwards;
  }

  .meteor::after { content: ""; position: absolute; 
    top: 50%; left: 50%; 
    height: 2px; width: 100px;
    transform-origin: left center;
    transform: rotate(var(--a, -18deg)) translateY(-50%); 
    background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0.9),
        rgba(255, 255, 255, 0)
    );
    border-radius: 2px; opacity: 0.9;
  }


  /* SLEEP MODE RAMP UP TEST 22 01 */
    /* Night / Sleep mode: make stars twinkle more */
  @media (prefers-reduced-motion: no-preference){
    html.sleep-mode{
      --twinkle-mult: 0.6; /* <1 = faster twinkle (try 0.45–0.75) */
      --sky-bright: 1.04;
      --sky-sat: 1.02;
      --star-glow: 0.06;
    }

    /* brighten the whole sky (doesn't override per-star hue filters) */
    html.sleep-mode #sky{
      filter: brightness(var(--sky-bright)) saturate(var(--sky-sat));
    }

    /* speed up twinkle + add a subtle glow */
    html.sleep-mode .star{
      animation-duration: calc(var(--tw, 6s) * var(--twinkle-mult));
      box-shadow: 0 0 3px 1px rgba(255,255,255,var(--star-glow));
    }


    #sky{
      transition:
        filter 2.5s ease-in-out;
    }

    .star{
      transition:
        animation-duration 2.5s ease-in-out,
        box-shadow 2.5s ease-in-out;
    }

  }




  /* ======================================================
    02. CAMEOS - UFO CHICKEN
    ====================================================== */

  .ufo-chicken-sprite{
    position: fixed;
    left: -20vw;
    top: 40vh;
    width: clamp(80px, 8vw, 120px);
    height: clamp(80px, 8vw, 120px);         /* square box for the sprite */
    background-image: var(--ufo);
    background-size: contain;                 /* no cropping */
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
    animation: fly 15s linear forwards;
  }

  /* ======================================================
      03. FX OVERLAYS:  confetti and coop burst 
      ====================================================== */
    
  /* === coopfucious Enlightenment Burst === */
  .burst-rays {
    position: absolute; inset: 0;
    border-radius: 50%; background: conic-gradient(
      from 0deg, rgba(255, 215, 0, 0.8) 0deg, rgba(255, 255, 255, 0.25) 20deg,
      transparent 60deg
    );
    animation: spinBurst 1.5s ease-out forwards;
    opacity: 0.85;
    z-index: 2;
    pointer-events: none;
  }

  /*CONFETTI layer*/
  #confettiLayer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: visible;
    display: var(--confetti-display, block);
  }

  :root{
    --celebration-style: stardust;
    --celebration-size-w: 2px;
    --celebration-size-h: 2px;
    --celebration-radius: 999px;
    --celebration-bg: rgba(255,255,255,0.95);
    --celebration-filter: blur(0.2px) drop-shadow(0 0 6px rgba(255,255,255,0.45));
    --celebration-drift-scale: 0.34;
    --celebration-rot-scale: 0.1;
    --celebration-count-scale: 1;
    --celebration-duration: 900ms;
    --celebration-start-opacity: 1;
    --celebration-peak-opacity: 1;
    --celebration-pop-scale: 1;
    --celebration-end-scale: 1;
    --celebration-intensity-count-mult: 1;
    --celebration-intensity-drift-mult: 1;
    --celebration-intensity-rot-mult: 1;
    --celebration-intensity-pop-mult: 1;
    --celebration-intensity-opacity-mult: 1;
    --celebration-intensity-duration-mult: 1;
  }

  html.celebration-intensity-low{
    --celebration-intensity-count-mult: 0.82;
    --celebration-intensity-drift-mult: 0.88;
    --celebration-intensity-rot-mult: 0.9;
    --celebration-intensity-pop-mult: 0.92;
    --celebration-intensity-opacity-mult: 0.86;
    --celebration-intensity-duration-mult: 0.92;
  }

  html.celebration-intensity-normal{
    --celebration-intensity-count-mult: 1;
    --celebration-intensity-drift-mult: 1;
    --celebration-intensity-rot-mult: 1;
    --celebration-intensity-pop-mult: 1;
    --celebration-intensity-opacity-mult: 1;
    --celebration-intensity-duration-mult: 1;
  }

  html.celebration-intensity-high{
    --celebration-intensity-count-mult: 1.46;
    --celebration-intensity-drift-mult: 1.36;
    --celebration-intensity-rot-mult: 1.18;
    --celebration-intensity-pop-mult: 1.24;
    --celebration-intensity-opacity-mult: 1.14;
    --celebration-intensity-duration-mult: 1.1;
  }

  html.celebration-stardust{
    --celebration-size-w: 2px;
    --celebration-size-h: 2px;
    --celebration-radius: 999px;
    --celebration-bg: rgba(255,255,255,0.95);
    --celebration-filter: blur(0.2px) drop-shadow(0 0 6px rgba(255,255,255,0.45));
    --celebration-drift-scale: 0.62;
    --celebration-rot-scale: 0.08;
    --celebration-count-scale: 1.7;
    --celebration-duration: 1300ms;
    --celebration-start-opacity: 0.05;
    --celebration-peak-opacity: 0.95;
    --celebration-pop-scale: 1.22;
    --celebration-end-scale: 0.72;
  }

  /* iOS standalone/PWA perf fallback: keep stardust look, reduce particle/GPU load */
  html.celebration-lite-ios.celebration-stardust{
    --celebration-count-scale: 1.05;
    --celebration-duration: 1020ms;
    --celebration-filter: blur(0.12px) drop-shadow(0 0 3px rgba(255,255,255,0.28));
    --celebration-drift-scale: 0.52;
    --celebration-pop-scale: 1.12;
    --celebration-end-scale: 0.8;
  }

  html.celebration-confetti{
    --celebration-size-w: 6px;
    --celebration-size-h: 8px;
    --celebration-radius: 2px;
    --celebration-bg: var(--c, #ffd166);
    --celebration-filter: none;
    --celebration-drift-scale: 0.56;
    --celebration-rot-scale: 0.42;
    --celebration-count-scale: 1;
    --celebration-duration: 900ms;
    --celebration-start-opacity: 1;
    --celebration-peak-opacity: 1;
    --celebration-pop-scale: 1;
    --celebration-end-scale: 1;
  }

  html.celebration-aurora{
    --celebration-size-w: 2px;
    --celebration-size-h: 3px;
    --celebration-radius: 999px;
    --celebration-bg: rgba(185, 232, 255, 0.9);
    --celebration-filter: blur(0.25px) drop-shadow(0 0 7px rgba(146, 214, 255, 0.5));
    --celebration-drift-scale: 0.72;
    --celebration-rot-scale: 0.12;
    --celebration-count-scale: 1.55;
    --celebration-duration: 1250ms;
    --celebration-start-opacity: 0.08;
    --celebration-peak-opacity: 0.9;
    --celebration-pop-scale: 1.16;
    --celebration-end-scale: 0.78;
  }

    /* Each confetti piece (legacy, commented out)
  .confetti {
    position: absolute;
    width: 8px; height: 12px;
    border-radius: 2px;
    background: var(--c, #ffd166);
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
    animation: confettiPop var(--celebration-duration, 900ms) ease-out forwards;
  }
  */

  /* Particle shimmer piece (reuses confettiPop) */
  .confetti {
    position: absolute;
    width: var(--celebration-size-w, 2px);
    height: var(--celebration-size-h, 2px);
    border-radius: var(--celebration-radius, 999px);
    background: var(--celebration-bg, rgba(255,255,255,0.95));
    opacity: 0;
    filter: var(--celebration-filter, blur(0.2px) drop-shadow(0 0 6px rgba(255,255,255,0.45)));
    transform: translate(0,0) scale(1);
    animation: confettiPop calc(var(--celebration-duration, 900ms) * var(--celebration-intensity-duration-mult, 1)) ease-out forwards;
  }

  /* SPECIAL FEATURE AURORA TEST */
  /* -- Aurora (dev test) ---------------------------------- */

  /* AURORA — rare event layer (atmospheric, not a panel) */
html.aurora-test #auroraLayer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: var(--aurora-opacity, 0.78);            
  mix-blend-mode: screen;
  will-change: transform, opacity;

  /* TWO-lobe mask + side fade (identical for webkit + standard) */
  -webkit-mask-image:
    radial-gradient(74% 44% at 50% 26%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.88) 42%,
      rgba(0,0,0,.25) 72%,
      rgba(0,0,0,0) 94%),
    radial-gradient(84% 58% at 50% 88%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.88) 44%,
      rgba(0,0,0,.25) 74%,
      rgba(0,0,0,0) 96%),
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.45) 10%,
      rgba(0,0,0,1) 32%,
      rgba(0,0,0,1) 68%,
      rgba(0,0,0,.45) 90%,
      rgba(0,0,0,0) 100%);

  mask-image:
    radial-gradient(74% 44% at 50% 26%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.88) 42%,
      rgba(0,0,0,.25) 72%,
      rgba(0,0,0,0) 94%),
    radial-gradient(84% 58% at 50% 88%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.88) 44%,
      rgba(0,0,0,.25) 74%,
      rgba(0,0,0,0) 96%),
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.45) 10%,
      rgba(0,0,0,1) 32%,
      rgba(0,0,0,1) 68%,
      rgba(0,0,0,.45) 90%,
      rgba(0,0,0,0) 100%);

  /* below is added to give option later of changing aurora colour by event */

  filter:
    hue-rotate(var(--aurora-hue, 0deg))
    saturate(var(--aurora-sat, 1))
    brightness(var(--aurora-bright, 1));
}


/* The moving aurora color fields */
html.aurora-test #auroraLayer::before{
  content:"";
  position:absolute;
  inset:-12%;

  background:
    /* 1) aurora curtains (topmost, subtle) */
    repeating-linear-gradient(
      92deg,
      rgba(120,255,210,0) 0px,
      rgba(120,255,210,.10) 10px,
      rgba(120,255,210,0) 34px
    ),

    radial-gradient(80% 52% at 50% 0%,
      var(--aurora-top, rgba(120,201,255,.55)) 0%,
      var(--aurora-top-soft, rgba(120,201,255,.22)) 35%,
      rgba(0,0,0,0) 72%),

    radial-gradient(95% 75% at 50% 112%,
      var(--aurora-bot, rgba(90,255,189,.60)) 0%,
      var(--aurora-bot-soft,  rgba(90,255,189,.20)) 44%,
      rgba(0,0,0,0) 84%),

    /* subtle mid “air” glow — nudge down */
    radial-gradient(65% 55% at 50% 60%,
      rgba(180,240,255, var(--aurora-air-alpha, .10)) 0%,
      rgba(180,240,255,0) 62%),

    /* pink accent — nudge down */
    radial-gradient(55% 45% at 62% 24%,
      rgba(255,120,220,var(--aurora-pink-alpha)) 0%,
      rgba(255,120,220,0) 62%);

  background-size: 300% 300%, 220% 220%, 220% 220%, 180% 180%, 160% 160%;
  background-position: 0% 50%, 30% 60%, 30% 72%, 50% 60%, 62% 24%;
  background-repeat: no-repeat;
  filter: blur(12px) saturate(1.85);
  opacity: 1;

  animation:
  auroraDrift 55s linear infinite,
  auroraFlow 18s ease-in-out infinite alternate,
  auroraHue 8s ease-in-out infinite alternate;
  /*
  auroraDrift 55s linear infinite,
  auroraFlow 52s ease-in-out infinite alternate,
  auroraHue 22s ease-in-out infinite alternate;*/
}

html.aurora-test.aurora-v-dawn #auroraLayer::before{
  background-size: 300% 300%, 220% 220%, 220% 220%, 180% 180%, 240% 240%;
}


/* Micro texture layer (helps it feel rare/natural) */
html.aurora-test #auroraLayer::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1px, transparent 2px) 0 0/180px 180px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.06) 0 1px, transparent 2px) 0 0/240px 240px;
  opacity: .18;
  filter: blur(.4px);
  animation: auroraGrain 12s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* KEY: mask the aurora so it hugs egg zone (top+bottom) AND doesn’t show on the far sides */


html.aurora-test.aurora-v-polar{
  /* slightly colder */
  --aurora-variant-hue: -6deg;
  --aurora-variant-sat: 2.15;

  /* make the bottom band more "oxygen green" */
  --aurora-bot: rgba(70, 255, 180, .68);
  --aurora-bot-soft: rgba(70, 255, 180, .24);

  /* reduce pink so it stays clean-green */
  --aurora-pink-alpha: 0.05;

  /* slightly more air glow */
  --aurora-air-alpha: 0.12;
}

html.aurora-test.aurora-v-dawn{
  /* warmer */
  --aurora-variant-hue: 18deg;
  --aurora-variant-sat: 1.55;

 /* reduce green dominance */
  --aurora-bot: rgba(90, 255, 189, .16);
  --aurora-bot-soft: rgba(90, 255, 189, .06);

  /* make the “top” less cyan, more violet */
  --aurora-top: rgba(190, 150, 255, .46);
  --aurora-top-soft: rgba(190, 150, 255, .18);

  /* increase magenta presence */
  --aurora-pink-alpha: 0.40;

  /* slightly darker air so the red wash reads */
  --aurora-air-alpha: 0.08;
}


/* test line */
/*showAurora({variant:'dawn', intensity:0.85, duration:8000});*/


@keyframes auroraFlow{
  from {
    background-position:
      0% 50%,
      30% 60%,
      30% 72%,
      50% 60%,
      62% 24%;
  }
  to {
    background-position:
      20% 50%,   /* was 100% */
      34% 62%,   /* small drift */
      26% 70%,
      52% 58%,
      64% 22%;
  }
}

/* gentle hue shimmer (feels “alive”) */
@keyframes auroraHue{
  from {
    filter: blur(12px)
      saturate(var(--aurora-variant-sat, 1.8))
      hue-rotate(calc(var(--aurora-variant-hue, 0deg) - 8deg));
    opacity: .92;
  }
  to {
    filter: blur(14px)
      saturate(calc(var(--aurora-variant-sat, 1.8) + 0.3))
      hue-rotate(calc(var(--aurora-variant-hue, 0deg) + 12deg));
    opacity: 1;
  }
}


@keyframes auroraDrift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2.5%,1.5%,0) scale(1.03); }
  100% { transform: translate3d(0,0,0) scale(1); }
}


@keyframes auroraGrain{
  from { transform: translate3d(0,0,0); opacity:.12; }
  to   { transform: translate3d(1.2%, -0.8%, 0); opacity:.22; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html.aurora-test #auroraLayer::before,
  html.aurora-test #auroraLayer::after{
    animation: none !important;
  }
}

  /*
  
  html.aurora-test #auroraLayer{
    background:
      radial-gradient(80% 55% at 50% 0%,
        rgba(120, 201, 255, 0.705),
        rgba(120, 201, 255, 0.548) 70%),
      radial-gradient(80% 55% at 50% 100%,
        rgba(90, 255, 189, 0.671),
        rgba(90, 255, 189, 0.534) 70%);

    background-size: 220% 220%;
    background-position: 0% 50%;
    background-repeat: no-repeat;

    filter: blur(22px);
    opacity: 0.86;             
    animation: auroraDrift 55s linear infinite;
    mix-blend-mode: screen;    
  }*/


    /*html.aurora-test #auroraLayer{
    background: rgba(0,255,255,0.35);
    opacity: 1;
    filter: none;
    border-radius: 0;
    animation: none;
  }*/


  /* ======================================================
     04. UI motion (toast)
  ====================================================== */

  .toast {
    text-align: center; position: fixed;
    top: 72px; left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    padding: .55rem .9rem;
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
    color: #fff;
    font: 600 .95rem/1.2 var(--font-ui, system-ui);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    opacity: 0;
    animation: toastIn .25s ease forwards, toastOut .25s ease 2.6s forwards;
    }

  .toast.success { background: rgba(96, 211, 148, .25); }
  .toast.warn    { background: rgba(255, 214, 102, .25); }

  @media (display-mode: standalone) {
    .toast { top: calc(12px + var(--safe-top));}
  }

    /* ======================================================
   05. KEYFRAMES
   ------------------------------------------------------
   INDEX (name → purpose → used by)

   BACKGROUND EFFECTS (STAR EFFECTS, LIGHT PULSE, UFO and METEOR)
   - twinkle     → stars twinkling                       → .star
   - drift1,2,3  → star parallax type drift              → .layer.l1, .layer.l2, .layer.l3
   - shoot       → meteor shoots across                  → .meteor
   - ambientPulse→ subtle background pulse overlay       → body::after (base)
   - fly         → UFO chicken fly-by                       → .ufo-chicken-sprite

   SPARKLES FROM EGG
   - rise        → sparkles rise/vanish path             → .sparkle

   COOPFUCIUS FEATURE
   - shimmerGold → coop-bubble gradient shimmer          → .coop-bubble
   - spinBurst   → koopfucius rays spin + expand + fade  → .burst-rays
   - shimmer     → koop egg brightness shimmer           → .egg[data-theme="koop"]

   PRISM FEATURE
   - prismPulse  → prism egg hue/brightness cycling      → .egg[data-theme="prism"], ::before
   - prismSheen  → prism hint text sheen sweep           → .egg[data-theme="prism"] ~ .hint

   MODEBAR STATUS BUTTON
   - pulse       → small “ready dot” pulse               → .cooldown-badge::after

   NEST AGE EFFECTS
   - nestSheen   → every 12 second nest shine new        → .nest-item.is-new .nest-front::after
   - nestPhase   → phasing in out                        → .nest-item.is-expiring .nest-front::after
   - nestGhost   → phasing in out more intense           → .nest-item.is-lastday .nest-front

   TOAST POPUPS AND CONFETTI
   - toastIn     → toast enter (fade + lift)             → .toast
   - toastOut    → toast exit (fade + lift)              → .toast
   - confettiPop → confetti burst (translate + spin)     → .confetti

   AURORA
   - auroraDrift → aurora effect                         → .

   EGG WOBBLE AND PULSE RING EFFECT 
   - tiltWobble  → egg wobble via CSS vars (--tilt/--scale)→ (tap wobble hook)
   - ringPulse   → egg ring glow + scale pulse           → .ring (when active)

   EGG IDLE GLOW AND SHINE
   - idleGlow    → idle breathing glow (shadow/brightness)→ (idle state hook)
   - idleShine   → idle sheen sweep over egg surface     → (idle state hook)

   SLEEP STATUS BOX SHINE
   - shine       → one-way shine sweep helper            → (optional helper)

   SPECIAL THEME FEATURE FREE VERSION
   - pillPop     → for special theme feature             → #themePill


   ====================================================== */

   /* STAR EFFECTS */
  @keyframes twinkle {
    0%,100% { transform: scale(1);   opacity: calc(var(--o,.7)*.9); }
    50%     { transform: scale(1.6); opacity: calc(var(--o,.7)*1.2); }
  }

  @keyframes drift1 { from{transform: translateY(0)}   to{transform: translateY(-60px)} }
  @keyframes drift2 { from{transform: translateX(0)}   to{transform: translateX(50px)} }
  @keyframes drift3 { from{transform: translate(0,0)}  to{transform: translate(-40px, 30px)} }

  @keyframes shoot {
    from { opacity:1; transform: translate(var(--x,0), var(--y,0)) rotate(var(--a,-18deg)); }
    to   { opacity:0; transform: translate(calc(var(--x,0) + var(--dx,600px)),
                                            calc(var(--y,0) + var(--dy,-220px)))
                                            rotate(var(--a,-18deg)); }
  }

  /* NIGHT SKY LIGHT PULSE */
  @keyframes ambientPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.65; }
  }

  /* UFO FLYING */

  @keyframes fly {
    0%   { transform: translateX(0);     opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(120vw); opacity: 0; }
  }

  /* FACT BOX MOVEMENT */
  
  @keyframes rise { /*fact box movement*/
    0%   { transform: translate(0,0) scale(.6); opacity:0; }
    10%  { opacity:1; }
    100% { transform: translate(var(--x,0), calc(-1 * var(--h,90px))) scale(.9); opacity:0; }}


  /* COOPFUCIUS FEATURE EFFECTS */

  @keyframes shimmerGold {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
  }

  @keyframes spinBurst {
    0%   { rotate: 0deg;   scale: .7;  opacity: .9; }
    50%  { rotate: 180deg; scale: 1.1; opacity: 1;  }
    100% { rotate: 360deg; scale: 1.4; opacity: 0;  }
  }

  @keyframes shimmer {
    0%,100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
  }

  /* PRISM FEATURE EFFECTS */

  @keyframes prismPulse {    
    0% {filter: hue-rotate(0deg) saturate(1.4) brightness(1);}
    100% {filter: hue-rotate(180deg) saturate(1.6) brightness(1.4); }
  }

  @keyframes prismSheen {
    0% { background-position: -100% 0; }
    50% { background-position: 120% 0; }
    100% { background-position: -100% 0; }
  }

  /* may or may not use prismrotate */

  @keyframes prismRotate {
    to { transform: rotate(1turn); }
  }

  /* MODE BAR READY DOT PULSING EFFECT */
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.7; }
  }

  /* NEST effects */

  @keyframes nestSheen{
    0%, 72% { opacity: 0; transform: translateX(-35%); }
    78%     { opacity: .55; }
    88%     { opacity: .35; transform: translateX(35%); }
    100%    { opacity: 0; transform: translateX(35%); }
  }

  @keyframes nestPhase{
    0%,100% { opacity: 0.0; transform: translateY(0); }
    30%     { opacity: 0.34; transform: translateY(-3px); }
    55%     { opacity: 0.14; transform: translateY(3px); }
  }

  @keyframes nestGhost{
    0%,100% { opacity: 1; }
    50%     { opacity: 0.86; }
  }

  /* TOAST EFFECTS */

  @keyframes toastIn   { from {opacity:0; transform:translate(-50%,-6px);} to {opacity:1; transform:translate(-50%,0);} }
  @keyframes toastOut  { to   {opacity:0; transform:translate(-50%,-6px);} }

  /*Confetti pop */

  @keyframes confettiPop {
    0%   {
      opacity: var(--celebration-start-opacity, 1);
      transform: translate(0,0) rotate(0deg) scale(0.78);
    }
    16% {
      opacity: calc(var(--celebration-peak-opacity, 1) * var(--celebration-intensity-opacity-mult, 1));
      transform:
        translate(
          calc(var(--dx, 0px) * var(--celebration-drift-scale, 0.34) * var(--celebration-intensity-drift-mult, 1) * 0.14),
          calc(var(--dy, -160px) * var(--celebration-drift-scale, 0.34) * var(--celebration-intensity-drift-mult, 1) * 0.14)
        )
        rotate(calc(var(--rot, 360deg) * var(--celebration-rot-scale, 0.1) * var(--celebration-intensity-rot-mult, 1) * 0.22))
        scale(calc(var(--celebration-pop-scale, 1) * var(--celebration-intensity-pop-mult, 1)));
    }
    100% {
      opacity: 0;
      transform:
        translate(
          calc(var(--dx, 0px) * var(--celebration-drift-scale, 0.34) * var(--celebration-intensity-drift-mult, 1)),
          calc(var(--dy, -160px) * var(--celebration-drift-scale, 0.34) * var(--celebration-intensity-drift-mult, 1))
        )
        rotate(calc(var(--rot, 360deg) * var(--celebration-rot-scale, 0.1) * var(--celebration-intensity-rot-mult, 1)))
        scale(var(--celebration-end-scale, 1));
    }
  }


  /* AURORA TESTING */
  /*@keyframes auroraDrift{
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }*/

    
    /* EGG EFFECTS */

    /* WOBBLE AND TILT -  Keyframes to wobble the tilt (and optionally a tiny scale) */
  @keyframes tiltWobble {
    0%   { --tilt: 0deg;   --scale: 1;    }
    20%  { --tilt: 8deg;   --scale: .98;  }
    45%  { --tilt: -6deg;  --scale: .985; }
    70%  { --tilt: 3deg;   --scale: .99;  }
    100% { --tilt: 0deg;   --scale: 1;    }
  }

   /* RING EFFECT */

  @keyframes ringPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 25%, transparent); opacity: .1; scale: .96; } /* was: transform: scale(.96) */
    50%  { box-shadow: 0 0 36px 18px color-mix(in oklab, currentColor 45%, transparent); opacity: .8; scale: 1.22; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: .6; scale: 1.2; }
  }

  /* Lighter ring pulse variant used for prism pre-reveal loading to reduce paint cost. */
  @keyframes ringPulseLite {
    0%   { opacity: .14; scale: .98; box-shadow: 0 0 0 0 transparent; }
    50%  { opacity: .58; scale: 1.18; box-shadow: 0 0 16px 6px color-mix(in oklab, currentColor 28%, transparent); }
    100% { opacity: .34; scale: 1.16; box-shadow: 0 0 0 0 transparent; }
  }

  /* Prism loading: continuous, calm breathing aura so the wait phase feels alive. */
  @keyframes prismLoadAura {
    0% {
      opacity: .34;
      scale: 1.00;
      box-shadow: 0 0 12px 4px color-mix(in oklab, currentColor 28%, transparent);
    }
    50% {
      opacity: .74;
      scale: 1.14;
      box-shadow: 0 0 28px 11px color-mix(in oklab, currentColor 48%, transparent);
    }
    100% {
      opacity: .40;
      scale: 1.05;
      box-shadow: 0 0 16px 5px color-mix(in oklab, currentColor 32%, transparent);
    }
  }

   /* IDLE GLOW AND SHINE */
    /* === Idle breathing glow when untouched === */
  @keyframes idleGlow {
    0%, 100% {
      box-shadow:
          0 0 15px color-mix(in oklab, var(--idleColor, #ffd166) 60%, white 15%),
          0 0 35px color-mix(in oklab, var(--idleColor, #ffd166) 40%, black 20%);
      filter: brightness(1);
    }

    50% {
      box-shadow:
          0 0 25px color-mix(in oklab, var(--idleColor, #ffd166) 100%, white 15%),
          0 0 50px color-mix(in oklab, var(--idleColor, #ffd166) 60%, black 10%);
      filter: brightness(1.08);
    }
  }

  @keyframes idleShine {
    0%   { background-position: -150% 0; opacity: 0.15; }
    50%  { background-position: 150% 0; opacity: 0.35; }
    100% { background-position: -150% 0; opacity: 0.15; }
  }

  @keyframes shine { to { background-position: 150% 0; } }

  @keyframes pillPop {
    0%   { transform: translateY(-6px) scale(.98); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
  }

}