/* Chosen Barber: animaciones. Guía de uso en 03-animacion.md.
   Todo estado oculto vive bajo html.anim y dentro de la media query:
   sin JS, sin la clase o con movimiento reducido, el contenido se ve tal cual.
   Toma los tokens de 02-diseno.md; los valores tras la coma son el respaldo. */

:root {
  --anim-entrada: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
  --anim-trazo: var(--ease-inout, cubic-bezier(.7, 0, .2, 1));
  --anim-paso: 60ms;
}
@media (min-width: 768px) {
  :root { --anim-paso: 90ms; }
}

/* Piezas que existen con o sin movimiento */
.cadena { display: block; width: 100%; height: 22px; }
.cadena__escala { transform: scale(.6875); }   /* 22 / 32 */
@media (min-width: 1100px) {
  .cadena { height: 28px; }
  .cadena__escala { transform: scale(.875); }  /* 28 / 32 */
}
.cadena__brillo { opacity: 0; }

[data-anim="sello"] {
  position: relative; display: block; aspect-ratio: 1;
  border-radius: 50%; background: #000; overflow: hidden;
}
[data-anim="sello"] img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sello__anillo { display: none; position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }

[data-tarjeta], [data-foto] { position: relative; }
[data-foto] { overflow: hidden; }
.linea-oro {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.linea-oro rect {
  x: .5px; y: .5px;
  width: calc(100% - 1px); height: calc(100% - 1px);
  fill: none; stroke: var(--gold, #C9A24A); stroke-width: 1;
  stroke-dasharray: 1.02 1.02; stroke-dashoffset: 1.02; /* 1.02: tapa la junta del trazo */
}

@media screen and (prefers-reduced-motion: no-preference) {

  /* 1. Hero: lee del antetítulo al texto, menos de 1 s. La foto y el botón no esperan. */
  .anim [data-hero="foto"] { animation: hero-foto var(--t-clasp, 900ms) var(--anim-entrada) both; }
  @keyframes hero-foto { from { transform: scale(1.06); } to { transform: none; } }

  .anim [data-hero="1"], .anim [data-hero="2"], .anim [data-hero="3"], .anim [data-hero="4"] {
    animation: hero-revelar .62s var(--anim-entrada) both;
    animation-delay: calc(var(--orden, 0) * var(--anim-paso));
  }
  [data-hero="2"] { --orden: 1; }
  [data-hero="3"] { --orden: 2; }
  [data-hero="4"] { --orden: 3; }
  @keyframes hero-revelar {
    from { clip-path: inset(-.15em -.15em 100% -.15em); transform: translateY(.3em); }
    to   { clip-path: inset(-.15em -.15em -.15em -.15em); transform: none; }
  }

  /* El botón se ve y se puede tocar desde el primer frame: solo lo cruza una franja */
  .anim [data-hero="cta"] { position: relative; overflow: hidden; }
  .anim [data-hero="cta"]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgba(255, 255, 255, .38);
    animation: hero-cta .6s var(--anim-trazo) .45s both;
  }
  @keyframes hero-cta {
    from { clip-path: inset(0 100% 0 0); }
    50%  { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 0 0 100%); }
  }

  /* 2. Sello: al entrar en pantalla, el anillo se traza y el león se abre */
  .anim .sello__anillo { display: block; }
  .anim [data-anim="sello"] circle {
    stroke-dasharray: 1.02 1.02;
    animation: sello-trazo var(--t-clasp, 900ms) var(--anim-trazo) paused both;
  }
  .anim [data-anim="sello"] img {
    animation: sello-leon var(--t-enter, 700ms) var(--anim-entrada) .15s paused both;
  }
  .anim [data-anim="sello"].visto circle,
  .anim [data-anim="sello"].visto img { animation-play-state: running; }
  @keyframes sello-trazo { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1.02; } }
  @keyframes sello-leon {
    from { clip-path: circle(0% at 50% 50%); }
    to   { clip-path: circle(71% at 50% 50%); }
  }

  /* 3. Cadena bajo el hero: se abrocha al cargar */
  .anim [data-cadena="abrocha"] { animation: cadena-abrocha var(--t-clasp, 900ms) var(--anim-trazo) both; }
  @keyframes cadena-abrocha {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* 3. Cadena antes del formulario: avanza con el scroll y la cruza un brillo */
  @keyframes cadena-avanza {
    from { clip-path: inset(0 92% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
  @keyframes cadena-destello {
    from { opacity: 1; transform: translateX(-100%); }
    to   { opacity: 1; transform: translateX(520%); }
  }
  .anim .cadena__brillo { transform-box: fill-box; }

  @supports (animation-timeline: view()) {
    .anim [data-anim="cadena"]:not([data-cadena="abrocha"]) {
      animation: cadena-avanza linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
      view-timeline-name: --cadena;
    }
    .anim [data-anim="cadena"]:not([data-cadena="abrocha"]) .cadena__brillo {
      animation: cadena-destello linear both;
      animation-timeline: --cadena;
    }
  }
  /* Sin scroll-driven: una sola pasada al entrar (la activa animaciones.js) */
  @supports not (animation-timeline: view()) {
    .anim [data-anim="cadena"]:not([data-cadena="abrocha"]) {
      clip-path: inset(0 92% 0 0);
      transition: clip-path 1.1s var(--anim-trazo);
    }
    .anim [data-anim="cadena"].visto { clip-path: inset(0 0 0 0); }
    .anim [data-anim="cadena"].visto .cadena__brillo { animation: cadena-destello 1.3s ease-out .2s both; }
  }

  /* 4. Tarjetas y fotos: se revelan por filas; la línea de oro responde al hover.
     Queda un 20 % sin recortar (invisible por opacity): IntersectionObserver
     descuenta lo recortado por clip-path y con 100 % no dispararía nunca. */
  .anim [data-tarjeta],
  .anim [data-foto]:not([data-foto="fija"]) {
    clip-path: inset(-2rem -2rem 80% -2rem);
    opacity: 0;
    transform: translateY(1rem);
    transition:
      clip-path var(--t-enter, 700ms) var(--anim-entrada) var(--retardo, 0ms),
      transform var(--t-enter, 700ms) var(--anim-entrada) var(--retardo, 0ms),
      opacity .2s linear var(--retardo, 0ms);
  }
  .anim [data-tarjeta].visto,
  .anim [data-foto].visto {
    clip-path: inset(-2rem -2rem -2rem -2rem);
    opacity: 1;
    transform: none;
  }
  .anim [data-foto]:not([data-foto="fija"]) img {
    transform: scale(1.08);
    transition: transform .9s var(--anim-entrada) var(--retardo, 0ms);
  }
  .anim [data-foto].visto img { transform: none; }

  .linea-oro rect { transition: stroke-dashoffset .2s ease-out; }
  /* El teclado recibe la misma respuesta que el cursor */
  [data-tarjeta]:focus-within .linea-oro rect,
  [data-foto]:focus-within .linea-oro rect {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .45s var(--anim-trazo);
  }

  @media (hover: hover) {
    [data-tarjeta]:hover .linea-oro rect,
    [data-foto]:hover .linea-oro rect {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset .45s var(--anim-trazo);
    }
    .anim [data-foto]:hover img {
      transform: scale(1.04);
      transition: transform .3s var(--anim-entrada);
    }
  }
}