/* ─────────────────────────────────────────────
   DM Israel — Animation System
   Design principles: animations.dev (Emil Kowalski)
───────────────────────────────────────────── */

/* ── Easing token ── */
:root {
  --anim-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ══════════════════════════════════════════
   SCROLL REVEAL
   Elements hidden by default when JS is ready.
   .visible class added by IntersectionObserver.
══════════════════════════════════════════ */

/* Single element reveal */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity  480ms var(--anim-ease),
    transform 480ms var(--anim-ease);
}

.js [data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger grid — children animate in sequence */
/* Delays are set via JS inline style and cleared after reveal completes,
   so hover interactions are never delayed. box-shadow included so hover
   upgrade (same specificity = last-write wins) actually takes effect. */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity    400ms var(--anim-ease),
    transform  220ms var(--anim-ease),
    box-shadow 220ms var(--anim-ease);
}

.js [data-stagger].visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════
   HERO ENTRANCE
   CSS keyframe animation — no JS needed.
   Add class + style="animation-delay:Xms" in HTML.
══════════════════════════════════════════ */

/* index.html hero: added directly in HTML so CSS animation fires before first paint */
.hero-enter {
  opacity: 0;
  transform: translateY(14px);
  animation: heroEnter 580ms var(--anim-ease) forwards;
}

@keyframes heroEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Inner page heroes: JS adds this class — start at 0.9 opacity so
   the flash from painted→class-added is imperceptible (10% drop vs 100%) */
.page-hero-enter {
  opacity: 0.9;
  transform: translateY(10px);
  animation: pageHeroEnter 520ms var(--anim-ease) forwards;
}

@keyframes pageHeroEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════
   HOVER EASING UPGRADE
   These rules load after the inline <style> block,
   so same-specificity rules here win the cascade.
   Replaces generic "ease" with the strong ease-out.
══════════════════════════════════════════ */

/* Card hover — prefixed with .js to reach specificity (0,2,0) and beat
   the stagger rule. Without this, stagger overrides transform/box-shadow speed. */
.js .intro-card,
.js .type-card,
.js .subtype-card,
.js .sym-card,
.js .gene-card,
.js .diag-item,
.js .treat-card,
.js .prog-card,
.js .contact-card,
.js .about-card,
.js .right-card,
.js .ql-card,
.js .r-card,
.js .dna-intro-block,
.js .research-box,
.js .note-pair .note-box {
  transition:
    transform  220ms var(--anim-ease),
    box-shadow 220ms var(--anim-ease);
}

/* Press feedback — scale(0.97) on click */
/* Nothing in real UI disappears/shrinks dramatically; subtle 3% is right */
@media (hover: hover) and (pointer: fine) {
  .intro-card:active,
  .type-card:active,
  .ql-card:active,
  .about-card:active,
  .right-card:active,
  .r-card:active,
  .gene-card:active,
  .treat-card:active,
  .contact-card:active {
    transform: scale(0.97) translateY(0);
  }
}

/* Jump nav pills — add transform to existing transition */
.jump-nav a {
  transition:
    background    150ms var(--anim-ease),
    color         150ms var(--anim-ease),
    border-color  150ms var(--anim-ease),
    transform     120ms var(--anim-ease);
}

.jump-nav a:active {
  transform: scale(0.93);
}

/* ══════════════════════════════════════════
   REDUCED MOTION
   Disable transforms, keep opacity (aids comprehension).
══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-enter,
  .page-hero-enter {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .intro-card:active,
  .type-card:active,
  .ql-card:active,
  .about-card:active,
  .right-card:active,
  .r-card:active,
  .gene-card:active,
  .treat-card:active,
  .contact-card:active,
  .jump-nav a:active {
    transform: none;
  }
}