:root {
  color-scheme: dark;
  --ice: #dffbff;
  --cyan: #75efff;
  --cyan-hot: #aaf7ff;
  --void: #020810;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 280px;
  min-height: 100%;
  margin: 0;
  background: var(--void);
}

body {
  min-height: 100svh;
  overflow: hidden;
  font-family: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
}

.scene {
  isolation: isolate;
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 5, 13, 0.08) 0%, rgba(0, 6, 14, 0.06) 42%, rgba(0, 4, 10, 0.77) 100%),
    url("assets/arctic-vault.jpg") center 48% / cover no-repeat;
}

.scene::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 52%, transparent 0 18%, rgba(0, 5, 12, 0.1) 42%, rgba(0, 2, 7, 0.68) 100%),
    linear-gradient(90deg, rgba(4, 218, 255, 0.06), transparent 18% 82%, rgba(4, 218, 255, 0.06));
  pointer-events: none;
}

.scene::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(0deg, rgba(170, 247, 255, 0.026) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
}

.aurora {
  position: absolute;
  z-index: -1;
  top: -26%;
  left: 22%;
  width: 56%;
  height: 50%;
  border-radius: 50%;
  background: rgba(39, 217, 255, 0.14);
  filter: blur(75px);
  opacity: 0.65;
  animation: breathe 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(rgba(81, 226, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81, 226, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
  opacity: 0.3;
  pointer-events: none;
}

.signal {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 20%;
  width: min(76vw, 760px);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(117, 239, 255, 0.55), transparent);
  box-shadow: 0 0 20px rgba(117, 239, 255, 0.25);
  opacity: 0.58;
  pointer-events: none;
}

.signal::after {
  position: absolute;
  top: -2px;
  left: 0;
  width: 44px;
  height: 5px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--cyan-hot), transparent);
  filter: blur(1px);
  animation: scan 5.5s linear infinite;
}

.snow {
  position: absolute;
  z-index: 1;
  inset: -20%;
  background-repeat: repeat;
  pointer-events: none;
}

.snow--far {
  background-image: radial-gradient(circle, rgba(224, 250, 255, 0.85) 0 1px, transparent 1.4px);
  background-size: 53px 61px;
  opacity: 0.22;
  animation: snow-far 28s linear infinite;
}

.snow--near {
  background-image:
    radial-gradient(ellipse, rgba(231, 252, 255, 0.95) 0 1px, transparent 1.8px),
    radial-gradient(ellipse, rgba(176, 240, 255, 0.78) 0 1.5px, transparent 2.2px);
  background-position: 0 0, 31px 43px;
  background-size: 87px 101px, 131px 149px;
  filter: blur(0.35px);
  opacity: 0.38;
  animation: snow-near 17s linear infinite;
}

.contact {
  position: absolute;
  z-index: 4;
  bottom: clamp(3.75rem, 11vh, 7rem);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.45rem, 1.5vw, 1rem);
  min-height: 48px;
  padding: 0.7rem 1rem;
  translate: -50% 0;
  color: var(--ice);
  font-size: clamp(1rem, 2.25vw, 1.45rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-decoration: none;
  text-shadow: 0 0 16px rgba(117, 239, 255, 0.72);
  white-space: nowrap;
  transition: color 180ms ease, text-shadow 180ms ease, letter-spacing 220ms ease;
}

.contact__bracket {
  color: rgba(117, 239, 255, 0.64);
  transition: color 180ms ease, translate 220ms ease;
}

.contact::after {
  position: absolute;
  right: 20%;
  bottom: 0.45rem;
  left: 20%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 180ms ease, transform 220ms ease;
}

.contact:hover,
.contact:focus-visible {
  color: #fff;
  letter-spacing: 0.15em;
  text-shadow: 0 0 9px rgba(170, 247, 255, 0.9), 0 0 28px rgba(83, 224, 255, 0.62);
  outline: none;
}

.contact:hover::after,
.contact:focus-visible::after {
  opacity: 0.9;
  transform: scaleX(1);
}

.contact:hover .contact__bracket,
.contact:focus-visible .contact__bracket {
  color: var(--cyan-hot);
}

.contact:hover .contact__bracket:first-child,
.contact:focus-visible .contact__bracket:first-child {
  translate: -0.2rem 0;
}

.contact:hover .contact__bracket:last-child,
.contact:focus-visible .contact__bracket:last-child {
  translate: 0.2rem 0;
}

@keyframes breathe {
  from { opacity: 0.38; transform: scale(0.94); }
  to { opacity: 0.78; transform: scale(1.08); }
}

@keyframes scan {
  from { transform: translateX(-50px); }
  to { transform: translateX(min(76vw, 760px)); }
}

@keyframes snow-far {
  from { transform: translate3d(-2%, -8%, 0); }
  to { transform: translate3d(5%, 10%, 0); }
}

@keyframes snow-near {
  from { transform: translate3d(3%, -11%, 0) rotate(0.01deg); }
  to { transform: translate3d(-7%, 13%, 0) rotate(0.01deg); }
}

@media (max-width: 640px) {
  .scene {
    background-position: 50% 46%;
  }

  .grid {
    background-size: 42px 42px;
  }

  .contact {
    bottom: max(2.25rem, 8vh);
    max-width: calc(100vw - 2rem);
    font-size: clamp(0.94rem, 4.9vw, 1.18rem);
    letter-spacing: 0.07em;
  }

  .contact:hover,
  .contact:focus-visible {
    letter-spacing: 0.085em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}