@charset "UTF-8";
/* ===========================================
   SCROLL REVEAL
   =========================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }
.reveal[data-delay="6"] { transition-delay: 480ms; }

/* ===========================================
   HERO ENTRANCE
   =========================================== */

.hero-enter {
  opacity: 0;
}
.hero-enter--left  { transform: translateX(-30px); }
.hero-enter--right { transform: translateX(30px) translateY(10px); }
.hero-enter--up    { transform: translateY(20px) scale(0.96); }

.hero-enter.is-loaded {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.hero-enter.is-loaded[data-delay="1"] { transition-delay: 100ms; }
.hero-enter.is-loaded[data-delay="2"] { transition-delay: 200ms; }
.hero-enter.is-loaded[data-delay="3"] { transition-delay: 300ms; }
.hero-enter.is-loaded[data-delay="4"] { transition-delay: 400ms; }
.hero-enter.is-loaded[data-delay="5"] { transition-delay: 500ms; }
.hero-enter.is-loaded[data-delay="6"] { transition-delay: 700ms; }
.hero-enter.is-loaded[data-delay="7"] { transition-delay: 900ms; }
.hero-enter.is-loaded[data-delay="8"] { transition-delay: 1100ms; }

/* ===========================================
   DEVICE FLOAT
   =========================================== */

@keyframes device-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.device-float { animation: device-float 4s var(--ease-out) infinite; }

/* ===========================================
   GLOW PULSE
   =========================================== */

@keyframes glow-pulse {
  0%, 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: .6; transform: translate(-50%,-50%) scale(1.08); }
}
.glow-pulse { animation: glow-pulse 4s ease-in-out infinite; }

/* ===========================================
   MARQUEE SCROLL
   =========================================== */

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee__track {
  animation: marquee-scroll 30s linear infinite;
}

.marquee--enterprise .marquee__track {
  animation-duration: 42s;
}

/* ===========================================
   DOT PULSE (Live indicator)
   =========================================== */

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.dot-pulse { animation: dot-pulse 2s ease-in-out infinite; }

/* ===========================================
   MASCOT FLOAT
   =========================================== */

@keyframes mascot-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(0.5deg); }
  75%      { transform: translateY(-4px) rotate(-0.5deg); }
}
.mascot-float { animation: mascot-float 5s var(--ease-out) infinite; }

/* ===========================================
   SHIELD PULSE
   =========================================== */

@keyframes shield-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 8px 24px rgba(16,185,129,0.2)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 12px 36px rgba(16,185,129,0.35)); }
}
.shield-pulse { animation: shield-pulse 3s ease-in-out infinite; }

/* ===========================================
   DASHBOARD SCALE-IN
   =========================================== */

@keyframes dashboard-scale-in {
  0%   { transform: perspective(1200px) rotateX(6deg) scale(0.94); opacity: 0; }
  100% { transform: perspective(1200px) rotateX(2deg) scale(1); opacity: 1; }
}

/* ===========================================
   COUNTER FONT
   =========================================== */

.counter { font-variant-numeric: tabular-nums; }

/* ===========================================
   PERFORMANCE HINTS
   =========================================== */

.hero__mascot,
.hero__glow,
.shield__img { will-change: transform; }

/* ===========================================
   REDUCED MOTION
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-enter {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .device-float, .glow-pulse, .dot-pulse,
  .mascot-float, .shield-pulse { animation: none; }
  .marquee__track { animation: none; }
  .reveal[data-delay], .hero-enter[data-delay] { transition-delay: 0ms; }
  .story-section .reveal[data-delay] { transition-delay: 0ms; }
}