/* =========================================================================
   VIVEK DIGITAL — About Page Animation System ("The Throughline")
   Scoped exclusively to body.page-id-332 (About). Never loads elsewhere.
   Shares brand tokens with the homepage "Ledger" system but uses different
   techniques (SVG line-draw instead of canvas particles) so it reads as a
   companion, not a repeat.
   Tokens: primary #1E3A8A, gold #C9A227, gold-light #E4C664, bg #0B1120.
   ========================================================================= */

body.page-id-332 {
  --ab-gold: #C9A227;
  --ab-gold-light: #E4C664;
  --ab-primary: #1E3A8A;
  --ab-hairline: rgba(231, 236, 245, 0.12);
  --ab-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- base reveal primitives (opacity/transform only, zero CLS) ---- */
body.page-id-332 .ab-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ab-ease), transform 0.85s var(--ab-ease);
  transition-delay: var(--ab-delay, 0ms);
}
body.page-id-332 .ab-reveal.ab-in {
  opacity: 1;
  transform: translateY(0);
}
body.page-id-332 .ab-reveal-blur {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity 0.75s var(--ab-ease), transform 0.75s var(--ab-ease), filter 0.75s var(--ab-ease);
  transition-delay: var(--ab-delay, 0ms);
}
body.page-id-332 .ab-reveal-blur.ab-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* =========================================================================
   1) ABOUT HERO — "Digital Identity Reveal"
   ========================================================================= */
body.page-id-332 section.elementor-element-in001sec {
  position: relative;
  overflow: hidden;
}
/* slow, soft light sheen behind hero content — distinct from homepage's grid+blobs */
body.page-id-332 section.elementor-element-in001sec::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(201, 162, 39, 0.06) 48%, transparent 66%);
  background-size: 220% 220%;
  animation: ab-sheen-drift 16s ease-in-out infinite alternate;
}
@keyframes ab-sheen-drift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
body.page-id-332 section.elementor-element-in001sec > .elementor-container {
  position: relative;
  z-index: 1;
}

/* heading: blur -> sharp + upward (JS wraps into a single reveal target, no word-split here — different from homepage) */
body.page-id-332 section.elementor-element-in001sec .elementor-heading-title {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(9px);
  transition: opacity 0.75s var(--ab-ease), transform 0.75s var(--ab-ease), filter 0.75s var(--ab-ease);
}
body.page-id-332 section.elementor-element-in001sec.ab-hero-in .elementor-heading-title {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* eyebrow + supporting text + CTA/image: sequential stagger after heading */
body.page-id-332 section.elementor-element-in001sec .elementor-widget-text-editor,
body.page-id-332 section.elementor-element-in001sec .elementor-widget-image {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ab-ease), transform 0.7s var(--ab-ease);
  transition-delay: var(--ab-delay, 0ms);
}
body.page-id-332 section.elementor-element-in001sec.ab-hero-in .elementor-widget-text-editor,
body.page-id-332 section.elementor-element-in001sec.ab-hero-in .elementor-widget-image {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   3) ABOUT IMAGE — zoom-out+blur -> sharp settle, light sweep, hover depth
   ========================================================================= */
body.page-id-332 .elementor-element-in001img .elementor-widget-container {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
body.page-id-332 .elementor-element-in001img img {
  transition: transform 1.2s var(--ab-ease), filter 1.2s var(--ab-ease);
  transform: scale(1.06);
  filter: blur(4px) saturate(0.92);
}
body.page-id-332 .elementor-element-in001img.ab-in img {
  transform: scale(1);
  filter: blur(0) saturate(1);
}
/* one-time light sweep across the image on reveal */
body.page-id-332 .elementor-element-in001img .elementor-widget-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-140%);
}
body.page-id-332 .elementor-element-in001img.ab-in .elementor-widget-container::after {
  animation: ab-image-sweep 1.1s var(--ab-ease) 0.5s 1;
}
@keyframes ab-image-sweep {
  to { transform: translateX(140%); }
}
/* desktop hover: slight scale + parallax tilt via JS-set custom props */
@media (hover: hover) and (pointer: fine) {
  body.page-id-332 .elementor-element-in001img img {
    transition: transform 0.5s var(--ab-ease), filter 1.2s var(--ab-ease);
  }
  body.page-id-332 .elementor-element-in001img:hover img {
    transform: scale(1.035) translate3d(calc(var(--ab-px, 0) * 1px), calc(var(--ab-py, 0) * 1px), 0);
  }
}

