/* ================================================================
   LA VESPA — Animation Layer v2 · Emil Kowalski principles
   Only animate transform + opacity (GPU). Avoid width/height/margin.
   Use ease-out for enter, linear for constant motion.
================================================================ */

/* ── 1. BUTTON PRESS FEEDBACK ──────────────────────────────────
   Emil: every pressable element must give instant scale feedback.
   scale(0.97) is subtle but critical — UI feels like it listens.
   100ms ease-out: fast entry = instant feedback perception.
   ──────────────────────────────────────────────────────────── */
@media (pointer: fine) {
  .hero-cta:active {
    transform: scale(0.97);
    transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  }
  .btn-outline-dark:active {
    transform: scale(0.97);
    transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  }
  .btn-wa:active {
    transform: translateY(-1px) scale(0.97) !important;
    transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  }
  .nav-cta:active {
    transform: scale(0.97) !important;
    transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  }
  .sello-btn:active,
  .share-etapa-btn:active,
  .lv-lang-btn:active,
  .lv-lang-opt:active,
  #music-btn:active {
    transform: scale(0.97) !important;
    transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  }
  .faq-btn:active {
    transform: scale(0.99) !important;
    transition: transform 80ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  }
  .nav-burger:active {
    transform: scale(0.9) !important;
    transition: transform 100ms cubic-bezier(0.23, 1, 0.32, 1) !important;
  }
}

/* ── 2. FAQ BUTTON: text slides right on hover ─────────────────
   User sees it every interaction with the accordion — keep subtle.
   6px translateX, 250ms ease-out. Not on mobile (touch triggers hover).
   ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .faq-btn > span:first-child {
    display: inline-block;
    transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .faq-btn:hover > span:first-child {
    transform: translateX(6px);
  }
}

/* ── 3. SERVICE NUMBER: color shift on parent hover ────────────
   Reinforces the row-level hover that already shifts background.
   ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .svc-num {
    transition: color 300ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .svc-item:hover .svc-num {
    color: var(--cream);
  }
}

/* ── 4. PILGRIM CARDS: lift on hover ───────────────────────────
   Cards are in a scrolling carousel, so hover is rare — ok to animate.
   translateY(-4px) + shadow = depth. 400ms ease-out = smooth lift.
   ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .peregrino-card {
    transition: border-color .4s, box-shadow .4s,
                transform .4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  }
  .peregrino-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .45);
  }
}

/* ── 5. ROUTE DOT PULSE ────────────────────────────────────────
   Active node on the Camino route strip pulses to draw attention.
   Two-ring expansion: inner bright, outer fade.
   ──────────────────────────────────────────────────────────── */
.r-dot.active {
  animation: dotPulse 2.8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(197, 133, 58, .18); }
  50%       { box-shadow: 0 0 0 12px rgba(197, 133, 58, .06),
                          0 0 0  5px rgba(197, 133, 58, .28); }
}

/* ── 6. STAR STAGGER ───────────────────────────────────────────
   Stars start invisible, scale+rotate in one by one via .stars-revealed.
   scale(0.95) not scale(0): nothing in real world appears from nothing.
   ──────────────────────────────────────────────────────────── */
.rev-stars span {
  transform: scale(0.6) rotate(-25deg);
  opacity: 0;
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity    300ms ease-out;
}
.rev-stars.stars-revealed span:nth-child(1) { transform: scale(1) rotate(0); opacity: 1; transition-delay:   0ms; }
.rev-stars.stars-revealed span:nth-child(2) { transform: scale(1) rotate(0); opacity: 1; transition-delay:  80ms; }
.rev-stars.stars-revealed span:nth-child(3) { transform: scale(1) rotate(0); opacity: 1; transition-delay: 160ms; }
.rev-stars.stars-revealed span:nth-child(4) { transform: scale(1) rotate(0); opacity: 1; transition-delay: 240ms; }
.rev-stars.stars-revealed span:nth-child(5) { transform: scale(1) rotate(0); opacity: 1; transition-delay: 320ms; }

/* ── 7. WA-CARD 3D TILT ────────────────────────────────────────
   will-change: transform so GPU layer is ready before mouse enters.
   Actual tilt values set by JS.
   ──────────────────────────────────────────────────────────── */
