/* effects.css — Ambient background system, cursor glow, splash/loading screen, reduced-motion & mobile perf tweaks */
/* =========================================================
   PHASE 16 — PREMIUM VISUAL EFFECTS
   Ambient background, cursor glow, splash, glass, motion
   ========================================================= */

/* ---- Ambient background system (dark mode only) ---- */
.bg-fx{
  position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 1s ease;
}
html.dark .bg-fx{ opacity:1; }
.bg-fx__aurora{
  position:absolute; inset:-15%;
  background:
    radial-gradient(32% 40% at 18% 20%, rgba(18,95,221,.32), transparent 70%),
    radial-gradient(26% 34% at 82% 14%, rgba(250,205,4,.06), transparent 70%),
    radial-gradient(40% 48% at 80% 84%, rgba(13,69,161,.30), transparent 70%),
    radial-gradient(28% 36% at 22% 92%, rgba(143,180,255,.14), transparent 70%);
  filter:blur(70px) saturate(130%);
  animation:auroraDrift 28s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes auroraDrift{
  0%  { transform:translate3d(0,0,0)      rotate(0deg)  scale(1);   }
  50% { transform:translate3d(1.5%,-2.5%,0) rotate(3deg)  scale(1.06); }
  100%{ transform:translate3d(-2%,1.5%,0)  rotate(-2.5deg) scale(1.02); }
}
.bg-fx__mesh{
  position:absolute; inset:0; opacity:.4;
  background-image:
    linear-gradient(rgba(143,180,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,180,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(60% 60% at 50% 30%, #000 0%, transparent 100%);
  -webkit-mask-image:radial-gradient(60% 60% at 50% 30%, #000 0%, transparent 100%);
}
.bg-fx__stars{
  position:absolute; inset:0; opacity:.3;
  background-image:
    radial-gradient(1px 1px at 22% 28%, #fff, transparent),
    radial-gradient(1px 1px at 63% 68%, #fff, transparent),
    radial-gradient(1px 1px at 84% 22%, #fff, transparent),
    radial-gradient(1px 1px at 37% 82%, #fff, transparent),
    radial-gradient(1px 1px at 91% 58%, #fff, transparent),
    radial-gradient(1px 1px at 12% 62%, #fff, transparent),
    radial-gradient(1px 1px at 50% 12%, #fff, transparent);
  animation:starsTwinkle 7s ease-in-out infinite;
}
@keyframes starsTwinkle{ 0%,100%{opacity:.18;} 50%{opacity:.4;} }

/* ---- Cursor-follow ambient glow ---- */
.cursor-glow{
  position:fixed; top:0; left:0; z-index:-1; pointer-events:none;
  mix-blend-mode:screen;
  width:460px; height:460px; border-radius:50%;
  transform:translate3d(calc(var(--mx, 50vw) - 50%), calc(var(--my, 40vh) - 50%), 0);
  background:radial-gradient(circle, rgba(18,95,221,.16), rgba(250,205,4,.025) 45%, transparent 72%);
  opacity:0; transition:opacity .5s ease;
  will-change:transform;
}
html.dark .cursor-glow.active{ opacity:1; }

/* ---- Splash / loading experience ---- */
.splash{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:var(--bg); transition:opacity .6s ease, visibility .6s ease;
}
.splash.done{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-logo{ width:60px; height:60px; color:var(--primary); opacity:0; transform:scale(.72); animation:splashReveal 1s cubic-bezier(.16,1,.3,1) forwards .1s; }
html.dark .splash-logo{ color:#fff; filter:drop-shadow(0 0 22px rgba(18,95,221,.65)); }
@keyframes splashReveal{
  0%{opacity:0; transform:scale(.72);}
  55%{opacity:1; transform:scale(1.06);}
  100%{opacity:1; transform:scale(1);}
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
  .reveal{opacity:1; transform:none; filter:none;}
  .bg-fx, .cursor-glow{ display:none; }
  .splash{ display:none; }
}

/* ---------- mobile performance: lighten GPU-costly ambient effects ---------- */
@media (max-width:768px){
  .cursor-glow{ display:none; } /* mouse-follow glow is meaningless on touch devices */
  .bg-fx__aurora{ filter:blur(36px) saturate(120%); animation-duration:42s; }
  .bg-fx__stars{ animation:none; opacity:.22; }
  .bg-fx__mesh{ background-size:72px 72px; }
}