/* ═══════════════════════════════════════════════════════════
   SeaLine Motion System v2 — progressive enhancement
   Scenic hides apply ONLY under html.sealine-motion
   (set by head boot BEFORE first paint — prevents blink).
   Hero entrance also has a CSS-only path for no-preference users.
═══════════════════════════════════════════════════════════ */

:root {
  --sl-motion-instant: .12s;
  --sl-motion-micro: .18s;
  --sl-motion-fast: .28s;
  --sl-motion-standard: .55s;
  --sl-motion-expressive: .75s;
  --sl-motion-cinematic: .9s;

  --sl-ease-functional: cubic-bezier(.25, .1, .25, 1);
  --sl-ease-enter: cubic-bezier(.22, 1, .36, 1);
  --sl-ease-cinematic: cubic-bezier(.16, 1, .3, 1);

  --sl-motion-rise: 28px;
  --sl-motion-rise-soft: 20px;
  --sl-motion-rise-hero: 22px;
  --sl-motion-media-scale: 1.03;
  --sl-motion-stagger: .08s;
  --sl-motion-stagger-max: 4;
}

@media (max-width: 700px) {
  :root {
    --sl-motion-rise: 18px;
    --sl-motion-rise-soft: 14px;
    --sl-motion-rise-hero: 16px;
    --sl-motion-media-scale: 1.018;
    --sl-motion-stagger: .05s;
    --sl-motion-standard: .45s;
    --sl-motion-expressive: .6s;
    --sl-motion-cinematic: .72s;
  }
}

.home-page {
  --sl-page-duration: var(--sl-motion-cinematic);
  --sl-page-stagger: .09s;
}

.property-page,
.gallery-page,
.location-page {
  --sl-page-duration: var(--sl-motion-expressive);
  --sl-page-stagger: .07s;
}

.reviews-page,
.stay-cost-page,
.faq-page {
  --sl-page-duration: var(--sl-motion-standard);
  --sl-page-stagger: .06s;
}

/* ── Level A: micro-interactions ── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:not(:disabled):hover,
  .footer-cta:hover {
    transform: translateY(-1px);
  }

  .button:not(:disabled):active,
  .footer-cta:active {
    transform: translateY(0);
  }

  .gallery-link:hover img,
  .gallery-link:focus-visible img,
  .gallery-cover-card:hover img,
  .gallery-cover-card:focus-visible img,
  .home-photo-main:hover img,
  .home-photo-main:hover video,
  .home-photo-secondary:hover img,
  .home-photo-secondary:hover video,
  .home-page .story-card:hover img {
    transform: scale(var(--sl-motion-media-scale));
  }

  .gallery-link:hover,
  .gallery-link:focus-visible {
    transform: translateY(-2px);
  }
}

.button,
.footer-cta,
.gallery-link,
.gallery-link img,
.gallery-cover-card img,
.home-photo-main img,
.home-photo-main video,
.home-photo-secondary img,
.home-photo-secondary video,
.home-page .story-card img {
  transition:
    transform var(--sl-motion-fast) var(--sl-ease-functional),
    color var(--sl-motion-micro) var(--sl-ease-functional),
    background-color var(--sl-motion-micro) var(--sl-ease-functional),
    border-color var(--sl-motion-micro) var(--sl-ease-functional),
    box-shadow var(--sl-motion-fast) var(--sl-ease-functional);
}

.site-header {
  transition:
    background-color var(--sl-motion-standard) var(--sl-ease-functional),
    border-color var(--sl-motion-standard) var(--sl-ease-functional),
    backdrop-filter var(--sl-motion-standard) var(--sl-ease-functional),
    -webkit-backdrop-filter var(--sl-motion-standard) var(--sl-ease-functional);
}

/* ── Hero: CSS-only under no-preference (does not wait for JS) ── */
@media (prefers-reduced-motion: no-preference) {
  .page-hero [data-motion="hero"] {
    animation: sl-hero-enter var(--sl-motion-expressive) var(--sl-ease-cinematic) both;
    animation-delay: calc(min(var(--sl-hero-i, 0), 3) * .12s + .08s);
  }

  .page-hero .hero-actions[data-motion="hero"],
  .page-hero .page-hero__actions[data-motion="hero"],
  .page-hero .hero-highlights[data-motion="hero"] {
    animation-delay: .38s;
    animation-duration: var(--sl-motion-standard);
  }

  .hero-center > [data-motion="hero"]:nth-child(1) { --sl-hero-i: 0; }
  .hero-center > [data-motion="hero"]:nth-child(2) { --sl-hero-i: 1; }
  .hero-center > [data-motion="hero"]:nth-child(3) { --sl-hero-i: 2; }
  .hero-center > [data-motion="hero"]:nth-child(4) { --sl-hero-i: 3; }

  .page-hero__content > [data-motion="hero"]:nth-child(1) { --sl-hero-i: 0; }
  .page-hero__content > [data-motion="hero"]:nth-child(2) { --sl-hero-i: 1; }
  .page-hero__content > [data-motion="hero"]:nth-child(3) { --sl-hero-i: 2; }
  .page-hero__content > [data-motion="hero"]:nth-child(4) { --sl-hero-i: 3; }
}

