/* ============================================================
   animations.css — Ключевые кадры и анимации
   Marvel vs DC: Битва Вселенных
   ============================================================ */

/* ---------- Lightning Strike (удар молнии) ---------- */
@keyframes lightning-strike {
  0% {
    opacity: 0;
    transform: scaleY(0) translateX(-50%);
    filter: brightness(2);
  }
  10% {
    opacity: 1;
    transform: scaleY(1) translateX(0);
    filter: brightness(3);
  }
  20% {
    opacity: 0.8;
    filter: brightness(1.5);
  }
  30% {
    opacity: 1;
    filter: brightness(4);
    transform: scaleY(1.1) translateX(2px);
  }
  50% {
    opacity: 0.9;
    filter: brightness(2);
  }
  70% {
    opacity: 0.3;
    filter: brightness(1);
  }
  100% {
    opacity: 0.7;
    filter: brightness(0.8);
  }
}

/* Lightning flicker (мерцание молнии) */
@keyframes lightning-flicker {
  0%, 100% {
    opacity: 0.7;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
  }
  25% {
    opacity: 1;
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8));
  }
  50% {
    opacity: 0.5;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.2));
  }
  75% {
    opacity: 1;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.9));
  }
}

.hero__lightning {
  animation: lightning-flicker 2s ease-in-out infinite;
}

.hero__lightning--left {
  animation-delay: 0s;
}

.hero__lightning--right {
  animation-delay: 0.5s;
}

/* Hero lightning initial entrance */
@keyframes lightning-appear {
  0% {
    opacity: 0;
    transform: scaleY(0) scaleX(0);
  }
  30% {
    opacity: 1;
    transform: scaleY(1.2) scaleX(0.8);
  }
  60% {
    transform: scaleY(0.9) scaleX(1.1);
  }
  100% {
    opacity: 0.8;
    transform: scaleY(1) scaleX(1);
  }
}

.hero__lightning svg {
  animation: lightning-appear 1.2s ease-out forwards;
  transform-origin: top center;
}

/* ---------- Hero Card Appear (вылет карточек) ---------- */
@keyframes card-fly-in-left {
  0% {
    opacity: 0;
    transform: translateX(-120px) rotate(-8deg) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateX(10px) rotate(2deg) scale(1.02);
  }
  80% {
    transform: translateX(-5px) rotate(-1deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0) scale(1);
  }
}

@keyframes card-fly-in-right {
  0% {
    opacity: 0;
    transform: translateX(120px) rotate(8deg) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateX(-10px) rotate(-2deg) scale(1.02);
  }
  80% {
    transform: translateX(5px) rotate(1deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0) scale(1);
  }
}

@keyframes card-fly-in-bottom {
  0% {
    opacity: 0;
    transform: translateY(80px) scale(0.85);
  }
  60% {
    opacity: 1;
    transform: translateY(-8px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Card appear class (applied via JS on scroll) */
.hero-card.animate-in[data-side="marvel"] {
  animation: card-fly-in-left 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-card.animate-in[data-side="dc"] {
  animation: card-fly-in-right 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-card.animate-in {
  animation: card-fly-in-bottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---------- Battle Impact (удар/столкновение) ---------- */
@keyframes battle-impact {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
  20% {
    transform: scale(1.05);
    box-shadow: 0 0 40px 20px rgba(255, 215, 0, 0.5);
  }
  40% {
    transform: scale(0.95);
  }
  60% {
    transform: scale(1.02);
    box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.2);
  }
  80% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 20px var(--shadow-color, rgba(0,0,0,0.15));
  }
}

.battle-card.impact {
  animation: battle-impact 0.6s ease-out;
}

/* ---------- Shake (тряска) ---------- */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-8px) rotate(-1deg);
  }
  20% {
    transform: translateX(8px) rotate(1deg);
  }
  30% {
    transform: translateX(-6px) rotate(-0.5deg);
  }
  40% {
    transform: translateX(6px) rotate(0.5deg);
  }
  50% {
    transform: translateX(-4px);
  }
  60% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}

.shake {
  animation: shake 0.6s ease-in-out;
}

/* ---------- Epic Shake (сильная тряска для Easter Egg) ---------- */
@keyframes epic-shake {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  5% {
    transform: translate(-12px, -6px) rotate(-2deg);
  }
  10% {
    transform: translate(10px, 8px) rotate(2deg);
  }
  15% {
    transform: translate(-8px, -4px) rotate(-1deg);
  }
  20% {
    transform: translate(8px, 6px) rotate(1deg);
  }
  25% {
    transform: translate(-6px, -3px);
  }
  30% {
    transform: translate(6px, 4px);
  }
  35% {
    transform: translate(-4px, -2px);
  }
  40% {
    transform: translate(4px, 2px);
  }
  45% {
    transform: translate(-2px, -1px);
  }
  50%, 100% {
    transform: translate(0, 0);
  }
}

.epic-shake {
  animation: epic-shake 0.8s ease-in-out;
}

/* ---------- Typewriter (печатная машинка) ---------- */
@keyframes typewriter-cursor {
  0%, 100% {
    border-right-color: var(--marvel-gold);
  }
  50% {
    border-right-color: transparent;
  }
}

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--marvel-gold);
  animation: typewriter-cursor 0.8s step-end infinite;
  max-width: fit-content;
}

