.northwaveIntroSeen .northwaveIntro {
  display: none !important;
  animation: none !important;
}

.northwaveIntro:not(.isRunning),
.northwaveIntro:not(.isRunning)::before,
.northwaveIntro:not(.isRunning)::after,
.northwaveIntro:not(.isRunning) .northwaveIntroAmbient,
.northwaveIntro:not(.isRunning) .northwaveIntroStage,
.northwaveIntro:not(.isRunning) .northwaveIntroSignal,
.northwaveIntro:not(.isRunning) .northwaveIntroSignal i,
.northwaveIntro:not(.isRunning) .northwaveIntroWord span,
.northwaveIntro:not(.isRunning) .northwaveIntroRule i,
.northwaveIntro:not(.isRunning) .northwaveIntroTag,
.northwaveIntro:not(.isRunning) .northwaveIntroEdge {
  animation-play-state: paused !important;
}

.northwaveIntro {
  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #f5fbff;
  background:
    radial-gradient(circle at 50% 48%, rgba(123,215,255,.13), transparent 28%),
    linear-gradient(180deg, rgba(2,8,16,.52), rgba(3,13,23,.74)),
    url("./assets/northwave-bg-glass-v2.png") center / cover fixed;
  isolation: isolate;
  animation: northwaveIntroLifecycle 3.5s cubic-bezier(.72,0,.22,1) forwards;
}

.northwaveIntro::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(circle at 42% 48%, rgba(146,240,207,.18), transparent 21%),
    radial-gradient(circle at 58% 52%, rgba(123,215,255,.20), transparent 24%);
  filter: blur(30px);
  opacity: 0;
  transform: scale(.7);
  animation: northwaveIntroAura 2.8s ease-out .15s forwards;
}

.northwaveIntro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgba(219,250,255,.12) 48%, transparent 61%);
  transform: translateX(-120%);
  animation: northwaveIntroSweep 1.1s cubic-bezier(.2,.75,.2,1) 1.35s both;
}

