/* ==========================================================================
   SAHAYA EDITORIAL MOTION & ANIMATION SYSTEM
   ========================================================================== */

/* Hairline Draw Animation */
@keyframes drawLine {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.hairline-draw {
  animation: drawLine var(--duration-story) var(--ease-editorial) forwards;
  transform-origin: left center;
}

/* Hotspot Pin Pulse */
@keyframes pinPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.25;
  }
}

.pin-pulse {
  transform-origin: center;
  animation: pinPulse 2800ms infinite ease-in-out;
}

/* Steam Float Animation */
@keyframes steamFloat {
  0% {
    transform: translateY(0) scaleX(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-4px) scaleX(1.1);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-8px) scaleX(0.9);
    opacity: 0;
  }
}

.steam-path {
  animation: steamFloat 3200ms infinite linear;
  transform-origin: bottom center;
}

/* Headline Line Mask Reveal */
.hero-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: heroLineReveal 800ms cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

.hero-line:nth-child(1) {
  animation-delay: 100ms;
}

.hero-line:nth-child(2) {
  animation-delay: 240ms;
}

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

/* Crosshair Icon Subtle Rotation */
.crosshair-icon {
  display: inline-block;
  font-size: 1rem;
  transition: transform 300ms ease;
}

.interactive-prompt-badge:hover .crosshair-icon {
  transform: rotate(90deg);
}

/* Reduced Motion Safety Override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .hero-line {
    opacity: 1 !important;
    transform: none !important;
  }

  .pin-pulse {
    animation: none !important;
    transform: scale(1) !important;
    opacity: 0.2 !important;
  }

  .steam-path {
    animation: none !important;
    opacity: 0.5 !important;
  }
}