/* ==========================================================================
   Phrane — animations.css
   Keyframes, scroll-reveal system, staggered entrances, and page transitions.
   All motion is disabled for users who prefer reduced motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 2%); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

@keyframes scroll-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

@keyframes hero-kenburns {
  0% { transform: scale(1.08) translate(0, 0); }
  100% { transform: scale(1.16) translate(-1.5%, -2%); }
}

@keyframes transition-in {
  0% { transform: translateY(-100%); visibility: visible; }
  100% { transform: translateY(0); visibility: visible; }
}
@keyframes transition-out {
  0% { transform: translateY(0); visibility: visible; }
  100% { transform: translateY(100%); visibility: hidden; }
}

/* The wordmark fades in while the overlay sweeps over the page. */
.page-transition__mark {
  transition: opacity 0.3s var(--ease);
}
.page-transition.is-leaving .page-transition__mark {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Scroll reveal (gated behind `html.js` so content is visible without JS)
   -------------------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Variants */
[data-reveal="left"] {
  transform: translateX(-40px);
}
[data-reveal="right"] {
  transform: translateX(40px);
}
[data-reveal="fade"] {
  transform: none;
}
[data-reveal="scale"] {
  transform: scale(0.96);
}
[data-reveal].is-revealed {
  transform: none;
}

/* Staggered entrance for the homepage hero (driven by JS-added classes) */
html.js .hero [data-reveal] {
  transform: translateY(28px);
}
html.js .hero.is-entered [data-reveal] {
  opacity: 1;
  transform: none;
}
.hero__title [data-reveal] {
  transition-delay: 0s;
}

/* Line-mask reveal for display headings */
html.js .mask-reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
html.js .mask-reveal > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
html.js .mask-reveal.is-revealed > span {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Menu stagger (items animate in when `.menu.is-open` is set)
   -------------------------------------------------------------------------- */
.menu__item {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.menu.is-open .menu__item {
  transform: translateY(0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Lightbox / viewer entrance
   -------------------------------------------------------------------------- */
.lightbox__img.is-swapping,
.video-viewer__video.is-swapping,
.video-viewer__poster.is-swapping {
  animation: media-in 0.5s var(--ease) both;
}
@keyframes media-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js [data-reveal],
  .menu__item {
    opacity: 1 !important;
    transform: none !important;
  }
  .grain {
    animation: none;
  }
}