/* VettriThalapathy motion system — used on every page (js/vt-motion.js adds the classes).
   html.vm      = motion allowed (set in <head> only when the visitor has not asked for reduced motion)
   html.vm-go   = page is ready (loader gone) -> hero entrance plays
   .vm-r        = element waiting to be revealed; .vm-on = revealed */

/* ---------- scroll progress bar ---------- */
#vm-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:100001;pointer-events:none;
  background:linear-gradient(90deg,#5E0000,#800000 35%,#C9922A 70%,#FFD700)}

/* ---------- reveal states (hiding is instant, showing is animated) ---------- */
html.vm .vm-r{opacity:0}
html.vm .vm-r.vm-up{transform:translate3d(0,34px,0)}
html.vm .vm-r.vm-left{transform:translate3d(-42px,0,0)}
html.vm .vm-r.vm-right{transform:translate3d(42px,0,0)}
html.vm .vm-r.vm-zoom{transform:scale(.92)}
html.vm .vm-r.vm-pop{transform:translate3d(0,26px,0) scale(.96)}
html.vm .vm-r.vm-blur{filter:blur(8px);transform:translate3d(0,20px,0)}
html.vm .vm-r.vm-on{opacity:1;transform:none;filter:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.16,.84,.3,1),filter .8s ease}

/* ---------- section headings: eyebrow slides in, title rises, red bar grows ---------- */
html.vm .v-h.vm-r{opacity:1;transform:none}
html.vm .v-h.vm-r .v-eye{opacity:0;transform:translate3d(-24px,0,0)}
html.vm .v-h.vm-r .v-t{opacity:0;transform:translate3d(0,18px,0);border-left-color:transparent}
html.vm .v-h.vm-r>*:not(div){opacity:0}
html.vm .v-h.vm-on .v-eye{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.16,.84,.3,1)}
html.vm .v-h.vm-on .v-t{opacity:1;transform:none;transition:opacity .7s ease .12s,transform .8s cubic-bezier(.16,.84,.3,1) .12s,border-left-color .5s ease .45s}
html.vm .v-h.vm-on>*:not(div){opacity:1;transition:opacity .7s ease .3s}

/* ---------- gold divider draws from the centre ---------- */
html.vm .v-goldrule.vm-r{opacity:1;transform:scaleX(0)}
html.vm .v-goldrule.vm-on{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.65,0,.35,1)}

