/* RELAXIMO · cimiento de motion.
   Tres reglas que gobiernan este fichero, y ninguna es estetica:

   1 · Nada se oculta si el JavaScript no corre. Los estados iniciales viven todos bajo
       html.motion-activa, y esa clase la pone motion.js. Sin JS, la pagina se ve entera.
   2 · Solo se animan opacity y transform. Nunca height, top, margin ni nada que mueva el
       diseno: el presupuesto de CLS es 0 y se comprueba en cada commit.
   3 · prefers-reduced-motion no se "suaviza": se obedece. motion.js no activa nada, y aqui
       todo queda neutralizado por si acaso. Dos cierres, no uno. */

:root {
  --motion-rapido: 240ms;
  --motion-medio: 520ms;
  --motion-lento: 820ms;
  --motion-curva: cubic-bezier(.22, .61, .36, 1);
  --motion-curva-salida: cubic-bezier(.4, 0, .2, 1);
  --motion-desplazamiento: 12px;
  --motion-escalonado: 90ms;
}

/* Estado inicial: SOLO cuando el motion esta activo de verdad. */
html.motion-activa [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--motion-desplazamiento), 0);
  will-change: opacity, transform;
}

html.motion-activa [data-reveal].reveal-hecho {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Respaldo sin GSAP: si la libreria no carga, motion.js marca el documento y la transicion
   de CSS hace el trabajo. Degradado, no roto. */
html.motion-activa.motion-solo-css [data-reveal] {
  transition: opacity var(--motion-medio) var(--motion-curva),
              transform var(--motion-medio) var(--motion-curva);
}

/* ---------------------------------------------------------------------------
   HERO · el campo de compas.
   Tres anillos concentricos girando a velocidades distintas y en sentidos
   alternos. Es el mismo compas de doce del simbolo, a escala de escenario.

   Por que esto y no un canvas o WebGL: el presupuesto. Un transform sobre un
   <g> de SVG lo compone la GPU, no reflow, no repaint de layout, cero CLS y
   cero bytes de libreria. Un canvas obligaria a gestionar devicePixelRatio,
   un bucle de animacion y un tamano declarado, y pagaria LCP por ello.
   Three.js sigue DEFERRED por la misma razon: aqui no aportaria nada que esto
   no de ya.

   Quieto tambien funciona: la composicion no depende del giro. Por eso el giro
   es puro adorno y muere entero bajo prefers-reduced-motion.
--------------------------------------------------------------------------- */

@keyframes compas-horario   { to { transform: rotate(360deg); } }
@keyframes compas-antihorario { to { transform: rotate(-360deg); } }

.compas-campo .anillo { animation: none; }

html.motion-activa .compas-campo .anillo-1 { animation: compas-horario 240s linear infinite; }
html.motion-activa .compas-campo .anillo-2 { animation: compas-antihorario 170s linear infinite; }
html.motion-activa .compas-campo .anillo-3 { animation: compas-horario 110s linear infinite; }

/* El hueco del hero. Hoy el fondo es geometria de marca, no un medio.
   Cuando exista un video o un visualizer propio entra como primer hijo de
   .hero-fondo, con sus dimensiones declaradas, y el resto no se toca. */
[data-hero-slot] {
  position: relative;
  isolation: isolate;
}
.hero-fondo > canvas,
.hero-fondo > video,
.hero-fondo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dimensiones declaradas: un medio sin ellas es un salto de diseno esperando
     a ocurrir, y el presupuesto de CLS es 0. */
  aspect-ratio: 16 / 9;
}

/* Cierre de seguridad. Si alguien anade una animacion en otro sitio, aqui muere. */
@media (prefers-reduced-motion: reduce) {
  html.motion-activa [data-reveal],
  html.motion-activa [data-reveal].reveal-hecho {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .compas-campo .anillo { animation: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   MICROINTERACCION · v2
   Todo lo de aqui es CSS. Funciona sin JavaScript y muere entero bajo
   prefers-reduced-motion por el cierre de seguridad del final del fichero.
   Ningun gesto cambia el tamano de nada: los pseudoelementos van posicionados
   en absoluto sobre un ancla relativa, asi que el presupuesto de CLS sigue 0.
   =========================================================================== */

/* ---- El filete de seccion se dibuja de izquierda a derecha al entrar -------
   El h2 ya traia un border-top. Aqui ese filete deja de aparecer y pasa a
   trazarse: es el gesto de "empieza algo", y dura lo que tarda la vista en
   llegar al titulo. */
html.motion-activa main h2 { position: relative; border-top-color: transparent; }
html.motion-activa main h2::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--linea);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms;
}
html.motion-activa main h2.reveal-hecho::before,
html.motion-activa main h2[data-reveal].reveal-hecho::before { transform: scaleX(1); }
/* Un h2 que nunca recibe data-reveal no debe quedarse sin filete. */
html.motion-activa main h2:not([data-reveal])::before { transform: scaleX(1); }

/* ---- Enlace de texto: el subrayado crece desde el centro ------------------ */
main a:not(.boton-texto):not(.marca) {
  position: relative;
  text-decoration-color: transparent;
  transition: color 180ms ease;
}
main a:not(.boton-texto):not(.marca)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.18em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.999);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 180ms ease;
}
@media (hover: hover) {
  main a:not(.boton-texto):not(.marca)::after { transform: scaleX(0); }
  main a:not(.boton-texto):not(.marca):hover::after,
  main a:not(.boton-texto):not(.marca):focus-visible::after {
    transform: scaleX(1);
    background: var(--acento);
  }
}

