/* Motion language: architectural wipes, staggered type and slow camera movement. */
:root { --motion-ease: cubic-bezier(.16,1,.3,1); }
.main-image {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
}
.main-image > header { position: relative; z-index: 2; }
body > header, .main-image > header {
  animation: header-enter 900ms var(--motion-ease) both;
}
@keyframes header-enter {
  from { opacity: 0; translate: 0 -20px; }
  to { opacity: 1; translate: none; }
}
.carousel-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.3s cubic-bezier(.4,0,.2,1);
}
.carousel-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 6s linear;
}
.carousel-layer.is-active { opacity: 1; }
.carousel-layer.is-active::before { transform: scale(1.015); }
:is(.news,.about,.about-reverse,.grid > .card) > img { height: auto; }
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms ease var(--reveal-delay, 0ms), transform 1100ms var(--motion-ease) var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
h1.reveal {
  clip-path: inset(0 0 100% 0);
  transform: translateY(48px);
  transition: clip-path 1200ms var(--motion-ease), transform 1200ms var(--motion-ease), opacity 700ms ease;
}
h1.reveal.is-visible { opacity: 1; clip-path: inset(0); transform: translateY(0); }
.reveal:is(.news,.about,.about-reverse,.grid > div.card) > img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1300ms var(--motion-ease) var(--reveal-delay, 0ms);
}
.reveal.about-reverse > img { clip-path: inset(0 0 0 100%); }
.reveal.is-visible:is(.news,.about,.about-reverse,.grid > div.card) > img { clip-path: inset(0); }
.reveal :is(.news-text,.about-text,.about-text-reverse) > *,
.grid > div.card.reveal > :is(p,h2) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 1000ms var(--motion-ease);
}
.reveal.is-visible :is(.news-text,.about-text,.about-text-reverse) > *,
.grid > div.card.reveal.is-visible > :is(p,h2) {
  opacity: 1;
  transform: translateY(0);
}
.reveal :is(.news-text,.about-text,.about-text-reverse) > :nth-child(1),
.grid > div.card.reveal > :nth-child(2) { transition-delay: 180ms; }
.reveal :is(.news-text,.about-text,.about-text-reverse) > :nth-child(2),
.grid > div.card.reveal > :nth-child(3) { transition-delay: 300ms; }
.reveal :is(.news-text,.about-text,.about-text-reverse) > :nth-child(3),
.grid > div.card.reveal > :nth-child(4) { transition-delay: 420ms; }
.more-text.is-expanded { display: block; animation: text-enter 600ms var(--motion-ease) both; }
@keyframes text-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
nav a, footer a, .show-hide {
  position: relative;
  transition: opacity 200ms ease;
}
nav a::after, footer a::after, .show-hide::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 450ms var(--motion-ease);
  pointer-events: none;
}
.show-hide::after { left: 80px; right: 80px; }
@media (hover: hover) {
  :is(nav a,footer a,.show-hide):hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  .grid > div.card.is-visible:hover { transform: translateY(-8px); }
}
@media (max-width: 600px) {
  .main-image { background-image: url('../assets/slide-1-960.webp'); }
  .reveal { transform: translateY(28px); }
  .show-hide::after { left: var(--page-gutter, 20px); right: var(--page-gutter, 20px); }
}
@media (prefers-reduced-motion: reduce) {
  body > header, .main-image > header, .carousel-layer.is-active::before, .more-text.is-expanded { animation: none; }
  .reveal, h1.reveal,
  .reveal:is(.news,.about,.about-reverse,.grid > div.card) > img,
  .reveal :is(.news-text,.about-text,.about-text-reverse) > *,
  .grid > div.card.reveal > :is(p,h2) {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .carousel-layer, .carousel-layer::before, nav a, footer a, .show-hide, .grid > div.card { transition: none; }
  .carousel-layer::before { transform: none; }
  .grid > div.card.is-visible:hover { transform: none; }
  nav a::after, footer a::after, .show-hide::after { transition: none; }
}

/* Page titles never depend on scroll-observer visibility. */
body > h1 {
  animation: heading-enter 1000ms var(--motion-ease) both;
}
@keyframes heading-enter {
  from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 24px; }
  to { opacity: 1; clip-path: inset(0); translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  body > h1 { animation: none; }
}