:root {
  color-scheme: dark;
  --paper: rgba(255, 251, 246, 0.92);
  --canvas-background: #020204;
}

* { box-sizing: border-box; }

html,
body,
#experience {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--canvas-background);
  color: var(--paper);
  font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}

/* 全局声音开关独立于三个场景，避免页面切换时被卸载或失去状态。 */
.audio-toggle {
  position: fixed;
  z-index: 120;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom));
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(241, 238, 229, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.17), transparent 35%),
    linear-gradient(145deg, rgba(39, 43, 40, 0.26), rgba(2, 4, 3, 0.74));
  color: rgba(244, 239, 229, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035),
    0 12px 36px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  backdrop-filter: blur(18px) saturate(112%);
  cursor: pointer;
  transition:
    color 280ms ease,
    border-color 280ms ease,
    background-color 280ms ease,
    opacity 480ms ease,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.audio-toggle:hover {
  color: rgba(255, 252, 244, 0.98);
  border-color: rgba(246, 242, 233, 0.44);
  transform: scale(1.045);
}

.audio-toggle:active {
  transform: scale(0.94);
}

.audio-toggle:focus-visible {
  outline: 1px solid rgba(252, 247, 237, 0.82);
  outline-offset: 4px;
}

.audio-toggle__icon {
  position: relative;
  display: block;
  width: 23px;
  height: 20px;
}

.audio-toggle__speaker {
  position: absolute;
  top: 6px;
  left: 2px;
  width: 7px;
  height: 8px;
  border-radius: 2px 0 0 2px;
  background: currentColor;
}

.audio-toggle__speaker::after {
  position: absolute;
  top: -4px;
  left: 5px;
  width: 0;
  height: 0;
  content: "";
  border-top: 8px solid transparent;
  border-right: 9px solid currentColor;
  border-bottom: 8px solid transparent;
}

.audio-toggle__wave {
  position: absolute;
  top: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: opacity 240ms ease, transform 240ms ease;
}

.audio-toggle__wave--one {
  right: 4px;
  width: 8px;
  height: 12px;
}

.audio-toggle__wave--two {
  right: 0;
  width: 13px;
  height: 18px;
}

.audio-toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27px;
  height: 1.5px;
  content: "";
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(0.6);
  transition: opacity 240ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.audio-toggle[data-audio-state="muted"] .audio-toggle__wave {
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
}

.audio-toggle[data-audio-state="muted"]::after {
  opacity: 0.9;
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
}

.audio-toggle[data-audio-state="enable"] {
  animation: audio-control-breathe 2.6s ease-in-out infinite;
}

.audio-toggle[data-audio-state="unavailable"] {
  opacity: 0.42;
}

body.is-reporting .audio-toggle {
  color: rgba(226, 228, 220, 0.76);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.12), transparent 35%),
    rgba(2, 5, 3, 0.68);
}

@keyframes audio-control-breathe {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.11),
      0 12px 36px rgba(0, 0, 0, 0.34),
      0 0 0 0 rgba(236, 230, 217, 0);
  }

  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 12px 36px rgba(0, 0, 0, 0.34),
      0 0 0 7px rgba(236, 230, 217, 0.055);
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-toggle {
    animation: none !important;
    transition-duration: 0.01ms;
  }
}

#experience {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(230, 240, 244, 0.28) 0,
      rgba(158, 190, 205, 0.11) 3.5%,
      rgba(72, 35, 53, 0.08) 11%,
      transparent 29%
    ),
    var(--canvas-background);
  cursor: default;
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1100ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

#experience.is-leaving {
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.018);
  pointer-events: none;
}

.galaxy-container {
  width: 100%;
  height: 100%;
  position: relative;
}

#galaxy {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.galaxy-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.galaxy-container.is-fallback {
  background:
    radial-gradient(circle at 16% 28%, rgba(250, 248, 228, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 68%, rgba(220, 225, 203, 0.11) 0 1px, transparent 2px);
  background-size: 74px 74px, 108px 108px;
}

#experience-title {
  position: absolute;
  z-index: 1;
  top: 47%;
  left: 50%;
  width: 100%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #f4f0e9;
  font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(60px, 7.8vw, 112px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.018em;
  word-spacing: 0.1em;
  text-align: center;
  text-shadow: 0 2px 24px rgba(2, 2, 4, 0.62), 0 1px 2px rgba(2, 2, 4, 0.8);
  white-space: nowrap;
  mix-blend-mode: normal;
  pointer-events: none;
  user-select: none;
}

#experience-context {
  position: absolute;
  z-index: 1;
  top: calc(47% + clamp(48px, 6.6vw, 82px));
  left: 50%;
  width: min(88vw, 620px);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(244, 241, 237, 0.76);
  font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  font-size: clamp(13px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.035em;
  text-align: center;
  text-shadow: 0 1px 14px rgba(2, 2, 4, 0.82);
  text-wrap: balance;
  pointer-events: none;
  user-select: none;
}

.landing-instruction {
  position: absolute;
  z-index: 2;
  right: max(28px, env(safe-area-inset-right));
  bottom: max(28px, env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100% - 56px);
  margin: 0;
  padding: 15px 18px 14px;
  border: 1px solid rgba(191, 209, 199, 0.14);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(34, 46, 40, 0.24), rgba(0, 3, 2, 0.56)),
    rgba(0, 3, 2, 0.46);
  color: rgba(200, 214, 205, 0.68);
  font: 400 10px/1.65 ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.035em;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 54px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
  pointer-events: none;
  animation: landing-guidance-in 1100ms 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-instruction span {
  display: block;
  white-space: nowrap;
}

@keyframes landing-guidance-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.specular-button {
  --sb-radius: 999px;
  --sb-tint: 255, 255, 255;
  --sb-tint-opacity: 0.075;
  --sb-blur: 16px;
  --sb-text-color: rgba(255, 255, 255, 0.94);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  margin: 0;
  overflow: visible;
  border-radius: var(--sb-radius);
  background:
    radial-gradient(circle at 28% 4%, rgba(255, 255, 255, 0.13), transparent 42%),
    linear-gradient(
      180deg,
      rgba(var(--sb-tint), calc(var(--sb-tint-opacity) + 0.03)),
      rgba(var(--sb-tint), calc(var(--sb-tint-opacity) - 0.045))
    );
  color: var(--sb-text-color);
  backdrop-filter: blur(var(--sb-blur)) saturate(145%) contrast(108%);
  -webkit-backdrop-filter: blur(var(--sb-blur)) saturate(145%) contrast(108%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.27),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 6px 8px rgba(2, 2, 4, 0.28);
  cursor: pointer;
  outline: none;
}

.specular-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.1), transparent 32% 68%, rgba(255, 255, 255, 0.04));
  opacity: 0.68;
}

.specular-button__fx {
  position: absolute;
  z-index: 1;
  inset: -20px;
  pointer-events: none;
}

.specular-button__fx canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.specular-button__label {
  position: relative;
  z-index: 2;
}

#start {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(24px, 4.5vh, 56px);
  width: min(350px, calc(100% - 48px));
  min-height: clamp(64px, 7.67vh, 92px);
  transform: translateX(-50%);
  padding: 0 44px;
  font: 600 clamp(16px, 2vh, 24px)/1 "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(2, 2, 4, 0.5);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 260ms ease;
}

#start:hover,
#start:focus-visible {
  transform: translateX(-50%) scale(1.025);
  letter-spacing: 0.13em;
}

#start:focus-visible {
  outline: 2px solid rgba(244, 248, 250, 0.88);
  outline-offset: 4px;
}

#start:active {
  transform: translateX(-50%) scale(0.975);
}

#start:disabled {
  opacity: 0.55;
  cursor: default;
}

#start:disabled:active {
  transform: translateX(-50%);
}

.specular-button.is-fallback {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 6px 8px rgba(2, 2, 4, 0.28);
}

/* 第二幕：3D 黑暗搜索空间 */
.search-scene {
  position: fixed;
  z-index: 4;
  inset: 0;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at 63% 48%, rgba(37, 21, 29, 0.045), transparent 17%),
    #000201;
  color: rgba(246, 242, 237, 0.92);
  outline: none;
  touch-action: none;
  overscroll-behavior: none;
  transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.search-scene.is-active {
  visibility: visible;
  opacity: 1;
}

.search-scene.is-flower-hovered,
.search-scene.is-tending {
  cursor: pointer;
}

.search-scene.is-rotating-flower {
  cursor: grabbing;
}

.search-scene.is-awaiting-first-response-click {
  cursor: pointer;
}

.search-world,
.search-world canvas,
.search-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.search-world canvas {
  display: block;
}

.search-vignette {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 46%,
      transparent 0 28%,
      rgba(0, 2, 1, 0.24) 58%,
      rgba(0, 1, 1, 0.86) 100%
    ),
    linear-gradient(180deg, rgba(0, 2, 1, 0.28), transparent 38%, rgba(0, 2, 1, 0.62));
}

@property --curtain-hole {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* 首次回应提示的短暂暗幕：只在中央粒子文字出现时覆盖花束。 */
.search-interaction-curtain {
  --curtain-x: 50%;
  --curtain-y: 50%;
  --curtain-hole: 0%;

  position: absolute;
  z-index: 3;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.76);
  transition:
    opacity 240ms cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0s linear 240ms;
}

