/* =========================================================================
   VIVEK DIGITAL — Signature Animation System
   "The Ledger" — a golden-thread motion language for a precision-led,
   balance-sheet-honest digital marketing agency.
   Homepage only (body.home). CSS custom properties pulled from the live
   Elementor kit: primary #1E3A8A, gold #C9A227, gold-light #E4C664,
   bg #0B1120, surface #141F38, text #E7ECF5.
   ========================================================================= */

body.home {
  --vd-primary: #1E3A8A;
  --vd-gold: #C9A227;
  --vd-gold-light: #E4C664;
  --vd-text: #E7ECF5;
  --vd-muted: #9AA5B8;
  --vd-hairline: rgba(231, 236, 245, 0.12);
  --vd-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vd-mx: 0px;
  --vd-my: 0px;
}

/* ---- base reveal system (no CLS: opacity/transform only) ---- */
body.home .vd-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--vd-ease), transform 0.9s var(--vd-ease);
  transition-delay: var(--vd-delay, 0ms);
  will-change: opacity, transform;
}
body.home .vd-reveal.vd-in {
  opacity: 1;
  transform: translateY(0);
}
body.home .vd-reveal.vd-in { will-change: auto; }

/* =========================================================================
   1) THE LEDGER LINE — signature gold thread that "draws" itself
   Used under hero eyebrow, section eyebrows, and as nav-link underlines.
   ========================================================================= */
body.home .elementor-widget-text-editor > .elementor-widget-container > p,
body.home .elementor-widget-text-editor p {
  position: relative;
}
body.home .vd-eyebrow {
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
}
body.home .vd-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--vd-gold), var(--vd-gold-light));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--vd-ease) 0.25s;
}
body.home .vd-reveal.vd-in .vd-eyebrow::after {
  transform: scaleX(1);
}

/* nav link ledger underline */
body.home .xpro-elementor-horizontal-navbar-nav .menu-link {
  position: relative;
  transition: color 0.25s ease;
}
body.home .xpro-elementor-horizontal-navbar-nav .menu-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--vd-gold), var(--vd-gold-light));
  transition: width 0.35s var(--vd-ease), left 0.35s var(--vd-ease);
}
body.home .xpro-elementor-horizontal-navbar-nav .nav-item:hover .menu-link::after,
body.home .xpro-elementor-horizontal-navbar-nav .nav-item.current-menu-item .menu-link::after {
  width: 100%;
  left: 0%;
}
body.home .xpro-elementor-horizontal-navbar-nav .menu-link:hover {
  color: var(--vd-gold-light);
}

/* ---- navbar entrance + scroll state ---- */
body.home .xpro-theme-builder-header {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.7s var(--vd-ease), transform 0.7s var(--vd-ease),
    background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
body.home .xpro-theme-builder-header.vd-nav-in {
  opacity: 1;
  transform: translateY(0);
}
body.home .xpro-theme-builder-header.vd-scrolled {
  background-color: rgba(11, 17, 32, 0.72);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 1px 0 var(--vd-hairline);
}

/* social icons + footer icons */
body.home .elementor-social-icon {
  transition: transform 0.3s var(--vd-ease), box-shadow 0.3s var(--vd-ease), color 0.3s ease;
}
body.home .elementor-social-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(201, 162, 39, 0.25);
  color: var(--vd-gold-light) !important;
}

/* =========================================================================
   2) PRECISION REVEAL + HERO — entrance choreography & floating backdrop
   ========================================================================= */
body.home section.elementor-element-25c9f0d {
  position: relative;
  overflow: hidden;
}
/* fine ledger-grid backdrop, drifting very slowly, decorative only */
body.home section.elementor-element-25c9f0d::before {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--vd-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--vd-hairline) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.35;
  transform: translate3d(calc(var(--vd-mx) * 1px), calc(var(--vd-my) * 1px), 0);
  transition: transform 0.6s ease-out;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 85%);
}
/* soft drifting gold/blue glow blobs */
body.home section.elementor-element-25c9f0d::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 320px at 15% 20%, rgba(201, 162, 39, 0.10), transparent 60%),
    radial-gradient(480px 360px at 85% 75%, rgba(30, 58, 138, 0.22), transparent 60%);
  background-repeat: no-repeat;
  animation: vd-drift 22s ease-in-out infinite alternate;
}
@keyframes vd-drift {
  0%   { background-position: 0% 0%, 0% 0%; }
  100% { background-position: 4% 6%, -4% -6%; }
}
body.home section.elementor-element-25c9f0d > .elementor-container {
  position: relative;
  z-index: 1;
}

/* hero text stagger (JS assigns --vd-delay per child) */
body.home section.elementor-element-25c9f0d .elementor-widget {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--vd-ease), transform 0.9s var(--vd-ease);
  transition-delay: var(--vd-delay, 0ms);
}
body.home section.elementor-element-25c9f0d.vd-hero-in .elementor-widget {
  opacity: 1;
  transform: translateY(0);
}

/* premium CTA button sheen + lift, applied to every Elementor button on the page */
body.home .elementor-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--vd-ease), box-shadow 0.35s var(--vd-ease);
}
body.home .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.28) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--vd-ease);
}
body.home .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(201, 162, 39, 0.28);
}
body.home .elementor-button:hover::before {
  transform: translateX(120%);
}

