/*
 * Motion.
 * Hero plays on load. Everything else waits for [data-reveal] to get .is-visible
 * (script.js, IntersectionObserver). [data-reveal="group"] is only a trigger:
 * the motion lives on its descendants. [data-cascade] children are numbered
 * with --i so they can follow one another.
 * Animations use fill-mode `backwards` so hover transforms work once they end.
 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(32px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideFromLeft { from { opacity: 0; transform: translateX(-64px); } }
@keyframes riseFromBottom { from { opacity: 0; transform: translateY(160px); } }
@keyframes flipUp { from { opacity: 0; transform: perspective(900px) rotateX(-70deg) translateY(30px); } }
@keyframes stampDown { 0% { opacity: 0; transform: rotate(-7deg) scale(1.18); } 70% { opacity: 1; transform: rotate(1deg) scale(.98); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 70% { transform: scale(1.12) rotate(4deg); } }
@keyframes wipeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settleZoom { from { transform: scale(1.2); } }
@keyframes maskUp { from { clip-path: inset(0 0 100% 0); transform: translateY(40px); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
@keyframes bandIn { from { opacity: 0; transform: translateX(var(--band-from)); } }

/* Hero: copy slides in from the left one by one, yacht cards rise from the bottom. */
.hero__logo, .hero__tagline, .hero__location, .hero__lead, .hero__description, .hero__actions { animation: slideFromLeft .9s cubic-bezier(.2,.8,.2,1) backwards; }
.hero__logo { animation-delay: .1s; }
.hero__tagline { animation-delay: .22s; }
.hero__location { animation-delay: .34s; }
.hero__lead { animation-delay: .46s; }
.hero__description { animation-delay: .58s; }
.hero__actions { animation-delay: .7s; }
.hero-yacht { animation: riseFromBottom 1.1s cubic-bezier(.16,1,.3,1) backwards; animation-delay: .85s; }
.hero-yacht + .hero-yacht { animation-delay: 1s; }
.hero__credentials { animation: fadeIn 1s 1.2s backwards; }

/* Plain reveal: fade up as a block. */
[data-reveal=""] { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
[data-reveal=""].is-visible { opacity: 1; transform: none; }

/* Hidden until revealed */
[data-reveal="group"]:not(.is-visible) [data-cascade] > *,
[data-reveal="group"][data-cascade]:not(.is-visible) > *,
[data-reveal="group"]:not(.is-visible) [data-mask],
[data-reveal="group"]:not(.is-visible) > p,
.showcase__row:not(.is-visible) .showcase__band { opacity: 0; }

/* Cascade: children follow each other (default motion is fade up). */
.is-visible[data-cascade] > *, .is-visible [data-cascade] > * { animation: var(--cascade-anim, fadeUp) var(--cascade-dur, .8s) cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--cascade-start, 0s) + var(--i, 0) * var(--cascade-step, 90ms)); }

/* Big headings rise out of an invisible slot. */
.is-visible [data-mask] { animation: maskUp 1s cubic-bezier(.7,0,.2,1) .1s backwards; }
.service-carousel__header.is-visible > p { animation: fadeUp .8s .45s backwards; }

/* Experience cards flip up from their top edge in reading order. */
.xp-grid { --cascade-anim: flipUp; --cascade-step: 55ms; --cascade-dur: .75s; }
.xp-grid > * { transform-origin: 50% 0; }

/* About: copy cascades, the certificate is stamped down, its lines tick in, the MARINA seal pops. */
.aboutus__credentials ul { --cascade-anim: fadeIn; --cascade-start: .55s; --cascade-step: 80ms; --cascade-dur: .5s; }
[data-reveal="group"]:not(.is-visible) .aboutus__credentials, [data-reveal="group"]:not(.is-visible) .aboutus__marina { opacity: 0; }
.is-visible .aboutus__credentials { animation: stampDown .75s cubic-bezier(.3,1.3,.5,1) .2s backwards; }
.is-visible .aboutus__marina { animation: popIn .6s cubic-bezier(.3,1.4,.5,1) 1.1s backwards; }

/* Fleet: each yacht card is wiped open from the left while its photo settles. */
.yachts__grid { --cascade-anim: wipeIn; --cascade-dur: 1.1s; --cascade-step: 180ms; }
.yachts__grid.is-visible .yacht-card__main { animation: settleZoom 1.6s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 180ms); }

/* Gallery rows: copy cascades, photo bands sweep in from the side they sit on. */
.showcase__row--right { --band-from: 160px; }
.showcase__row--left { --band-from: -160px; }
.showcase__row.is-visible .showcase__band { animation: bandIn 1.1s cubic-bezier(.16,1,.3,1) .15s backwards; }
.showcase__row.is-visible .showcase__band--b { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  [data-reveal=""] { opacity: 1; transform: none; }
}