@font-face {
  font-family: "ArchivoTag";
  src: url("../assets/archivo-tag.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #08090a;
  --ink: #e8e2d6;
  --amber: #c9a06a;
  --mx: 50%;
  --my: 40%;
  --msx: 52%;
  --msy: 62%;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

body {
  font-family: "ArchivoTag", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.stage {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 95% at 50% 40%, #0d0e10 0%, var(--bg) 62%);
  touch-action: none;
}

@supports (height: 100dvh) {
  .stage { height: 100dvh; }
}

#flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.veil {
  position: absolute;
  inset: 0;
  background: #050607;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

html.js .veil { opacity: 0.6; }
html.js.ready .veil { opacity: 0; }

.lockup {
  position: relative;
  z-index: 2;
  width: min(76vw, 940px);
  text-align: center;
  pointer-events: none;
}

.mark {
  position: relative;
  display: block;
  margin: 0;
}

.wm {
  display: block;
  width: 100%;
  height: auto;
}

.wm-spec {
  position: absolute;
  inset: 0;
  display: block;
  opacity: var(--spo, 0.85);
  -webkit-mask-image: radial-gradient(ellipse var(--msx) var(--msy) at var(--mx) var(--my), rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 48%, transparent 74%);
  mask-image: radial-gradient(ellipse var(--msx) var(--msy) at var(--mx) var(--my), rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 48%, transparent 74%);
}


.tag {
  margin: clamp(18px, 3.6vh, 36px) 0 0;
  font-size: clamp(10px, 0.5vw + 8px, 14px);
  font-weight: 500;
  letter-spacing: 0.44em;
  padding-left: 0.44em;
  text-transform: uppercase;
  color: rgba(232, 226, 214, 0.52);
}

.soon {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: max(env(safe-area-inset-bottom, 0px), 4.6vh);
  margin: 0;
  text-align: center;
  font-size: clamp(9px, 0.4vw + 7px, 12px);
  font-weight: 500;
  letter-spacing: 0.46em;
  padding-left: 0.46em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.9;
  pointer-events: none;
}

html.js .tag,
html.js .soon {
  opacity: 0;
  transform: translateY(8px);
}

html.js.ready .tag {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}

html.js.ready .soon {
  opacity: 0.9;
  transform: none;
  transition: opacity 1s ease 0.72s, transform 1s ease 0.72s;
}

.lights {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(max(env(safe-area-inset-bottom, 0px), 4.6vh) + 34px);
  display: flex;
  justify-content: center;
  gap: 13px;
  pointer-events: none;
}

.lights i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(120, 98, 66, 0.25);
  transition: background 0.14s ease, box-shadow 0.14s ease;
}

.lights.on1 i:nth-child(-n+1),
.lights.on2 i:nth-child(-n+2),
.lights.on3 i:nth-child(-n+3),
.lights.on4 i:nth-child(-n+4),
.lights.on5 i:nth-child(-n+5) {
  background: #d9a45f;
  box-shadow: 0 0 10px rgba(217, 164, 95, 0.55);
}

.lights.out {
  opacity: 0;
  transition: opacity 0.7s ease 0.35s;
}

.lights.out i {
  background: rgba(120, 98, 66, 0.25);
  box-shadow: none;
}

html:not(.js) .lights { display: none; }

@media (max-width: 640px) {
  .lockup { width: 88vw; }
  .wm-spec {
    -webkit-mask-image: radial-gradient(ellipse 68% 80% at var(--mx) var(--my), rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 48%, transparent 76%);
    mask-image: radial-gradient(ellipse 68% 80% at var(--mx) var(--my), rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 48%, transparent 76%);
  }
}

@media (max-height: 480px) {
  .tag { margin-top: 14px; }
  .soon { bottom: 12px; }
  .lockup { width: min(60vw, 620px); }
}

@media (prefers-reduced-motion: reduce) {
  .veil { display: none; }
  .lights { display: none; }
  
  html.js .tag, html.js .soon { opacity: 1; transform: none; transition: none; }
  html.js .soon { opacity: 0.9; }
}