/* Movimiento de titulares, de listas y de la barra. El JS que los maneja es
 * assets/js/paint-titulares.js y assets/js/paint-barra.js, que explican por que cada uno es el que
 * es.
 *
 * Necesita tokens.css y tipografia.css antes. */

/* ------------------------------------------------- 1. el titulo que llega vacio y se pinta */

/* Las dos capas van encimadas en la MISMA caja con grid y no con `position: absolute`: asi el h2
 * sigue midiendo lo que mide el texto y el resto de la seccion no se corre. Un titular de dos
 * lineas con una capa absoluta deja al h2 con 0 de alto y la seccion se desarma. */
.titulo-trazo--activo {
  display: grid;
  isolation: isolate;
}

.titulo-trazo--activo > span {
  grid-area: 1 / 1;
  display: block;
}

/* El contorno: la letra vacia, dibujada solo con su filo. Por debajo de 1 px el trazo se dibuja
 * gris en vez de nitido. */
.titulo-trazo__contorno {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--c-tinta);
  text-stroke: 1.4px var(--c-tinta);
  opacity: 0;
}

.titulo-trazo__contorno .punto {
  -webkit-text-stroke-color: var(--c-f-violeta);
  text-stroke-color: var(--c-f-violeta);
}

.titulo-trazo__relleno { z-index: 1; }

/* Sobre la noche de Mind el contorno va en oro, no en tinta. */
[data-marca="mind"] .titulo-trazo__contorno {
  -webkit-text-stroke-color: color-mix(in oklch, var(--c-oro) 70%, transparent);
  text-stroke-color: color-mix(in oklch, var(--c-oro) 70%, transparent);
}

[data-marca="mind"] .titulo-trazo__contorno .punto {
  -webkit-text-stroke-color: var(--c-brasa);
  text-stroke-color: var(--c-brasa);
}

/* Sin JS el titulo se ve entero y solido, que es el estado correcto: `--activo` lo pone el JS. */

/* ------------------------------------------------------ 2. el titulo que descubre un filo */

/* NO hay banda. Habia una, ancha y clara, cruzando la seccion entera, y era el "tono de blanco"
 * que Axel bajo: sobre la pared crema cualquier capa clara la lava y la seccion se ve descolorida.
 *
 * Lo que queda es el FILO: 3 px saturados, del ancho de un pincel, que viajan por delante del
 * recorte del titulo. No aclara nada porque no cubre nada. */
.titulo-barrido--activo {
  position: relative;
  isolation: isolate;
}

.titulo-barrido__texto { display: block; }

.titulo-barrido__filo {
  position: absolute;
  top: -0.14em;
  left: 0;
  z-index: 2;
  width: 3px;
  height: calc(100% + 0.28em);
  pointer-events: none;
  opacity: 0;
  /* De magenta arriba a violeta abajo, y con las puntas transparentes: un filo que llega recto al
     borde se lee como una barra de interfaz, no como pintura. */
  background: linear-gradient(to bottom,
    transparent,
    var(--c-f-magenta) 14%,
    var(--c-f-violeta) 62%,
    transparent);
}

/* La gota: lo unico que queda en el filo ademas del filo. Un punto de color a media altura, como la
   pintura que se junta en el canto del pincel. Pseudo-elemento, no un nodo mas. */
.titulo-barrido__filo::after {
  content: '';
  position: absolute;
  top: 46%;
  left: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-f-magenta);
}

/* Sobre la noche de Mind el filo va en brasa, que es el acento unico de esa marca. */
[data-marca="mind"] .titulo-barrido__filo {
  background: linear-gradient(to bottom, transparent, var(--c-brasa) 14%, var(--c-oro) 62%, transparent);
}

[data-marca="mind"] .titulo-barrido__filo::after { background: var(--c-brasa); }

/* ---------------------------------------------------------------------------- la barra */

