/* ============================================================
   ANIMATIONS.CSS — Scroll-triggered & UI animations
   ============================================================ */

/* ---- KEYFRAMES ------------------------------------------- */

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

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

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,180,200,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(232,180,200,0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- HERO ANIMATIONS (on page load) ---------------------- */
.hero-badge    { animation: heroLoad 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.hero h1       { animation: heroLoad 0.8s cubic-bezier(0.16,1,0.3,1) 0.38s both; }
.hero-desc     { animation: heroLoad 0.8s cubic-bezier(0.16,1,0.3,1) 0.52s both; }
.hero-ctas     { animation: heroLoad 0.8s cubic-bezier(0.16,1,0.3,1) 0.66s both; }
.hero-scroll-indicator { animation: heroLoad 0.8s cubic-bezier(0.16,1,0.3,1) 1s both; }

/* ---- SCROLL ANIMATIONS -----------------------------------
   Initial states are set by JS (not CSS) to avoid hiding
   content when JS fails. JS adds class 'will-animate' to
   set the hidden state, then 'animated' to reveal it.
   -------------------------------------------------------- */

/* will-animate = hidden, waiting to enter viewport */
.will-animate {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}

.will-animate.fade-up    { transform: translateY(40px); }
.will-animate.fade-left  { transform: translateX(48px); }
.will-animate.fade-right { transform: translateX(-48px); }
.will-animate.scale-in   { transform: scale(0.92); }

/* animated = visible */
.will-animate.animated {
  opacity: 1;
  transform: none;
}

/* Stagger delays (applied to children of [data-stagger]) */
[data-stagger] .will-animate:nth-child(1) { transition-delay: 0ms; }
[data-stagger] .will-animate:nth-child(2) { transition-delay: 100ms; }
[data-stagger] .will-animate:nth-child(3) { transition-delay: 200ms; }
[data-stagger] .will-animate:nth-child(4) { transition-delay: 300ms; }
[data-stagger] .will-animate:nth-child(5) { transition-delay: 400ms; }
[data-stagger] .will-animate:nth-child(6) { transition-delay: 500ms; }

/* Extra delay override via [data-delay] attribute */
[data-delay="100"] { transition-delay: 100ms !important; }
[data-delay="200"] { transition-delay: 200ms !important; }
[data-delay="300"] { transition-delay: 300ms !important; }
[data-delay="400"] { transition-delay: 400ms !important; }
[data-delay="500"] { transition-delay: 500ms !important; }

/* ---- DECORATIVE LINE ------------------------------------- */
.deco-line {
  display: block;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.16,1,0.3,1);
  margin: 20px 0;
  width: 60px;
}
.deco-line.animated { transform: scaleX(1); }

/* ---- PULSE DOT ------------------------------------------- */
.pulse-dot {
  animation: pulseDot 2.2s ease-in-out infinite;
}

/* ---- HOVER LIFT ------------------------------------------ */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(26,39,68,0.16);
}

/* ---- REDUCED MOTION -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .will-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .deco-line { transform: scaleX(1); }
  .hero-badge, .hero h1, .hero-desc,
  .hero-ctas, .hero-scroll-indicator { animation: none; opacity: 1; }
  .pulse-dot { animation: none; }
}