/* Ventega Experience Layer v8.5: atmospheric canvas, finite reveals, light-mode QA. */
:root,html[data-theme="dark"]{
  --fx-primary:139,92,246;
  --fx-secondary:178,154,255;
  --fx-highlight:205,190,255;
  --fx-card-glow:rgba(139,92,246,.20);
  --fx-card-line:rgba(178,154,255,.34);
}
html[data-theme="light"]{
  --fx-primary:201,162,77;
  --fx-secondary:232,214,162;
  --fx-highlight:159,122,46;
  --fx-card-glow:rgba(201,162,77,.14);
  --fx-card-line:rgba(159,122,46,.30);
}

/* One fixed background layer; the visible design comes directly and solely
   from the delivered V17 assets – one continuous image across the whole
   viewport, no masks, no derived variants, no extra layers. Both theme
   images stay stacked so a theme switch is a plain opacity crossfade
   without any empty, black or white frame. */
.vt-energy-layer{
  position:fixed;inset:0;z-index:0;
  width:100vw;max-width:100%;
  height:100vh;height:100dvh;
  overflow:hidden;pointer-events:none;contain:strict;isolation:isolate;
}
/* The visible background image is COMPLETELY STATIC: no drift, no zoom, no
   parallax, no scroll or theme movement. Only the opacity crossfade between
   the two theme images remains. All liveliness comes from the separate
   decoration overlay below. */
.vt-bg-image{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transform:none;
  animation:none;
  transition:opacity .7s ease;
}
.vt-bg-dark{background-image:url("../assets/backgrounds/bg-dark-final-v17.webp")}
.vt-bg-light{background-image:url("../assets/backgrounds/bg-light-final-v17.webp")}
html[data-theme="dark"] .vt-bg-light{opacity:0}
html[data-theme="light"] .vt-bg-dark{opacity:0}

/* Particle overlay: the ONLY dynamic layer. Sits above the static
   background image and below all page content. Exactly 8 premium drift
   particles on desktop (4 up to 600px) – no orbs, no fog, no canvas. */
.vt-particle-overlay{
  position:fixed;inset:0;z-index:0;
  width:100vw;max-width:100%;
  height:100vh;height:100dvh;
  overflow:hidden;pointer-events:none;contain:strict;isolation:isolate;
}
.vt-particle-overlay i{
  position:absolute;display:block;border-radius:50%;
  width:var(--ps,3px);height:var(--ps,3px);
  animation:vtParticleFloat var(--pt,14s) ease-in-out var(--pdl,0s) infinite alternate;
  will-change:transform;
}
.vt-particle-overlay i.vt-p-soft{filter:blur(1px)}
html[data-theme="dark"] .vt-particle-overlay i{opacity:var(--pod,.5)}
html[data-theme="light"] .vt-particle-overlay i{opacity:var(--pol,.35)}
html[data-theme="dark"] .vt-particle-overlay i.vt-p-lila{background:#b9a3ff;box-shadow:0 0 6px rgba(167,139,250,.55)}
html[data-theme="dark"] .vt-particle-overlay i.vt-p-gold{background:#e3c684;box-shadow:0 0 6px rgba(217,182,111,.5)}
html[data-theme="light"] .vt-particle-overlay i.vt-p-lila{background:#8b5cf6;box-shadow:0 0 5px rgba(139,92,246,.35)}
html[data-theme="light"] .vt-particle-overlay i.vt-p-gold{background:#b3852e;box-shadow:0 0 5px rgba(168,120,37,.35)}
@keyframes vtParticleFloat{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--pdx,4vw),var(--pdy,-4vh),0)}
}
@media(max-width:600px){
  .vt-particle-overlay i:nth-child(n+5){display:none}
}
.vt-particle-overlay.vt-fx-paused i{animation-play-state:paused}
html.motion-reduce .vt-particle-overlay{display:none}
.wrap,nav,body>header,body>footer{position:relative;z-index:1}
/* The delivered images are the complete visual base: the old page tint
   overlay stays off once the asset layer is active. */
html.vt-canvas-ready body::before{opacity:0!important}

/* The early bootstrap applies this class before first paint. Reveal targets
   therefore never flash fully visible before their one-time observer starts. */
html.vt-reveal-preflight :is(
  .page-hero>*,.vi-hero-rest,.page-intro,.sec-head,
  .cards>*,.steps>*,.stage-card,.stage-sub>*,.flow>*,.founders>*,.founders-clean>*,
  .about-panel-refined,.about-values>*,.panel,.solution,.cta,.final,.prob-card,.kpi,
  .svc,.path-step,.legal-section,.legal-card,.next-grid>*,.sec-panel,.glass,.mock,
  .diagram,.diagram-wrap,.hero-anim,footer
){opacity:0}

/* Hidden state only exists after JavaScript opted the page in. */
html.vt-reveal-init .vt-reveal{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.989);
  transition:
    opacity .62s cubic-bezier(.2,.72,.2,1),
    transform .72s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--vt-delay,0ms);
  will-change:opacity,transform;
}
html.vt-reveal-init.vt-reveal-prep .vt-reveal{transition:none!important}
html.vt-reveal-init .vt-reveal[data-vt-direction="left"]{transform:translate3d(-22px,16px,0) scale(.991)}
html.vt-reveal-init .vt-reveal[data-vt-direction="right"]{transform:translate3d(22px,16px,0) scale(.991)}
html.vt-reveal-init .vt-reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
html.vt-reveal-init .vt-reveal.vt-reveal-done{will-change:auto}
html.motion-reduce.vt-reveal-init .vt-reveal{
  transform:none!important;
  transition:opacity .24s ease!important;
  transition-delay:var(--vt-delay,0ms)!important;
}