/* Capas sobre la navegacion, que es lo que pidio Axel.
 *
 * La barra usa `mix-blend-mode: difference`, asi que NO se le puede poner un fondo: cualquier capa
 * opaca detras se invierte junto con el texto y queda un rectangulo sucio. Todo lo que se agrega
 * tiene que ser del mismo material que la barra: lineas y texto que se invierten con ella.
 *
 * Tres capas, en orden de lectura:
 *   1. la barra se comprime cuando salis del hero (el sitio "se pone a trabajar")
 *   2. una regla de 1 px aparece abajo, tambien en difference
 *   3. sobre esa regla corre la barra de progreso de la pagina */
.barra { transition: transform 420ms var(--salida), padding-block 420ms var(--salida); }

.barra--comprimida { padding-block: 0.8vw; }

.barra__regla {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 420ms var(--salida), transform 620ms var(--salida);
  pointer-events: none;
}

.barra--comprimida .barra__regla { opacity: 0.3; transform: scaleX(1); }

.barra__progreso {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--c-f-magenta);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

[data-marca="mind"] .barra__progreso { background: var(--c-brasa); }

/* El volver a Entertainment.
 *
 * Es la unica forma de pasar de Paint a Mind sin el boton de atras del navegador: el portal es el
 * unico lugar donde estan las dos. Va a la IZQUIERDA de la marca y no en el nav de la derecha, que
 * es donde el ojo busca "salir de aca" y donde no compite con el CTA.
 *
 * Chico y en versalitas, no como boton: no es la accion principal de la pagina, es una salida. */
.barra__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-right: 1.4vw;
  padding-bottom: 0.35em;
  font-size: clamp(0.62rem, 0.78vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0.6;
  white-space: nowrap;
  transition: opacity 260ms var(--salida);
}

.barra__volver span { transition: transform 320ms var(--salida); }
.barra__volver:hover { opacity: 1; }
.barra__volver:hover span { transform: translateX(-4px); }

/* En telefono la etiqueta SE QUEDA.
 *
 * Estaba en `font-size: 0`, o sea solo la flecha, porque el nombre no entraba al lado del CTA.
 * Ahora entra: el menu bajo al segundo renglon y el primero quedo con la flecha y el wordmark
 * nada mas. Y hacia falta que entre: una flecha sola arriba a la izquierda es exactamente lo que
 * el navegador dibuja para "atras", asi que el unico camino de vuelta al portal se leia como un
 * control del navegador. Con la palabra al lado se entiende que lleva a otra marca del sitio. */
@media (max-width: 760px) {
  /* 0.95rem y no 0.5: es el unico camino de vuelta al portal y tiene que ser tocable. El area
     tactil crece hacia arriba y hacia abajo sin mover el renglon. */
  .barra__volver { margin-right: 2vw; padding-block: 0.95rem; }
}

/* Los enlaces: el subrayado entra desde la izquierda al pasar por encima, no aparece de golpe. */
.barra nav a { position: relative; padding-bottom: 0.35em; }

.barra nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--salida);
}

.barra nav a:hover::after,
.barra nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.barra__cta::after { transform: scaleX(1); transform-origin: left; }

/* El isotipo de la barra gira apenas al pasar por encima. Un detalle, no un efecto. */
.barra__marca img { transition: transform 520ms var(--salida); }
.barra__marca:hover img { transform: rotate(-12deg) scale(1.08); }

/* --------------------------------------------------------------------- lista numerada */

/* La lista de Eventos. Antes el `01` era un dato chiquito arriba del titulo y la seccion se veia
   muerta (Axel: "esto de bodas y tal sigue estatico"). Ahora el numero es una capa aparte que entra
   con la ficha, en el violeta de la marca. */
.evento { position: relative; }

.evento__n {
  font-family: var(--tipo-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  letter-spacing: 0.1em;
  color: color-mix(in oklch, var(--c-f-violeta) 85%, transparent);
}

/* ------------------------------------------------------------------------ menos movimiento */

@media (prefers-reduced-motion: reduce) {
  .titulo-trazo__contorno { display: none; }
  .titulo-trazo__relleno { clip-path: none !important; }
  .titulo-barrido__filo { display: none; }
  .titulo-barrido__texto { clip-path: none !important; }
  [data-revelar] { opacity: 1 !important; transform: none !important; }
  .barra, .barra__regla, .barra nav a::after, .barra__marca img { transition-duration: 1ms; }
}