/* Apresentação do chefão (js/bossintro.js) */
.bi { position: fixed; inset: 0; z-index: 60; overflow: hidden; color: #fff; font-family: var(--fun, inherit); touch-action: none; transition: opacity .3s; }
.bi.out { opacity: 0; }
.bi-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--boss) 55%, #0b0626) 0%, #0b0626 62%, #04020f 100%); opacity: 0; transition: opacity .35s; }
.bi.s1 .bi-bg { opacity: 1; }
.bi.s2 .bi-bg { animation: biFlash .5s ease-out; }
@keyframes biFlash { 0% { filter: brightness(2.4); } 100% { filter: none; } }
.bi-fx { position: absolute; inset: 0; pointer-events: none; }

.bi-banner { position: absolute; left: 0; right: 0; top: calc(var(--safe-top, env(safe-area-inset-top)) + 28px); text-align: center; transform: translateX(-120%) skewX(-12deg); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1) .15s; }
.bi.s1 .bi-banner { transform: none; }
.bi-banner small { display: inline-block; padding: 4px 12px; border-radius: 99px; background: #e11d48; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; animation: biBlink .5s steps(2) infinite; }
.bi-banner b { display: block; margin-top: 6px; font-size: clamp(30px, 10vw, 46px); line-height: 1.05; text-transform: uppercase; text-shadow: 0 0 18px var(--boss), 0 4px 0 rgba(0, 0, 0, .5); }
@keyframes biBlink { 50% { opacity: .55; } }

.bi-stage { position: absolute; left: 50%; top: 45%; width: min(68vw, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.bi-boss, .bi-echo { position: absolute; inset: 0; }
.bi-boss .boss-img img, .bi-echo .boss-img img { width: 100%; }
.bi-echo { opacity: 0; }
.bi-mad { position: absolute; right: 2%; top: 4%; font-size: 46px; opacity: 0; transform: scale(0); }
.bi.s2 .bi-mad { animation: biMad .9s cubic-bezier(.3, 1.8, .5, 1) forwards, biMadBeat .45s .9s ease-in-out infinite alternate; }
@keyframes biMad { to { opacity: 1; transform: scale(1); } }
@keyframes biMadBeat { from { transform: scale(1); } to { transform: scale(1.25); } }
/* Bravo: treme e brilha vermelho */
.bi.s2 .bi-boss { animation: biAngry .12s linear 8 alternate; }
.bi.s2 .bi-boss img { filter: drop-shadow(0 0 22px #ff2d55) drop-shadow(0 0 40px var(--boss)) saturate(1.3); transition: filter .3s; }
@keyframes biAngry { from { translate: -5px 0; rotate: -2deg; } to { translate: 5px 0; rotate: 2deg; } }
.bi.s2 { animation: biShake .4s; }
@keyframes biShake { 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-5px, 3px); } 80% { transform: translate(3px, -2px); } }
/* Respira ameaçador enquanto fala */
.bi.s3 .bi-boss { animation: biBreath 1s ease-in-out infinite alternate; }
@keyframes biBreath { from { scale: 1; } to { scale: 1.06; } }
/* Avança para cima do aluno e sai */
.bi.s4 .bi-boss { animation: none; transition: transform .5s cubic-bezier(.5, -0.4, .6, 1.4); transform: scale(1.45) translateY(6%); }
.bi.s5 .bi-boss { transition: transform .45s ease-in, opacity .45s; transform: translate(130%, -40%) rotate(25deg) scale(.6); opacity: 0; }
.bi.s5 .bi-echo { opacity: 0 !important; }

.bi-say { position: absolute; left: 16px; right: 16px; top: calc(45% + min(34vw, 150px) + 4px); display: flex; justify-content: center; opacity: 0; transform: translateY(12px) scale(.9); transition: .3s cubic-bezier(.3, 1.6, .5, 1); }
.bi.s3 .bi-say { opacity: 1; transform: none; }
.bi.s5 .bi-say { opacity: 0; transition-duration: .2s; }
.bi-say p { position: relative; margin: 0; max-width: 360px; min-height: 3.6em; padding: 12px 16px; border-radius: 18px; background: #fff; color: #1a0b3d; font: 800 17px/1.35 var(--fun, inherit); box-shadow: 0 0 0 3px var(--boss), 0 10px 30px rgba(0, 0, 0, .45); }
.bi-say p::before { content: ""; position: absolute; left: 50%; top: -12px; translate: -50% 0; border: 12px solid transparent; border-top: 0; border-bottom-color: #fff; }

.bi-vs { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 70px); display: flex; align-items: center; justify-content: center; gap: 18px; opacity: 0; transform: translateY(30px); transition: .4s .5s; }
.bi.s1 .bi-vs { opacity: 1; transform: none; }
.bi.s5 .bi-vs { opacity: 0; transition-delay: 0s; }
.bi-vs b { font-size: 34px; color: #fde047; text-shadow: 0 0 14px #f59e0b, 0 3px 0 #b45309; font-style: italic; }
.bi-vs > span { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 3px solid #fde047; background: #241063; display: grid; place-items: center; }
.bi-vs .bi-them { border-color: var(--boss); background: color-mix(in srgb, var(--boss) 30%, #120a3a); }
.bi-vs span img { width: 100%; height: 100%; object-fit: cover; }
.bi-vs .bi-them .boss-img img { object-fit: contain; transform: scale(1.15); }
.bi-vs .bi-me .astro.mini { width: 96px; margin: 0 0 -20px 0; }

.bi-go { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: clamp(48px, 16vw, 78px); color: #fde047; text-shadow: 0 0 24px #f59e0b, 0 6px 0 #b45309; transform: scale(3); opacity: 0; font-style: italic; }
.bi.s6 .bi-go { animation: biGo .8s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes biGo { 60% { opacity: 1; transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } }

.bi-skip { position: absolute; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 16px); padding: 8px 16px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .35); color: #fff; font: 800 14px var(--fun, inherit); cursor: pointer; }

/* ---------- Entradas (uma para cada chefão) ---------- */
.bi .bi-boss { opacity: 0; }
.bi.s1 .bi-boss { opacity: 1; }
/* Chiado: aparece e some em interferência */
.bi-glitch.s1:not(.s2) .bi-boss { animation: enGlitch 1.2s steps(1) both; }
@keyframes enGlitch { 0% { opacity: 0; } 10% { opacity: 1; translate: -14px 0; filter: hue-rotate(90deg); } 20% { opacity: 0; } 35% { opacity: 1; translate: 10px 0; } 45% { opacity: .2; } 60% { opacity: 1; translate: -4px 0; filter: none; } 75% { opacity: .5; } 100% { opacity: 1; translate: 0; } }
/* Eco Torto: chega da direita com cópias atrasadas */
.bi-eco.s1:not(.s2) .bi-boss { animation: enRight .8s cubic-bezier(.2, 1.3, .4, 1) both; }
.bi-eco.s1:not(.s5) .bi-echo { animation: enEcho 1.6s ease-out both; }
.bi-eco.s1:not(.s5) .bi-echo.e2 { animation-delay: .15s; }
@keyframes enRight { from { transform: translateX(140%) rotate(20deg); } }
@keyframes enEcho { 0% { opacity: 0; transform: translateX(140%); } 30% { opacity: .45; } 100% { opacity: 0; transform: translateX(-30%) scale(1.15); } }
/* Semitron: marcha em degraus (meio tom por vez) */
.bi-march.s1:not(.s2) .bi-boss { animation: enMarch 1.2s steps(6, end) both; }
@keyframes enMarch { from { transform: translate(-110%, 60%); } }
/* Gravitus: despenca do céu e afunda o chão */
.bi-drop.s1:not(.s2) .bi-boss { animation: enDrop .9s cubic-bezier(.6, 0, .9, .6) both; }
@keyframes enDrop { 0% { transform: translateY(-160%) scale(.8); } 85% { transform: translateY(4%) scale(1.1, .85); } 100% { transform: none; } }
/* Decodificador: escaneia e se materializa */
.bi-scan.s1:not(.s2) .bi-boss { animation: enScan 1.2s ease-out both; }
@keyframes enScan { from { clip-path: inset(0 0 100% 0); filter: brightness(3) hue-rotate(60deg); } to { clip-path: inset(0 0 0 0); } }
/* Quebra-Voz: entra em zigue-zague */
.bi-crack.s1:not(.s2) .bi-boss { animation: enZig 1.1s ease-out both; }
@keyframes enZig { 0% { transform: translate(-120%, -80%); } 33% { transform: translate(40%, -30%); } 66% { transform: translate(-25%, 10%); } 100% { transform: none; } }
/* Velocitor: rasante da esquerda */
.bi-dash.s1:not(.s2) .bi-boss { animation: enDash .6s cubic-bezier(.1, .9, .2, 1.2) .3s both; }
@keyframes enDash { from { transform: translateX(-220%) skewX(30deg); filter: blur(6px); } }
/* Breu: só os olhos no escuro, depois a luz acende */
.bi-dark.s1:not(.s2) .bi-boss { animation: enDark 1.2s ease-in both; }
@keyframes enDark { 0% { filter: brightness(0); opacity: 1; } 70% { filter: brightness(.05) drop-shadow(0 0 30px #8b5cf6); } 100% { filter: none; } }
/* Maestro e Rei: sobem do palco */
.bi-rise.s1:not(.s2) .bi-boss { animation: enRise 1.1s cubic-bezier(.2, 1.2, .4, 1) .1s both; }
@keyframes enRise { from { transform: translateY(120%) scale(.6); opacity: 0; } }

/* ---------- Fundos ---------- */
.bi-fx-static .bi-fx { background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 2px, transparent 2px 4px); animation: fxStatic .15s steps(2) infinite; }
@keyframes fxStatic { 50% { background-position: 0 3px; opacity: .6; } }
.bi-fx-rings .bi-fx { background: repeating-radial-gradient(circle at 50% 45%, transparent 0 30px, color-mix(in srgb, var(--boss) 35%, transparent) 30px 33px); animation: fxRings 1.4s linear infinite; }
@keyframes fxRings { from { background-size: 100% 100%; } to { background-size: 140% 140%; } }
.bi-fx-grid .bi-fx { background: linear-gradient(color-mix(in srgb, var(--boss) 30%, transparent) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, color-mix(in srgb, var(--boss) 30%, transparent) 1px, transparent 1px) 0 0 / 28px 100%; mask: linear-gradient(transparent 40%, #000); animation: fxGrid 1s linear infinite; }
@keyframes fxGrid { to { background-position: 0 28px, 0 0; } }
.bi-fx-dust .bi-fx { background: radial-gradient(ellipse 60% 10% at 50% 66%, rgba(255,255,255,.35), transparent); opacity: 0; }
.bi-fx-dust.s2 .bi-fx { animation: fxDust 1s ease-out; }
@keyframes fxDust { 0% { opacity: 1; transform: scaleX(.3); } 100% { opacity: 0; transform: scaleX(1.8); } }
.bi-fx-notes .bi-fx::before { content: "Dó Ré Mi Fá Sol Lá Si Dó Ré Mi Fá Sol Lá Si Dó Ré Mi Fá Sol Lá Si Dó Ré Mi Fá Sol"; position: absolute; inset: -20% 0 0; font: 800 22px/1.6 monospace; color: color-mix(in srgb, var(--boss) 60%, transparent); word-spacing: 18px; writing-mode: vertical-lr; animation: fxRain 3s linear infinite; opacity: .5; }
@keyframes fxRain { to { transform: translateY(20%); } }
.bi-fx-cracks .bi-fx { background: linear-gradient(115deg, transparent 48%, rgba(255,255,255,.5) 49%, transparent 50%), linear-gradient(60deg, transparent 58%, rgba(255,255,255,.35) 59%, transparent 60%), linear-gradient(160deg, transparent 30%, rgba(255,255,255,.3) 31%, transparent 32%); opacity: 0; }
.bi-fx-cracks.s2 .bi-fx { opacity: 1; transition: opacity .1s; }
.bi-fx-speed .bi-fx { background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.18) 22px 24px); mask: linear-gradient(90deg, #000, transparent 70%); animation: fxSpeed .3s linear infinite; }
@keyframes fxSpeed { to { background-position: 0 0; transform: translateX(-30px); } }
.bi-fx-spot .bi-bg { background: #000; }
.bi-fx-spot.s2 .bi-bg { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--boss) 70%, #1a1030) 0, #000 55%); }
.bi-fx-curtain .bi-fx::before, .bi-fx-curtain .bi-fx::after { content: ""; position: absolute; top: 0; bottom: 0; width: 52%; background: repeating-linear-gradient(90deg, #7f1d1d 0 18px, #991b1b 18px 36px); transition: transform 1s cubic-bezier(.6, 0, .3, 1) .1s; box-shadow: 0 0 30px #000; }
.bi-fx-curtain .bi-fx::before { left: 0; } .bi-fx-curtain .bi-fx::after { right: 0; }
.bi-fx-curtain.s1 .bi-fx::before { transform: translateX(-88%); } .bi-fx-curtain.s1 .bi-fx::after { transform: translateX(88%); }
.bi-fx-stage .bi-fx { background: conic-gradient(from 160deg at 15% 0%, transparent 0 10deg, rgba(255,255,255,.18) 10deg 22deg, transparent 22deg), conic-gradient(from 178deg at 85% 0%, transparent 0 10deg, rgba(255,255,255,.18) 10deg 22deg, transparent 22deg); animation: fxStage 1.6s ease-in-out infinite alternate; }
@keyframes fxStage { to { filter: hue-rotate(80deg); opacity: .7; } }

@media (prefers-reduced-motion: reduce) { .bi *, .bi { animation-duration: .01s !important; } }