/* ============================================================
   HEADSHOP MOOD SELECTOR — ATMOSPHERE EFFECTS v1.3.0
   Edges/corners only — center always unobscured.
   Radial gradients fade to transparent toward center.
   Gradient alpha MAX 0.15. Stars/particles exempt (tiny dots).
   Only transform + opacity animated — GPU-composited.
   pointer-events: none — never blocks clicks.
============================================================ */

/* ── Base overlay ───────────────────────────────────────── */
#mood-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity;
}

#mood-overlay::before,
#mood-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body[class*="mood-"] #mood-overlay { opacity: 1; }


/* ============================================================
   1. KIERTORADALLA — Space ambient
   Corner blue/cyan glows + CSS star field + edge vignette
============================================================ */

body.mood-kiertoradalla {
  --mood-primary:   #0a2a4a;
  --mood-secondary: #00d4ff;
}

body.mood-kiertoradalla #mood-overlay {
  background:
    radial-gradient(ellipse at   0%   0%, rgba(  0, 80,180,.13) 0%, transparent 40%),
    radial-gradient(ellipse at 100%   0%, rgba(  0,212,255,.11) 0%, transparent 40%),
    radial-gradient(ellipse at   0% 100%, rgba(  0, 60,160,.10) 0%, transparent 40%),
    radial-gradient(ellipse at 100% 100%, rgba(  0,180,255,.10) 0%, transparent 40%),
    radial-gradient(ellipse at  50%   0%, rgba(  0,100,200,.08) 0%, transparent 30%),
    radial-gradient(ellipse at  50% 100%, rgba(  0, 50,150,.07) 0%, transparent 30%);
  animation: hms-float 16s ease-in-out infinite;
}

/* CSS star field — tiny dots, edge-weighted */
body.mood-kiertoradalla #mood-overlay::before {
  background-image:
    radial-gradient(1.2px 1.2px at  8% 12%, rgba(255,255,255,.85) 0%, transparent 100%),
    radial-gradient(1px   1px   at 22%  6%, rgba(255,255,255,.60) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 18%, rgba(  0,212,255,.90) 0%, transparent 100%),
    radial-gradient(1px   1px   at 55%  8%, rgba(255,255,255,.70) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 70% 14%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px   1px   at 85%  4%, rgba(255,255,255,.75) 0%, transparent 100%),
    radial-gradient(1px   1px   at  4% 35%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(2px   2px   at 18% 42%, rgba(  0,212,255,.80) 0%, transparent 100%),
    radial-gradient(1px   1px   at 32% 55%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 48% 38%, rgba(255,255,255,.65) 0%, transparent 100%),
    radial-gradient(1px   1px   at 62% 50%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 44%, rgba(  0,212,255,.70) 0%, transparent 100%),
    radial-gradient(1px   1px   at 92% 32%, rgba(255,255,255,.60) 0%, transparent 100%),
    radial-gradient(1px   1px   at 10% 68%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(2px   2px   at 28% 75%, rgba(  0,212,255,.75) 0%, transparent 100%),
    radial-gradient(1px   1px   at 45% 82%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 65% 72%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1px   1px   at 80% 85%, rgba(255,255,255,.65) 0%, transparent 100%),
    radial-gradient(1px   1px   at 95% 78%, rgba(  0,212,255,.60) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 95%, rgba(255,255,255,.45) 0%, transparent 100%);
  animation: hms-stars-drift 90s linear infinite;
  opacity: .75;
}

/* Cyan inset edge glow */
body.mood-kiertoradalla #mood-overlay::after {
  box-shadow:
    inset 0 0 120px rgba(  0,212,255,.08),
    inset 0 0  55px rgba(  0, 80,180,.06);
  animation: hms-glow-breathe 7s ease-in-out infinite;
}

@keyframes hms-float {
  0%, 100% { transform: translateY(0)    scale(1);     }
  50%       { transform: translateY(-9px) scale(1.012); }
}
@keyframes hms-stars-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-80px); }
}
@keyframes hms-glow-breathe {
  0%, 100% { opacity: .50; }
  50%       { opacity: 1;   }
}


/* ============================================================
   2. SATUMETSÄ — Finnish fairy forest
   Green edge haze + firefly particles near edges/bottom
============================================================ */

body.mood-rollimetsa {
  --mood-primary:   #0d2b1a;
  --mood-secondary: #7fff7f;
}

body.mood-rollimetsa #mood-overlay {
  background:
    radial-gradient(ellipse at 15% 100%, rgba(13,43,26,.14) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 100%, rgba(15,70,25,.12) 0%, transparent 40%),
    radial-gradient(ellipse at  0%  55%, rgba(10,50,15,.08) 0%, transparent 30%),
    radial-gradient(ellipse at 100% 55%, rgba(10,50,15,.08) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 100%, rgba(13,43,26,.09) 0%, transparent 35%);
}

