:root {
  --bg: #05080d;
  --teal: #27f3bf;
  --teal2: #00b894;
  --gold: #f5bf53;
  --muted: rgba(255,255,255,.55);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(39,243,191,.13), transparent 30%),
    radial-gradient(circle at 20% 70%, rgba(245,191,83,.09), transparent 26%),
    linear-gradient(180deg, #05080d, #0a1119);
  overflow: hidden;
  font-family: YekanBakh, 'Yekan Bakh', Vazirmatn, Tahoma, Arial, sans-serif;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .55;
  pointer-events: none;
}

#matrix {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  opacity: .55;
  pointer-events: none;
}

.stage::before {
  content: "";
  position: absolute;
  width: min(760px, 92vw);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5,8,13,.95) 0%, rgba(5,8,13,.88) 32%, rgba(5,8,13,.52) 54%, transparent 72%);
  z-index: 1;
  pointer-events: none;
}

.stage > *:not(#matrix) {
  position: relative;
  z-index: 2;
}

.stage {
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}
.mascot-lab {
  width: min(680px, 88vw);
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
}
.halo {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(39,243,191,.24);
  box-shadow: 0 0 70px rgba(39,243,191,.14), inset 0 0 45px rgba(39,243,191,.06);
}
.halo-a { inset: 7%; animation: spin 18s linear infinite; }
.halo-b { inset: 17%; border-style: dashed; animation: spin 12s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.mascot {
  width: min(310px, 43vw);
  border-radius: 50%;
  z-index: 5;
  filter: drop-shadow(0 0 34px rgba(39,243,191,.28));
  animation: breathe 3.8s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.025); }
}

.screen {
  position: absolute;
  width: 44%;
  height: 28%;
  right: 2%;
  top: 13%;
  border: 1px solid rgba(39,243,191,.20);
  border-radius: 22px;
  background: rgba(7, 13, 19, .72);
  box-shadow: 0 22px 70px rgba(0,0,0,.34), 0 0 40px rgba(39,243,191,.10);
  backdrop-filter: blur(10px);
  overflow: hidden;
  animation: floatScreen 5s ease-in-out infinite;
}
@keyframes floatScreen {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(12px) rotate(-1deg); }
}
.screen-bar { height: 34px; display: flex; gap: 7px; align-items: center; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.screen-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); opacity: .72; }
.terminal-lines { padding: 18px; display: grid; gap: 11px; }
.terminal-lines span {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(39,243,191,.95), transparent);
  animation: type 2.8s ease-in-out infinite;
}
.terminal-lines span:nth-child(2) { width: 72%; animation-delay: .4s; }
.terminal-lines span:nth-child(3) { width: 54%; animation-delay: .8s; }
.terminal-lines span:nth-child(4) { width: 86%; animation-delay: 1.2s; }
@keyframes type {
  0%, 100% { transform: scaleX(.35); opacity: .35; transform-origin: right; }
  50% { transform: scaleX(1); opacity: 1; transform-origin: right; }
}

.tunnel {
  position: absolute;
  border-radius: 999px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  box-shadow: 0 0 18px rgba(39,243,191,.55);
  opacity: .85;
}
.tunnel-a { width: 72%; transform: rotate(-18deg); animation: pulse 2.4s ease-in-out infinite; }
.tunnel-b { width: 58%; transform: rotate(22deg); animation: pulse 2.8s ease-in-out infinite .35s; }
.tunnel-c { width: 46%; transform: rotate(68deg); animation: pulse 3.2s ease-in-out infinite .7s; }
@keyframes pulse {
  0%, 100% { opacity: .22; filter: blur(1px); }
  50% { opacity: .95; filter: blur(0); }
}

.nodes i {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 22px rgba(39,243,191,.75);
}
.nodes i:nth-child(1) { top: 12%; left: 28%; animation: node 3s infinite; }
.nodes i:nth-child(2) { top: 37%; left: 8%; animation: node 3.6s infinite .2s; }
.nodes i:nth-child(3) { right: 10%; bottom: 28%; animation: node 3.2s infinite .4s; }
.nodes i:nth-child(4) { bottom: 10%; left: 38%; animation: node 4s infinite .6s; }
.nodes i:nth-child(5) { top: 25%; right: 20%; background: var(--gold); box-shadow: 0 0 22px rgba(245,191,83,.65); animation: node 3.4s infinite .8s; }
@keyframes node {
  0%, 100% { transform: scale(.75); opacity: .45; }
  50% { transform: scale(1.25); opacity: 1; }
}