/* ============================================================
   ANIMATIONS.CSS — Scroll-triggered, hero reveal & micro-
   interactions for Med 44 Arcadia redesign
   ============================================================ */

/* ── SCROLL-TRIGGERED FADE + SLIDE UP (universal) ─────────── */

.animate {
  opacity:    0;
  transform:  translateY(32px);
  transition: opacity var(--duration-slower) var(--ease-out-expo),
              transform var(--duration-slower) var(--ease-out-expo);
}

.animate.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Stagger delays for grouped children */
.stagger > *:nth-child(1) { transition-delay:   0ms; }
.stagger > *:nth-child(2) { transition-delay:  80ms; }
.stagger > *:nth-child(3) { transition-delay: 160ms; }
.stagger > *:nth-child(4) { transition-delay: 240ms; }
.stagger > *:nth-child(5) { transition-delay: 320ms; }
.stagger > *:nth-child(6) { transition-delay: 400ms; }

/* Fade only (no Y offset) */
.animate-fade {
  opacity:    0;
  transition: opacity var(--duration-slower) var(--ease-out-expo);
}
.animate-fade.is-visible {
  opacity: 1;
}

/* Slide from left */
.animate-left {
  opacity:   0;
  transform: translateX(-40px);
  transition: opacity  var(--duration-slower) var(--ease-out-expo),
              transform var(--duration-slower) var(--ease-out-expo);
}
.animate-left.is-visible {
  opacity:   1;
  transform: translateX(0);
}

/* Slide from right */
.animate-right {
  opacity:   0;
  transform: translateX(40px);
  transition: opacity  var(--duration-slower) var(--ease-out-expo),
              transform var(--duration-slower) var(--ease-out-expo);
}
.animate-right.is-visible {
  opacity:   1;
  transform: translateX(0);
}

/* Scale in */
.animate-scale {
  opacity:   0;
  transform: scale(0.94);
  transition: opacity  var(--duration-slower) var(--ease-out-expo),
              transform var(--duration-slower) var(--ease-out-expo);
}
.animate-scale.is-visible {
  opacity:   1;
  transform: scale(1);
}

/* ── HERO REVEAL — clip-path word-by-word ─────────────────── */

.hero-word {
  display:     inline-block;
  clip-path:   inset(0 0 100% 0);
  opacity:     0;
  animation:   hero-reveal 1s var(--ease-out-expo) forwards;
}

.hero-word:nth-child(1) { animation-delay: 0.15s; }
.hero-word:nth-child(2) { animation-delay: 0.28s; }
.hero-word:nth-child(3) { animation-delay: 0.41s; }
.hero-word:nth-child(4) { animation-delay: 0.54s; }
.hero-word:nth-child(5) { animation-delay: 0.67s; }
.hero-word:nth-child(6) { animation-delay: 0.80s; }

@keyframes hero-reveal {
  to {
    clip-path: inset(0 0 0% 0);
    opacity:   1;
  }
}

/* Hero sub-elements fade in */
.hero-fade-in {
  opacity:   0;
  transform: translateY(16px);
  animation: hero-fade 0.8s var(--ease-out-expo) forwards;
}

.hero-fade-in--1 { animation-delay: 0.9s;  }
.hero-fade-in--2 { animation-delay: 1.05s; }
.hero-fade-in--3 { animation-delay: 1.2s;  }
.hero-fade-in--4 { animation-delay: 1.4s;  }

@keyframes hero-fade {
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* ── MARQUEE (infinite horizontal scroll) ─────────────────── */

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

/* ── STAT NUMBER COUNT (CSS only shimmer) ─────────────────── */

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

/* ══════════════════════════════════════════════════════════
   FLUID PAGE TRANSITIONS (Swup + Native View Transitions)
   Quiet Luxury Motion: Editorial cross-fade with subtle lift
   ══════════════════════════════════════════════════════════ */

/* Native Multi-Page View Transition (Chrome 126+, Safari 18.2+) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root) {
  animation: 0.3s cubic-bezier(0.25, 1, 0.5, 1) both page-fade-out;
}

::view-transition-new(root) {
  animation: 0.38s cubic-bezier(0.25, 1, 0.5, 1) both page-fade-in;
}

@keyframes page-fade-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

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

/* Swup Client-Side Transition Container */
.transition-main {
  opacity: 1;
  transition: opacity 0.32s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Outgoing page leaving */
html.is-animating .transition-main {
  opacity: 0;
}

/* Incoming page entering */
html.is-rendering .transition-main {
  opacity: 0;
}

/* Top luxury loading indicator during page transition */
.swup-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-light, #C4A882), var(--accent-gold, #C8A86A), #E5C58A);
  z-index: 9999;
  width: 0%;
  opacity: 0;
  pointer-events: none;
  transition: width 0.35s ease, opacity 0.2s ease;
  box-shadow: 0 0 10px rgba(200, 168, 106, 0.6);
}

html.is-animating .swup-progress-bar {
  opacity: 1;
  width: 75%;
}

html.is-rendering .swup-progress-bar {
  width: 100%;
  opacity: 0;
  transition: width 0.2s ease, opacity 0.3s ease 0.15s;
}

/* ── REDUCE MOTION ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .animate,
  .animate-fade,
  .animate-left,
  .animate-right,
  .animate-scale {
    opacity:    1;
    transform:  none;
    transition: none;
  }

  .hero-word {
    clip-path:      none;
    opacity:        1;
    animation:      none;
  }

  .hero-fade-in {
    opacity:   1;
    transform: none;
    animation: none;
  }

  .transition-main,
  html.is-animating .transition-main,
  html.is-rendering .transition-main {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .swup-progress-bar {
    display: none !important;
  }
}