:root {
  color-scheme: dark;
  --ink: #02040b;
  --text: #edf5ff;
  --muted: rgba(204, 220, 238, 0.58);
  --ember: #ff8a4b;
}

* { box-sizing: border-box; }

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

body {
  font-family: "Helvetica Neue", "Segoe UI", sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.experience {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 32rem;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(24, 43, 72, 0.21), transparent 52%),
    linear-gradient(145deg, #010207 0%, #030711 54%, #02040b 100%);
}

.experience::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, transparent 51%, rgba(0, 2, 8, 0.24) 77%, rgba(0, 1, 5, 0.68) 100%);
}

.universe,
.universe canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.universe { z-index: 0; }
.universe canvas { display: block; }

.identity {
  position: absolute;
  z-index: 2;
  top: clamp(1.75rem, 5vw, 4.5rem);
  left: clamp(1.5rem, 5vw, 5rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 1rem rgba(0, 2, 8, 0.9);
}

.identity__name {
  margin: 0 0 0.62rem;
  font-size: clamp(0.83rem, 1vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.46em;
}

.identity h1 {
  margin: 0;
  color: rgba(204, 220, 238, 0.66);
  font-size: clamp(0.56rem, 0.7vw, 0.7rem);
  font-weight: 400;
}

.statement {
  position: absolute;
  z-index: 2;
  bottom: calc(clamp(7.2rem, 16vh, 10.5rem) + 1.1rem);
  left: 50%;
  width: min(80vw, 34rem);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(236, 243, 250, 0.82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.18rem, 2.24vw, 1.68rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
  text-shadow: 0 1px 0.7rem rgba(0, 2, 8, 0.78), 0 0 1.6rem rgba(255, 135, 77, 0.19);
}

.motion-cue {
  position: absolute;
  z-index: 2;
  bottom: clamp(1.6rem, 4vh, 3rem);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(204, 220, 238, 0.5);
  font-size: 0.52rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.motion-line { width: 1.8rem; height: 1px; background: currentColor; }

.portal-gate {
  position: absolute;
  z-index: 3;
  bottom: clamp(1.25rem, 4vw, 3.5rem);
  left: clamp(1.25rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 151, 92, 0.2);
  border-radius: 2rem;
  color: rgba(235, 240, 248, 0.72);
  text-decoration: none;
  background: rgba(5, 8, 16, 0.64);
  backdrop-filter: blur(8px);
  transition: border-color 250ms ease, box-shadow 250ms ease, color 250ms ease;
}

.portal-symbol {
  position: relative;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 1px solid rgba(255, 145, 82, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 0.7rem rgba(255, 101, 48, 0.55), inset 0 0 0.45rem rgba(255, 111, 48, 0.35);
}

.portal-symbol span {
  position: absolute;
  inset: 0.27rem;
  border-radius: 50%;
  background: #ffb06e;
  box-shadow: 0 0 0.55rem #ff6b32;
}

.portal-text {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: max-width 300ms ease, margin 300ms ease, opacity 250ms ease;
}

.portal-gate:hover,
.portal-gate:focus-visible {
  border-color: rgba(255, 154, 91, 0.58);
  color: var(--text);
  box-shadow: 0 0 1.5rem rgba(255, 91, 35, 0.12);
}

.portal-gate:hover .portal-text,
.portal-gate:focus-visible .portal-text { max-width: 8rem; margin-left: 0.75rem; opacity: 1; }
.portal-gate:focus-visible { outline: 2px solid rgba(255, 186, 129, 0.9); outline-offset: 4px; }

.journey-controls {
  position: absolute;
  z-index: 3;
  top: clamp(1.1rem, 3vw, 1.7rem);
  right: clamp(1.1rem, 3vw, 1.7rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.journey-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  gap: 0.42rem;
  padding: 0.45rem 0.68rem;
  border: 1px solid rgba(255, 151, 92, 0.2);
  border-radius: 999px;
  color: rgba(235, 240, 248, 0.82);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(5, 8, 16, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 0 0 rgba(255, 91, 35, 0);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 140ms ease;
}

.journey-control:hover {
  border-color: rgba(255, 154, 91, 0.58);
  color: var(--text);
  background: rgba(10, 13, 22, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 1.35rem rgba(255, 91, 35, 0.12);
}

.journey-control:active {
  transform: translateY(1px) scale(0.98);
  background: rgba(19, 17, 22, 0.78);
}

.journey-control:focus-visible {
  border-color: rgba(255, 186, 129, 0.82);
  color: var(--text);
  outline: 2px solid rgba(255, 202, 157, 0.95);
  outline-offset: 3px;
  box-shadow: 0 0 0.9rem rgba(255, 120, 61, 0.18);
}

.journey-control__icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audio-toggle[aria-pressed="false"] {
  color: rgba(204, 220, 238, 0.68);
  border-color: rgba(204, 220, 238, 0.16);
}

.audio-toggle__mute-line { opacity: 0; }
.audio-toggle[aria-pressed="false"] .audio-toggle__waves { opacity: 0.18; }
.audio-toggle[aria-pressed="false"] .audio-toggle__mute-line { opacity: 1; }

.core-focus-toggle[aria-pressed="true"] {
  border-color: rgba(255, 154, 91, 0.64);
  color: rgba(255, 239, 224, 0.96);
  background: rgba(35, 17, 12, 0.7);
  box-shadow: inset 0 0 0.65rem rgba(255, 126, 60, 0.08), 0 0 1.15rem rgba(255, 91, 35, 0.16);
}

.core-focus-toggle[aria-pressed="true"] .core-focus-toggle__centre {
  fill: #ffb06e;
  stroke: #ffb06e;
  filter: drop-shadow(0 0 0.25rem rgba(255, 107, 50, 0.8));
}

.fallback,
.noscript-message {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(80vw, 28rem);
  margin: 0;
  transform: translate(-50%, -50%);
  color: rgba(224, 233, 243, 0.75);
  font-size: 0.8rem;
  line-height: 1.7;
  text-align: center;
}

.fallback.is-visible,
.noscript-message { z-index: 4; }

@media (max-width: 600px) {
  .experience { min-height: 28rem; }
  .identity { top: 1.5rem; left: 1.35rem; }
  .statement { bottom: 8.8rem; font-size: 1.12rem; }
  .portal-gate { bottom: 1.25rem; left: 1.25rem; }
  .motion-cue { bottom: 1.95rem; left: auto; right: 1.25rem; transform: none; font-size: 0.45rem; }
  .motion-line { display: none; }
  .identity { max-width: calc(100% - 8.5rem); }
  .journey-controls {
    top: 1rem;
    right: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }
  .journey-control {
    min-width: 7.15rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-gate,
  .portal-text,
  .journey-control { transition-duration: 0.01ms; }
}