/* =================================================================
   MOTION · capa de interacción (se carga después de styles.css)
   Todo usa transform / opacity / clip-path → 60fps sin tocar layout.
   ================================================================= */

:root {
  --spring: cubic-bezier(.34, 1.56, .64, 1);   /* rebote suave */
  --out-expo: cubic-bezier(.16, 1, .3, 1);     /* salida muy fluida */
}

/* Lenis (scroll suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* =================================================================
   CTA
   ================================================================= */
.cta {
  --mx: 0px;          /* magnetismo (JS) */
  --my: 0px;
  --lift: 0px;
  --s: 1;
  --x: 50%;           /* posición del cursor dentro del botón (JS) */
  --y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(var(--mx), calc(var(--my) + var(--lift)), 0) scale(var(--s));
  transition:
    transform .7s var(--out-expo),
    box-shadow .6s var(--out-expo),
    background-color .4s var(--ease);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.cta > * { position: relative; z-index: 2; }

/* Relleno que nace desde el cursor */
.cta::before {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 260%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  scale: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, 0) 70%);
  transition: scale .8s var(--out-expo), opacity .6s var(--ease);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
/* Brillo que cruza el botón */
.cta::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 247, 237, .35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg) translateX(0);
  z-index: 1;
  pointer-events: none;
}

.cta:hover { --lift: -3px; --s: 1.045; }
.cta--red:hover   { background-color: #b0140f; box-shadow: 0 16px 34px -14px rgba(159, 17, 15, .6), 0 4px 10px -6px rgba(159, 17, 15, .4); }
.cta--brown:hover { background-color: #b07e52; box-shadow: 0 16px 34px -14px rgba(163, 115, 74, .65), 0 4px 10px -6px rgba(163, 115, 74, .4); }
.cta:hover::before { scale: 1; opacity: 1; }
.cta:hover::after  { animation: ctaShine 1s var(--out-expo) forwards; }
.cta--full:hover { --s: 1.02; } /* en la card: zoom más contenido para no pisar el borde */
.cta:active { --s: .96; transition-duration: .18s; }

.cta__icon { transition: transform .6s var(--spring); transform-origin: 30% 70%; }
.cta:hover .cta__icon { transform: rotate(-12deg) translate(-1px, -1px) scale(1.12); }
.cta:active .cta__icon { transform: rotate(-4deg) scale(.95); }

/* Onda al hacer click */
.cta__ripple {
  position: absolute;
  z-index: 1;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 247, 237, .45);
  pointer-events: none;
  animation: ctaRipple .75s var(--out-expo) forwards;
}

/* Latido suave cuando el CTA aparece en pantalla (una sola vez) */
.cta.cta-pulse { animation: ctaPulse 1.6s var(--out-expo) .35s 1; }

@keyframes ctaShine  { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(420%); } }
@keyframes ctaRipple { from { transform: scale(0); opacity: 1; } to { transform: scale(40); opacity: 0; } }
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(159, 17, 15, .35); }
  100% { box-shadow: 0 0 0 18px rgba(159, 17, 15, 0); }
}
.cta--brown.cta-pulse { animation-name: ctaPulseBrown; }
@keyframes ctaPulseBrown {
  0%   { box-shadow: 0 0 0 0 rgba(163, 115, 74, .4); }
  100% { box-shadow: 0 0 0 18px rgba(163, 115, 74, 0); }
}

/* =================================================================
   Tarjetas: inclinación 3D + foco de luz que sigue al cursor
   ================================================================= */
.pillar, .ticket, .stage-card, .fit-card {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  --x: 50%;
  --y: 50%;
  position: relative;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0);
  transition:
    transform .9s var(--out-expo),
    box-shadow .7s var(--out-expo),
    background-color .5s var(--ease),
    border-color .5s var(--ease);
  will-change: transform;
}
.pillar::after, .ticket::after, .stage-card::after, .fit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--x) var(--y), rgba(173, 119, 66, .13), rgba(173, 119, 66, 0) 60%);
  opacity: 0;
  transition: opacity .6s var(--ease);
  pointer-events: none;
}
.fit-card::after { background: radial-gradient(360px circle at var(--x) var(--y), rgba(159, 17, 15, .07), rgba(159, 17, 15, 0) 60%); }
.pillar:hover, .ticket:hover, .stage-card:hover, .fit-card:hover { --lift: -6px; }
.pillar:hover::after, .ticket:hover::after, .stage-card:hover::after, .fit-card:hover::after { opacity: 1; }
.pillar:hover  { box-shadow: 0 26px 50px -30px rgba(146, 82, 29, .5); }
.ticket:hover  { box-shadow: 0 30px 60px -34px rgba(146, 82, 29, .55); }
.fit-card:hover { box-shadow: 0 26px 50px -32px rgba(159, 17, 15, .35); }
.stage-card:hover { --lift: -4px; }
/* Mientras el cursor se mueve la inclinación responde rápido */
.is-tilting { transition: transform .25s var(--out-expo), box-shadow .7s var(--out-expo), background-color .5s var(--ease) !important; }

