/* VLMUSIC · 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; } }

.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; mix-blend-mode: screen; }
.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; }

/* ─── Banner personalizado por anime: moldura viva, texto animado e efeito combinando com o wallpaper ─── */
body[data-theme^="anime-"] .hero { border-color: color-mix(in srgb, var(--accent) 30%, transparent); animation: otoHeroAura 6.5s ease-in-out infinite; }
@keyframes otoHeroAura {
  0%, 100% { box-shadow: 0 24px 70px #0005, 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 30px -10px var(--glow); }
  50% { box-shadow: 0 24px 70px #0005, 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent), 0 0 64px -8px var(--glow); }
}
body[data-theme^="anime-"] .hero .eyebrow { color: color-mix(in srgb, var(--accent) 68%, #fff); text-shadow: 0 0 16px var(--glow); }
body[data-theme^="anime-"] .hero h1 { text-shadow: 0 0 36px var(--glow); }
body[data-theme^="anime-"] .hero-tag { border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: color-mix(in srgb, var(--accent) 40%, #fff); }
.hero.oto-copy-swap .hero-tag { animation: otoCopyUp .6s cubic-bezier(.2, .8, .2, 1) both; }
.hero.oto-copy-swap .hero-content > * { animation: otoCopyUp .6s cubic-bezier(.2, .8, .2, 1) both; }
.hero.oto-copy-swap .hero-content > :nth-child(2) { animation-delay: .06s; }
.hero.oto-copy-swap .hero-content > :nth-child(3) { animation-delay: .12s; }
.hero.oto-copy-swap .hero-content > :nth-child(4) { animation-delay: .18s; }
@keyframes otoCopyUp { from { opacity: 0; transform: translateY(15px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }

.oto-hero-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .9s ease; }
.hero[data-fx] .oto-hero-fx { opacity: 1; }
.oto-hero-fx::before, .oto-hero-fx::after { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: currentColor; color: var(--accent); will-change: transform, opacity; }

/* Brasas subindo */
.hero[data-fx="embers"] .oto-hero-fx::before { box-shadow: 5vw 320px 0 0 currentColor, 14vw 250px 0 0 currentColor, 23vw 360px 0 0 currentColor, 32vw 210px 0 0 currentColor, 41vw 330px 0 0 currentColor, 50vw 260px 0 0 currentColor, 59vw 350px 0 0 currentColor, 68vw 220px 0 0 currentColor, 77vw 310px 0 0 currentColor, 86vw 240px 0 0 currentColor; filter: drop-shadow(0 0 7px var(--glow)); animation: otoFxRise 8s linear infinite; }
.hero[data-fx="embers"] .oto-hero-fx::after { box-shadow: 10vw 350px 0 0 currentColor, 19vw 280px 0 0 currentColor, 28vw 380px 0 0 currentColor, 37vw 240px 0 0 currentColor, 46vw 320px 0 0 currentColor, 55vw 290px 0 0 currentColor, 64vw 370px 0 0 currentColor, 73vw 250px 0 0 currentColor, 82vw 340px 0 0 currentColor, 91vw 270px 0 0 currentColor; opacity: .55; filter: drop-shadow(0 0 9px var(--glow)); animation: otoFxRise 12s linear infinite; animation-delay: -5s; }
@keyframes otoFxRise { 0% { transform: translateY(30px); opacity: 0; } 14% { opacity: .85; } 60% { opacity: .5; } 100% { transform: translateY(-430px); opacity: 0; } }

/* Neve cintilante */
.hero[data-fx="snow"] .oto-hero-fx::before { color: #e9ecff; box-shadow: 6vw 40px 0 0 currentColor, 15vw 210px 0 0 currentColor, 24vw 120px 0 0 currentColor, 33vw 280px 0 0 currentColor, 42vw 70px 0 0 currentColor, 51vw 240px 0 0 currentColor, 60vw 150px 0 0 currentColor, 69vw 300px 0 0 currentColor, 78vw 100px 0 0 currentColor, 87vw 220px 0 0 currentColor; filter: drop-shadow(0 0 6px var(--glow)); animation: otoFxFall 13s linear infinite; }
.hero[data-fx="snow"] .oto-hero-fx::after { color: #e9ecff; box-shadow: 11vw 180px 0 0 currentColor, 20vw 60px 0 0 currentColor, 29vw 260px 0 0 currentColor, 38vw 140px 0 0 currentColor, 47vw 320px 0 0 currentColor, 56vw 90px 0 0 currentColor, 65vw 230px 0 0 currentColor, 74vw 40px 0 0 currentColor, 83vw 290px 0 0 currentColor, 92vw 170px 0 0 currentColor; opacity: .6; filter: drop-shadow(0 0 8px var(--glow)); animation: otoFxFall 18s linear infinite; animation-delay: -7s; }
@keyframes otoFxFall { 0% { transform: translate(0, -70px); opacity: 0; } 12% { opacity: .9; } 85% { opacity: .55; } 100% { transform: translate(-36px, 430px); opacity: 0; } }

/* Pétalas e páginas ao vento */
.hero[data-fx="petals"] .oto-hero-fx::before { width: 8px; height: 6px; border-radius: 68% 22% 68% 22%; box-shadow: 5vw 60px 0 0 currentColor, 14vw 200px 0 0 currentColor, 23vw 100px 0 0 currentColor, 32vw 260px 0 0 currentColor, 41vw 40px 0 0 currentColor, 50vw 220px 0 0 currentColor, 59vw 130px 0 0 currentColor, 68vw 290px 0 0 currentColor, 77vw 80px 0 0 currentColor, 86vw 240px 0 0 currentColor; filter: drop-shadow(0 0 5px var(--glow)); animation: otoFxPetal 12s linear infinite; }
.hero[data-fx="petals"] .oto-hero-fx::after { width: 7px; height: 5px; border-radius: 68% 22% 68% 22%; box-shadow: 10vw 160px 0 0 currentColor, 19vw 30px 0 0 currentColor, 28vw 280px 0 0 currentColor, 37vw 110px 0 0 currentColor, 46vw 320px 0 0 currentColor, 55vw 70px 0 0 currentColor, 64vw 250px 0 0 currentColor, 73vw 140px 0 0 currentColor, 82vw 300px 0 0 currentColor, 91vw 50px 0 0 currentColor; opacity: .6; filter: drop-shadow(0 0 7px var(--glow)); animation: otoFxPetal 17s linear infinite; animation-delay: -6s; }
@keyframes otoFxPetal { 0% { transform: translate(0, -60px) rotate(0deg); opacity: 0; } 10% { opacity: .8; } 100% { transform: translate(64px, 420px) rotate(320deg); opacity: 0; } }

/* Estrelas cintilando */
.hero[data-fx="stars"] .oto-hero-fx::before { width: 3px; height: 3px; box-shadow: 7vw 70px 0 0 currentColor, 17vw 190px 0 0 currentColor, 27vw 40px 0 0 currentColor, 37vw 250px 0 0 currentColor, 47vw 120px 0 0 currentColor, 57vw 300px 0 0 currentColor, 67vw 60px 0 0 currentColor, 77vw 210px 0 0 currentColor, 87vw 140px 0 0 currentColor; filter: drop-shadow(0 0 6px var(--glow)); animation: otoFxTwinkle 4.5s ease-in-out infinite; }
.hero[data-fx="stars"] .oto-hero-fx::after { width: 3px; height: 3px; box-shadow: 12vw 150px 0 0 currentColor, 22vw 30px 0 0 currentColor, 32vw 220px 0 0 currentColor, 42vw 90px 0 0 currentColor, 52vw 280px 0 0 currentColor, 62vw 50px 0 0 currentColor, 72vw 180px 0 0 currentColor, 82vw 110px 0 0 currentColor, 92vw 260px 0 0 currentColor; opacity: .6; filter: drop-shadow(0 0 8px var(--glow)); animation: otoFxTwinkle 6.5s ease-in-out infinite; animation-delay: -2.2s; }
@keyframes otoFxTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* Bokeh flutuando */
.hero[data-fx="bokeh"] .oto-hero-fx::before { width: 90px; height: 90px; border-radius: 50%; background: transparent; box-shadow: 6vw 60px 0 0 currentColor, 28vw 240px 0 0 currentColor, 52vw 120px 0 0 currentColor, 76vw 280px 0 0 currentColor; filter: blur(9px); opacity: .3; animation: otoFxFloat 12s ease-in-out infinite; }
.hero[data-fx="bokeh"] .oto-hero-fx::after { width: 50px; height: 50px; border-radius: 50%; background: transparent; box-shadow: 16vw 170px 0 0 currentColor, 38vw 40px 0 0 currentColor, 60vw 260px 0 0 currentColor, 84vw 90px 0 0 currentColor; filter: blur(6px); opacity: .28; animation: otoFxFloat 17s ease-in-out infinite; animation-delay: -6s; }
@keyframes otoFxFloat { 0%, 100% { transform: translateY(16px); } 50% { transform: translateY(-26px); } }

/* Scanlines e varredura glitch */
.hero[data-fx="scanlines"] .oto-hero-fx::before { width: 100%; height: 100%; border-radius: 0; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, transparent) 0 1px, transparent 1px 5px); opacity: .5; animation: otoFxScan 1.8s linear infinite; }
.hero[data-fx="scanlines"] .oto-hero-fx::after { width: 100%; height: 22%; border-radius: 0; top: -26%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 26%, transparent), transparent); opacity: 0; animation: otoFxGlitchSweep 7s linear infinite; }
@keyframes otoFxScan { to { transform: translateY(-10px); } }
@keyframes otoFxGlitchSweep { 0% { transform: translateY(0); opacity: 0; } 5% { opacity: .7; } 8% { opacity: .12; } 11% { opacity: .55; } 15% { opacity: 0; } 100% { transform: translateY(640%); opacity: 0; } }

/* Raios de luz */
.hero[data-fx="rays"] .oto-hero-fx::before { width: 200%; height: 150%; left: -50%; top: -60%; border-radius: 0; background: conic-gradient(from 168deg at 50% 78%, transparent 0 6deg, color-mix(in srgb, var(--accent) 18%, transparent) 6deg 9deg, transparent 9deg 26deg, color-mix(in srgb, var(--accent) 12%, transparent) 26deg 29deg, transparent 29deg 48deg, color-mix(in srgb, var(--accent) 16%, transparent) 48deg 51deg, transparent 51deg 70deg, color-mix(in srgb, var(--accent) 11%, transparent) 70deg 73deg, transparent 73deg 92deg, color-mix(in srgb, var(--accent) 16%, transparent) 92deg 95deg, transparent 95deg 114deg, color-mix(in srgb, var(--accent) 12%, transparent) 114deg 117deg, transparent 117deg 136deg, color-mix(in srgb, var(--accent) 18%, transparent) 136deg 139deg, transparent 139deg 360deg); -webkit-mask-image: radial-gradient(ellipse 62% 74% at 50% 42%, #000 18%, transparent 80%); mask-image: radial-gradient(ellipse 62% 74% at 50% 42%, #000 18%, transparent 80%); opacity: .85; transform-origin: 50% 78%; animation: otoFxRays 26s ease-in-out infinite; }
.hero[data-fx="rays"] .oto-hero-fx::after { width: 100%; height: 100%; border-radius: 0; background: radial-gradient(ellipse 40% 26% at 50% -6%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 74%); animation: otoFxRaysGlow 9s ease-in-out infinite; }
@keyframes otoFxRays { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
@keyframes otoFxRaysGlow { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }

/* Faíscas velozes */
.hero[data-fx="sparks"] .oto-hero-fx::before { width: 3px; height: 14px; border-radius: 2px; box-shadow: 8vw 230px 0 0 currentColor, 20vw 130px 0 0 currentColor, 32vw 280px 0 0 currentColor, 44vw 90px 0 0 currentColor, 56vw 240px 0 0 currentColor, 68vw 150px 0 0 currentColor, 80vw 300px 0 0 currentColor, 92vw 100px 0 0 currentColor; filter: drop-shadow(0 0 6px var(--glow)); animation: otoFxSpark 1.7s linear infinite; }
.hero[data-fx="sparks"] .oto-hero-fx::after { width: 2px; height: 11px; border-radius: 2px; box-shadow: 14vw 80px 0 0 currentColor, 26vw 260px 0 0 currentColor, 38vw 180px 0 0 currentColor, 50vw 320px 0 0 currentColor, 62vw 60px 0 0 currentColor, 74vw 220px 0 0 currentColor, 86vw 140px 0 0 currentColor; opacity: .6; filter: drop-shadow(0 0 8px var(--glow)); animation: otoFxSpark 2.3s linear infinite; animation-delay: -1.1s; }
@keyframes otoFxSpark { 0% { transform: translate(-70px, 130px) rotate(24deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(240px, -320px) rotate(24deg); opacity: 0; } }

/* Cinzas caindo (Attack on Titan) */
.hero[data-fx="ash"] .oto-hero-fx::before { color: color-mix(in srgb, var(--accent) 40%, #d2d5db); box-shadow: 6vw 50px 0 0 currentColor, 15vw 230px 0 0 currentColor, 24vw 130px 0 0 currentColor, 33vw 300px 0 0 currentColor, 42vw 80px 0 0 currentColor, 51vw 260px 0 0 currentColor, 60vw 170px 0 0 currentColor, 69vw 320px 0 0 currentColor, 78vw 110px 0 0 currentColor, 87vw 240px 0 0 currentColor; filter: drop-shadow(0 0 6px var(--glow)); animation: otoFxAsh 16s linear infinite; }
.hero[data-fx="ash"] .oto-hero-fx::after { color: color-mix(in srgb, var(--accent) 30%, #c8ccd3); box-shadow: 11vw 190px 0 0 currentColor, 20vw 70px 0 0 currentColor, 29vw 280px 0 0 currentColor, 38vw 150px 0 0 currentColor, 47vw 330px 0 0 currentColor, 56vw 100px 0 0 currentColor, 65vw 250px 0 0 currentColor, 74vw 60px 0 0 currentColor, 83vw 310px 0 0 currentColor, 92vw 180px 0 0 currentColor; opacity: .5; filter: drop-shadow(0 0 7px var(--glow)); animation: otoFxAsh 22s linear infinite; animation-delay: -9s; }
@keyframes otoFxAsh { 0% { transform: translate(0, -40px); opacity: 0; } 12% { opacity: .7; } 55% { opacity: .45; } 100% { transform: translate(-30px, 430px); opacity: 0; } }

/* Páginas ao vento (Death Note, Bungou Stray Dogs) */
.hero[data-fx="pages"] .oto-hero-fx::before { width: 9px; height: 12px; border-radius: 1px; color: color-mix(in srgb, var(--accent) 26%, #ece5d4); box-shadow: 5vw 70px 0 0 currentColor, 14vw 210px 0 0 currentColor, 23vw 110px 0 0 currentColor, 32vw 270px 0 0 currentColor, 41vw 50px 0 0 currentColor, 50vw 230px 0 0 currentColor, 59vw 140px 0 0 currentColor, 68vw 300px 0 0 currentColor, 77vw 90px 0 0 currentColor, 86vw 250px 0 0 currentColor; filter: drop-shadow(0 0 4px var(--glow)); animation: otoFxPage 14s linear infinite; }
.hero[data-fx="pages"] .oto-hero-fx::after { width: 8px; height: 11px; border-radius: 1px; color: color-mix(in srgb, var(--accent) 20%, #e4dcc9); box-shadow: 10vw 170px 0 0 currentColor, 19vw 40px 0 0 currentColor, 28vw 290px 0 0 currentColor, 37vw 120px 0 0 currentColor, 46vw 330px 0 0 currentColor, 55vw 80px 0 0 currentColor, 64vw 260px 0 0 currentColor, 73vw 150px 0 0 currentColor, 82vw 310px 0 0 currentColor, 91vw 60px 0 0 currentColor; opacity: .55; filter: drop-shadow(0 0 6px var(--glow)); animation: otoFxPage 19s linear infinite; animation-delay: -7s; }
@keyframes otoFxPage { 0% { transform: translate(0, -60px) rotate(0deg); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(86px, 430px) rotate(310deg); opacity: 0; } }

/* Cometa cruzando o céu (Kimi no Na wa) */
.hero[data-fx="comet"] .oto-hero-fx::before { width: 3px; height: 3px; box-shadow: 7vw 60px 0 0 currentColor, 17vw 200px 0 0 currentColor, 27vw 30px 0 0 currentColor, 37vw 240px 0 0 currentColor, 47vw 110px 0 0 currentColor, 57vw 290px 0 0 currentColor, 67vw 50px 0 0 currentColor, 77vw 220px 0 0 currentColor, 87vw 130px 0 0 currentColor; filter: drop-shadow(0 0 5px var(--glow)); animation: otoFxTwinkle 5.5s ease-in-out infinite; }
.hero[data-fx="comet"] .oto-hero-fx::after { width: 170px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, currentColor 55%, #fff); filter: drop-shadow(0 0 7px var(--glow)); opacity: 0; animation: otoFxComet 9s linear infinite; }
@keyframes otoFxComet { 0% { transform: translate(-180px, -60px) rotate(18deg); opacity: 0; } 6% { opacity: .95; } 48% { opacity: .85; } 72%, 100% { transform: translate(112vw, 62vh) rotate(18deg); opacity: 0; } }

/* Linhas de velocidade (esportes: Haikyuu, Blue Lock) */
.hero[data-fx="speedlines"] .oto-hero-fx::before { width: 200%; height: 100%; left: -100%; border-radius: 0; background-color: transparent; background-image: linear-gradient(90deg, transparent, currentColor 55%, transparent), linear-gradient(90deg, transparent, currentColor 55%, transparent), linear-gradient(90deg, transparent, currentColor 55%, transparent), linear-gradient(90deg, transparent, currentColor 55%, transparent); background-size: 250px 2px, 170px 1px, 220px 2px, 150px 1px; background-repeat: no-repeat; background-position: 12% 20%, 58% 36%, 34% 60%, 80% 76%; opacity: .75; filter: drop-shadow(0 0 4px var(--glow)); animation: otoFxSpeed 1.5s linear infinite; }
.hero[data-fx="speedlines"] .oto-hero-fx::after { width: 200%; height: 100%; left: -100%; border-radius: 0; background-color: transparent; background-image: linear-gradient(90deg, transparent, currentColor 55%, transparent), linear-gradient(90deg, transparent, currentColor 55%, transparent), linear-gradient(90deg, transparent, currentColor 55%, transparent); background-size: 190px 1px, 260px 2px, 130px 1px; background-repeat: no-repeat; background-position: 24% 28%, 66% 52%, 44% 84%; opacity: .5; filter: drop-shadow(0 0 5px var(--glow)); animation: otoFxSpeed 2.1s linear infinite; animation-delay: -.9s; }
@keyframes otoFxSpeed { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ─── Efeito ambiente unificado: o mesmo motivo do banner, mais leve, cobrindo a página ─── */
body[data-fx]:not(.oto-video-theme) .ambient { overflow: hidden; }
body[data-fx]:not(.oto-video-theme) .ambient::before,
body[data-fx]:not(.oto-video-theme) .ambient::after { inset: auto; left: 0; top: 0; background: currentColor; color: var(--accent); border-radius: 50%; width: 5px; height: 5px; will-change: transform, opacity; }

body[data-fx="embers"]:not(.oto-video-theme) .ambient::before { box-shadow: 6vw 340px 0 0 currentColor, 16vw 260px 0 0 currentColor, 26vw 380px 0 0 currentColor, 36vw 220px 0 0 currentColor, 46vw 350px 0 0 currentColor, 56vw 270px 0 0 currentColor, 66vw 370px 0 0 currentColor, 76vw 230px 0 0 currentColor, 86vw 320px 0 0 currentColor; filter: drop-shadow(0 0 7px var(--glow)); opacity: .5; animation: otoFxRise 12s linear infinite; }
body[data-fx="embers"]:not(.oto-video-theme) .ambient::after { box-shadow: 11vw 370px 0 0 currentColor, 21vw 290px 0 0 currentColor, 31vw 400px 0 0 currentColor, 41vw 250px 0 0 currentColor, 51vw 330px 0 0 currentColor, 61vw 300px 0 0 currentColor, 71vw 390px 0 0 currentColor, 81vw 260px 0 0 currentColor, 91vw 360px 0 0 currentColor; opacity: .32; filter: drop-shadow(0 0 9px var(--glow)); animation: otoFxRise 17s linear infinite; animation-delay: -7s; }

body[data-fx="snow"]:not(.oto-video-theme) .ambient::before { color: #e9ecff; width: 4px; height: 4px; box-shadow: 7vw 40px 0 0 currentColor, 17vw 220px 0 0 currentColor, 27vw 130px 0 0 currentColor, 37vw 290px 0 0 currentColor, 47vw 80px 0 0 currentColor, 57vw 250px 0 0 currentColor, 67vw 160px 0 0 currentColor, 77vw 310px 0 0 currentColor, 87vw 110px 0 0 currentColor; filter: drop-shadow(0 0 6px var(--glow)); opacity: .6; animation: otoFxFall 17s linear infinite; }
body[data-fx="snow"]:not(.oto-video-theme) .ambient::after { color: #e9ecff; width: 4px; height: 4px; box-shadow: 12vw 190px 0 0 currentColor, 22vw 70px 0 0 currentColor, 32vw 270px 0 0 currentColor, 42vw 150px 0 0 currentColor, 52vw 330px 0 0 currentColor, 62vw 100px 0 0 currentColor, 72vw 240px 0 0 currentColor, 82vw 50px 0 0 currentColor, 92vw 300px 0 0 currentColor; opacity: .4; filter: drop-shadow(0 0 8px var(--glow)); animation: otoFxFall 23s linear infinite; animation-delay: -9s; }

body[data-fx="petals"]:not(.oto-video-theme) .ambient::before { width: 9px; height: 7px; border-radius: 68% 22% 68% 22%; box-shadow: 6vw 70px 0 0 currentColor, 16vw 210px 0 0 currentColor, 26vw 110px 0 0 currentColor, 36vw 280px 0 0 currentColor, 46vw 50px 0 0 currentColor, 56vw 240px 0 0 currentColor, 66vw 150px 0 0 currentColor, 76vw 310px 0 0 currentColor, 86vw 90px 0 0 currentColor; filter: drop-shadow(0 0 5px var(--glow)); opacity: .55; animation: otoFxPetal 15s linear infinite; }
body[data-fx="petals"]:not(.oto-video-theme) .ambient::after { width: 8px; height: 6px; border-radius: 68% 22% 68% 22%; box-shadow: 11vw 180px 0 0 currentColor, 21vw 40px 0 0 currentColor, 31vw 300px 0 0 currentColor, 41vw 130px 0 0 currentColor, 51vw 340px 0 0 currentColor, 61vw 80px 0 0 currentColor, 71vw 270px 0 0 currentColor, 81vw 160px 0 0 currentColor, 91vw 60px 0 0 currentColor; opacity: .38; filter: drop-shadow(0 0 7px var(--glow)); animation: otoFxPetal 21s linear infinite; animation-delay: -8s; }

body[data-fx="stars"]:not(.oto-video-theme) .ambient::before { width: 3px; height: 3px; box-shadow: 8vw 80px 0 0 currentColor, 18vw 200px 0 0 currentColor, 28vw 50px 0 0 currentColor, 38vw 260px 0 0 currentColor, 48vw 130px 0 0 currentColor, 58vw 310px 0 0 currentColor, 68vw 70px 0 0 currentColor, 78vw 220px 0 0 currentColor, 88vw 150px 0 0 currentColor; filter: drop-shadow(0 0 6px var(--glow)); opacity: .7; animation: otoFxTwinkle 5s ease-in-out infinite; }
body[data-fx="stars"]:not(.oto-video-theme) .ambient::after { width: 3px; height: 3px; box-shadow: 13vw 160px 0 0 currentColor, 23vw 40px 0 0 currentColor, 33vw 230px 0 0 currentColor, 43vw 100px 0 0 currentColor, 53vw 290px 0 0 currentColor, 63vw 60px 0 0 currentColor, 73vw 190px 0 0 currentColor, 83vw 120px 0 0 currentColor, 93vw 270px 0 0 currentColor; opacity: .5; filter: drop-shadow(0 0 8px var(--glow)); animation: otoFxTwinkle 7s ease-in-out infinite; animation-delay: -2.6s; }

body[data-fx="bokeh"]:not(.oto-video-theme) .ambient::before { width: 130px; height: 130px; background: transparent; box-shadow: 8vw 90px 0 0 currentColor, 34vw 280px 0 0 currentColor, 60vw 140px 0 0 currentColor, 86vw 320px 0 0 currentColor; filter: blur(11px); opacity: .22; animation: otoFxFloat 18s ease-in-out infinite; }
body[data-fx="bokeh"]:not(.oto-video-theme) .ambient::after { width: 70px; height: 70px; background: transparent; box-shadow: 20vw 200px 0 0 currentColor, 46vw 60px 0 0 currentColor, 72vw 300px 0 0 currentColor; filter: blur(8px); opacity: .18; animation: otoFxFloat 24s ease-in-out infinite; animation-delay: -8s; }

body[data-fx="scanlines"]:not(.oto-video-theme) .ambient::before { inset: 0; width: 100%; height: 100%; border-radius: 0; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent) 0 1px, transparent 1px 6px); opacity: .45; animation: otoFxScan 2.2s linear infinite; }
body[data-fx="scanlines"]:not(.oto-video-theme) .ambient::after { inset: 0 0 auto; width: 100%; height: 9%; border-radius: 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent), transparent); opacity: 0; animation: otoFxSweepTall 10s linear infinite; }
@keyframes otoFxSweepTall { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: .55; } 7% { opacity: .1; } 10% { opacity: .45; } 14% { opacity: 0; } 100% { transform: translateY(1250%); opacity: 0; } }

body[data-fx="rays"]:not(.oto-video-theme) .ambient::before { inset: auto; left: -30%; top: -35%; width: 160%; height: 120%; border-radius: 0; background: conic-gradient(from 168deg at 50% 66%, transparent 0 6deg, color-mix(in srgb, var(--accent) 14%, transparent) 6deg 9deg, transparent 9deg 26deg, color-mix(in srgb, var(--accent) 9%, transparent) 26deg 29deg, transparent 29deg 48deg, color-mix(in srgb, var(--accent) 12%, transparent) 48deg 51deg, transparent 51deg 70deg, color-mix(in srgb, var(--accent) 8%, transparent) 70deg 73deg, transparent 73deg 92deg, color-mix(in srgb, var(--accent) 12%, transparent) 92deg 95deg, transparent 95deg 114deg, color-mix(in srgb, var(--accent) 9%, transparent) 114deg 117deg, transparent 117deg 136deg, color-mix(in srgb, var(--accent) 14%, transparent) 136deg 139deg, transparent 139deg 360deg); -webkit-mask-image: radial-gradient(ellipse 62% 74% at 50% 42%, #000 18%, transparent 80%); mask-image: radial-gradient(ellipse 62% 74% at 50% 42%, #000 18%, transparent 80%); opacity: .7; transform-origin: 50% 66%; animation: otoFxRays 34s ease-in-out infinite; }
body[data-fx="rays"]:not(.oto-video-theme) .ambient::after { inset: 0 0 auto; width: 100%; height: 40%; border-radius: 0; background: radial-gradient(ellipse 42% 30% at 50% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 74%); animation: otoFxRaysGlow 12s ease-in-out infinite; }

body[data-fx="sparks"]:not(.oto-video-theme) .ambient::before { width: 3px; height: 16px; border-radius: 2px; box-shadow: 9vw 250px 0 0 currentColor, 21vw 150px 0 0 currentColor, 33vw 300px 0 0 currentColor, 45vw 100px 0 0 currentColor, 57vw 260px 0 0 currentColor, 69vw 170px 0 0 currentColor, 81vw 320px 0 0 currentColor, 93vw 120px 0 0 currentColor; filter: drop-shadow(0 0 6px var(--glow)); opacity: .7; animation: otoFxSpark 2.6s linear infinite; }
body[data-fx="sparks"]:not(.oto-video-theme) .ambient::after { width: 2px; height: 12px; border-radius: 2px; box-shadow: 15vw 90px 0 0 currentColor, 27vw 280px 0 0 currentColor, 39vw 200px 0 0 currentColor, 51vw 340px 0 0 currentColor, 63vw 70px 0 0 currentColor, 75vw 240px 0 0 currentColor, 87vw 160px 0 0 currentColor; opacity: .5; filter: drop-shadow(0 0 8px var(--glow)); animation: otoFxSpark 3.6s linear infinite; animation-delay: -1.6s; }

body[data-fx="ash"]:not(.oto-video-theme) .ambient::before { color: color-mix(in srgb, var(--accent) 40%, #d2d5db); width: 4px; height: 4px; box-shadow: 7vw 60px 0 0 currentColor, 17vw 240px 0 0 currentColor, 27vw 140px 0 0 currentColor, 37vw 300px 0 0 currentColor, 47vw 90px 0 0 currentColor, 57vw 270px 0 0 currentColor, 67vw 180px 0 0 currentColor, 77vw 330px 0 0 currentColor, 87vw 120px 0 0 currentColor; filter: drop-shadow(0 0 6px var(--glow)); opacity: .5; animation: otoFxAsh 20s linear infinite; }
body[data-fx="ash"]:not(.oto-video-theme) .ambient::after { color: color-mix(in srgb, var(--accent) 30%, #c8ccd3); width: 4px; height: 4px; box-shadow: 12vw 200px 0 0 currentColor, 22vw 80px 0 0 currentColor, 32vw 280px 0 0 currentColor, 42vw 160px 0 0 currentColor, 52vw 340px 0 0 currentColor, 62vw 110px 0 0 currentColor, 72vw 250px 0 0 currentColor, 82vw 60px 0 0 currentColor, 92vw 310px 0 0 currentColor; opacity: .34; filter: drop-shadow(0 0 7px var(--glow)); animation: otoFxAsh 27s linear infinite; animation-delay: -11s; }

body[data-fx="pages"]:not(.oto-video-theme) .ambient::before { width: 10px; height: 13px; border-radius: 1px; color: color-mix(in srgb, var(--accent) 26%, #ece5d4); box-shadow: 6vw 80px 0 0 currentColor, 16vw 220px 0 0 currentColor, 26vw 120px 0 0 currentColor, 36vw 290px 0 0 currentColor, 46vw 60px 0 0 currentColor, 56vw 250px 0 0 currentColor, 66vw 160px 0 0 currentColor, 76vw 320px 0 0 currentColor, 86vw 100px 0 0 currentColor; filter: drop-shadow(0 0 4px var(--glow)); opacity: .55; animation: otoFxPage 18s linear infinite; }
body[data-fx="pages"]:not(.oto-video-theme) .ambient::after { width: 9px; height: 12px; border-radius: 1px; color: color-mix(in srgb, var(--accent) 20%, #e4dcc9); box-shadow: 11vw 190px 0 0 currentColor, 21vw 50px 0 0 currentColor, 31vw 310px 0 0 currentColor, 41vw 140px 0 0 currentColor, 51vw 350px 0 0 currentColor, 61vw 90px 0 0 currentColor, 71vw 280px 0 0 currentColor, 81vw 170px 0 0 currentColor, 91vw 70px 0 0 currentColor; opacity: .38; filter: drop-shadow(0 0 6px var(--glow)); animation: otoFxPage 25s linear infinite; animation-delay: -10s; }

body[data-fx="comet"]:not(.oto-video-theme) .ambient::before { width: 3px; height: 3px; box-shadow: 8vw 70px 0 0 currentColor, 18vw 210px 0 0 currentColor, 28vw 40px 0 0 currentColor, 38vw 250px 0 0 currentColor, 48vw 120px 0 0 currentColor, 58vw 300px 0 0 currentColor, 68vw 60px 0 0 currentColor, 78vw 230px 0 0 currentColor, 88vw 140px 0 0 currentColor; filter: drop-shadow(0 0 5px var(--glow)); opacity: .65; animation: otoFxTwinkle 6s ease-in-out infinite; }
body[data-fx="comet"]:not(.oto-video-theme) .ambient::after { width: 240px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, currentColor 55%, #fff); filter: drop-shadow(0 0 8px var(--glow)); opacity: 0; animation: otoFxComet 14s linear infinite; animation-delay: -3s; }

body[data-fx="speedlines"]:not(.oto-video-theme) .ambient::before { width: 200%; height: 100%; left: -100%; border-radius: 0; background-color: transparent; background-image: linear-gradient(90deg, transparent, currentColor 55%, transparent), linear-gradient(90deg, transparent, currentColor 55%, transparent), linear-gradient(90deg, transparent, currentColor 55%, transparent), linear-gradient(90deg, transparent, currentColor 55%, transparent); background-size: 260px 2px, 180px 1px, 230px 2px, 160px 1px; background-repeat: no-repeat; background-position: 14% 18%, 60% 34%, 36% 58%, 82% 74%; opacity: .5; filter: drop-shadow(0 0 4px var(--glow)); animation: otoFxSpeed 2.4s linear infinite; }
body[data-fx="speedlines"]:not(.oto-video-theme) .ambient::after { width: 200%; height: 100%; left: -100%; border-radius: 0; background-color: transparent; background-image: linear-gradient(90deg, transparent, currentColor 55%, transparent), linear-gradient(90deg, transparent, currentColor 55%, transparent), linear-gradient(90deg, transparent, currentColor 55%, transparent); background-size: 200px 1px, 270px 2px, 140px 1px; background-repeat: no-repeat; background-position: 26% 26%, 68% 50%, 46% 82%; opacity: .32; filter: drop-shadow(0 0 5px var(--glow)); animation: otoFxSpeed 3.6s linear infinite; animation-delay: -1.4s; }


@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; }
  .oto-hero-fx { display: none; }
  body[data-theme^="anime-"] .hero { animation: none; }
  .hero.oto-copy-swap .hero-tag,
  .hero.oto-copy-swap .hero-content > * { animation: none; }
  body[data-fx]:not(.oto-video-theme) .ambient::before,
  body[data-fx]:not(.oto-video-theme) .ambient::after { display: none; }
}

/* Demon Slayer · brasas subindo */
.swatch.anime-demon-slayer, body[data-theme="anime-demon-slayer"] { --otoImg: url('assets/anime/demon-slayer.jpg'); --otoBase: #0b0505; --otoHeroPos: right 30%; --otoFocus: 52% 46%; --accent: #f2273a; --glow: rgba(242, 39, 58, .26); }
.swatch.anime-demon-slayer { background-image: linear-gradient(0deg, rgba(11, 5, 5, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* One Piece · raios de luz */
.swatch.anime-one-piece, body[data-theme="anime-one-piece"] { --otoImg: url('assets/anime/one-piece.jpg'); --otoBase: #1a0f0f; --otoHeroPos: right 32%; --otoFocus: 64% 48%; --accent: #d55043; --glow: rgba(213, 80, 67, .26); }
.swatch.anime-one-piece { background-image: linear-gradient(0deg, rgba(26, 15, 15, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 32%; }

/* Black Clover · faiscas velozes */
.swatch.anime-black-clover, body[data-theme="anime-black-clover"] { --otoImg: url('assets/anime/black-clover.jpg'); --otoBase: #141415; --otoHeroPos: right 30%; --otoFocus: 58% 45%; --accent: #c66353; --glow: rgba(198, 99, 83, .26); }
.swatch.anime-black-clover { background-image: linear-gradient(0deg, rgba(20, 20, 21, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Attack on Titan · cinzas caindo */
.swatch.anime-attack-on-titan, body[data-theme="anime-attack-on-titan"] { --otoImg: url('assets/anime/attack-on-titan.jpg'); --otoBase: #121217; --otoHeroPos: right 35%; --otoFocus: 60% 42%; --accent: #8aa4db; --glow: rgba(138, 164, 219, .26); }
.swatch.anime-attack-on-titan { background-image: linear-gradient(0deg, rgba(18, 18, 23, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }

/* Dragon Ball · faiscas velozes */
.swatch.anime-dragon-ball, body[data-theme="anime-dragon-ball"] { --otoImg: url('assets/anime/dragon-ball.jpg'); --otoBase: #0f131a; --otoHeroPos: right 35%; --otoFocus: 58% 46%; --accent: #6295cb; --glow: rgba(98, 149, 203, .26); }
.swatch.anime-dragon-ball { background-image: linear-gradient(0deg, rgba(15, 19, 26, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }

/* Jujutsu Kaisen · faiscas velozes */
.swatch.anime-jujutsu-kaisen, body[data-theme="anime-jujutsu-kaisen"] { --otoImg: url('assets/anime/jujutsu-kaisen.jpg'); --otoBase: #070404; --otoHeroPos: right 30%; --otoFocus: 55% 45%; --accent: #74a4e8; --glow: rgba(116, 164, 232, .26); }
.swatch.anime-jujutsu-kaisen { background-image: linear-gradient(0deg, rgba(7, 4, 4, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* My Hero Academia · faiscas velozes */
.swatch.anime-my-hero-academia, body[data-theme="anime-my-hero-academia"] { --otoImg: url('assets/anime/my-hero-academia.jpg'); --otoBase: #1c0f0d; --otoHeroPos: right 30%; --otoFocus: 60% 46%; --accent: #e0c949; --glow: rgba(224, 201, 73, .26); }
.swatch.anime-my-hero-academia { background-image: linear-gradient(0deg, rgba(28, 15, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Death Note · paginas ao vento */
.swatch.anime-death-note, body[data-theme="anime-death-note"] { --otoImg: url('assets/anime/death-note.jpg'); --otoBase: #000000; --otoHeroPos: right 30%; --otoFocus: 56% 45%; --accent: #dda988; --glow: rgba(221, 169, 136, .26); }
.swatch.anime-death-note { background-image: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Fullmetal Alchemist · faiscas velozes */
.swatch.anime-fullmetal-alchemist, body[data-theme="anime-fullmetal-alchemist"] { --otoImg: url('assets/anime/fullmetal-alchemist.jpg'); --otoBase: #161217; --otoHeroPos: right 30%; --otoFocus: 56% 46%; --accent: #e37a6f; --glow: rgba(227, 122, 111, .26); }
.swatch.anime-fullmetal-alchemist { background-image: linear-gradient(0deg, rgba(22, 18, 23, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Tokyo Ghoul · petalas ao vento */
.swatch.anime-tokyo-ghoul, body[data-theme="anime-tokyo-ghoul"] { --otoImg: url('assets/anime/tokyo-ghoul.jpg'); --otoBase: #120c18; --otoHeroPos: right 30%; --otoFocus: 52% 46%; --accent: #e33650; --glow: rgba(227, 54, 80, .26); }
.swatch.anime-tokyo-ghoul { background-image: linear-gradient(0deg, rgba(18, 12, 24, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Hunter x Hunter · bokeh flutuando */
.swatch.anime-hunter-x-hunter, body[data-theme="anime-hunter-x-hunter"] { --otoImg: url('assets/anime/hunter-x-hunter.jpg'); --otoBase: #131514; --otoHeroPos: right 30%; --otoFocus: 58% 46%; --accent: #5fb84a; --glow: rgba(95, 184, 74, .26); }
.swatch.anime-hunter-x-hunter { background-image: linear-gradient(0deg, rgba(19, 21, 20, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Bleach · raios de luz */
.swatch.anime-bleach, body[data-theme="anime-bleach"] { --otoImg: url('assets/anime/bleach.jpg'); --otoBase: #070607; --otoHeroPos: right 30%; --otoFocus: 60% 44%; --accent: #d94f45; --glow: rgba(217, 79, 69, .26); }
.swatch.anime-bleach { background-image: linear-gradient(0deg, rgba(7, 6, 7, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Fairy Tail · estrelas cintilando */
.swatch.anime-fairy-tail, body[data-theme="anime-fairy-tail"] { --otoImg: url('assets/anime/fairy-tail.jpg'); --otoBase: #181016; --otoHeroPos: right 30%; --otoFocus: 58% 46%; --accent: #e9522f; --glow: rgba(233, 82, 47, .26); }
.swatch.anime-fairy-tail { background-image: linear-gradient(0deg, rgba(24, 16, 22, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Sword Art Online · scanlines e varredura */
.swatch.anime-sword-art-online, body[data-theme="anime-sword-art-online"] { --otoImg: url('assets/anime/sword-art-online.jpg'); --otoBase: #111318; --otoHeroPos: right 30%; --otoFocus: 60% 44%; --accent: #57c1c7; --glow: rgba(87, 193, 199, .26); }
.swatch.anime-sword-art-online { background-image: linear-gradient(0deg, rgba(17, 19, 24, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Chainsaw Man · brasas subindo */
.swatch.anime-chainsaw-man, body[data-theme="anime-chainsaw-man"] { --otoImg: url('assets/anime/chainsaw-man.jpg'); --otoBase: #131516; --otoHeroPos: right 30%; --otoFocus: 56% 46%; --accent: #c65355; --glow: rgba(198, 83, 85, .26); }
.swatch.anime-chainsaw-man { background-image: linear-gradient(0deg, rgba(19, 21, 22, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Spy x Family · estrelas cintilando */
.swatch.anime-spy-x-family, body[data-theme="anime-spy-x-family"] { --otoImg: url('assets/anime/spy-x-family.jpg'); --otoBase: #181211; --otoHeroPos: right 30%; --otoFocus: 58% 46%; --accent: #e28383; --glow: rgba(226, 131, 131, .26); }
.swatch.anime-spy-x-family { background-image: linear-gradient(0deg, rgba(24, 18, 17, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Evangelion · scanlines e varredura */
.swatch.anime-evangelion, body[data-theme="anime-evangelion"] { --otoImg: url('assets/anime/evangelion.jpg'); --otoBase: #171019; --otoHeroPos: right 35%; --otoFocus: 58% 44%; --accent: #d98d54; --glow: rgba(217, 141, 84, .26); }
.swatch.anime-evangelion { background-image: linear-gradient(0deg, rgba(23, 16, 25, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }

/* Studio Ghibli · petalas ao vento */
.swatch.anime-ghibli, body[data-theme="anime-ghibli"] { --otoImg: url('assets/anime/ghibli.jpg'); --otoBase: #0f1a16; --otoHeroPos: right 35%; --otoFocus: 60% 50%; --accent: #abce6d; --glow: rgba(171, 206, 109, .26); }
.swatch.anime-ghibli { background-image: linear-gradient(0deg, rgba(15, 26, 22, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }

/* Sailor Moon · estrelas cintilando */
.swatch.anime-sailor-moon, body[data-theme="anime-sailor-moon"] { --otoImg: url('assets/anime/sailor-moon.jpg'); --otoBase: #0e131b; --otoHeroPos: right 32%; --otoFocus: 55% 44%; --accent: #dfc247; --glow: rgba(223, 194, 71, .26); }
.swatch.anime-sailor-moon { background-image: linear-gradient(0deg, rgba(14, 19, 27, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 32%; }

/* Pokemon · faiscas velozes */
.swatch.anime-pokemon, body[data-theme="anime-pokemon"] { --otoImg: url('assets/anime/pokemon.jpg'); --otoBase: #101213; --otoHeroPos: right 35%; --otoFocus: 60% 48%; --accent: #e2a83f; --glow: rgba(226, 168, 63, .26); }
.swatch.anime-pokemon { background-image: linear-gradient(0deg, rgba(16, 18, 19, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }

/* Digimon · scanlines e varredura */
.swatch.anime-digimon, body[data-theme="anime-digimon"] { --otoImg: url('assets/anime/digimon.jpg'); --otoBase: #1c130d; --otoHeroPos: right 35%; --otoFocus: 58% 46%; --accent: #fa9c1e; --glow: rgba(250, 156, 30, .26); }
.swatch.anime-digimon { background-image: linear-gradient(0deg, rgba(28, 19, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 35%; }

/* Inuyasha · petalas ao vento */
.swatch.anime-inuyasha, body[data-theme="anime-inuyasha"] { --otoImg: url('assets/anime/inuyasha.jpg'); --otoBase: #1c100d; --otoHeroPos: right 32%; --otoFocus: 55% 46%; --accent: #d26046; --glow: rgba(210, 96, 70, .26); }
.swatch.anime-inuyasha { background-image: linear-gradient(0deg, rgba(28, 16, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 32%; }

/* One Punch Man · faiscas velozes */
.swatch.anime-one-punch-man, body[data-theme="anime-one-punch-man"] { --otoImg: url('assets/anime/one-punch-man.jpg'); --otoBase: #1c0e0d; --otoHeroPos: right 30%; --otoFocus: 62% 46%; --accent: #e5b054; --glow: rgba(229, 176, 84, .26); }
.swatch.anime-one-punch-man { background-image: linear-gradient(0deg, rgba(28, 14, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

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

/* Frieren · neve cintilante */
.swatch.anime-frieren, body[data-theme="anime-frieren"] { --otoImg: url('assets/anime/frieren.jpg'); --otoBase: #0d0e1c; --otoHeroPos: right 30%; --otoFocus: 62% 45%; --accent: #a58ae0; --glow: rgba(165, 138, 224, .26); }
.swatch.anime-frieren { background-image: linear-gradient(0deg, rgba(13, 14, 28, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Steins;Gate · scanlines e varredura */
.swatch.anime-steins-gate, body[data-theme="anime-steins-gate"] { --otoImg: url('assets/anime/steins-gate.jpg'); --otoBase: #020202; --otoHeroPos: right 34%; --otoFocus: 52% 42%; --accent: #e0b055; --glow: rgba(224, 176, 85, .26); }
.swatch.anime-steins-gate { background-image: linear-gradient(0deg, rgba(2, 2, 2, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 34%; }

/* Code Geass · raios de luz */
.swatch.anime-code-geass, body[data-theme="anime-code-geass"] { --otoImg: url('assets/anime/code-geass.jpg'); --otoBase: #121118; --otoHeroPos: right 30%; --otoFocus: 58% 45%; --accent: #c6535e; --glow: rgba(198, 83, 94, .26); }
.swatch.anime-code-geass { background-image: linear-gradient(0deg, rgba(18, 17, 24, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Cowboy Bebop · estrelas cintilando */
.swatch.anime-cowboy-bebop, body[data-theme="anime-cowboy-bebop"] { --otoImg: url('assets/anime/cowboy-bebop.jpg'); --otoBase: #0f1317; --otoHeroPos: right 30%; --otoFocus: 55% 45%; --accent: #e37538; --glow: rgba(227, 117, 56, .26); }
.swatch.anime-cowboy-bebop { background-image: linear-gradient(0deg, rgba(15, 19, 23, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Vinland Saga · petalas ao vento */
.swatch.anime-vinland-saga, body[data-theme="anime-vinland-saga"] { --otoImg: url('assets/anime/vinland-saga.jpg'); --otoBase: #1c120d; --otoHeroPos: right 32%; --otoFocus: 55% 42%; --accent: #d87740; --glow: rgba(216, 119, 64, .26); }
.swatch.anime-vinland-saga { background-image: linear-gradient(0deg, rgba(28, 18, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 32%; }

/* Mob Psycho · bokeh flutuando */
.swatch.anime-mob-psycho, body[data-theme="anime-mob-psycho"] { --otoImg: url('assets/anime/mob-psycho.jpg'); --otoBase: #151414; --otoHeroPos: right 30%; --otoFocus: 50% 50%; --accent: #e8cc4e; --glow: rgba(232, 204, 78, .26); }
.swatch.anime-mob-psycho { background-image: linear-gradient(0deg, rgba(21, 20, 20, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Violet Evergarden · petalas ao vento */
.swatch.anime-violet-evergarden, body[data-theme="anime-violet-evergarden"] { --otoImg: url('assets/anime/violet-evergarden.jpg'); --otoBase: #020201; --otoHeroPos: right 30%; --otoFocus: 58% 45%; --accent: #c68153; --glow: rgba(198, 129, 83, .26); }
.swatch.anime-violet-evergarden { background-image: linear-gradient(0deg, rgba(2, 2, 1, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Kimi no Na wa · cometa cruzando o ceu */
.swatch.anime-kimi-no-na-wa, body[data-theme="anime-kimi-no-na-wa"] { --otoImg: url('assets/anime/kimi-no-na-wa.jpg'); --otoBase: #0d0e1c; --otoHeroPos: right 30%; --otoFocus: 55% 45%; --accent: #67a1e3; --glow: rgba(103, 161, 227, .26); }
.swatch.anime-kimi-no-na-wa { background-image: linear-gradient(0deg, rgba(13, 14, 28, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Made in Abyss · raios de luz */
.swatch.anime-made-in-abyss, body[data-theme="anime-made-in-abyss"] { --otoImg: url('assets/anime/made-in-abyss.jpg'); --otoBase: #161513; --otoHeroPos: right 30%; --otoFocus: 52% 48%; --accent: #dfc28c; --glow: rgba(223, 194, 140, .26); }
.swatch.anime-made-in-abyss { background-image: linear-gradient(0deg, rgba(22, 21, 19, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* KonoSuba · faiscas velozes */
.swatch.anime-konosuba, body[data-theme="anime-konosuba"] { --otoImg: url('assets/anime/konosuba.jpg'); --otoBase: #0d131c; --otoHeroPos: right 30%; --otoFocus: 55% 45%; --accent: #4da9cb; --glow: rgba(77, 169, 203, .26); }
.swatch.anime-konosuba { background-image: linear-gradient(0deg, rgba(13, 19, 28, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Overlord · brasas subindo */
.swatch.anime-overlord, body[data-theme="anime-overlord"] { --otoImg: url('assets/anime/overlord.jpg'); --otoBase: #0d0d0f; --otoHeroPos: right 30%; --otoFocus: 55% 45%; --accent: #c95a50; --glow: rgba(201, 90, 80, .26); }
.swatch.anime-overlord { background-image: linear-gradient(0deg, rgba(13, 13, 15, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Noragami · brasas subindo */
.swatch.anime-noragami, body[data-theme="anime-noragami"] { --otoImg: url('assets/anime/noragami.jpg'); --otoBase: #1c0f0d; --otoHeroPos: right 34%; --otoFocus: 45% 45%; --accent: #c65e53; --glow: rgba(198, 94, 83, .26); }
.swatch.anime-noragami { background-image: linear-gradient(0deg, rgba(28, 15, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 34%; }

/* Soul Eater · estrelas cintilando */
.swatch.anime-soul-eater, body[data-theme="anime-soul-eater"] { --otoImg: url('assets/anime/soul-eater.jpg'); --otoBase: #161313; --otoHeroPos: right 30%; --otoFocus: 50% 45%; --accent: #b078dc; --glow: rgba(176, 120, 220, .26); }
.swatch.anime-soul-eater { background-image: linear-gradient(0deg, rgba(22, 19, 19, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Fire Force · brasas subindo */
.swatch.anime-fire-force, body[data-theme="anime-fire-force"] { --otoImg: url('assets/anime/fire-force.jpg'); --otoBase: #1b110d; --otoHeroPos: right 30%; --otoFocus: 52% 48%; --accent: #ef802a; --glow: rgba(239, 128, 42, .26); }
.swatch.anime-fire-force { background-image: linear-gradient(0deg, rgba(27, 17, 13, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Blue Lock · linhas de velocidade */
.swatch.anime-blue-lock, body[data-theme="anime-blue-lock"] { --otoImg: url('assets/anime/blue-lock.jpg'); --otoBase: #0d121c; --otoHeroPos: right 34%; --otoFocus: 45% 42%; --accent: #3f8bd9; --glow: rgba(63, 139, 217, .26); }
.swatch.anime-blue-lock { background-image: linear-gradient(0deg, rgba(13, 18, 28, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 34%; }

/* Haikyuu · linhas de velocidade */
.swatch.anime-haikyuu, body[data-theme="anime-haikyuu"] { --otoImg: url('assets/anime/haikyuu.jpg'); --otoBase: #131415; --otoHeroPos: right 30%; --otoFocus: 50% 42%; --accent: #e59a55; --glow: rgba(229, 154, 85, .26); }
.swatch.anime-haikyuu { background-image: linear-gradient(0deg, rgba(19, 20, 21, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Bungou Stray Dogs · paginas ao vento */
.swatch.anime-bungou-stray-dogs, body[data-theme="anime-bungou-stray-dogs"] { --otoImg: url('assets/anime/bungou-stray-dogs.jpg'); --otoBase: #131018; --otoHeroPos: right 26%; --otoFocus: 78% 58%; --accent: #c65270; --glow: rgba(198, 82, 112, .26); }
.swatch.anime-bungou-stray-dogs { background-image: linear-gradient(0deg, rgba(19, 16, 24, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 26%; }

/* Dr. Stone · bokeh flutuando */
.swatch.anime-dr-stone, body[data-theme="anime-dr-stone"] { --otoImg: url('assets/anime/dr-stone.jpg'); --otoBase: #0e131a; --otoHeroPos: right 30%; --otoFocus: 50% 48%; --accent: #5388c6; --glow: rgba(83, 136, 198, .26); }
.swatch.anime-dr-stone { background-image: linear-gradient(0deg, rgba(14, 19, 26, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Cyberpunk Edgerunners · scanlines e varredura */
.swatch.anime-cyberpunk-edgerunners, body[data-theme="anime-cyberpunk-edgerunners"] { --otoImg: url('assets/anime/cyberpunk-edgerunners.jpg'); --otoBase: #0f0d1c; --otoHeroPos: right 30%; --otoFocus: 50% 45%; --accent: #66c2da; --glow: rgba(102, 194, 218, .26); }
.swatch.anime-cyberpunk-edgerunners { background-image: linear-gradient(0deg, rgba(15, 13, 28, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }

/* Gurren Lagann · brasas subindo */
.swatch.anime-gurren-lagann, body[data-theme="anime-gurren-lagann"] { --otoImg: url('assets/anime/gurren-lagann.jpg'); --otoBase: #0d0c1a; --otoHeroPos: right 30%; --otoFocus: 50% 45%; --accent: #d94c3f; --glow: rgba(217, 76, 63, .26); }
.swatch.anime-gurren-lagann { background-image: linear-gradient(0deg, rgba(13, 12, 26, .8), transparent 70%), var(--otoImg); background-size: cover; background-position: center 30%; }