/* ===== Samcommunity Certs — motion & 3D layer ===== */
#fx{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55}
.cursor-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(140,82,255,.22),rgba(34,211,238,.08) 40%,transparent 70%);transform:translate3d(-999px,-999px,0);transition:opacity .4s;will-change:transform}
/* page intro */
body.is-loading main,body.is-loading .site-nav{opacity:0;transform:translateY(12px)}
main,.site-nav{transition:opacity .7s var(--ease),transform .7s var(--ease)}
/* split words */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(105%) rotate(4deg);opacity:0;transition:transform .9s cubic-bezier(.2,.9,.2,1),opacity .9s;transition-delay:calc(var(--i)*55ms + 120ms)}
.split.in .w>span{transform:none;opacity:1}
.split .grad-text{display:inline}
/* stagger children */
[data-stagger]>*{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--si,0)*90ms)}
[data-stagger].in>*{opacity:1;transform:none}
/* spotlight cards */
.spot{--mx:50%;--my:50%}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(140,82,255,.22),rgba(34,211,238,.08) 35%,transparent 60%);z-index:0}
.spot:hover::after{opacity:1}
.spot>*{position:relative;z-index:1}
[data-tilt]{transition:transform .5s var(--ease);transform-style:preserve-3d;will-change:transform}
/* animated conic border */
.ring-border{position:relative}
.ring-border::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 60%,var(--purple) 70%,var(--cyan) 80%,var(--pink) 88%,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinAng 4s linear infinite;opacity:1;height:auto;z-index:2}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spinAng{to{--ang:360deg}}
/* button shimmer */
.btn.primary{overflow:hidden}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:140%}}
/* hero 3D stage */
.stage{position:relative;perspective:1400px;width:100%;max-width:460px;justify-self:center;aspect-ratio:1/1.18}
.stage .floor{position:absolute;left:-40%;right:-40%;bottom:-16%;height:60%;transform:rotateX(72deg);transform-origin:bottom;
  background-image:linear-gradient(rgba(140,82,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(140,82,255,.35) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 70%);mask:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 70%);animation:gridMove 4s linear infinite;opacity:.7}
@keyframes gridMove{to{background-position:0 44px}}
.stage .orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(183,148,255,.28);transform-style:preserve-3d;pointer-events:none}
.stage .o1{width:118%;aspect-ratio:1;margin:-59% 0 0 -59%;transform:rotateX(70deg);animation:orbit 18s linear infinite}
.stage .o2{width:96%;aspect-ratio:1;margin:-48% 0 0 -48%;transform:rotateX(70deg) rotateY(20deg);animation:orbit 12s linear infinite reverse;border-color:rgba(34,211,238,.28)}
.stage .orbit i{position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan),0 0 40px var(--cyan)}
.stage .o1 i{background:var(--purple);box-shadow:0 0 18px var(--purple),0 0 40px var(--purple)}
@keyframes orbit{to{transform:rotateX(70deg) rotateZ(360deg)}}
.stage .float3d{position:absolute;inset:6% 8% 10%;transform-style:preserve-3d;animation:float3d 9s ease-in-out infinite}
@keyframes float3d{0%,100%{transform:rotateY(-14deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(10deg) rotateX(-3deg) translateY(-18px)}}
.stage .cert-card{position:absolute;inset:0;padding:10px;border-radius:24px}
.stage .cert-card img{height:100%;width:100%;object-fit:cover;object-position:top}
.stage .scan{position:absolute;left:10px;right:10px;height:70px;top:10px;border-radius:12px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.28),transparent);border-bottom:2px solid rgba(34,211,238,.9);box-shadow:0 8px 30px rgba(34,211,238,.45);animation:scan 3.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes scan{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(calc(var(--h,480px) - 90px));opacity:0}}
.chip-float{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;white-space:nowrap}
.chip-float b{font:700 13px var(--font-h);display:block}.chip-float small{font:500 11px var(--font-b);color:var(--muted)}
.chip-float.a{left:-14%;bottom:18%;animation:bob 6s ease-in-out infinite}
.chip-float.b{right:-12%;top:14%;animation:bob 7s ease-in-out -2s infinite}
.chip-float .dot-live{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(34,211,238,.6);animation:pulse 2s infinite;margin:0 6px}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
@keyframes bob{50%{transform:translateY(-12px)}}
/* stats strip */
.statline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px;width:100%;max-width:560px}
.statline div{padding:12px 16px;border-radius:16px}
.statline b{display:block;font:800 22px/1 var(--font-h);letter-spacing:-.02em}
.statline small{color:var(--muted);font-size:12.5px}
/* marquee */
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee .track{display:flex;gap:16px;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee .brand-tile{width:230px;flex:none}
/* seal pulse on result */
.seal{position:relative}
.seal::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(140,82,255,.6);animation:ripple 2.4s ease-out infinite}
.seal.red::after{border-color:rgba(216,0,0,.6)}
@keyframes ripple{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.6);opacity:0}}
.res-side .cert-card{position:relative;overflow:hidden}
.res-side .cert-card .scan{position:absolute;left:12px;right:12px;top:12px;height:80px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(34,211,238,.22),transparent);border-bottom:2px solid rgba(34,211,238,.85);animation:scan 3.8s cubic-bezier(.6,0,.4,1) infinite}
/* icon tiles glow */
.icon-tile{transition:transform .4s var(--ease),box-shadow .4s}
.spot:hover .icon-tile{transform:translateY(-4px) rotate(-6deg) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 40px rgba(34,211,238,.35)}
/* nav underline */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--purple),var(--cyan));transform:scaleX(0);transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
/* admin count + rows */
.adm .stat b{background:linear-gradient(90deg,#fff,#D9C6FF 50%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.adm .tbl tbody tr{animation:rowIn .5s var(--ease) both;animation-delay:calc(var(--ri,0)*40ms)}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}}
@media (max-width:900px){.cursor-glow{display:none}.chip-float.a{left:-2%}.chip-float.b{right:-2%}.stage{max-width:340px}.statline b{font-size:22px}}
@media (prefers-reduced-motion:reduce){
  #fx,.cursor-glow{display:none}
  .split .w>span,[data-stagger]>*{transform:none!important;opacity:1!important;transition:none}
  .stage .float3d,.stage .orbit,.stage .floor,.scan,.marquee .track,.btn.primary::after,.ring-border::before,.chip-float,.seal::after,.grad-text{animation:none!important}
}
.split .grad-text .w>span{background:inherit;background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s linear infinite}
.split .grad-text{animation:none}
html,body{overflow-x:clip}
.hero,.stage{overflow:visible}
.hero{overflow-x:clip}
.chip-float{background:linear-gradient(135deg,rgba(140,82,255,.35),rgba(10,7,22,.88))}
@media (max-width:600px){.statline{gap:8px}.statline div{padding:12px}.statline small{display:block;font-size:11px;line-height:1.35}}