/* ============================================================
   SSVT — Animation system (CSS only; triggered by IO in JS)
   ============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-32px);}to{opacity:1;transform:none;}}
@keyframes fadeRight{from{opacity:0;transform:translateX(32px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes revealMask{from{clip-path:inset(0 0 100% 0);transform:scale(1.06);}to{clip-path:inset(0 0 0 0);transform:scale(1);}}
@keyframes zoomSoft{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}

[data-anim]{opacity:0;will-change:transform,opacity;}
[data-anim].is-in{animation-duration:.7s;animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-fill-mode:forwards;}
[data-anim="up"].is-in{animation-name:fadeUp;}
[data-anim="left"].is-in{animation-name:fadeLeft;}
[data-anim="right"].is-in{animation-name:fadeRight;}
[data-anim="fade"].is-in{animation-name:fadeIn;}
[data-anim="zoom"].is-in{animation-name:zoomSoft;}
[data-anim="reveal"].is-in{animation-name:revealMask;animation-duration:.9s;opacity:1;}

/* stagger */
[data-stagger] > *{opacity:0;}
[data-stagger].is-in > *{animation:fadeUp .65s cubic-bezier(.22,.61,.36,1) forwards;}
[data-stagger].is-in > *:nth-child(1){animation-delay:.05s;}
[data-stagger].is-in > *:nth-child(2){animation-delay:.13s;}
[data-stagger].is-in > *:nth-child(3){animation-delay:.21s;}
[data-stagger].is-in > *:nth-child(4){animation-delay:.29s;}
[data-stagger].is-in > *:nth-child(5){animation-delay:.37s;}
[data-stagger].is-in > *:nth-child(6){animation-delay:.45s;}
[data-stagger].is-in > *:nth-child(7){animation-delay:.53s;}
[data-stagger].is-in > *:nth-child(8){animation-delay:.61s;}
[data-stagger].is-in > *:nth-child(9){animation-delay:.69s;}
[data-stagger].is-in > *:nth-child(10){animation-delay:.77s;}

/* hero load choreography */
.hero__badge,.hero__actions,.hero__highlights{opacity:0;}
.hero.is-ready .hero__badge{animation:fadeUp .7s var(--ease) .1s forwards;}
.hero.is-ready .hero__actions{animation:fadeUp .8s var(--ease) .5s forwards;}
.hero.is-ready .hero__highlights{animation:fadeUp .8s var(--ease) .64s forwards;}
.hero__media img{opacity:0;transition:opacity 1.2s ease;}
.hero.is-ready .hero__media img{opacity:1;}
.booking{opacity:0;}
.booking.is-ready{animation:fadeUp .8s var(--ease) .78s forwards;}

.page-hero .crumbs,.page-hero h1,.page-hero p{opacity:0;animation:fadeUp .7s var(--ease) forwards;}
.page-hero h1{animation-delay:.12s;}
.page-hero p{animation-delay:.24s;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important;}
  [data-anim],[data-stagger] > *{opacity:1 !important;}
}


/* ---------- animated hero reel (UI only) ---------- */
.hero__media--reel{position:absolute;inset:-8% 0 -8% 0;}
.hero__media--reel .hero__slide{position:absolute;inset:0;opacity:0;animation:heroReel 18s linear infinite;}
.hero__media--reel .hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:heroKen 18s ease-in-out infinite;}
.hero__media--reel .hero__slide:nth-child(1),.hero__media--reel .hero__slide:nth-child(1) img{animation-delay:0s;}
.hero__media--reel .hero__slide:nth-child(2),.hero__media--reel .hero__slide:nth-child(2) img{animation-delay:6s;}
.hero__media--reel .hero__slide:nth-child(3),.hero__media--reel .hero__slide:nth-child(3) img{animation-delay:12s;}
@keyframes heroReel{0%{opacity:0}5%{opacity:1}28%{opacity:1}33%{opacity:0}100%{opacity:0}}
@keyframes heroKen{0%{transform:scale(1.06) translate3d(0,0,0)}33%{transform:scale(1.18) translate3d(-2.5%,-1.5%,0)}100%{transform:scale(1.18) translate3d(-2.5%,-1.5%,0)}}

.hero__fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.hero__sweep{position:absolute;top:-30%;left:-40%;width:35%;height:160%;transform:rotate(14deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);filter:blur(6px);
  animation:heroSweep 7s ease-in-out infinite;}
@keyframes heroSweep{0%{left:-45%;opacity:0}15%{opacity:1}60%{left:110%;opacity:0}100%{left:110%;opacity:0}}
.hero__road{position:absolute;left:0;right:0;bottom:3.5%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 46px,transparent 46px 106px);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 40%,transparent 47%,transparent 53%,#000 60%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 40%,transparent 47%,transparent 53%,#000 60%,#000 82%,transparent);
  animation:heroRoad 1.6s linear infinite;opacity:.5;}
@keyframes heroRoad{to{background-position:-106px 0}}
.hero__grain{position:absolute;inset:0;opacity:.28;
  background:radial-gradient(circle at 20% 30%,rgba(59,111,160,.28),transparent 45%),radial-gradient(circle at 82% 70%,rgba(255,255,255,.12),transparent 42%);
  animation:heroGlow 12s ease-in-out infinite alternate;}
@keyframes heroGlow{to{transform:scale(1.15) translate3d(2%,-2%,0);opacity:.42}}

@media (prefers-reduced-motion:reduce){
  .hero__media--reel .hero__slide,.hero__media--reel .hero__slide img,.hero__sweep,.hero__road,.hero__grain{animation:none;}
  .hero__media--reel .hero__slide:nth-child(1){opacity:1;}
}

/* ---------- hero per-slide text animation ---------- */
.hero h1, .hero .hero__text {
  opacity: 0;
  transform: translateY(22px);
  transition: none;
}
.hero h1.hero-text--in, .hero .hero__text.hero-text--in {
  animation: heroTextIn .7s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .hero__text.hero-text--in { animation-delay: .12s; }