.search-interaction-curtain.is-visible {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.search-interaction-curtain.is-dissolving {
  -webkit-mask-image: radial-gradient(
    circle at var(--curtain-x) var(--curtain-y),
    transparent 0 var(--curtain-hole),
    #000 calc(var(--curtain-hole) + 0.2%)
  );
  mask-image: radial-gradient(
    circle at var(--curtain-x) var(--curtain-y),
    transparent 0 var(--curtain-hole),
    #000 calc(var(--curtain-hole) + 0.2%)
  );
  animation: dissolve-interaction-curtain 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes dissolve-interaction-curtain {
  0% {
    --curtain-hole: 0%;
    opacity: 1;
  }

  100% {
    --curtain-hole: 150%;
    opacity: 0;
  }
}

/* 中央引导语由 canvas 粒子绘制；该层只负责位置与结束后的隐藏。 */
.search-intro {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  contain: strict;
  pointer-events: none;
  background: transparent;
}

/* 遮罩使用独立层淡出，避免父元素结束隐藏时让背景出现一次突变。 */
.search-intro::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #000101;
  opacity: 0;
  transition: opacity 1280ms cubic-bezier(0.22, 0.78, 0.24, 1);
  will-change: opacity;
}

.search-intro.is-locking-input::before {
  opacity: 0.96;
}

.search-intro.is-locking-input.is-dispersing::before {
  opacity: 0;
}

.search-intro canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.search-intro.is-finished {
  visibility: hidden;
}

.search-instruction,
.search-narrative {
  position: absolute;
  z-index: 2;
}

.search-instruction {
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(410px, calc(100% - 56px));
  margin: 0;
  padding: 21px 24px 20px;
  border: 1px solid rgba(190, 211, 198, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(31, 43, 37, 0.17), rgba(0, 3, 2, 0.64)),
    rgba(0, 2, 1, 0.52);
  color: rgba(210, 220, 213, 0.74);
  font: 400 12px/1.7 ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.025em;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 24px 70px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.97);
  transition:
    opacity 580ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 760ms ease,
    background-color 760ms ease;
  will-change: transform, opacity;
}

.search-scene.is-guidance-locking-input {
  cursor: default;
}

.search-scene.has-exploration-guidance .search-instruction {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.search-scene.has-docked-guidance .search-instruction {
  top: auto;
  right: max(28px, env(safe-area-inset-right));
  bottom: max(27px, env(safe-area-inset-bottom));
  left: auto;
  width: max-content;
  max-width: calc(100% - 56px);
  padding: 16px 19px 15px;
  border-radius: 17px;
  color: rgba(196, 209, 201, 0.68);
  font-size: 10.5px;
  transform: none;
}

.control-line {
  display: block;
  white-space: nowrap;
}

.touch-controls {
  display: none;
}

.flower-controls {
  display: none;
}

.search-scene.is-interaction-locked .explore-controls {
  display: none;
}

.search-scene.is-interaction-locked .flower-controls {
  display: inline;
}

.search-narrative {
  left: 50%;
  bottom: max(27px, env(safe-area-inset-bottom));
  width: min(540px, calc(100% - 56px));
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.search-narrative::before {
  position: absolute;
  z-index: -1;
  inset: -24px -48px;
  content: "";
  background: radial-gradient(
    ellipse at center,
    rgba(239, 225, 202, 0.08),
    transparent 68%
  );
  filter: blur(7px);
  opacity: 0.76;
}

#search-status {
  width: fit-content;
  max-width: 27ch;
  margin: 0 auto;
  color: rgba(239, 231, 216, 0.7);
  font: 400 clamp(16px, 1.5vw, 21px)/1.35 Baskerville, "Iowan Old Style", serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow:
    0 2px 8px rgba(1, 4, 3, 0.78),
    0 0 22px rgba(232, 214, 184, 0.09);
  transition:
    color 1000ms ease,
    font-size 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1000ms ease;
}

.search-scene.is-aligned #search-status {
  color: rgba(246, 238, 224, 0.88);
}

.search-scene.is-tending #search-status,
.search-scene.is-bloomed #search-status {
  color: rgba(252, 244, 230, 0.94);
}

.search-scene.is-fallback .search-world {
  background:
    radial-gradient(circle at 64% 55%, rgba(155, 58, 83, 0.12) 0 1px, transparent 3px),
    radial-gradient(circle at 38% 32%, rgba(166, 184, 172, 0.1) 0 1px, transparent 2px),
    #020705;
  background-size: 88px 88px, 126px 126px, auto;
}