/* OTO · Temas de anime — wallpaper vivo (personagem em profundidade) + efeito único e leve por anime, cores tiradas da própria imagem */
@keyframes otoBodyPan { from { background-position: center 32%; } to { background-position: 58% 40%; } }
@keyframes otoHeroBreath { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.055) translate3d(-1.1%, .9%, 0); } }
@keyframes otoHeroFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.004); } 50% { transform: translate3d(-9px, -7px, 0) scale(1.03); } }
@keyframes otoFocusGlow { 0%, 100% { opacity: .1; } 50% { opacity: .24; } }
@keyframes otoAnimeRise { from { background-position: 0 0; } to { background-position: 0 -520px; } }
@keyframes otoAnimeFall { from { background-position: 0 0; } to { background-position: 70px 520px; } }
@keyframes otoAnimeFallFast { from { background-position: 0 0; } to { background-position: 0 320px; } }
@keyframes otoAnimeDrift { from { background-position: 0 0; } to { background-position: 720px 0; } }
@keyframes otoAnimePulse { 0%, 100% { opacity: .16; transform: scale(1); } 50% { opacity: .4; transform: scale(1.06); } }
@keyframes otoAnimeBreathe { 0%, 100% { opacity: .16; transform: scale(1); } 50% { opacity: .34; transform: scale(1.07); } }
@keyframes otoAnimeFlicker { 0%, 100% { opacity: 0; } 5% { opacity: .4; } 7% { opacity: 0; } 13% { opacity: .3; } 15% { opacity: 0; } 46% { opacity: 0; } 48% { opacity: .38; } 50% { opacity: 0; } }
@keyframes otoAnimeScan { from { background-position: 0 0; } to { background-position: 0 240px; } }
@keyframes otoAnimeGrid { from { background-position: 0 0; } to { background-position: 64px 64px; } }
@keyframes otoAnimeStreak { from { background-position: 0 0; } to { background-position: 560px 0; } }
@keyframes otoAnimeTwinkle { 0%, 100% { opacity: .12; } 50% { opacity: .5; } }
@keyframes otoAnimeSpin { to { transform: rotate(360deg); } }
@keyframes otoAnimeSpinReverse { to { transform: rotate(-360deg); } }
@keyframes otoAnimeSpinDiamond { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
@keyframes otoAuraCharge { 0% { opacity: .16; transform: scale(1); } 65% { opacity: .36; transform: scale(1.08); } 100% { opacity: .5; transform: scale(1.13); } }
@keyframes otoHeartbeat { 0%, 100% { opacity: .12; } 10% { opacity: .42; } 18% { opacity: .17; } 26% { opacity: .36; } 36% { opacity: .14; } }
@keyframes otoRingPulse { 0% { transform: translate(-50%, -50%) scale(.55); opacity: .4; } 100% { transform: translate(-50%, -50%) scale(1.75); opacity: 0; } }
@keyframes otoRingBurst { 0% { transform: translate(-50%, -50%) scale(.35); opacity: .5; } 60% { opacity: .24; } 100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; } }
@keyframes otoSweepDown { from { transform: translateY(-160px); } to { transform: translateY(105vh); } }
@keyframes otoJitter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } }
@keyframes otoGlitch { 0%, 100% { transform: translateX(0); background-position: 0 0; } 7% { transform: translateX(-5px); } 9% { transform: translateX(4px); background-position: 0 60px; } 12% { transform: translateX(0); } 48% { background-position: 0 140px; } 52% { transform: translateX(3px); } 55% { transform: translateX(0); } }
@keyframes otoSparkFlash { 0%, 100% { opacity: .08; } 6% { opacity: .5; } 9% { opacity: .12; } 38% { opacity: .14; } 44% { opacity: .46; } 49% { opacity: .1; } 76% { opacity: .16; } 82% { opacity: .42; } 88% { opacity: .08; } }
@keyframes otoBolt { 0%, 100% { opacity: 0; background-position: 0 0, 0 0; } 6% { opacity: .55; background-position: -30px 0, 0 0; } 8% { opacity: 0; } 42% { opacity: 0; } 45% { opacity: .48; background-position: 24px 0, 0 0; } 48% { opacity: 0; } 80% { opacity: .4; background-position: -14px 0, 0 0; } 83% { opacity: 0; } }
@keyframes otoSlash { 0% { background-position: 0 0; } 20% { background-position: 560px 0; } 100% { background-position: 560px 0; } }
@keyframes otoHazardMove { from { background-position: 0 0; } to { background-position: 120px 120px; } }
@keyframes otoColumns { from { background-position: 0 0; } to { background-position: 240px 0; } }
@keyframes otoFxWaves { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 190px 0, -240px 0, 0 -460px; } }
@keyframes otoFxOcean { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 260px 0, -300px 0, 0 -520px; } }
@keyframes otoFxKi { from { background-position: 0 0; } to { background-position: 40px -380px; } }
@keyframes otoFxClouds { from { background-position: 0 0, 0 0; } to { background-position: 720px 0, 70px 420px; } }