/* Typewriter reveal animation (width driven) — используется в JS */
@keyframes typewriter-reveal {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* ---------- POW! BAM! ZAP! (комикс-эффекты) ---------- */
@keyframes pow-appear {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-20deg);
  }
  30% {
    opacity: 1;
    transform: scale(1.3) rotate(10deg);
  }
  50% {
    transform: scale(1.1) rotate(-5deg);
  }
  70% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  90% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(10deg) translateY(-30px);
  }
}

.comic-fx {
  position: fixed;
  font-family: var(--font-marvel, 'Bangers', cursive);
  font-size: 4rem;
  color: var(--marvel-gold, #FFD700);
  pointer-events: none;
  z-index: 10000;
  text-shadow:
    3px 3px 0 var(--marvel-red, #ED1D24),
    -2px -2px 0 var(--dc-blue, #0476F2);
  animation: pow-appear 1.2s ease-out forwards;
}

/* ---------- Slide In (для секций при скролле) ---------- */
@keyframes slide-in-up {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-up {
  animation: slide-in-up 0.7s ease-out forwards;
}

.slide-in-left {
  animation: slide-in-left 0.7s ease-out forwards;
}

.slide-in-right {
  animation: slide-in-right 0.7s ease-out forwards;
}

/* ---------- Hero Aura (аура силы) ---------- */
@keyframes hero-aura-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }
}

/* Огонь (Iron Man) */
@keyframes aura-fire {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.5;
    filter: blur(2px);
  }
  25% {
    transform: scale(1.2) rotate(5deg);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1) rotate(-3deg);
    opacity: 0.6;
  }
  75% {
    transform: scale(1.25) rotate(4deg);
    opacity: 0.9;
  }
}

/* Молния (Thor, The Flash) */
@keyframes aura-lightning {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
    filter: brightness(1);
  }
  10% {
    transform: scale(1.3);
    opacity: 0.9;
    filter: brightness(2);
  }
  30% {
    transform: scale(1.05);
    opacity: 0.5;
    filter: brightness(1);
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
    filter: brightness(1.5);
  }
  70% {
    transform: scale(1.1);
    opacity: 0.6;
  }
}

/* Ветер / ураган (Superman, Wonder Woman) */
@keyframes aura-wind {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.3;
  }
  33% {
    transform: scale(1.15) rotate(8deg);
    opacity: 0.7;
  }
  66% {
    transform: scale(1.05) rotate(-5deg);
    opacity: 0.5;
  }
}

/* Щит / звезда (Captain America) */
@keyframes aura-shield {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  33% {
    transform: scale(1.2);
    opacity: 0.8;
    border-radius: 30% 70% 50% 50%;
  }
  66% {
    transform: scale(0.95);
    opacity: 0.6;
  }
}

