/* ============================================================
   motion.css  -  REVEAL ANIMATIONS

   Nikita: this file controls how text and images "appear" as
   the user scrolls down the page. The pattern works like this:

   1. Every element starts fully visible (so if JavaScript fails
      to load, all the copy is still there).
   2. When JavaScript runs, an IntersectionObserver watches for
      elements entering the viewport. When one comes into view,
      JS adds the class .is-visible to it.
   3. The CSS animations below run only when .is-visible is
      present. They play from a hidden start state to the visible
      end state, creating the "rise in" effect.

   Three reveal classes are used in the HTML:
   - .r-fade   small upward slide, soft fade
   - .r-rise   bigger upward slide, used for headlines
   - .r-split  splits text into individual characters that
               animate in one after another (used on the hero)

   IMPORTANT: if you ever need to remove all motion (for example,
   debugging a layout issue), you can do it by deleting this
   file entirely. The page still renders correctly because the
   default state of every reveal class is visible.
============================================================ */

/* The hidden starting state for each animation. Defined as keyframes
   so the animation only runs when triggered, not on page load. */
@keyframes r-fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes r-rise-in {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes r-char-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Default state: visible. If JS never runs, the page still shows
   all of its content. This is the "progressive enhancement" rule. */
.r-fade,
.r-rise,
.r-split { opacity: 1; transform: none; }

/* Splitting.js wraps every character in a <span class="char">.
   inline-block lets each char move independently. */
.r-split .char { display: inline-block; }

/* When the element comes into view, JS adds .is-visible. The
   animation runs once (the "both" keyword keeps the final state). */
.r-fade.is-visible { animation: r-fade-in 0.9s var(--ease-out) both; }
.r-rise.is-visible { animation: r-rise-in 0.9s var(--ease-out) both; }

/* Characters animate in one by one. --char-index is set by JS
   so each character delays slightly longer than the one before it. */
.r-split.is-visible .char {
  animation: r-char-in 0.7s var(--ease-out) both;
  animation-delay: calc(var(--char-index, 0) * 16ms);
}

/* REDUCED MOTION
   If the user's device has "reduce motion" enabled (an
   accessibility setting), turn off the reveal animations.
   Content still appears, just without movement. */
@media (prefers-reduced-motion: reduce) {
  .r-fade.is-visible,
  .r-rise.is-visible,
  .r-split.is-visible .char {
    animation: none !important;
  }
  .page-loader { transition: none !important; }
}