/* fx.css - Vootkit premium motion layer (v58). Magic UI / Aceternity techniques in vanilla CSS.
 * GPU-friendly (transform/opacity only). Respects reduced-motion. */

/* ---- Aurora hero backdrop (animated gradient blobs) ---- */
.fx-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fx-aurora::before,.fx-aurora::after{content:"";position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(90px);opacity:.5}
.fx-aurora::before{background:radial-gradient(circle,#2563eb,transparent 60%);top:-15%;right:-10%;animation:fxFloat1 18s ease-in-out infinite}
.fx-aurora::after{background:radial-gradient(circle,#06b6d4,transparent 60%);bottom:-20%;left:-10%;animation:fxFloat2 22s ease-in-out infinite}
@keyframes fxFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,8%) scale(1.15)}}
@keyframes fxFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,-6%) scale(1.2)}}
html[data-theme="dark"] .fx-aurora::before,html[data-theme="dark"] .fx-aurora::after{opacity:.32}

/* ---- Animated dot grid ---- */
.fx-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(37,99,235,.14) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 40%,transparent 100%);
  animation:fxGrid 24s linear infinite}
@keyframes fxGrid{to{background-position:26px 26px}}

/* ---- Beam border (moving conic light) on the composer ---- */
.fx-beam{position:relative}
.fx-beam::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--fx-a,0deg),transparent 0 70%,#2563eb 80%,#06b6d4 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:fxSpin 5s linear infinite;opacity:.9}
@keyframes fxSpin{to{--fx-a:360deg}}
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---- Spotlight follow on cards ---- */
[data-fx-spotlight]{position:relative;overflow:hidden}
[data-fx-spotlight]::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.14),transparent 60%)}
[data-fx-spotlight]:hover::after{opacity:1}

/* ---- Shimmer sweep on primary CTAs ---- */
.fx-shimmer{position:relative;overflow:hidden}
.fx-shimmer::after{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:fxShine 3.4s ease-in-out infinite}
@keyframes fxShine{0%{left:-60%}55%{left:130%}100%{left:130%}}

/* ---- Magnetic buttons ---- */
.fx-magnetic{transition:transform .18s cubic-bezier(.2,.8,.2,1)}

/* ---- Scroll reveal ---- */
.fx-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.fx-reveal.in{opacity:1;transform:none}

/* ---- Meteors (subtle streaks) ---- */
.fx-meteors{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-meteors i{position:absolute;top:-10%;width:2px;height:60px;background:linear-gradient(180deg,#60a5fa,transparent);opacity:.5;transform:rotate(25deg);animation:fxMeteor linear infinite}
@keyframes fxMeteor{0%{transform:translate(0,0) rotate(25deg);opacity:0}10%{opacity:.6}100%{transform:translate(-140px,120vh) rotate(25deg);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .fx-aurora::before,.fx-aurora::after,.fx-grid,.fx-beam::before,.fx-shimmer::after,.fx-meteors i{animation:none!important}
  .fx-reveal{opacity:1;transform:none}
}