/* ==========================================================================
   CAPS4CANCER — Animations
   Keyframes and motion-only classes. Kept separate from layout/style.
   ========================================================================== */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Hero entrance sequence — staggered via animation-delay set inline per element */
.hero__eyebrow,
.hero__title span,
.hero__subtitle,
.hero__actions {
  animation: slideUp 1s var(--ease-out) both;
}
.hero__eyebrow      { animation-delay: 0.1s; }
.hero__title span:nth-child(1) { animation-delay: 0.22s; }
.hero__title span:nth-child(2) { animation-delay: 0.34s; }
.hero__title span:nth-child(3) { animation-delay: 0.46s; }
.hero__subtitle     { animation-delay: 0.6s; }
.hero__actions       { animation-delay: 0.74s; }

.nav {
  animation: fadeIn 1s var(--ease-out) 0.2s both;
}

/* Signature drawn-line element (cap silhouette outline) */
.draw-path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 1.8s var(--ease-out);
}
.is-visible .draw-path { stroke-dashoffset: 0; }

/* Parallax layers — transform set dynamically in JS via CSS var */
[data-parallax] {
  transform: translateY(calc(var(--parallax-y, 0) * 1px));
  will-change: transform;
}

/* Card hover lift */
.card { transform: translateY(0); transition: transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
.card:hover { transform: translateY(-4px); }

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero__title span, .hero__subtitle, .hero__actions, .nav {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-parallax] { transform: none !important; }
}