/* ══════════════════════════════════════════
   VCA — Animations
   Keyframes, reveal observer hooks, slide transitions.
══════════════════════════════════════════ */

/* ── Scroll reveal (driven by IntersectionObserver in main.js) ── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.up { opacity:1; transform:none; }
.d1 { transition-delay:.10s; }
.d2 { transition-delay:.20s; }
.d3 { transition-delay:.30s; }
.d4 { transition-delay:.42s; }

/* ── Hero slide cross-fade ── */
.slide { transition: opacity 1.8s ease-in-out; }

/* ── Project card float ── */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ── Snake border trace (.pcard-wrap:hover .pcard-snake-svg rect) ── */
@keyframes snakeTrace {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -10000; }
}

/* ── Hero headline reading marker ──
   A thin vertical light-cobalt line on the left side of the headline draws
   top → bottom, then fades out fast. Cycle repeats every 5s. */
.hero-h1::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--blue-lt);
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  animation: hero-h1-marker 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-h1-marker {
  0%   { transform: scaleY(0); opacity: 0; }       /* hidden */
  1%   { transform: scaleY(0); opacity: 0.45; }    /* appear, light */
  60%  { transform: scaleY(1); opacity: 0.45; }    /* drawn top→bottom (~3s) */
  68%  { transform: scaleY(1); opacity: 0; }       /* fade fast (~0.4s) */
  100% { transform: scaleY(0); opacity: 0; }       /* invisible until next cycle */
}