/* ==========================================================================
   BENVOLENTIERI — efectos
   Movimiento al pasar el ratón y al bajar por la página.

   Dos reglas que se siguen en todo el archivo:
   1. Nada de esto puede esconder contenido. Si el JS no llega o el navegador
      no soporta la técnica, el texto y las fotos se ven igual.
   2. Todo respeta `prefers-reduced-motion`.
   ========================================================================== */

/* ==========================================================================
   Titulares palabra a palabra
   ========================================================================== */

/* Sin JS: sube el bloque entero (el efecto de reserva de `01-base.css`).
   Con JS: `efectos.js` parte el titular en palabras, marca `.partido` y
   entonces manda el escalonado de abajo. */
.sube.partido > span { transform: none; }

.pal {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em) rotate(1.6deg);
  transform-origin: 0 100%;
  transition:
    opacity .55s var(--suave),
    transform .75s var(--suave);
  transition-delay: calc(var(--w, 0) * 42ms);
}
.visto .pal,
.sube.visto .pal { opacity: 1; transform: none; }

/* ==========================================================================
   Inclinado 3D
   El JS solo escribe --rx y --ry; la composición del `transform` vive aquí.
   Así el desfase de la rejilla (--desfase) no se pierde al inclinar.
   ========================================================================== */

[data-tilt] {
  transform:
    translateY(var(--desfase, 0px))
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  /* NADA de `transform-style: preserve-3d` aquí.
   *
   * No hace falta: la `perspective()` va dentro del propio `transform`, así
   * que afecta a este elemento y no a sus hijas. Y sí hace daño: crea un
   * contexto 3D que obliga a Chrome a promover cada hija a su propia capa de
   * composición. Con 16 elementos inclinables y texturas de ~1000×1250, en un
   * equipo justo de memoria el compositor no las rasteriza y las tarjetas
   * salen NEGRAS. Se notaba en que la única que se pintaba era la del pan,
   * cuya imagen es de 379×474. */
  transition: transform .5s var(--suave);
}
/* `will-change` SOLO mientras se pasa por encima.
 *
 * Dejarlo puesto en la regla base promovía a capa de composición las 4
 * tarjetas y las 12 fotos de la galería a la vez, todo el rato. En un equipo
 * justo de memoria el compositor no llega a rasterizarlas y las tarjetas
 * aparecen en negro un instante. La propia especificación avisa de esto: se
 * anuncia el cambio justo antes de que ocurra, no de forma permanente. */
[data-tilt]:hover { transition-duration: .12s; will-change: transform; }

/* El punto de luz que sigue al puntero: sin él la inclinación casi no se nota.
 *
 * ⚠️ Se excluye `.tarjeta` a propósito. Un elemento tiene UN solo `::before`,
 * y el de las tarjetas de cocina ya está ocupado por su filo dorado. Pisarlo
 * aquí haría desaparecer el filo. La tarjeta se inclina igual —eso va en el
 * elemento, no en el pseudo—, simplemente no lleva punto de luz. */
[data-tilt]:not(.tarjeta)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--medio) var(--seco);
  background: radial-gradient(
    36% 42% at var(--luz-x, 50%) var(--luz-y, 50%),
    rgba(255, 244, 214, .22), transparent 70%);
}
[data-tilt]:not(.tarjeta):hover::before { opacity: 1; }

/* ==========================================================================
   Barrido de luz sobre las fotos
   Va en `::before` y NO en `::after`: el `::after` de `.passione-foto` es su
   marco dorado desplazado. Solo se pone en fotos que tengan el `::before`
   libre — nunca en `.tarjeta` ni en `.pieza`, que ya usan los dos.
   ========================================================================== */

.brillo { position: relative; overflow: hidden; isolation: isolate; }

.brillo::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -140%;
  width: 55%;
  height: 220%;
  z-index: 4;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
    transparent, rgba(255, 250, 235, .28) 48%, transparent);
  transition: left .9s var(--suave);
}
.brillo:hover::before,
.brillo:focus-within::before { left: 150%; }

/* ==========================================================================
   Palabras y enlaces
   ========================================================================== */

/* El antetítulo respira al pasar por encima de su sección. */
.seccion:hover > .contenedor .ante,
.seccion:hover .ante {
  letter-spacing: .38em;
}
.ante { transition: letter-spacing .7s var(--suave); }

/* Los platos de la carta: la línea se ilumina y el precio da un paso al frente. */
.plato { transition: padding-left var(--medio) var(--suave),
                      border-color var(--medio) var(--seco); }
.plato:hover { border-color: rgba(201,162,74,.6); }
.plato-n, .plato-p { transition: color var(--corto) var(--seco),
                                  transform var(--medio) var(--suave); }
