/* St TERRA motion: light finding a room, a photograph opening, type settling.
   Time-based hero is the authored moment. Later sections use view timelines
   when supported; the default CSS state stays fully visible. */

.hero-media img {
  animation: hero-settle var(--duration-hero) var(--ease-out) 0.45s both;
  transform-origin: center 48%;
}

.site-header-overlay .header-inner {
  animation: fade-in 0.9s var(--ease-out) 0.2s both;
}

.hero h1 {
  animation: light-in 1.15s var(--ease-out) 0.55s both;
}

.hero-note {
  animation: light-in 1.2s var(--ease-out) 0.95s both;
}

@keyframes hero-settle {
  from {
    transform: scale(1.07);
  }

  to {
    transform: scale(1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes light-in {
  from {
    opacity: 0;
    filter: blur(8px);
    clip-path: inset(0% 0% 72% 0%);
  }

  to {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0% 0% 0% 0%);
  }
}

@keyframes photo-open {
  0%,
  45% {
    clip-path: inset(8% 7% 8% 7%);
  }

  100% {
    clip-path: inset(0% 0% 0% 0%);
  }
}

@keyframes photo-from-gutter {
  0%,
  45% {
    clip-path: inset(0% 22% 0% 0%);
  }

  100% {
    clip-path: inset(0% 0% 0% 0%);
  }
}

@keyframes type-wipe {
  0%,
  45% {
    clip-path: inset(0% 28% 0% 0%);
    opacity: 0.35;
  }

  100% {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
  }
}

/* Chromium / Safari: progress is tied to the element's travel through the viewport.
   Firefox Release still keeps this behind a flag, so html.motion-fallback + .is-inview
   replay the same openings once the element enters view. Four-value insets keep
   clip-path interpolatable in Firefox. Duration 1ms is required there when the
   flag is on; Chrome ignores it once a view timeline is attached. */
@supports (animation-timeline: view()) {
  html:not(.motion-fallback) .about-photo {
    animation: photo-from-gutter 1ms linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 62%;
  }

  html:not(.motion-fallback) .about-grid > div {
    animation: type-wipe 1ms linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 65%;
  }

  html:not(.motion-fallback) .section-head {
    animation: type-wipe 1ms linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 55%;
  }

  html:not(.motion-fallback) .gallery-item {
    animation: photo-open 1ms linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 58%;
  }

  html:not(.motion-fallback) .benefit-list li {
    animation: type-wipe 1ms linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 64%;
  }

  html:not(.motion-fallback) .contact-grid > div,
  html:not(.motion-fallback) .contact-form {
    animation: type-wipe 1ms linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 62%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-fallback .about-photo {
    clip-path: inset(0% 22% 0% 0%);
    transition: clip-path 0.9s var(--ease-out);
  }

  html.motion-fallback .about-photo.is-inview {
    clip-path: inset(0% 0% 0% 0%);
  }

  html.motion-fallback .gallery-item {
    clip-path: inset(8% 7% 8% 7%);
    transition: clip-path 0.9s var(--ease-out);
  }

  html.motion-fallback .gallery-item.is-inview {
    clip-path: inset(0% 0% 0% 0%);
  }

  html.motion-fallback .about-grid > div,
  html.motion-fallback .section-head,
  html.motion-fallback .benefit-list li,
  html.motion-fallback .contact-grid > div,
  html.motion-fallback .contact-form {
    clip-path: inset(0% 28% 0% 0%);
    opacity: 0.35;
    transition:
      clip-path 0.9s var(--ease-out),
      opacity 0.9s var(--ease-out);
  }

  html.motion-fallback .about-grid > div.is-inview,
  html.motion-fallback .section-head.is-inview,
  html.motion-fallback .benefit-list li.is-inview,
  html.motion-fallback .contact-grid > div.is-inview,
  html.motion-fallback .contact-form.is-inview {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img,
  .site-header-overlay .header-inner,
  .hero h1,
  .hero-note,
  .about-photo,
  .about-grid > div,
  .section-head,
  .gallery-item,
  .gallery-item img,
  .about-image,
  .benefit-list li,
  .contact-grid > div,
  .contact-form {
    animation: none;
    clip-path: none;
    filter: none;
    transform: none;
    opacity: 1;
  }
}