/* Splash v3. Drop-in. No dependencies.
   Icon box is min(60vh, 70vw), pulled in 16px per side so it cannot clip.
   Wide wordmarks use the same cap, then shrink to the viewport so the ink stays on screen. */

html.nf-splash-on,
html.nf-splash-on body { overflow: hidden; }

.nf-splash {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  perspective: 900px;
  font-family: "Segoe UI", system-ui, sans-serif;
}
.nf-splash[hidden] { display: none !important; }

.nf-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0B0C10;
}

.nf-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 10px;
  margin-top: -5px;
  box-shadow: 0 0 16px var(--nf-accent, #3B82F6);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0.02);
  transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent 0%, var(--nf-accent, #3B82F6) 16%, #F7FBFF 50%, var(--nf-accent, #3B82F6) 84%, transparent 100%);
  box-shadow:
    0 0 14px 2px var(--nf-accent, #3B82F6),
    0 0 42px 10px var(--nf-accent-soft, rgba(59, 130, 246, 0.45));
}

.nf-mark {
  position: relative;
  z-index: 2;
  width: min(60vh, 70vw);
  height: min(60vh, 70vw);
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.92);
  filter: brightness(0.22);
  transform-style: preserve-3d;
}
.nf-mark.is-wide {
  width: calc(100vw - 32px);
  height: auto;
  max-height: calc(100vh - 32px);
}
.nf-mark.is-word {
  width: max-content;
  height: auto;
  max-width: none;
  max-height: none;
  filter: brightness(1);
}
.nf-mark img,
.nf-mark svg {
  display: block;
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.nf-mark.is-icon img,
.nf-mark.is-icon svg {
  width: 100%;
  height: 100%;
}
.nf-mark.is-wide img,
.nf-mark.is-wide svg {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 48px);
}

.nf-glow {
  position: absolute;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, var(--nf-glow, transparent) 0%, transparent 70%);
  opacity: 0.85;
}