.wa-card {
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.45s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* ── 8. FOOTER LINK HOVER ──────────────────────────────────────
   Directional hint: links slide right on hover = "go here".
   5px translateX. Emil: unseen details compound.
   ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .ft-links a {
    transition: color .3s,
                transform .3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  }
  .ft-links a:hover {
    transform: translateX(5px);
  }
}

/* ── 9. ROUTE LINE: ready for JS-driven draw animation ─────────
   transform-origin: left so scaleX(0→1) draws left-to-right.
   ──────────────────────────────────────────────────────────── */
.r-line {
  transform-origin: left center;
  transform: scaleX(0);
  /* JS adds .r-line-drawn to trigger the transition */
  transition: transform 800ms cubic-bezier(0.23, 1, 0.32, 1);
}
.r-line.r-line-drawn {
  transform: scaleX(1);
}

/* ── 10. HISTORIA IMAGE: clip-path reveal overlay ──────────────
   A pseudo-element slides away left-to-right to reveal the image.
   More dramatic than simple opacity fade.
   ──────────────────────────────────────────────────────────── */
.h-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg2, #141210);
  z-index: 2;
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
}
.h-img-wrap.img-revealed::before {
  transform: scaleX(0);
}

/* ── 11. GALLERY PANEL: clip-path reveal ───────────────────────
   Handled via GSAP overwrite in vespa-animations.js to avoid
   conflicting with the existing data-reveal="up" animation.
   ──────────────────────────────────────────────────────────── */

/* ── 12. SECTION LABEL CLIP REVEAL ─────────────────────────────
   Labels slide in from left (clip-path inset right-to-left).
   JS adds .sec-label-revealed class.
   ──────────────────────────────────────────────────────────── */
.sec-label-anim {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sec-label-anim.sec-label-revealed {
  clip-path: inset(0 0% 0 0);
}

/* ── 13. CAMINO STATS: count-up numbers scale in ───────────────
   Numbers start smaller and scale up when revealed.
   ──────────────────────────────────────────────────────────── */
.c-num {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.5s ease-out;
}

/* ── 14. CONTACT ROW HOVER ─────────────────────────────────────
   Each contact row highlights gold label on hover.
   ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .ct-row {
    transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .ct-row:hover {
    transform: translateX(6px);
  }
  .ct-row .ct-label {
    transition: color 250ms ease;
  }
  .ct-row:hover .ct-label {
    color: var(--cream);
  }
}

/* ── 15. NAVIGATION LINK ACTIVE STATE ──────────────────────────
   Nav links get a brief scale dip on click = feels more real.
   ──────────────────────────────────────────────────────────── */
@media (pointer: fine) {
  .nav-links a:active {
    opacity: 0.6;
    transition: opacity 80ms ease !important;
  }
}

/* ── 16. HISTORIA YEAR: fade + scale on reveal ─────────────────
   The big ghost year number scales from 0.8 with a delay.
   ──────────────────────────────────────────────────────────── */
.historia-year {
  transform: scale(0.8);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.3s,
              opacity 1s ease 0.3s;
}
.historia-year.year-revealed {
  transform: scale(1);
  opacity: 1;
  /* opacity final defined by original CSS as rgba — JS sets final val */
}

/* ── 17. CLICK RIPPLE ─────────────────────────────────────────
   Span injected by JS on click. Expands from click origin, fades.
   overflow:hidden on parent clips it — set by JS too.
   ──────────────────────────────────────────────────────────── */
.lv-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
  transform: scale(0);
  opacity: 1;
  animation: lvRippleOut 650ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes lvRippleOut {
  to { transform: scale(1); opacity: 0; }
}

/* Dark ripple variant for light-bg button (btn-outline-dark on #reviews) */
.lv-ripple-dark {
  background: rgba(12, 10, 8, 0.12);
}

/* ── 18. GALLERY SHIMMER ─────────────────────────────────────
   Light sweep passes over image on hover. Triggered by ::after.
   translate: from -100% to +200% = full sweep regardless of width.
   ──────────────────────────────────────────────────────────── */
.g-panel {
  overflow: hidden;
}
.g-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(255, 255, 255, .1) 50%,
    transparent 65%
  );
  transform: translateX(-160%);
  pointer-events: none;
  z-index: 5;
  transition: transform 0s 9999s; /* instant reset after hover out */
}
@media (hover: hover) and (pointer: fine) {
  .g-panel:hover::after {
    transform: translateX(160%);
    transition: transform 750ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
  }
}