/* Firefly layer 1 — bottom/edge weighted */
body.mood-rollimetsa #mood-overlay::before {
  background-image:
    radial-gradient(2.5px 2.5px at  4% 82%, rgba(127,255, 50,.90) 0%, transparent 100%),
    radial-gradient(2px   2px   at 14% 91%, rgba(100,220, 40,.75) 0%, transparent 100%),
    radial-gradient(3px   3px   at 23% 76%, rgba(127,255,127,.85) 0%, transparent 100%),
    radial-gradient(2px   2px   at 76% 86%, rgba( 80,200, 30,.70) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 87% 79%, rgba(127,255, 50,.80) 0%, transparent 100%),
    radial-gradient(2px   2px   at 96% 89%, rgba(100,240, 80,.75) 0%, transparent 100%),
    radial-gradient(2px   2px   at  2% 67%, rgba( 90,210, 40,.65) 0%, transparent 100%),
    radial-gradient(3px   3px   at 11% 96%, rgba(127,255,100,.80) 0%, transparent 100%),
    radial-gradient(2px   2px   at 91% 71%, rgba(150,255, 80,.55) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 97% 62%, rgba(100,230, 60,.60) 0%, transparent 100%);
  filter: blur(.5px);
  animation: hms-firefly-a 9s ease-in-out infinite;
}

/* Firefly layer 2 — offset timing */
body.mood-rollimetsa #mood-overlay::after {
  background-image:
    radial-gradient(2px 2px at  7% 74%, rgba(127,255, 50,.70) 0%, transparent 100%),
    radial-gradient(3px 3px at 18% 89%, rgba(100,220, 40,.80) 0%, transparent 100%),
    radial-gradient(2px 2px at 83% 77%, rgba(127,255,127,.65) 0%, transparent 100%),
    radial-gradient(2px 2px at 94% 86%, rgba( 80,200, 30,.60) 0%, transparent 100%),
    radial-gradient(2px 2px at  3% 93%, rgba(100,240, 80,.75) 0%, transparent 100%);
  filter: blur(.3px);
  animation: hms-firefly-b 12s ease-in-out infinite 3s;
}

@keyframes hms-firefly-a {
  0%, 100% { transform: translate(0,    0);     opacity: .50; }
  25%       { transform: translate( 8px,-14px); opacity: .88; }
  50%       { transform: translate(-5px,-22px); opacity: .62; }
  75%       { transform: translate(10px, -9px); opacity: .80; }
}
@keyframes hms-firefly-b {
  0%, 100% { transform: translate(0,   0);     opacity: .45; }
  30%       { transform: translate(-6px,-18px); opacity: .82; }
  60%       { transform: translate( 7px,-12px); opacity: .58; }
  80%       { transform: translate(-4px, -8px); opacity: .72; }
}


/* ============================================================
   3. HUONOLLA TRIPILLÄ — Black smoke on edges
   Dark smoke streams on all edges, center stays clear.
   Layered blur + slow drift animation.
============================================================ */

body.mood-synkalla-polulla {
  --mood-primary:   #050505;
  --mood-secondary: #1a1a1a;
}

/* Base: dark smoke seeping in from all four edges */
body.mood-synkalla-polulla #mood-overlay {
  background:
    linear-gradient(to right,  rgba(0,0,0,.55) 0%, rgba(2,1,0,.20) 12%, transparent 32%),
    linear-gradient(to left,   rgba(0,0,0,.55) 0%, rgba(2,1,0,.20) 12%, transparent 32%),
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(1,0,0,.15) 10%, transparent 28%),
    linear-gradient(to top,    rgba(0,0,0,.45) 0%, rgba(1,0,0,.15) 10%, transparent 28%);
  animation: hms-smoke-pulse 6s ease-in-out infinite;
}

/* Smoke layer 1 — left/right streams with corner wisps, flows downward */
body.mood-synkalla-polulla #mood-overlay::before {
  background:
    linear-gradient(to right, rgba(0,0,0,.50) 0%, rgba(4,2,0,.22) 8%, rgba(6,2,0,.07) 20%, transparent 34%),
    linear-gradient(to left,  rgba(0,0,0,.50) 0%, rgba(4,2,0,.22) 8%, rgba(6,2,0,.07) 20%, transparent 34%),
    radial-gradient(ellipse at   0%  25%, rgba(0,0,0,.35) 0%, transparent 18%),
    radial-gradient(ellipse at 100%  25%, rgba(0,0,0,.35) 0%, transparent 18%),
    radial-gradient(ellipse at   0%  55%, rgba(0,0,0,.28) 0%, transparent 16%),
    radial-gradient(ellipse at 100%  55%, rgba(0,0,0,.28) 0%, transparent 16%),
    radial-gradient(ellipse at   0%  80%, rgba(0,0,0,.22) 0%, transparent 14%),
    radial-gradient(ellipse at 100%  80%, rgba(0,0,0,.22) 0%, transparent 14%);
  filter: blur(9px);
  animation: hms-smoke-drift-a 8s ease-in-out infinite;
}

