/* ============================================================
   NAMEUPS TOOLS — Signature Effects
   The boldness lives here. Everything else stays quiet.
   ============================================================ */

/* ---- Aurora field (slow, ambient, cursor-parallaxed) ------------ */
.fx-aurora {
  position: fixed; inset: -20% -10%; z-index: -2; pointer-events: none;
  filter: blur(64px) saturate(155%);
  opacity: .5;
  transform: translate3d(calc(var(--gx,0) * 1px), calc(var(--gy,0) * 1px), 0);
  transition: transform 600ms var(--ease-out);
  background:
    radial-gradient(32% 38% at 18% 24%, color-mix(in srgb,var(--g-blue) 88%,transparent), transparent 60%),
    radial-gradient(30% 36% at 80% 18%, color-mix(in srgb,var(--g-purple) 82%,transparent), transparent 60%),
    radial-gradient(30% 40% at 62% 72%, color-mix(in srgb,var(--g-pink) 70%,transparent), transparent 62%),
    radial-gradient(26% 32% at 28% 80%, color-mix(in srgb,var(--g-cyan) 70%,transparent), transparent 60%),
    radial-gradient(24% 30% at 88% 64%, color-mix(in srgb,var(--g-green) 55%,transparent), transparent 60%),
    radial-gradient(22% 28% at 44% 12%, color-mix(in srgb,var(--g-yellow) 45%,transparent), transparent 60%);
  animation: nt-aurora 24s ease-in-out infinite alternate;
}
.fx-aurora::after {
  content:''; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 38%, transparent, var(--void) 92%);
}
@keyframes nt-aurora {
  0%   { transform: translate3d(0,0,0) scale(1)    rotate(0deg); }
  50%  { transform: translate3d(-3%,2%,0) scale(1.12) rotate(4deg); }
  100% { transform: translate3d(3%,-2%,0) scale(1.05) rotate(-3deg); }
}

/* ---- Holographic wordmark / accent phrase ----------------------- */
.holo {
  background: linear-gradient(100deg,
    var(--iris-2) 0%, var(--iris-1) 22%, var(--iris-4) 42%,
    var(--iris-3) 62%, var(--accent-hi) 82%, var(--iris-2) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: nt-holo 9s linear infinite;
}
@keyframes nt-holo { to { background-position: 220% center; } }
.text-gradient {
  background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb,var(--text) 55%,transparent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Brand mark glyph ------------------------------------------- */
.brand-mark { border-radius: 9px; box-shadow: 0 4px 18px color-mix(in srgb,var(--g-purple) 32%,transparent), 0 0 0 .5px var(--hairline-2); transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--ease); }
.brand:hover .brand-mark { transform: translateY(-1px) rotate(-3deg); box-shadow: 0 6px 26px color-mix(in srgb,var(--g-blue) 45%,transparent); }

/* ---- Pulse dot -------------------------------------------------- */
.pulse, .hero-eyebrow .pulse, .nav-cta .dot { position: relative; }
.hero-eyebrow .pulse::after {
  content:''; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--accent-hi); opacity: .5; animation: nt-ping 2.4s var(--ease-out) infinite;
}
@keyframes nt-ping { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(2.4); opacity: 0; } }

/* ---- Tool card: cursor spotlight + prism edge ------------------- */
.tool-card > *:not(.card-link) { position: relative; z-index: 1; }
.tool-card::before {                     /* spotlight glow follows cursor */
  content:''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(220px 220px at var(--mx) var(--my),
    color-mix(in srgb,var(--accent) calc(var(--glow) * 26%), transparent), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.tool-card:hover::before { opacity: 1; }
.tool-card::after {                       /* animated multicolor gradient edge */
  content:''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.4px;
  background: linear-gradient(120deg,
    var(--g-blue), var(--g-purple) 25%, var(--g-pink) 45%,
    var(--g-cyan) 65%, var(--g-green) 82%, var(--g-blue));
  background-size: 280% 280%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .28; transition: opacity var(--dur) var(--ease);
  animation: nt-edge 8s linear infinite;
}
.tool-card:hover::after { opacity: 1; }
@keyframes nt-edge { 0% { background-position: 0% 50%; } 100% { background-position: 280% 50%; } }
.tool-card:hover .card-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 24px color-mix(in srgb,var(--accent) 30%,transparent); }

/* ---- Glass shine on search + nav -------------------------------- */
.search-field, .nav-shell { position: relative; }

/* ---- Seal sweep ------------------------------------------------- */
.seal::before {
  content:''; position: absolute; inset: 0;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, color-mix(in srgb,var(--gold) 10%,transparent) 60deg, transparent 120deg);
  animation: nt-rotate 16s linear infinite; opacity: .5;
}
@keyframes nt-rotate { to { transform: rotate(360deg); } }
.seal > * { position: relative; z-index: 1; }

/* ---- Scroll reveal ---------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .06s; }
.reveal[data-d="2"] { transition-delay: .12s; }
.reveal[data-d="3"] { transition-delay: .18s; }
.reveal[data-d="4"] { transition-delay: .24s; }

/* Load-in for hero pieces */
.rise { opacity: 0; transform: translateY(20px); animation: nt-rise .8s var(--ease-out) forwards; }
.rise[style*="--i"] { animation-delay: calc(var(--i) * .08s); }
@keyframes nt-rise { to { opacity: 1; transform: none; } }

/* ---- Keyframes shared ------------------------------------------- */
@keyframes nt-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nt-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes nt-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---- Magnetic (JS sets --tx/--ty) ------------------------------- */
.magnetic { transition: transform var(--dur) var(--spring); transform: translate(var(--tx,0),var(--ty,0)); }