/* 50 Aminos: black ink sits on a cream card. The purple glow stays outside it. */
.nf-mark.is-cream .nf-cream {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 86%;
  height: 86%;
  transform: translate(-50%, -50%);
  border-radius: 22%;
  background: linear-gradient(165deg, #fcfbfe 0%, #f1ecfb 100%);
  box-shadow:
    0 0 28px 8px rgba(114, 14, 236, 0.55),
    0 0 78px 26px rgba(114, 14, 236, 0.32);
  pointer-events: none;
}
.nf-mark.is-cream .nf-glow {
  inset: -2%;
  opacity: 0.5;
}
.nf-mark.is-cream img,
.nf-mark.is-cream.is-icon img {
  width: 66%;
  height: auto;
  max-height: 72%;
  z-index: 2;
}

.nf-word {
  position: relative;
  z-index: 1;
  margin: 0;
  width: max-content;
  max-width: none;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.88;
  color: #F4F6F8;
  white-space: nowrap;
  font-size: min(60vh, 70vw);
  text-align: center;
}

.nf-credit {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: max(18px, 5vh);
  z-index: 5;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  opacity: 0;
  color: #C5CBD3;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.nf-credit img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.nf-pulse {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  width: 100%;
  height: min(42vh, 320px);
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
}
.nf-pulse polyline {
  fill: none;
  stroke: var(--nf-accent, #3B82F6);
  stroke-width: 7px;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px var(--nf-accent, #3B82F6));
}

.nf-hint {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: max(18px, 4vh);
  z-index: 5;
  margin: 0;
  text-align: center;
  color: #9AA1AA;
  font-size: 13px;
  letter-spacing: 0.01em;
  pointer-events: none;
}

/* ---- run: resolve, strip, hold, push through. Under 2.8s. ---- */
.nf-splash.is-run .nf-mark {
  animation:
    nf-resolve 1.15s cubic-bezier(.16, .84, .28, 1) forwards,
    nf-push 0.72s cubic-bezier(.45, 0, .75, 1) 1.85s forwards;
}
.nf-splash.is-run .nf-backdrop {
  animation: nf-bg-out 0.7s ease 1.95s forwards;
}
.nf-splash.is-run > .nf-strip,
.nf-opener.is-run > .nf-strip {
  animation: nf-strip 0.72s cubic-bezier(.2, .7, .2, 1) 0.16s forwards;
}
.nf-splash.is-run .nf-credit {
  animation: nf-credit 1.55s ease 1.2s forwards;
}
.nf-splash.is-run .nf-hint { opacity: 0; }

.nf-splash.is-pulse.is-run .nf-mark {
  animation:
    nf-resolve 0.95s cubic-bezier(.16, .84, .28, 1) 0.58s forwards,
    nf-push 0.62s cubic-bezier(.45, 0, .75, 1) 2.05s forwards;
}
.nf-splash.is-pulse.is-run .nf-backdrop {
  animation: nf-bg-out 0.6s ease 2.1s forwards;
}
.nf-splash.is-pulse.is-run > .nf-strip {
  animation: nf-strip 0.55s cubic-bezier(.2, .7, .2, 1) 0.7s forwards;
}
.nf-splash.is-pulse.is-run .nf-pulse polyline {
  animation: nf-dash 0.72s cubic-bezier(.4, 0, .2, 1) forwards;
}
.nf-splash.is-pulse.is-run .nf-pulse {
  opacity: 1;
  animation: nf-pulse-fade 0.35s ease 0.7s forwards;
}

@keyframes nf-resolve {
  0% { opacity: 0; transform: scale(0.92); filter: brightness(0.22); }
  50% { opacity: 1; filter: brightness(1.28); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1.04); }
}
@keyframes nf-push {
  0% { opacity: 1; transform: translateZ(0) scale(1); filter: brightness(1.04); }
  100% { opacity: 0; transform: translateZ(260px) scale(2.15); filter: brightness(1.5); }
}
@keyframes nf-bg-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes nf-strip {
  0% { opacity: 0; transform: scaleX(0.04); }
  28% { opacity: 1; }
  72% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes nf-credit {
  0% { opacity: 0; transform: translateY(6px); }
  14% { opacity: 1; transform: none; }
  74% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes nf-dash { to { stroke-dashoffset: 0; } }
@keyframes nf-pulse-fade { to { opacity: 0; } }
@keyframes nf-fadein { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion: the mark is just there, then the dark field fades. No strip, no push. */
.nf-splash.is-reduced .nf-strip,
.nf-splash.is-reduced .nf-pulse { display: none; }
.nf-splash.is-reduced .nf-mark {
  animation: nf-fadein 0.4s ease forwards;
  filter: none;
  transform: none;
}
.nf-splash.is-reduced .nf-credit { animation: nf-fadein 0.4s ease 0.1s forwards; }
.nf-splash.is-reduced .nf-hint { opacity: 0; }
.nf-splash.is-reduced .nf-backdrop { animation: nf-bg-out 0.45s ease 0.7s forwards; }

@media (prefers-reduced-motion: reduce) {
  .nf-splash.is-run .nf-strip,
  .nf-splash.is-run .nf-pulse,
  .nf-opener.is-run > .nf-strip { display: none !important; }
  .nf-splash.is-run .nf-mark {
    animation: nf-fadein 0.4s ease forwards !important;
    filter: none !important;
    transform: none !important;
  }
  .nf-splash.is-run .nf-backdrop { animation: nf-bg-out 0.45s ease 0.55s forwards !important; }
  .nf-fly, .nf-stamp { transition: none !important; }
}

/* ---- section opener ---- */
.nf-opener {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: #0B0C10;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, sans-serif;
}
.nf-open-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 42vh;
  max-width: calc(100vw - 28px);
  transform-origin: center center;
}
.nf-open-cluster img {
  height: min(24vh, 40vw);
  width: auto;
  max-width: calc(100vw - 48px);
  object-fit: contain;
  display: block;
}
.nf-open-name {
  margin: 0;
  max-width: calc(100vw - 28px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: #F4F6F8;
  font-size: min(42vh, 34vw);
  text-align: center;
  text-wrap: balance;
}

/* ---- stamp ---- */
.nf-stamp {
  position: fixed;
  z-index: 75;
  pointer-events: none;
  transform-origin: center center;
  font-family: Impact, "Arial Black", "Segoe UI", sans-serif;
}
.nf-stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nf-stamp.is-home svg { height: auto; }
.nf-stamp.is-home {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  max-width: none;
  transform: translate(-50%, -50%) rotate(-8deg);
  filter: none;
}
.nf-dim {
  position: fixed;
  inset: 0;
  z-index: 74;
  background: rgba(11, 12, 16, 0.62);
  pointer-events: none;
}

/* ---- dossier zoom ---- */
.nf-veil {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #0B0C10;
  opacity: 0;
  pointer-events: none;
}
.nf-veil.is-on { opacity: 1; transition: opacity 0.45s ease; }
.nf-fly {
  position: fixed;
  z-index: 130;
  object-fit: contain;
  pointer-events: none;
  display: grid;
  place-items: center;
  margin: 0;
}