.swatch[class*="anime-"]:before { display: none; content: none; }
.oto-anime-label { grid-column: 1 / -1; margin: 8px 2px 0; font-size: 10px; letter-spacing: 1.6px; color: #8c91a3; font-weight: 700; }
.modal-backdrop { overflow-y: auto; align-items: flex-start; }
.modal { margin: auto; }

/* Wallpaper vivo: fundo panorâmico lento, cena respirando no foco, personagem flutuando em profundidade (máscara) e brilho da cor do anime seguindo o mouse */
body[data-theme^="anime-"] {
  background-color: var(--otoBase, #0b0c16);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--otoBase) 55%, transparent), color-mix(in srgb, var(--otoBase) 88%, transparent)), var(--otoImg);
  background-size: cover;
  background-position: center 32%;
  background-attachment: fixed;
  animation: otoBodyPan 110s ease-in-out infinite alternate;
}
body[data-theme^="anime-"] .hero-bg {
  background-color: var(--otoBase, #0b0c16);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--otoBase) 94%, transparent) 0%, color-mix(in srgb, var(--otoBase) 76%, transparent) 36%, color-mix(in srgb, var(--otoBase) 42%, transparent) 64%, transparent 100%), linear-gradient(0deg, #080a13, transparent 72%), var(--otoImg);
  background-size: cover;
  background-position: center, center, var(--otoHeroPos, right 30%);
  background-repeat: no-repeat;
  animation: otoHeroBreath 36s ease-in-out infinite alternate;
  transform-origin: var(--otoFocus, 60% 45%);
  will-change: transform;
}
body[data-theme^="anime-"] .hero-bg::before {
  content: ''; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; clip-path: none; filter: none;
  background-image: var(--otoImg);
  background-size: cover;
  background-position: var(--otoHeroPos, right 30%);
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 46% 64% at var(--otoFocus, 60% 45%), #000 32%, rgba(0, 0, 0, .45) 58%, transparent 76%);
  mask-image: radial-gradient(ellipse 46% 64% at var(--otoFocus, 60% 45%), #000 32%, rgba(0, 0, 0, .45) 58%, transparent 76%);
  animation: otoHeroFloat 19s ease-in-out infinite;
  transform-origin: var(--otoFocus, 60% 45%);
  will-change: transform;
  pointer-events: none;
}
body[data-theme^="anime-"] .hero-bg::after {
  content: ''; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; clip-path: none; filter: none; -webkit-mask-image: none; mask-image: none;
  background-image: radial-gradient(ellipse 42% 58% at var(--otoFocus, 60% 45%), var(--glow, rgba(120, 150, 255, .2)), transparent 72%);
  mix-blend-mode: screen;
  animation: otoFocusGlow 9s ease-in-out infinite;
  transform: translate3d(calc(var(--otoParX, 0px) * .45), calc(var(--otoParY, 0px) * .45), 0);
  transition: transform .4s ease-out;
  pointer-events: none;
}
body[data-theme^="anime-"] .ambient { height: 100%; transform: translate3d(var(--otoParX, 0px), var(--otoParY, 0px), 0); transition: transform .35s ease-out, background .5s; }
body[data-theme^="anime-"] .ambient::before,
body[data-theme^="anime-"] .ambient::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
body[data-theme^="anime-"] .oto-petals { display: none; }

/* Temas VÍDEO: partículas geradas em canvas somam luz sobre a imagem (screen), com paralaxe leve */
.oto-video-wrap { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.oto-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: screen; transform: translate3d(calc(var(--otoParX, 0px) * .3), calc(var(--otoParY, 0px) * .3), 0); transition: transform .45s ease-out; }
body.oto-video-theme .oto-video-wrap { opacity: 1; }
body.oto-video-theme .ambient::before,
body.oto-video-theme .ambient::after { display: none; }
.theme { position: relative; }
.oto-video-badge { position: absolute; top: 9px; right: 9px; z-index: 2; font-size: 9px; font-weight: 700; letter-spacing: .6px; color: #fff; background: rgba(10, 12, 20, .55); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: 3px 8px; backdrop-filter: blur(6px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  body[data-theme^="anime-"],
  body[data-theme^="anime-"] .hero-bg,
  body[data-theme^="anime-"] .hero-bg::before,
  body[data-theme^="anime-"] .hero-bg::after,
  body[data-theme^="anime-"] .ambient,
  body[data-theme^="anime-"] .ambient::before,
  body[data-theme^="anime-"] .ambient::after { animation: none !important; }
  .oto-video-wrap video { transform: none; }
}

/* Demon Slayer · ondas azul-petróleo da janela + brasas âmbar do Tanjiro */
.swatch.anime-demon-slayer, body[data-theme="anime-demon-slayer"] { --otoImg: url('assets/anime/demon-slayer.jpg'); --otoBase: #0a0e14; --otoHeroPos: right 30%; --otoFocus: 52% 46%; --accent: #7fc4e0; --glow: rgba(90, 170, 210, .26); }
.swatch.anime-demon-slayer { background-image: linear-gradient(0deg, rgba(10, 14, 20, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-demon-slayer"] .ambient::after { background-image: repeating-linear-gradient(95deg, transparent 0 80px, rgba(106, 176, 204, .10) 80px 90px, transparent 90px 200px), repeating-linear-gradient(85deg, transparent 0 100px, rgba(127, 196, 224, .07) 100px 108px, transparent 108px 250px), radial-gradient(2px 2px at 18% 92%, rgba(217, 143, 74, .55), transparent 60%), radial-gradient(2px 2px at 62% 78%, rgba(200, 120, 60, .45), transparent 62%), radial-gradient(2px 2px at 84% 88%, rgba(217, 143, 74, .4), transparent 60%); background-size: 200px 200px, 250px 250px, 460px 460px; opacity: .4; animation: otoFxWaves 26s linear infinite; }

/* One Piece · correntes douradas e turquesa da própria arte + bolhas */
.swatch.anime-one-piece, body[data-theme="anime-one-piece"] { --otoImg: url('assets/anime/one-piece.jpg'); --otoBase: #100d0a; --otoHeroPos: right 32%; --otoFocus: 64% 48%; --accent: #e8b64c; --glow: rgba(230, 180, 80, .24); }
.swatch.anime-one-piece { background-image: linear-gradient(0deg, rgba(16, 13, 10, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 32%; }
body[data-theme="anime-one-piece"] .ambient::after { background-image: repeating-linear-gradient(90deg, transparent 0 130px, rgba(201, 162, 78, .09) 130px 142px, transparent 142px 270px), repeating-linear-gradient(90deg, transparent 0 160px, rgba(127, 209, 237, .07) 160px 170px, transparent 170px 310px), radial-gradient(4px 4px at 20% 90%, rgba(190, 156, 83, .38), transparent 65%), radial-gradient(5px 5px at 66% 82%, rgba(127, 209, 237, .3), transparent 66%), radial-gradient(3px 3px at 40% 97%, rgba(186, 89, 65, .32), transparent 64%); background-size: 270px 270px, 310px 310px, 520px 520px; opacity: .38; animation: otoFxOcean 28s linear infinite; }

/* Black Clover · círculos mágicos âmbar e azul-aço girando em sentidos opostos */
.swatch.anime-black-clover, body[data-theme="anime-black-clover"] { --otoImg: url('assets/anime/black-clover.jpg'); --otoBase: #0c0e10; --otoHeroPos: right 30%; --otoFocus: 58% 45%; --accent: #d9a06a; --glow: rgba(210, 150, 95, .24); }
.swatch.anime-black-clover { background-image: linear-gradient(0deg, rgba(12, 14, 16, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-black-clover"] .ambient::before { inset: auto; left: 50%; top: 44%; width: 430px; height: 430px; margin: -215px 0 0 -215px; border: 2px dashed rgba(207, 160, 106, .22); border-radius: 50%; animation: otoAnimeSpin 60s linear infinite; opacity: .6; }
body[data-theme="anime-black-clover"] .ambient::after { inset: auto; left: 50%; top: 44%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border: 1px dotted rgba(125, 156, 192, .25); border-radius: 50%; background-image: radial-gradient(2px 2px at 15% 25%, rgba(207, 160, 106, .5), transparent 60%), radial-gradient(2px 2px at 60% 70%, rgba(125, 156, 192, .45), transparent 60%), radial-gradient(3px 3px at 80% 18%, rgba(217, 160, 106, .4), transparent 62%); background-size: 300px 300px; animation: otoAnimeSpinReverse 40s linear infinite; opacity: .55; }

/* Attack on Titan · rajadas cinza da muralha + poeira azulada do céu */
.swatch.anime-attack-on-titan, body[data-theme="anime-attack-on-titan"] { --otoImg: url('assets/anime/attack-on-titan.jpg'); --otoBase: #0b0d11; --otoHeroPos: right 35%; --otoFocus: 60% 42%; --accent: #9db8e8; --glow: rgba(130, 155, 210, .22); }
.swatch.anime-attack-on-titan { background-image: linear-gradient(0deg, rgba(11, 13, 17, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }
body[data-theme="anime-attack-on-titan"] .ambient::before { background-image: repeating-linear-gradient(88deg, transparent 0 270px, rgba(195, 205, 216, .09) 270px 280px, transparent 280px 570px); background-size: 570px 570px; opacity: .5; animation: otoAnimeStreak 16s linear infinite; }
body[data-theme="anime-attack-on-titan"] .ambient::after { background-image: radial-gradient(2px 2px at 22% 8%, rgba(143, 163, 204, .5), transparent 60%), radial-gradient(2px 2px at 58% 30%, rgba(107, 126, 180, .42), transparent 60%), radial-gradient(3px 3px at 82% 12%, rgba(195, 205, 216, .4), transparent 62%), radial-gradient(2px 2px at 40% 45%, rgba(143, 163, 204, .4), transparent 60%); background-size: 480px 480px; opacity: .32; animation: otoAnimeFall 36s linear infinite; }

/* Dragon Ball · aura azul do céu carregando + faíscas de ki laranja do Goku */
.swatch.anime-dragon-ball, body[data-theme="anime-dragon-ball"] { --otoImg: url('assets/anime/dragon-ball.jpg'); --otoBase: #0a0d12; --otoHeroPos: right 35%; --otoFocus: 58% 46%; --accent: #7fb0e8; --glow: rgba(100, 150, 215, .24); }
.swatch.anime-dragon-ball { background-image: linear-gradient(0deg, rgba(10, 13, 18, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }
body[data-theme="anime-dragon-ball"] .ambient::before { background: radial-gradient(ellipse at 50% 42%, rgba(116, 161, 200, .24), transparent 60%); animation: otoAuraCharge 6s ease-in-out infinite alternate; }
body[data-theme="anime-dragon-ball"] .ambient::after { background-image: radial-gradient(2px 2px at 24% 90%, rgba(201, 133, 92, .5), transparent 60%), radial-gradient(2px 2px at 58% 82%, rgba(116, 161, 200, .45), transparent 60%), radial-gradient(3px 3px at 80% 92%, rgba(171, 102, 77, .42), transparent 62%); background-size: 380px 380px; opacity: .42; animation: otoFxKi 12s linear infinite; }

/* Jujutsu Kaisen · radar azul-aço da cena + brasas âmbar subindo */
.swatch.anime-jujutsu-kaisen, body[data-theme="anime-jujutsu-kaisen"] { --otoImg: url('assets/anime/jujutsu-kaisen.jpg'); --otoBase: #0a0b0d; --otoHeroPos: right 30%; --otoFocus: 55% 45%; --accent: #a8765a; --glow: rgba(168, 118, 90, .24); }
.swatch.anime-jujutsu-kaisen { background-image: linear-gradient(0deg, rgba(10, 11, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-jujutsu-kaisen"] .ambient::before { background: conic-gradient(from 0deg at 50% 42%, transparent 0 296deg, rgba(92, 127, 160, .16) 320deg 348deg, transparent 360deg); animation: otoAnimeSpin 30s linear infinite; opacity: .7; }
body[data-theme="anime-jujutsu-kaisen"] .ambient::after { background-image: radial-gradient(2px 2px at 30% 88%, rgba(168, 118, 90, .5), transparent 60%), radial-gradient(2px 2px at 70% 92%, rgba(111, 77, 65, .45), transparent 60%), radial-gradient(2px 2px at 50% 80%, rgba(92, 127, 160, .4), transparent 60%); background-size: 420px 420px; opacity: .38; animation: otoAnimeRise 22s linear infinite; }

/* My Hero Academia · relâmpagos amarelos da cena vermelha + faíscas do Deku */
.swatch.anime-my-hero-academia, body[data-theme="anime-my-hero-academia"] { --otoImg: url('assets/anime/my-hero-academia.jpg'); --otoBase: #140a08; --otoHeroPos: right 30%; --otoFocus: 60% 46%; --accent: #e8c84a; --glow: rgba(220, 190, 70, .24); }
.swatch.anime-my-hero-academia { background-image: linear-gradient(0deg, rgba(20, 10, 8, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-my-hero-academia"] .ambient::before { background-image: linear-gradient(115deg, transparent 42%, rgba(232, 200, 74, .16) 49%, rgba(255, 255, 255, .2) 50%, rgba(232, 200, 74, .16) 51%, transparent 58%), linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .14) 44%, transparent 52%); animation: otoBolt 9s linear infinite; }
body[data-theme="anime-my-hero-academia"] .ambient::after { background-image: radial-gradient(2px 2px at 26% 86%, rgba(232, 200, 74, .5), transparent 60%), radial-gradient(2px 2px at 64% 90%, rgba(217, 84, 74, .45), transparent 60%), radial-gradient(2px 2px at 82% 84%, rgba(200, 179, 67, .4), transparent 60%); background-size: 360px 360px; opacity: .38; animation: otoAnimeRise 10s linear infinite; }

/* Death Note · scanlines douradas da cena + glitch azul-noite */
.swatch.anime-death-note, body[data-theme="anime-death-note"] { --otoImg: url('assets/anime/death-note.jpg'); --otoBase: #0b0a09; --otoHeroPos: right 30%; --otoFocus: 56% 45%; --accent: #c9a06a; --glow: rgba(180, 140, 90, .22); }
.swatch.anime-death-note { background-image: linear-gradient(0deg, rgba(11, 10, 9, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-death-note"] .ambient::before { background-image: repeating-linear-gradient(0deg, rgba(167, 134, 92, .10) 0 2px, transparent 2px 7px); background-size: 100% 240px; opacity: .4; animation: otoAnimeScan 6s linear infinite; }
body[data-theme="anime-death-note"] .ambient::after { background-image: repeating-linear-gradient(0deg, transparent 0 18px, rgba(167, 134, 92, .12) 18px 22px, transparent 22px 88px, rgba(74, 90, 138, .09) 88px 91px, transparent 91px 140px); background-size: 100% 140px; opacity: .5; animation: otoGlitch 8s steps(1, end) infinite; }

/* Fullmetal Alchemist · círculo de transmutação azul da cena + brasas terracota */
.swatch.anime-fullmetal-alchemist, body[data-theme="anime-fullmetal-alchemist"] { --otoImg: url('assets/anime/fullmetal-alchemist.jpg'); --otoBase: #0d0b09; --otoHeroPos: right 30%; --otoFocus: 56% 46%; --accent: #d98a6a; --glow: rgba(200, 120, 95, .22); }
.swatch.anime-fullmetal-alchemist { background-image: linear-gradient(0deg, rgba(13, 11, 9, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-fullmetal-alchemist"] .ambient::before { inset: auto; left: 50%; top: 46%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border: 2px solid rgba(127, 156, 201, .22); border-radius: 14%; animation: otoAnimeSpinDiamond 50s linear infinite; opacity: .65; }
body[data-theme="anime-fullmetal-alchemist"] .ambient::after { background-image: radial-gradient(ellipse at 50% 78%, rgba(127, 156, 201, .15), transparent 55%), radial-gradient(2px 2px at 20% 90%, rgba(201, 133, 92, .45), transparent 60%), radial-gradient(2px 2px at 60% 84%, rgba(157, 94, 69, .4), transparent 60%), radial-gradient(2px 2px at 84% 92%, rgba(155, 79, 90, .38), transparent 60%); background-size: 100% 100%, 400px 400px, 400px 400px, 400px 400px; animation: otoAnimePulse 7s ease-in-out infinite, otoAnimeRise 18s linear infinite; }

/* Tokyo Ghoul · batimento carmesim do kagune + partículas roxas da cena */
.swatch.anime-tokyo-ghoul, body[data-theme="anime-tokyo-ghoul"] { --otoImg: url('assets/anime/tokyo-ghoul.jpg'); --otoBase: #0d0a10; --otoHeroPos: right 30%; --otoFocus: 52% 46%; --accent: #d94a6a; --glow: rgba(173, 49, 74, .26); }
.swatch.anime-tokyo-ghoul { background-image: linear-gradient(0deg, rgba(13, 10, 16, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-tokyo-ghoul"] .ambient::before { background: radial-gradient(ellipse at 50% 40%, rgba(173, 49, 74, .26), transparent 62%); animation: otoHeartbeat 2.8s ease-in-out infinite; }
body[data-theme="anime-tokyo-ghoul"] .ambient::after { background-image: radial-gradient(2px 2px at 32% 88%, rgba(173, 49, 74, .45), transparent 60%), radial-gradient(2px 2px at 68% 92%, rgba(106, 95, 168, .4), transparent 60%); background-size: 440px 440px; opacity: .34; animation: otoAnimeRise 20s linear infinite; }

/* Hunter x Hunter · aura âmbar da cena + anéis azuis de nen */
.swatch.anime-hunter-x-hunter, body[data-theme="anime-hunter-x-hunter"] { --otoImg: url('assets/anime/hunter-x-hunter.jpg'); --otoBase: #0f0c09; --otoHeroPos: right 30%; --otoFocus: 58% 46%; --accent: #d9a05a; --glow: rgba(200, 150, 85, .24); }
.swatch.anime-hunter-x-hunter { background-image: linear-gradient(0deg, rgba(15, 12, 9, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-hunter-x-hunter"] .ambient::before { background: radial-gradient(ellipse at 50% 42%, rgba(201, 154, 92, .22), transparent 60%); animation: otoAnimeBreathe 8s ease-in-out infinite; }
body[data-theme="anime-hunter-x-hunter"] .ambient::after { inset: auto; left: 50%; top: 42%; width: 280px; height: 280px; border: 2px solid rgba(74, 114, 192, .28); border-radius: 50%; animation: otoRingPulse 5.5s ease-out infinite; }

/* Bleach · colunas azul-aço da cena + partículas espirituais claras */
.swatch.anime-bleach, body[data-theme="anime-bleach"] { --otoImg: url('assets/anime/bleach.jpg'); --otoBase: #0a0d10; --otoHeroPos: right 30%; --otoFocus: 60% 44%; --accent: #9fc4d9; --glow: rgba(120, 165, 195, .22); }
.swatch.anime-bleach { background-image: linear-gradient(0deg, rgba(10, 13, 16, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-bleach"] .ambient::before { background-image: repeating-linear-gradient(90deg, transparent 0 118px, rgba(106, 143, 168, .07) 118px 124px, transparent 124px 240px); background-size: 240px 240px; opacity: .7; animation: otoColumns 36s linear infinite; }
body[data-theme="anime-bleach"] .ambient::after { background-image: radial-gradient(2px 2px at 18% 92%, rgba(208, 228, 238, .45), transparent 60%), radial-gradient(2px 2px at 56% 82%, rgba(106, 143, 168, .42), transparent 60%), radial-gradient(3px 3px at 80% 90%, rgba(255, 255, 255, .38), transparent 62%), radial-gradient(2px 2px at 38% 96%, rgba(141, 86, 75, .35), transparent 60%); background-size: 430px 430px; opacity: .4; animation: otoAnimeRise 16s linear infinite; }

/* Fairy Tail · pó de fada rosa e laranja cintilando devagar */
.swatch.anime-fairy-tail, body[data-theme="anime-fairy-tail"] { --otoImg: url('assets/anime/fairy-tail.jpg'); --otoBase: #120d0c; --otoHeroPos: right 30%; --otoFocus: 58% 46%; --accent: #e88a9a; --glow: rgba(214, 62, 97, .22); }
.swatch.anime-fairy-tail { background-image: linear-gradient(0deg, rgba(18, 13, 12, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-fairy-tail"] .ambient::after { background-image: radial-gradient(2px 2px at 16% 28%, rgba(230, 196, 131, .42), transparent 60%), radial-gradient(3px 3px at 54% 58%, rgba(214, 62, 97, .38), transparent 62%), radial-gradient(2px 2px at 82% 22%, rgba(230, 160, 184, .4), transparent 60%), radial-gradient(2px 2px at 36% 82%, rgba(210, 89, 50, .38), transparent 60%); background-size: 310px 310px; opacity: .36; animation: otoAnimeTwinkle 6s ease-in-out infinite, otoAnimeFall 30s linear infinite; }

/* Sword Art Online · grade azul-aço + varredura verde-água do mundo VR */
.swatch.anime-sword-art-online, body[data-theme="anime-sword-art-online"] { --otoImg: url('assets/anime/sword-art-online.jpg'); --otoBase: #0a0d10; --otoHeroPos: right 30%; --otoFocus: 60% 44%; --accent: #7fc4d9; --glow: rgba(90, 170, 200, .22); }
.swatch.anime-sword-art-online { background-image: linear-gradient(0deg, rgba(10, 13, 16, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-sword-art-online"] .ambient::after { background-image: linear-gradient(rgba(106, 168, 192, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(106, 168, 192, .12) 1px, transparent 1px); background-size: 64px 64px; opacity: .4; animation: otoAnimeGrid 18s linear infinite; }
body[data-theme="anime-sword-art-online"] .ambient::before { inset: 0 0 auto 0; height: 160px; background: linear-gradient(180deg, transparent, rgba(119, 184, 177, .16), transparent); opacity: .6; animation: otoSweepDown 9s linear infinite; }

/* Chainsaw Man · faíscas vermelhas e clarões âmbar da cena sombria */
.swatch.anime-chainsaw-man, body[data-theme="anime-chainsaw-man"] { --otoImg: url('assets/anime/chainsaw-man.jpg'); --otoBase: #100b0c; --otoHeroPos: right 30%; --otoFocus: 56% 46%; --accent: #d95c4a; --glow: rgba(184, 90, 74, .24); }
.swatch.anime-chainsaw-man { background-image: linear-gradient(0deg, rgba(16, 11, 12, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-chainsaw-man"] .ambient::before { background: linear-gradient(115deg, transparent 30%, rgba(184, 90, 74, .14) 46%, rgba(217, 138, 92, .16) 50%, rgba(184, 90, 74, .14) 54%, transparent 70%); animation: otoAnimeFlicker 9s linear infinite; }
body[data-theme="anime-chainsaw-man"] .ambient::after { background-image: radial-gradient(2px 2px at 24% 88%, rgba(184, 90, 74, .45), transparent 60%), radial-gradient(2px 2px at 62% 82%, rgba(217, 138, 92, .4), transparent 60%), radial-gradient(2px 2px at 84% 92%, rgba(117, 70, 74, .4), transparent 60%); background-size: 340px 340px; opacity: .4; animation: otoAnimeRise 12s linear infinite, otoJitter .24s steps(2, end) infinite; }

/* Spy x Family · mira rosa da cena quente + cintilos creme */
.swatch.anime-spy-x-family, body[data-theme="anime-spy-x-family"] { --otoImg: url('assets/anime/spy-x-family.jpg'); --otoBase: #100c0d; --otoHeroPos: right 30%; --otoFocus: 58% 46%; --accent: #e08a9a; --glow: rgba(190, 98, 111, .22); }
.swatch.anime-spy-x-family { background-image: linear-gradient(0deg, rgba(16, 12, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-spy-x-family"] .ambient::before { inset: auto; left: 14%; top: 20%; width: 330px; height: 330px; border: 1px solid rgba(190, 98, 111, .26); border-radius: 50%; background-image: linear-gradient(rgba(190, 98, 111, .22), rgba(190, 98, 111, .22)), linear-gradient(rgba(190, 98, 111, .22), rgba(190, 98, 111, .22)); background-size: 1px 62%, 62% 1px; background-position: center, center; background-repeat: no-repeat; animation: otoAnimeSpin 90s linear infinite; opacity: .4; }
body[data-theme="anime-spy-x-family"] .ambient::after { background-image: radial-gradient(2px 2px at 18% 26%, rgba(217, 201, 160, .4), transparent 60%), radial-gradient(2px 2px at 56% 60%, rgba(190, 98, 111, .38), transparent 60%), radial-gradient(3px 3px at 80% 20%, rgba(230, 196, 131, .38), transparent 62%); background-size: 290px 290px; opacity: .3; animation: otoAnimeTwinkle 7s ease-in-out infinite; }

/* Evangelion · listras de alerta laranja da cena + scanlines roxas */
.swatch.anime-evangelion, body[data-theme="anime-evangelion"] { --otoImg: url('assets/anime/evangelion.jpg'); --otoBase: #100d0a; --otoHeroPos: right 35%; --otoFocus: 58% 44%; --accent: #e88a4a; --glow: rgba(186, 125, 92, .24); }
.swatch.anime-evangelion { background-image: linear-gradient(0deg, rgba(16, 13, 10, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }
body[data-theme="anime-evangelion"] .ambient::before { background-image: repeating-linear-gradient(45deg, rgba(186, 125, 92, .07) 0 24px, transparent 24px 60px); background-size: 120px 120px; opacity: .6; animation: otoHazardMove 20s linear infinite; }
body[data-theme="anime-evangelion"] .ambient::after { background-image: repeating-linear-gradient(0deg, rgba(186, 125, 92, .10) 0 2px, transparent 2px 8px); background-size: 100% 240px; opacity: .4; animation: otoAnimeScan 8s linear infinite; }

/* Studio Ghibli · pétalas creme do campo verde + nuvens à deriva */
.swatch.anime-ghibli, body[data-theme="anime-ghibli"] { --otoImg: url('assets/anime/ghibli.jpg'); --otoBase: #0b0f0a; --otoHeroPos: right 35%; --otoFocus: 60% 50%; --accent: #c9c46a; --glow: rgba(160, 175, 95, .24); }
.swatch.anime-ghibli { background-image: linear-gradient(0deg, rgba(11, 15, 10, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }
body[data-theme="anime-ghibli"] .ambient::before { background-image: radial-gradient(2px 3px at 20% 12%, rgba(232, 224, 184, .3), transparent 65%), radial-gradient(3px 4px at 62% 30%, rgba(186, 173, 98, .26), transparent 66%), radial-gradient(2px 3px at 40% 52%, rgba(232, 224, 184, .28), transparent 65%); background-size: 400px 400px; opacity: .4; animation: otoAnimeFall 32s linear infinite; }
body[data-theme="anime-ghibli"] .ambient::after { background-image: radial-gradient(220px 90px at 20% 30%, rgba(255, 255, 255, .08), transparent 70%), radial-gradient(260px 110px at 70% 55%, rgba(255, 255, 255, .06), transparent 72%), radial-gradient(180px 80px at 45% 80%, rgba(255, 255, 255, .05), transparent 70%); background-size: 720px 720px; opacity: .7; animation: otoAnimeDrift 80s linear infinite; }

/* Sailor Moon · luar dourado da lua + estrelas azuis da noite */
.swatch.anime-sailor-moon, body[data-theme="anime-sailor-moon"] { --otoImg: url('assets/anime/sailor-moon.jpg'); --otoBase: #0a0d12; --otoHeroPos: right 32%; --otoFocus: 55% 44%; --accent: #e8d45c; --glow: rgba(215, 189, 61, .22); }
.swatch.anime-sailor-moon { background-image: linear-gradient(0deg, rgba(10, 13, 18, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 32%; }
body[data-theme="anime-sailor-moon"] .ambient::before { background: radial-gradient(circle at 82% 18%, rgba(215, 189, 61, .22), transparent 26%); animation: otoAnimeBreathe 11s ease-in-out infinite; }
body[data-theme="anime-sailor-moon"] .ambient::after { background-image: radial-gradient(2px 2px at 22% 10%, rgba(159, 196, 232, .45), transparent 60%), radial-gradient(3px 3px at 58% 24%, rgba(215, 189, 61, .38), transparent 62%), radial-gradient(2px 2px at 80% 8%, rgba(159, 196, 232, .4), transparent 60%), radial-gradient(2px 2px at 40% 38%, rgba(53, 93, 141, .45), transparent 60%); background-size: 470px 470px; opacity: .42; animation: otoAnimeFall 26s linear infinite; }

/* Pokémon · faíscas areia do entardecer + energia verde-água esparsa */
.swatch.anime-pokemon, body[data-theme="anime-pokemon"] { --otoImg: url('assets/anime/pokemon.jpg'); --otoBase: #0c0a08; --otoHeroPos: right 35%; --otoFocus: 60% 48%; --accent: #e8c45a; --glow: rgba(235, 184, 115, .24); }
.swatch.anime-pokemon { background-image: linear-gradient(0deg, rgba(12, 10, 8, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }
body[data-theme="anime-pokemon"] .ambient::before { background: linear-gradient(115deg, transparent 32%, rgba(235, 184, 115, .14) 47%, rgba(255, 255, 255, .18) 50%, rgba(235, 184, 115, .14) 53%, transparent 68%); animation: otoSparkFlash 8s linear infinite; }
body[data-theme="anime-pokemon"] .ambient::after { background-image: radial-gradient(2px 2px at 26% 88%, rgba(235, 184, 115, .45), transparent 60%), radial-gradient(2px 2px at 64% 92%, rgba(180, 121, 84, .42), transparent 60%), radial-gradient(2px 2px at 84% 86%, rgba(96, 183, 158, .38), transparent 60%); background-size: 350px 350px; opacity: .4; animation: otoAnimeTwinkle 2.4s steps(3, end) infinite, otoAnimeRise 11s linear infinite; }

/* Digimon · chuva digital laranja e rosa do portal */
.swatch.anime-digimon, body[data-theme="anime-digimon"] { --otoImg: url('assets/anime/digimon.jpg'); --otoBase: #120b07; --otoHeroPos: right 35%; --otoFocus: 58% 46%; --accent: #f3a03c; --glow: rgba(243, 156, 41, .26); }
.swatch.anime-digimon { background-image: linear-gradient(0deg, rgba(18, 11, 7, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }
body[data-theme="anime-digimon"] .ambient::after { background-image: radial-gradient(2px 10px at 12% 6%, rgba(243, 156, 41, .42), transparent 65%), radial-gradient(2px 8px at 34% 30%, rgba(192, 87, 47, .4), transparent 65%), radial-gradient(3px 12px at 56% 12%, rgba(243, 156, 41, .38), transparent 66%), radial-gradient(2px 9px at 78% 26%, rgba(221, 86, 124, .38), transparent 65%), radial-gradient(2px 8px at 92% 16%, rgba(192, 87, 47, .4), transparent 65%); background-size: 320px 320px; opacity: .45; animation: otoAnimeFallFast 10s linear infinite; }

/* Inuyasha · golpes de vento azul do céu com traço vermelho sutil */
.swatch.anime-inuyasha, body[data-theme="anime-inuyasha"] { --otoImg: url('assets/anime/inuyasha.jpg'); --otoBase: #0b0d12; --otoHeroPos: right 32%; --otoFocus: 55% 46%; --accent: #e07a6a; --glow: rgba(193, 68, 49, .22); }
.swatch.anime-inuyasha { background-image: linear-gradient(0deg, rgba(11, 13, 18, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 32%; }
body[data-theme="anime-inuyasha"] .ambient::after { background-image: repeating-linear-gradient(115deg, transparent 0 46px, rgba(144, 193, 232, .14) 46px 48px, transparent 48px 92px, rgba(193, 68, 49, .10) 92px 93px); background-size: 560px 560px; opacity: .5; animation: otoSlash 10s linear infinite; }

/* One Punch Man · anéis de impacto vermelho-terra + retícula cinza do traço */
.swatch.anime-one-punch-man, body[data-theme="anime-one-punch-man"] { --otoImg: url('assets/anime/one-punch-man.jpg'); --otoBase: #0f0d0c; --otoHeroPos: right 30%; --otoFocus: 62% 46%; --accent: #d9a04a; --glow: rgba(189, 91, 75, .24); }
.swatch.anime-one-punch-man { background-image: linear-gradient(0deg, rgba(15, 13, 12, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }
body[data-theme="anime-one-punch-man"] .ambient::before { inset: auto; left: 50%; top: 40%; width: 320px; height: 320px; border: 6px solid rgba(189, 91, 75, .26); border-radius: 50%; animation: otoRingBurst 6s ease-out infinite; }
body[data-theme="anime-one-punch-man"] .ambient::after { background-image: radial-gradient(3px 3px at 25% 30%, rgba(189, 91, 75, .22), transparent 62%), radial-gradient(3px 3px at 70% 60%, rgba(201, 196, 192, .18), transparent 62%); background-size: 46px 46px; opacity: .4; animation: otoAnimeTwinkle 9s ease-in-out infinite; }

/* ─── TEMAS VÍDEO · fundo animado gerado (partículas/brilho em canvas) somado à imagem ─── */

/* Frieren · neve cintilante e céu violeta */
.swatch.anime-frieren, body[data-theme="anime-frieren"] { --otoImg: url('assets/anime/frieren.jpg'); --otoBase: #0d0a16; --otoHeroPos: right 30%; --otoFocus: 62% 45%; --accent: #a88fe8; --glow: rgba(150, 130, 230, .26); }
.swatch.anime-frieren { background-image: linear-gradient(0deg, rgba(13, 10, 22, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Steins;Gate · scanlines âmbar e pulso de linha do tempo */
.swatch.anime-steins-gate, body[data-theme="anime-steins-gate"] { --otoImg: url('assets/anime/steins-gate.jpg'); --otoBase: #0a0a0b; --otoHeroPos: right 34%; --otoFocus: 52% 42%; --accent: #d9b45c; --glow: rgba(210, 170, 90, .24); }
.swatch.anime-steins-gate { background-image: linear-gradient(0deg, rgba(10, 10, 11, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 34%; }

/* Code Geass · sigilo carmesim girando e brasas azuis */
.swatch.anime-code-geass, body[data-theme="anime-code-geass"] { --otoImg: url('assets/anime/code-geass.jpg'); --otoBase: #10120c; --otoHeroPos: right 30%; --otoFocus: 58% 45%; --accent: #c93a4a; --glow: rgba(190, 60, 75, .26); }
.swatch.anime-code-geass { background-image: linear-gradient(0deg, rgba(16, 18, 12, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Cowboy Bebop · poeira quente do pôr do sol e estrelas */
.swatch.anime-cowboy-bebop, body[data-theme="anime-cowboy-bebop"] { --otoImg: url('assets/anime/cowboy-bebop.jpg'); --otoBase: #140b0d; --otoHeroPos: right 30%; --otoFocus: 55% 45%; --accent: #e08a4a; --glow: rgba(215, 130, 70, .26); }
.swatch.anime-cowboy-bebop { background-image: linear-gradient(0deg, rgba(20, 11, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Vinland Saga · folhas ao vento e raios dourados */
.swatch.anime-vinland-saga, body[data-theme="anime-vinland-saga"] { --otoImg: url('assets/anime/vinland-saga.jpg'); --otoBase: #120c08; --otoHeroPos: right 32%; --otoFocus: 55% 42%; --accent: #d9a04a; --glow: rgba(205, 150, 70, .25); }
.swatch.anime-vinland-saga { background-image: linear-gradient(0deg, rgba(18, 12, 8, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 32%; }

/* Mob Psycho · bokeh psíquico multicolorido flutuando */
.swatch.anime-mob-psycho, body[data-theme="anime-mob-psycho"] { --otoImg: url('assets/anime/mob-psycho.jpg'); --otoBase: #10110e; --otoHeroPos: right 30%; --otoFocus: 50% 50%; --accent: #e6cf6a; --glow: rgba(215, 195, 100, .24); }
.swatch.anime-mob-psycho { background-image: linear-gradient(0deg, rgba(16, 17, 14, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Violet Evergarden · pétalas e vaga-lumes dourados */
.swatch.anime-violet-evergarden, body[data-theme="anime-violet-evergarden"] { --otoImg: url('assets/anime/violet-evergarden.jpg'); --otoBase: #0e0906; --otoHeroPos: right 30%; --otoFocus: 58% 45%; --accent: #d9a86a; --glow: rgba(210, 160, 100, .25); }
.swatch.anime-violet-evergarden { background-image: linear-gradient(0deg, rgba(14, 9, 6, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Kimi no Na wa · cometa cruzando o céu estrelado */
.swatch.anime-kimi-no-na-wa, body[data-theme="anime-kimi-no-na-wa"] { --otoImg: url('assets/anime/kimi-no-na-wa.jpg'); --otoBase: #0b0b0d; --otoHeroPos: right 30%; --otoFocus: 55% 45%; --accent: #9fb8e8; --glow: rgba(140, 170, 225, .26); }
.swatch.anime-kimi-no-na-wa { background-image: linear-gradient(0deg, rgba(11, 11, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Made in Abyss · poeira de relíquias subindo nas colunas de luz */
.swatch.anime-made-in-abyss, body[data-theme="anime-made-in-abyss"] { --otoImg: url('assets/anime/made-in-abyss.jpg'); --otoBase: #101211; --otoHeroPos: right 30%; --otoFocus: 52% 48%; --accent: #ebd19d; --glow: rgba(210, 190, 140, .24); }
.swatch.anime-made-in-abyss { background-image: linear-gradient(0deg, rgba(16, 18, 17, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* KonoSuba · bokeh azul e explosões de faíscas */
.swatch.anime-konosuba, body[data-theme="anime-konosuba"] { --otoImg: url('assets/anime/konosuba.jpg'); --otoBase: #0c1014; --otoHeroPos: right 30%; --otoFocus: 55% 45%; --accent: #e0785c; --glow: rgba(210, 110, 85, .26); }
.swatch.anime-konosuba { background-image: linear-gradient(0deg, rgba(12, 16, 20, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Overlord · névoa sombria, brasas e anel rúnico */
.swatch.anime-overlord, body[data-theme="anime-overlord"] { --otoImg: url('assets/anime/overlord.jpg'); --otoBase: #0d0a0d; --otoHeroPos: right 30%; --otoFocus: 55% 45%; --accent: #c96a5c; --glow: rgba(175, 85, 75, .26); }
.swatch.anime-overlord { background-image: linear-gradient(0deg, rgba(13, 10, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Noragami · espíritos azuis e brilho quente */
.swatch.anime-noragami, body[data-theme="anime-noragami"] { --otoImg: url('assets/anime/noragami.jpg'); --otoBase: #120c0c; --otoHeroPos: right 34%; --otoFocus: 45% 45%; --accent: #e08a7a; --glow: rgba(205, 120, 105, .25); }
.swatch.anime-noragami { background-image: linear-gradient(0deg, rgba(18, 12, 12, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 34%; }

/* Soul Eater · orbes roxo/ciano e ondas da lua */
.swatch.anime-soul-eater, body[data-theme="anime-soul-eater"] { --otoImg: url('assets/anime/soul-eater.jpg'); --otoBase: #100e11; --otoHeroPos: right 30%; --otoFocus: 50% 45%; --accent: #b86ad9; --glow: rgba(165, 95, 195, .26); }
.swatch.anime-soul-eater { background-image: linear-gradient(0deg, rgba(16, 14, 17, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Fire Force · brasas e ondulação de calor */
.swatch.anime-fire-force, body[data-theme="anime-fire-force"] { --otoImg: url('assets/anime/fire-force.jpg'); --otoBase: #120807; --otoHeroPos: right 30%; --otoFocus: 52% 48%; --accent: #e85a3c; --glow: rgba(215, 90, 60, .28); }
.swatch.anime-fire-force { background-image: linear-gradient(0deg, rgba(18, 8, 7, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Blue Lock · riscos elétricos azuis em diagonal */
.swatch.anime-blue-lock, body[data-theme="anime-blue-lock"] { --otoImg: url('assets/anime/blue-lock.jpg'); --otoBase: #0a0c12; --otoHeroPos: right 34%; --otoFocus: 45% 42%; --accent: #5c8ae8; --glow: rgba(90, 140, 230, .26); }
.swatch.anime-blue-lock { background-image: linear-gradient(0deg, rgba(10, 12, 18, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 34%; }

/* Haikyuu · linhas de velocidade e poeira da quadra */
.swatch.anime-haikyuu, body[data-theme="anime-haikyuu"] { --otoImg: url('assets/anime/haikyuu.jpg'); --otoBase: #100e0c; --otoHeroPos: right 30%; --otoFocus: 50% 42%; --accent: #e89a4a; --glow: rgba(215, 150, 75, .25); }
.swatch.anime-haikyuu { background-image: linear-gradient(0deg, rgba(16, 14, 12, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Bungou Stray Dogs · páginas ao vento e névoa carmesim */
.swatch.anime-bungou-stray-dogs, body[data-theme="anime-bungou-stray-dogs"] { --otoImg: url('assets/anime/bungou-stray-dogs.jpg'); --otoBase: #110f0d; --otoHeroPos: right 26%; --otoFocus: 78% 58%; --accent: #b85a6a; --glow: rgba(170, 85, 100, .24); }
.swatch.anime-bungou-stray-dogs { background-image: linear-gradient(0deg, rgba(17, 15, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 26%; }

/* Dr. Stone · partículas de ciência e bolhas subindo */
.swatch.anime-dr-stone, body[data-theme="anime-dr-stone"] { --otoImg: url('assets/anime/dr-stone.jpg'); --otoBase: #0c0f12; --otoHeroPos: right 30%; --otoFocus: 50% 48%; --accent: #5c9cc9; --glow: rgba(90, 155, 200, .25); }
.swatch.anime-dr-stone { background-image: linear-gradient(0deg, rgba(12, 15, 18, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Cyberpunk Edgerunners · chuva digital, scanlines e glitch neon */
.swatch.anime-cyberpunk-edgerunners, body[data-theme="anime-cyberpunk-edgerunners"] { --otoImg: url('assets/anime/cyberpunk-edgerunners.jpg'); --otoBase: #0a0b12; --otoHeroPos: right 30%; --otoFocus: 50% 45%; --accent: #4ac8e8; --glow: rgba(70, 190, 225, .28); }
.swatch.anime-cyberpunk-edgerunners { background-image: linear-gradient(0deg, rgba(10, 11, 18, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Gurren Lagann · faíscas espirais subindo */
.swatch.anime-gurren-lagann, body[data-theme="anime-gurren-lagann"] { --otoImg: url('assets/anime/gurren-lagann.jpg'); --otoBase: #110c0a; --otoHeroPos: right 30%; --otoFocus: 50% 45%; --accent: #e86a4a; --glow: rgba(215, 105, 70, .27); }
.swatch.anime-gurren-lagann { background-image: linear-gradient(0deg, rgba(17, 12, 10, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }