:root {
  color-scheme: dark;
  --ice: #dceeff;
  --ice-blue: #a8ceff;
  --violet: #8a61ff;
  --night: #02030d;
  --panel: rgba(7, 9, 28, 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(111, 76, 255, 0.26), transparent 31%),
    radial-gradient(circle at 74% 67%, rgba(118, 93, 236, 0.28), transparent 38%),
    radial-gradient(circle at 12% 76%, rgba(62, 83, 174, 0.5), transparent 42%),
    linear-gradient(180deg, #02020a 0%, #06081a 46%, #474a98 100%);
  font-family: "Italiana", "Times New Roman", serif;
}

body {
  position: fixed;
  inset: 0;
}

button,
input {
  font: inherit;
}

#experience,
#scene,
#scene canvas,
#gesture-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#experience {
  isolation: isolate;
  overflow: hidden;
}

#scene canvas {
  display: block;
  outline: none;
  touch-action: none;
}

#gesture-trail {
  z-index: 8;
  pointer-events: none;
  mix-blend-mode: screen;
}

.atmosphere,
.vignette,
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.atmosphere {
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(166, 132, 255, 0.07), transparent 34%),
    radial-gradient(ellipse at 50% 110%, rgba(105, 96, 255, 0.22), transparent 54%);
  mix-blend-mode: screen;
}

.vignette {
  z-index: 3;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 35%, rgba(1, 2, 10, 0.22) 72%, rgba(0, 0, 4, 0.62) 120%),
    linear-gradient(180deg, rgba(0, 0, 7, 0.12), transparent 26%, transparent 70%, rgba(74, 53, 132, 0.08));
}

.grain {
  z-index: 4;
  opacity: 0.2;
  background-image:
    repeating-radial-gradient(circle at 17% 31%, rgba(255,255,255,.23) 0 0.45px, transparent .65px 3px),
    repeating-radial-gradient(circle at 73% 67%, rgba(185,205,255,.2) 0 0.4px, transparent .6px 4px);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode: soft-light;
}

.dream-title {
  position: fixed;
  z-index: 120;
  top: max(20px, env(safe-area-inset-top));
  left: 50%;
  width: min(92vw, 980px);
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(220, 237, 255, 0.86);
  font-family: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  font-size: clamp(15px, 1.42vw, 22px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.035em;
  white-space: nowrap;
  text-shadow:
    0 0 4px rgba(229, 242, 255, 0.9),
    0 0 12px rgba(121, 174, 255, 0.72),
    0 0 28px rgba(98, 83, 255, 0.38);
  opacity: 0.86;
  pointer-events: none;
  animation: title-breathe 5.5s ease-in-out infinite;
}

@keyframes title-breathe {
  0%, 100% { opacity: 0.79; filter: brightness(0.96); }
  45% { opacity: 0.91; filter: brightness(1.08); }
}

.gesture-copy {
  position: fixed;
  z-index: 24;
  left: max(28px, env(safe-area-inset-left));
  bottom: max(86px, calc(env(safe-area-inset-bottom) + 86px));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(340px, 70vw);
  color: rgba(223, 237, 255, 0.76);
  pointer-events: none;
  transition: opacity 500ms ease;
}

.gesture-copy::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 34px;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(181, 211, 255, 0.7), transparent);
}

.gesture-index {
  width: 31px;
  padding-top: 1px;
  color: rgba(155, 194, 255, 0.52);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.gesture-copy p {
  margin: 0 0 4px;
  font-family: "Italiana", "Times New Roman", serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
}

.gesture-copy div > span {
  color: rgba(180, 199, 229, 0.48);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro-guide {
  position: fixed;
  z-index: 42;
  left: max(32px, env(safe-area-inset-left));
  top: 44%;
  width: min(330px, 64vw);
  padding: 0;
  transform: translateY(-50%);
  color: rgba(218, 235, 255, 0.46);
  pointer-events: none;
  transition: opacity 420ms ease, transform 520ms ease, visibility 420ms;
  text-shadow: 0 0 13px rgba(147, 193, 255, 0.2);
}

.intro-guide[data-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  transform: translate(-16px, -50%);
}

.intro-guide > p {
  position: relative;
  margin: 0 0 10px;
  padding-bottom: 8px;
  color: rgba(228, 244, 255, 0.68);
  font-family: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  font-size: 26px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.035em;
}

.intro-guide > p::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 118px;
  height: 1px;
  background: linear-gradient(90deg, rgba(193, 226, 255, 0.34), transparent);
}

.intro-guide-row {
  display: grid;
  grid-template-columns: 24px minmax(106px, 1fr) 1.45fr;
  align-items: center;
  gap: 8px;
  min-height: 25px;
}

.intro-guide-row span {
  color: rgba(159, 202, 243, 0.38);
  font-family: "Italiana", "Times New Roman", serif;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-align: left;
}

.intro-guide-row b,
.intro-guide-row em {
  font-family: "Italiana", "Times New Roman", serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.11em;
}

.intro-guide-row b {
  color: rgba(213, 234, 255, 0.54);
  text-transform: uppercase;
}

.intro-guide-row em {
  color: rgba(176, 207, 237, 0.34);
  text-align: right;
  white-space: nowrap;
}

.camera-shell {
  position: fixed;
  z-index: 35;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(236px, 34vw);
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(159, 195, 255, 0.16);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(9, 11, 31, 0.68), rgba(22, 22, 53, 0.38));
  box-shadow: 0 0 42px rgba(76, 89, 255, 0.18), inset 0 0 22px rgba(122, 168, 255, 0.04);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
  backdrop-filter: blur(12px);
}

