/* Gate Breach Transition */

.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.gate-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gate-overlay__left,
.gate-overlay__right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(180deg, #06080F 0%, #0A0E1A 100%);
}

.gate-overlay__left { left: 0; transform: translateX(-100%); }
.gate-overlay__right { right: 0; transform: translateX(100%); }

.gate-overlay.active .gate-overlay__left {
  animation: gateLeftIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.gate-overlay.active .gate-overlay__right {
  animation: gateRightIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.gate-overlay.closing .gate-overlay__left {
  animation: gateLeftOut 0.55s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.gate-overlay.closing .gate-overlay__right {
  animation: gateRightOut 0.55s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes gateLeftIn  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes gateRightIn { from { transform: translateX(100%);  } to { transform: translateX(0); } }
@keyframes gateLeftOut { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes gateRightOut{ from { transform: translateX(0); } to { transform: translateX(100%);  } }

.gate-overlay__crack {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%) scaleY(0);
  background: linear-gradient(180deg, transparent 0%, #7C3AED 20%, #06B6D4 50%, #F472B6 80%, transparent 100%);
  filter: drop-shadow(0 0 12px #7C3AED) drop-shadow(0 0 24px #06B6D4);
  transform-origin: center;
}

.gate-overlay.active .gate-overlay__crack {
  animation: crackOpen 0.7s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes crackOpen {
  0%   { transform: translateX(-50%) scaleY(0); opacity: 0; }
  20%  { transform: translateX(-50%) scaleY(1); opacity: 1; width: 2px; }
  60%  { width: 8px; opacity: 1; }
  100% { width: 60vw; opacity: 0; transform: translateX(-50%) scaleY(1.2); }
}

.gate-overlay__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.gate-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #F472B6, transparent);
  left: 50%; top: 50%;
  opacity: 0;
}

.gate-overlay.active .gate-particle {
  animation: particleBurst 1.2s 0.5s ease-out forwards;
}

@keyframes particleBurst {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20%  { opacity: 1; }
  100% {
    transform:
      translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)))
      scale(0);
    opacity: 0;
  }
}

/* Neon Glow Pulse */
@keyframes neonPulse {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 12px currentColor); }
  50%      { filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 24px currentColor); }
}

.neon-pulse { animation: neonPulse 2s ease-in-out infinite; }

/* Crack effect */
@keyframes crackFlicker {
  0%, 100% { opacity: 0.95; }
  45%      { opacity: 0.6; }
  47%      { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* Float animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Marquee scroll for ticker */
@keyframes scrollX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hologram scanlines */
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Glitch on intro */
@keyframes glitchClip {
  0%, 100% { clip-path: inset(0 0 0 0); }
  20% { clip-path: inset(10% 0 65% 0); }
  40% { clip-path: inset(50% 0 18% 0); }
  60% { clip-path: inset(33% 0 33% 0); }
  80% { clip-path: inset(67% 0 5% 0); }
}

@keyframes glitchShiftX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(2px); }
}

/* Typing caret */
@keyframes caretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Fade in slide up */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in-up { animation: fadeInUp 0.8s var(--ease-out) backwards; }

/* SSS rank crack shimmer */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Modal entrance */
@keyframes modalIn {
  0%   { opacity: 0; transform: scale(0.92) translateY(20px); clip-path: inset(50% 0 50% 0); }
  60%  { clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: scale(1) translateY(0); clip-path: inset(0 0 0 0); }
}

@keyframes modalOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.96) translateY(10px); }
}

@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropOut { from { opacity: 1; } to { opacity: 0; } }

/* Breaking news flash */
@keyframes flashIn {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.95); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Pulsing dot for live indicator */
@keyframes livePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}