/* ---------- home hero ---------- */
@keyframes vmUp{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@keyframes vmIn{from{opacity:0}to{opacity:1}}
@keyframes vmPortrait{0%{opacity:0;transform:scale(.82) rotate(-4deg)}70%{opacity:1;transform:scale(1.03) rotate(.5deg)}100%{opacity:1;transform:none}}
@keyframes vmGlow{0%,100%{box-shadow:0 0 0 2px #C9922A,0 14px 30px -14px rgba(94,0,0,.45)}50%{box-shadow:0 0 0 2px #FFD700,0 0 0 9px rgba(255,215,0,.16),0 18px 36px -14px rgba(94,0,0,.55)}}
@keyframes vmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes vmWord{from{opacity:0;transform:translate3d(0,.6em,0);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
html.vm:not(.vm-go) .v-hero .v-wrap>div>*,html.vm:not(.vm-go) .v-phero .v-wrap>*{opacity:0;animation:vmIn .4s 3.5s forwards}  /* failsafe: shows anyway if the script never runs */
html.vm.vm-go .v-hero .v-wrap>div>*{animation:vmUp .9s cubic-bezier(.16,.84,.3,1) both}
html.vm.vm-go .v-hero .v-wrap>div>*:nth-child(2){animation-delay:.1s}
html.vm.vm-go .v-hero .v-wrap>div>*:nth-child(3){animation-delay:.2s}
html.vm.vm-go .v-hero .v-wrap>div>*:nth-child(4){animation-delay:.32s}
html.vm.vm-go .v-hero .v-wrap>div>*:nth-child(5){animation-delay:.44s}
html.vm.vm-go .v-hero .v-wrap>div>*:nth-child(6){animation-delay:.56s}
html.vm.vm-go .v-hero .v-wrap>div>*:nth-child(n+7){animation-delay:.66s}
html.vm.vm-go .v-hero .v-wrap>div:nth-child(2){animation:vmUp 1s cubic-bezier(.16,.84,.3,1) .35s both}
html.vm.vm-go .v-hero .v-name .vm-w{display:inline-block;animation:vmWord .8s cubic-bezier(.16,.84,.3,1) both}
html.vm.vm-go .v-hero .v-portrait{animation:vmPortrait 1.1s cubic-bezier(.16,.84,.3,1) .25s both,vmGlow 2.4s ease-in-out 1.4s 2}
html.vm.vm-go .v-hero .v-portrait img{animation:vmFloat 6s ease-in-out 1.6s infinite}
html.vm.vm-go .v-hero .v-badges>*{animation:vmUp .6s cubic-bezier(.16,.84,.3,1) both}
html.vm.vm-go .v-hero .v-badges>*:nth-child(1){animation-delay:.3s}
html.vm.vm-go .v-hero .v-badges>*:nth-child(2){animation-delay:.38s}
html.vm.vm-go .v-hero .v-badges>*:nth-child(3){animation-delay:.46s}
html.vm.vm-go .v-hero .v-cta>*{animation:vmUp .6s cubic-bezier(.16,.84,.3,1) both}
html.vm.vm-go .v-hero .v-cta>*:nth-child(1){animation-delay:.5s}
html.vm.vm-go .v-hero .v-cta>*:nth-child(2){animation-delay:.58s}
html.vm.vm-go .v-hero .v-cta>*:nth-child(3){animation-delay:.66s}

/* ---------- page heroes (inner pages) ---------- */
html.vm.vm-go .v-phero .v-wrap>*{animation:vmUp .8s cubic-bezier(.16,.84,.3,1) both}
html.vm.vm-go .v-phero .v-wrap>*:nth-child(2){animation-delay:.08s}
html.vm.vm-go .v-phero .v-wrap>*:nth-child(3){animation-delay:.16s}
html.vm.vm-go .v-phero .v-wrap>*:nth-child(4){animation-delay:.24s}
html.vm.vm-go .v-phero .v-wrap>*:nth-child(n+5){animation-delay:.32s}

/* ---------- hover polish (mouse/trackpad only) ---------- */
@media (hover:hover){
  .vm-card{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
  .vm-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px -20px rgba(94,0,0,.45)}
  .vm-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .vm-card:hover img{transform:scale(1.04)}
  .v-btn{position:relative;overflow:hidden}
  .v-btn::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;pointer-events:none;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
  .v-btn:hover::after{left:140%;transition:left .7s ease}
}

/* ---------- never animate for visitors who prefer reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html.vm .vm-r,html.vm .vm-r *,html.vm .v-hero *,html.vm .v-phero *{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}
  #vm-progress{display:none}
}
@media print{html.vm .vm-r,html.vm .v-hero *,html.vm .v-phero *{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}#vm-progress{display:none}}

/* =====================================================================
   v2 — "feel it" layer: continuous gentle motion + stronger entrances
   ===================================================================== */

/* page-to-page cross-fade (Chrome/Edge/Safari; others just navigate normally) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vmVtOut .28s ease both}
::view-transition-new(root){animation:vmVtIn .42s cubic-bezier(.16,.84,.3,1) both}
@keyframes vmVtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vmVtIn{from{opacity:0;transform:translateY(14px)}}

/* stronger card entrance: rise + slight 3D tilt */
html.vm .vm-r.vm-pop{transform:perspective(900px) translate3d(0,48px,0) rotateX(10deg) scale(.95);transform-origin:50% 100%}
html.vm .vm-r.vm-up{transform:translate3d(0,44px,0)}
html.vm .vm-r.vm-left{transform:translate3d(-60px,0,0)}
html.vm .vm-r.vm-right{transform:translate3d(60px,0,0)}
html.vm .vm-r.vm-on,html.vm .vm-r.vm-on.vm-up,html.vm .vm-r.vm-on.vm-pop,html.vm .vm-r.vm-on.vm-left,html.vm .vm-r.vm-on.vm-right,html.vm .vm-r.vm-on.vm-zoom,html.vm .vm-r.vm-on.vm-blur{opacity:1;transform:none;filter:none;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.16,.84,.3,1),filter .9s ease}

/* hover: lift + warm gold glow */
@media (hover:hover){
  .vm-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(94,0,0,.55),0 0 0 1px rgba(201,146,42,.35)}
}

/* ---------- HOME HERO: living background ---------- */
.v-hero{position:relative;overflow:hidden;isolation:isolate}
.v-hero>.v-wrap{position:relative;z-index:1}
html.vm .v-hero::before,html.vm .v-hero::after{content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:.55}
html.vm .v-hero::before{width:46vw;height:46vw;max-width:620px;max-height:620px;left:-12vw;top:-18vw;
  background:radial-gradient(circle,rgba(255,215,0,.55),rgba(255,215,0,0) 65%);animation:vmDriftA 18s ease-in-out infinite alternate}
html.vm .v-hero::after{width:40vw;height:40vw;max-width:560px;max-height:560px;right:-10vw;bottom:-20vw;
  background:radial-gradient(circle,rgba(128,0,0,.32),rgba(128,0,0,0) 65%);animation:vmDriftB 22s ease-in-out infinite alternate}
@keyframes vmDriftA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12vw,6vw) scale(1.15)}100%{transform:translate(4vw,14vw) scale(.95)}}
@keyframes vmDriftB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-10vw,-8vw) scale(1.1)}100%{transform:translate(-18vw,-2vw) scale(1.2)}}

