:root {
  --bg: #0a0b0d;
  --ink: #e6e7ea;
  --ink-soft: rgba(230, 231, 234, 0.55);
  --ink-faint: rgba(230, 231, 234, 0.28);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 3.2vw, 44px);
}

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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--sans);
  cursor: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

@media (hover: none) {
  body { cursor: auto; }
  .cursor { display: none; }
}

/* ---------- Canvas & fallback ---------- */

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.fallback {
  display: none;
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, #cfd0d4 0, #9a9ca1 13vmin, #5d5f64 22vmin, transparent 22.3vmin),
    radial-gradient(circle at 50% 38%, rgba(200, 205, 215, 0.12), transparent 45vmin),
    linear-gradient(#0a0b0d, #16181b 70%, #060607 70.2%);
}

.no-webgl #sky { display: none; }
.no-webgl .fallback { display: block; }

/* ---------- Chrome ---------- */

.top,
.bottom {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 var(--gutter);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  pointer-events: none;
  opacity: 0;
  animation: fade 2.4s ease 2.6s forwards;
}

.top { top: calc(var(--gutter) + env(safe-area-inset-top)); }
.bottom { bottom: calc(var(--gutter) + env(safe-area-inset-bottom)); }

.brand em {
  font-style: normal;
  color: var(--ink-faint);
}

.phase { text-align: right; }

.year { text-align: right; }

.year small {
  display: block;
  margin-top: 6px;
  font-size: 8px;
  letter-spacing: 0.28em;
  color: var(--ink-faint);
}

.mare {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: none;
  transition: opacity 1.6s ease, filter 1.6s ease;
}

.mare.out {
  opacity: 0;
  filter: blur(6px);
}

.hint {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -34px);
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--ink-faint);
  white-space: nowrap;
  animation: breathe 5s ease-in-out 5s infinite;
  transition: opacity 1.2s ease;
}

.hint.gone {
  opacity: 0 !important;
  animation: none;
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- Wordmark ---------- */

.stage {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 13vh;
  text-align: center;
  pointer-events: none;
  padding: 0 16px;
}

.word {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 9.5vw, 148px);
  line-height: 1;
  letter-spacing: 0.34em;
  margin-right: -0.34em; /* optically recentre trailing tracking */
  color: var(--ink);
  mix-blend-mode: screen;
  white-space: nowrap;
}

.word span {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(0.18em);
  animation: rise 2.2s cubic-bezier(0.2, 0.7, 0.1, 1) forwards;
}

.word span:nth-child(1) { animation-delay: 0.9s; }
.word span:nth-child(2) { animation-delay: 1.0s; }
.word span:nth-child(3) { animation-delay: 1.1s; }
.word span:nth-child(4) { animation-delay: 1.2s; }
.word span:nth-child(5) { animation-delay: 1.3s; }
.word span:nth-child(6) { animation-delay: 1.4s; }
.word span:nth-child(7) { animation-delay: 1.5s; }
.word span:nth-child(8) { animation-delay: 1.6s; }
.word span:nth-child(9) { animation-delay: 1.7s; }

.tag {
  margin: clamp(14px, 2.4vh, 26px) 0 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.62em;
  margin-right: -0.62em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  animation: fade 2.4s ease 2.4s forwards;
}

@keyframes rise {
  to { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes fade {
  to { opacity: 1; }
}

/* ---------- Cursor ---------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 1px solid rgba(230, 231, 234, 0.45);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease, width 0.5s ease, height 0.5s ease, margin 0.5s ease;
  will-change: transform;
}

.cursor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: var(--ink);
}

.cursor.on { opacity: 1; }

.cursor.press {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .top,
  .bottom { font-size: 9px; letter-spacing: 0.26em; }
  .mare { font-size: 13px; }
  .stage { bottom: 20vh; }
  .word { letter-spacing: 0.22em; margin-right: -0.22em; }
  .tag { letter-spacing: 0.42em; margin-right: -0.42em; }
}

@media (prefers-reduced-motion: reduce) {
  .word span,
  .tag,
  .top,
  .bottom {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }
}