/* ─────────────────────────────────────────────
   animations.css — Motion & Scroll Reveals
   Sections:
     1. Scroll Reveal (fade + lift)
     2. Project Card Reveal (fade only — avoids
        conflicting with hover transform)
     3. Keyframes
     4. Reduced Motion Override
──────────────────────────────────────────────── */


/* ══ 1. Scroll Reveal ══ */

/* Text elements, headers, section content */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sidebar / photo slide in from right */
.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}


/* ══ 2. Project Card Reveal ══ */

/*
  Cards use opacity-only reveal so that hover's
  translateY(-4px) transition stays crisp and fast.
  The transform and box-shadow transitions are
  defined in main.css and remain unaffected.
*/
.project-card {
  opacity: 0;
  transition:
    opacity 0.50s var(--ease-out),
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

.project-card.is-visible {
  opacity: 1;
}


/* ══ 3. Keyframes ══ */

@keyframes scrollLine {
  0%   { top: -100%; }
  100% { top:  200%; }
}


/* ══ 4. Reduced Motion ══ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-right,
  .project-card {
    opacity: 1;
    transform: none;
  }
}