/*
Theme Name: Intruders Punk Theme
Theme URI: https://intrudersrock.com.ar
Author: Tu Nombre
Description: Tema exclusivo para la banda Intruders. Estilo Punk Rock/Grunge.
Version: 1.0
*/

/* =========================================
   FORZAMOS LA CARGA DE LA FUENTE
   ========================================= */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Permanent+Marker&family=Roboto:wght@300;400;700&display=swap");

/* =========================================
   ESTILOS BASE (Copiados de tu diseño HTML)
   ========================================= */
:root {
  --primary-red: #d60000;
  --electric-blue: #3a0ca3;
  --dark-bg: #0a0a0a;
  --text-light: #f0f0f0;
}

body {
  background-color: var(--dark-bg);
  color: var(--text-light);
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.punk-font {
  font-family: "Permanent Marker", "Anton", sans-serif !important;
  font-weight: 400;
  font-style: normal;
  color: var(--primary-red);
}

/* Navbar Fix para WP Admin Bar */
body.admin-bar .navbar {
  top: 32px;
}

.navbar {
  background-color: rgba(0, 0, 0, 0.9) !important;
  border-bottom: 2px solid var(--primary-red);
  transition: 0.3s;
}

.nav-link {
  color: #fff !important;
  font-weight: bold;
  text-transform: uppercase;
}
.nav-link:hover {
  color: var(--primary-red) !important;
  text-shadow: 0 0 5px var(--primary-red);
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 100vh;
  /* La imagen de fondo se carga inline en el PHP */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(10, 10, 10, 0.6) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 90%;
}

.main-banner-img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 0 15px rgba(58, 12, 163, 0.8));
}

/* Secciones */
section {
  padding: 80px 0;
  border-bottom: 1px solid #222;
}

.section-title {
  font-size: 3rem;
  margin-bottom: 50px;
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: "";
  display: block;
  width: 50%;
  height: 4px;
  background-color: var(--primary-red);
  margin: 10px auto 0;
  transform: skew(-20deg);
}

/* Imágenes Historia */
.history-img {
  border: 5px solid #fff;
  transform: rotate(-3deg);
  box-shadow: 10px 10px 0px var(--primary-red);
  transition: 0.3s;
}
.history-img:hover {
  transform: rotate(0deg) scale(1.02);
}

/* Footer */
footer {
  background: #000;
  padding: 50px 0;
  text-align: center;
}
.social-icon {
  font-size: 2rem;
  color: #fff;
  margin: 0 15px;
  transition: 0.3s;
}
.social-icon:hover {
  color: var(--primary-red);
}

/* Utilidad WP */
.wp-post-image {
  max-width: 100%;
  height: auto;
  border: 2px solid #333;
}

/* =========================================
   ANIMACIONES RECUPERADAS (PUNK FX)
   ========================================= */

/* 1. Efecto Latido (Pulse) para el Banner */
.main-banner-img {
  /* Esto hace que la imagen lata suavemente */
  animation: pulseBanner 3s infinite;
}

@keyframes pulseBanner {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  } /* Crece un poquito */
  100% {
    transform: scale(1);
  }
}

/* 2. Efecto Falla Digital (Glitch) para el Texto */
.glitch {
  position: relative;
  /* Aseguramos que el texto original se vea */
  display: inline-block;
}

/* Crea dos copias fantasmas del texto */
.glitch::before,
.glitch::after {
  content: attr(data-text); /* Copia el texto automáticamente */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dark-bg); /* Fondo oscuro para recortar */
}

/* La copia rosa/roja */
.glitch::before {
  left: 2px;
  text-shadow: -1px 0 #ff00c1;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

/* La copia celeste/cian */
.glitch::after {
  left: -2px;
  text-shadow: -1px 0 #00fff9;
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

/* Animación de movimiento de las franjas (subir y bajar) */
@keyframes glitch-anim {
  0% {
    clip: rect(13px, 9999px, 81px, 0);
  }
  20% {
    clip: rect(83px, 9999px, 40px, 0);
  }
  40% {
    clip: rect(30px, 9999px, 70px, 0);
  }
  60% {
    clip: rect(60px, 9999px, 20px, 0);
  }
  80% {
    clip: rect(10px, 9999px, 50px, 0);
  }
  100% {
    clip: rect(68px, 9999px, 8px, 0);
  }
}

@keyframes glitch-anim2 {
  0% {
    clip: rect(65px, 9999px, 97px, 0);
  }
  20% {
    clip: rect(15px, 9999px, 50px, 0);
  }
  40% {
    clip: rect(90px, 9999px, 10px, 0);
  }
  60% {
    clip: rect(10px, 9999px, 85px, 0);
  }
  80% {
    clip: rect(40px, 9999px, 60px, 0);
  }
  100% {
    clip: rect(12px, 9999px, 58px, 0);
  }
}

/* =========================================
   CORRECCIONES RESPONSIVE (MÓVIL)
   ========================================= */

/* Solo aplica en pantallas menores a 768px (Celulares y Tablets chicas) */
@media (max-width: 768px) {
  /* 1. Achicamos los títulos para que no rompan el ancho */
  .section-title {
    font-size: 1.7rem !important; /* Bajamos de 3rem a 1.7rem */
    word-wrap: break-word; /* Si aún es larga, permite partirla */
  }

  /* 2. Ajuste específico para encabezados muy grandes (Glitch text) */
  h1,
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.2;
  }

  /* 3. Forzar al contenedor a respetar el ancho del celular */
  body,
  html {
    overflow-x: hidden; /* Ocultar desbordamiento horizontal */
    width: 100%;
  }

  /* 4. Ajustes de márgenes en secciones para ganar espacio */
  section {
    padding: 40px 0; /* Menos relleno vertical */
  }

  /* 5. Asegurar que las imágenes no sean más anchas que la pantalla */
  img {
    max-width: 100%;
    height: auto;
  }
}