.camera-shell[data-active="true"] {
  opacity: 0.64;
  transform: translateY(0);
}

.camera-shell:hover {
  opacity: 0.9;
}

.camera-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 17px;
  color: rgba(194, 217, 255, 0.5);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.camera-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a9ccff;
  box-shadow: 0 0 8px #70a9ff;
}

.camera-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(1, 2, 10, 0.65);
}

#camera-video,
#camera-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#camera-video {
  transform: scaleX(-1);
  filter: saturate(0.45) brightness(0.7) sepia(0.08) hue-rotate(172deg);
  opacity: 0.62;
}

#camera-overlay {
  z-index: 2;
}

.camera-reticle {
  position: absolute;
  z-index: 3;
  inset: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(206, 225, 255, 0.2);
  border-radius: 50%;
}

.camera-reticle::before,
.camera-reticle::after {
  content: "";
  position: absolute;
  background: rgba(214, 231, 255, 0.2);
}

.camera-reticle::before { top: 50%; left: -6px; width: 30px; height: 1px; }
.camera-reticle::after { top: -6px; left: 50%; width: 1px; height: 30px; }

.start-panel {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  transition: opacity 400ms ease, transform 400ms ease;
}

.start-panel[data-hidden="true"] {
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
}

.start-panel > p {
  margin: 0;
  color: rgba(165, 196, 248, 0.48);
  font-size: 8px;
  letter-spacing: 0.28em;
}

#start-camera {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 190px;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid rgba(191, 217, 255, 0.34);
  border-radius: 2px;
  color: rgba(226, 239, 255, 0.88);
  background: linear-gradient(110deg, rgba(38, 45, 96, 0.54), rgba(70, 60, 143, 0.42));
  box-shadow: 0 0 24px rgba(106, 130, 255, 0.19), inset 0 0 18px rgba(180, 211, 255, 0.06);
  font-family: "Italiana", serif;
  font-size: 11px;
  letter-spacing: 0.17em;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

#start-camera:hover {
  border-color: rgba(215, 232, 255, 0.64);
  box-shadow: 0 0 34px rgba(118, 151, 255, 0.32), inset 0 0 24px rgba(180, 211, 255, 0.09);
}

.button-orbit {
  position: absolute;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border: 1px solid rgba(145, 179, 255, 0.12);
  border-radius: 50%;
  transform: scaleY(0.28);
  animation: orbit-pulse 3.2s ease-in-out infinite;
}

@keyframes orbit-pulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.25) scale(0.96); }
  50% { opacity: 0.7; transform: scaleY(0.34) scale(1.06); }
}

.start-panel small {
  color: rgba(171, 190, 218, 0.38);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.loading {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  background: radial-gradient(circle, rgba(20, 19, 51, 0.98), #02030d 68%);
  transition: opacity 800ms ease, visibility 800ms ease;
}

.loading[data-visible="false"] {
  opacity: 0;
  visibility: hidden;
}

.loading span {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(186, 213, 255, 0.18);
  border-top-color: rgba(213, 232, 255, 0.82);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(132, 165, 255, 0.22);
  animation: spin 2.2s linear infinite;
}

.loading p {
  margin: 0;
  color: rgba(205, 222, 255, 0.55);
  font-size: 9px;
  letter-spacing: 0.34em;
}

@keyframes spin { to { transform: rotate(360deg); } }

.fallback-hint {
  position: fixed;
  z-index: 22;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  color: rgba(183, 200, 227, 0.22);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 760px) {
  .dream-title {
    top: max(15px, env(safe-area-inset-top));
    font-size: clamp(14px, 4vw, 18px);
  }

  .gesture-copy {
    left: 18px;
    bottom: 82px;
  }

  .intro-guide {
    top: 39%;
    left: 18px;
    width: min(255px, 72vw);
    transform: translateY(-50%) scale(0.9);
    transform-origin: left center;
  }

  .intro-guide[data-hidden="true"] {
    transform: translate(-12px, -50%) scale(0.9);
  }

  .camera-shell {
    width: 132px;
  }

  .start-panel {
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
  }

  #start-camera {
    min-width: 168px;
    font-size: 10px;
  }

  .fallback-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dream-title,
  .button-orbit {
    animation: none;
  }
}