.anime-atmosphere {
  --scene-ink: #070c17;
  --scene-sky: #1a3156;
  --scene-haze: #438bcf40;
  --scene-beam: #88adfc3d;
  --scene-floor: #060914;
  --scene-speck: #9fc8ffab;
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 76% 84%, var(--scene-sky), transparent 76%),
    linear-gradient(148deg, var(--scene-ink) 23%, var(--scene-floor));
}

.anime-atmosphere::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #03050d4f, transparent 32%, #03050d2b 68%, #03050d9c),
    radial-gradient(ellipse at 48% 44%, transparent 36%, #03050d84 100%);
  content: "";
}

.anime-atmosphere-landscape {
  position: absolute;
  inset: -4%;
  background: var(--scene-landscape, none);
  clip-path: var(--scene-profile, none);
  opacity: var(--scene-image-opacity, 1);
  animation: var(--scene-pan, none) 24s ease-in-out infinite alternate;
}

.anime-atmosphere-light {
  position: absolute;
  inset: -20%;
  background: var(--scene-light,
    radial-gradient(ellipse 34% 40% at 67% 54%, var(--scene-haze), transparent 76%),
    radial-gradient(ellipse 23% 3% at 64% 54%, var(--scene-beam), transparent 99%),
    radial-gradient(ellipse 33% 12% at 52% 68%, var(--scene-haze), transparent 91%));
  animation: var(--scene-light-motion, projector-drift) var(--scene-light-time, 18s) ease-in-out infinite alternate;
}

