/* ==========================================================
   ANIMATIONS.CSS — Keyframes, reveals, motion effects
   Sanus Pharma · Editorial Light v20260526
   ========================================================== */

/* ── KEYFRAMES ───────────────────────────────────────────── */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

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

@keyframes floatYSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-18px) rotate(2deg); }
}

@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -20px) scale(1.05); }
  66%  { transform: translate(-20px, 15px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orbDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-25px, 20px) scale(1.04); }
  66%  { transform: translate(18px, -12px) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}

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

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

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes splashSafety {
  to { opacity: 0; pointer-events: none; }
}

/* ── REVEAL SYSTEM ───────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Safety: split-text elements that also have .reveal */
.reveal[data-split] {
  opacity: 1;
  transform: none;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── STAGGER DELAYS ──────────────────────────────────────── */
.stagger-1 { transition-delay: 80ms; }
.stagger-2 { transition-delay: 160ms; }
.stagger-3 { transition-delay: 240ms; }
.stagger-4 { transition-delay: 320ms; }
.stagger-5 { transition-delay: 400ms; }
.stagger-6 { transition-delay: 480ms; }
.stagger-7 { transition-delay: 560ms; }
.stagger-8 { transition-delay: 640ms; }

/* ── HERO ENTRANCE ───────────────────────────────────────── */
.hero-badge,
.hero-title,
.hero-sub,
.hero-actions,
.hero-stats {
  opacity: 0;
  animation: slideUp var(--dur-slow) var(--ease-out) forwards;
}

.hero-badge   { animation-delay: 200ms; }
.hero-title   { animation-delay: 360ms; }
.hero-sub     { animation-delay: 500ms; }
.hero-actions { animation-delay: 620ms; }
.hero-stats   { animation-delay: 740ms; }

.hero-visual {
  opacity: 0;
  animation: scaleIn var(--dur-xslow) var(--ease-out) 450ms forwards;
}

/* ── HERO ORB ANIMATIONS ─────────────────────────────────── */
.hero-orb--1 { animation: orbDrift 18s ease-in-out infinite; }
.hero-orb--2 { animation: orbDrift2 22s ease-in-out infinite; }
.hero-orb--3 { animation: orbDrift 14s ease-in-out 5s infinite; }

/* ── FLOATING ELEMENTS ───────────────────────────────────── */
.float {
  animation: floatY 5s ease-in-out infinite;
}

.float--slow {
  animation: floatYSlow 8s ease-in-out infinite;
}

.float--delay-1 { animation-delay: 0.5s; }
.float--delay-2 { animation-delay: 1s; }
.float--delay-3 { animation-delay: 1.5s; }

/* ── HERO ABOUT BADGE ────────────────────────────────────── */
.about-badge {
  animation: floatY 5s ease-in-out infinite;
  animation-delay: 0.8s;
}

/* ── SECTION NUMBER DECORATION ───────────────────────────── */
.deco-number {
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0,150,242,0.08);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* ── SCROLL PROGRESS BAR ─────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  z-index: calc(var(--z-nav) + 1);
  transition: width 80ms linear;
  box-shadow: 0 0 8px rgba(0,150,242,0.4);
}

/* ── COUNT-UP ────────────────────────────────────────────── */
[data-count-to] {
  display: inline-block;
  min-width: 2ch;
}

/* ── LINK HOVER UNDERLINE ────────────────────────────────── */
.underline-hover {
  position: relative;
  display: inline-block;
}

.underline-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--dur-med) var(--ease-out);
}

.underline-hover:hover::after {
  width: 100%;
}

/* ── GLASS BLUR CARD ─────────────────────────────────────── */
.glass {
  background: rgba(212, 240, 253, 0.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--r-lg);
}

/* Solid fallback */
@supports not (backdrop-filter: blur(20px)) {
  .glass { background: rgba(212, 240, 253, 0.9); }
}

/* ── MOUSE GRADIENT SPOTLIGHT ────────────────────────────── */
.mouse-spotlight {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,150,242,0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.12s var(--ease-out), top 0.12s var(--ease-out);
  mix-blend-mode: multiply;
}

/* ── REDUCED MOTION OVERRIDES ────────────────────────────── */
/* Only gate intrusive effects */
@media (prefers-reduced-motion: reduce) {
  .hero-orb--1,
  .hero-orb--2,
  .hero-orb--3 {
    animation: none;
  }



  .float,
  .float--slow,
  .about-badge {
    animation: none;
  }

  /* Reveals still happen — just instantly */
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    transition-duration: 0.01ms;
  }

  /* Hero entrance still plays — just faster */
  .hero-badge,
  .hero-title,
  .hero-sub,
  .hero-actions,
  .hero-stats,
  .hero-visual {
    animation-duration: 0.01ms;
  }
}