/* ============================================================
   ONDORA.PT — Animation Styles
   All keyframes, scroll reveals, mesh background,
   hero stagger, map pulses, and motion preferences.
   ============================================================ */

/* ------------------------------------------------------------
   1. KEYFRAME ANIMATIONS
   ------------------------------------------------------------ */

@keyframes meshFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.6;  transform: scale(1.8); }
}

@keyframes linePulse {
  0%, 100% { opacity: 0.03; }
  50%      { opacity: 0.12; }
}

@keyframes logoGlow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.5; }
}

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

@keyframes badgePulse {
  0%, 100% {
    opacity: 0.4;
    box-shadow: none;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 8px 2px rgba(0, 212, 170, 0.2);
  }
}

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

@keyframes radioPulse {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

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

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

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}


@keyframes sosPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.2); }
  50%      { box-shadow: 0 0 40px rgba(255, 0, 0, 0.5); }
}

@keyframes sosTravel {
  0%   { offset-distance: 0%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}

@keyframes checkPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

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

@keyframes userLocationPulse {
  0%   { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(66, 133, 244, 0); }
  100% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0); }
}


/* ------------------------------------------------------------
   2. MESH BACKGROUND
   ------------------------------------------------------------ */

.mesh-bg {
  opacity: 0;
  animation: meshFadeIn 3s ease 0.5s forwards;
}

/* Individual mesh nodes */
.mesh-node {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-teal);
  animation: nodePulse 4s infinite;
}

.mesh-node::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 170, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

/* 24 mesh-node positions and animation delays */
.mesh-node:nth-child(1)  { top: 8%;  left: 5%;  animation-delay: 0s; }
.mesh-node:nth-child(2)  { top: 12%; left: 18%; animation-delay: 0.4s; }
.mesh-node:nth-child(3)  { top: 5%;  left: 32%; animation-delay: 0.8s; }
.mesh-node:nth-child(4)  { top: 15%; left: 45%; animation-delay: 1.2s; }
.mesh-node:nth-child(5)  { top: 8%;  left: 60%; animation-delay: 0.2s; }
.mesh-node:nth-child(6)  { top: 18%; left: 72%; animation-delay: 0.6s; }
.mesh-node:nth-child(7)  { top: 6%;  left: 85%; animation-delay: 1.0s; }
.mesh-node:nth-child(8)  { top: 14%; left: 93%; animation-delay: 1.4s; }
.mesh-node:nth-child(9)  { top: 30%; left: 3%;  animation-delay: 0.3s; }
.mesh-node:nth-child(10) { top: 35%; left: 22%; animation-delay: 0.7s; }
.mesh-node:nth-child(11) { top: 28%; left: 40%; animation-delay: 1.1s; }
.mesh-node:nth-child(12) { top: 38%; left: 55%; animation-delay: 0.5s; }
.mesh-node:nth-child(13) { top: 32%; left: 68%; animation-delay: 0.9s; }
.mesh-node:nth-child(14) { top: 40%; left: 82%; animation-delay: 1.3s; }
.mesh-node:nth-child(15) { top: 33%; left: 95%; animation-delay: 0.1s; }
.mesh-node:nth-child(16) { top: 55%; left: 8%;  animation-delay: 0.6s; }
.mesh-node:nth-child(17) { top: 60%; left: 25%; animation-delay: 1.0s; }
.mesh-node:nth-child(18) { top: 52%; left: 42%; animation-delay: 0.2s; }
.mesh-node:nth-child(19) { top: 62%; left: 58%; animation-delay: 0.8s; }
.mesh-node:nth-child(20) { top: 55%; left: 75%; animation-delay: 1.2s; }
.mesh-node:nth-child(21) { top: 65%; left: 90%; animation-delay: 0.4s; }
.mesh-node:nth-child(22) { top: 78%; left: 12%; animation-delay: 0.9s; }
.mesh-node:nth-child(23) { top: 82%; left: 50%; animation-delay: 0.3s; }
.mesh-node:nth-child(24) { top: 80%; left: 88%; animation-delay: 1.1s; }

/* SVG connecting lines */
.mesh-lines line {
  stroke: var(--accent-teal);
  stroke-width: 0.5;
  animation: linePulse 6s infinite;
}


