/* ============================================================
   WOODHOUSE SPA SOUTHPARK — ANIMATIONS
   animations.css: keyframes, scroll-trigger states, parallax
   All motion wrapped in prefers-reduced-motion guard
   ============================================================ */

/* ── Base animation states (initial — hidden) ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-blur {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.8s ease, filter 0.8s ease;
}
.reveal-blur.visible {
  opacity: 1;
  filter: blur(0);
}

/* ── Stagger delays ── */
.stagger-1  { transition-delay: 0.05s; }
.stagger-2  { transition-delay: 0.12s; }
.stagger-3  { transition-delay: 0.19s; }
.stagger-4  { transition-delay: 0.26s; }
.stagger-5  { transition-delay: 0.33s; }
.stagger-6  { transition-delay: 0.40s; }
.stagger-7  { transition-delay: 0.47s; }
.stagger-8  { transition-delay: 0.54s; }

/* ── Clip-path wipe (gallery) ── */
.reveal-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal-wipe.visible { clip-path: inset(0 0% 0 0); }

/* ── Keyframes ── */
@media (prefers-reduced-motion: no-preference) {

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
  }

  @keyframes float-x {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50%       { transform: translateX(10px) rotate(5deg); }
  }

  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(184,150,90,0.3); }
    50%       { box-shadow: 0 0 35px rgba(184,150,90,0.6); }
  }

  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  @keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
  }

  @keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @keyframes bounce-in {
    0%   { opacity: 0; transform: scale(0.5) translateY(20px); }
    60%  { opacity: 1; transform: scale(1.08) translateY(-4px); }
    80%  { transform: scale(0.97); }
    100% { transform: scale(1) translateY(0); }
  }

  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes hero-word {
    from { opacity: 0; transform: translateY(30px) skewY(3deg); }
    to   { opacity: 1; transform: translateY(0) skewY(0deg); }
  }

  @keyframes counter-tick {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes orb-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.05); }
    66%  { transform: translate(-20px, 15px) scale(0.97); }
    100% { transform: translate(0, 0) scale(1); }
  }

  @keyframes scroll-indicator {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(12px); }
  }

  @keyframes check-draw {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
  }

  /* ── Floating decoration elements ── */
  .float-el     { animation: float     6s ease-in-out infinite; }
  .float-el-alt { animation: float     8s ease-in-out 1s infinite; }
  .float-x-el   { animation: float-x  7s ease-in-out infinite; }
  .pulse-gold   { animation: pulse-glow 3s ease-in-out infinite; }
  .spin-ring    { animation: spin-slow  20s linear infinite; }
  .orb          { animation: orb-drift  15s ease-in-out infinite; }

  /* ── Hero entrance ── */
  .hero-word {
    display: inline-block;
    animation: hero-word 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* ── Sticky mobile buttons ── */
  .sticky-mobile-btns {
    animation: bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3s both;
  }

  /* ── Scroll indicator ── */
  .scroll-indicator-dot {
    animation: scroll-indicator 1.2s ease-in-out infinite alternate;
  }

  /* ── Ticker / marquee ── */
  .ticker-track {
    animation: ticker 25s linear infinite;
  }
  .ticker-track:hover {
    animation-play-state: paused;
  }

  /* ── Card shimmer skeleton ── */
  .skeleton {
    background: linear-gradient(90deg,
      var(--color-surface) 25%,
      rgba(184,150,90,0.08) 50%,
      var(--color-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  /* ── Form error shake ── */
  .shake { animation: shake 0.35s ease; }

  /* ── Bounce-in (mobile sticky) ── */
  .bounce-in { animation: bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

  /* ── Counter animation ── */
  .counter-anim { animation: counter-tick 0.4s ease both; }

}

/* ── Parallax layers (JS-driven, CSS provides initial state) ── */
.parallax-slow  { will-change: transform; }
.parallax-mid   { will-change: transform; }
.parallax-fast  { will-change: transform; }

/* ── Ken Burns image zoom ── */
@media (prefers-reduced-motion: no-preference) {
  .ken-burns {
    animation: ken-burns 18s ease-in-out infinite alternate;
  }

  @keyframes ken-burns {
    from { transform: scale(1)    translate(0, 0); }
    to   { transform: scale(1.08) translate(-1%, -1%); }
  }
}

/* ── Hover lift card ── */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  cursor: pointer;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}
.hover-lift:hover .hover-lift-img { transform: scale(1.05); }

.hover-lift-img {
  transition: transform 0.5s ease;
  overflow: hidden;
}

/* ── Gold underline slide ── */
.gold-underline {
  position: relative;
  display: inline-block;
}
.gold-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}
.gold-underline:hover::after { width: 100%; }

/* ── Image overlay hover zoom ── */
.img-zoom-wrap {
  overflow: hidden;
  border-radius: inherit;
}
.img-zoom-wrap img {
  transition: transform 0.6s ease;
}
.img-zoom-wrap:hover img { transform: scale(1.07); }

/* ── Tab transitions ── */
.tab-content {
  display: none;
  animation: fade-in 0.35s ease;
}
.tab-content.active { display: block; }

/* ── Lightbox fade ── */
.lightbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Accordion ── */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.3s ease;
}
.accordion-body.open {
  max-height: 600px;
}

/* ── Reduced motion override ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur, .reveal-wipe {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    transition: none !important;
  }
}