/* ==========================================================================
   Intro animada de la portada: el cable del logo se "enchufa", la corriente
   recorre el círculo y el rayo cae con destello, chispas y onda expansiva.
   Solo se muestra si <html> tiene la clase .intro-activa (ver index.html).
   ========================================================================== */

.intro { display: none; }

.intro-activa body { overflow: hidden; }

.intro-activa .intro {
  display: block;
  position: fixed; inset: 0; z-index: 1000;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(229, 161, 60, .10), transparent 70%),
    var(--negro);
  cursor: pointer;
  /* Red de seguridad: si el script no llega a cargar, la intro se retira sola */
  animation: intro-seguridad .4s 7s forwards;
  --radio-iris: 0px;
  --iris-x: 50%;
  --iris-y: 50%;
}

/* Rejilla de fondo, como la del héroe, que parpadea al "dar la luz" */
.intro::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background-image: linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, #000 20%, transparent 75%);
}
.intro--encendida::before { animation: intro-parpadeo 1.1s steps(1, end) forwards; }

.intro__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.intro__escena {
  position: absolute; left: 50%; top: 46%;
  width: min(640px, 84vw); aspect-ratio: 900 / 559;
  transform: translate(-50%, -50%);
}
.intro__escena > img,
.intro__escena > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* Logo completo (con la firma y el texto) que se descubre con un barrido */
.intro__logo-png { clip-path: inset(0 100% 0 0); }
.intro--firma .intro__logo-png { animation: intro-barrido .9s cubic-bezier(.65, 0, .35, 1) forwards; }

/* Haz de luz que acompaña al barrido */
.intro__haz {
  position: absolute; top: -8%; bottom: -8%; left: 0; width: 3px; opacity: 0;
  background: linear-gradient(to bottom, transparent, #fff 25%, var(--oro-claro) 50%, #fff 75%, transparent);
  box-shadow: 0 0 18px 4px rgba(244, 196, 107, .85), 0 0 60px 12px rgba(229, 161, 60, .45);
}
.intro--firma .intro__haz { animation: intro-haz .9s cubic-bezier(.65, 0, .35, 1) forwards; }

/* Trazos del símbolo */
.intro__cable {
  fill: none; stroke: var(--oro-claro); stroke-width: 15;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(244, 196, 107, .9)) drop-shadow(0 0 18px rgba(229, 161, 60, .6));
}
.intro__rayo {
  fill: var(--oro-claro); stroke: var(--oro-claro); stroke-width: 8; stroke-linejoin: round;
  opacity: 0; transform-box: fill-box; transform-origin: 50% 50%;
}
.intro--rayo .intro__rayo { animation: intro-rayo .55s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.intro--rayo .intro__escena { animation: intro-temblor .42s linear; }

/* Una vez aparece el logo real, el símbolo vectorial se funde con él */
.intro--firma .intro__simbolo { animation: intro-fundido .6s .9s ease forwards; }

/* Destello a pantalla completa */
.intro__destello { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.intro--rayo .intro__destello { animation: intro-destello .5s ease-out forwards; }

/* Onda expansiva desde el rayo */
.intro__onda {
  position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; border: 3px solid var(--oro-claro); opacity: 0; pointer-events: none;
  box-shadow: 0 0 30px rgba(244, 196, 107, .8), inset 0 0 30px rgba(244, 196, 107, .6);
}
.intro--rayo .intro__onda { animation: intro-onda 1s cubic-bezier(.1, .7, .3, 1) forwards; }
.intro--rayo .intro__onda--2 { animation-delay: .12s; animation-duration: 1.3s; }

/* Salida: el logo avanza hacia la cámara y un iris se abre sobre la web */
.intro--salida { pointer-events: none; }
.intro--salida .intro__escena { animation: intro-salida-escena .8s cubic-bezier(.7, 0, .84, 0) forwards; }
.intro--salida {
  -webkit-mask-image: radial-gradient(circle at var(--iris-x) var(--iris-y), transparent var(--radio-iris), #000 calc(var(--radio-iris) + 1px));
  mask-image: radial-gradient(circle at var(--iris-x) var(--iris-y), transparent var(--radio-iris), #000 calc(var(--radio-iris) + 1px));
}

/* Entrada escalonada del contenido del héroe tras la intro */
.intro-activa .heroe__grid > div > *,
.intro-activa .mosaico,
.intro-activa .cabecera { opacity: 0; animation: intro-aparece .4s 7s forwards; }
.intro-hecha .heroe__grid > div > *,
.intro-hecha .mosaico,
.intro-hecha .cabecera { animation: intro-entra .9s cubic-bezier(.16, 1, .3, 1) both; }
.intro-hecha .cabecera { animation-name: intro-entra-arriba; }
.intro-hecha .heroe__grid > div > :nth-child(2) { animation-delay: .08s; }
.intro-hecha .heroe__grid > div > :nth-child(3) { animation-delay: .16s; }
.intro-hecha .heroe__grid > div > :nth-child(4) { animation-delay: .24s; }
.intro-hecha .heroe__grid > div > :nth-child(5) { animation-delay: .32s; }
.intro-hecha .mosaico { animation-delay: .2s; }
.intro-hecha .heroe__logo img { animation: intro-brillo-logo 1.6s .3s ease-out; }

@keyframes intro-aparece { to { opacity: 1; } }
@keyframes intro-seguridad { to { opacity: 0; visibility: hidden; } }
@keyframes intro-parpadeo {
  0% { opacity: .9; } 8% { opacity: .1; } 16% { opacity: .7; } 22% { opacity: 0; }
  40% { opacity: .5; } 46% { opacity: .15; } 100% { opacity: .45; }
}
@keyframes intro-barrido { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-haz {
  0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; }
}
@keyframes intro-rayo {
  0% { opacity: 0; transform: scale(2.4) rotate(-12deg); filter: brightness(3) drop-shadow(0 0 30px #fff); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: brightness(1.1) drop-shadow(0 0 14px rgba(244, 196, 107, .9)); }
}
@keyframes intro-temblor {
  0%, 100% { transform: translate(-50%, -50%); }
  15% { transform: translate(calc(-50% - 9px), calc(-50% + 5px)); }
  30% { transform: translate(calc(-50% + 8px), calc(-50% - 6px)); }
  45% { transform: translate(calc(-50% - 6px), calc(-50% - 3px)); }
  60% { transform: translate(calc(-50% + 4px), calc(-50% + 4px)); }
  80% { transform: translate(calc(-50% - 2px), calc(-50% + 1px)); }
}
@keyframes intro-fundido { to { opacity: 0; } }
@keyframes intro-destello { 0% { opacity: .92; } 100% { opacity: 0; } }
@keyframes intro-onda {
  0% { opacity: 1; transform: scale(.2); }
  100% { opacity: 0; transform: scale(28); border-width: .5px; }
}
@keyframes intro-salida-escena {
  to { transform: translate(-50%, -50%) scale(1.35); opacity: 0; filter: blur(6px) brightness(1.6); }
}
@keyframes intro-entra { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-entra-arriba { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes intro-brillo-logo {
  0% { filter: drop-shadow(0 0 0 rgba(244, 196, 107, 0)); }
  30% { filter: drop-shadow(0 0 22px rgba(244, 196, 107, .85)); }
  100% { filter: drop-shadow(0 0 0 rgba(244, 196, 107, 0)); }
}