/* ------------------------------------------------------------
   3. HERO ANIMATIONS  (staggered reveal)
   ------------------------------------------------------------ */

.hero .logo-container {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: heroReveal 1.2s var(--ease-out) 0.3s forwards;
}

.hero .logo-container::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 170, 0.15) 0%, transparent 70%);
  animation: logoGlow 4s infinite 1.5s;
  pointer-events: none;
}

.hero-headline,
.hero-subtitle,
.hero-cta {
  opacity: 0;
  transform: translateY(16px);
}

.hero-headline {
  animation: heroReveal 1s var(--ease-out) 0.6s forwards;
}

.hero-subtitle {
  animation: heroReveal 1s var(--ease-out) 0.85s forwards;
}

.hero-cta {
  animation: heroReveal 1s var(--ease-out) 1.1s forwards;
}


/* ------------------------------------------------------------
   4. SCROLL REVEAL SYSTEM
   ------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants */
[data-reveal="left"] {
  transform: translateX(-30px);
}

[data-reveal="left"].revealed {
  transform: translateX(0);
}

[data-reveal="right"] {
  transform: translateX(30px);
}

[data-reveal="right"].revealed {
  transform: translateX(0);
}

[data-reveal="scale"] {
  transform: scale(0.95);
}

[data-reveal="scale"].revealed {
  transform: scale(1);
}

/* Stagger delays */
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }


/* ------------------------------------------------------------
   5. EMERGENCY SCROLL STORY TRANSITIONS
   ------------------------------------------------------------ */

.scroll-story-act {
  opacity: 0;
  transition: opacity 0.8s;
}

.scroll-story-act.active {
  opacity: 1;
}

/* Act I — Normalcy: warm amber overlay */
.act-normalcy {
  position: relative;
}

.act-normalcy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 193, 68, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  transition: opacity 0.8s;
}

/* Act II — Crisis: dark overlay fading in */
.act-crisis {
  position: relative;
}

.act-crisis::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(220, 38, 38, 0.06) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.act-crisis.active::before {
  opacity: 1;
}

.act-crisis svg * {
  transition: opacity 0.6s ease, fill 0.6s ease, stroke 0.6s ease;
}

/* Act III — Awakening: teal glow expanding */
.act-awakening {
  position: relative;
}

.act-awakening::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 212, 170, 0.08) 0%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.act-awakening.active::before {
  opacity: 1;
  transform: scale(1);
}


/* ------------------------------------------------------------
   6. MAP ANIMATIONS
   ------------------------------------------------------------ */

/* Radio-wave pulse around active map nodes */
.map-node-pulse {
  animation: radioPulse 2s ease-out infinite;
}

/* Animated connection lines between nodes */
.map-connection-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dashMove 1s forwards;
}

/* Data packet travelling along paths */
.map-message-packet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  fill: var(--accent-teal);
  filter: drop-shadow(0 0 4px rgba(0, 212, 170, 0.6));
}


/* ------------------------------------------------------------
   7. COMPARISON PANEL ANIMATIONS
   ------------------------------------------------------------ */

/* Animated signal waves inside comparison panels */
.comparison-signal {
  position: relative;
  overflow: hidden;
}

.comparison-signal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.04) 8px,
    rgba(255, 255, 255, 0.04) 9px
  );
  animation: float 3s ease-in-out infinite;
  pointer-events: none;
}

/* Failure indicator — red X with scale-in */
.comparison-fail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-red, #dc2626);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.comparison-fail.visible {
  opacity: 1;
  transform: scale(1);
}

/* Success indicator — green/teal check with scale-in */
.comparison-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-teal);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.comparison-success.visible {
  opacity: 1;
  transform: scale(1);
}


/* ------------------------------------------------------------
   8. COUNTER ANIMATION
   ------------------------------------------------------------ */

.counter-animated {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(8px);
  transition:
    opacity 0.6s ease,
    filter 0.6s ease,
    transform 0.6s ease;
}

.counter-animated.counted {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}


/* ------------------------------------------------------------
   9. REDUCED MOTION PREFERENCES
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero .logo-container,
  .hero-headline,
  .hero-subtitle,
  .hero-cta {
    opacity: 1;
    transform: none;
  }

  .sos-step {
    opacity: 1;
    transform: none;
  }

  .sos-btn-demo {
    animation: none;
  }
}