/* ==========================================================================
   EliteCyberDeals — animations.css
   Keyframes + scroll reveal. Reveal only hides content when JS is present
   (html.js), so information stays accessible if JS fails.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(96, 165, 250, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
  }
}

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

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

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes marquee-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

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

@keyframes beam-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes aurora {
  0%,
  100% {
    transform: translate3d(-4%, 0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(4%, 3%, 0) scale(1.12);
    opacity: 0.75;
  }
}

@keyframes bar-grow {
  from {
    transform: scaleY(0.06);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes scan {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateY(320%);
    opacity: 0;
  }
}

/* ---------- Scroll reveal (JS gated) ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  will-change: opacity, transform;
}
html.js .reveal.reveal--left {
  transform: translateX(-28px);
}
html.js .reveal.reveal--right {
  transform: translateX(28px);
}
html.js .reveal.reveal--scale {
  transform: scale(0.96);
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Stagger: children reveal when parent gets .is-in via JS delay vars */
html.js .stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.js .stagger.is-in > * {
  opacity: 1;
  transform: none;
}

/* Hero entrance */
.hero-enter {
  opacity: 0;
  transform: translateY(22px);
  animation: fade-up 0.9s var(--ease-out) forwards;
}
.d-1 {
  animation-delay: 0.08s;
}
.d-2 {
  animation-delay: 0.18s;
}
.d-3 {
  animation-delay: 0.28s;
}
.d-4 {
  animation-delay: 0.4s;
}
.d-5 {
  animation-delay: 0.52s;
}
.d-6 {
  animation-delay: 0.66s;
}

/* Floating decorative elements */
.float {
  animation: float-y 6s var(--ease) infinite;
}
.float-slow {
  animation: float-y-slow 9s var(--ease) infinite;
}
.float-delay {
  animation-delay: -2.4s;
}
.float-delay-2 {
  animation-delay: -4.2s;
}

/* Aurora background */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
  animation: aurora 16s var(--ease) infinite;
}

/* Bars grow */
.bars.animate i {
  transform-origin: bottom;
  animation: bar-grow 1s var(--ease-out) both;
}

/* Shimmer skeleton line */
.shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.04) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

/* Hero product scanline sweep */
.scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(96, 165, 250, 0.08), transparent);
  animation: scan 6s var(--ease) infinite;
  pointer-events: none;
  z-index: 3;
}

/* Typing caret */
.caret::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent-light);
  margin-left: 2px;
  vertical-align: -0.12em;
  animation: caret 1.05s step-end infinite;
}

/* Interactive demo transitions */
.swap-in {
  animation: fade-up 0.42s var(--ease-out) both;
}

/* Hover lift utility */
.lift {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal,
  html.js .stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-enter {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .marquee__track {
    animation: none;
  }
}