/* =========================================================================
   2) WHO WE ARE — Throughline growth path between Founder / Mission columns
   ========================================================================= */
body.page-id-332 section.elementor-element-in002sec {
  position: relative;
}
body.page-id-332 .ab-throughline-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}
body.page-id-332 section.elementor-element-in002sec > .elementor-container {
  position: relative;
  z-index: 1;
}
body.page-id-332 .ab-throughline-svg path {
  fill: none;
  stroke: url(#ab-throughline-gradient);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.6s var(--ab-ease);
}
body.page-id-332 section.elementor-element-in002sec.ab-in .ab-throughline-svg path {
  stroke-dashoffset: 0;
}
body.page-id-332 .ab-throughline-svg circle {
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.page-id-332 section.elementor-element-in002sec.ab-in .ab-throughline-svg circle {
  opacity: 1;
  transition-delay: 1.4s;
}

/* =========================================================================
   4) OUR APPROACH — "What We Stand On" progressive numbered timeline
   ========================================================================= */
body.page-id-332 section.elementor-element-in003sec {
  position: relative;
}
body.page-id-332 .ab-timeline-svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 68px;
  width: 3px;
  z-index: 0;
  pointer-events: none;
}
body.page-id-332 .ab-timeline-svg rect {
  fill: var(--ab-hairline);
}
body.page-id-332 .ab-timeline-svg .ab-timeline-fill {
  fill: url(#ab-timeline-gradient);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s var(--ab-ease);
}
body.page-id-332 section.elementor-element-in003sec.ab-in .ab-timeline-fill {
  transform: scaleY(1);
}

body.page-id-332 [class*="elementor-element-row0"][class*="sec"] {
  opacity: 0.35;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ab-ease), transform 0.6s var(--ab-ease);
}
body.page-id-332 [class*="elementor-element-row0"][class*="sec"].ab-step-active {
  opacity: 1;
  transform: translateY(0);
}
body.page-id-332 [class*="elementor-element-row0"][class*="numcol"] .elementor-heading-title {
  display: inline-block;
  transition: transform 0.4s var(--ab-ease), color 0.4s ease, text-shadow 0.4s ease;
}
body.page-id-332 [class*="elementor-element-row0"][class*="sec"].ab-step-active [class*="numcol"] .elementor-heading-title {
  transform: scale(1.12);
  color: var(--ab-gold-light) !important;
  text-shadow: 0 0 18px rgba(228, 198, 100, 0.35);
}

/* =========================================================================
   5) SEGMENT CARDS ("Who We Work With") — staggered blur-in + hover
   ========================================================================= */
body.page-id-332 section.elementor-element-in005sec .elementor-column {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);
  transition: opacity 0.75s var(--ab-ease), transform 0.75s var(--ab-ease), filter 0.75s var(--ab-ease);
  transition-delay: var(--ab-delay, 0ms);
  border-radius: 12px;
}
body.page-id-332 section.elementor-element-in005sec.ab-in .elementor-column {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
body.page-id-332 section.elementor-element-in005sec .elementor-column {
  transition: opacity 0.75s var(--ab-ease), transform 0.75s var(--ab-ease), filter 0.75s var(--ab-ease), box-shadow 0.35s var(--ab-ease), border-color 0.35s var(--ab-ease);
  border: 1px solid transparent;
}
body.page-id-332 section.elementor-element-in005sec .elementor-column:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 162, 39, 0.35);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(201, 162, 39, 0.12);
}
body.page-id-332 section.elementor-element-in005sec .elementor-widget-text-editor:first-child p {
  transition: letter-spacing 0.35s ease, color 0.35s ease;
}
body.page-id-332 section.elementor-element-in005sec .elementor-column:hover .elementor-widget-text-editor:first-child p {
  letter-spacing: 0.5px;
  color: var(--ab-gold-light);
}

