/* ============================================================
   NORTH CLASS — ANIMATION LAYER
   Loader, aurora backdrop, particle canvas, cursor glow and the
   shared scroll-reveal utility classes used across every page.
   ============================================================ */

/* ---------------- Loader ---------------- */
.loader{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  background: var(--bg);
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.loader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .04em;
  background: var(--aurora-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.loader__bar{
  width: 180px; height: 3px;
  border-radius: 999px;
  background: var(--glass-border);
  overflow: hidden;
}
.loader__bar::after{
  content: "";
  display: block;
  width: 40%; height: 100%;
  background: var(--aurora-gradient);
  border-radius: 999px;
  animation: loaderSlide 1.1s var(--ease-in-out) infinite;
}
@keyframes loaderSlide{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(350%); }
}

/* ---------------- Aurora backdrop ---------------- */
.aurora-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.aurora-blob{
  position: absolute;
  width: 60vw; height: 60vw;
  max-width: 780px; max-height: 780px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.38;
  mix-blend-mode: screen;
  will-change: transform;
}
:root[data-theme="light"] .aurora-blob{ opacity: 0.28; mix-blend-mode: multiply; filter: blur(110px); }

.aurora-blob--1{ background: var(--aurora-violet); top: -18%; left: -12%; animation: auroraDrift1 26s ease-in-out infinite; }
.aurora-blob--2{ background: var(--aurora-green); top: 10%; right: -18%; animation: auroraDrift2 32s ease-in-out infinite; }
.aurora-blob--3{ background: var(--aurora-magenta); bottom: -22%; left: 20%; animation: auroraDrift3 29s ease-in-out infinite; }

@keyframes auroraDrift1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(6vw, 8vh) scale(1.15); }
}
@keyframes auroraDrift2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-7vw, 6vh) scale(1.1); }
}
@keyframes auroraDrift3{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(4vw, -8vh) scale(1.2); }
}

.aurora-bg::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, transparent 0%, var(--bg) 78%);
}

/* ---------------- Particle canvas ---------------- */
.particles-canvas{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
}

/* ---------------- Cursor glow ---------------- */
.cursor-glow{
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  margin-left: -210px; margin-top: -210px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--aurora-violet) 22%, transparent) 0%, transparent 68%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  will-change: transform;
}
.cursor-glow.is-active{ opacity: 1; }
@media (hover: none), (pointer: coarse){
  .cursor-glow{ display: none; }
}

/* ---------------- Scroll reveal ---------------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
}
.reveal.is-visible{
  animation: revealUp .8s var(--ease-out) forwards;
}
@keyframes revealUp{
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------------- Misc motion utilities ---------------- */
.float{ animation: floatY 5s ease-in-out infinite; }
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

.spin-slow{ animation: spin 12s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.pulse-dot{ animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .5; transform: scale(.75); }
}