/* 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) both;
  transform-origin: center 48%;
}

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

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

.hero-note {
  animation: light-in 1.2s var(--ease-out) 0.42s 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);
  }
}

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

  to {
    clip-path: inset(0);
  }
}

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

  to {
    clip-path: inset(0);
  }
}

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

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

@supports (animation-timeline: view()) {
  .about-photo {
    animation: photo-from-gutter linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 38%;
  }

  .about-grid > div {
    animation: type-wipe linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 42%;
  }

  .section-head {
    animation: type-wipe linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 32%;
  }

  .gallery-item {
    animation: photo-open linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  .benefit-list li {
    animation: type-wipe linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  .contact-grid > div,
  .contact-form {
    animation: type-wipe linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 36%;
  }
}

@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;
  }
}