/* 
  =========================================
  ESTILOS ESPECÍFICOS DE INDEX.HTML 
  ========================================= 
*/

/* 1. Shimmer effect for text */
@keyframes text-shimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.animate-text-shimmer {
  background-size: 200% auto;
  animation: text-shimmer 5s ease-in-out infinite;
}

/* 2. Modal Scale animation */
@keyframes modalScale {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 3. Ranking Dinámico: Ases del Blindaje */
@keyframes medalFloat {

  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-6px) rotate(2deg);
  }
}

@keyframes premiumShine {
  0% {
    transform: translate(-100px, -200px) rotate(30deg);
  }

  20% {
    transform: translate(500px, 400px) rotate(30deg);
  }

  100% {
    transform: translate(500px, 400px) rotate(30deg);
  }
}

.medal-anim-gold {
  animation: medalFloat 3s ease-in-out infinite;
}

.medal-anim-silver {
  animation: medalFloat 3.4s ease-in-out infinite 0.2s;
}

.medal-anim-bronze {
  animation: medalFloat 3.8s ease-in-out infinite 0.4s;
}

.rank-entry {
  animation: rankSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Premium Shine Effect for injected SVGs */
.premium-shine {
  animation: premiumShine 4s infinite ease-in-out;
  mix-blend-mode: overlay;
}

/* Infinite Ribbon Scroll */
@keyframes scrollRibbon {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.ribbon-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Gradient Mask for faded edges */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.ribbon-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: scrollRibbon 40s linear infinite;
  padding: 20px 0;
}

.ribbon-track:hover {
  animation-play-state: paused;
}

.sponsor-circle {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  /* Force Circle */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  /* slate-300/20 */
  background: rgba(248, 250, 252, 0.8);
  /* slate-50/80 */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.dark .sponsor-circle {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.sponsor-circle:hover {
  transform: scale(1.1) translateY(-5px);
  background: white;
  border-color: #3b82f6;
  /* primary */
  box-shadow: 0 10px 15px -3px rgb(59 130 246 / 0.3);
}

.dark .sponsor-circle:hover {
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .sponsor-circle {
    width: 65px;
    height: 65px;
  }

  .ribbon-track {
    gap: 1.5rem;
    animation-duration: 25s;
  }
}

/* 4. BOTÓN DE LA MASCOTA (Tapa de seguridad) */
.mcb-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  cursor: pointer;
  flex-shrink: 0;
  perspective: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.75);
}

.mcb-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #facc15, #facc15 4px, #1e1e1e 4px, #1e1e1e 8px);
  border-radius: 6px;
  border: 1.5px solid #ca8a04;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.mcb-red {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 35% 30%, #ff8080 0%, #dc2626 40%, #7f1d1d 100%);
  border-radius: 50%;
  border: 1.5px solid #450a0a;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 200, 200, 0.4);
  z-index: 2;
  transition: transform 0.08s;
}

.mcb-wrap:hover .mcb-red {
  transform: translate(-50%, calc(-50% + 1px));
}

.mcb-hinge {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 4px;
  background: linear-gradient(180deg, #94a3b8, #334155);
  border-radius: 2px;
  z-index: 5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.mcb-lid {
  position: absolute;
  top: 0;
  left: -1px;
  transform: rotateX(0deg);
  transform-origin: top center;
  width: calc(100% + 2px);
  height: 100%;
  background: linear-gradient(160deg, rgba(186, 230, 253, 0.3), rgba(56, 189, 248, 0.1));
  border: 1px solid rgba(125, 211, 252, 0.6);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.2);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  z-index: 4;
  pointer-events: none;
}

.mcb-lid::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
}

.mcb-wrap[data-state="open"] .mcb-lid {
  transform: rotateX(135deg);
}

.mcb-wrap[data-state="open"] .mcb-red {
  animation: mcbPulse 0.9s ease-in-out infinite;
}

@keyframes mcbPulse {

  0%,
  100% {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  50% {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 0 7px rgba(239, 68, 68, 0);
  }
}

.mcb-tracer-el {
  position: fixed;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fbbf24 40%, #ef4444 70%, #fff 100%);
  border-radius: 3px;
  box-shadow: 0 0 6px #ef4444, 0 0 14px #fbbf24;
  pointer-events: none;
  z-index: 99999;
  transform-origin: right center;
}

.mcb-boom-el {
  position: fixed;
  font-size: 48px;
  pointer-events: none;
  z-index: 99999;
  animation: mcbBoom 0.65s ease-out forwards;
  user-select: none;
  line-height: 1;
}

@keyframes mcbBoom {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 1;
  }

  40% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}

@keyframes mcbShakeMascot {

  0%,
  100% {
    transform: none;
  }

  15% {
    transform: translateX(-5px) rotate(-3deg);
  }

  35% {
    transform: translateX(5px) rotate(3deg);
  }

  55% {
    transform: translateX(-3px) rotate(-2deg);
  }

  75% {
    transform: translateX(3px) rotate(2deg);
  }
}

/* 5. Corner Vignettes para Legibilidad (Invisible Pop) */
.vignette-top-left {
  /* Viñeta CLARA para texto OSCURO sobre fondo MILITAR */
  background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.4) 0%, transparent 80%);
}

.vignette-top-right {
  /* Viñeta OSCURA para texto OSCURO sobre fondo CLARO */
  background: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
}

.dark .vignette-top-left,
.dark .vignette-top-right {
  opacity: 0.9;
}

/* ─── SCROLL INDICATOR ─── */
.scroll-indicator {
    position: absolute;
    bottom: 15px; /* A raz de suelo */
    left: 50%;
    transform: translateX(-50%) scale(0.9); /* Reducido un 10% */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    z-index: 30;
    transition: all 0.3s ease;
}
.mouse-icon {
    width: 26px;
    height: 42px;
    border: 2px solid #bd9b6b; /* Dorado del Mundial */
    border-radius: 15px;
    position: relative;
    box-shadow: 0 0 10px rgba(189, 155, 107, 0.3);
}
.mouse-wheel {
    width: 4px;
    height: 8px;
    background: #bd9b6b;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: mouse-scroll 1.6s infinite ease-in-out;
}
.scroll-text {
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: #bd9b6b;
    opacity: 0.8;
    text-transform: uppercase;
}
/* Animación de la rueda del ratón */
@keyframes mouse-scroll {
    0% {
        top: 8px;
        opacity: 1;
    }
    70% {
        top: 22px;
        opacity: 0;
    }
    100% {
        top: 8px;
        opacity: 0;
    }
}
/* Efecto Hover */
.scroll-indicator:hover {
    transform: translateX(-50%) translateY(-5px);
    filter: brightness(1.3);
}