/* Паутина (Spider-Man) */
@keyframes aura-web {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.3;
  }
  25% {
    transform: scale(1.1) rotate(90deg);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.4;
  }
  75% {
    transform: scale(1.05) rotate(270deg);
    opacity: 0.7;
  }
}

/* Тень (Batman) */
@keyframes aura-shadow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
    filter: blur(3px);
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
    filter: blur(6px);
  }
}

.hero-card .hero-card__avatar::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--transition-medium, 0.35s ease);
  z-index: -1;
  pointer-events: none;
}

.hero-card:hover .hero-card__avatar::after {
  opacity: 1;
  animation: hero-aura-pulse 1.5s ease-in-out infinite;
}

/* Ауры по умолчанию для вселенных */
.hero-card[data-side="marvel"]:hover .hero-card__avatar::after {
  background: radial-gradient(circle, rgba(237, 29, 36, 0.3), transparent 70%);
}

.hero-card[data-side="dc"]:hover .hero-card__avatar::after {
  background: radial-gradient(circle, rgba(4, 118, 242, 0.3), transparent 70%);
}

/* === Персональные ауры героев === */
/* Iron Man — огонь */
.hero-card[data-side="marvel"]:nth-child(1):hover .hero-card__avatar::after {
  animation: aura-fire 1.2s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 69, 0, 0.4), rgba(255, 215, 0, 0.2), transparent 70%);
  box-shadow: 0 0 30px rgba(255, 69, 0, 0.3), inset 0 0 20px rgba(255, 165, 0, 0.2);
}

/* Captain America — щит/звезда */
.hero-card[data-side="marvel"]:nth-child(2):hover .hero-card__avatar::after {
  animation: aura-shield 1.5s ease-in-out infinite;
  background: radial-gradient(circle, rgba(0, 71, 171, 0.3), rgba(237, 29, 36, 0.2), transparent 70%);
}

/* Thor — молния */
.hero-card[data-side="marvel"]:nth-child(3):hover .hero-card__avatar::after {
  animation: aura-lightning 1s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4), rgba(100, 149, 237, 0.2), transparent 70%);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

/* Spider-Man — паутина */
.hero-card[data-side="marvel"]:nth-child(4):hover .hero-card__avatar::after {
  animation: aura-web 2s linear infinite;
  background: radial-gradient(circle, rgba(237, 29, 36, 0.3), rgba(0, 0, 0, 0.1), transparent 70%);
}

/* Batman — тень (5-й ребёнок в сетке) */
.hero-card[data-side="dc"]:nth-child(5):hover .hero-card__avatar::after {
  animation: aura-shadow 2s ease-in-out infinite;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(26, 26, 46, 0.3), transparent 70%);
  filter: blur(4px);
}

/* Superman — ветер (6-й ребёнок) */
.hero-card[data-side="dc"]:nth-child(6):hover .hero-card__avatar::after {
  animation: aura-wind 1.8s ease-in-out infinite;
  background: radial-gradient(circle, rgba(4, 118, 242, 0.4), rgba(255, 0, 0, 0.1), transparent 70%);
}

/* Wonder Woman — ветер + золото (7-й ребёнок) */
.hero-card[data-side="dc"]:nth-child(7):hover .hero-card__avatar::after {
  animation: aura-wind 1.5s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4), rgba(4, 118, 242, 0.2), transparent 70%);
}

/* The Flash — молния (8-й ребёнок) */
.hero-card[data-side="dc"]:nth-child(8):hover .hero-card__avatar::after {
  animation: aura-lightning 0.7s ease-in-out infinite;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4), rgba(255, 69, 0, 0.2), transparent 70%);
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
}

/* ---------- Floating Particles (для частиц) ---------- */
@keyframes float-particle {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120px) translateX(40px) scale(0);
    opacity: 0;
  }
}

@keyframes float-particle-alt {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100px) translateX(-30px) scale(0);
    opacity: 0;
  }
}

/* ---------- Progress bar pulse ---------- */
@keyframes bar-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  }
}

.voting__bar-fill {
  animation: bar-pulse 2s ease-in-out infinite;
}

