/* ═══════════════════════════════════════════════════════════════════════
   VIRALO — PREMIUM INTERACTIONS v1.0
   Inspired by Shatlyk1011/agency-website: cursor, parallax, spotlight,
   hover cards, magnetic elements, ambient glow, scroll depth.
   Pure CSS layer — works alongside style.css and design v5.0.
   No HTML content changes. No business logic. No tracking.
═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. TEXT SELECTION + SCROLLBAR
───────────────────────────────────────────────────────────────────── */

::selection {
  background: rgba(0, 163, 255, .24);
  color: #ffffff;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #090d18; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 163, 255, .3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 163, 255, .55); }
* { scrollbar-width: thin; scrollbar-color: rgba(0, 163, 255, .3) #090d18; }

/* ─────────────────────────────────────────────────────────────────────
   2. CUSTOM CURSOR (desktop only — JS adds .vir-cursor-active to body)
───────────────────────────────────────────────────────────────────── */

.vir-cursor-active,
.vir-cursor-active a,
.vir-cursor-active button,
.vir-cursor-active [role="button"],
.vir-cursor-active label,
.vir-cursor-active input[type="submit"],
.vir-cursor-active input[type="button"] {
  cursor: none;
}

/* Dot — snaps to position instantly */
.vir-dot {
  position: fixed;
  top: 0; left: 0;
  width: 7px;
  height: 7px;
  background: var(--accent, #00a3ff);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: width 0.18s, height 0.18s, background 0.18s, opacity 0.22s;
}
.vir-dot.is-hov { width: 10px; height: 10px; background: #fff; }
.vir-dot.is-click { transform: translate(-50%, -50%) scale(0.65); }
.vir-dot.is-gone { opacity: 0; }

/* Ring — follows with lag (JS animates left/top via rAF lerp) */
.vir-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(0, 163, 255, .4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.22s,
              opacity 0.22s;
}
.vir-ring.is-hov {
  width: 54px;
  height: 54px;
  border-color: rgba(0, 163, 255, .65);
}
.vir-ring.is-btn {
  width: 62px;
  height: 62px;
  border-color: rgba(0, 163, 255, .8);
  background: rgba(0, 163, 255, .05);
}
.vir-ring.is-gone { opacity: 0; }

/* ─────────────────────────────────────────────────────────────────────
   3. AMBIENT PAGE GLOW (slow-following orb under the cursor)
───────────────────────────────────────────────────────────────────── */

.vir-glow {
  position: fixed;
  top: 0; left: 0;
  width: 640px;
  height: 640px;
  background: radial-gradient(
    circle,
    rgba(0, 163, 255, .042) 0%,
    rgba(0, 71, 171, .022) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

/* ─────────────────────────────────────────────────────────────────────
   4. HERO PARALLAX — canvas + inner text move independently
───────────────────────────────────────────────────────────────────── */

/* Hero canvas: JS drives transform, no CSS transition (rAF lerp handles smooth) */
.hero__canvas {
  will-change: transform;
}

/* Hero inner text: subtle inverse parallax */
.hero__inner {
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────────────────
   5. CARD MAGNETIC SPOTLIGHT
   Spotlight is the bottom layer of background-image; JS sets --spot-x/y.
   Default -999px puts it off-screen until hovered.
───────────────────────────────────────────────────────────────────── */

/* Declare defaults on all spotlight cards */
.svc-card,
.niche-card,
.proc-step,
.result-card,
.res-card,
.cs-card,
.why-feat,
.why-metric,
.testi-card,
.test-card,
.pricing-card {
  --spot-x: -999px;
  --spot-y: -999px;
}

/* Inject spotlight as the topmost background layer */
.svc-card {
  background-image:
    radial-gradient(260px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .11), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}
.niche-card,
.niche-card--feat {
  background-image:
    radial-gradient(260px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .11), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}
.niche-card--feat {
  background-image:
    radial-gradient(260px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .14), transparent 70%),
    linear-gradient(145deg, rgba(0, 71, 171, .24) 0%, rgba(0, 163, 255, .07) 55%, rgba(12, 19, 34, .92) 100%);
}
.proc-step {
  background-image:
    radial-gradient(240px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .1), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}
.result-card,
.res-card {
  background-image:
    radial-gradient(240px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .1), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}
.cs-card {
  background-image:
    radial-gradient(220px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .09), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}
.cs-card--feat {
  background-image:
    radial-gradient(220px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .12), transparent 70%),
    linear-gradient(145deg, rgba(6, 18, 42, .95) 0%, rgba(12, 19, 34, .98) 100%);
}
.why-feat,
.why-metric {
  background-image:
    radial-gradient(200px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .09), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}
.testi-card,
.test-card {
  background-image:
    radial-gradient(220px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .08), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}
.pricing-card {
  background-image:
    radial-gradient(280px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .09), transparent 70%),
    linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
}
.pricing-card--feat,
.pricing-card--pop {
  background-image:
    radial-gradient(300px circle at var(--spot-x) var(--spot-y), rgba(0, 163, 255, .14), transparent 70%),
    linear-gradient(148deg, rgba(0, 71, 171, .34) 0%, rgba(0, 163, 255, .12) 42%, rgba(12, 19, 34, .95) 100%);
}

/* ─────────────────────────────────────────────────────────────────────
   6. CARD 3D TILT
   CSS variables --tilt-x / --tilt-y set by JS on mousemove.
   Card default state and hover both include the tilt transform.
───────────────────────────────────────────────────────────────────── */

.svc-card,
.niche-card,
.proc-step,
.cs-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}
.svc-card:hover {
  transform: translateY(-9px) perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}
.niche-card:hover {
  transform: translateY(-9px) perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}
.proc-step:hover {
  transform: translateY(-9px) perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}
.cs-card:hover {
  transform: translateY(-5px) perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

/* ─────────────────────────────────────────────────────────────────────
   7. MAGNETIC BUTTONS
   JS sets inline transform via translate. CSS ensures smooth return.
───────────────────────────────────────────────────────────────────── */

.btn {
  will-change: transform;
}
/* Smooth spring return when mouse leaves */
.btn.vir-mag-leaving {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   8. HERO SCROLL INDICATOR — fade as user scrolls
───────────────────────────────────────────────────────────────────── */

.hero__scroll {
  transition: opacity 0.4s ease;
}

/* ─────────────────────────────────────────────────────────────────────
   9. NAV LINK HOVER UNDERLINE — reveal from center
───────────────────────────────────────────────────────────────────── */

.nav-link {
  position: relative;
  overflow: hidden;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  right: 50%;
  height: 1.5px;
  background: var(--accent, #00a3ff);
  transition: left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              right 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 2px;
}
.nav-link:hover::after,
.nav-link.active::after {
  left: 1rem;
  right: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────
   10. FOOTER LINK UNDERLINE REVEAL
───────────────────────────────────────────────────────────────────── */

.footer-link {
  position: relative;
  display: inline-block;
}
.footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(0, 163, 255, .55);
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 1px;
}
.footer-link:hover::after { width: 100%; }

/* ─────────────────────────────────────────────────────────────────────
   11. HOVER CARD TRAVELING HIGHLIGHT (inspired by HoverCards component)
   JS adds/removes .vir-highlight class on siblings to slide the glow.
───────────────────────────────────────────────────────────────────── */

/* The highlight travels between cards via JS toggling .vir-hl class */
.svcs-grid,
.niches-grid,
.casestudies-grid,
.proc-steps {
  position: relative;
}

/* ─────────────────────────────────────────────────────────────────────
   12. SECTION FADE-OUT ON SCROLL EXIT (SectionOpacity concept)
   JS adds .vir-fade-exit class to sections leaving viewport upward.
───────────────────────────────────────────────────────────────────── */

.section--dark,
.section--darker,
.section--grad {
  transition: opacity 0.4s ease;
}
.section.vir-fade-exit {
  opacity: 0.4;
}

/* ─────────────────────────────────────────────────────────────────────
   13. ENHANCED REVEAL — support .reveal-up variant for individual lines
───────────────────────────────────────────────────────────────────── */

/* Eyebrow entrance: scale from left */
.eyebrow {
  transform-origin: left center;
}

/* ─────────────────────────────────────────────────────────────────────
   14. RESULT KPI — hover pulse on numbers
───────────────────────────────────────────────────────────────────── */

.result-kpi:hover .result-kpi__val,
.res-metric:hover .res-metric__val {
  animation: kpiPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes kpiPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────────
   15. PORT ITEM / PORTFOLIO HOVER — cinematic scale + overlay
───────────────────────────────────────────────────────────────────── */

.port-item {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s,
              box-shadow 0.5s;
}
.port-item:hover {
  transform: scale(1.028);
  border-color: rgba(0, 163, 255, .3);
  box-shadow:
    0 0 0 1px rgba(0, 163, 255, .15),
    0 24px 64px rgba(0, 0, 0, .55);
}

/* ─────────────────────────────────────────────────────────────────────
   16. SHOWCASE ITEM HOVER — slide in from left
───────────────────────────────────────────────────────────────────── */

.showcase-item {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s, box-shadow 0.4s;
}
.showcase-item:hover {
  transform: translateX(6px);
  border-color: rgba(0, 163, 255, .3);
  box-shadow: 0 4px 20px rgba(0, 71, 171, .15);
}

/* ─────────────────────────────────────────────────────────────────────
   17. VCARO CARD HOVER — subtle lift with glow
───────────────────────────────────────────────────────────────────── */

.vcaro__card:hover {
  box-shadow:
    0 0 0 1px rgba(0, 163, 255, .18),
    0 20px 56px rgba(0, 0, 0, .45);
}

/* ─────────────────────────────────────────────────────────────────────
   18. FLOATING LABEL EFFECT on form inputs
───────────────────────────────────────────────────────────────────── */

.form-input:focus,
.form-textarea:focus {
  border-color: rgba(0, 163, 255, .7);
  box-shadow: 0 0 0 3px rgba(0, 71, 171, .16), 0 0 0 1px rgba(0, 163, 255, .3);
}

/* ─────────────────────────────────────────────────────────────────────
   19. FAQ ITEM — enhanced open state
───────────────────────────────────────────────────────────────────── */

.faq-item {
  transition: background 0.3s;
  border-radius: var(--r-lg, 0.875rem);
  padding: 0 0.5rem;
}
.faq-q.open ~ .faq-a .faq-a-inner {
  color: rgba(255, 255, 255, .65);
}

/* ─────────────────────────────────────────────────────────────────────
   20. HERO BADGE — gentle float micro-animation
───────────────────────────────────────────────────────────────────── */

.hero__badge {
  animation: badgeFloat 4s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-3px); }
}

/* ─────────────────────────────────────────────────────────────────────
   21. PROC-STEP NUMBER — ambient glow pulse
───────────────────────────────────────────────────────────────────── */

.proc-step:hover .proc-step__num {
  color: rgba(0, 163, 255, .14);
  transition: color 0.4s;
}

/* ─────────────────────────────────────────────────────────────────────
   22. WHY-METRIC HOVER — slide right
───────────────────────────────────────────────────────────────────── */

.why-metric {
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.38s;
}
.why-metric:hover {
  transform: translateX(6px);
  border-color: rgba(0, 163, 255, .22);
  box-shadow:
    0 0 0 1px rgba(0, 163, 255, .08),
    0 6px 28px rgba(0, 71, 171, .15);
}

/* ─────────────────────────────────────────────────────────────────────
   23. PRICING CARD — shimmer on featured badge
───────────────────────────────────────────────────────────────────── */

.pricing-badge {
  background: linear-gradient(
    90deg,
    var(--blue, #0047ab) 0%,
    var(--accent, #00a3ff) 40%,
    var(--blue-light, #0066ff) 70%,
    var(--accent, #00a3ff) 100%
  );
  background-size: 250% auto;
  animation: badgeShimmer 3s linear infinite;
}
@keyframes badgeShimmer {
  to { background-position: 250% center; }
}

/* ─────────────────────────────────────────────────────────────────────
   24. SITEWIDE LINK TRANSITIONS
───────────────────────────────────────────────────────────────────── */

a { transition: color 0.22s ease; }
a:not(.btn):not(.nav-link):not(.footer-link):hover {
  color: var(--accent, #00a3ff);
}

/* ─────────────────────────────────────────────────────────────────────
   25. REDUCED MOTION — disable all premium effects
───────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .vir-dot,
  .vir-ring,
  .vir-glow { display: none; }

  .hero__canvas,
  .hero__inner { transform: none !important; }

  .svc-card,
  .niche-card,
  .proc-step,
  .cs-card {
    transform: none !important;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
  }
  .svc-card:hover  { transform: translateY(-4px) !important; }
  .niche-card:hover { transform: translateY(-4px) !important; }
  .proc-step:hover { transform: translateY(-4px) !important; }

  .hero__badge { animation: none; }
  .pricing-badge { animation: none; }
  .eyebrow::before { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   26. MOBILE — disable cursor and heavy parallax effects
───────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .vir-dot,
  .vir-ring,
  .vir-glow { display: none; }

  /* On mobile, cards keep their glass bg without spotlight since no hover */
  .svc-card,
  .niche-card,
  .proc-step,
  .result-card,
  .res-card,
  .cs-card,
  .why-feat,
  .why-metric,
  .testi-card,
  .test-card,
  .pricing-card {
    background-image:
      linear-gradient(158deg, rgba(22, 34, 56, .88) 0%, rgba(12, 19, 34, .93) 100%);
  }
  .pricing-card--feat,
  .pricing-card--pop {
    background-image:
      linear-gradient(148deg, rgba(0, 71, 171, .34) 0%, rgba(0, 163, 255, .12) 42%, rgba(12, 19, 34, .95) 100%);
  }
  .niche-card--feat {
    background-image:
      linear-gradient(145deg, rgba(0, 71, 171, .24) 0%, rgba(0, 163, 255, .07) 55%, rgba(12, 19, 34, .92) 100%);
  }
  .cs-card--feat {
    background-image:
      linear-gradient(145deg, rgba(6, 18, 42, .95) 0%, rgba(12, 19, 34, .98) 100%);
  }
}