.site-intro {
  --intro-red: #ee3124;
  --intro-cyan: #57d2e4;
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f5f7fa;
  background: #080a0e;
  opacity: 1;
  overflow: hidden;
  isolation: isolate;
  transition: opacity .48s ease, visibility .48s ease;
}

.site-intro[hidden] { display: none; }
.site-intro.is-exiting { opacity: 0; visibility: hidden; pointer-events: none; }
body.intro-active { overflow: hidden; }

.site-intro:not(.is-running) .intro-scan,
.site-intro:not(.is-running) .intro-particles,
.site-intro:not(.is-running) .intro-shield-glow,
.site-intro:not(.is-running) .intro-sparkles i,
.site-intro:not(.is-running) .shield-outline,
.site-intro:not(.is-running) .net-line,
.site-intro:not(.is-running) .net-nodes circle,
.site-intro:not(.is-running) .shield-core rect { animation-play-state: paused; }

.intro-backdrop,
.intro-scan,
.intro-particles,
.intro-matrix { position: absolute; inset: 0; pointer-events: none; }

.intro-backdrop {
  z-index: -1;
  background:
    radial-gradient(circle at 50% 42%, rgba(238,49,36,.105), transparent 27rem),
    radial-gradient(circle at 50% 100%, rgba(87,210,228,.035), transparent 34rem),
    linear-gradient(180deg, rgba(8,10,14,.28), #080a0e 91%);
}

.intro-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.023) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.023) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, black 0, transparent 73%);
  opacity: .55;
}

.intro-scan {
  background: linear-gradient(180deg, transparent 0, transparent 48%, rgba(238,49,36,.13) 50%, transparent 52%, transparent 100%);
  background-size: 100% 38%;
  animation: intro-scan 2.45s linear both;
  mix-blend-mode: screen;
}

.intro-matrix {
  inset: 29% 8% 20%;
  display: grid;
  grid-template-columns: repeat(10, minmax(85px, 1fr));
  border: 1px solid rgba(129,138,153,.13);
  transform: perspective(900px) rotateX(57deg) scale(1.16);
  transform-origin: center bottom;
  opacity: .25;
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent), linear-gradient(180deg, black, transparent 88%);
}

.intro-matrix::before {
  content: "";
  position: absolute;
  inset: 41px 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(238,49,36,.28) 22px 24px, transparent 25px 38px),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(126,137,153,.18) 29px 30px);
}

