/* BRASA — the shared animation language.

   Three primitives cover almost the whole site:
   .reveal      fade + rise, staggered by --i
   .clip-line   a headline line that wipes up from behind an overflow clip
   .mask        a photograph that uncovers itself vertically

   Everything is opt-in through the .js class so a scriptless page renders
   fully visible, and everything collapses to a plain fade under
   prefers-reduced-motion. */

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* headline lines: each <span class="clip-line"><i>TEXT</i></span> */
.clip-line {
  display: block;
  overflow: hidden;
}
.clip-line > i {
  display: block;
  font-style: inherit;
}
.js .clip-line > i {
  transform: translate3d(0, 105%, 0);
  transition: transform .95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: transform;
}
.js .is-in .clip-line > i,
.js .clip-line.is-in > i { transform: none; }

/* Photography that uncovers itself.

   The clip sits on the image, never on the .mask container. An element whose
   clip-path hides it completely has a zero-area intersection rectangle, and
   IntersectionObserver would then never report it as visible — it would stay
   hidden forever. Clipping the child keeps the observed box intact. */
.js .mask img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 1.15s var(--ease-out), transform 1.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js .mask.is-in img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
.js .frame--hover.mask.is-in:hover img { transform: scale(var(--img-zoom)); }

/* the slow cinematic drift used on full-bleed backgrounds */
.js .drift { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .clip-line > i,
  .js .mask img,
  .js .frame img {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .clip-line > i { transform: none; }
  .js .mask img { clip-path: none; transform: none; }
  .js .drift { transform: none !important; }
  .ember-rule.is-in::after { animation: none; inset: 0; }
}