/* =========================================================================
   VIVEK DIGITAL — "The Ledger" v2 additions
   Digital-energy hero flow, blur-to-focus heading, magnetic cursor,
   network visualization, idle CTA glow, section-transition light seams.
   All homepage-only (body.home), all guarded by prefers-reduced-motion
   and disabled/simplified below 768px per the mobile-optimization brief.
   ========================================================================= */

/* ---- canvases: decorative, never intercept clicks ---- */
body.home .vd-flow-canvas,
body.home .vd-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
body.home section.elementor-element-25c9f0d > .elementor-container,
body.home section.elementor-element-971362f > .elementor-container {
  position: relative;
  z-index: 1;
}
body.home section.elementor-element-971362f {
  position: relative;
  overflow: hidden;
}

/* ---- 2) hero heading: blur -> sharp + upward, per-word stagger ---- */
body.home section.elementor-element-25c9f0d .elementor-heading-title .vd-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(7px);
  transition: opacity 0.55s var(--vd-ease), transform 0.55s var(--vd-ease), filter 0.55s var(--vd-ease);
  transition-delay: var(--vd-word-delay, 0ms);
  will-change: opacity, transform, filter;
}
body.home section.elementor-element-25c9f0d.vd-hero-in .elementor-heading-title .vd-word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---- generic blur-to-sharp reveal variant (headings only, used sparingly) ---- */
body.home .vd-reveal-blur {
  opacity: 0;
  transform: translateY(20px) scale(0.99);
  filter: blur(6px);
  transition: opacity 0.7s var(--vd-ease), transform 0.7s var(--vd-ease), filter 0.7s var(--vd-ease);
  transition-delay: var(--vd-delay, 0ms);
}
body.home .vd-reveal-blur.vd-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ---- 3) CTA idle breathing glow (very subtle, slow, non-flashing) ---- */
body.home .elementor-button {
  animation: vd-idle-glow 5.5s ease-in-out infinite;
}
@keyframes vd-idle-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(201, 162, 39, 0); }
  50% { box-shadow: 0 0 16px rgba(201, 162, 39, 0.18); }
}
body.home .elementor-button:hover {
  animation-play-state: paused;
}

/* ---- 4) service card blur-in + stronger existing hover glow ---- */
body.home .elementor-widget-icon-box.vd-reveal {
  filter: blur(4px);
  transition: opacity 0.8s var(--vd-ease), transform 0.8s var(--vd-ease), filter 0.8s var(--vd-ease);
  transition-delay: var(--vd-delay, 0ms);
}
body.home .elementor-widget-icon-box.vd-reveal.vd-in {
  filter: blur(0);
}

/* ---- 8) section transitions: thin animated light seam between sections ---- */
body.home section.elementor-top-section {
  position: relative;
}
body.home section.elementor-top-section::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.22), transparent);
  background-size: 200% 100%;
  animation: vd-seam-drift 14s linear infinite;
  pointer-events: none;
}
@keyframes vd-seam-drift {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ---- 9) premium cursor (desktop, pointer:fine only — JS also gates this) ---- */
body.home .vd-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 220px;
  margin-left: -110px;
  margin-top: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 198, 100, 0.10), transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(var(--vd-cx, -300px), var(--vd-cy, -300px), 0);
  transition: opacity 0.3s ease;
  opacity: 0;
}
body.home .vd-cursor-glow.vd-cursor-active {
  opacity: 1;
}
body.home .vd-cursor-glow.vd-cursor-cta {
  background: radial-gradient(circle, rgba(228, 198, 100, 0.18), transparent 70%);
}
body.home .elementor-button.vd-magnet {
  transition: transform 0.25s var(--vd-ease), box-shadow 0.35s var(--vd-ease);
}

/* =========================================================================
   Mobile / tablet: strip the heaviest effects per the performance brief
   ========================================================================= */
@media (max-width: 991px) {
  body.home .vd-cursor-glow { display: none; }
}
@media (max-width: 767px) {
  body.home .vd-flow-canvas,
  body.home .vd-network-canvas {
    display: none; /* JS also skips creating them below this width */
  }
  body.home .elementor-button {
    animation: none;
    box-shadow: none;
  }
  body.home section.elementor-top-section::after {
    animation: none;
  }
  body.home .elementor-widget-icon-box.vd-reveal,
  body.home section.elementor-element-25c9f0d .elementor-heading-title .vd-word,
  body.home .vd-reveal-blur {
    filter: none !important; /* blur filters are relatively expensive on low-end mobile GPUs */
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .vd-flow-canvas,
  body.home .vd-network-canvas,
  body.home .vd-cursor-glow {
    display: none !important;
  }
  body.home .elementor-button {
    animation: none !important;
  }
  body.home section.elementor-top-section::after {
    animation: none !important;
  }
  body.home .elementor-heading-title .vd-word,
  body.home .vd-reveal-blur,
  body.home .elementor-widget-icon-box.vd-reveal {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}