/* ==========================================================
   Vinayak Promoters – "Blueprint" motion pack (animations-pro.css)
   Calm, architectural motion: blueprint grid, drawn lines,
   shutter image reveals, dimension-line dividers, count-up stats.
   Uses the same <head> snippet (.va-anim) as the first pack.
   ========================================================== */
:root {
  --va-gold: #c9982a;
  --va-ink: #16130d;
  --va-ease: cubic-bezier(.16, 1, .3, 1);
  --va-smooth: cubic-bezier(.65, 0, .35, 1);
}
html { scroll-behavior: smooth; }

/* ---------- Scroll progress ---------- */
.va-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--va-gold); transform: scaleX(0); transform-origin: 0 50%;
  z-index: 9999; pointer-events: none;
}

/* ---------- Hero: blueprint grid expands from the visual ---------- */
.va-anim .hero { position: relative; overflow: hidden; }
.va-anim .hero-grid { position: relative; z-index: 1; }
.va-blueprint {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(201,152,42,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,152,42,.16) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 85%);
          mask-image: linear-gradient(to left, #000 10%, transparent 85%);
  clip-path: circle(0% at 78% 42%);
  transition: clip-path 2.4s var(--va-smooth) .1s;
}
.va-in .va-blueprint { clip-path: circle(150% at 78% 42%); }

/* ---------- Headline: masked word rise ---------- */
.va-anim .va-w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0 .04em .14em; margin: 0 .22em -.14em -.04em;   /* word gap comes from margin */
}
.va-anim .va-wi {
  display: inline-block; transform: translateY(110%);
  transition: transform 1.1s var(--va-ease);
  transition-delay: calc(var(--d, 0ms) + var(--i) * 70ms);
}
.va-in .va-wi { transform: none; }

/* gold underline draws under the highlighted phrase */
.va-anim .hero h1 em {
  background: linear-gradient(var(--va-gold), var(--va-gold)) 0 100% / 0% 2px no-repeat;
  padding-bottom: .06em;
  transition: background-size 1.3s var(--va-smooth) 1.4s;
}
.va-anim .hero.va-in h1 em { background-size: 100% 2px; }

/* ---------- Hero supporting items ---------- */
.va-anim .va-item {
  animation: va-rise .9s var(--va-ease) backwards paused;
  animation-delay: calc(750ms + var(--n, 0) * 110ms);
}
.va-in .va-item { animation-play-state: running; }
@keyframes va-rise { from { opacity: 0; translate: 0 18px; } }

.va-anim .va-after {
  opacity: 0; transition: opacity 1s var(--va-ease) .35s;
}
.va-anim .va-after.va-in { opacity: 1; }

/* ---------- Hero SVG: blueprint line-drawing ---------- */
.va-anim .va-draw {
  stroke-dasharray: var(--len);
  animation: va-draw 2.2s var(--va-smooth) backwards paused;
  animation-delay: calc(300ms + var(--k) * 90ms);
}
.va-in .va-draw { animation-play-state: running; }
@keyframes va-draw { from { stroke-dashoffset: var(--len); fill-opacity: 0; } }
.va-anim .va-pop {
  animation: va-fade 1.2s var(--va-ease) backwards paused;
  animation-delay: calc(900ms + var(--k) * 60ms);
}
.va-in .va-pop { animation-play-state: running; }
@keyframes va-fade { from { opacity: 0; } }
.hero-visual svg { translate: 0 var(--py, 0px); will-change: translate; }

/* ---------- Hero badges: slide in from the sides ---------- */
.va-anim .hero-badge { animation: va-side 1s var(--va-ease) backwards paused; }
.va-anim .hero-badge-1 { --dx: -28px; animation-delay: 1.5s; }
.va-anim .hero-badge-2 { --dx: 28px;  animation-delay: 1.75s; }
.va-in .hero-badge { animation-play-state: running; }
@keyframes va-side { from { opacity: 0; translate: var(--dx) 0; } }

/* ---------- Dimension-line divider above section headings ---------- */
.va-dim { display: block; position: relative; height: 9px; width: min(140px, 40%); margin-bottom: 18px; }
.va-dim::before {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
  background: var(--va-gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.3s var(--va-smooth);
}
.va-dim::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background:
    linear-gradient(var(--va-gold), var(--va-gold)) 0 50% / 1px 9px no-repeat,
    linear-gradient(var(--va-gold), var(--va-gold)) 100% 50% / 1px 9px no-repeat;
  transition: opacity .5s ease .9s;
}
.va-dim.va-in::before { transform: scaleX(1); }
.va-dim.va-in::after { opacity: 1; }

/* ---------- Image slide-in (no wrapper, so layouts never break) ---------- */
.va-anim .va-rev {
  clip-path: inset(0 100% 0 0); translate: -5% 0; scale: 1.1;
  transition: clip-path 1.2s var(--va-smooth), translate 1.4s var(--va-ease),
              scale 1.6s var(--va-ease), transform .6s var(--va-ease);
}
.va-anim .va-rev.va-in { clip-path: inset(0 0 0 0); translate: 0 0; scale: 1; }

/* ---------- Cards: rise in, gold top-line draws, tidy hover ---------- */
.va-anim .va-stagger > * {
  opacity: 0; translate: 0 28px;
  transition: opacity .9s var(--va-ease), translate .9s var(--va-ease),
              transform .5s var(--va-ease), box-shadow .5s var(--va-ease);
  transition-delay: calc(var(--s, 0) * 110ms), calc(var(--s, 0) * 110ms), 0s, 0s;
}
.va-anim .va-stagger.va-in > * { opacity: 1; translate: 0 0; }
.va-line {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 5;
  background: var(--va-gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1s var(--va-smooth); transition-delay: calc(.4s + var(--s, 0) * 110ms);
  pointer-events: none;
}
.va-anim .va-stagger.va-in > * > .va-line { transform: scaleX(1); }
@media (hover: hover) {
  .va-anim .va-stagger.va-in > *:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(22,19,13,.45); }
}

/* ---------- Buttons: ink fill sweeps up on hover ---------- */
a[class*="btn"]:not(.replay-btn), button[class*="btn"]:not(.replay-btn), .btn:not(.replay-btn) {
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .4s ease, border-color .4s ease;
}
a[class*="btn"]:not(.replay-btn)::before, button[class*="btn"]:not(.replay-btn)::before, .btn:not(.replay-btn)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--va-ink); transform: translateY(101%);
  transition: transform .55s var(--va-ease);
}
@media (hover: hover) {
  a[class*="btn"]:not(.replay-btn):hover, button[class*="btn"]:not(.replay-btn):hover, .btn:not(.replay-btn):hover { color: #fff; }
  a[class*="btn"]:not(.replay-btn):hover::before, button[class*="btn"]:not(.replay-btn):hover::before, .btn:not(.replay-btn):hover::before { transform: translateY(0); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}