/* "Vijay" — gold shimmer passes across every few seconds */
html.vm .v-hero .v-name>span:not(.vm-w){background:linear-gradient(100deg,#800000 0%,#800000 38%,#F5C542 48%,#FFE38A 50%,#F5C542 52%,#800000 62%,#800000 100%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html.vm.vm-go .v-hero .v-name>span:not(.vm-w){animation:vmWord .9s cubic-bezier(.16,.84,.3,1) .38s both,vmSheen 6s ease-in-out 1.8s infinite}
@keyframes vmSheen{0%{background-position:100% 0}35%,100%{background-position:0 0}}

/* rotating gold ring around the CM's photo */
@property --vm-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.vm-ring{position:relative;display:inline-block;border-radius:27px;padding:5px;flex-shrink:0}
.vm-ring::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:conic-gradient(from var(--vm-a),#FFD700,#800000 25%,#C9922A 50%,#5E0000 75%,#FFD700)}
html.vm .vm-ring::before{animation:vmSpin 7s linear infinite}
.vm-ring>.v-portrait{position:relative;z-index:1}
@keyframes vmSpin{to{--vm-a:360deg}}

/* live counter digits flip when they change */
@keyframes vmFlip{0%{transform:translateY(-40%) rotateX(70deg);opacity:.2}100%{transform:none;opacity:1}}
html.vm .vm-flip{display:inline-block;animation:vmFlip .45s cubic-bezier(.16,.84,.3,1)}
html.vm .v-counter .lab i{animation:vmBlink 1.4s ease-in-out infinite}
@keyframes vmBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

/* hero primary button breathes gently */
html.vm.vm-go .v-hero .v-btn.pri{animation:vmUp .6s cubic-bezier(.16,.84,.3,1) .5s both,vmBreath 3.2s ease-in-out 2s infinite}
@keyframes vmBreath{0%,100%{box-shadow:0 0 0 0 rgba(128,0,0,.35)}50%{box-shadow:0 0 0 10px rgba(128,0,0,0)}}

/* ---------- section headings: shine sweeps across the title as it arrives ---------- */
html.vm .v-h .v-t{position:relative;overflow:hidden}
html.vm .v-h .v-t::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,215,0,.55),transparent);transform:skewX(-18deg);opacity:0}
html.vm .v-h.vm-on .v-t::after{animation:vmShine 1.2s ease .55s 1 both}
@keyframes vmShine{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
html.vm .v-h .v-eye{position:relative}
html.vm .v-h .v-eye::after{content:"";display:block;height:2px;width:0;margin-top:.3rem;background:linear-gradient(90deg,#C9922A,#FFD700);border-radius:2px}
html.vm .v-h.vm-on .v-eye::after{width:38px;transition:width .9s cubic-bezier(.16,.84,.3,1) .35s}

/* ---------- dark red bands: slow drifting light ---------- */
.v-band,.v-dark{position:relative;overflow:hidden;isolation:isolate}
.v-band>.v-wrap,.v-dark>.v-wrap{position:relative;z-index:1}
html.vm .v-band::before,html.vm .v-dark::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 20% 30%,rgba(255,215,0,.16),transparent 35%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.10),transparent 30%);
  animation:vmBand 16s ease-in-out infinite alternate}
