@import url('light-interaction.css');

:root {
  color-scheme: dark;
  --surface: #0b0f16;
  --scene-reveal: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090b10;
}
[hidden] {
  display: none !important;
}
.hero {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, #1a2230, var(--surface) 70%);
  opacity: var(--scene-reveal);
  pointer-events: none;
}
.hero-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
}
[data-stage='lights'] .hero-canvas,
[data-stage='powering'] .hero-canvas,
[data-stage='ready'] .hero-canvas {
  visibility: visible;
}
.stage {
  position: relative;
  z-index: 2;
  width: min(760px, 70vw, 66dvh);
  aspect-ratio: 4.2469;
}
.logo-interaction {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  visibility: hidden;
}
[data-stage='ready'] .logo-interaction {
  visibility: visible;
}
.logo-interaction:focus-visible {
  outline: 2px solid #cfb481;
  outline-offset: 18px;
  border-radius: 16px;
}
.platform-orbit {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: none;
  pointer-events: none;
}
[data-stage='ready'] .platform-orbit {
  display: block;
}
.platform-link {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--mark-size, 56px);
  height: var(--mark-size, 56px);
  border-radius: 12px;
  pointer-events: auto;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.platform-link:focus-visible {
  outline: 2px solid #cfb481;
  outline-offset: 5px;
}
.platform-name {
  position: absolute;
  top: calc(50% + var(--label-offset, 36px));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #d2d7e1;
  font-size: 10px;
  opacity: 0;
}
.platform-link.is-active .platform-name {
  opacity: 1;
}
.orbit-detail {
  display: none;
}
.hero-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  visibility: hidden;
}
[data-stage='fallback'] .hero-poster {
  visibility: visible;
}
[data-stage='fallback'] .hero-canvas {
  visibility: hidden;
}
[data-theme='light'] {
  color-scheme: light;
  --surface: #f4f5f3;
}
[data-theme='light'],
[data-theme='light'] body {
  background: #f4f5f3;
}
[data-theme='light'] .hero::before {
  background: radial-gradient(ellipse at 50% 42%, #fff, #f4f5f3 70%);
}
[data-theme='light'] .platform-name {
  color: #344a6d;
}
@media (max-width: 700px) {
  .stage {
    width: min(550px, 82vw, 45dvh);
  }
}