/* ============================================================
   COMPONENTS — Buttons, Tags, Scroll Reveal
============================================================ */

/* ---- Buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.06);
  opacity: 0;
  transition: opacity 0.2s;
}
.btn:hover::before { opacity: 1; }

.btn--primary {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 4px 24px rgba(var(--purple-rgb), 0.35);
}
.btn--primary:hover {
  background: var(--purple-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(var(--purple-rgb), 0.45);
}

.btn--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--purple-light);
  border: 1px solid rgba(var(--purple-rgb), 0.4);
}
.btn--outline:hover {
  background: rgba(var(--purple-rgb), 0.1);
  border-color: var(--purple);
  transform: translateY(-2px);
}

.btn--large { padding: 14px 28px; font-size: 15px; border-radius: var(--radius-lg); }

/* ---- Tags ------------------------------------------------- */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 100px;
}

/* ---- Scroll reveal animations ------------------------------ */
.reveal-up, .reveal-right {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-right { transform: translateX(60px); }
.reveal-up.visible, .reveal-right.visible {
  opacity: 1;
  transform: translate(0);
}

/* Hero: same fade-up, but driven by CSS so the headline appears on first paint
   instead of waiting for the JS modules to load (was the page's LCP bottleneck).
   Stagger matches the old JS timing: 200ms + 120ms per element (--reveal-i).
   Starts at opacity 0.001, not 0: looks identical, but Chrome only counts text as
   painted (LCP) once it's non-zero, so a 0 start delayed LCP until the fade ended. */
.hero .reveal-up {
  opacity: 1;
  transform: none;
  transition: none;
  animation: hero-reveal 0.8s var(--ease-out) backwards;
  animation-delay: calc(200ms + var(--reveal-i, 0) * 120ms);
}
@keyframes hero-reveal {
  from { opacity: 0.001; transform: translateY(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .reveal-up { animation: none; }
}