/* =====================================================================
   Option A — Editorial motion layer
   Slow, subtle, considered. Honours prefers-reduced-motion via base.css.
   ===================================================================== */

/* ---------- Slow ken-burns on hero images ---------- */

.kenburns {
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.06) translate3d(-1%, -1%, 0); }
}

/* ---------- Scroll-triggered fade-up (toggled by IO via JS) ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 900ms cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger child reveals when parent has [data-reveal-stagger] */
[data-reveal-stagger] [data-reveal] { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(1) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(1)[data-reveal] { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(2)[data-reveal] { transition-delay: 120ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(3)[data-reveal] { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(4)[data-reveal] { transition-delay: 360ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(5)[data-reveal] { transition-delay: 480ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) [data-reveal],
[data-reveal-stagger].is-visible > *:nth-child(6)[data-reveal] { transition-delay: 600ms; }

/* ---------- View Transitions (cross-page cross-fade) ---------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.16, 0.84, 0.44, 1);
}

::view-transition-old(root) {
  animation-name: vt-fade-out;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Subtle SVG grain on dark sections ---------- */

.section--inverse,
.site-footer {
  position: relative;
}
.section--inverse::after,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---------- Brand hover on nav (subtle) ---------- */

.site-nav__brand-img { transition: transform 300ms ease; }
.site-nav__brand:hover .site-nav__brand-img {
  transform: scale(1.04);
}

/* ---------- Initial page-load fade ---------- */

@keyframes page-load-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: page-load-fade 600ms ease-out both; }