:root {
  --bg: #010101;
  --text: #f8fbff;
  --beam-bright: rgba(235, 244, 255, 0.32);
  --beam-soft: rgba(203, 222, 255, 0.18);
  --beam-faint: rgba(144, 177, 238, 0.08);
  --dust-bright: rgba(237, 244, 255, 0.22);
  --dust-soft: rgba(198, 216, 247, 0.12);
  --mist-bright: rgba(229, 239, 255, 0.18);
  --mist-soft: rgba(184, 208, 248, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Avenir Next", "Neue Haas Grotesk Text Pro", "Helvetica Neue", sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(206, 223, 255, 0.06), transparent 18%),
    radial-gradient(circle at 50% 50%, transparent 44%, rgba(0, 0, 0, 0.8) 100%);
}

body::after {
  opacity: 0.035;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.38) 0.5px, transparent 0.8px),
    radial-gradient(circle at 72% 38%, rgba(255, 255, 255, 0.22) 0.5px, transparent 0.8px);
  background-size: 22px 22px, 30px 30px;
}

.visual-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(192, 214, 255, 0.06), transparent 21%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.01), transparent 12%),
    #010101;
}

.corner-link {
  position: absolute;
  top: clamp(1.2rem, 2.6vw, 2rem);
  right: clamp(1.25rem, 2.8vw, 2.25rem);
  z-index: 4;
  color: rgba(248, 251, 255, 0.82);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.corner-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  width: 100%;
  height: 1px;
  background: rgba(248, 251, 255, 0.82);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

.corner-link:hover::after,
.corner-link:focus-visible::after {
  transform: scaleX(1);
}

.brand-block {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 2rem;
}

.atmosphere,
.spin-shell,
.backlight,
.dust,
.mist {
  position: absolute;
  pointer-events: none;
}

.atmosphere {
  left: 50%;
  top: 50%;
  width: min(94vw, 88rem);
  height: min(36vw, 22rem);
  transform: translate(-50%, -50%);
  overflow: visible;
}

.spin-shell,
.backlight,
.dust,
.mist {
  inset: 0;
}

.spin-shell {
  animation: spinUp 2.6s cubic-bezier(0.18, 0.88, 0.24, 1) both;
}

.spin-shell-secondary {
  animation-delay: 0.18s;
}

.backlight,
.dust,
.mist {
  mix-blend-mode: screen;
}

.backlight-core {
  background:
    radial-gradient(ellipse at center, rgba(240, 246, 255, 0.34) 0%, rgba(220, 232, 255, 0.16) 20%, rgba(165, 193, 245, 0.08) 42%, transparent 72%),
    radial-gradient(ellipse at center, rgba(182, 208, 255, 0.08) 0%, transparent 58%);
  filter: blur(22px);
  opacity: 0.72;
  animation: corePulse 12s ease-in-out infinite alternate;
}

.backlight-spin,
.backlight-spin-secondary {
  inset: -16% -8%;
  transform-origin: 50% 50%;
  filter: blur(34px);
  opacity: 0.54;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.82) 22%, rgba(0, 0, 0, 0.26) 48%, transparent 82%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.82) 22%, rgba(0, 0, 0, 0.26) 48%, transparent 82%);
}

.backlight-spin {
  background:
    conic-gradient(
      from 12deg at 50% 50%,
      transparent 0deg 22deg,
      rgba(238, 244, 255, 0.02) 34deg,
      rgba(238, 244, 255, 0.09) 42deg,
      transparent 58deg 132deg,
      rgba(202, 222, 255, 0.08) 144deg,
      transparent 160deg 224deg,
      rgba(218, 232, 255, 0.06) 238deg,
      transparent 258deg 316deg,
      rgba(172, 199, 255, 0.06) 332deg,
      transparent 360deg
    );
  transform: scaleX(1.2) scaleY(0.72);
  animation: rotateGlow 34s linear infinite;
}