/* Smoke layer 2 — top drip + bottom pool, offset timing */
body.mood-synkalla-polulla #mood-overlay::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.48) 0%, rgba(3,1,0,.18) 11%, transparent 26%),
    linear-gradient(to top,    rgba(0,0,0,.42) 0%, rgba(3,1,0,.14) 10%, transparent 24%),
    radial-gradient(ellipse at  20%   0%, rgba(0,0,0,.30) 0%, transparent 16%),
    radial-gradient(ellipse at  80%   0%, rgba(0,0,0,.30) 0%, transparent 16%),
    radial-gradient(ellipse at  20% 100%, rgba(0,0,0,.28) 0%, transparent 14%),
    radial-gradient(ellipse at  80% 100%, rgba(0,0,0,.28) 0%, transparent 14%);
  filter: blur(12px);
  animation: hms-smoke-drift-b 11s ease-in-out infinite 2s;
}

@keyframes hms-smoke-pulse {
  0%, 100% { opacity: .78; }
  40%       { opacity: 1;   }
  70%       { opacity: .65; }
}

@keyframes hms-smoke-drift-a {
  0%, 100% { transform: translateY(0)     scaleX(1);    opacity: .82; }
  30%       { transform: translateY(14px)  scaleX(1.03); opacity: 1;   }
  65%       { transform: translateY( 7px)  scaleX(.98);  opacity: .62; }
}

@keyframes hms-smoke-drift-b {
  0%, 100% { transform: translateY(0);     opacity: .70; }
  35%       { transform: translateY(-10px); opacity: .95; }
  72%       { transform: translateY(- 5px); opacity: .55; }
}


/* ============================================================
   4. AURINKOO — Golden sunset
   Top gradient + corner lens flares, center fades to clear
============================================================ */

body.mood-aurinkoo {
  --mood-primary:   #ff6b35;
  --mood-secondary: #ffd700;
}

body.mood-aurinkoo #mood-overlay {
  background:
    linear-gradient(
      to bottom,
      rgba(255,107,53,.14) 0%,
      rgba(255,170,50,.07) 14%,
      transparent          38%
    ),
    radial-gradient(ellipse at   0%   0%, rgba(255,100,40,.12) 0%, transparent 32%),
    radial-gradient(ellipse at 100%   0%, rgba(255,200,50,.12) 0%, transparent 32%),
    radial-gradient(ellipse at  50%   0%, rgba(255,140,60,.09) 0%, transparent 28%);
  animation: hms-sunset-breathe 9s ease-in-out infinite;
}

body.mood-aurinkoo #mood-overlay::before {
  background:
    radial-gradient(ellipse at  4%  2%, rgba(255,220,80,.11) 0%, transparent 22%),
    radial-gradient(ellipse at 96%  2%, rgba(255,140,60,.10) 0%, transparent 22%),
    radial-gradient(ellipse at  0% 50%, rgba(255,107,53,.05) 0%, transparent 18%),
    radial-gradient(ellipse at 100%50%, rgba(255,107,53,.05) 0%, transparent 18%);
  animation: hms-heat-haze 14s ease-in-out infinite;
}

body.mood-aurinkoo #mood-overlay::after {
  box-shadow:
    inset 0 0 80px  rgba(255,107,53,.07),
    inset 0 0 36px  rgba(255,200,50,.05);
  animation: hms-glow-breathe 5s ease-in-out infinite;
}

@keyframes hms-sunset-breathe {
  0%, 100% { opacity: .80; transform: scaleY(1);    }
  50%       { opacity: 1;   transform: scaleY(1.015); }
}
@keyframes hms-heat-haze {
  0%, 100% { transform: translateX(0);    opacity: .62; }
  33%       { transform: translateX(5px);  opacity: .92; }
  66%       { transform: translateX(-4px); opacity: .74; }
}


/* ============================================================
   5. LUNGI — Lo-fi lounge
   Film grain + corner warm tones + edge vignette
============================================================ */

body.mood-lungi {
  --mood-primary:   #2d1b00;
  --mood-secondary: #c4a35a;
}

