/* shared glossy-3D accents (homepage look): glowing edge, reflection, moving shine */
.gloss{position:relative;isolation:isolate;border-radius:var(--gr,18px);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 30px 60px -28px rgba(0,0,0,.7),0 0 34px -10px var(--glow,rgba(160,140,255,.55));transform-style:preserve-3d}
.gloss::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.08))}
.gloss::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;pointer-events:none;z-index:4;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-160%) skewX(-16deg);animation:shine 5.5s cubic-bezier(.6,0,.2,1) infinite;animation-delay:var(--sd,0s)}
.gloss{overflow:hidden}
@keyframes shine{0%,55%{transform:translateX(-160%) skewX(-16deg)}100%{transform:translateX(360%) skewX(-16deg)}}
.offscreen .gloss::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.gloss::after{animation:none;display:none}}