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

/* SEO/LLM/non-JS fallback content — readable in source, not visible on screen */
.seo-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a1420;
  color: #efe8d5;
  font-family: 'Oxanium', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 45%, #14273b 0%, #0a1420 55%, #05080e 100%);
}

#bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.video-tint {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(20,39,59,0.30) 0%, rgba(10,20,32,0.45) 55%, rgba(5,8,14,0.75) 100%);
}

.stage {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(0.6vh);
  transition:
    opacity 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.view.shown {
  opacity: 1;
  transform: translateY(0);
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 90vw;
}

.wordmark {
  font-family: 'Orbitron', 'Michroma', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 7vh, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #e6eef6 45%, #8a9db0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0 0 1vh rgba(120, 200, 240, 0.45),
    0 0 3vh rgba(70, 150, 210, 0.30);
  filter: drop-shadow(0 0.3vh 0.4vh rgba(0,0,0,0.7));
  margin-bottom: 4vh;
}

.page-title {
  font-family: 'Orbitron', 'Michroma', sans-serif;
  font-weight: 700;
  font-size: 6vh;
  line-height: 1.1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f7f1dd;
  text-shadow:
    0 0 0.6vh rgba(90, 180, 220, 0.45),
    0 0 1.6vh rgba(90, 180, 220, 0.20);
  margin-bottom: 4vh;
}

.press-any {
  font-family: 'Oxanium', sans-serif;
  font-size: 1.8vh;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #efe8d5;
  font-weight: 400;
  animation: pulse 1.5s ease-in-out infinite;
  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.press-any.hidden {
  opacity: 0 !important;
  animation: none;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1.0; }
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.menu.visible {
  opacity: 1;
  pointer-events: auto;
}

.item {
  position: relative;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: 'Oxanium', sans-serif;
  font-size: 2.2vh;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(239, 232, 213, 0.6);
  padding: 0.6vh 2vw;
  text-decoration: none;
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5vh);
  transition:
    color    200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity  300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    text-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vw;
  height: 0.6vh;
  transform: translate(-50%, -50%) scaleX(0.7);
  background: radial-gradient(
    ellipse 50% 100% at center,
    rgba(120, 200, 255, 0.55) 0%,
    rgba(90, 170, 230, 0.30) 35%,
    rgba(60, 130, 200, 0.10) 65%,
    transparent 85%
  );
  filter: blur(0.6vh);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 360ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}

.menu.visible .item {
  opacity: 1;
  transform: translateY(0);
}

.menu.visible .item:nth-child(1) { transition-delay: 0ms,   0ms,   0ms,   0ms; }
.menu.visible .item:nth-child(2) { transition-delay: 80ms,  80ms,  80ms,  80ms; }
.menu.visible .item:nth-child(3) { transition-delay: 160ms, 160ms, 160ms, 160ms; }
.menu.visible .item:nth-child(4) { transition-delay: 240ms, 240ms, 240ms, 240ms; }

.item:hover,
.item:focus,
.item.active {
  color: #ffffff;
  text-shadow:
    0 0 0.6vh rgba(170, 220, 255, 0.55);
}

.item:hover::before,
.item:focus::before,
.item.active::before {
  opacity: 1;
  transform: translate(-50%, -50%) scaleX(1);
}

.content {
  position: relative;
  z-index: 3;
  width: min(72vw, 880px);
  max-height: 60vh;
  overflow-y: auto;
  text-align: left;
  font-family: 'Oxanium', sans-serif;
  font-size: 1.9vh;
  line-height: 1.65;
  color: rgba(239, 232, 213, 0.85);
  margin-bottom: 4vh;
  padding-right: 1vw;
}

.content h2 {
  font-family: 'Oxanium', sans-serif;
  font-size: 1.8vh;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9d6e6;
  margin: 2.2vh 0 0.6vh;
  font-weight: 500;
}

.content h2:first-child { margin-top: 0; }

.content p { margin-bottom: 1vh; }

.content ul { list-style: none; }

.content ul li {
  padding: 0.4vh 0;
  border-bottom: 1px solid rgba(120, 160, 200, 0.15);
}

.content a {
  color: #9ec9ee;
  text-decoration: none;
  border-bottom: 1px solid rgba(158, 201, 238, 0.4);
  transition: color 180ms, border-color 180ms;
}

.content a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Subpage: skip the staggered fade-in — show the back button immediately */
.view[data-route]:not([data-route="home"]) .menu .item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms !important;
}

@media (max-width: 700px) {
  .wordmark { font-size: 4.2vh; white-space: normal; }
  .page-title { font-size: 4.5vh; }
  .item { font-size: 2.6vh; }
  .item::before { width: 92vw; }
  .content { width: 90vw; font-size: 2vh; }
}