/* ============================================
   BASALT BIO — ANIMATIONS.CSS
   ============================================ */

/* ---- Fade + rise on scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms var(--bb-ease-out), transform 900ms var(--bb-ease-out);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"].in { transition-delay: 80ms; }
.reveal[data-delay="2"].in { transition-delay: 160ms; }
.reveal[data-delay="3"].in { transition-delay: 240ms; }
.reveal[data-delay="4"].in { transition-delay: 320ms; }
.reveal[data-delay="5"].in { transition-delay: 400ms; }
.reveal[data-delay="6"].in { transition-delay: 480ms; }

/* ---- Page load entrance stagger ---- */
@keyframes bb-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__eyebrow,
.hero__title-1,
.hero__title-2,
.hero__sub,
.hero__actions,
.hero__scrollhint {
  animation: bb-rise 900ms var(--bb-ease-out) both;
}
.hero__eyebrow     { animation-delay: 100ms; }
.hero__title-1     { animation-delay: 250ms; }
.hero__title-2     { animation-delay: 400ms; }
.hero__sub         { animation-delay: 600ms; }
.hero__actions     { animation-delay: 750ms; }
.hero__scrollhint  { animation-delay: 1100ms; animation-duration: 1200ms; }

/* ---- Volcanic crack draw-in (hero accent) ---- */
@keyframes bb-crack {
  from { stroke-dashoffset: 600; opacity: 0; }
  to   { stroke-dashoffset: 0;   opacity: 0.6; }
}
.hero__crack path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: bb-crack 2200ms var(--bb-ease-out) 700ms forwards;
}

/* ---- Ember pulse (scroll hint arrow) ---- */
@keyframes bb-ember {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(6px); }
}
.scrollhint__arrow {
  animation: bb-ember 2400ms var(--bb-ease) infinite;
}

/* ---- Grain texture drift (hero overlay) ---- */
@keyframes bb-grain-shift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2%, 1%); }
  50%      { transform: translate(1%, -2%); }
  75%      { transform: translate(-1%, -1%); }
}

.hero__grain {
  animation: bb-grain-shift 12s var(--bb-ease) infinite;
}

/* ---- Marquee / ticker (if used) ---- */
@keyframes bb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Respect 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 { opacity: 1; transform: none; }
}