@keyframes vmBand{from{transform:translate(-4%,-3%) rotate(0deg)}to{transform:translate(4%,3%) rotate(6deg)}}

/* ---------- inner page heroes: soft gold light ---------- */
.v-phero{position:relative;overflow:hidden;isolation:isolate}
.v-phero>.v-wrap{position:relative;z-index:1}
html.vm .v-phero::before{content:"";position:absolute;z-index:0;pointer-events:none;width:520px;height:520px;right:-160px;top:-260px;border-radius:50%;
  filter:blur(50px);opacity:.5;background:radial-gradient(circle,rgba(255,215,0,.5),transparent 65%);animation:vmDriftB 20s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){
  html.vm .v-hero::before,html.vm .v-hero::after,html.vm .v-band::before,html.vm .v-dark::before,html.vm .v-phero::before,html.vm .vm-ring::before{animation:none!important}
  html.vm .v-hero .v-name>span:not(.vm-w){animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* =====================================================================
   v3 — BANNERS IN FOCUS (every page) + HOME BANNER HIGHLIGHT
   js/vt-motion.js marks the page's top banner with .vm-banner (+ .vm-dark on dark banners)
   ===================================================================== */
.vm-banner{position:relative;overflow:hidden;isolation:isolate}
.vm-pt,.vm-beam,.vm-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
/* floating particles */
.vm-pt i{position:absolute;bottom:-12px;border-radius:50%;background:radial-gradient(circle,#FFE38A 0,#C9922A 55%,rgba(201,146,42,0) 70%);opacity:0}
html.vm .vm-pt i{animation:vmRise linear infinite}
@keyframes vmRise{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}12%{opacity:.85}80%{opacity:.5}100%{transform:translate3d(var(--vm-x,20px),-115vh,0) scale(1.1);opacity:0}}
.vm-banner:not(.vm-dark) .vm-pt i{background:radial-gradient(circle,#C9922A 0,#800000 55%,rgba(128,0,0,0) 70%)}
/* spotlight beam sweeping across the banner */
.vm-beam::before{content:"";position:absolute;top:-40%;bottom:-40%;left:-35%;width:28%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,215,0,.18),rgba(255,255,255,.28),rgba(255,215,0,.18),transparent);filter:blur(6px)}
.vm-banner:not(.vm-dark) .vm-beam::before{background:linear-gradient(90deg,transparent,rgba(201,146,42,.12),rgba(255,215,0,.22),rgba(201,146,42,.12),transparent)}
html.vm .vm-beam::before{animation:vmBeam 7s cubic-bezier(.45,0,.2,1) 1.2s infinite}
@keyframes vmBeam{0%{left:-35%}45%,100%{left:120%}}
/* breathing glow behind the content */
.vm-glow::before{content:"";position:absolute;width:60%;aspect-ratio:1;left:-10%;top:-45%;border-radius:50%;filter:blur(70px);
  background:radial-gradient(circle,rgba(255,215,0,.42),transparent 62%)}
.vm-glow::after{content:"";position:absolute;width:50%;aspect-ratio:1;right:-12%;bottom:-55%;border-radius:50%;filter:blur(70px);
  background:radial-gradient(circle,rgba(160,0,30,.35),transparent 62%)}
.vm-dark .vm-glow::after{background:radial-gradient(circle,rgba(255,120,60,.25),transparent 62%)}
html.vm .vm-glow::before{animation:vmDriftA 16s ease-in-out infinite alternate}
html.vm .vm-glow::after{animation:vmDriftB 19s ease-in-out infinite alternate}
/* banner headline: wipes in from the left, then a gold underline draws */
@keyframes vmWipe{from{clip-path:inset(-10% 100% -20% 0);transform:translateX(-14px)}to{clip-path:inset(-10% -2% -20% 0);transform:none}}
html.vm.vm-go .vm-h1{animation:vmWipe 1.1s cubic-bezier(.77,0,.18,1) .15s both!important}
.vm-h1u{display:block;height:4px;width:0;margin-top:.55rem;border-radius:4px;background:linear-gradient(90deg,#FFD700,#C9922A 60%,rgba(201,146,42,0))}
html.vm.vm-go .vm-h1u{animation:vmLine 1.2s cubic-bezier(.16,.84,.3,1) 1s both}
@keyframes vmLine{from{width:0}to{width:min(180px,40%)}}
/* banner pieces rise in after the headline */
html.vm.vm-go .vm-bi{animation:vmUp .8s cubic-bezier(.16,.84,.3,1) both}

/* ---------- HOME BANNER HIGHLIGHT ---------- */
/* letter-by-letter name */
html.vm.vm-go .v-hero .vm-ch{display:inline-block;animation:vmChar .7s cubic-bezier(.16,.84,.3,1) both}
@keyframes vmChar{from{opacity:0;transform:translate3d(0,.7em,0) rotate(8deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
/* victory sun-rays turning slowly behind the CM's photo */
.vm-ring{isolation:isolate}
.vm-rays{position:absolute;left:50%;top:50%;width:340%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,0,.30) 0deg 5deg,rgba(255,215,0,0) 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 18%,rgba(0,0,0,.6) 38%,transparent 66%);mask:radial-gradient(circle,#000 18%,rgba(0,0,0,.6) 38%,transparent 66%)}
html.vm .vm-rays{animation:vmRays 40s linear infinite,vmIn 1.5s ease .6s both}
@keyframes vmRays{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* halo pulse */
.vm-ring::after{content:"";position:absolute;inset:-14px;border-radius:36px;z-index:-1;box-shadow:0 0 0 0 rgba(255,215,0,.45)}
html.vm .vm-ring::after{animation:vmHalo 2.8s ease-out 1.6s infinite}
@keyframes vmHalo{0%{box-shadow:0 0 0 0 rgba(255,215,0,.5)}100%{box-shadow:0 0 0 26px rgba(255,215,0,0)}}
/* gold underline under the name */
.v-hero .vm-nameu{display:block;height:5px;width:0;margin:.7rem 0 .2rem;border-radius:5px;background:linear-gradient(90deg,#800000,#C9922A 45%,#FFD700)}
html.vm.vm-go .v-hero .vm-nameu{animation:vmLine2 1.3s cubic-bezier(.16,.84,.3,1) 1.1s both}
@keyframes vmLine2{from{width:0}to{width:min(260px,70%)}}
/* counter card follows the mouse a little (desktop) */
.v-counter{transition:transform .35s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .vm-pt,.vm-beam,.vm-rays{display:none}
  html.vm .vm-glow::before,html.vm .vm-glow::after,html.vm .vm-ring::after{animation:none!important}
  html.vm .vm-h1,html.vm .vm-bi,html.vm .vm-ch{animation:none!important;clip-path:none!important}
  .vm-h1u,.vm-nameu{width:min(180px,40%)}
}

/* v3.1 — name never breaks inside a word; rotating value highlight; photo tilt */
.v-hero .vm-w{white-space:nowrap}
.vm-ring{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.v-hero .vm-val{background-image:linear-gradient(transparent 62%,rgba(255,215,0,.55) 62%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size .7s cubic-bezier(.16,.84,.3,1),color .4s}
html.vm .v-hero .vm-val.vm-val-on{background-size:100% 100%;color:#800000}
@media (prefers-reduced-motion:reduce){.v-hero .vm-val{transition:none}}

/* =====================================================================
   v4 — CALM & PROFESSIONAL (24 Oct 2026)
   Banners animate once on arrival and then stay still: no rotating rays,
   light beam, particles, spinning ring, pulsing halo, shimmer or tilts.
   ===================================================================== */
html.vm .v-hero::before,html.vm .v-hero::after,html.vm .v-phero::before,
html.vm .v-band::before,html.vm .v-dark::before{animation:none!important}
html.vm .v-hero::before,html.vm .v-hero::after{opacity:.3}
.vm-pt,.vm-beam,.vm-glow,.vm-rays{display:none!important}
/* "Vijay": plain brand colour, no moving shine */
html.vm .v-hero .v-name>span:not(.vm-w){background:none!important;-webkit-text-fill-color:currentColor!important;color:inherit!important}
html.vm.vm-go .v-hero .v-name>span:not(.vm-w){animation:vmWord .8s cubic-bezier(.16,.84,.3,1) .3s both!important}
/* photo: a still, thin gold frame; fades in once */
html.vm .vm-ring::before{animation:none!important;background:linear-gradient(135deg,#FFD700,#C9922A 55%,#800000)!important}
html.vm .vm-ring::after{display:none!important}
@keyframes vmPortraitCalm{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
html.vm.vm-go .v-hero .v-portrait{animation:vmPortraitCalm .9s cubic-bezier(.16,.84,.3,1) .2s both!important}
html.vm.vm-go .v-hero .v-portrait img{animation:none!important}
html.vm.vm-go .v-hero .v-btn.pri{animation:vmUp .6s cubic-bezier(.16,.84,.3,1) .5s both!important}
/* section titles: no shine sweep */
html.vm .v-h .v-t::after{display:none!important}
/* page headlines: gentle fade-up instead of a wipe */
html.vm.vm-go .vm-h1{animation:vmUp .8s cubic-bezier(.16,.84,.3,1) .1s both!important}
html.vm .v-hero .vm-ch{animation:none!important;display:inline}

/* =====================================================================
   v5 — three gentle touches on the home banner (24 Oct 2026)
   ===================================================================== */
/* 1. a few faint gold dots, slow, desktop only (created by vt-motion.js) */
.v-hero .vm-pt.vm-soft{display:block!important}
html.vm .v-hero .vm-soft i{animation-name:vmRiseSoft;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes vmRiseSoft{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:.35}75%{opacity:.25}100%{transform:translate3d(var(--vm-x,10px),-105vh,0);opacity:0}}
/* 2. "Vijay": one gold shine after load (and on hover), then plain maroon */
html.vm .v-hero .v-name>span:not(.vm-w){background:linear-gradient(100deg,#800000 0%,#800000 38%,#F5C542 48%,#FFE38A 50%,#F5C542 52%,#800000 62%,#800000 100%)!important;
  background-size:300% 100%!important;background-position:100% 0;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
@keyframes vmSheenOnce{from{background-position:100% 0}to{background-position:0 0}}
html.vm.vm-go .v-hero .v-name>span:not(.vm-w){animation:vmWord .8s cubic-bezier(.16,.84,.3,1) .3s both,vmSheenOnce 1.6s ease-in-out 1.3s both!important}
html.vm.vm-go .v-hero .v-name>span.vm-shine{animation:vmSheenOnce 1.3s ease-in-out both!important}
/* 3. main button: glows 3 times, then rests */
html.vm.vm-go .v-hero .v-btn.pri{animation:vmUp .6s cubic-bezier(.16,.84,.3,1) .5s both,vmBreath 2.4s ease-in-out 1.6s 3!important}
@media (prefers-reduced-motion:reduce){.v-hero .vm-soft{display:none!important}}

/* ---------- HOME HERO: right-side panel (aside) entrance + gentle life ---------- */
html.vm:not(.vm-go) .v-hero .v-wrap>aside>*{opacity:0;animation:vmIn .4s 3.5s forwards}  /* failsafe */
@keyframes vmSlideL{from{opacity:0;transform:translate3d(46px,0,0)}to{opacity:1;transform:none}}
@keyframes vmTileIn{from{opacity:0;transform:perspective(700px) translate3d(0,26px,0) rotateX(14deg) scale(.95)}to{opacity:1;transform:none}}
html.vm.vm-go .v-hero .v-wrap>aside>*{animation:vmSlideL .9s cubic-bezier(.16,.84,.3,1) both}
html.vm.vm-go .v-hero .v-wrap>aside>.v-counter{animation-delay:.2s}
html.vm.vm-go .v-hero .v-wrap>aside>.v-tiles{animation:none}
html.vm.vm-go .v-hero .v-tiles>*{animation:vmTileIn .75s cubic-bezier(.16,.84,.3,1) both;transform-origin:50% 100%}
html.vm.vm-go .v-hero .v-tiles>*:nth-child(1){animation-delay:.45s}
html.vm.vm-go .v-hero .v-tiles>*:nth-child(2){animation-delay:.55s}
html.vm.vm-go .v-hero .v-tiles>*:nth-child(3){animation-delay:.65s}
html.vm.vm-go .v-hero .v-tiles>*:nth-child(4){animation-delay:.75s}
html.vm.vm-go .v-hero .v-wrap>aside>.v-party{animation-delay:.85s}
html.vm.vm-go .v-hero .v-wrap>aside>.v-guide{animation-delay:.95s}
html.vm.vm-go .v-hero .v-wrap>aside>*:nth-child(n+5){animation-delay:1.05s}

/* counter card: slow gold glow + light sweep */
.v-hero .v-counter{position:relative;overflow:hidden}
@keyframes vmCardGlow{0%,100%{box-shadow:0 0 0 1px rgba(201,146,42,.25),0 18px 36px -24px rgba(94,0,0,.5)}50%{box-shadow:0 0 0 1px rgba(255,215,0,.6),0 0 0 7px rgba(255,215,0,.10),0 22px 40px -22px rgba(94,0,0,.6)}}
@keyframes vmSweep{0%{left:-70%}22%,100%{left:140%}}
html.vm.vm-go .v-hero .v-counter{animation:vmSlideL .9s cubic-bezier(.16,.84,.3,1) .2s both,vmCardGlow 4s ease-in-out 1.6s infinite}
html.vm .v-hero .v-counter::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg)}
html.vm.vm-go .v-hero .v-counter::after{animation:vmSweep 7s ease-in-out 2s infinite}
html.vm.vm-go .v-hero .v-cbox{animation:vmUp .6s cubic-bezier(.16,.84,.3,1) both}
html.vm.vm-go .v-hero .v-cbox:nth-child(1){animation-delay:.4s}
html.vm.vm-go .v-hero .v-cbox:nth-child(2){animation-delay:.48s}
html.vm.vm-go .v-hero .v-cbox:nth-child(3){animation-delay:.56s}
html.vm.vm-go .v-hero .v-cbox:nth-child(4){animation-delay:.64s}

/* tile icons bob gently, one after another */
@keyframes vmBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-6deg)}}
.v-hero .v-tile .k>span{display:inline-block}
html.vm.vm-go .v-hero .v-tile .k>span{animation:vmBob 3.6s ease-in-out infinite}
html.vm.vm-go .v-hero .v-tile:nth-child(2) .k>span{animation-delay:.9s}
html.vm.vm-go .v-hero .v-tile:nth-child(3) .k>span{animation-delay:1.8s}
html.vm.vm-go .v-hero .v-tile:nth-child(4) .k>span{animation-delay:2.7s}

/* TVK flag waves softly */
@keyframes vmWave{0%,100%{transform:perspective(200px) rotateY(0) skewY(0)}50%{transform:perspective(200px) rotateY(-14deg) skewY(-2deg)}}
html.vm.vm-go .v-hero .v-party img{transform-origin:0 50%;animation:vmWave 3s ease-in-out 1.5s infinite}

@media (hover:hover){
  .v-hero .v-tile,.v-hero .v-party,.v-hero .v-guide{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
  .v-hero .v-tile:hover,.v-hero .v-party:hover,.v-hero .v-guide:hover{transform:translateY(-4px);box-shadow:0 16px 30px -20px rgba(94,0,0,.5),0 0 0 1px rgba(201,146,42,.35)}
}
@media (prefers-reduced-motion:reduce){.v-hero .v-counter::after{display:none}}