/** Voltify entrance animations — paired with voltify-animations.js.
 *
 * FAIL-SAFE: content is hidden ONLY under html.js-anim, which a one-line inline script in _Layout's
 * <head> sets — so with JavaScript off nothing is ever hidden. If voltify-animations.js does not take
 * over (it failed to load, or threw before its observer answered), the fallback animation below fades
 * everything in after 1 s. The script cancels the fallback by adding html.anim-ready.
 * Never hide content any other way: a reveal that does not fire must not cost the page its text.
 */

.animate-fade-up {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-fade-in {
  transition: opacity 0.6s ease;
}

.js-anim .animate-fade-up:not(.is-visible) {
  opacity: 0;
  transform: translateY(30px);
}

.js-anim .animate-fade-in:not(.is-visible) {
  opacity: 0;
}

/* The fallback: shown after 1 s anyway, unless the script is in charge. */
.js-anim:not(.anim-ready) .animate-fade-up:not(.is-visible),
.js-anim:not(.anim-ready) .animate-fade-in:not(.is-visible) {
  animation: voltify-reveal-fallback 0.45s ease 1s forwards;
}

@keyframes voltify-reveal-fallback {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Shorter, subtler motion on small screens */
@media (max-width: 749px) {
  .js-anim .animate-fade-up:not(.is-visible) {
    transform: translateY(16px);
  }

  .animate-fade-up {
    transition-duration: 0.45s, 0.45s;
  }

  .animate-fade-in {
    transition-duration: 0.45s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .animate-fade-in,
  .js-anim .animate-fade-up:not(.is-visible),
  .js-anim .animate-fade-in:not(.is-visible),
  .js-anim:not(.anim-ready) .animate-fade-up:not(.is-visible),
  .js-anim:not(.anim-ready) .animate-fade-in:not(.is-visible) {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
}