.northwaveIntroAmbient {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(123,215,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,215,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, #000 8%, transparent 68%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: northwaveIntroGrid 2.2s ease .5s forwards;
}

.northwaveIntroStage {
  position: relative;
  width: min(920px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(.93);
  animation: northwaveIntroStage 3.2s cubic-bezier(.16,.78,.24,1) .1s both;
}

.northwaveIntroSignal {
  height: 58px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  opacity: 0;
  animation: northwaveIntroSignalIn .45s ease .12s forwards;
}

.northwaveIntroSignal i {
  width: 6px;
  height: var(--bar-height, 24px);
  border-radius: 999px;
  background: linear-gradient(180deg, #b6fae5 0%, #92f0cf 42%, #7bd7ff 100%);
  box-shadow: 0 0 16px rgba(123,215,255,.46);
  transform-origin: center;
  animation: northwaveIntroBar .72s cubic-bezier(.2,.9,.2,1) calc(.18s + var(--bar-delay, 0s)) both;
}
.northwaveIntroSignal i:nth-child(1),
.northwaveIntroSignal i:nth-child(7) { --bar-height: 16px; --bar-delay: .18s; }
.northwaveIntroSignal i:nth-child(2),
.northwaveIntroSignal i:nth-child(6) { --bar-height: 32px; --bar-delay: .10s; }
.northwaveIntroSignal i:nth-child(3),
.northwaveIntroSignal i:nth-child(5) { --bar-height: 46px; --bar-delay: .05s; }
.northwaveIntroSignal i:nth-child(4) { --bar-height: 58px; }

.northwaveIntroWord {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .8vw, 13px);
  font-family: "Sora", "Manrope", "Segoe UI", sans-serif;
  font-size: clamp(42px, 8.8vw, 112px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: .02em;
  text-shadow: 0 15px 50px rgba(3,10,16,.6);
}

.northwaveIntroWord span {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(24px) scale(.82);
  animation: northwaveIntroLetter .72s cubic-bezier(.17,.84,.3,1) calc(.52s + var(--letter) * .055s) forwards;
}

.northwaveIntroWord span:nth-child(n+6) {
  color: transparent;
  background: linear-gradient(155deg, #adfae2 10%, #7bd7ff 88%);
  -webkit-background-clip: text;
  background-clip: text;
}

.northwaveIntroRule {
  width: min(560px, 68vw);
  height: 1px;
  margin-top: 32px;
  overflow: visible;
  background: rgba(255,255,255,.09);
}

.northwaveIntroRule i {
  display: block;
  width: 0;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, #92f0cf 28%, #7bd7ff 72%, transparent);
  box-shadow: 0 0 18px rgba(123,215,255,.55);
  animation: northwaveIntroRule 1.1s cubic-bezier(.2,.8,.2,1) 1.15s forwards;
}

.northwaveIntroTag {
  margin-top: 18px;
  color: rgba(226,243,248,.66);
  font-size: clamp(8px, 1vw, 11px);
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: northwaveIntroTag .65s ease 1.55s forwards;
}

.northwaveIntroEdge {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #92f0cf, #7bd7ff, transparent);
  box-shadow: 0 -8px 30px rgba(123,215,255,.44);
  transform: translateX(-50%);
  animation: northwaveIntroEdge 2.6s cubic-bezier(.16,.75,.24,1) .35s forwards;
}

.northwaveIntro.isSkipped {
  animation: northwaveIntroSkip .32s ease forwards !important;
}

@keyframes northwaveIntroLifecycle {
  0%, 71% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes northwaveIntroSkip {
  to { opacity: 0; visibility: hidden; }
}
@keyframes northwaveIntroAura {
  0% { opacity: 0; transform: scale(.68); }
  55% { opacity: 1; }
  100% { opacity: .45; transform: scale(1.12); }
}
@keyframes northwaveIntroSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
@keyframes northwaveIntroGrid {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: .56; transform: scale(1); }
}
@keyframes northwaveIntroStage {
  0% { opacity: 0; transform: scale(.93); }
  12%, 76% { opacity: 1; }
  100% { opacity: .8; transform: scale(1.035); }
}
@keyframes northwaveIntroSignalIn { to { opacity: 1; } }
@keyframes northwaveIntroBar {
  0% { opacity: 0; transform: scaleY(.05); }
  62% { opacity: 1; transform: scaleY(1.18); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes northwaveIntroLetter {
  0% { opacity: 0; filter: blur(14px); transform: translateY(24px) scale(.82); }
  70% { opacity: 1; filter: blur(0); transform: translateY(-2px) scale(1.015); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes northwaveIntroRule { to { width: 100%; } }
@keyframes northwaveIntroTag { to { opacity: 1; transform: translateY(0); } }
@keyframes northwaveIntroEdge {
  0% { width: 0; opacity: 0; }
  18%, 74% { opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

@media (max-width: 560px) {
  .northwaveIntroSignal { height: 42px; margin-bottom: 18px; gap: 5px; transform: scale(.78); }
  .northwaveIntroWord { gap: 2px; font-size: clamp(32px, 12.6vw, 54px); }
  .northwaveIntroRule { margin-top: 24px; width: 76vw; }
  .northwaveIntroTag { max-width: 85vw; text-align: center; line-height: 1.8; letter-spacing: .24em; }
}

@media (prefers-reduced-motion: reduce) {
  .northwaveIntro { animation-duration: .9s; }
  .northwaveIntro::before,
  .northwaveIntro::after,
  .northwaveIntroAmbient,
  .northwaveIntroStage,
  .northwaveIntroSignal,
  .northwaveIntroSignal i,
  .northwaveIntroWord span,
  .northwaveIntroRule i,
  .northwaveIntroTag,
  .northwaveIntroEdge { animation: none !important; }
  .northwaveIntroStage,
  .northwaveIntroSignal,
  .northwaveIntroWord span,
  .northwaveIntroTag { opacity: 1; filter: none; transform: none; }
  .northwaveIntroRule i { width: 100%; }
}