/* ============================================================
   SECUREVISION — ANIMATIONS
============================================================ */

/* ──────────────────────────────────────
   KEYFRAMES
────────────────────────────────────── */
@keyframes spin       { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes fadeIn     { from { opacity: 0; }                 to { opacity: 1; } }
@keyframes slideUp    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes slideDown  { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes slideLeft  { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes slideRight { from { opacity: 0; transform: translateX(36px); }  to { opacity: 1; transform: none; } }
@keyframes scaleIn    { from { opacity: 0; transform: scale(.92); }        to { opacity: 1; transform: none; } }

@keyframes scrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.05); opacity: .85; }
}

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

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

/* ──────────────────────────────────────
   HERO SLIDE ANIMATIONS
────────────────────────────────────── */
.hero-slide.active .hero-tag         { animation: slideDown .6s ease .15s both; }
.hero-slide.active .hero-title       { animation: slideUp  .7s ease .3s  both; }
.hero-slide.active .hero-description { animation: slideUp  .7s ease .45s both; }
.hero-slide.active .hero-ctas        { animation: slideUp  .7s ease .6s  both; }

/* ──────────────────────────────────────
   SCROLL REVEAL BASE STATES
────────────────────────────────────── */
.reveal        { opacity: 0; transition: opacity .65s ease, transform .65s ease; }
.reveal-up     { opacity: 0; transform: translateY(36px);  transition: opacity .65s ease, transform .65s ease; }
.reveal-left   { opacity: 0; transform: translateX(-36px); transition: opacity .65s ease, transform .65s ease; }
.reveal-right  { opacity: 0; transform: translateX(36px);  transition: opacity .65s ease, transform .65s ease; }
.reveal-scale  { opacity: 0; transform: scale(.93);        transition: opacity .65s ease, transform .65s ease; }

/* VISIBLE STATE — added by IntersectionObserver */
.reveal.visible,
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* ──────────────────────────────────────
   STAGGER DELAYS
────────────────────────────────────── */
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }
.delay-5 { transition-delay: .40s; }
.delay-6 { transition-delay: .48s; }
.delay-7 { transition-delay: .56s; }
.delay-8 { transition-delay: .64s; }

/* ──────────────────────────────────────
   PAGE ENTER
────────────────────────────────────── */
body { animation: fadeIn .35s ease both; }

/* ──────────────────────────────────────
   SKELETON LOADING
────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
}

/* ──────────────────────────────────────
   REDUCED MOTION
────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}