/* ── 19. SERVICE LEFT INDICATOR BAR ──────────────────────────
   Thin gold line grows from top on row hover. Pure clip-path.
   Complements existing padding-left expansion effect.
   ──────────────────────────────────────────────────────────── */
.svc-item {
  position: relative;
}
.svc-item::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--gold, #C5853A);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 350ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .svc-item:hover::before {
    clip-path: inset(0 0 0 0);
  }
}

/* ── 20. HOLD-TO-BOOK OVERLAY ────────────────────────────────
   JS injects .lv-hold-fill inside .btn-wa.
   On hold: clip-path fills left-to-right in 1.5s (linear).
   On release: snaps back in 200ms (fast, asymmetric timing).
   Emil: slow where deciding, fast where system responds.
   ──────────────────────────────────────────────────────────── */
.lv-hold-fill {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 200ms ease-out;
  pointer-events: none;
  z-index: 0;
}
.btn-wa.lv-holding .lv-hold-fill {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1500ms linear;
}

/* Hold hint label */
.btn-wa .lv-hold-hint {
  position: absolute;
  bottom: -1.8rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(197, 133, 58, 0.55);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-wa:hover .lv-hold-hint { opacity: 1; }
}

/* ── 21. MAGNETIC NAV LINKS ──────────────────────────────────
   Each link shifts toward cursor via JS lerp.
   CSS just sets will-change for the GPU layer.
   ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .nav-links li a:not(.nav-cta) {
    display: inline-block;
    will-change: transform;
    transition: color .3s, transform .4s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

/* ── 22. MARQUEE PAUSE ON HOVER ──────────────────────────────
   Gold marquee bar slows when cursor enters (not just peregrinos).
   ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}

/* ── 23. CURSOR TRAIL ─────────────────────────────────────────
   Dots injected by JS. CSS sets base appearance.
   ──────────────────────────────────────────────────────────── */
.lv-trail-dot {
  position: fixed;
  pointer-events: none;
  z-index: 9996;
  border-radius: 50%;
  background: rgba(197, 133, 58, 1);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* ── 24. MUSIC BUTTON EQUALIZER ──────────────────────────────
   Three animated bars show inside music button when playing.
   Added to #music-btn via generated content + CSS animation.
   ──────────────────────────────────────────────────────────── */
.lv-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  position: absolute;
}
.lv-eq span {
  display: block;
  width: 2px;
  background: var(--gold, #C5853A);
  border-radius: 1px;
  animation: eqBar 0.9s ease-in-out infinite alternate;
}
.lv-eq span:nth-child(1) { height: 4px;  animation-delay: 0ms;   }
.lv-eq span:nth-child(2) { height: 10px; animation-delay: 150ms; }
.lv-eq span:nth-child(3) { height: 6px;  animation-delay: 300ms; }
@keyframes eqBar {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

/* ── 25. HERO CTA PULSE RING ─────────────────────────────────
   Breathing ring around the CTA to draw attention after loader.
   Stops after first interaction (JS removes class).
   ──────────────────────────────────────────────────────────── */
.hero-cta.lv-cta-pulse {
  box-shadow: 0 0 0 0 rgba(197, 133, 58, 0.4);
  animation: ctaPulse 2.5s cubic-bezier(0.23, 1, 0.32, 1) infinite 2s;
}
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0   rgba(197, 133, 58, 0.4); }
  70%  { box-shadow: 0 0 0 14px rgba(197, 133, 58, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(197, 133, 58, 0);   }
}

/* ── prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .peregrinos-track  { animation: none !important; }
  .marquee-track     { animation: none !important; }
  .r-dot.active      { animation: none !important; }
  .r-line            { transform: scaleX(1) !important; transition: none !important; }
  .h-img-wrap::before{ transform: scaleX(0) !important; transition: none !important; }
  .g-panel           { clip-path: inset(0 0 0 0) !important; transition: none !important; }
  .sec-label-anim    { clip-path: inset(0 0% 0 0) !important; transition: none !important; }
  .rev-stars span    { transform: scale(1) rotate(0) !important; opacity: 1 !important; transition: none !important; }
  .historia-year     { transform: scale(1) !important; opacity: 1 !important; transition: none !important; }
  .lv-ripple         { animation: none !important; }
  .lv-eq span        { animation: none !important; }
  .hero-cta.lv-cta-pulse { animation: none !important; box-shadow: none !important; }
}