/* Intro overlay (see boot.js). Colors follow the site's accents. */

#boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #05060a;
  cursor: pointer;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
#boot.gone { opacity: 0; filter: blur(14px); transform: scale(1.06); pointer-events: none; }

.boot-glow {
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent-a, #67e8f9) 16%, transparent),
    color-mix(in srgb, var(--accent-c, #a78bfa) 8%, transparent) 35%, transparent 65%);
  animation: bootGlow 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bootGlow { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.boot-core { position: absolute; width: 120px; height: 120px; top: calc(50% - 92px); left: calc(50% - 60px); }
.boot-core i, .boot-core b { position: absolute; border-radius: 50%; }
.boot-core b {
  inset: 42px;
  background: radial-gradient(circle at 40% 36%, #ffffff, var(--accent-a, #67e8f9) 45%, var(--accent-c, #a78bfa));
  box-shadow: 0 0 40px color-mix(in srgb, var(--accent-a, #67e8f9) 80%, transparent),
              0 0 90px color-mix(in srgb, var(--accent-c, #a78bfa) 50%, transparent);
  animation: bootCore 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.boot-core i {
  border: 1.5px solid color-mix(in srgb, var(--accent-a, #67e8f9) 70%, transparent);
  animation: bootRing 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.boot-core i:first-child { inset: 0; border-color: color-mix(in srgb, var(--accent-c, #a78bfa) 60%, transparent); animation-delay: 0.22s; }
.boot-core i + i { inset: 22px; animation-delay: 0.1s; }
@keyframes bootCore { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bootRing {
  from { transform: scale(0.3); opacity: 0; }
  40% { opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

.boot-word {
  position: absolute;
  top: calc(50% + 50px);
  display: flex;
  gap: 0.5em;
  font: 500 15px var(--sans, system-ui, sans-serif);
  letter-spacing: 0.1em;
  color: #eceef5;
}
.boot-word span { opacity: 0; filter: blur(6px); transform: translateY(8px); animation: bootLetter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes bootLetter { to { opacity: 1; filter: none; transform: none; } }

.boot-tag {
  position: absolute;
  top: calc(50% + 92px);
  margin: 0;
  padding-inline: 24px;
  text-align: center;
  font-family: var(--display, Georgia, serif);
  font-weight: var(--display-weight, 300);
  font-size: 1.25rem;
  color: #a7acbf;
  opacity: 0;
  animation: bootLetter 0.8s 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.boot-tag em {
  font-family: var(--display-em, var(--display, Georgia, serif));
  font-weight: var(--display-em-weight, 300);
  font-style: italic;
  color: var(--accent-a, #a5f3fc);
}