.plato:hover .plato-n { color: var(--verde); }
.plato:hover .plato-p { transform: scale(1.09); color: var(--oro-hondo, #8A6520); }
.plato-p { transform-origin: right center; }

/* La hoja dorada de la casa gira un poco al pasar por su plato. */
.plato-fav { transition: transform var(--medio) var(--suave); }
.plato:hover .plato-fav { transform: rotate(160deg) scale(1.25); }

/* Las copas del bar, igual pero en oscuro. */
.copa { transition: padding-left var(--medio) var(--suave); }
.copa:hover { padding-left: .5rem; }
.copa-n { transition: color var(--corto) var(--seco); }
.copa:hover .copa-n { color: var(--oro-claro); }

/* Las píldoras del vino se llenan al tocarlas. */
.vino-lista li {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--corto) var(--seco), border-color var(--corto) var(--seco);
  cursor: default;
}
.vino-lista li::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--oro);
  transform: translateY(101%);
  transition: transform var(--medio) var(--suave);
}
.vino-lista li:hover { color: var(--carbon); border-color: var(--oro); }
.vino-lista li:hover::before { transform: none; }

/* Las cifras de «Una passione italiana». */
.cifras > * { transition: transform var(--medio) var(--suave); }
.cifras > *:hover { transform: translateY(-4px); }
.cifra-n { transition: color var(--medio) var(--seco); }
.cifras > *:hover .cifra-n { color: var(--oro-hondo, #8A6520); }

/* Las redes del pie. */
.red svg { transition: transform var(--medio) var(--suave); }
.red:hover svg { transform: rotate(-8deg) scale(1.12); }

/* ==========================================================================
   Barra de progreso del scroll
   ========================================================================== */

.progreso {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 80;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--verde-hoja), var(--oro), var(--oro-claro));
  pointer-events: none;
}

/* Si el navegador sabe seguir el scroll por CSS, lo hace él y `efectos.js`
   ni se molesta en escuchar el evento. */
@supports (animation-timeline: scroll()) {
  .progreso {
    animation: avanzar linear;
    animation-timeline: scroll(root block);
  }
  @keyframes avanzar { to { transform: scaleX(1); } }
}

/* ==========================================================================
   Movimiento al bajar (funciona igual en móvil, que es donde más se nota)
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Las fotos de las secciones editoriales se desplazan despacio dentro de
       su marco mientras cruzan la pantalla. Cero JS y cero coste en scroll. */
    .passione-foto img,
    .storia-foto img,
    .aperitivo-foto img,
    .carta-lado-foto img {
      animation: flotar linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      /* Sin `will-change`: una animación con línea de tiempo de scroll ya se
         compone en el hilo del compositor, así que solo añadiría capas. */
    }
    @keyframes flotar {
      from { transform: scale(1.16) translateY(-3.5%); }
      to   { transform: scale(1.16) translateY(3.5%); }
    }

    /* Las fotos del mosaico entran creciendo un pelín.
     *
     * ⚠️ SOLO `transform`, NUNCA `opacity`. La primera versión iba de
     * `opacity: .25` a 1 y en móvil las fotos se quedaban clavadas al 25 %:
     * el rango `cover` no avanza igual cuando el elemento es más alto que la
     * pantalla, y el resultado era una galería casi invisible. Regla de la
     * casa: una animación de scroll puede mover algo, jamás esconderlo. */
    .mosaico .pieza {
      animation: asomar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    @keyframes asomar {
      from { transform: scale(.93) translateY(28px); }
      to   { transform: none; }
    }

    /* La banda del vino: la foto de fondo se mueve al contrario que la página. */
    .vino-fondo img {
      animation: fondoVino linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes fondoVino {
      from { transform: scale(1.18) translateY(-5%); }
      to   { transform: scale(1.18) translateY(5%); }
    }

    /* El titular del pie crece según se llega al final. */
    .pie-lema {
      animation: crecerLema linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    /* Tampoco aquí se toca la opacidad: si el rango no avanza, el lema del
       pie se quedaría medio borrado y es la última frase que lee nadie. */
    @keyframes crecerLema {
      from { letter-spacing: .05em; transform: translateY(24px) scale(.97); }
      to   { letter-spacing: 0;     transform: none; }
    }
  }
}

/* En táctil no hay hover, así que el inclinado 3D no aplica; a cambio, las
   tarjetas de cocina responden al toque. */
@media (hover: none) {
  .tarjeta:active { transform: scale(.98); }
  .pieza:active { transform: scale(.97); }
  .tarjeta, .pieza { transition: transform .2s var(--suave); }
}

/* ==========================================================================
   Movimiento reducido: se apaga todo lo de este archivo
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pal { opacity: 1 !important; transform: none !important; }
  [data-tilt] { transform: translateY(var(--desfase, 0px)) !important; }
  [data-tilt]::before, .brillo::after { display: none; }
  .ante { transition: none; }
  .seccion:hover .ante { letter-spacing: .34em; }
  .progreso { display: none; }
}