/* ══════════════════════════════════════════════
   NEXARA — ANIMATIONS
══════════════════════════════════════════════ */

/* ── GLITCH TEXT EFFECT ── */
.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  opacity: 0.8;
}
.glitch::before {
  color: var(--neon-pink);
  animation: glitch1 4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch::after {
  color: var(--neon-cyan);
  animation: glitch2 4s infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
@keyframes glitch1 {
  0%,95%,100% { transform: translate(0); }
  96% { transform: translate(-3px, 1px); }
  97% { transform: translate(3px, -1px); }
  98% { transform: translate(-1px, 2px); }
}
@keyframes glitch2 {
  0%,95%,100% { transform: translate(0); }
  96% { transform: translate(3px, -2px); }
  97% { transform: translate(-3px, 1px); }
  98% { transform: translate(2px, -1px); }
}

/* ── HOLOGRAPHIC CARD SHEEN ── */
.holo-card {
  position: relative;
  overflow: hidden;
}
.holo-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(0,212,255,0.03) 45%,
    rgba(255,255,255,0.05) 50%,
    rgba(0,212,255,0.03) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.holo-card:hover::after {
  transform: translateX(100%);
}

/* ── NEON BORDER PULSE ── */
@keyframes neonPulse {
  0%,100% { box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px rgba(0,212,255,0.3); }
  50% { box-shadow: 0 0 20px var(--neon-cyan), 0 0 40px rgba(0,212,255,0.5), 0 0 60px rgba(0,212,255,0.2); }
}
.neon-pulse { animation: neonPulse 2s ease-in-out infinite; }

/* ── MATRIX RAIN (for backgrounds) ── */
.matrix-bg {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ── TYPEWRITER CURSOR ── */
.typewriter::after {
  content: '|';
  animation: cursor 1s step-end infinite;
  color: var(--neon-cyan);
}
@keyframes cursor { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ── PARTICLE FLOAT ── */
@keyframes particleFloat {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ── CYBER SCANNER ── */
.cyber-scan {
  position: relative;
  overflow: hidden;
}
.cyber-scan::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  top: -100%;
  animation: cyberScan 3s ease-in-out infinite;
  box-shadow: 0 0 20px var(--neon-cyan);
}
@keyframes cyberScan {
  0% { top: -2px; }
  100% { top: 102%; }
}

/* ── MAGNETIC HOVER ── */
.magnetic { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── WAVE RIPPLE ── */
@keyframes waveRipple {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}
.wave-ripple {
  animation: waveRipple 0.6s ease-out forwards;
}

/* ── DATA STREAM ── */
.data-stream {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,212,255,0.03) 25%,
    rgba(0,212,255,0.08) 50%,
    rgba(0,212,255,0.03) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: dataStream 2s linear infinite;
}
@keyframes dataStream {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ── CORNER BRACKETS ── */
.bracket-wrap {
  position: relative;
}
.bracket-wrap::before, .bracket-wrap::after,
.bracket-wrap > .br-bl, .bracket-wrap > .br-br {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--neon-cyan);
  border-style: solid;
}
.bracket-wrap::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.bracket-wrap::after { top: 0; right: 0; border-width: 2px 2px 0 0; }
.bracket-wrap > .br-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.bracket-wrap > .br-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

/* ── LOADING DOTS ── */
.loading-dots span {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--neon-cyan);
  border-radius: 50%;
  margin: 0 3px;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%,80%,100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── HERO PARTICLES ── */
.hero-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ── SLIDE TRANSITIONS ── */
.slide-enter { animation: slideEnter 0.5s ease; }
@keyframes slideEnter {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ── PRODUCT EXPAND ANIMATION ── */
.product-expanding {
  animation: productExpand 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes productExpand {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ── NUMBER COUNTER ANIMATION ── */
@keyframes countUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── SUCCESS BURST ── */
@keyframes burst {
  0% { transform: scale(0); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(2); opacity: 0; }
}

/* ── CART BOUNCE ── */
.cart-bounce {
  animation: cartBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cartBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ── PRICE FLASH ── */
.price-flash {
  animation: priceFlash 0.3s ease;
}
@keyframes priceFlash {
  0%,100% { color: var(--text-primary); }
  50% { color: var(--neon-green); }
}