/* Holo v2 — bold */
@property --ang{syntax:'<angle>';inherits:true;initial-value:0deg}
.tilt{--rx:0deg;--ry:0deg;--dx:0;--dy:0;--mx:50%;--my:50%;position:relative;isolation:isolate;
 transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz,0px)) scale(var(--sc,1));
 transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s,filter .6s;will-change:transform}
.tilt.on{transition:transform .12s ease-out,box-shadow .2s,filter .2s;--tz:30px;--sc:1.055;z-index:5;
 box-shadow:calc(var(--dx)*-28px) calc(var(--dy)*-28px + 22px) 46px rgba(46,14,90,.45),calc(var(--dx)*-10px) calc(var(--dy)*-10px) 0 1px rgba(200,205,214,.6)}
.stats>div.tilt.on,.htl li.tilt.on{box-shadow:none;filter:drop-shadow(calc(var(--dx)*-18px) calc(var(--dy)*-18px + 16px) 16px rgba(46,14,90,.55))}
/* foil: under text */
.tilt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;
 background:
  radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 14%,transparent 34%),
  linear-gradient(calc(115deg + var(--dx)*40deg),transparent calc(var(--mx) - 38%),rgba(170,140,230,.75) calc(var(--mx) - 20%),rgba(120,220,240,.65) calc(var(--mx) - 8%),rgba(255,255,255,.9) var(--mx),rgba(232,200,130,.6) calc(var(--mx) + 10%),rgba(180,150,235,.7) calc(var(--mx) + 22%),transparent calc(var(--mx) + 40%)),
  conic-gradient(from var(--ang) at var(--mx) var(--my),#c7b4ee,#d9dee6,#9fd8ef,#b28ae0,#e9d6a6,#c7b4ee);
 background-blend-mode:screen,normal,normal;mix-blend-mode:color-dodge}
.tilt.on::before{opacity:.5}
.cards .card.tilt::before{mix-blend-mode:multiply}
.cards .card.tilt.on::before{opacity:.42}
.stats>div.tilt::before,.htl li.tilt::before{display:block!important;left:0;top:0;width:100%;height:100%;clip-path:none;mix-blend-mode:overlay}
.stats>div.tilt.on::before,.htl li.tilt.on::before{opacity:.85}
/* glowing rotating edge */
.card.tilt::after{content:"";position:absolute;inset:-2px;padding:2px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
 background:conic-gradient(from var(--ang),#4A1C7E,#c7b4ee,#ffffff,#9fd8ef,#7b3fc4,#e9d6a6,#4A1C7E);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 6px rgba(160,110,230,.9))}
.card.tilt.on::after{opacity:1;animation:spin 3s linear infinite}
@keyframes spin{to{--ang:360deg}}
/* inner float */
.tilt>*{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tilt.on>*{transition:transform .12s ease-out;transform:translate(calc(var(--dx)*10px),calc(var(--dy)*8px))}
.tilt.on>h3,.tilt.on>b,.tilt.on>.hex,.tilt.on>svg,.tilt.on>.tag{transform:translate(calc(var(--dx)*18px),calc(var(--dy)*14px)) scale(1.06);text-shadow:0 6px 14px rgba(46,14,90,.25)}
/* idle glint on stat hexes */
.stats>div{position:relative;overflow:hidden}
.stats>div>span.glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);background-size:300% 100%;animation:glint 5s ease-in-out infinite;animation-delay:var(--gd,0s);mix-blend-mode:overlay}
@keyframes glint{0%,55%{background-position:120% 0}85%,100%{background-position:-60% 0}}
/* hero */
.hero .facets{transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.12);transition:transform .5s cubic-bezier(.2,.8,.2,1);animation:shimmer 7s ease-in-out infinite}
@keyframes shimmer{0%,100%{filter:brightness(1) hue-rotate(0deg)}50%{filter:brightness(1.12) hue-rotate(-12deg)}}
.hero .photo{transform:perspective(800px) translate3d(calc(var(--px,0px)*-1.3),calc(var(--py,0px)*-1.3),0) rotateY(calc(var(--px,0px)*-.4deg)) rotateX(calc(var(--py,0px)*.4deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(calc(var(--px,0px)*.6) calc(var(--py,0px)*.6 + 18px) 22px rgba(46,14,90,.35))}
.hero-text{transform:translate3d(calc(var(--px,0px)*.6),calc(var(--py,0px)*.6),0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
/* spotlight on dark bands */
.band.dark{position:relative}
.band.dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(170,120,240,.35),rgba(120,220,240,.08) 40%,transparent 70%)}
.band.dark.lit::before{opacity:1}
.band.dark>*{position:relative}
/* buttons/nav shine */
.btn,.links a{position:relative;overflow:hidden}
.btn::before,.links a::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg)}
.btn:hover::before,.btn:focus-visible::before,.links a:hover::before,.links a:focus-visible::before{left:130%;transition:left .7s ease}
.btn:hover{box-shadow:0 10px 24px rgba(74,28,126,.45)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
@media (hover:none),(pointer:coarse){.stats>div>span.glint{display:none}}
@media (prefers-reduced-motion:reduce){.tilt,.tilt>*,.hero .facets,.hero .photo,.hero-text{transform:none!important;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}.btn::before,.links a::before,.glint,.band.dark::before{display:none}.card.tilt::after{animation:none}}
/* v2b: beat style.css :hover transforms, stronger foil on light surfaces */
.card.tilt:hover,.card.tilt.on,a.card.link.tilt:hover{transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz,0px)) scale(var(--sc,1))}
.cards .card.tilt::before,.stats>div.tilt:nth-child(even)::before{mix-blend-mode:normal}
.cards .card.tilt.on::before{opacity:.5}
.stats>div.tilt:nth-child(even).on::before{opacity:.6}
.stats>div.tilt:nth-child(odd).on::before{opacity:.95;mix-blend-mode:overlay}
.band.dark .card.tilt::before{mix-blend-mode:color-dodge}
.links a{flex-shrink:0}
