:root {
  --bg: #010305;
  --text: #eaf8ff;
  --ice: #9adfff;
  --ice-bright: #f1fbff;
  --metal-a: #b8cfe0;
  --metal-b: #6d8190;
  --metal-c: #eff8ff;
  --hover: 0;
  --cursor-x: 0;
  --cursor-y: 0;
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  cursor: none;
}
button { font: inherit; }

#fluid,
.depth-vignette,
.noise,
.landing,
.transition,
.inside {
  position: fixed;
  inset: 0;
}

#fluid {
  width: 100%;
  height: 100%;
  display: block;
  background:
    radial-gradient(circle at 50% 40%, rgba(19, 61, 76, 0.18), transparent 34%),
    linear-gradient(to bottom, rgba(5, 13, 18, 0.6), rgba(1, 3, 5, 0.9)),
    #010305;
}

.depth-vignette {
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 18%, rgba(0, 0, 0, 0.22) 62%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.38));
}

.noise {
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
  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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.landing,
.transition,
.inside {
  display: grid;
  place-items: center;
}

.landing {
  z-index: 3;
  transition: opacity 900ms cubic-bezier(.2, .7, .2, 1), transform 1100ms cubic-bezier(.2, .7, .2, 1), filter 900ms ease;
}

.logo-button {
  --tilt-x: calc(var(--cursor-y) * -5deg);
  --tilt-y: calc(var(--cursor-x) * 7deg);
  position: relative;
  width: min(72vw, 920px);
  min-height: min(78vh, 860px);
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: none;
  isolation: isolate;
  display: grid;
  place-items: center;
  perspective: 1400px;
}

.logo-button:focus-visible { outline: none; }

.water-shadow {
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(52vw, 540px);
  height: min(9vw, 88px);
  transform: translate(-50%, -50%) scale(calc(1 + var(--hover) * 0.08));
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(4, 10, 14, 0.52) 38%,
      rgba(31, 106, 130, 0.16) 62%,
      rgba(0, 0, 0, 0) 100%);
  filter: blur(24px);
  opacity: calc(0.72 + var(--hover) * 0.18);
  transition: transform 300ms ease, opacity 300ms ease;
}

.symbol-stage {
  position: relative;
  width: min(48vw, 460px);
  aspect-ratio: 1;
  display: block;
  transform-style: preserve-3d;
  transform:
    translate3d(calc(var(--cursor-x) * 8px), calc(var(--cursor-y) * -5px), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 30px rgba(94, 205, 245, 0.11));
  transition: filter 320ms ease;
}

.symbol-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
}

.symbol-reflection {
  position: absolute;
  left: 50%;
  top: calc(50% + min(20vw, 180px));
  width: min(34vw, 320px);
  height: min(8vw, 72px);
  transform: translateX(-50%) scaleY(1) scaleX(calc(1 + var(--hover) * 0.08));
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      rgba(180, 236, 255, 0.24) 0%,
      rgba(116, 199, 226, 0.14) 38%,
      rgba(45, 96, 112, 0.08) 58%,
      rgba(0, 0, 0, 0) 100%);
  filter: blur(18px);
  opacity: calc(0.42 + var(--hover) * 0.18);
  mix-blend-mode: screen;
}

