/* Viveka Motion Pack — premium polish layer (loads after base styles) */

/* ---- 1. Breathing room ---- */
section.light,section.soft,section.dark{padding:128px 24px}
.sub{margin:0 auto 68px}
.levers,.steps,.pillars{gap:32px}
.final{padding:128px 24px 136px}
.page-hero{padding:158px 24px 84px}
@media(max-width:980px){section.light,section.soft,section.dark{padding:88px 24px}.final{padding:88px 24px 96px}}

/* ---- 2. The Viveka dot, choreographed (armed only when motion.js runs: html.mjs) ---- */
html.mjs .dot::after,html.mjs .gdot::after{transform-origin:center;transform:translateX(-50%) scale(0);opacity:0}
html.mjs .gdot::after{animation:none}
html.mjs .dot-in .dot::after{animation:vDotLand .85s cubic-bezier(.34,1.56,.64,1) forwards}
html.mjs .dot-in .gdot::after{animation:vDotLand .85s cubic-bezier(.34,1.56,.64,1) forwards,vGlow 3.2s ease-in-out 1s infinite}
@keyframes vDotLand{0%{transform:translateX(-50%) scale(0);opacity:0}55%{transform:translateX(-50%) scale(1.5);opacity:1}75%{transform:translateX(-50%) scale(.85)}100%{transform:translateX(-50%) scale(1);opacity:1}}
/* ripple ring that fires once when a gold dot lands */
.dot-ring{position:relative}
.dot-in .dot-ring::before{content:"";position:absolute;left:50%;bottom:.18em;width:.18em;height:.18em;border-radius:50%;transform:translateX(-50%);border:2px solid rgba(251,191,36,.85);opacity:0;animation:vRing 1.1s ease-out .5s 1}
@keyframes vRing{0%{opacity:.9;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) scale(7)}}

/* Deloitte-style dot sequence: Pilot. Prove. Scale. */
.dot-seq{display:flex;gap:34px;justify-content:center;align-items:baseline;margin:6px 0 40px;flex-wrap:wrap}
.dot-seq b{font-family:var(--font-head,inherit);font-weight:800;font-size:clamp(1.05rem,1.8vw,1.35rem);color:#FFF;letter-spacing:.01em;position:relative}
.dot-seq b::after{content:"";display:inline-block;width:.22em;height:.22em;border-radius:50%;background:#FBBF24;margin-left:.14em}
html.mjs .dot-seq b{opacity:0;transform:translateY(14px)}
html.mjs .dot-seq b::after{transform:scale(0)}
.dot-in .dot-seq b{animation:vSeqIn .6s cubic-bezier(.22,1,.36,1) forwards}
.dot-in .dot-seq b::after{animation:vDotLand2 .6s cubic-bezier(.34,1.56,.64,1) forwards}
.dot-in .dot-seq b:nth-child(1),.dot-in .dot-seq b:nth-child(1)::after{animation-delay:.15s}
.dot-in .dot-seq b:nth-child(2),.dot-in .dot-seq b:nth-child(2)::after{animation-delay:.55s}
.dot-in .dot-seq b:nth-child(3),.dot-in .dot-seq b:nth-child(3)::after{animation-delay:.95s}
@keyframes vSeqIn{to{opacity:1;transform:translateY(0)}}
@keyframes vDotLand2{0%{transform:scale(0)}60%{transform:scale(1.6)}100%{transform:scale(1)}}

/* ---- 3. Flip cards (levers) ---- */
.flip{perspective:1400px;background:none;border:none;overflow:visible}
.flip:hover{transform:none;box-shadow:none}
.flip-inner{position:relative;width:100%;height:100%;min-height:420px;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.25,1)}
.flip:hover .flip-inner,.flip.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.flip-front{background:#FFF;border:1px solid #E4ECFB;box-shadow:0 8px 28px rgba(11,29,58,.07)}
.flip-back{background:linear-gradient(150deg,#0B1D3A 0%,#1B3A75 100%);border:1px solid rgba(251,191,36,.45);transform:rotateY(180deg);color:#FFF;align-items:flex-start;justify-content:center;padding:38px 34px;box-shadow:0 22px 54px rgba(11,29,58,.3)}
.flip-back .fb-num{font-family:var(--font-head,inherit);font-weight:800;font-size:3.1rem;line-height:1;color:#FBBF24;margin-bottom:12px}
.flip-back p{color:rgba(255,255,255,.86);font-size:1.02rem;line-height:1.6;margin-bottom:12px}
.flip-back .fb-src{font-size:.78rem;color:rgba(255,255,255,.5);letter-spacing:.04em;margin-bottom:18px}
.flip-back .fb-go{font-weight:700;color:#FBBF24;text-decoration:none;font-size:.95rem}
.flip-back .fb-go:hover{text-decoration:underline}
.flip-hint{position:absolute;top:14px;right:14px;z-index:2;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7A8CAB;background:rgba(255,255,255,.9);border:1px solid #E4ECFB;border-radius:50px;padding:5px 11px;backdrop-filter:blur(3px);pointer-events:none;transition:opacity .3s}
.flip:hover .flip-hint,.flip.flipped .flip-hint{opacity:0}
@media(max-width:980px){.flip-inner{min-height:400px}}

/* ---- 4. Micro-interactions ---- */
.btn{position:relative;overflow:hidden}
.btn-gold::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-gold:hover::before{left:130%}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(251,191,36,.4)}
.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:2px;border-radius:2px;background:#FBBF24;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
.icard:hover .go,.ed-card:hover .go{letter-spacing:.02em}
.stat{transition:transform .3s,box-shadow .3s}
.stat:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(11,29,58,.1)}
.os-node{transition:transform .3s,background .3s,border-color .3s}
.os-node:hover{transform:translateX(6px)}
html.mjs .kpi .k-bars span{transform:scaleY(0);transform-origin:bottom}
.bars-in .k-bars span{animation:vBarUp .7s cubic-bezier(.22,1,.36,1) forwards}
.bars-in .k-bars span:nth-child(1){animation-delay:.05s}.bars-in .k-bars span:nth-child(2){animation-delay:.13s}.bars-in .k-bars span:nth-child(3){animation-delay:.21s}.bars-in .k-bars span:nth-child(4){animation-delay:.29s}.bars-in .k-bars span:nth-child(5){animation-delay:.37s}.bars-in .k-bars span:nth-child(6){animation-delay:.45s}
@keyframes vBarUp{to{transform:scaleY(1)}}

/* ---- 5. Reduced motion: everything lands instantly ---- */
@media (prefers-reduced-motion:reduce){
html.mjs .dot::after,html.mjs .gdot::after{transform:translateX(-50%) scale(1);opacity:1;animation:none!important}
html.mjs .dot-seq b{opacity:1;transform:none;animation:none!important}
html.mjs .dot-seq b::after{transform:scale(1);animation:none!important}
.dot-in .dot-ring::before{animation:none;opacity:0}
html.mjs .kpi .k-bars span{transform:scaleY(1);animation:none!important}
.flip-inner{transition:none}
.btn-gold::before{display:none}
}