/* ---------- Section appear on scroll ---------- */
@keyframes section-appear {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

section {
  animation: section-appear 0.8s ease-out;
  animation-fill-mode: both;
  animation-play-state: paused;
}

section.visible {
  animation-play-state: running;
}

/* Delay each section */
#universes { animation-delay: 0.1s; }
#heroes    { animation-delay: 0.2s; }
#battles   { animation-delay: 0.3s; }
#gallery   { animation-delay: 0.4s; }
#voting    { animation-delay: 0.5s; }

/* ---------- Modal appear ---------- */
@keyframes modal-appear {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(30px);
  }
  60% {
    transform: scale(1.02) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ---------- Gallery Page Flip (перелистывание страниц) ---------- */
@keyframes gallery-page-flip {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transform: perspective(1200px) rotateY(0deg);
    opacity: 1;
  }
  50% {
    clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 0% 100%);
    transform: perspective(1200px) rotateY(-15deg);
    opacity: 0.9;
  }
  100% {
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    transform: perspective(1200px) rotateY(-90deg);
    opacity: 0;
  }
}

@keyframes gallery-page-flip-reverse {
  0% {
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    transform: perspective(1200px) rotateY(90deg);
    opacity: 0;
  }
  50% {
    clip-path: polygon(100% 0%, 0% 0%, 5% 100%, 100% 100%);
    transform: perspective(1200px) rotateY(15deg);
    opacity: 0.9;
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    transform: perspective(1200px) rotateY(0deg);
    opacity: 1;
  }
}

/* ---------- Battle Animation (бой) ---------- */
@keyframes battle-fight-left {
  0% { transform: translateX(0) scale(1); }
  15% { transform: translateX(15px) scale(1.1); }
  30% { transform: translateX(-10px) scale(0.95); }
  45% { transform: translateX(20px) scale(1.05); }
  60% { transform: translateX(-5px) scale(0.98); }
  75% { transform: translateX(8px) scale(1.02); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes battle-fight-right {
  0% { transform: translateX(0) scale(1); }
  15% { transform: translateX(-15px) scale(1.1); }
  30% { transform: translateX(10px) scale(0.95); }
  45% { transform: translateX(-20px) scale(1.05); }
  60% { transform: translateX(5px) scale(0.98); }
  75% { transform: translateX(-8px) scale(1.02); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes battle-spark {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: scale(1.5) rotate(180deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1) rotate(360deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(540deg);
  }
}

/* ---------- Particle animations ---------- */
@keyframes particle-star {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0);
  }
  20% {
    opacity: 0.9;
    transform: translateY(-20px) translateX(5px) scale(1);
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) translateX(20px) scale(0.2);
  }
}

@keyframes particle-lightning {
  0% {
    opacity: 0;
    transform: scaleY(0) scaleX(0);
  }
  10% {
    opacity: 1;
    transform: scaleY(1) scaleX(1);
  }
  30% {
    opacity: 0.9;
    transform: scaleY(1.2) scaleX(0.8);
  }
  50% {
    opacity: 0.5;
    transform: scaleY(0.7) scaleX(1.1);
  }
  100% {
    opacity: 0;
    transform: scaleY(0) scaleX(0);
  }
}

/* ---------- Golden glow ---------- */
@keyframes golden-glow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  }
  50% {
    text-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 50px rgba(255, 215, 0, 0.3);
  }
}

/* ---------- Epic Battle Mode overlay ---------- */
@keyframes battle-mode-flash {
  0%, 100% {
    opacity: 0;
  }
  10%, 30%, 50%, 70%, 90% {
    opacity: 0.8;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.2;
  }
}

/* ---------- Epic Battle Mode text pulse ---------- */
@keyframes battle-mode-text-pulse {
  0%, 100% {
    transform: scale(1);
    color: var(--marvel-gold);
  }
  25% {
    transform: scale(1.05);
    color: var(--marvel-red);
  }
  50% {
    transform: scale(1);
    color: var(--marvel-gold);
  }
  75% {
    transform: scale(1.05);
    color: var(--dc-blue);
  }
}