/* Refined interactions use compositor-friendly transforms. */
.card,.stage-card,.step,.founder,.founder-clean,.next-card,.path-chip,.prob-card,.panel,.legal-section,.legal-card{
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s cubic-bezier(.16,1,.3,1),background-color .28s ease;
}
.card:hover,.stage-card:hover,.step:hover,.founder:hover,.founder-clean:hover,.next-card:hover,.prob-card:hover{
  border-color:var(--fx-card-line)!important;
  box-shadow:0 14px 36px var(--fx-card-glow)!important;
  transform:translateY(-3px);
}
html[data-theme="light"] .card:hover,
html[data-theme="light"] .stage-card:hover,
html[data-theme="light"] .step:hover,
html[data-theme="light"] .founder:hover,
html[data-theme="light"] .founder-clean:hover,
html[data-theme="light"] .next-card:hover,
html[data-theme="light"] .prob-card:hover{box-shadow:0 16px 38px rgba(122,85,24,.12)!important}

/* Comprehensive light-theme readability layer. */
html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] section,
html[data-theme="light"] .wrap{color:var(--text)}
html[data-theme="light"] .about-lead,
html[data-theme="light"] .founder-clean h3{color:var(--text)!important}
html[data-theme="light"] .about-copy,
html[data-theme="light"] .about-statement,
html[data-theme="light"] .about-founders .sec-head p,
html[data-theme="light"] .about-values .card p,
html[data-theme="light"] .about-page .page-intro,
html[data-theme="light"] .founder-bio{color:var(--muted)!important}
html[data-theme="light"] .about-page .page-intro,
html[data-theme="light"] .founder-clean,
html[data-theme="light"] .about-panel-refined,
html[data-theme="light"] .solution,
html[data-theme="light"] .cta,
html[data-theme="light"] .final,
html[data-theme="light"] .sec-panel,
html[data-theme="light"] .page-intro,
html[data-theme="light"] .stage-card,
html[data-theme="light"] .panel{
  background:linear-gradient(148deg,rgba(255,255,255,.98),rgba(248,244,235,.94))!important;
  border-color:var(--border-soft)!important;color:var(--text)!important;
  box-shadow:0 14px 38px rgba(108,76,22,.075);
}
html[data-theme="light"] .about-panel-refined p,
html[data-theme="light"] .about-page .page-intro,
html[data-theme="light"] .about-copy,
html[data-theme="light"] .about-statement,
html[data-theme="light"] .about-values .card p{color:var(--muted)!important}
html[data-theme="light"] .btn-ghost{
  background:rgba(255,255,255,.58)!important;color:var(--text)!important;
  border-color:rgba(166,109,8,.34)!important;box-shadow:none!important;
}
html[data-theme="light"] .legal-page{background:var(--bg)!important}

.vt-intro-replay{
  width:100%;min-height:42px;margin:2px 0 9px;padding:9px 12px;
  border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text);
  font:500 13px 'Inter',sans-serif;cursor:pointer;
}
.vt-intro-replay:hover,.vt-intro-replay:focus-visible{border-color:rgb(var(--fx-highlight));background:rgba(var(--fx-primary),.10)}

@media(max-width:720px){
  html.vt-reveal-init .vt-reveal{transform:translate3d(0,18px,0) scale(.993)}
}
@media(prefers-reduced-motion:reduce){
  html:not(.motion-force).vt-reveal-init .vt-reveal{transform:none;transition:opacity .24s ease}
}
