/* =========================================================
   Animaciones de Todo Tuxpan
   Todo está dentro de "prefers-reduced-motion: no-preference":
   quien pide menos movimiento en su sistema no ve nada de esto.
   Solo se animan transform y opacity.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Aparición al hacer scroll ---------- */
  .tt-anim .tt-reveal:not(.is-visible) { opacity: 0; }
  .tt-anim .tt-reveal.is-visible { animation: tt-aparece .65s cubic-bezier(.22,.61,.36,1) var(--d, 0ms) backwards; }
  @keyframes tt-aparece { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

  /* ---------- 2. Tarjetas: zoom de imagen al pasar el cursor / tocar ---------- */
  .tt-tarjeta-lugar__imagen, .tt-evento__imagen, .tt-edicion { overflow: hidden; }
  .tt-tarjeta-lugar__imagen img, .tt-evento img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
  .tt-tarjeta-cat, .tt-tarjeta-lugar, .tt-evento { transition: transform .35s ease, box-shadow .35s ease; }
  .tt-tarjeta-cat > *, .tt-tarjeta-cat svg { transition: transform .35s ease; }
  @media (hover: hover) {
    .tt-tarjeta-lugar:hover .tt-tarjeta-lugar__imagen img, .tt-evento:hover img { transform: scale(1.06); }
    .tt-evento:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgb(0 0 0 / 18%); }
    .tt-tarjeta-cat:hover svg { transform: scale(1.12) rotate(-4deg); }
  }
  .tt-tarjeta-lugar:active, .tt-tarjeta-cat:active, .tt-evento:active { transform: scale(.985); }

  /* ---------- 3. Botones ---------- */
  .tt-boton, .tt-boton-borde, .tt-boton-peligro { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; }
  .tt-boton svg, .tt-boton-borde svg { transition: transform .25s ease; }
  @media (hover: hover) {
    .tt-boton:hover, .tt-boton-borde:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgb(0 0 0 / 18%); }
    .tt-boton:hover .fa-arrow-right, .tt-boton:hover .fa-chevron-right, .tt-boton:hover .fa-arrow-up-right-from-square,
    .tt-boton-borde:hover .fa-arrow-right, .tt-boton-borde:hover .fa-chevron-right { transform: translateX(5px); }
  }
  .tt-boton:active, .tt-boton-borde:active, .tt-boton-peligro:active { transform: scale(.97); box-shadow: none; }

  /* ---------- 4. Corazón de favoritos: latido ---------- */
  .tt-corazon { transition: background .25s, color .25s, transform .2s; }
  .tt-corazon:active { transform: scale(.88); }
  .tt-corazon.is-activo { animation: tt-latido .55s cubic-bezier(.34,1.56,.64,1); }
  .tt-corazon.is-activo svg, .tt-corazon.is-activo i { animation: tt-latido-icono .55s cubic-bezier(.34,1.56,.64,1); }
  @keyframes tt-latido { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgb(249 144 21 / 55%); } 40% { transform: scale(1.22); } 100% { transform: scale(1); box-shadow: 0 0 0 14px rgb(249 144 21 / 0%); } }
  @keyframes tt-latido-icono { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

  /* ---------- 5. Estrellas de la reseña: se encienden una por una ---------- */
  .tt-estrellas-input button { transition: transform .15s; }
  .tt-estrellas-input button:hover { transform: scale(1.15); }
  .tt-estrellas-input .fa-solid { animation: tt-estrella .4s cubic-bezier(.34,1.56,.64,1) backwards; }
  .tt-estrellas-input button:nth-child(2) .fa-solid { animation-delay: .06s; }
  .tt-estrellas-input button:nth-child(3) .fa-solid { animation-delay: .12s; }
  .tt-estrellas-input button:nth-child(4) .fa-solid { animation-delay: .18s; }
  .tt-estrellas-input button:nth-child(5) .fa-solid { animation-delay: .24s; }
  @keyframes tt-estrella { from { transform: scale(.3) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

  /* ---------- 6. Menú ---------- */
  .tt-mega.is-abierto { animation: tt-despliega .28s ease-out; transform-origin: top center; }
  @keyframes tt-despliega { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
  .tt-menu__flecha { transition: transform .3s ease; }
  [aria-expanded="true"] > .tt-menu__flecha { transform: rotate(180deg); }
  @media (max-width: 1100px) {
    .tt-menu.is-abierto { animation: tt-despliega .3s ease-out; }
    .tt-menu.is-abierto > * { animation: tt-item-menu .35s ease-out backwards; }
    .tt-menu.is-abierto > :nth-child(1) { animation-delay: .04s; }
    .tt-menu.is-abierto > :nth-child(2) { animation-delay: .08s; }
    .tt-menu.is-abierto > :nth-child(3) { animation-delay: .12s; }
    .tt-menu.is-abierto > :nth-child(4) { animation-delay: .16s; }
    .tt-menu.is-abierto > :nth-child(5) { animation-delay: .20s; }
    .tt-menu.is-abierto > :nth-child(6) { animation-delay: .24s; }
    .tt-menu.is-abierto > :nth-child(n+7) { animation-delay: .28s; }
    @keyframes tt-item-menu { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

    /* Hamburguesa -> X (se dibuja con CSS; el ícono original se oculta) */
    .tt-hamburguesa { position: relative; }
    .tt-hamburguesa > svg, .tt-hamburguesa > i { opacity: 0; }
    .tt-hamburguesa::before, .tt-hamburguesa::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2.5px; margin: -1.25px 0 0 -11px; border-radius: 2px; background: currentColor; transition: transform .3s ease, box-shadow .3s ease, opacity .2s; }
    .tt-hamburguesa::before { box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
    .tt-hamburguesa::after { opacity: 0; }
    .tt-hamburguesa[aria-expanded="true"]::before { box-shadow: none; transform: rotate(45deg); }
    .tt-hamburguesa[aria-expanded="true"]::after { opacity: 1; transform: rotate(-45deg); }
  }

  /* ---------- 7. Cabecera fija: se encoge con sombra y se oculta al bajar ---------- */
  .tt-header { position: sticky; top: 0; z-index: 1100; transition: transform .35s ease, box-shadow .3s ease, padding .3s ease; }
  .tt-header.is-scrolled { box-shadow: 0 4px 18px rgb(0 0 0 / 12%); }
  .tt-header.is-oculto { transform: translateY(-110%); }
  .tt-logo img { transition: transform .3s ease; }
  .tt-header.is-scrolled .tt-logo img { transform: scale(.88); }

  /* ---------- 8. Carga de imágenes: brillo mientras cargan y fundido al aparecer ---------- */
  .tt-esqueleto { background: linear-gradient(100deg, #ececec 30%, #f7f7f7 50%, #ececec 70%) 0 0 / 220% 100%; animation: tt-brillo 1.3s linear infinite; }
  @keyframes tt-brillo { to { background-position: -220% 0; } }
  img.tt-img-carga { opacity: 0; }
  img.tt-img-carga.is-cargada { opacity: 1; transition: opacity .6s ease; }

  /* ---------- 9. Avisos y campana ---------- */
  .tt-aviso[open] { animation: tt-aviso-entra .3s cubic-bezier(.34,1.3,.64,1); }
  .tt-aviso[open]::backdrop { animation: tt-fundido .3s ease; }
  @keyframes tt-aviso-entra { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes tt-fundido { from { opacity: 0; } to { opacity: 1; } }
  .tt-avisos > * { animation: tt-desliza-der .4s cubic-bezier(.22,.61,.36,1); }
  @keyframes tt-desliza-der { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
  .tt-notif__boton.tt-campana { animation: tt-campana .9s ease; transform-origin: 50% 15%; }
  @keyframes tt-campana { 0%,100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
  .tt-notif__conteo.tt-pop { animation: tt-pop .45s cubic-bezier(.34,1.56,.64,1); }
  @keyframes tt-pop { from { transform: scale(.2); } to { transform: scale(1); } }

  /* ---------- 11. Portada: zoom lento en el banner activo ---------- */
  .tt-hero__slide.is-activo { animation: tt-zoom-lento 9s ease-out both; }
  @keyframes tt-zoom-lento { from { transform: scale(1); } to { transform: scale(1.08); } }
  .tt-hero { overflow: hidden; }
  .tt-hero__contenido { will-change: transform; transform: translate3d(0, calc(var(--tt-par, 0) * 1px), 0); }

  /* ---------- 12. Revista: sombra mientras se voltea la página ---------- */
  .tt-visor__hoja { transition: transform .8s, box-shadow .6s ease; }
  .tt-visor__hoja:has(.is-girando) { box-shadow: 0 24px 60px rgb(0 0 0 / 32%); }

  /* ---------- 13. Mapa: los pines caen con rebote ---------- */
  .tt-pin-caja .tt-pin { animation: tt-pin-cae .7s cubic-bezier(.34,1.4,.64,1) backwards; }
  .leaflet-marker-pane > :nth-child(3n+2) .tt-pin { animation-delay: .1s; }
  .leaflet-marker-pane > :nth-child(3n) .tt-pin { animation-delay: .2s; }
  .leaflet-marker-pane > :nth-child(5n+4) .tt-pin { animation-delay: .3s; }
  @keyframes tt-pin-cae { from { opacity: 0; transform: translateY(-40px) rotate(-45deg); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-45deg); } }
  .tt-mapa__item { transition: background-color .25s, transform .25s; }
  @media (hover: hover) { .tt-mapa__item:hover { transform: translateX(4px); } }

  /* ---------- 14. Transición suave entre páginas (navegadores compatibles) ---------- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: tt-fundido-sale .22s ease both; }
  ::view-transition-new(root) { animation: tt-fundido-entra .3s ease both; }
  @keyframes tt-fundido-sale { to { opacity: 0; } }
  @keyframes tt-fundido-entra { from { opacity: 0; } }
}