/* =========================================================================
   9) micro-interactions — buttons + links (independent of homepage rules)
   ========================================================================= */
body.page-id-332 .elementor-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ab-ease), box-shadow 0.35s var(--ab-ease);
}
body.page-id-332 .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.26) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ab-ease);
}
body.page-id-332 .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(201, 162, 39, 0.24);
}
body.page-id-332 .elementor-button:hover::before {
  transform: translateX(120%);
}
body.page-id-332 a:not(.elementor-button) {
  position: relative;
}
body.page-id-332 .elementor-widget-text-editor a:not(.elementor-button)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: var(--ab-gold-light);
  transition: width 0.3s var(--ab-ease);
}
body.page-id-332 .elementor-widget-text-editor a:not(.elementor-button):hover::after {
  width: 100%;
}

/* =========================================================================
   11) subtle background motion — final CTA section
   ========================================================================= */
body.page-id-332 section.elementor-element-in006sec {
  position: relative;
  overflow: hidden;
}
body.page-id-332 section.elementor-element-in006sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 240px at 25% 30%, rgba(201, 162, 39, 0.10), transparent 60%),
    radial-gradient(520px 260px at 78% 72%, rgba(30, 58, 138, 0.20), transparent 60%);
  animation: ab-sheen-drift 20s ease-in-out infinite alternate;
}
body.page-id-332 section.elementor-element-in006sec > .elementor-container {
  position: relative;
  z-index: 1;
}

/* =========================================================================
   10) premium cursor (desktop only, independent instance for this page)
   ========================================================================= */
body.page-id-332 .ab-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 198, 100, 0.09), transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(var(--ab-cx, -300px), var(--ab-cy, -300px), 0);
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.page-id-332 .ab-cursor-glow.ab-cursor-active {
  opacity: 1;
}

/* =========================================================================
   Mobile optimization
   ========================================================================= */
@media (max-width: 991px) {
  body.page-id-332 .ab-cursor-glow { display: none; }
}
@media (max-width: 767px) {
  body.page-id-332 section.elementor-element-in001sec::before,
  body.page-id-332 section.elementor-element-in006sec::before {
    animation: none;
  }
  body.page-id-332 .elementor-element-in001img img,
  body.page-id-332 section.elementor-element-in001sec .elementor-heading-title,
  body.page-id-332 section.elementor-element-in005sec .elementor-column {
    filter: none !important; /* blur filters are costly on low-end mobile GPUs */
  }
  body.page-id-332 .ab-throughline-svg,
  body.page-id-332 .ab-timeline-svg {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-332 * {
    animation: none !important;
    transition: none !important;
  }
  body.page-id-332 .ab-reveal,
  body.page-id-332 .ab-reveal-blur,
  body.page-id-332 section.elementor-element-in001sec .elementor-heading-title,
  body.page-id-332 section.elementor-element-in001sec .elementor-widget-text-editor,
  body.page-id-332 section.elementor-element-in001sec .elementor-widget-image,
  body.page-id-332 .elementor-element-in001img img,
  body.page-id-332 section.elementor-element-in005sec .elementor-column,
  body.page-id-332 [class*="elementor-element-row0"][class*="sec"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  body.page-id-332 .ab-throughline-svg path,
  body.page-id-332 .ab-timeline-fill {
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  body.page-id-332 .ab-cursor-glow {
    display: none !important;
  }
}