@font-face {
  font-family: "InterVariable";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "InterVariable", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "calt" 1;
  text-rendering: geometricPrecision;
  --ink: #ecece8;
  --muted: rgba(226, 229, 230, 0.46);
  --hairline: rgba(238, 240, 240, 0.14);
  --edge-x: clamp(1.5rem, 4.2vw, 4.75rem);
  --edge-y: clamp(1.45rem, 4.5vh, 3.75rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0b0c0e;
}

body {
  min-height: 100svh;
  color: var(--ink);
}

p,
h1 {
  margin: 0;
}

.surface {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 46%, rgba(75, 83, 89, 0.075), transparent 44%),
    linear-gradient(118deg, #0a0b0d 0%, #0d0e10 52%, #0a0b0c 100%);
}

.surface::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 8, 10, 0.72) 0%, rgba(8, 9, 10, 0.16) 43%, transparent 68%),
    radial-gradient(ellipse at center, transparent 42%, rgba(4, 5, 6, 0.38) 100%);
  content: "";
  pointer-events: none;
}

.surface::after {
  position: absolute;
  z-index: 2;
  inset: -5%;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
  background-size: 145px 145px;
  content: "";
  opacity: 0.028;
  pointer-events: none;
  animation: grain 11s steps(2, end) infinite;
}

.field {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.field.is-ready {
  opacity: 1;
}

.atmosphere {
  position: absolute;
  z-index: 0;
  top: 11%;
  right: 4%;
  width: min(70vw, 78rem);
  height: 79%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(151, 161, 167, 0.045), transparent 64%);
  filter: blur(45px);
  opacity: 0.65;
  pointer-events: none;
  animation: breathe 17s ease-in-out infinite alternate;
}

.identity,
.boundary {
  position: absolute;
  z-index: 3;
  right: var(--edge-x);
  left: var(--edge-x);
  display: block;
  opacity: 0;
  animation: text-arrival 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.identity {
  top: var(--edge-y);
  animation-delay: 0.85s;
}

.boundary {
  bottom: var(--edge-y);
  animation-delay: 1.55s;
}

.name,
.index {
  text-transform: uppercase;
  white-space: nowrap;
}

.name {
  color: rgba(245, 245, 241, 0.86);
  font-size: 0.69rem;
  font-weight: 560;
  letter-spacing: 0.245em;
}

.index {
  color: rgba(229, 231, 231, 0.52);
  font-size: 0.59rem;
  font-weight: 520;
  letter-spacing: 0.22em;
}


.statement-wrap {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--edge-x);
  transform: translateY(-48%);
  opacity: 0;
  animation: text-arrival 1.9s cubic-bezier(0.22, 1, 0.36, 1) 1.15s forwards;
}

.statement {
  color: rgba(239, 239, 235, 0.94);
  font-size: clamp(2.55rem, 5vw, 5.55rem);
  font-weight: 360;
  letter-spacing: -0.047em;
  line-height: 0.985;
  text-wrap: balance;
}

.statement span {
  display: block;
}

@keyframes text-arrival {
  to { opacity: 1; }
}

@keyframes grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-1.5%, 1%, 0); }
  40% { transform: translate3d(1%, -1.5%, 0); }
  60% { transform: translate3d(1.5%, 1.5%, 0); }
  80% { transform: translate3d(-1%, -1%, 0); }
}

@keyframes breathe {
  from { opacity: 0.45; transform: scale(0.98) translate3d(0, 0, 0); }
  to { opacity: 0.72; transform: scale(1.025) translate3d(-1%, 0.5%, 0); }
}

@media (max-width: 720px) {
  :root {
    --edge-x: clamp(1.7rem, 9.5vw, 4rem);
    --edge-y: max(1.45rem, env(safe-area-inset-top));
  }

  .surface::before {
    background:
      linear-gradient(180deg, rgba(7, 8, 9, 0.55) 0%, transparent 28%, transparent 67%, rgba(5, 6, 7, 0.3) 100%),
      radial-gradient(ellipse at center, transparent 38%, rgba(4, 5, 6, 0.34) 100%);
  }

  .identity {
    top: max(3.75rem, calc(env(safe-area-inset-top) + 2.7rem));
  }

  .boundary {
    bottom: max(3.75rem, calc(env(safe-area-inset-bottom) + 2.7rem));
  }


  .statement-wrap {
    top: 41.5%;
    right: var(--edge-x);
    left: var(--edge-x);
    transform: translateY(-50%);
  }

  .statement {
    font-size: clamp(1.72rem, 8.4vw, 3.75rem);
    font-weight: 370;
    letter-spacing: -0.038em;
    line-height: 1.14;
  }


  .atmosphere {
    top: 31%;
    right: -38%;
    width: 122vw;
    height: 61%;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  :root {
    --edge-y: 1.35rem;
  }

  .statement {
    font-size: clamp(2.25rem, 6.8vh, 3.35rem);
  }

}

@media (prefers-reduced-motion: reduce) {
  .surface::after,
  .atmosphere {
    animation: none;
  }

  .identity,
  .statement-wrap,
  .boundary {
    opacity: 1;
    animation: none;
  }

  .field {
    transition: none;
  }
}