:root { --vh: 1vh; }

/* ===========================
   Global Page Fade-In
   =========================== */
html {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
}

html.page-loaded {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ===========================
   Global Reveal Animations
   =========================== */

.reveal {
  --tx: 0;
  --ty: 24px;
  --dur: .3s;
  --ease: ease;
  --delay: 0s;

  opacity: 0;
  transform: translate3d(var(--tx), var(--ty), 0);
  transition:
    opacity var(--dur) var(--ease) var(--delay),
    transform var(--dur) var(--ease) var(--delay);
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.reveal-fade {
    opacity: 0;
    transform: scale(.98);
}

.reveal-fade.reveal-visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity .6s ease-out, transform .6s ease-out;
}

/* Directions */
.reveal-up    { --tx: 0;    --ty: 24px; }
.reveal-down  { --tx: 0;    --ty: -24px; }
.reveal-left  { --tx: 24px; --ty: 0; }
.reveal-right { --tx: -24px; --ty: 0; }

/* Speed variations */
.reveal-fast  { --dur:.4s; }
.reveal-slow  { --dur:.9s; }

/* Manual Delays */
.reveal-delay-1 { --delay:.05s; }
.reveal-delay-2 { --delay:.30s; }
.reveal-delay-3 { --delay:.45s; }
.reveal-delay-4 { --delay:.60s; }
.reveal-delay-5 { --delay:.75s; }

/* Stagger (direct children) */
.reveal-stagger > .reveal                 { --delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2)    { --delay: 120ms; }
.reveal-stagger > .reveal:nth-child(3)    { --delay: 240ms; }
.reveal-stagger > .reveal:nth-child(4)    { --delay: 360ms; }
.reveal-stagger > .reveal:nth-child(5)    { --delay: 480ms; }
.reveal-stagger > .reveal:nth-child(6)    { --delay: 600ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}