/* ============================================================
   Scroll Reveal — slide + fade entrance animations
   Engine: animate.css 4.x (already loaded globally)

   How it works:
     1. JS adds class `.sr` + direction class to each target on init
        → element becomes opacity:0 (rule below)
     2. IntersectionObserver fires when target enters viewport
        → JS adds `animate__animated` + sets inline duration/delay
        → animate.css `animation-fill-mode: both` takes over;
          our initial opacity:0 is overridden by the animation engine
     3. After animation the TO keyframe stays (fill: forwards)

   Direction classes added by JS:
     .sr-up-xl   big-title, h1          → 90 px rise
     .sr-up-lg   h2 headings            → 60 px rise
     .sr-up-md   h3 h4 subtitles        → 38 px rise
     .sr-up-sm   body copy, cards, btns → 22 px rise
     .sr-left    panels from the left   → 50 px left
     .sr-right   panels from the right  → 50 px right
   ============================================================ */


/* ── 1. PRE-ANIMATION HIDDEN STATE ────────────────────────────
   Only targets that have .sr but not yet .animate__animated.
   Once animate.css kicks in its animation-fill-mode:both keeps
   the element at the TO-keyframe state (opacity:1).            */

.sr:not(.animate__animated) {
  opacity: 0;
}


/* ── 2. KEYFRAMES ─────────────────────────────────────────── */

@keyframes srFadeUpXl {
  from { opacity: 0; transform: translate3d(0, 90px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,    0); }
}

@keyframes srFadeUpLg {
  from { opacity: 0; transform: translate3d(0, 60px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,    0); }
}

@keyframes srFadeUpMd {
  from { opacity: 0; transform: translate3d(0, 38px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,    0); }
}

@keyframes srFadeUpSm {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,    0); }
}

@keyframes srFadeLeft {
  from { opacity: 0; transform: translate3d(-50px, 0, 0); }
  to   { opacity: 1; transform: translate3d(  0,   0, 0); }
}

@keyframes srFadeRight {
  from { opacity: 0; transform: translate3d(50px, 0, 0); }
  to   { opacity: 1; transform: translate3d( 0,   0, 0); }
}


/* ── 3. ANIMATION BINDING ─────────────────────────────────────
   Bind the right keyframe when animate.css adds animate__animated */

.sr.animate__animated {
  /* Smooth spring-like deceleration — overrides animate.css default */
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: auto;
}

.sr.animate__animated.sr-up-xl { animation-name: srFadeUpXl; }
.sr.animate__animated.sr-up-lg { animation-name: srFadeUpLg; }
.sr.animate__animated.sr-up-md { animation-name: srFadeUpMd; }
.sr.animate__animated.sr-up-sm { animation-name: srFadeUpSm; }
.sr.animate__animated.sr-left  { animation-name: srFadeLeft;  }
.sr.animate__animated.sr-right { animation-name: srFadeRight; }


/* ── 4. LOCATION SLIDER ────────────────────────────────────────
   Text elements are hidden from the start (before JS runs) so
   there is no flash of visible content during Splide init.
   JS adds `.sr.sr-up-xl` / `.sr.sr-up-sm` and controls
   `animate__animated` to trigger / reset animations per slide.  */

#location-carousel .location-element__title,
#location-carousel .location-element__content {
  opacity: 0;
}


/* ── 5. HERO H1 — PAGE-LOAD ANIMATION ─────────────────────────
   Each line animates on page load: first line slides from the
   left, second from the right.  Pure CSS — no JS required.

   Timing:
     line 1 → delay 0.3 s, duration 1.8 s  (done at ≈ 2.1 s)
     line 2 → delay 0.6 s, duration 1.8 s  (done at ≈ 2.4 s)
   ─────────────────────────────────────────────────────────── */

@keyframes heroLineFromLeft {
  from { opacity: 0; transform: translate3d(-70px, 0, 0); }
  to   { opacity: 1; transform: translate3d(    0, 0, 0); }
}

@keyframes heroLineFromRight {
  from { opacity: 0; transform: translate3d(70px, 0, 0); }
  to   { opacity: 1; transform: translate3d(   0, 0, 0); }
}

.hero-h1__line {
  display: block;                             /* preserves two-line layout */
  opacity: 0;
  animation-duration: 1.8s;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); /* ease-in-out */
  animation-fill-mode: forwards;
}

.hero-h1__line--1 {
  animation-name: heroLineFromLeft;
  animation-delay: 0.3s;
}

.hero-h1__line--2 {
  animation-name: heroLineFromRight;
  animation-delay: 0.6s;
}


/* ── 6. REDUCED MOTION ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sr:not(.animate__animated) { opacity: 1; }
  .sr.animate__animated       { animation: none !important; }
  /* Show hero lines immediately without motion */
  .hero-h1__line { opacity: 1; animation: none; }
}