.pillar .icon-48 { transition: transform .8s var(--spring); }
.pillar:hover .icon-48 { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.pillar .num, .stage-card .num { transition: letter-spacing .6s var(--out-expo), color .4s var(--ease); }
.pillar:hover .num, .stage-card:hover .num { color: var(--gold); }

/* =================================================================
   Imágenes: entrada con cortinilla + zoom lento
   ================================================================= */
.stage-img, .photo--vida, .venue, .ticket__img {
  clip-path: inset(0 0 100% 0 round 8px);
  transition: clip-path 1.3s var(--out-expo) .1s;
}
.stage-img img, .photo--vida img, .venue img, .ticket__img img {
  scale: 1.18;
  transition: scale 1.8s var(--out-expo) .1s, transform 1.2s var(--out-expo);
}
.is-visible .stage-img, .is-visible .photo--vida, .is-visible .venue, .is-visible .ticket__img,
.stage-img.is-visible, .photo--vida.is-visible, .venue.is-visible, .ticket__img.is-visible {
  clip-path: inset(0 0 0 0 round 8px);
}
.is-visible .stage-img img, .is-visible .photo--vida img, .is-visible .venue img, .is-visible .ticket__img img { scale: 1; }
.stage-row--reverse .stage-img { transition-delay: 0s; }
.ticket:hover .ticket__img img { transform: scale(1.05); }

/* Comentarios */
.comments { transition: transform 1s var(--out-expo), filter .6s var(--ease); }
.comments:hover { transform: scale(1.035) rotate(-.6deg); filter: drop-shadow(0 18px 24px rgba(35, 22, 10, .12)); }

/* =================================================================
   Bloques del día: entrada/salida lateral ligada al scroll (JS)
   ================================================================= */
.section--6 { overflow-x: clip; }
[data-row-scroll] { will-change: transform, opacity; }

/* =================================================================
   Flotación suave: comments, imagen "vida" y bloques
   (usa la propiedad `translate`, independiente de hover y entradas)
   ================================================================= */
@keyframes floatSoft {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
.comments     { animation: floatSoft 6.5s ease-in-out infinite; }
.photo--vida  { animation: floatSoft 7.5s ease-in-out -1.2s infinite; }
.stage-img    { animation: floatSoft 7s ease-in-out infinite; }
.stages .stage-row:nth-child(2) .stage-img { animation-duration: 7.8s; animation-delay: -2s; }
.stages .stage-row:nth-child(3) .stage-img { animation-duration: 6.6s; animation-delay: -3.4s; }
.stages .stage-row:nth-child(4) .stage-img { animation-duration: 8.2s; animation-delay: -1s; }

/* =================================================================
   Títulos y listas escalonadas
   ================================================================= */
h2.display[data-reveal] { filter: blur(10px); translate: 0 36px; }
h2.display[data-reveal].is-visible { filter: blur(0); translate: 0 0; }

[data-stagger] > * {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .8s var(--ease), translate .9s var(--out-expo);
  transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}
.is-visible [data-stagger] > *, [data-stagger].is-visible > * { opacity: 1; translate: 0 0; }

.check-list img, .info-list img { transition: transform .6s var(--spring); }
.check-list li:hover img, .info-list li:hover img { transform: scale(1.18) rotate(-8deg); }
.check-list li span, .info-list li span { transition: translate .5s var(--out-expo); }
.check-list li:hover span, .info-list li:hover span { translate: 3px 0; }

/* =================================================================
   Ponentes
   ================================================================= */
.speaker { transition: transform .9s var(--out-expo); }
.speaker__img { transition: transform 1.4s var(--out-expo), filter .8s var(--ease); }
.speaker__text { transition: translate .9s var(--out-expo); }
.speaker__name { transition: letter-spacing .9s var(--out-expo); }
.speakers__viewport:not(.is-dragging) .speaker:hover .speaker__img { transform: scale(1.07); }
.speakers__viewport:not(.is-dragging) .speaker:hover .speaker__text { translate: 0 -6px; }
.speakers__viewport.is-dragging .speaker { transform: scale(.985); }

/* =================================================================
   FAQ
   ================================================================= */
.faq__item summary span { transition: translate .6s var(--out-expo), color .4s var(--ease); }
.faq__item summary:hover span { translate: 4px 0; }
.faq__item summary img { transition: transform .7s var(--spring); }
.faq__item summary:hover img { transform: rotate(-10deg) scale(1.08); }
.faq__answer p { transition: translate .6s var(--out-expo), opacity .5s var(--ease); }
.faq__item:not([open]) .faq__answer p { translate: 0 -6px; opacity: 0; }

/* Enlaces */
.footer__content a, .faq__answer a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--out-expo), color .3s var(--ease); }
.footer__content a:hover, .faq__answer a:hover { background-size: 100% 1px; }

/* =================================================================
   Hero: parallax (JS escribe --p en px)
   ================================================================= */
@media (min-width: 1024px) {
  .hero__bg { will-change: transform; }
  .hero__rocio, .hero__title, .hero__signature, .hero__hat, .hero__pero { will-change: translate; }
}
/* La imagen se escala a la altura del hero: pedimos el mejor remuestreo posible */
.hero__rocio { image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* =================================================================
   Dispositivos táctiles / sin hover: sin tilt ni magnetismo
   ================================================================= */
@media (hover: none) {
  .pillar::after, .ticket::after, .stage-card::after, .fit-card::after { display: none; }
  .cta:hover { --lift: 0px; --s: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-img, .photo--vida, .venue, .ticket__img { clip-path: none !important; }
  .stage-img img, .photo--vida img, .venue img, .ticket__img img { scale: 1 !important; }
  [data-stagger] > * { opacity: 1 !important; translate: none !important; }
  h2.display[data-reveal] { filter: none !important; }
}