
/* VEXMIRA V72 — restrained 3D motion for home + ranking pages */
:root{--vx72-depth:rgba(152,91,255,.28);--vx72-cyan:rgba(68,220,245,.28)}
html.vx72-ready #page-home,
html.vx72-ready #page-rankings,
html.vx72-ready #page-server-rankings,
html.vx72-ready #page-directory-rankings{--vx72-rx:0deg;--vx72-ry:0deg}

/* ---- animated V brand shared with the top navigation language ---- */
.vx72-mark{position:relative;display:grid;place-items:center;width:86px;height:86px;flex:0 0 86px;border-radius:50%;transform-style:preserve-3d;isolation:isolate;background:radial-gradient(circle at 29% 20%,rgba(255,255,255,.45),transparent 19%),linear-gradient(145deg,#8d54ff 5%,#625cf7 48%,#20cbe4 100%);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px rgba(255,255,255,.48),inset 0 -18px 30px rgba(3,5,16,.18),0 0 0 8px rgba(132,74,255,.075),0 22px 54px -25px rgba(88,82,255,.92),0 0 42px -15px rgba(36,211,238,.72)}
.vx72-mark::before{content:'V';position:relative;z-index:3;color:#fff;font:900 42px/1 Inter,system-ui,sans-serif;letter-spacing:-.08em;text-shadow:0 6px 17px rgba(0,0,0,.38);transform:translateZ(18px)}
.vx72-mark::after{content:'';position:absolute;inset:-13px;border-radius:50%;border:1px solid rgba(187,123,255,.42);border-left-color:rgba(64,221,245,.78);border-bottom-color:transparent;animation:vx72MarkOrbit 9s linear infinite!important;box-shadow:0 0 20px rgba(126,67,255,.12)}
.vx72-mark-ring{position:absolute;inset:-26px;border:1px dashed rgba(91,219,247,.2);border-radius:50%;animation:vx72MarkOrbitReverse 15s linear infinite!important;pointer-events:none}
.vx72-mark-dot{position:absolute;z-index:4;top:-16px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px rgba(178,105,255,.72);animation:vx72DotOrbit 9s linear infinite!important;transform-origin:3.5px 59px}

/* ---- home: stronger cinematic depth without extra content clutter ---- */
html.vx72-ready #page-home .vx65-hero{perspective:1300px;isolation:isolate}
html.vx72-ready #page-home .vx65-hero-grid{position:relative;z-index:3}
.vx72-home-depth{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;perspective:900px}
.vx72-home-grid{position:absolute;left:-18%;right:-18%;bottom:-44%;height:78%;transform:rotateX(66deg) translateZ(-80px);transform-origin:center bottom;background-image:linear-gradient(rgba(142,85,255,.105) 1px,transparent 1px),linear-gradient(90deg,rgba(62,213,239,.075) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to top,#000 2%,rgba(0,0,0,.84) 40%,transparent 94%);opacity:.62;animation:vx72GridBreath 8s ease-in-out infinite!important}
.vx72-home-sweep{position:absolute;inset:5% -12%;background:conic-gradient(from 180deg at 50% 50%,transparent 0 35%,rgba(157,90,255,.08) 42%,transparent 48% 71%,rgba(51,215,244,.065) 77%,transparent 84%);animation:vx72SweepRotate 28s linear infinite!important;filter:blur(2px)}
.vx72-home-stars{position:absolute;inset:0}.vx72-home-stars i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:var(--o);box-shadow:0 0 10px rgba(172,113,255,.72);animation:vx72StarFloat var(--d) ease-in-out infinite!important;animation-delay:var(--delay)}
html.vx72-ready #vx66BrandStage{transform-style:preserve-3d;transform:rotateX(calc(var(--vx72-rx)*.3)) rotateY(calc(var(--vx72-ry)*.42));transition:transform .18s ease-out}
html.vx72-ready #vx66BrandStage .vx65-core{transform-style:preserve-3d;box-shadow:0 0 0 12px rgba(127,68,255,.09),0 28px 70px -30px rgba(75,56,255,.95),0 0 86px -22px rgba(38,222,245,.74)!important}
html.vx72-ready #vx66BrandStage .vx65-core::after{content:'';position:absolute;inset:12%;border-radius:inherit;border:1px solid rgba(255,255,255,.09);transform:translateZ(24px);pointer-events:none}
html.vx72-ready #page-home .vx65-home-stats article,
html.vx72-ready #page-home .vx65-cap-grid article,
html.vx72-ready #page-home .vx65-team-grid article,
html.vx72-ready #page-home .vx65-manifesto,
html.vx72-ready #page-home .vx65-how li{transform-style:preserve-3d;backface-visibility:hidden}
@media(hover:hover) and (pointer:fine){
 html.vx72-ready #page-home .vx65-home-stats article:hover,
 html.vx72-ready #page-home .vx65-cap-grid article:hover,
 html.vx72-ready #page-home .vx65-team-grid article:hover{transform:perspective(800px) rotateX(2.4deg) rotateY(-2.4deg) translateY(-5px)!important;box-shadow:0 30px 64px -42px #000,0 20px 46px -36px rgba(130,73,255,.75)!important}
}
.vx72-home-brand-chip{position:absolute;right:clamp(8px,3vw,32px);top:clamp(10px,3vw,34px);z-index:4;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:24px;border:1px solid rgba(154,99,255,.22);background:linear-gradient(145deg,rgba(15,10,34,.72),rgba(6,10,24,.62));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 24px 64px -40px #000;pointer-events:none;transform:translateZ(20px)}
.vx72-home-brand-chip .vx72-mark{width:54px;height:54px;flex-basis:54px}.vx72-home-brand-chip .vx72-mark::before{font-size:27px}.vx72-home-brand-chip .vx72-mark-ring{inset:-12px}.vx72-home-brand-chip .vx72-mark-dot{top:-8px;transform-origin:3.5px 35px}
.vx72-home-brand-chip b{display:block;font-size:11px;letter-spacing:.18em}.vx72-home-brand-chip small{display:block;margin-top:3px;color:var(--mut);font-size:8px;letter-spacing:.11em;text-transform:uppercase}

/* ---- ranking heroes: one clear 3D focal object ---- */
html.vx72-ready :is(#page-rankings,#page-server-rankings) .vx65-rank-hero{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) 230px;grid-template-areas:'copy visual' 'actions visual';align-items:center!important;overflow:hidden;isolation:isolate;min-height:250px;background:radial-gradient(430px 250px at 92% 48%,rgba(134,74,255,.17),transparent 72%),radial-gradient(420px 220px at 0 100%,rgba(32,205,231,.075),transparent 72%),linear-gradient(145deg,rgba(16,17,40,.92),rgba(7,10,25,.9))!important}
html.vx72-ready :is(#page-rankings,#page-server-rankings) .vx65-rank-hero>div:first-child{position:relative;z-index:3;max-width:720px;grid-area:copy}
html.vx72-ready :is(#page-rankings,#page-server-rankings) .vx65-rank-hero-actions{position:relative;z-index:4;align-self:end;grid-area:actions}
.vx72-rank-visual{grid-area:visual;position:relative;z-index:2;width:230px;height:190px;display:grid;place-items:center;perspective:900px;transform-style:preserve-3d;transform:rotateX(var(--vx72-rx)) rotateY(var(--vx72-ry));transition:transform .18s ease-out;pointer-events:none}
.vx72-rank-visual::before{content:'';position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(138,76,255,.16),transparent 68%);filter:blur(7px);animation:vx72Pulse 5.4s ease-in-out infinite!important}
.vx72-rank-disc{position:absolute;width:170px;height:96px;border:1px solid rgba(160,101,255,.27);border-radius:50%;transform:rotateX(68deg) rotateZ(-9deg);box-shadow:0 0 30px rgba(130,74,255,.11);animation:vx72Disc 12s linear infinite!important}
.vx72-rank-disc.d2{width:126px;height:126px;border-style:dashed;border-color:rgba(61,218,242,.23);transform:rotateY(68deg) rotateZ(10deg);animation-duration:17s!important;animation-direction:reverse!important}
.vx72-rank-visual .vx72-mark{transform:translateZ(24px);animation:vx72RankFloat 5.3s ease-in-out infinite!important}
.vx72-rank-caption{position:absolute;bottom:2px;left:50%;translate:-50% 0;display:flex;gap:6px;white-space:nowrap}.vx72-rank-caption span{height:25px;display:inline-flex;align-items:center;padding:0 9px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(8,10,26,.65);color:var(--mut);font-size:7.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}

/* directory ranking hero uses same visual language but keeps its existing copy */
html.vx72-ready #page-directory-rankings .vx61-directory-hero{grid-template-columns:minmax(0,1fr) 230px!important;min-height:250px!important;isolation:isolate;background:radial-gradient(440px 240px at 91% 45%,rgba(128,69,255,.19),transparent 70%),radial-gradient(430px 250px at 0 100%,rgba(36,209,235,.08),transparent 72%),linear-gradient(145deg,rgba(15,14,35,.98),rgba(7,10,24,.98))!important}
html.vx72-ready #page-directory-rankings .vx61-directory-orb{display:none!important}
html.vx72-ready #page-directory-rankings .vx72-rank-visual{justify-self:end}

/* ranking navigation, board and podium get depth, not noise */
html.vx72-ready :is(#page-rankings,#page-server-rankings,#page-directory-rankings) :is(.vx65-rank-switch button,.vx61-rank-junction>button){transform-style:preserve-3d;overflow:hidden;isolation:isolate}
html.vx72-ready :is(#page-rankings,#page-server-rankings,#page-directory-rankings) :is(.vx65-rank-switch button,.vx61-rank-junction>button)::before{content:'';position:absolute;inset:0;background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.055) 47%,transparent 66%);translate:-120% 0;transition:translate .55s ease;pointer-events:none}
@media(hover:hover) and (pointer:fine){html.vx72-ready :is(#page-rankings,#page-server-rankings,#page-directory-rankings) :is(.vx65-rank-switch button,.vx61-rank-junction>button):hover{transform:perspective(700px) rotateX(2deg) translateY(-3px)!important}html.vx72-ready :is(#page-rankings,#page-server-rankings,#page-directory-rankings) :is(.vx65-rank-switch button,.vx61-rank-junction>button):hover::before{translate:120% 0}}
html.vx72-ready #page-rankings .vx65-user-rank,
html.vx72-ready #page-server-rankings .vx65-rank-board,
html.vx72-ready #page-directory-rankings #rankDirectoryPanel{position:relative;isolation:isolate}
html.vx72-ready #page-rankings .vx65-user-rank::before,
html.vx72-ready #page-server-rankings .vx65-rank-board::before,
html.vx72-ready #page-directory-rankings #rankDirectoryPanel::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 15%,rgba(139,92,246,.035) 45%,transparent 70%);background-size:220% 100%;animation:vx72BoardLight 10s ease-in-out infinite!important;z-index:0}
html.vx72-ready :is(#page-rankings,#page-server-rankings,#page-directory-rankings) :is(.vx60-podium-card,.vx61-sr-podium-card,.vx60-rank-row,.vx61-sr-row,.vx60-directory-row){position:relative;transform-style:preserve-3d;backface-visibility:hidden}
@media(hover:hover) and (pointer:fine){
 html.vx72-ready :is(#page-rankings,#page-server-rankings,#page-directory-rankings) :is(.vx60-podium-card,.vx61-sr-podium-card):hover{transform:perspective(820px) rotateX(2.5deg) rotateY(-2deg) translateY(-6px)!important;box-shadow:0 32px 62px -42px #000,0 20px 42px -35px rgba(137,77,255,.85)!important}
 html.vx72-ready :is(#page-rankings,#page-server-rankings,#page-directory-rankings) :is(.vx60-rank-row,.vx61-sr-row,.vx60-directory-row):hover{transform:translateX(4px) translateZ(5px)!important;border-color:rgba(151,93,255,.3)!important}
}
html.vx72-ready #page-rankings .vx60-podium-card.first{box-shadow:0 26px 62px -44px rgba(245,178,27,.8),inset 0 1px rgba(255,255,255,.05)}
html.vx72-ready #page-server-rankings .vx65-rank-method{position:relative;overflow:hidden}.vx72-rank-beacon{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-size:8px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.vx72-rank-beacon i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);animation:vx72Beacon 1.8s ease-in-out infinite!important}

/* keep mobile deliberately simpler and stable */
@media(max-width:760px){
 .vx72-home-brand-chip{display:none}
 .vx72-home-grid{bottom:-34%;height:62%;background-size:42px 42px;opacity:.38}
 html.vx72-ready #vx66BrandStage{transform:none!important}
 html.vx72-ready :is(#page-rankings,#page-server-rankings) .vx65-rank-hero{grid-template-columns:1fr!important;grid-template-areas:'copy' 'visual' 'actions'!important;min-height:0!important;padding-bottom:18px!important}
 .vx72-rank-visual{width:100%;height:145px;margin-top:8px;transform:none!important}
 .vx72-rank-visual .vx72-mark{width:68px;height:68px;flex-basis:68px}.vx72-rank-visual .vx72-mark::before{font-size:34px}.vx72-rank-visual .vx72-mark-ring{inset:-20px}.vx72-rank-visual .vx72-mark-dot{top:-12px;transform-origin:3.5px 47px}.vx72-rank-disc{width:140px;height:74px}.vx72-rank-disc.d2{width:98px;height:98px}.vx72-rank-caption{bottom:0}.vx72-rank-caption span{font-size:6.8px;height:23px;padding:0 7px}
 html.vx72-ready #page-directory-rankings .vx61-directory-hero{grid-template-columns:1fr!important}.vx72-rank-visual{justify-self:stretch!important}
 html.vx72-ready :is(#page-rankings,#page-server-rankings,#page-directory-rankings) :is(.vx60-podium-card,.vx61-sr-podium-card,.vx60-rank-row,.vx61-sr-row,.vx60-directory-row){transform:none!important}
}
@media(max-width:420px){.vx72-rank-caption span:nth-child(3){display:none}.vx72-rank-visual{height:132px}.vx72-home-grid{display:none}}
@media(prefers-reduced-motion:reduce){.vx72-mark::after,.vx72-mark-ring,.vx72-mark-dot,.vx72-home-grid,.vx72-home-sweep,.vx72-home-stars i,.vx72-rank-visual::before,.vx72-rank-disc,.vx72-rank-visual .vx72-mark,html.vx72-ready #page-rankings .vx65-user-rank::before,html.vx72-ready #page-server-rankings .vx65-rank-board::before,html.vx72-ready #page-directory-rankings #rankDirectoryPanel::before,.vx72-rank-beacon i{animation:none!important}}
@keyframes vx72MarkOrbit{to{transform:rotate(1turn)}}
@keyframes vx72MarkOrbitReverse{to{transform:rotate(-1turn)}}
@keyframes vx72DotOrbit{to{transform:rotate(1turn)}}
@keyframes vx72GridBreath{0%,100%{opacity:.44;translate:0 0}50%{opacity:.7;translate:0 -8px}}
@keyframes vx72SweepRotate{to{transform:rotate(1turn)}}
@keyframes vx72StarFloat{0%,100%{transform:translate3d(0,0,0) scale(.8);opacity:calc(var(--o)*.55)}50%{transform:translate3d(0,-10px,0) scale(1.25);opacity:var(--o)}}
@keyframes vx72Pulse{0%,100%{opacity:.56;transform:scale(.92)}50%{opacity:.92;transform:scale(1.05)}}
@keyframes vx72Disc{to{transform:rotateX(68deg) rotateZ(351deg)}}
@keyframes vx72RankFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes vx72BoardLight{0%,100%{background-position:180% 0}50%{background-position:-60% 0}}
@keyframes vx72Beacon{50%{opacity:.36;transform:scale(.82)}}
