#splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #010304;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 1;
  overflow: hidden;
  transition: opacity 620ms cubic-bezier(.16, 1, .3, 1), transform 620ms cubic-bezier(.16, 1, .3, 1);
  box-shadow: inset 0 0 180px rgba(0, 0, 0, .88)
}

#splash::before {
  content: '';
  position: absolute;
  inset: -8%;
  z-index: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 83, 103, .055) 24%, transparent 42%, rgba(244, 210, 138, .052) 62%, transparent 82%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .030) 0 1px, transparent 1px 54px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .020) 0 1px, transparent 1px 46px), linear-gradient(180deg, #020606 0%, #050607 42%, #000 100%);
  filter: blur(.4px);
  opacity: .90;
  animation: splash-field-breathe 7s ease-in-out infinite alternate;
  pointer-events: none
}

#splash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, .82), transparent 21%, transparent 79%, rgba(0, 0, 0, .82)), linear-gradient(180deg, rgba(0, 0, 0, .68), transparent 32%, transparent 64%, rgba(0, 0, 0, .74));
  pointer-events: none
}

#splash.hide {
  pointer-events: none
}

#splash.ready {
  cursor: pointer
}

#splash.exiting {
  pointer-events: none;
  opacity: 0;
  transform: scale(1.010)
}

#splash-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  transition: opacity 560ms cubic-bezier(.22, 1, .36, 1), transform 560ms cubic-bezier(.22, 1, .36, 1)
}

#splash.exiting #splash-canvas {
  opacity: .22;
  transform: scale(1.008)
}

.splash-bg-noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: screen;
  pointer-events: none
}

.splash-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 420ms cubic-bezier(.22, 1, .36, 1), transform 560ms cubic-bezier(.22, 1, .36, 1)
}

.splash-wordmark {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  height: clamp(70px, 12vw, 136px);
  min-width: min(74vw, 760px);
  font-size: clamp(52px, 8.8vw, 112px);
  line-height: .92;
  font-weight: 720;
  letter-spacing: -.055em;
  color: #f8f8f2;
  text-shadow: 0 20px 82px rgba(0, 0, 0, .68), -2px 0 18px rgba(255, 83, 103, .16), 2px 0 18px rgba(122, 215, 194, .12);
  isolation: isolate;
  filter: drop-shadow(0 0 22px rgba(244, 210, 138, .075))
}

.splash-word-mine,
.splash-word-radio {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  will-change: opacity, transform, letter-spacing
}

.splash-word-mine {
  opacity: 0;
  animation: splash-mine-in 5200ms cubic-bezier(.22, 1, .36, 1) forwards;
  text-shadow: -2px 0 0 rgba(255, 83, 103, .24), 2px 0 0 rgba(122, 215, 194, .18), 0 22px 72px rgba(0, 0, 0, .58), 0 0 34px rgba(244, 210, 138, .10)
}

.splash-word-radio {
  opacity: 0;
  letter-spacing: -.018em;
  background: linear-gradient(94deg, rgba(255, 255, 255, .06), #fff 26%, rgba(244, 210, 138, .98) 48%, rgba(122, 215, 194, .90) 68%, rgba(255, 255, 255, .82));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: splash-radio-in 5200ms cubic-bezier(.22, 1, .36, 1) forwards;
  text-shadow: -2px 0 0 rgba(255, 83, 103, .16), 2px 0 0 rgba(122, 215, 194, .22), 0 0 34px rgba(122, 215, 194, .10)
}

.splash-word-i {
  display: inline-block;
  position: relative;
  width: .24em;
  height: .86em;
  margin: 0 .022em;
  vertical-align: -.015em;
  color: transparent;
  -webkit-text-fill-color: transparent
}

.splash-word-i::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: .015em;
  width: .108em;
  height: .565em;
  border-radius: .06em;
  background: linear-gradient(180deg, #f8edd1 0%, #d8bd78 100%);
  transform: translateX(-50%);
  box-shadow: 0 0 14px rgba(244, 210, 138, .12)
}

.splash-word-i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: .035em;
  width: .142em;
  height: .142em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px rgba(244, 210, 138, .44), 0 0 36px rgba(255, 255, 255, .16);
  opacity: 0;
  transform: translate(-50%, .22em) scale(.34);
  animation: splash-i-dot-pop 4200ms cubic-bezier(.22, 1, .36, 1) forwards
}

.splash-word-o {
  display: inline-block;
  position: relative;
  color: #d8c486;
  -webkit-text-fill-color: #d8c486
}

.splash-signal-line {
  position: relative;
  width: min(460px, 54vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(122, 215, 194, .22), rgba(255, 255, 255, .78), rgba(244, 210, 138, .66), rgba(255, 83, 103, .22), transparent);
  opacity: 0;
  transform: scaleX(.12);
  box-shadow: 0 0 18px rgba(244, 210, 138, .24), 0 0 34px rgba(122, 215, 194, .10);
  animation: splash-signal-line 4200ms cubic-bezier(.22, 1, .36, 1) forwards
}

.splash-signal-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 24px rgba(244, 210, 138, .54);
  transform: translate(-50%, -50%) scale(.32);
  opacity: 0;
  animation: splash-signal-blip 4200ms cubic-bezier(.22, 1, .36, 1) forwards
}