body.mood-lungi #mood-overlay {
  background:
    radial-gradient(ellipse at   0%   0%, rgba(196,163, 90,.10) 0%, transparent 32%),
    radial-gradient(ellipse at 100%   0%, rgba( 45, 27,  0,.10) 0%, transparent 32%),
    radial-gradient(ellipse at   0% 100%, rgba( 45, 27,  0,.12) 0%, transparent 32%),
    radial-gradient(ellipse at 100% 100%, rgba(196,163, 90,.10) 0%, transparent 32%),
    radial-gradient(ellipse at  50% 100%, rgba( 45, 27,  0,.07) 0%, transparent 28%);
  animation: hms-breathe 8s ease-in-out infinite;
}

/* Film grain via SVG feTurbulence — extended beyond viewport to hide edge flicker */
body.mood-lungi #mood-overlay::before {
  inset: -8%;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: hms-grain .18s steps(1) infinite;
  will-change: transform;
}

body.mood-lungi #mood-overlay::after {
  box-shadow:
    inset 0 0 70px rgba(196,163, 90,.07),
    inset 0 0 32px rgba( 45, 27,  0,.09);
}

@keyframes hms-breathe {
  0%, 100% { transform: scale(1);     opacity: .70; }
  50%       { transform: scale(1.018); opacity: 1;   }
}
@keyframes hms-grain {
  0%   { transform: translate(0,    0);  }
  10%  { transform: translate(-3%, -4%); }
  20%  { transform: translate( 4%,  2%); }
  30%  { transform: translate(-2%,  3%); }
  40%  { transform: translate( 3%, -2%); }
  50%  { transform: translate(-4%,  4%); }
  60%  { transform: translate( 2%, -3%); }
  70%  { transform: translate(-3%,  2%); }
  80%  { transform: translate( 4%, -4%); }
  90%  { transform: translate(-2%,  3%); }
  100% { transform: translate(0,    0);  }
}


/* ============================================================
   6. NETFLIX & CHILL — Neon night
   Corner red/purple glows + edge inset glow + light streak
============================================================ */

body.mood-netflix-chill {
  --mood-primary:   #1a0033;
  --mood-secondary: #e50914;
}

body.mood-netflix-chill #mood-overlay {
  background:
    radial-gradient(ellipse at   0%   0%, rgba(229,  9, 20,.15) 0%, transparent 36%),
    radial-gradient(ellipse at 100%   0%, rgba(130,  0,200,.15) 0%, transparent 36%),
    radial-gradient(ellipse at   0% 100%, rgba( 60,  0,180,.12) 0%, transparent 34%),
    radial-gradient(ellipse at 100% 100%, rgba(229,  9, 20,.12) 0%, transparent 34%);
  animation: hms-neon-pulse 7s ease-in-out infinite;
}

body.mood-netflix-chill #mood-overlay::before {
  background: linear-gradient(
    118deg,
    transparent                   0%,
    rgba(180, 40,255,.04)        38%,
    rgba(255,255,255,.04)        50%,
    rgba(180, 40,255,.04)        62%,
    transparent                 100%
  );
  animation: hms-light-streak 12s cubic-bezier(.4,0,.6,1) infinite;
  will-change: transform;
}

body.mood-netflix-chill #mood-overlay::after {
  box-shadow:
    inset 0 0 100px rgba(229,  9, 20,.08),
    inset 0 0  52px rgba(130,  0,200,.07),
    inset 0 0  26px rgba( 60,  0,180,.06);
  animation: hms-neon-flicker 9s ease-in-out infinite;
}

@keyframes hms-neon-pulse {
  0%, 100% { opacity: .75; }
  50%       { opacity: 1;   }
}
@keyframes hms-light-streak {
  0%   { transform: translateX(-110%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  32%  { transform: translateX( 110%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(-110%) skewX(-18deg); opacity: 0; }
}
@keyframes hms-neon-flicker {
  0%, 93%, 100% { opacity: .70; }
  94%           { opacity: .35; }
  95%           { opacity: .85; }
  96%           { opacity: .40; }
  97%           { opacity: .90; }
}


/* ── Cross-mood fade transition ─────────────────────────── */
body.mood-kiertoradalla  #mood-overlay,
body.mood-rollimetsa     #mood-overlay,
body.mood-synkalla-polulla #mood-overlay,
body.mood-aurinkoo       #mood-overlay,
body.mood-lungi          #mood-overlay,
body.mood-netflix-chill  #mood-overlay {
  transition: opacity 1.4s ease;
}


/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #mood-overlay,
  #mood-overlay::before,
  #mood-overlay::after {
    animation: none !important;
    transition: opacity .3s ease !important;
  }
}