@keyframes sl-hero-enter {
  from {
    opacity: 0;
    transform: translate3d(0, var(--sl-motion-rise-hero), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ── Scenic reveals: JS-gated only; one-way to .is-in ── */
html.sealine-motion [data-motion="rise"],
html.sealine-motion [data-motion="soft"],
html.sealine-motion [data-motion="media"],
html.sealine-motion [data-motion="line"] {
  opacity: 0;
}

html.sealine-motion [data-motion="rise"],
html.sealine-motion [data-motion="soft"] {
  transform: translate3d(0, var(--sl-motion-rise), 0);
  transition:
    opacity var(--sl-page-duration, var(--sl-motion-standard)) var(--sl-ease-enter),
    transform var(--sl-page-duration, var(--sl-motion-standard)) var(--sl-ease-enter);
  transition-delay: calc(
    min(var(--sl-motion-i, 0), var(--sl-motion-stagger-max)) *
    var(--sl-page-stagger, var(--sl-motion-stagger))
  );
}

html.sealine-motion [data-motion="soft"] {
  transform: translate3d(0, var(--sl-motion-rise-soft), 0);
}

/*
  Media hosts stay hidden until decode is ready (JS), then settle as one unit.
  No separate child-img opacity gate — that caused empty boxes + pop-in.
*/
html.sealine-motion [data-motion="media"] {
  transform: translate3d(0, var(--sl-motion-rise-soft), 0);
  transition:
    opacity calc(var(--sl-page-duration, var(--sl-motion-standard)) + .12s) var(--sl-ease-cinematic),
    transform calc(var(--sl-page-duration, var(--sl-motion-standard)) + .12s) var(--sl-ease-cinematic);
  transition-delay: calc(
    min(var(--sl-motion-i, 0), var(--sl-motion-stagger-max)) *
    var(--sl-page-stagger, var(--sl-motion-stagger))
  );
}

html.sealine-motion [data-motion="line"] {
  transform: scaleX(0.2);
  transform-origin: left center;
  transition:
    opacity var(--sl-motion-expressive) var(--sl-ease-cinematic),
    transform var(--sl-motion-expressive) var(--sl-ease-cinematic);
}

html.sealine-motion [data-motion="rise"].is-in,
html.sealine-motion [data-motion="soft"].is-in,
html.sealine-motion [data-motion="media"].is-in,
html.sealine-motion [data-motion="line"].is-in {
  opacity: 1;
  transform: none;
}

html.sealine-motion .location-page .location-walk-line__progress {
  transform: scaleX(0);
  transition: transform var(--sl-motion-cinematic) var(--sl-ease-cinematic) .15s;
}

html.sealine-motion .location-page .location-walk-route.is-in .location-walk-line__progress {
  transform: scaleX(1);
}

html.sealine-motion .gallery-grid [data-motion="media"] {
  transition-delay: calc(
    min(var(--sl-motion-i, 0), 2) * var(--sl-page-stagger, var(--sl-motion-stagger))
  );
}

/* Booking + legal stay utilitarian */
.booking-page [data-motion],
.legal-document-page [data-motion],
.terms-page [data-motion] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .page-hero [data-motion="hero"],
  html.sealine-motion [data-motion],
  html.sealine-motion [data-motion].is-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  html.sealine-motion .location-page .location-walk-line__progress {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .button:hover,
  .footer-cta:hover,
  .gallery-link:hover,
  .gallery-link:focus-visible,
  .gallery-link:hover img,
  .gallery-cover-card:hover img,
  .home-photo-main:hover img,
  .home-photo-main:hover video,
  .home-photo-secondary:hover img,
  .home-photo-secondary:hover video,
  .home-page .story-card:hover img {
    transform: none !important;
  }
}