/*
  MVG v62 — Front door polish
  Scope: /executive, /impact, /solutions (display-only)
  Goals: Apple-level micro-motion without bloat; respects prefers-reduced-motion.
*/
/* ---------- Executive: hero trace background (v60.2) ---------- */

.page-executive .hero{
  position: relative;
}

/* Large, subtle “wave trace” behind the hero — a UI artifact, not decoration. */
.page-executive .exec-hero-trace{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -6px;
  width: min(1400px, calc(100% + 220px));
  height: 240px;
  pointer-events:none;
  z-index: 0;
  opacity: .92;
  filter: saturate(1.05);
}

.page-executive .exec-hero-trace svg{
  width:100%;
  height:100%;
  display:block;
}

.page-executive .exec-trace-base{
  fill:none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-executive .exec-trace-glow{
  fill:none;
  stroke: url(#execFlow);
  stroke-width: 10;
  opacity: .14;
  filter: url(#execGlow);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-executive .exec-trace-draw{
  fill:none;
  stroke: url(#execFlow);
  stroke-width: 2.9;
  filter: url(#execGlow);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}

.page-executive .exec-trace-dash{
  fill:none;
  stroke: rgba(255,255,255,.18);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .55;
  stroke-dasharray: 6 14;
}

.page-executive .exec-node{
  fill: rgba(255,255,255,.10);
  stroke: rgba(255,255,255,.22);
  stroke-width: 1;
}

.page-executive .exec-node-pulse{
  fill: rgba(124,92,255,.18);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.page-executive .exec-node-pulse.p1{ animation-delay: .48s; }
.page-executive .exec-node-pulse.p2{ animation-delay: .66s; }
.page-executive .exec-node-pulse.p3{ animation-delay: .92s; }


@media (prefers-reduced-motion: no-preference){
  .page-executive .exec-trace-draw{
        animation: execTraceDraw 1.35s var(--mvg-ease) .08s forwards;
  }
  .page-executive .exec-trace-dash{
        animation: none; /* one-shot draw is sufficient; keep dash as a static cue */
  }
  .page-executive .exec-node-pulse{
        animation: execNodePulse 1.25s var(--mvg-ease) 1 both;
  }
}

@keyframes execTraceDraw{ to { stroke-dashoffset: 0; } }
@keyframes execTraceDash{ from { stroke-dashoffset: 0; } to { stroke-dashoffset: -420; } }
@keyframes execNodePulse{
  0%{ opacity:0; transform: scale(.72); }
  38%{ opacity:.85; transform: scale(1.22); }
  100%{ opacity:0; transform: scale(1.65); }
}

/* One-sentence board result (non-technical, executive-safe). */
.page-executive .exec-outcome{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  max-width: 72ch;
}

.page-executive .exec-outcome .label{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted2);
}

.page-executive .exec-outcome .text{
  margin-top: 6px;
  font-size: 16px;
  color: var(--text);
  line-height: 1.45;
  font-weight: 600;
}

.page-executive .exec-outcome .accent{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 720px){
  .page-executive .exec-hero-trace{
    width: calc(100% + 80px);
    height: 200px;
    opacity: .84;
  }
  .page-executive .exec-outcome{
    padding: 11px 12px;
  }
  .page-executive .exec-outcome .text{
    font-size: 15px;
  }
}



/* ---------- Executive: Verify → Permit → Gate diagram polish ---------- */

.page-executive .diagram-card{
  overflow:hidden;
}

.page-executive .diagram-frame{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(1200px 360px at 20% 20%, rgba(124,92,255,0.10), transparent 55%),
    radial-gradient(900px 360px at 80% 70%, rgba(29,207,255,0.08), transparent 55%),
    rgba(10,11,13,0.65);
}

.page-executive .vpg-diagram{
  display:block;
  width:100%;
  height:auto;
}

.page-executive .vpg-path-base{
  fill:none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 4.2;
  stroke-linecap: round;
}

.page-executive .vpg-path-trace{
  fill:none;
  stroke: url(#flow);
  stroke-width: 4.6;
  stroke-linecap: round;
  filter: url(#glow);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.page-executive .vpg-path-glint{
  fill:none;
  stroke: url(#flow);
  stroke-width: 10;
  stroke-linecap: round;
  opacity: 0.13;
  stroke-dasharray: 120 880;
  stroke-dashoffset: 0;
}

.page-executive .vpg-node .vpg-core{
  fill: rgba(255,255,255,0.92);
}

.page-executive .vpg-node .vpg-halo{
  fill: rgba(124,92,255,0.13);
}

.page-executive .vpg-node .vpg-ring{
  fill:none;
  stroke: url(#flow);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.7);
}

.page-executive .vpg-label{
  font: 700 12px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: rgba(255,255,255,0.62);
}

.page-executive .vpg-sub{
  font: 500 12px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  fill: rgba(255,255,255,0.58);
}

.page-executive .vpg-output{
  transform-box: fill-box;
  transform-origin: center;
}

.page-executive .vpg-output .vpg-output-bg{
  fill: rgba(16,17,20,0.62);
  stroke: rgba(255,255,255,0.16);
}

.page-executive .vpg-output .vpg-output-title{
  font: 700 11px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: rgba(255,255,255,0.62);
}

.page-executive .vpg-output .vpg-output-lines{
  font: 700 12px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  fill: rgba(255,255,255,0.88);
}

@media (prefers-reduced-motion: no-preference){
  .page-executive .vpg-path-trace{
    animation: vpgDraw 1300ms var(--mvg-ease) 120ms forwards;
  }
  .page-executive .vpg-node.verify .vpg-ring{ animation: vpgPulse 900ms ease 240ms forwards; }
  .page-executive .vpg-node.permit .vpg-ring{ animation: vpgPulse 900ms ease 760ms forwards; }
  .page-executive .vpg-node.gate .vpg-ring{ animation: vpgPulse 900ms ease 1280ms forwards; }

  .page-executive .vpg-output{ animation: vpgOutput 900ms ease 1600ms forwards; }

  /* A single, slow glint after the draw — then an ultra-slow loop. */
  .page-executive .vpg-path-glint{
    animation:
      vpgGlintOnce 2200ms var(--mvg-ease) 1550ms forwards,
      vpgGlintLoop 12000ms linear 4200ms infinite;
  }
}

@keyframes vpgDraw{ to{ stroke-dashoffset: 0; } }

@keyframes vpgPulse{
  0%{ opacity:0; transform:scale(0.72); }
  40%{ opacity:0.95; transform:scale(1.08); }
  100%{ opacity:0; transform:scale(1.28); }
}

@keyframes vpgOutput{
  0%{ opacity:0.0; transform: translateY(2px); }
  100%{ opacity:1.0; transform: translateY(0px); }
}

@keyframes vpgGlintOnce{
  0%{ opacity:0; stroke-dashoffset: 1000; }
  40%{ opacity:0.18; }
  100%{ opacity:0.0; stroke-dashoffset: 0; }
}

@keyframes vpgGlintLoop{
  0%{ opacity:0.08; stroke-dashoffset: 0; }
  50%{ opacity:0.16; }
  100%{ opacity:0.08; stroke-dashoffset: -1000; }
}

/* ---------- Impact: metric ledger micro-visual ---------- */

.page-impact .impact-ledger{
  padding: 18px;
}

.page-impact .impact-ledger .ledger-frame{
  margin-top: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(900px 320px at 30% 30%, rgba(124,92,255,0.10), transparent 60%),
    radial-gradient(800px 280px at 80% 70%, rgba(29,207,255,0.08), transparent 62%),
    rgba(10,11,13,0.55);
}

.page-impact .impact-ledger svg{
  display:block;
  width:100%;
  height:auto;
}

.page-impact .ledger-row{
  fill: rgba(255,255,255,0.04);
  stroke: rgba(255,255,255,0.10);
}

.page-impact .ledger-title{
  font: 700 12px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: rgba(255,255,255,0.62);
}

.page-impact .ledger-text{
  font: 600 13px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  fill: rgba(255,255,255,0.86);
}

.page-impact .ledger-sub{
  font: 500 12px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  fill: rgba(255,255,255,0.58);
}

.page-impact .ledger-scan{
  fill: url(#scan);
  opacity: 0.0;
}

@media (prefers-reduced-motion: no-preference){
  .page-impact .ledger-scan{
    opacity: 0.14;
    animation: ledgerScan 8s ease-in-out 1.2s infinite;
  }
}

@keyframes ledgerScan{
  0%{ transform: translateX(-35%); opacity: 0.05; }
  30%{ opacity: 0.16; }
  50%{ transform: translateX(25%); opacity: 0.12; }
  100%{ transform: translateX(65%); opacity: 0.05; }
}

/* ---------- Solutions: action-surface map micro-visual ---------- */

.page-solutions .surface-map{
  padding: 18px;
}

.page-solutions .surface-map .map-frame{
  margin-top: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(900px 320px at 25% 30%, rgba(124,92,255,0.10), transparent 60%),
    radial-gradient(800px 280px at 80% 70%, rgba(29,207,255,0.08), transparent 62%),
    rgba(10,11,13,0.55);
}

.page-solutions .surface-map svg{ display:block; width:100%; height:auto; }

.page-solutions .map-label{
  font: 700 11px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: rgba(255,255,255,0.62);
}

.page-solutions .map-sub{
  font: 500 12px ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  fill: rgba(255,255,255,0.58);
}

.page-solutions .map-arc{
  fill:none;
  stroke: rgba(255,255,255,0.14);
  stroke-width: 10;
  stroke-linecap: round;
}

.page-solutions .map-arc.accent{
  stroke: url(#flow);
  opacity: 0.92;
  filter: url(#glow);
  stroke-dasharray: 120 880;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference){
  .page-solutions .map-arc.accent{ animation: mapGlint 11s linear 1.4s infinite; }
}

@keyframes mapGlint{
  0%{ stroke-dashoffset: 0; opacity: 0.72; }
  50%{ opacity: 0.95; }
  100%{ stroke-dashoffset: -1000; opacity: 0.72; }
}

/* ---------- Utility: reveal content if JS is disabled (critical pages only) ---------- */

.page-company noscript .reveal,
.page-governance noscript .reveal{
  opacity: 1 !important;
  transform: none !important;
}


@media (prefers-reduced-motion: reduce){
  .page-executive .exec-trace-draw{ stroke-dashoffset: 0; }
  .page-executive .exec-node-pulse{ display: none; }
}