.battle-mode-text {
  animation: battle-mode-text-pulse 1s ease-in-out infinite;
}

/* ---------- Battle Announcement (Easter Egg) ---------- */
@keyframes battle-announcement-float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.02);
  }
}

.battle-announcement {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  font-family: var(--font-marvel, 'Bangers', cursive);
  font-size: clamp(1.8rem, 6vw, 4rem);
  color: var(--marvel-gold, #FFD700);
  text-align: center;
  text-shadow:
    4px 4px 0 var(--marvel-red, #ED1D24),
    -3px -3px 0 var(--dc-blue, #0476F2),
    0 0 40px rgba(255, 215, 0, 0.6),
    0 0 80px rgba(255, 215, 0, 0.3);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 4px;
  animation: battle-announcement-float 1.5s ease-in-out infinite;
  padding: 20px 40px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---------- Battle Lightning Overlay ---------- */
.battle-lightning-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(255, 215, 0, 0.05) 100%);
}

.battle-lightning-bolt {
  position: absolute;
  width: 40px;
  height: auto;
  opacity: 0.5;
  animation: lightning-flicker 1.5s ease-in-out infinite;
  transform-origin: top center;
}

.battle-lightning-bolt svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

/* ---------- Theme Change Lightning Flash ---------- */
@keyframes theme-flash {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
    background: rgba(255, 215, 0, 0.15);
  }
  20% {
    opacity: 0.3;
    background: rgba(255, 215, 0, 0.08);
  }
  35% {
    opacity: 0.8;
    background: rgba(255, 215, 0, 0.12);
  }
  50% {
    opacity: 0.1;
  }
  65% {
    opacity: 0.5;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.theme-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  animation: theme-flash 0.8s ease-out forwards;
}

/* ---------- Battle mode flash on sections ---------- */
.battle-mode-active .header,
.battle-mode-active .hero,
.battle-mode-active .universes,
.battle-mode-active .heroes,
.battle-mode-active .battles,
.battle-mode-active .gallery,
.battle-mode-active .voting,
.battle-mode-active .footer {
  animation: battle-mode-flash 0.5s ease-in-out 3;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__lightning,
  .hero-card.animate-in,
  .battle-card.impact,
  .shake,
  .epic-shake,
  .comic-fx,
  .voting__bar-fill,
  section {
    animation: none !important;
  }

  .hero-card .hero-card__avatar::after {
    animation: none !important;
  }

  .typewriter {
    border-right: none;
    animation: none;
  }

  .battle-announcement,
  .battle-lightning-bolt,
  .theme-flash-overlay {
    animation: none !important;
    opacity: 0 !important;
  }

  .battle-lightning-overlay {
    display: none !important;
  }

  .battle-mode-active .header,
  .battle-mode-active .hero,
  .battle-mode-active .universes,
  .battle-mode-active .heroes,
  .battle-mode-active .battles,
  .battle-mode-active .gallery,
  .battle-mode-active .voting,
  .battle-mode-active .footer {
    animation: none !important;
  }
}

/* ---------- Crack Appear (Marvel раскол) ---------- */
@keyframes crack-appear {
  0% {
    opacity: 0;
    transform: scale(0.5);
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  30% {
    opacity: 1;
    transform: scale(1.05);
    clip-path: polygon(45% 40%, 55% 38%, 52% 55%, 48% 60%);
  }
  60% {
    transform: scale(0.95);
    clip-path: polygon(10% 5%, 90% 8%, 85% 92%, 8% 90%);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ---------- Bat Shadow Appear ---------- */
@keyframes bat-shadow-appear {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-10deg);
    transform-origin: bottom center;
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1) rotate(3deg);
    transform-origin: bottom center;
  }
  80% {
    transform: scale(0.95) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transform-origin: bottom center;
  }
}

/* ---------- Bat Symbol Glow ---------- */
@keyframes bat-symbol-glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(4, 118, 242, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(4, 118, 242, 0.6));
  }
}

/* ---------- Comic Bubble Tooltip (комикс-бабл для меню) ---------- */
@keyframes bubble-tooltip {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}