/* AdSelect.co - Shared Styles */

/* ===== Logo Animations ===== */
@keyframes morphShape {
  0%, 100% { d: path("M20 20 L80 15 L85 80 L15 85 Z"); }
  50% { d: path("M15 25 L85 20 L80 85 L20 80 Z"); }
}
@keyframes drawA {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}
@keyframes drawBar {
  from { stroke-dashoffset: 16; }
  to { stroke-dashoffset: 0; }
}
@keyframes spinBox {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulseBox {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
}
@keyframes floatDot {
  0%, 100% { transform: translateY(0); opacity: 0.2; }
  50% { transform: translateY(-10px); opacity: 1; }
}
@keyframes logoGlow {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.05); }
}

.logo-shape { animation: morphShape 4s ease-in-out infinite; }
.logo-a-main {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: drawA 1s ease-out 0.5s forwards;
}
.logo-a-bar {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: drawBar 0.5s ease-out 1.2s forwards;
}
.logo-select-box {
  transform-origin: 72.5px 32.5px;
  animation: pulseBox 10s linear infinite;
}
.logo-dot { animation: floatDot 2s ease-in-out infinite; }
.logo-dot:nth-child(6) { animation-duration: 2.2s; animation-delay: 0.2s; }
.logo-dot:nth-child(7) { animation-duration: 2.4s; animation-delay: 0.4s; }
.logo-dot:nth-child(8) { animation-duration: 2.6s; animation-delay: 0.6s; }
.logo-dot:nth-child(9) { animation-duration: 2.8s; animation-delay: 0.8s; }
.logo-glow {
  position: absolute; inset: 0;
  background: #00ff00;
  border-radius: 50%;
  filter: blur(48px);
  z-index: -1;
  animation: logoGlow 3s ease-in-out infinite;
}

/* ===== General Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
.animate-fade-in-up-delay-1 { animation: fadeInUp 0.8s ease-out 0.2s forwards; opacity: 0; }
.animate-fade-in-up-delay-2 { animation: fadeInUp 0.8s ease-out 0.4s forwards; opacity: 0; }
.animate-fade-in-up-delay-3 { animation: fadeInUp 0.8s ease-out 0.6s forwards; opacity: 0; }
.animate-pulse-slow { animation: pulse 2s ease-in-out infinite; }
.animate-bounce-slow { animation: bounce 2s ease-in-out infinite; }

/* ===== Glass Panel ===== */
.glass-panel {
  background: rgba(28, 32, 40, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ===== Hero Gradient ===== */
.hero-gradient-bg {
  background:
    radial-gradient(circle at 20% 30%, rgba(161, 250, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 81, 250, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(195, 244, 0, 0.05) 0%, transparent 50%);
}

/* ===== Neon Glow Hovers ===== */
.neon-glow-primary:hover { box-shadow: 0 0 20px rgba(161, 250, 255, 0.4); }
.neon-glow-secondary:hover { box-shadow: 0 0 20px rgba(195, 244, 0, 0.3); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0b0e14; }
::-webkit-scrollbar-thumb { background: #22262f; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #45484f; }

/* ===== Smooth Scroll ===== */
html { scroll-behavior: smooth; }

/* ===== Material Symbols ===== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}

/* ===== Mobile Nav ===== */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.mobile-menu.open { transform: translateX(0); }

/* ===== Intersection Observer Reveals ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Bar Chart Animation ===== */
.bar-animate {
  transform-origin: bottom;
  transform: scaleY(0);
  animation: barGrow 1s ease-out forwards;
}
.bar-animate:nth-child(1) { animation-delay: 0.1s; }
.bar-animate:nth-child(2) { animation-delay: 0.2s; }
.bar-animate:nth-child(3) { animation-delay: 0.3s; }
.bar-animate:nth-child(4) { animation-delay: 0.4s; }
.bar-animate:nth-child(5) { animation-delay: 0.5s; }
.bar-animate:nth-child(6) { animation-delay: 0.6s; }
.bar-animate:nth-child(7) { animation-delay: 0.7s; }
.bar-animate:nth-child(8) { animation-delay: 0.8s; }
.bar-animate:nth-child(9) { animation-delay: 0.9s; }
.bar-animate:nth-child(10) { animation-delay: 1.0s; }