/* =========================================================================
   3) TRACE-BORDER CARDS — service cards & testimonials
   ========================================================================= */
body.home .elementor-widget-icon-box,
body.home .elementor-widget-testimonial {
  position: relative;
  border-radius: 14px;
}
body.home .elementor-widget-icon-box::before,
body.home .elementor-widget-testimonial::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg, var(--vd-gold-light), transparent 25%, transparent 75%, var(--vd-gold-light));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: vd-rotate 3.2s linear infinite paused;
  pointer-events: none;
}
body.home .elementor-widget-icon-box:hover::before,
body.home .elementor-widget-testimonial:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes vd-rotate {
  to { --vd-angle: 360deg; transform: rotate(1turn); }
}
body.home .elementor-icon-box-wrapper,
body.home .elementor-testimonial-wrapper {
  transition: transform 0.4s var(--vd-ease);
}
body.home .elementor-widget-icon-box:hover .elementor-icon-box-wrapper,
body.home .elementor-widget-testimonial:hover .elementor-testimonial-wrapper {
  transform: translateY(-6px);
}
body.home .elementor-icon-box-icon .elementor-icon svg {
  transition: transform 0.45s var(--vd-ease), filter 0.45s ease;
}
body.home .elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon svg {
  transform: scale(1.12) rotate(-4deg);
  filter: drop-shadow(0 4px 10px rgba(201, 162, 39, 0.35));
}

/* =========================================================================
   4) TICKING LEDGER COUNTERS — synced progress fill + settle glow
   ========================================================================= */
body.home .elementor-counter-number-wrapper {
  position: relative;
}
body.home .elementor-counter-number {
  font-variant-numeric: tabular-nums;
}
body.home .vd-counter-progress {
  margin-top: 10px;
  height: 2px;
  width: 100%;
  max-width: 120px;
  background: var(--vd-hairline);
  border-radius: 2px;
  overflow: hidden;
}
body.home .vd-counter-progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--vd-gold), var(--vd-gold-light));
  transition: width linear;
}
body.home .elementor-counter.vd-fill .vd-counter-progress > span {
  width: 100%;
}
body.home .elementor-counter.vd-settle .elementor-counter-number {
  animation: vd-settle-glow 900ms ease-out;
}
@keyframes vd-settle-glow {
  0% { text-shadow: 0 0 0 rgba(228, 198, 100, 0); }
  35% { text-shadow: 0 0 14px rgba(228, 198, 100, 0.55); }
  100% { text-shadow: 0 0 0 rgba(228, 198, 100, 0); }
}

/* =========================================================================
   5) GROWTH PATH — CTA section aurora + drawn trend line
   ========================================================================= */
body.home section.elementor-element-18c81b2 {
  position: relative;
  overflow: hidden;
}
body.home section.elementor-element-18c81b2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 260px at 20% 30%, rgba(201, 162, 39, 0.14), transparent 60%),
    radial-gradient(600px 300px at 80% 70%, rgba(30, 58, 138, 0.28), transparent 60%);
  animation: vd-drift 26s ease-in-out infinite alternate;
}
body.home section.elementor-element-18c81b2 > .elementor-container {
  position: relative;
  z-index: 1;
}
body.home .vd-growth-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
body.home .vd-growth-svg path {
  fill: none;
  stroke: url(#vd-growth-gradient);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.8s var(--vd-ease);
}
body.home section.elementor-element-18c81b2.vd-in .vd-growth-svg path {
  stroke-dashoffset: 0;
}

/* =========================================================================
   6) WHY-CHOOSE-US image reveal
   ========================================================================= */
body.home section.elementor-element-971362f .elementor-widget-image img {
  transition: transform 1.1s var(--vd-ease), filter 1.1s var(--vd-ease);
  filter: saturate(0.9);
}
body.home section.elementor-element-971362f.vd-in .elementor-widget-image img {
  transform: scale(1);
}
body.home section.elementor-element-971362f .elementor-widget-image {
  overflow: hidden;
  border-radius: 10px;
}
body.home section.elementor-element-971362f:not(.vd-in) .elementor-widget-image img {
  transform: scale(1.08);
}

/* =========================================================================
   Footer
   ========================================================================= */
body.home #xpro-theme-builder-footer {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--vd-ease), transform 0.9s var(--vd-ease);
}
body.home #xpro-theme-builder-footer.vd-in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   Accessibility — respect prefers-reduced-motion completely
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  body.home * {
    animation: none !important;
    transition: none !important;
  }
  body.home .vd-reveal,
  body.home section.elementor-element-25c9f0d .elementor-widget,
  body.home .xpro-theme-builder-header,
  body.home #xpro-theme-builder-footer {
    opacity: 1 !important;
    transform: none !important;
  }
  body.home .vd-eyebrow::after,
  body.home .vd-growth-svg path {
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  body.home .vd-counter-progress > span {
    width: 100% !important;
  }
}

/* Mobile: disable mouse-parallax offsets, keep everything else */
@media (max-width: 767px) {
  body.home section.elementor-element-25c9f0d::before {
    transform: none;
  }
}