/* ============================================================
   ROO3 — Premium Layer | premium.css
   Lenis + GSAP ScrollTrigger + Cursor + Aurora + Magnetic
   ============================================================ */

/* ─── SCROLL PROGRESS BAR ───────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #7acc2e, #a3ff47, #d4ff80, #a3ff47);
  background-size: 200% 100%;
  z-index: 9999;
  box-shadow: 0 0 12px rgba(163,255,71,0.7);
  will-change: width;
  animation: progress-shimmer 3s linear infinite;
}
@keyframes progress-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position:   0% center; }
}

/* ─── RASTRO BINÁRIO NO CURSOR (desktop only) ───────────────────
   Mantém o cursor normal do sistema; a cada movimento "explode"
   0s e 1s bem fracos (verde neon, ~20% de opacidade) que sobem/
   espalham e somem. Sem lerp/loop = sem delay. */
.bit-particle {
  position: fixed;
  z-index: 9990;
  font-family: 'Space Grotesk', ui-monospace, monospace;
  font-weight: 600;
  line-height: 1;
  color: #a3ff47;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 6px rgba(163,255,71,0.35);
  animation: bit-pop 0.9s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes bit-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(0.5); }
  18%  { opacity: var(--peak, 0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, -22px)) scale(1); }
}

/* ─── AURORA BACKGROUND ─────────────────────────────────────── */
#aurora-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#aurora-bg::before {
  content: '';
  position: absolute;
  width: 80vw; height: 80vw;
  max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle at center, rgba(163,255,71,0.11) 0%, transparent 65%);
  border-radius: 50%;
  top: -25%; left: -18%;
  filter: blur(70px);
  animation: aurora-a 20s ease-in-out infinite alternate;
  will-change: transform;
}
#aurora-bg::after {
  content: '';
  position: absolute;
  width: 65vw; height: 65vw;
  max-width: 850px; max-height: 850px;
  background: radial-gradient(circle at center, rgba(60,220,130,0.07) 0%, transparent 65%);
  border-radius: 50%;
  bottom: -20%; right: -12%;
  filter: blur(90px);
  animation: aurora-b 25s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes aurora-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(14vw, 10vh) scale(1.2); }
}
@keyframes aurora-b {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-10vw, -14vh) scale(0.88); }
}

/* ─── GSAP INITIAL HIDDEN STATES ────────────────────────────── */
/* Hero elements are NOT hidden — they render instantly above the fold */
.gsap-card,
.gsap-section-header,
.gsap-anim {
  opacity: 0;
}

/* ─── MAGNETIC BUTTON TRANSITION OVERRIDE ────────────────────── */
.btn-primary,
.btn-cta-primary {
  will-change: transform;
}

/* ─── ENHANCED SERVICE CARD DEPTH ───────────────────────────── */
.service-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ─── SCROLL INDICATOR LINE ─────────────────────────────────── */
.hero-scroll-indicator {
  opacity: 1;
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #aurora-bg::before, #aurora-bg::after { animation: none !important; }
  .bit-particle { display: none !important; }
  .gsap-card, .gsap-section-header, .gsap-anim {
    opacity: 1 !important;
    transform: none !important;
  }
  #scroll-progress { animation: none !important; }
}