.intro-matrix span {
  padding: 13px 8px;
  border-right: 1px solid rgba(129,138,153,.17);
  color: #aeb5c1;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(.48rem, .58vw, .67rem);
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.intro-particles {
  background-image:
    radial-gradient(circle at 29% 34%, rgba(238,49,36,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 69% 45%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 68%, rgba(87,210,228,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 61% 72%, rgba(238,49,36,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 28%, rgba(238,49,36,.65) 0 1px, transparent 2px);
  background-size: 310px 270px, 410px 350px, 530px 430px, 610px 520px, 730px 610px;
  animation: intro-particles 2.6s ease-out both;
}

.intro-actions {
  position: absolute;
  z-index: 4;
  top: 27px;
  right: 31px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.intro-action {
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-bottom: 1px solid rgba(151,161,176,.4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c9ced7;
  background: rgba(8,10,14,.32);
  font-size: .79rem;
  cursor: pointer;
}

.intro-action:hover { color: white; border-color: var(--intro-red); }
.intro-action b { font-weight: 500; }
.intro-sound span { color: #747d8b; font-size: .65rem; }
.intro-sound[aria-pressed="true"] span { color: var(--intro-cyan); text-shadow: 0 0 9px rgba(87,210,228,.7); }
.intro-skip span { color: var(--intro-red); font-size: 1.35rem; line-height: 1; }

.intro-stage {
  width: min(910px, calc(100vw - 56px));
  padding: 26px 20px 24px;
  text-align: center;
  animation: intro-stage-in .55s cubic-bezier(.2,.8,.2,1) both;
}

.intro-eyebrow {
  margin: 0 0 13px;
  color: #ff4c41;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(.68rem, 1vw, .85rem);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.intro-wordmark { display: flex; align-items: center; justify-content: center; gap: clamp(17px, 3vw, 38px); }
.intro-wordmark > strong { display: flex; align-items: center; gap: 11px; color: #f5f6f8; font-size: clamp(1.5rem, 3.45vw, 3.05rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; text-shadow: 0 3px 20px rgba(0,0,0,.55); }
.intro-wordmark > .intro-mitre-wordmark { display: block; white-space: nowrap; }
.intro-wordmark > b { color: #abb2be; font-size: clamp(1.4rem, 2.8vw, 2.65rem); font-weight: 300; }
.intro-attack-mark { color: var(--intro-red); }

.intro-f-mark { width: clamp(34px, 4vw, 52px); height: clamp(25px, 3vw, 39px); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; transform: skewX(-4deg); }
.intro-f-mark i { border-radius: 1px; display: block; background: var(--intro-red); box-shadow: 0 0 12px rgba(238,49,36,.24); }

.intro-shield {
  position: relative;
  width: clamp(215px, 27vh, 285px);
  margin: 9px auto -3px;
}

.intro-shield svg { position: relative; z-index: 1; width: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 15px rgba(238,49,36,.17)); }
.intro-shield-glow { position: absolute; inset: 24% 13% 7%; border-radius: 50%; background: rgba(238,49,36,.13); filter: blur(44px); animation: intro-glow 1.35s ease-in-out infinite alternate; }
.intro-sparkles { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.intro-sparkles i { position: absolute; width: 12px; height: 12px; opacity: 0; filter: drop-shadow(0 0 5px rgba(255,255,255,.75)); animation: intro-sparkle 3.8s ease-in-out infinite; }
.intro-sparkles i::before, .intro-sparkles i::after { content: ""; position: absolute; top: 50%; left: 50%; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); transform: translate(-50%, -50%); }
.intro-sparkles i::before { width: 100%; height: 1px; }
.intro-sparkles i::after { width: 1px; height: 100%; background: linear-gradient(180deg, transparent, rgba(238,49,36,.98), transparent); }
.intro-sparkles i:nth-child(1) { top: 8%; left: 49%; animation-delay: .1s; }
.intro-sparkles i:nth-child(2) { top: 24%; left: 75%; animation-delay: .62s; animation-duration: 4.6s; }
.intro-sparkles i:nth-child(3) { top: 42%; left: 18%; animation-delay: 1.05s; animation-duration: 5.1s; }
.intro-sparkles i:nth-child(4) { top: 58%; left: 82%; animation-delay: 1.5s; animation-duration: 4.25s; }
.intro-sparkles i:nth-child(5) { top: 76%; left: 34%; animation-delay: 1.85s; animation-duration: 5.35s; }
.shield-outline, .net-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.shield-outline { stroke: rgba(245,247,250,.76); stroke-width: 1.6; stroke-dasharray: 820; stroke-dashoffset: 820; animation: intro-draw 1.55s .18s ease-out forwards; }
.net-line { stroke: rgba(238,49,36,.5); stroke-width: 1.1; stroke-dasharray: 11 9; opacity: 0; animation: intro-net .9s .72s ease-out forwards; }
.net-nodes circle { fill: #fff; stroke: var(--intro-red); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: intro-node .45s calc(.52s + var(--node-delay, 0s)) ease-out forwards; }
.net-nodes circle:nth-child(2) { --node-delay: .08s; }.net-nodes circle:nth-child(3) { --node-delay: .15s; }.net-nodes circle:nth-child(4) { --node-delay: .22s; }.net-nodes circle:nth-child(5) { --node-delay: .29s; }.net-nodes circle:nth-child(6) { --node-delay: .36s; }.net-nodes circle:nth-child(7) { --node-delay: .43s; }
.shield-core rect { fill: var(--intro-red); opacity: 0; transform-box: fill-box; transform-origin: center; animation: intro-core .32s calc(.84s + var(--core-delay, 0s)) ease-out forwards; }
.shield-core rect:nth-child(2), .shield-core rect:nth-child(5), .shield-core rect:nth-child(8) { --core-delay: .1s; }
.shield-core rect:nth-child(3), .shield-core rect:nth-child(6) { --core-delay: .18s; }

.intro-status {
  width: min(500px, 92%);
  margin: 0 auto;
  color: #c5cbd4;
  font-family: "IBM Plex Mono", monospace;
  text-align: left;
}

.intro-status-title { margin: 0 0 8px; color: #f1f3f6; font-size: clamp(.72rem, .95vw, .87rem); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.intro-status-row { min-height: 27px; display: grid; grid-template-columns: 15px 1fr 18px; align-items: center; gap: 8px; color: #727b89; font-size: clamp(.65rem, .85vw, .78rem); transition: color .2s ease, transform .2s ease; }
.intro-status-row i { width: 8px; height: 8px; border: 1px solid #5d6572; border-radius: 50%; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.intro-status-row b { color: #5d6572; opacity: 0; transition: color .2s ease, opacity .2s ease; }
.intro-status-row.is-active { color: #f0f2f5; transform: translateX(3px); }
.intro-status-row.is-active i { border-color: var(--intro-red); background: var(--intro-red); box-shadow: 0 0 10px rgba(238,49,36,.65); }
.intro-status-row.is-complete { color: #aeb5c0; }
.intro-status-row.is-complete i { border-color: #76d7a5; background: #76d7a5; box-shadow: 0 0 8px rgba(118,215,165,.38); }
.intro-status-row.is-complete b { color: #76d7a5; opacity: 1; }

.intro-progress { width: min(760px, 94%); margin: 17px auto 0; display: grid; grid-template-columns: 1fr 46px; align-items: center; gap: 14px; }
.intro-progress > div { height: 3px; border-radius: 99px; background: #2c313b; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.intro-progress span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #b91d16, #ff493e); box-shadow: 0 0 12px rgba(238,49,36,.82); }
.intro-progress strong { color: #ff564b; font-family: "IBM Plex Mono", monospace; font-size: .89rem; text-align: right; }

@keyframes intro-stage-in { from { opacity: 0; transform: translateY(8px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes intro-scan { from { transform: translateY(-55%); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(220%); opacity: 0; } }
@keyframes intro-particles { from { opacity: 0; transform: scale(.94); } 35% { opacity: .9; } to { opacity: .38; transform: scale(1.05); } }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-net { from { opacity: 0; stroke-dashoffset: 80; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes intro-node { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes intro-core { from { opacity: 0; transform: scale(.25) rotate(20deg); } to { opacity: 1; transform: scale(1); } }
@keyframes intro-glow { from { opacity: .42; transform: scale(.9); } to { opacity: .9; transform: scale(1.08); } }
@keyframes intro-sparkle { 0%, 8%, 19%, 100% { opacity: 0; transform: scale(.25) rotate(0deg); } 13% { opacity: .82; transform: scale(1) rotate(45deg); } 17% { opacity: 0; transform: scale(.45) rotate(90deg); } }

@media (max-width: 760px) {
  .intro-actions { top: 14px; right: 13px; }
  .intro-action { min-height: 32px; padding: 0 7px; font-size: .69rem; }
  .intro-stage { width: calc(100vw - 22px); padding-left: 4px; padding-right: 4px; }
  .intro-wordmark { gap: 12px; }
  .intro-wordmark > strong { gap: 7px; }
  .intro-f-mark { gap: 2px; }
  .intro-matrix { left: -30%; right: -30%; }
  .intro-status { width: min(390px, 91vw); }
  .intro-progress { width: min(430px, 91vw); }
}

@media (max-width: 470px) {
  .intro-eyebrow { letter-spacing: .14em; }
  .intro-wordmark > strong { font-size: 1.23rem; }
  .intro-wordmark > b { font-size: 1.25rem; }
  .intro-f-mark { width: 29px; height: 22px; }
  .intro-shield { width: min(218px, 27vh); }
  .intro-status-row { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro, .intro-stage, .intro-scan, .intro-particles, .intro-shield-glow, .intro-sparkles i, .shield-outline, .net-line, .net-nodes circle, .shield-core rect { animation: none !important; transition-duration: .01ms !important; }
  .shield-outline { stroke-dashoffset: 0; }
  .net-line, .net-nodes circle, .shield-core rect { opacity: 1; }
}