/* ---- Boton y CTA: el borde se enciende, y al pulsar baja un pixel --------- */
.boton-texto {
  position: relative;
  overflow: hidden;
  transition: color 200ms ease, border-color 220ms ease, transform 90ms ease;
}
.boton-texto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acento);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 360ms ease;
  z-index: -1;
}
@media (hover: hover) {
  .boton-texto:hover::before, .boton-texto:focus-visible::before {
    transform: scaleX(1); opacity: 0.1;
  }
}
.boton-texto:active { transform: translateY(1px); }

button[type="submit"] { transition: background-color 200ms ease, transform 90ms ease; }
button[type="submit"]:active { transform: translateY(1px); }

/* ---- Descargas de prensa: el icono se separa al pasar por encima ---------- */
@media (hover: hover) {
  ul.descargas a { transition: color 180ms ease, letter-spacing 220ms ease; }
  ul.descargas a:hover, ul.descargas a:focus-visible { letter-spacing: 0.012em; }
}

/* ===========================================================================
   UN GESTO POR DESTINO
   Dependen de motion-interaccion, NO de motion-activa: son respuesta al
   cursor y al foco, y no tienen nada que ver con que la pagina revele algo
   al entrar. Asi valen tambien en una ruta sin [data-reveal].
   No es capricho: cada destino promete una cosa distinta y el gesto la
   anticipa antes de pulsar. Se aplican por atributo href, asi que valen en la
   navegacion, en el pie y en cualquier enlace del cuerpo sin tocar el HTML.
   =========================================================================== */

/* BOOKING · la forma se CIERRA. Es un compromiso. */
html.motion-interaccion a[href="/booking/"] { position: relative; }
html.motion-interaccion a[href="/booking/"]::before {
  content: "";
  position: absolute;
  left: -0.4em; right: -0.4em; top: -0.25em; bottom: -0.25em;
  border: 1px solid var(--acento);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1), opacity 200ms ease;
  pointer-events: none;
}
@media (hover: hover) {
  html.motion-interaccion a[href="/booking/"]:hover::before,
  html.motion-interaccion a[href="/booking/"]:focus-visible::before {
    transform: scaleX(1); opacity: 0.75;
  }
}

/* MUSIC · tres barras que laten una vez. Es sonido. */
html.motion-interaccion a[href="/music/"] { position: relative; }
html.motion-interaccion a[href="/music/"]::before {
  content: "";
  position: absolute;
  left: -0.85em; top: 50%;
  width: 0.5em; height: 0.8em;
  transform: translateY(-50%);
  background:
    linear-gradient(var(--acento), var(--acento)) 0% 50% / 0.1em 35% no-repeat,
    linear-gradient(var(--acento), var(--acento)) 50% 50% / 0.1em 60% no-repeat,
    linear-gradient(var(--acento), var(--acento)) 100% 50% / 0.1em 35% no-repeat;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
@keyframes ecualizador {
  0%   { background-size: 0.1em 35%, 0.1em 60%, 0.1em 35%; }
  30%  { background-size: 0.1em 85%, 0.1em 30%, 0.1em 70%; }
  60%  { background-size: 0.1em 40%, 0.1em 95%, 0.1em 45%; }
  100% { background-size: 0.1em 35%, 0.1em 60%, 0.1em 35%; }
}
@media (hover: hover) {
  html.motion-interaccion a[href="/music/"]:hover::before,
  html.motion-interaccion a[href="/music/"]:focus-visible::before {
    opacity: 1;
    animation: ecualizador 900ms ease-in-out;
  }
}

/* PRESS · la esquina se levanta. Es un documento que te llevas. */
html.motion-interaccion a[href="/press/"] { position: relative; }
html.motion-interaccion a[href="/press/"]::before {
  content: "";
  position: absolute;
  right: -0.6em; top: -0.3em;
  width: 0.45em; height: 0.45em;
  border-top: 1px solid var(--acento);
  border-right: 1px solid var(--acento);
  opacity: 0;
  transform: translate(-2px, 2px) rotate(0deg);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 200ms ease;
  pointer-events: none;
}
@media (hover: hover) {
  html.motion-interaccion a[href="/press/"]:hover::before,
  html.motion-interaccion a[href="/press/"]:focus-visible::before {
    opacity: 0.9;
    transform: translate(0, 0) rotate(8deg);
  }
}

/* ---- Cierre de seguridad de la capa v2 -----------------------------------
   Lo mismo que ya hacia el fichero con el resto: aqui no hay version suave. */
@media (prefers-reduced-motion: reduce) {
  html.motion-activa main h2::before { transform: scaleX(1) !important; transition: none !important; }
  main a::after,
  .boton-texto::before,
  a[href="/booking/"]::before,
  a[href="/music/"]::before,
  a[href="/press/"]::before {
    transition: none !important;
    animation: none !important;
  }
  .boton-texto:active, button[type="submit"]:active { transform: none !important; }
}