/* ============================================================
   OVERSLEP.PT — ANIMATIONS
   All animations respect prefers-reduced-motion.
   ============================================================ */

/* ─── KEYFRAMES ──────────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.7); }
}

@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

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

@keyframes slide-up {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-left {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* panel-in: scale from 0.97 so the panel doesn't appear from nothing */
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes panel-tab-switch {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

/* ─── SCROLL-TRIGGERED REVEAL (data-aos) ─────────────────── */
/*
  400ms at strong ease-out feels faster than 600ms at generic ease,
  because the initial movement is immediate — the moment users watch most.
  Start from translateY(16px) not 28px: less theatrical, more refined.
*/
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
[data-aos="fade-up"]    { transform: translateY(16px); }
[data-aos="fade-down"]  { transform: translateY(-12px); }
[data-aos="fade-right"] { transform: translateX(-16px); }
[data-aos="fade-left"]  { transform: translateX(16px); }
[data-aos].aos-animate  { opacity: 1; transform: none; }

/* Stagger: keep under 270ms — long stagger makes the page feel slow */
[data-aos-delay="80"]  { transition-delay: 50ms; }
[data-aos-delay="100"] { transition-delay: 70ms; }
[data-aos-delay="160"] { transition-delay: 100ms; }
[data-aos-delay="200"] { transition-delay: 130ms; }
[data-aos-delay="240"] { transition-delay: 160ms; }
[data-aos-delay="300"] { transition-delay: 200ms; }
[data-aos-delay="320"] { transition-delay: 220ms; }
[data-aos-delay="400"] { transition-delay: 270ms; }

/* ─── COMPONENT ANIMATIONS ───────────────────────────────── */

/* Spinner — slightly faster = perceived faster loading */
.btn-spinner { animation: spin 0.65s linear infinite; }

/* Hero chip dot */
.hero-chip__dot { animation: pulse-dot 2s ease-in-out infinite; }

/* Scroll line */
.scroll-indicator__line { animation: scroll-line 1.8s ease-in-out infinite; }

/* Pain card active indicator */
.pain-card.is-active .pain-card__icon svg {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Process step icon glow — guard hover: hover so touch devices don't trigger */
@media (hover: hover) and (pointer: fine) {
  .process-step:hover .process-step__icon {
    box-shadow: 0 0 20px rgba(79,110,247,0.3);
  }
}

/* Gradient border (decorative elements) */
.gradient-border { position: relative; }
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-primary);
  background-size: 200% 200%;
  animation: border-flow 4s ease infinite;
  z-index: -1;
}

/* Section label line — quick, punchy */
.section-label::before {
  animation: none;
  transition: width 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.section-label:hover::before { width: 32px; }

/* Float (decorative) */
.float         { animation: float 4s ease-in-out infinite; }
.float-delayed { animation: float 4s ease-in-out 1s infinite; }

/* ─── REDUCED MOTION ─────────────────────────────────────── */
/*
  Reduced motion = fewer and gentler animations, not zero.
  Opacity transitions that aid comprehension stay; movement goes.
*/
@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;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-canvas { display: none; }
  .scroll-indicator { display: none; }
  .hero-chip__dot { animation: none; }
  .btn-spinner { animation: spin 1.5s linear infinite; }
}