/* ==========================================================================
   NOVELUME — FX LAYER
   Animated background, particles, 3D accents. Loaded after premium.css.
   ========================================================================== */

/* Base colour moves to the root so the animated layers show through */
html { background: #06060b; }
body { background: transparent; }

/* ---- Aurora background (drifting blurred colour fields) ---- */
.fx-aurora {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}
.fx-aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
}
.fx-aurora .a {
  width: 52vw; height: 52vw; min-width: 420px; min-height: 420px;
  left: -12vw; top: -18vh;
  background: radial-gradient(circle, rgba(124, 92, 255, .42), transparent 70%);
  animation: fxAuroraA 26s ease-in-out infinite alternate;
}
.fx-aurora .b {
  width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
  right: -14vw; top: 22vh;
  background: radial-gradient(circle, rgba(86, 120, 255, .34), transparent 70%);
  animation: fxAuroraB 32s ease-in-out infinite alternate;
}
.fx-aurora .c {
  width: 50vw; height: 50vw; min-width: 400px; min-height: 400px;
  left: 28vw; bottom: -22vh;
  background: radial-gradient(circle, rgba(180, 110, 255, .3), transparent 70%);
  animation: fxAuroraC 38s ease-in-out infinite alternate;
}
@keyframes fxAuroraA { to { transform: translate(16vw, 12vh) scale(1.18); } }
@keyframes fxAuroraB { to { transform: translate(-12vw, 14vh) scale(1.12); } }
@keyframes fxAuroraC { to { transform: translate(-10vw, -14vh) scale(1.2); } }

/* ---- Particle field (canvas, styled here) ---- */
.fx-particles {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* ---- 3D hero rings: slow gyroscopic spin ---- */
.depth-ring-one { animation: fxSpin 26s linear infinite; }
.depth-ring-two { animation: fxSpin 34s linear infinite reverse; }
@keyframes fxSpin { to { rotate: 360deg; } }

/* ---- Breathing halo ---- */
.halo { animation: fxHalo 9s ease-in-out infinite; }
@keyframes fxHalo {
  0%, 100% { opacity: .85; scale: 1; }
  50% { opacity: 1; scale: 1.06; }
}

/* ---- Live pill pulse ---- */
.pill.live { animation: fxPulse 2.6s ease-in-out infinite; }
@keyframes fxPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ---- Card graphic shine sweep on hover ---- */
.card-graphic { position: relative; }
.card-graphic::after {
  content: "";
  position: absolute;
  inset: -60% -90%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .1) 50%, transparent 58%);
  transform: translateX(-55%);
  pointer-events: none;
}
.project-card:hover .card-graphic::after {
  animation: fxShine .9s ease forwards;
}
@keyframes fxShine { to { transform: translateX(55%); } }

/* ---- Primary button: subtle breathing glow ---- */
.btn.primary { animation: fxBtnGlow 5s ease-in-out infinite; }
@keyframes fxBtnGlow {
  0%, 100% { box-shadow: 0 12px 34px rgba(122, 102, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
  50% { box-shadow: 0 16px 48px rgba(122, 102, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
}

/* ---- CTA 3D tilt (driven by fx.js) ---- */
.cta { transition: transform .25s ease-out; }

/* ---- Reduced motion: freeze everything ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora i,
  .depth-ring-one,
  .depth-ring-two,
  .halo,
  .pill.live,
  .btn.primary {
    animation: none !important;
  }
  .cta { transition: none; }
}