.backlight-spin-secondary {
  background:
    conic-gradient(
      from 120deg at 50% 50%,
      transparent 0deg 48deg,
      rgba(229, 239, 255, 0.02) 60deg,
      rgba(229, 239, 255, 0.08) 72deg,
      transparent 92deg 186deg,
      rgba(173, 201, 255, 0.06) 202deg,
      transparent 224deg 302deg,
      rgba(205, 223, 255, 0.05) 322deg,
      transparent 336deg 360deg
    );
  transform: scaleX(1.38) scaleY(0.82);
  filter: blur(46px);
  opacity: 0.28;
  animation: rotateGlowReverse 42s linear infinite;
}

.dust,
.mist {
  inset: -12% -6%;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.88) 24%, rgba(0, 0, 0, 0.4) 46%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.88) 24%, rgba(0, 0, 0, 0.4) 46%, transparent 76%);
}

.dust-one {
  background:
    radial-gradient(circle at 11% 46%, rgba(242, 247, 255, 0.2) 0 1px, transparent 2px),
    radial-gradient(circle at 19% 54%, rgba(232, 241, 255, 0.16) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 27% 48%, rgba(220, 233, 255, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 57%, rgba(241, 247, 255, 0.22) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 43% 44%, rgba(224, 236, 255, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 52%, rgba(243, 248, 255, 0.18) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 61% 47%, rgba(217, 231, 255, 0.15) 0 1px, transparent 2px),
    radial-gradient(circle at 69% 56%, rgba(237, 244, 255, 0.18) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 78% 45%, rgba(220, 234, 255, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 53%, rgba(235, 243, 255, 0.18) 0 1.1px, transparent 2.3px);
  filter: blur(0.2px);
  opacity: 0.26;
  animation: dustDriftOne 22s linear infinite;
}

.dust-two {
  background:
    radial-gradient(circle at 15% 58%, rgba(223, 236, 255, 0.12) 0 1px, transparent 1.9px),
    radial-gradient(circle at 24% 43%, rgba(240, 246, 255, 0.14) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 34% 51%, rgba(219, 232, 255, 0.11) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 47% 46%, rgba(233, 241, 255, 0.13) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 57% 58%, rgba(216, 230, 255, 0.12) 0 1px, transparent 1.9px),
    radial-gradient(circle at 68% 44%, rgba(238, 245, 255, 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 79% 50%, rgba(216, 231, 255, 0.1) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 86% 57%, rgba(239, 245, 255, 0.12) 0 1px, transparent 2px);
  filter: blur(0.35px);
  opacity: 0.16;
  animation: dustDriftTwo 28s linear infinite;
}

.dust-three {
  background:
    radial-gradient(circle at 13% 51%, rgba(236, 244, 255, 0.08) 0 2px, transparent 5px),
    radial-gradient(circle at 29% 47%, rgba(221, 234, 255, 0.08) 0 2px, transparent 5px),
    radial-gradient(circle at 41% 55%, rgba(244, 248, 255, 0.09) 0 2.2px, transparent 5.3px),
    radial-gradient(circle at 56% 45%, rgba(213, 229, 255, 0.08) 0 1.8px, transparent 4.7px),
    radial-gradient(circle at 72% 54%, rgba(238, 245, 255, 0.08) 0 2px, transparent 5px),
    radial-gradient(circle at 85% 48%, rgba(214, 230, 255, 0.08) 0 1.8px, transparent 4.7px);
  filter: blur(2px);
  opacity: 0.09;
  animation: dustDriftThree 30s linear infinite;
}

.mist-one {
  background:
    radial-gradient(ellipse at 26% 50%, var(--mist-bright) 0%, transparent 13%),
    radial-gradient(ellipse at 50% 49%, rgba(218, 231, 255, 0.12) 0%, transparent 12%),
    radial-gradient(ellipse at 74% 51%, rgba(183, 208, 252, 0.08) 0%, transparent 13%);
  filter: blur(28px) url(#mist-distortion);
  opacity: 0.2;
  animation: mistDriftOne 20s ease-in-out infinite;
}

.mist-two {
  background:
    radial-gradient(ellipse at 34% 47%, rgba(239, 245, 255, 0.08) 0%, transparent 10%),
    radial-gradient(ellipse at 58% 53%, rgba(205, 221, 255, 0.08) 0%, transparent 11%);
  filter: blur(36px) url(#mist-distortion);
  opacity: 0.12;
  animation: mistDriftTwo 28s ease-in-out infinite;
}

.logo {
  position: relative;
  margin: 0;
  width: min(95vw, 86rem);
  text-align: center;
  line-height: 0.88;
  font-family: "Avenir Next", "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-weight: 700;
  letter-spacing: 0.09em;
  font-size: clamp(6.4rem, 18vw, 15rem);
  pointer-events: none;
}

.email-link {
  position: relative;
  display: inline-block;
  z-index: 4;
  padding: 0.35rem 0.6rem;
  color: rgba(248, 251, 255, 0.72);
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
}

.email-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.28rem;
  width: 100%;
  height: 1px;
  background: rgba(248, 251, 255, 0.78);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}

.email-link:hover,
.email-link:focus-visible {
  color: rgba(248, 251, 255, 0.9);
}

.email-link:hover::after,
.email-link:focus-visible::after {
  transform: scaleX(1);
}

.logo-layer {
  display: block;
  white-space: nowrap;
}

.logo-base {
  position: relative;
  z-index: 3;
  color: rgba(249, 252, 255, 0.98);
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.92),
    0 0 12px rgba(225, 237, 255, 0.12);
}

.logo-glow,
.logo-bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

.logo-glow {
  color: rgba(229, 239, 255, 0.22);
  filter: blur(4px);
  opacity: 0.34;
}

.logo-bloom {
  color: rgba(186, 210, 255, 0.08);
  filter: blur(12px);
  opacity: 0.16;
  transform: scale(1.006);
}

@keyframes spinUp {
  from {
    opacity: 0;
    transform: scale(0.82);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes corePulse {
  from {
    opacity: 0.52;
    transform: scale(0.97);
  }

  to {
    opacity: 0.76;
    transform: scale(1.02);
  }
}

@keyframes rotateGlow {
  from {
    transform: scaleX(1.2) scaleY(0.72) rotate(0deg);
  }

  to {
    transform: scaleX(1.2) scaleY(0.72) rotate(360deg);
  }
}

@keyframes rotateGlowReverse {
  from {
    transform: scaleX(1.38) scaleY(0.82) rotate(360deg);
  }

  to {
    transform: scaleX(1.38) scaleY(0.82) rotate(0deg);
  }
}

@keyframes dustDriftOne {
  from {
    transform: translate3d(-2%, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(3%, -1%, 0) scale(1.05);
  }

  to {
    transform: translate3d(1%, 1%, 0) scale(1.02);
  }
}

@keyframes dustDriftTwo {
  from {
    transform: translate3d(2%, 1%, 0) scale(1.02);
  }

  50% {
    transform: translate3d(-2%, -1%, 0) scale(1.08);
  }

  to {
    transform: translate3d(1%, 2%, 0) scale(1.04);
  }
}

@keyframes dustDriftThree {
  from {
    transform: translate3d(-1%, 1%, 0);
  }

  50% {
    transform: translate3d(2%, -1%, 0);
  }

  to {
    transform: translate3d(-1%, 2%, 0);
  }
}

@keyframes mistDriftOne {
  from {
    transform: translate3d(-2%, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(3%, -1%, 0) scale(1.04);
  }

  to {
    transform: translate3d(1%, 1%, 0) scale(1.02);
  }
}

@keyframes mistDriftTwo {
  from {
    transform: translate3d(1%, 1%, 0) scale(1.02);
  }

  50% {
    transform: translate3d(-3%, -1%, 0) scale(1.06);
  }

  to {
    transform: translate3d(2%, 1%, 0) scale(1.03);
  }
}

@media (max-width: 720px) {
  .atmosphere {
    width: min(98vw, 38rem);
    height: min(44vw, 11rem);
  }

  .logo {
    width: min(98vw, 38rem);
    font-size: clamp(4.4rem, 18vw, 7.2rem);
    letter-spacing: 0.06em;
  }

  .brand-block {
    gap: 1.35rem;
  }

  .corner-link {
    top: 1rem;
    right: 1rem;
    font-size: 0.74rem;
  }

  .email-link {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
  }
}

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