/*
 * scrollReveal.css
 * Only contains styles actually used by the current scrollReveal.js.
 *
 * data-sr-words / data-sr-chars → animated entirely in JS via background-clip:text
 *                                  no CSS classes needed for those
 * data-sr-fade                  → needs .sr-fade .sr-dim .sr-lit  ← below
 * data-sr-line                  → needs .sr-line .sr-dim .sr-lit  ← below
 */

/* ══════════════════════════════════════════
   FADE MODE  (data-sr-fade)
   Whole element fades up into view.
══════════════════════════════════════════ */
.sr-fade {
  transition : opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
               transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.sr-fade.sr-dim {
  opacity   : 0;
  transform : translateY(20px);
}

.sr-fade.sr-lit {
  opacity   : 1;
  transform : translateY(0);
}

/* ══════════════════════════════════════════
   LINE MODE  (data-sr-line)
   Horizontal rule expands left to right.
══════════════════════════════════════════ */
.sr-line {
  display          : block;
  transform-origin : left center;
  transition       : transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                     opacity   1.2s ease;
  will-change      : transform;
}

.sr-line.sr-dim {
  transform : scaleX(0);
  opacity   : 0;
}

.sr-line.sr-lit {
  transform : scaleX(1);
  opacity   : 1;
}

/* ══════════════════════════════════════════
   REDUCED MOTION
   Skips all animation for users who have
   "reduce motion" enabled in their OS.
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sr-fade,
  .sr-line {
    transition : none !important;
  }
  .sr-fade.sr-dim,
  .sr-line.sr-dim {
    opacity   : 1 !important;
    transform : none !important;
  }
}


/* ScrollReveal — dim opacity for text reveal effect */
h1[data-sr-chars],
h2[data-sr-chars],
h3[data-sr-chars],
h4[data-sr-chars],
h1[data-sr-words],
h2[data-sr-words],
h3[data-sr-words],
h4[data-sr-words] {
    --sr-dim: 0.35;
}

p[data-sr-words],
div[data-sr-words] {
    --sr-dim: 0.2;
}