.anime-atmosphere-particles {
  position: absolute;
  inset: -22%;
  opacity: var(--scene-speck-opacity, .4);
  background-image: var(--scene-particles,
    radial-gradient(circle at 19% 37%, var(--scene-speck) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 13%, var(--scene-speck) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 73%, var(--scene-speck) 0 1.1px, transparent 2.7px));
  background-size: var(--scene-particle-size, 211px 167px, 317px 263px, 277px 211px);
  mask-image: linear-gradient(155deg, transparent 6%, #000 56%, #000b 76%, transparent 97%);
  animation: var(--scene-particle-motion, film-dust) var(--scene-particle-time, 24s) linear infinite;
}

body:not([data-anime="one piece"]) .sea-scene,
body[data-anime="one piece"] .anime-atmosphere,
body:has(.stage.player-fullscreen) .anime-atmosphere { display: none; }

body:where(:not([data-anime]), [data-anime=""]) .anime-atmosphere {
  --scene-speck-opacity: .57;
  --scene-light: radial-gradient(ellipse 33% 19% at 65% 57%, #347fcd63, transparent 84%),
    radial-gradient(ellipse 31% 3.5% at 65% 54%, #a4ceff71, #5a92dd2e 57%, transparent 98%),
    radial-gradient(ellipse 39% 7% at 67% 67%, #635ecb54, transparent 90%),
    radial-gradient(ellipse 30% 13% at 84% 51%, #517db342, transparent 95%);
  --scene-light-time: 15s;
}

body:where([data-anime]:not([data-anime=""])) .anime-atmosphere {
  --scene-ink: #080b19;
  --scene-sky: #201e43;
  --scene-haze: #546ac05c;
  --scene-beam: #7f87f45c;
  --scene-speck: #bcb7ff;
}

body:is([data-anime="attack on titan"], [data-anime-art="attack-on-titan"]) {
  --accent: #ffc6aa;
  --accent-hover: #fff1e9;
  --action: #ff9e88;
  --action-hover: #ffb7a6;
}

body:is([data-anime="attack on titan"], [data-anime-art="attack-on-titan"]) .anime-atmosphere {
  --scene-ink: #11090f;
  --scene-sky: #40201d;
  --scene-floor: #10090b;
  --scene-haze: #ff76454f;
  --scene-beam: #df5f214d;
  --scene-speck: #ffac62;
  --scene-speck-opacity: .65;
  --scene-image-opacity: .74;
  --scene-landscape: linear-gradient(105deg, #11080f 12%, #11080f5e 52%, #120a10a1 94%),
    linear-gradient(0deg, #0a060b 6%, transparent 69%),
    url("/art/attack-on-titan-hero.jpg") center 42% / cover no-repeat;
  --scene-pan: titan-wall;
  --scene-light-motion: firelight;
  --scene-particle-motion: rising-embers;
  --scene-particle-time: 10s;
  --scene-particle-size: 211px 179px, 179px 293px, 277px 211px;
}

body[data-anime="bleach"] .anime-atmosphere {
  --scene-ink: #070914;
  --scene-sky: #24223c;
  --scene-floor: #0d0915;
  --scene-haze: #a039714e;
  --scene-speck: #f2defb;
  --scene-landscape: repeating-linear-gradient(90deg, #070812 0 29px, #171729 30px 34px, #080a13 36px 53px);
  --scene-profile: polygon(0 67%, 9% 67%, 9% 77%, 15% 77%, 15% 60%, 20% 60%, 20% 73%, 32% 73%, 32% 83%, 40% 83%,
    40% 65%, 48% 65%, 48% 72%, 59% 72%, 59% 81%, 66% 81%, 66% 62%, 72% 62%, 72% 69%, 82% 69%, 82% 55%,
    87% 55%, 87% 70%, 93% 70%, 93% 60%, 100% 60%, 100% 100%, 0 100%);
  --scene-light: radial-gradient(ellipse 15% 21% at 72% 41%, #0b0c1e 51%, #d6dcff81 57%, #9f416f5e 66%, transparent 83%),
    linear-gradient(143deg, transparent 47%, #dee0ff45 48%, #9b4ecf1a 49%, transparent 51%);
  --scene-light-motion: spirit-gate;
  --scene-particle-motion: film-dust;
  --scene-particle-time: 13s;
}

body[data-anime="dragon ball z"] .anime-atmosphere {
  --scene-ink: #120b15;
  --scene-sky: #332238;
  --scene-floor: #140c15;
  --scene-speck: #c5edff;
  --scene-speck-opacity: .65;
  --scene-landscape: linear-gradient(162deg, #ac634a77, #281828 62%, #110b17 84%);
  --scene-profile: polygon(0 67%, 9% 63%, 16% 42%, 22% 41%, 26% 53%, 34% 56%, 43% 77%, 55% 81%, 65% 76%, 69% 67%, 80% 62%,
    85% 43%, 93% 43%, 95% 52%, 100% 51%, 100% 100%, 0 100%);
  --scene-light: radial-gradient(ellipse 29% 24% at 73% 67%, #afe8ff81, #41a4ed39 47%, transparent 79%),
    repeating-conic-gradient(from 77deg at 73% 67%, transparent 0deg 13deg, #7dd2ff20 13.5deg 14deg, transparent 15deg 21deg);
  --scene-light-motion: ki-pulse;
  --scene-light-time: 6s;
  --scene-particle-motion: rising-embers;
  --scene-particle-time: 8s;
}

body[data-anime="demon slayer"] .anime-atmosphere {
  --scene-ink: #090b18;
  --scene-sky: #17383e;
  --scene-floor: #090c1c;
  --scene-speck: #f7a4eb;
  --scene-speck-opacity: .63;
  --scene-landscape: linear-gradient(160deg, #286d626b, #0d2029 53%, #090e1c 81%);
  --scene-profile: polygon(0 67%, 8% 54%, 6% 57%, 12% 36%, 19% 56%, 16% 54%, 24% 73%, 39% 60%, 44% 72%, 58% 66%,
    68% 53%, 78% 66%, 85% 50%, 82% 51%, 89% 33%, 95% 54%, 93% 52%, 100% 65%, 100% 100%, 0 100%);
  --scene-light: radial-gradient(circle at 71% 38%, #eee3ff96 0 2.7%, #ad90d848 2.9%, transparent 12%),
    radial-gradient(ellipse 58% 4% at 47% 63%, #62d6d963, transparent 96%),
    radial-gradient(ellipse 42% 5% at 68% 75%, #a48bef31, transparent 90%);
  --scene-light-motion: forest-mist;
  --scene-light-time: 16s;
  --scene-particles: radial-gradient(ellipse at 19% 37%, #e2b7ffb6 0 1.8px, transparent 2.8px),
    radial-gradient(ellipse at 76% 13%, var(--scene-speck) 0 1.2px, transparent 3px);
  --scene-particle-motion: wisteria-fall;
  --scene-particle-time: 18s;
}

body[data-anime="jujutsu kaisen"] .anime-atmosphere {
  --scene-ink: #080719;
  --scene-sky: #29204b;
  --scene-floor: #070915;
  --scene-speck-opacity: .36;
  --scene-landscape: repeating-linear-gradient(90deg, #111229 0 18px, #272135 19px 22px, #0b0e1e 24px 42px);
  --scene-profile: polygon(0 53%, 7% 53%, 7% 74%, 13% 74%, 13% 64%, 23% 64%, 23% 83%, 35% 83%, 35% 57%, 43% 57%, 43% 71%,
    50% 71%, 50% 79%, 57% 79%, 57% 62%, 62% 62%, 62% 77%, 69% 77%, 69% 46%, 79% 46%, 79% 64%, 87% 64%, 87% 53%,
    93% 53%, 93% 73%, 100% 73%, 100% 100%, 0 100%);
  --scene-light: radial-gradient(circle at 69% 45%, #7860ff5c, #5044db3c 12%, transparent 30%),
    repeating-radial-gradient(circle at 69% 45%, transparent 0 47px, #8b76e43c 50px, transparent 54px 76px);
  --scene-light-motion: cursed-energy;
  --scene-light-time: 10s;
  --scene-particles: repeating-linear-gradient(119deg, transparent 0 23px, #b9b1ec50 24px, transparent 25px 46px);
  --scene-particle-size: 176px 240px;
  --scene-particle-motion: city-rain;
  --scene-particle-time: 7s;
}

body[data-anime="hunter x hunter"] .anime-atmosphere {
  --scene-ink: #081613;
  --scene-sky: #18443a;
  --scene-floor: #081314;
  --scene-speck: #bfebad;
  --scene-landscape: linear-gradient(145deg, #6290768b, #1f523d 36%, #0b231e 56%, #081916 81%);
  --scene-profile: polygon(0 82%, 12% 65%, 19% 70%, 31% 42%, 35% 47%, 46% 70%, 55% 72%, 67% 57%, 74% 64%, 83% 37%,
    90% 51%, 94% 68%, 100% 57%, 100% 100%, 0 100%);
  --scene-light: radial-gradient(ellipse 30% 10% at 60% 65%, #82d5af75, transparent 83%),
    radial-gradient(ellipse 29% 24% at 67% 50%, #96bbad4d, transparent 89%),
    radial-gradient(ellipse 43% 5% at 62% 77%, #9dd9b959, transparent 89%);
  --scene-light-motion: forest-mist;
  --scene-particle-motion: forest-pollen;
  --scene-particle-time: 14s;
}

body[data-anime="my hero academia"] .anime-atmosphere {
  --scene-ink: #070e1d;
  --scene-sky: #25446a;
  --scene-floor: #101325;
  --scene-speck: #d0eeff;
  --scene-landscape: repeating-linear-gradient(90deg, #13243a 0 15px, #1f3750 16px 22px, #122239 23px 35px);
  --scene-profile: polygon(0 72%, 8% 72%, 8% 62%, 14% 62%, 14% 78%, 23% 78%, 23% 64%, 31% 64%, 31% 73%, 48% 73%, 48% 53%,
    52% 53%, 52% 47%, 57% 47%, 57% 53%, 62% 53%, 62% 67%, 74% 67%, 74% 79%, 84% 79%, 84% 58%, 89% 58%, 89% 72%,
    100% 72%, 100% 100%, 0 100%);
  --scene-light: radial-gradient(ellipse 30% 25% at 70% 58%, #f78d9448, transparent 89%),
    repeating-conic-gradient(from 5deg at 70% 60%, transparent 0deg 8deg, #addaff32 8.3deg 8.7deg, transparent 9deg 17deg);
  --scene-light-motion: action-rays;
  --scene-light-time: 14s;
}

body[data-anime="fullmetal alchemist: brotherhood"] .anime-atmosphere {
  --scene-ink: #110c12;
  --scene-sky: #403041;
  --scene-floor: #131013;
  --scene-speck: #ffd2a3;
  --scene-landscape: linear-gradient(13deg, #161015 3%, #37232f 45%, transparent 68%);
  --scene-light: radial-gradient(circle at 50% 50%, transparent 0 18%, #d4a5889f 18.2%, transparent 18.55% 22%, #baa37d9d 22.2%, transparent 22.65%),
    conic-gradient(from 30deg at 50% 50%, transparent 0deg 58.5deg, #e4ba9f85 60deg, transparent 61.5deg 118.5deg,
      #e9bb9c75 120deg, transparent 121.5deg 178.5deg, #d4a78375 180deg, transparent 181.5deg 238.5deg,
      #ebbb9c7d 240deg, transparent 241.5deg 298.5deg, #edd1b282 300deg, transparent 301.5deg 358.5deg, #e2c09b84 359deg),
    radial-gradient(circle at 50% 50%, #c9674d42, transparent 31%);
  --scene-light-motion: alchemy-circle;
  --scene-light-time: 38s;
}

body[data-anime="fullmetal alchemist: brotherhood"] .anime-atmosphere-light {
  inset: 26% auto auto 57%;
  width: min(49vw, 67vh);
  aspect-ratio: 1;
  mask-image: radial-gradient(circle, #000 0 52%, transparent 71%);
  animation-timing-function: linear;
}

@keyframes projector-drift {
  from { transform: translate(-7%, -5%) rotate(-25deg) scale(.96); opacity: .56; }
  to { transform: translate(7%, 8%) rotate(-12deg) scale(1.18); opacity: .98; }
}

@keyframes film-dust {
  0% { transform: translate(-3%, 7%); opacity: 0; }
  20%, 70% { opacity: var(--scene-speck-opacity, .4); }
  100% { transform: translate(10%, -7%); opacity: 0; }
}

@keyframes titan-wall {
  from { transform: scale(1.015); }
  to { transform: translate(-2%, .7%) scale(1.1); }
}

@keyframes firelight {
  0%, 100% { transform: translate(-3%, 4%) rotate(-29deg); opacity: .7; }
  22%, 75% { opacity: .4; }
  43% { transform: translate(5%, -8%) rotate(9deg); opacity: .91; }
}

@keyframes rising-embers {
  0% { transform: translate(-7%, 15%); opacity: 0; }
  19%, 66% { opacity: var(--scene-speck-opacity); }
  100% { transform: translate(13%, -18%); opacity: 0; }
}

@keyframes spirit-gate {
  from { transform: translateX(-5%) rotate(-5deg) scale(.91); opacity: .58; }
  to { transform: translate(3%, 4%) rotate(5deg) scale(1.13); opacity: 1; }
}

@keyframes ki-pulse {
  0%, 100% { transform: scale(.88); opacity: .46; }
  58% { transform: scale(1.20); opacity: .96; }
}

@keyframes forest-mist {
  from { transform: translateX(-8%) scale(1.05); opacity: .53; }
  to { transform: translate(9%, 2%) scale(1.14); opacity: .96; }
}

@keyframes wisteria-fall {
  0% { transform: translate(-9%, -15%) rotate(-6deg); opacity: 0; }
  24%, 80% { opacity: var(--scene-speck-opacity); }
  100% { transform: translate(10%, 17%) rotate(8deg); opacity: 0; }
}

@keyframes cursed-energy {
  0%, 100% { transform: translateX(-4%) scale(.89); opacity: .43; }
  42%, 66% { transform: translateX(5%) scale(1.14); opacity: .89; }
}

@keyframes city-rain {
  0% { transform: translate(4%, -12%); opacity: 0; }
  15%, 80% { opacity: var(--scene-speck-opacity); }
  100% { transform: translate(-7%, 13%); opacity: 0; }
}

@keyframes forest-pollen {
  0% { transform: translate(-15%, -2%); opacity: 0; }
  34%, 70% { opacity: .59; }
  100% { transform: translate(16%, 9%); opacity: 0; }
}

@keyframes action-rays {
  from { transform: translate(3%, -2%) scale(.85); opacity: .48; }
  to { transform: translate(-5%, 2%) scale(1.21); opacity: .92; }
}

@keyframes alchemy-circle {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}

@media (max-width: 600px) {
  .anime-atmosphere::after {
    background: linear-gradient(180deg, #03050d5c, transparent 47%, #03050d90),
      radial-gradient(ellipse at 66% 51%, transparent 24%, #03050d87 100%);
  }
  body:is([data-anime="attack on titan"], [data-anime-art="attack-on-titan"]) .anime-atmosphere {
    --scene-landscape: linear-gradient(155deg, #10090f34, #10090fbd 69%, #10090f 97%),
      url("/art/attack-on-titan-hero.jpg") center 42% / cover no-repeat;
  }
  body[data-anime="fullmetal alchemist: brotherhood"] .anime-atmosphere-light { left: 42%; width: 75vw; }
}

@media (prefers-reduced-motion: reduce) {
  .anime-atmosphere-landscape, .anime-atmosphere-light, .anime-atmosphere-particles { animation: none; }
  .anime-atmosphere-light { transform: rotate(-17deg); }
}