@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/outfit-latin.woff2") format("woff2");
}

:root {
  --color-void: #050506;
  --color-silver: #c8ccd4;
  --color-silver-bright: #f3f4f6;
  --color-silver-flash: #ffffff;
  --color-silver-mute: #8b8e96;
  --color-hairline: rgb(232 232 236 / 0.14);
  --font-sans: "Outfit", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --text-kicker: clamp(0.72rem, 0.64rem + 0.28vw, 0.88rem);
  --text-hero: clamp(1.45rem, 1rem + 2.1vw, 2.45rem);
  --leading-snug: 1.22;
  --tracking-display: -0.02em;
  --tracking-phrase: 0.16em;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --motion-emphasis: 900ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-y-medium: 14px;
  --motion-blur-md: 6px;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-void);
  color: var(--color-silver);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-void);
  color: var(--color-silver);
  font-family: var(--font-sans);
}

.nona-page {
  --spot-x: 50%;
  --spot-y: 42%;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-void);
  color: var(--color-silver);
}

.nona-spot {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    42rem circle at var(--spot-x) var(--spot-y),
    rgb(200 204 212 / 0.07),
    transparent 58%
  );
}

.nona-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 46%,
    transparent 38%,
    rgb(0 0 0 / 0.55) 100%
  );
}

.nona-grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("grain.png");
  background-size: 180px 180px;
}

.nona-mat {
  position: fixed;
  inset: 18px;
  z-index: 20;
  pointer-events: none;
  border: 1px solid var(--color-hairline);
}

.nona-corner {
  position: fixed;
  z-index: 26;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border-color: var(--color-silver-mute);
  opacity: 0.85;
}

.nona-corner-tl {
  top: 22px;
  left: 22px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.nona-corner-tr {
  top: 22px;
  right: 22px;
  border-top: 1px solid;
  border-right: 1px solid;
}
.nona-corner-bl {
  bottom: 22px;
  left: 22px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}
.nona-corner-br {
  bottom: 22px;
  right: 22px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

.nona-stage {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 100dvh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--space-6)
    calc(var(--space-8) + env(safe-area-inset-bottom));
  text-align: center;
}

.nona-kicker {
  margin: 0 0 var(--space-7);
  font-family: var(--font-sans);
  font-size: calc(var(--text-kicker) * 1.25);
  font-weight: 400;
  letter-spacing: var(--tracking-phrase);
  color: var(--color-silver-mute);
}

.nona-logo-wrap {
  position: relative;
  display: flex;
  width: min(90vw, 46rem);
  justify-content: center;
}

.nona-logo-glow {
  position: absolute;
  inset: -55% -18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgb(200 204 212 / 0.16),
    transparent 68%
  );
  filter: blur(28px);
  animation: nona-breathe 7.5s var(--ease-smooth-out) infinite;
}

.nona-logo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}

.nona-logo-liquid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: url("nona-logo-mask.png");
  mask-image: url("nona-logo-mask.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 0 24px rgb(200 204 212 / 0.2));
}

.nona-logo-liquid-flow {
  position: absolute;
  top: -70%;
  left: -70%;
  width: 240%;
  height: 240%;
  background: linear-gradient(
    122deg,
    var(--color-silver-mute) 0%,
    var(--color-silver) 16%,
    var(--color-silver-bright) 32%,
    var(--color-silver-flash) 48%,
    var(--color-silver) 64%,
    var(--color-silver-mute) 80%,
    var(--color-silver-bright) 100%
  );
  will-change: transform;
  animation: nona-liquid 8s var(--ease-smooth-out) infinite;
}

.nona-logo-liquid-flow-b {
  opacity: 0.85;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(
      38% 50% at 28% 38%,
      var(--color-silver-flash) 0%,
      var(--color-silver-bright) 26%,
      transparent 60%
    ),
    radial-gradient(42% 48% at 74% 62%, var(--color-silver) 0%, transparent 56%);
  animation: nona-liquid-b 11s var(--ease-smooth-out) infinite;
}

.nona-logo-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 36%,
    rgb(255 255 255 / 0.55) 50%,
    transparent 64%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  mix-blend-mode: overlay;
  -webkit-mask-image: url("nona-logo-mask.png");
  mask-image: url("nona-logo-mask.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: nona-shine 6.4s var(--ease-smooth-out) 1.6s infinite;
}

.nona-headline {
  margin: var(--space-7) 0 0;
  max-width: min(36rem, 90vw);
  font-family: var(--font-sans);
  font-size: var(--text-hero);
  font-weight: 400;
  font-style: normal;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.nona-metal {
  background-image: linear-gradient(
    180deg,
    var(--color-silver-bright) 4%,
    var(--color-silver) 48%,
    var(--color-silver-mute) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nona-reveal {
  opacity: 0;
  filter: blur(var(--motion-blur-md));
  transform: translateY(var(--motion-y-medium));
  animation: nona-reveal var(--motion-emphasis) var(--ease-smooth-out) forwards;
}

.nona-d1 {
  animation-delay: 80ms;
}
.nona-d2 {
  animation-delay: 220ms;
}
.nona-d3 {
  animation-delay: 380ms;
}

@keyframes nona-reveal {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes nona-shine {
  0%,
  18% {
    background-position: 120% 0;
  }
  48%,
  100% {
    background-position: -20% 0;
  }
}

@keyframes nona-liquid {
  0%,
  100% {
    transform: translate3d(-6%, -3%, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(8%, 5%, 0) rotate(12deg);
  }
}

@keyframes nona-liquid-b {
  0%,
  100% {
    transform: translate3d(6%, 4%, 0) scale(1);
  }
  50% {
    transform: translate3d(-10%, -6%, 0) scale(1.12);
  }
}

@keyframes nona-breathe {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@media (max-width: 720px) {
  .nona-mat {
    inset: 12px;
  }

  .nona-corner {
    width: 14px;
    height: 14px;
  }

  .nona-corner-tl {
    top: 16px;
    left: 16px;
  }
  .nona-corner-tr {
    top: 16px;
    right: 16px;
  }
  .nona-corner-bl {
    bottom: 16px;
    left: 16px;
  }
  .nona-corner-br {
    bottom: 16px;
    right: 16px;
  }

  .nona-logo-wrap {
    width: min(88vw, 26rem);
  }

  .nona-stage {
    padding-inline: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nona-reveal,
  .nona-logo-shine,
  .nona-logo-glow,
  .nona-logo-liquid-flow {
    animation: none !important;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .nona-logo {
    opacity: 1;
    filter: drop-shadow(0 0 24px rgb(200 204 212 / 0.12));
  }

  .nona-logo-liquid,
  .nona-logo-shine {
    display: none;
  }

  .nona-spot {
    background: radial-gradient(
      36rem circle at 50% 42%,
      rgb(200 204 212 / 0.06),
      transparent 58%
    );
  }
}