/* ======= ANIMATIONS KEYFRAMES ======= */
@keyframes blink { 50% { opacity: 0 } }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:0.5 } }
@keyframes slideInRight { from { transform: translateX(100px); opacity:0 } to { transform: translateX(0); opacity:1 } }
@keyframes slideOutRight { from { transform: translateX(0); opacity:1 } to { transform: translateX(100px); opacity:0 } }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes glow { 0%,100% { box-shadow: 0 0 5px var(--blue-glow) } 50% { box-shadow: 0 0 20px var(--blue-glow), 0 0 40px var(--blue-glow) } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes scaleIn { from { transform: scale(0.9); opacity:0 } to { transform: scale(1); opacity:1 } }
@keyframes gradientShift { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
@keyframes heroSlideUp { from { opacity:0; transform: translateY(30px) } to { opacity:1; transform: translateY(0) } }
@keyframes spinLoader { to { transform: rotate(360deg) } }
@keyframes slideFromLeft { from { opacity:0; transform: translateX(-30px) } to { opacity:1; transform: translateX(0) } }
@keyframes slideFromRight { from { opacity:0; transform: translateX(30px) } to { opacity:1; transform: translateX(0) } }
@keyframes scaleUp { from { opacity:0; transform: scale(0.85) } to { opacity:1; transform: scale(1) } }
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes borderGlow { 0%,100% { border-color: var(--line) } 50% { border-color: rgba(0,229,255,0.4) } }
@keyframes rotateIn { from { opacity:0; transform: rotate(-8deg) scale(0.9) } to { opacity:1; transform: rotate(0) scale(1) } }
@keyframes bounceIn { 0% { transform: scale(0.3); opacity:0 } 50% { transform: scale(1.05) } 70% { transform: scale(0.95) } 100% { transform: scale(1); opacity:1 } }
@keyframes typewriter { from { width: 0 } to { width: 100% } }
@keyframes gradientText { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }

/* ======= SCROLL REVEAL VARIANTS ======= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Reveal scale up */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Reveal rotate in */
.reveal-rotate {
  opacity: 0;
  transform: rotate(-5deg) scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-rotate.visible { opacity: 1; transform: rotate(0) scale(1); }

/* Staggered reveal children */
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }

/* ======= HERO ENTRANCE ======= */
.hero-animate { opacity: 0; transform: translateY(30px); }
.hero-animate.active { animation: heroSlideUp 0.7s ease forwards; }
.hero-animate.delay-1 { animation-delay: 0.1s; }
.hero-animate.delay-2 { animation-delay: 0.2s; }
.hero-animate.delay-3 { animation-delay: 0.3s; }
.hero-animate.delay-4 { animation-delay: 0.4s; }
.hero-animate.delay-5 { animation-delay: 0.5s; }

/* ======= ANIMATED GRADIENT TEXT ======= */
.grad-animated {
  background: linear-gradient(270deg, #00e5ff, #8b5cf6, #00e5ff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientText 4s ease infinite;
}

/* ======= SHIMMER LOADING ======= */
.shimmer {
  background: linear-gradient(90deg, var(--bg-raised) 25%, rgba(255,255,255,0.05) 50%, var(--bg-raised) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
}

/* ======= FLOATING ANIMATION ======= */
.float { animation: float 3s ease-in-out infinite; }
.float-slow { animation: float 5s ease-in-out infinite; }
.float-delay { animation: float 3s ease-in-out 1s infinite; }

/* ======= GLOW EFFECTS ======= */
.glow { animation: glow 2s ease-in-out infinite; }
.glow-blue { box-shadow: 0 0 15px var(--blue-glow); }
.glow-purple { box-shadow: 0 0 15px var(--purple-glow); }
.border-glow { animation: borderGlow 3s ease-in-out infinite; }

/* ======= MICRO-INTERACTIONS ======= */
.cursor { display:inline-block; width:8px; height:16px; background:var(--blue); vertical-align:middle; animation:blink 1s step-end infinite; }
.fade-in { animation: fadeIn 0.5s ease; }
.scale-in { animation: scaleIn 0.3s ease; }
.bounce-in { animation: bounceIn 0.6s ease; }

/* Button press feedback */
.btn:active { transform: scale(0.97) !important; transition-duration: 0.1s !important; }
.card:active { transform: scale(0.99) !important; }

/* ======= BUTTON HOVER ENHANCEMENTS ======= */
.btn { transition: all 0.2s ease; position: relative; overflow: hidden; }

.btn-primary { position: relative; }
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:hover { box-shadow: 0 0 30px var(--purple-glow), 0 4px 20px rgba(0,0,0,0.3); }

.btn-ghost:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* ======= NAV LINK HOVER UNDERLINE ======= */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient);
  transition: width 0.25s ease, left 0.25s ease;
  border-radius: 1px;
}
.nav-links a:hover::after { width: 100%; left: 0; }
.nav-links a.active::after { width: 100%; left: 0; }

/* ======= CARD HOVER EFFECTS ======= */
.card {
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover::before { opacity: 1; }
.card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  border-color: rgba(0,229,255,0.25);
}

/* Product card image hover zoom */
.product-thumb { overflow: hidden; }
.product-thumb img,
.product-thumb span { transition: transform 0.4s ease; }
.product-card:hover .product-thumb img,
.product-card:hover .product-thumb span { transform: scale(1.05); }

/* ======= STAT NUMBER GLOW ======= */
.stat-num {
  transition: text-shadow 0.3s ease;
}
.stat-card:hover .stat-num,
.admin-stat-card:hover .val {
  text-shadow: 0 0 20px var(--blue-glow);
}

/* ======= TAG/BADGE HOVER ======= */
.badge { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.badge:hover { transform: scale(1.05); }
.tag { transition: color 0.2s ease; }
.tag:hover { color: var(--blue); }

/* ======= EYEBROW LINE ANIMATION ======= */
.eyebrow::before {
  transition: width 0.5s ease;
  width: 18px;
}
.visible .eyebrow::before,
.eyebrow:hover::before { width: 32px; }

/* ======= FOOTER LINK HOVER ======= */
.footer-col a { transition: color 0.2s ease, transform 0.2s ease, padding-left 0.2s ease; }
.footer-col a:hover { transform: translateX(4px); padding-left: 4px; color: var(--blue); }

/* ======= FORM INPUT FOCUS ANIMATION ======= */
.form-input:focus, .form-textarea:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px var(--blue-glow), 0 4px 12px rgba(0,0,0,0.1);
}

/* ======= SECTION DIVIDER LINE ======= */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-hover), transparent);
  margin: 0 auto;
  max-width: 600px;
}

/* ======= SCROLL-TRIGGERED COUNTER ======= */
.count-up { font-variant-numeric: tabular-nums; }

/* ======= PAGE TRANSITION ======= */
main { animation: fadeIn 0.4s ease; }

/* ======= TOOLTIP ======= */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ======= REDUCED MOTION ======= */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-rotate, .reveal-stagger > *, .hero-animate { 
    opacity: 1 !important; 
    transform: none !important; 
    transition: none !important; 
    animation: none !important; 
  }
  .btn:active, .card:active { transform: none !important; }
  .nav-links a::after { transition: none !important; }
  .card { transition: none !important; }
  .card::before { display: none; }
  .btn-primary::before { display: none; }
  .grad-animated { animation: none !important; }
  main { animation: none !important; }
  .float, .float-slow, .float-delay { animation: none !important; }
  .glow, .border-glow { animation: none !important; }
}