.wordmark {
  position: absolute;
  left: 50%;
  top: calc(50% + min(23vw, 210px));
  transform: translateX(-50%) translateY(calc(var(--hover) * -4px));
  width: max-content;
  max-width: 92vw;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(1.15rem, 2.25vw, 2.25rem);
  font-weight: 300;
  letter-spacing: clamp(0.5rem, 1.2vw, 1.15rem);
  text-transform: uppercase;
  color: transparent;
  background:
    linear-gradient(180deg,
      rgba(247, 252, 255, 0.98) 0%,
      rgba(215, 235, 245, 0.96) 18%,
      rgba(135, 169, 187, 0.95) 48%,
      rgba(245, 251, 255, 0.94) 64%,
      rgba(120, 150, 168, 0.92) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 18px rgba(155, 225, 255, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.46);
  opacity: 0.94;
  transition: transform 320ms ease, opacity 320ms ease, text-shadow 320ms ease;
}

.logo-button:hover .wordmark,
.logo-button:focus-visible .wordmark {
  opacity: 1;
  text-shadow:
    0 0 24px rgba(155, 225, 255, 0.16),
    0 4px 10px rgba(0, 0, 0, 0.52);
}

.transition {
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(circle at center, rgba(8, 20, 27, 0.32), rgba(0, 0, 0, 0.88) 50%, #000 100%);
}

.transition-copy {
  margin: 0;
  padding: 0 1.5rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .52em;
  font-size: clamp(.7rem, 1.1vw, 1rem);
  font-weight: 300;
  color: rgba(233, 249, 255, .92);
  opacity: 0;
  transform: translateY(12px);
  text-shadow: 0 0 24px rgba(132, 229, 255, .22);
}

.transition-ripple {
  position: absolute;
  width: 14px;
  aspect-ratio: 1;
  border: 1px solid rgba(174, 234, 255, .8);
  border-radius: 50%;
  opacity: 0;
}

.inside {
  z-index: 1;
  opacity: 0;
  background: #010204;
}

.inside-mark {
  width: 1px;
  height: 68px;
  background: linear-gradient(to bottom, transparent, rgba(174, 234, 255, .45), transparent);
  opacity: .35;
}

.compass {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 200ms ease;
  filter: drop-shadow(0 0 9px rgba(117, 222, 255, .22));
}

.compass-ring {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1px solid rgba(174, 234, 255, .58);
  box-shadow: inset 0 0 10px rgba(174, 234, 255, .08);
}
.compass-ring::before,
.compass-ring::after {
  content: "";
  position: absolute;
  background: rgba(174, 234, 255, .4);
}
.compass-ring::before { width: 1px; height: 5px; left: 50%; top: 2px; }
.compass-ring::after { width: 5px; height: 1px; top: 50%; right: 2px; }
.compass-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 24px;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(var(--needle-angle, 0deg));
  transition: transform 130ms linear;
}
.compass-needle::before,
.compass-needle::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
}
.compass-needle::before {
  top: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 11px solid rgba(213, 246, 255, .95);
}
.compass-needle::after {
  bottom: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 11px solid rgba(70, 130, 148, .72);
}
.compass-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: #dff8ff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 7px rgba(174, 234, 255, .7);
}

body.pointer-ready .compass { opacity: .92; }
body.entering .landing { opacity: 0; transform: scale(.84); filter: blur(8px); }
body.entering .transition { visibility: visible; animation: transitionIn 3.1s ease forwards; }
body.entering .transition-ripple { animation: rippleExpand 2s cubic-bezier(.15, .7, .2, 1) forwards; }
body.entering .transition-copy { animation: words 2.5s .35s ease forwards; }
body.entering .compass { opacity: 0; }
body.entered .transition { opacity: 0; visibility: hidden; }
body.entered .inside { opacity: 1; }
body.entered .landing { visibility: hidden; }

@keyframes transitionIn {
  0% { opacity: 0; }
  18%, 76% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rippleExpand {
  0% { opacity: .85; width: 8px; }
  60% { opacity: .3; }
  100% { opacity: 0; width: 130vmax; }
}
@keyframes words {
  0% { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  24%, 68% { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-6px); filter: blur(4px); }
}

@media (pointer: coarse) {
  body { cursor: auto; }
  .compass { display: none; }
  .logo-button { cursor: pointer; width: min(88vw, 920px); }
}

@media (max-width: 760px) {
  .logo-button {
    width: min(90vw, 920px);
    min-height: min(88vh, 860px);
  }
  .symbol-stage {
    width: min(64vw, 360px);
  }
  .wordmark {
    top: calc(50% + min(30vw, 220px));
    letter-spacing: clamp(0.3rem, 0.9vw, 0.65rem);
    white-space: normal;
    line-height: 1.2;
    width: min(92vw, 620px);
  }
  .transition-copy { letter-spacing: .28em; font-size: .7rem; }
}

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