/* -------------------------------------------------
   1️⃣ SCROLL REVEAL (fade & slide)
   ------------------------------------------------- */
[data-anim]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease-out, transform .7s ease-out;
  will-change:opacity, transform;
}
[data-anim].is-visible{
  opacity:1;
  transform:none;
}

/* slide variant */
[data-anim="slide"]{
  transform:translateX(-30px);
}
[data-anim="slide"].is-visible{
  transform:translateX(0);
}

/* optional stagger – data‑anim elements can define a CSS var */
[data-anim]{
  transition-delay:calc(var(--anim-delay,0) * 0.1s);
}

/* -------------------------------------------------
   2️⃣ Typing cursor used by main.js
   ------------------------------------------------- */
.typing-cursor{
  display:inline-block;
  width:2px;
  height:1.2em;
  background:var(--c-gold);
  animation:blink 1s step-start infinite;
  margin-left:4px;
}
@keyframes blink{
  0%,50%{opacity:1;}
  51%,100%{opacity:0;}
}

/* -------------------------------------------------
   3️⃣ Respect reduced‑motion preference
   ------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  [data-anim],
  .hero__canvas,
  .hero__title,
  .hero__subtitle{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}