.splash-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .34);
  text-transform: uppercase;
  opacity: 0;
  animation: splash-sub-in 4200ms cubic-bezier(.22, 1, .36, 1) forwards
}

.splash-enter {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: rgba(255, 255, 255, .62);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  text-shadow: 0 0 18px rgba(244, 210, 138, .24), 0 0 34px rgba(122, 215, 194, .12);
  transition: opacity 620ms cubic-bezier(.22, 1, .36, 1), transform 620ms cubic-bezier(.22, 1, .36, 1)
}

#splash.ready .splash-enter {
  opacity: 1;
  transform: translateY(0);
  animation: splash-enter-pulse 1800ms ease-in-out infinite alternate
}

@keyframes splash-field-breathe {
  0% {
    opacity: .72;
    transform: scale(1)
  }

  100% {
    opacity: 1;
    transform: scale(1.035)
  }
}

@keyframes splash-mine-in {
  0% {
    opacity: 0;
    clip-path: inset(48% 0 49% 0);
    transform: translate(calc(-50% - 10px), -42%) skewX(-10deg) scaleX(1.08);
    letter-spacing: .055em
  }

  14% {
    opacity: .92;
    clip-path: inset(40% 0 42% 0);
    transform: translate(calc(-50% - 4px), -50%) skewX(-4deg) scaleX(1.04);
    letter-spacing: .014em
  }

  26% {
    opacity: 1;
    clip-path: inset(0);
    transform: translate(-50%, -50%) skewX(0) scaleX(1);
    letter-spacing: -.040em
  }

  48% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
  }

  67% {
    opacity: 1;
    transform: translate(calc(-50% - clamp(66px, 10.8vw, 130px)), -50%) scale(.998);
    letter-spacing: -.055em
  }

  100% {
    opacity: 1;
    transform: translate(calc(-50% - clamp(66px, 10.8vw, 130px)), -50%) scale(.998)
  }
}

@keyframes splash-radio-in {

  0%,
  32% {
    opacity: 0;
    clip-path: inset(52% 0 44% 0);
    transform: translate(calc(-50% + clamp(78px, 12vw, 142px)), -50%) skewX(9deg) scaleX(1.06);
    background-position: 0 0
  }

  48% {
    opacity: .88;
    clip-path: inset(34% 0 32% 0);
    transform: translate(calc(-50% + clamp(72px, 11.5vw, 138px)), -50%) skewX(3deg) scaleX(1.02);
    background-position: 52% 0
  }

  66% {
    opacity: 1;
    clip-path: inset(0);
    transform: translate(calc(-50% + clamp(70px, 11.4vw, 136px)), -50%) scale(1);
    background-position: 76% 0
  }

  100% {
    opacity: 1;
    transform: translate(calc(-50% + clamp(70px, 11.4vw, 136px)), -50%) scale(1);
    background-position: 100% 0
  }
}

@keyframes splash-i-dot-pop {

  0%,
  48% {
    opacity: 0;
    transform: translate(-50%, .22em) scale(.34)
  }

  60% {
    opacity: 1;
    transform: translate(-50%, -.018em) scale(1.12)
  }

  68% {
    opacity: .92;
    transform: translate(-50%, .010em) scale(.94)
  }

  76%,
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1)
  }
}

@keyframes splash-signal-line {

  0%,
  28% {
    opacity: 0;
    transform: scaleX(.10)
  }

  44% {
    opacity: .98;
    transform: scaleX(1.05)
  }

  64% {
    opacity: .70;
    transform: scaleX(.82)
  }

  76% {
    opacity: 1;
    transform: scaleX(1.14);
    box-shadow: 0 0 28px rgba(244, 210, 138, .36), 0 0 60px rgba(122, 215, 194, .18)
  }

  100% {
    opacity: .30;
    transform: scaleX(.64)
  }
}

@keyframes splash-signal-blip {

  0%,
  42% {
    opacity: 0;
    left: 18%;
    transform: translate(-50%, -50%) scale(.24)
  }

  62% {
    opacity: .94;
    left: 50%;
    transform: translate(-50%, -50%) scale(1)
  }

  76% {
    opacity: 1;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.45)
  }

  100% {
    opacity: .16;
    left: 82%;
    transform: translate(-50%, -50%) scale(.46)
  }
}

.landing-home-mode #splash { cursor: default; }
.landing-home-mode .splash-content { gap: 18px; }
.landing-home-mode .splash-github {
  position: fixed;
  left: 50%;
  bottom: clamp(26px, 6vh, 64px);
  transform: translateX(-50%);
  pointer-events: auto;
  color: rgba(255,255,255,.50);
  font: 600 10px/1 Inter, sans-serif;
  letter-spacing: .20em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(244,210,138,.20), 0 0 32px rgba(122,215,194,.10);
  transition: color .25s ease, text-shadow .25s ease;
}
.landing-home-mode .splash-github:hover,
.landing-home-mode .splash-github:focus-visible {
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 20px rgba(244,210,138,.48), 0 0 38px rgba(122,215,194,.24);
  outline: none;
}