/* ============================================================
   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; }
}

/* ─── CUSTOM CURSOR (desktop only) ──────────────────────────── */
@media (pointer: fine) {
  html { cursor: none !important; }
  * { cursor: none !important; }

  #cursor-outer {
    position: fixed;
    width: 38px; height: 38px;
    border: 1.5px solid rgba(163,255,71,0.55);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9997;
    left: 0; top: 0;
    transform: translate(-50%, -50%);
    transition:
      width 0.35s cubic-bezier(0.4,0,0.2,1),
      height 0.35s cubic-bezier(0.4,0,0.2,1),
      border-color 0.35s,
      background 0.35s;
    will-change: left, top;
  }

  #cursor-inner {
    position: fixed;
    width: 6px; height: 6px;
    background: #a3ff47;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9997;
    left: 0; top: 0;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(163,255,71,0.9);
    transition: width 0.2s, height 0.2s, background 0.2s;
    will-change: left, top;
  }

  body.cursor-hover #cursor-outer {
    width: 56px; height: 56px;
    background: rgba(163,255,71,0.07);
    border-color: rgba(163,255,71,0.9);
  }
  body.cursor-hover #cursor-inner {
    width: 4px; height: 4px;
  }
  body.cursor-click #cursor-outer {
    width: 28px; height: 28px;
    background: rgba(163,255,71,0.18);
  }
}

/* ─── 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 ────────────────────────────── */
.gsap-hero > *,
.gsap-card,
.gsap-section-header,
.gsap-anim {
  opacity: 0;
}
/* Ensure stat-dividers stay visible (no opacity animation) */
.hero-stats .stat-divider { opacity: 1 !important; }

/* ─── 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: 0;
  animation: fade-in-indicator 0.8s ease 3.2s forwards;
}
@keyframes fade-in-indicator {
  to { opacity: 1; }
}

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