/* =========================================================
   KEYS99 - ANIMATIONS (animation/animation.css)

   Scroll-reveal effects for any page. An element animates in
   when it has data-anim="<effect>" - set by hand in the HTML,
   or by a rule in animation/<page>.js (see README.md).

   Nothing is hidden unless the page opted in with the tiny
   <script> in its <head> that adds .anim-on to <html>, so a
   page without it, or without JavaScript, shows normally.
   If animation.js fails to run, a failsafe shows everything
   after 4 seconds.
========================================================= */

:root{
  --anim-duration:.7s;
  --anim-ease:cubic-bezier(.22,.7,.2,1);
  --anim-distance:28px;
}

/* ---------- starting state (hidden until .is-in) ---------- */

html.anim-on [data-anim]{
  opacity:0;
  transition:
    opacity var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease),
    filter var(--anim-duration) var(--anim-ease);
  transition-delay:var(--anim-delay, 0ms);
  will-change:opacity, transform;
}

html.anim-on [data-anim="fade-up"]   { transform:translateY(var(--anim-distance)); }
html.anim-on [data-anim="fade-down"] { transform:translateY(calc(var(--anim-distance) * -1)); }
html.anim-on [data-anim="fade-left"] { transform:translateX(var(--anim-distance)); }
html.anim-on [data-anim="fade-right"]{ transform:translateX(calc(var(--anim-distance) * -1)); }
html.anim-on [data-anim="zoom-in"]   { transform:scale(.92); }
html.anim-on [data-anim="zoom-out"]  { transform:scale(1.08); }
html.anim-on [data-anim="blur-in"]   { filter:blur(10px); transform:scale(.98); }
/* data-anim="fade" needs no transform. */

/* ---------- shown ---------- */

html.anim-on [data-anim].is-in{
  opacity:1;
  transform:none;
  filter:none;
  will-change:auto;
}

/* ---------- safety nets ---------- */

/* animation.js never ran: show everything after 4 seconds. */
@keyframes anim-failsafe{ to{ opacity:1; transform:none; filter:none; } }
html.anim-on:not(.anim-active) [data-anim]{
  animation:anim-failsafe 0s linear 4s forwards;
}

/* Visitors who ask for less motion get the page without it. */
@media (prefers-reduced-motion:reduce){
  html.anim-on [data-anim]{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}