/* ============================================================
   EAGLE EYE CCTV — ANIMATIONS & EFFECTS
   Version: 2.0 | 2026
   ============================================================ */

/* ============================================================
   1. LOADING SCREEN
   ============================================================ */
#page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#page-loader.loaded {
  opacity: 0;
  visibility: hidden;
}
.loader-logo {
  width: 120px;
  animation: pulseLogo 1.5s infinite alternate;
}
.loader-bar {
  width: 200px;
  height: 4px;
  background: var(--color-gray-200);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.loader-bar__inner {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 50%;
  background: var(--color-primary);
  border-radius: 4px;
  animation: loadingBar 1.2s infinite ease-in-out;
}
@keyframes pulseLogo {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.05); opacity: 1; }
}
@keyframes loadingBar {
  0% { left: -50%; }
  100% { left: 100%; }
}

/* ============================================================
   2. SCROLL-TO-TOP BUTTON
   ============================================================ */
.scroll-top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-3px) scale(1.05);
}

/* ============================================================
   3. AOS — ANIMATE ON SCROLL (custom, no library needed)
   ============================================================ */
[data-aos] {
  transition-property: opacity, transform;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.js-loaded [data-aos] { opacity: 0; }
.js-loaded [data-aos="fade-up"]    { transform: translateY(40px); }
.js-loaded [data-aos="fade-down"]  { transform: translateY(-40px); }
.js-loaded [data-aos="fade-left"]  { transform: translateX(40px); }
.js-loaded [data-aos="fade-right"] { transform: translateX(-40px); }
.js-loaded [data-aos="zoom-in"]    { transform: scale(0.85); }
.js-loaded [data-aos="flip-up"]    { transform: perspective(600px) rotateX(20deg); }

.js-loaded [data-aos].aos-animate {
  opacity: 1;
  transform: none;
}
/* delay helpers */
[data-aos-delay="100"] { transition-delay: 0.1s; }
[data-aos-delay="200"] { transition-delay: 0.2s; }
[data-aos-delay="300"] { transition-delay: 0.3s; }
[data-aos-delay="400"] { transition-delay: 0.4s; }
[data-aos-delay="500"] { transition-delay: 0.5s; }
[data-aos-delay="600"] { transition-delay: 0.6s; }