/* Magic UI-style effects: dock magnification, spotlight cards, border beam, shine buttons, animated gradient text. */

/* Dock magnification (sizes are set from JS) */
.rail .railgrp > a,.rail .railgrp > button{transition:width .18s cubic-bezier(.2,.8,.2,1),height .18s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}
.rail .railgrp > * .ico{transition:transform .18s}
.rail .railgrp > *:hover .ico{transform:scale(1.12)}

/* Spotlight card: soft glow + glowing border that follow the pointer */
.card,.kcol,.mini,.dcard,.stat:not(.hot){
  --mx:-999px;--my:-999px;
  border:1px solid transparent;
  background:
    radial-gradient(420px circle at var(--mx) var(--my),rgba(46,91,255,.08),transparent 45%) padding-box,
    linear-gradient(var(--sbg,var(--card)),var(--sbg,var(--card))) padding-box,
    radial-gradient(260px circle at var(--mx) var(--my),rgba(46,91,255,.55),transparent 60%) border-box,
    linear-gradient(var(--sbg,var(--card)),var(--sbg,var(--card))) border-box;
}
.stat:not(.hot),.mini,.dcard{--sbg:var(--soft)}
.mini{--sbg:var(--card)}
.kcol.over{background:var(--accentSoft)}
.stat[style*="var(--card)"]{--sbg:var(--card)}

/* Border beam on hero cards */
@property --beam{syntax:"<angle>";initial-value:0deg;inherits:false}
.hero:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--beam),transparent 0 65%,#7A97FF 80%,#fff 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:beam 5s linear infinite}
@keyframes beam{to{--beam:360deg}}
/* grain + slow aurora inside hero */
.hero:after{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;right:-10%;top:-30%;pointer-events:none;
  background:radial-gradient(circle,rgba(122,151,255,.35),transparent 65%);filter:blur(10px);animation:aurora 9s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate(-35%,30%) scale(1.2)}}
.hero>*{position:relative;z-index:1}

/* Shine sweep on primary buttons */
.btn.shine{position:relative;overflow:hidden;isolation:isolate}
.btn.shine:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(122,151,255,.45) 48%,color-mix(in srgb,var(--inkText) 30%,transparent) 52%,transparent 70%);transform:translateX(-120%);animation:shine 3.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn.shine:hover{box-shadow:0 12px 28px -10px var(--glow)}

/* Animated gradient text */
.grad{background:linear-gradient(90deg,var(--text) 0%,var(--text) 30%,var(--accent) 45%,#A796FF 52%,var(--text) 70%,var(--text) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradx 6s ease-in-out infinite}
@keyframes gradx{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* Ripple on hot stat tiles */
.stat.hot{position:relative;overflow:hidden}
.stat.hot:before{content:"";position:absolute;width:180px;height:180px;right:-60px;top:-60px;border-radius:50%;border:1px solid color-mix(in srgb,var(--hotText) 22%,transparent);box-shadow:0 0 0 22px color-mix(in srgb,var(--hotText) 5%,transparent),0 0 0 44px color-mix(in srgb,var(--hotText) 3%,transparent);animation:ripple 4s ease-in-out infinite;pointer-events:none}
@keyframes ripple{50%{transform:scale(1.08)}}

@media (prefers-reduced-motion:reduce){.hero:before,.hero:after,.btn.shine:after,.grad,.stat.hot:before{animation:none}}