:root {
  color-scheme: dark;
  --bg: #06070a;
  --text: #f5efe7;
  --muted: rgba(245, 239, 231, .68);
  --faint: rgba(245, 239, 231, .42);
  --line: rgba(255, 255, 255, .14);
  --glass: rgba(255, 255, 255, .075);
  --gold: #e8bc7c;
  --paper: #ece4d7;
  --ink: #29231f;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(232,188,124,.12), transparent 34rem),
    radial-gradient(circle at 80% 34%, rgba(150,128,110,.11), transparent 32rem),
    linear-gradient(180deg, #06070a 0%, #111018 46%, #05060a 100%);
  color: var(--text);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

#spaceCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.film-grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

.watermark,
.music-chip {
  position: fixed;
  z-index: 70;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(8, 8, 12, .42);
  color: rgba(245,239,231,.58);
  backdrop-filter: blur(18px);
  font-size: 12px;
}

.watermark {
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: calc(14px + var(--safe-bottom));
  padding: 8px 12px;
}

.music-chip {
  right: max(14px, env(safe-area-inset-right, 0px));
  top: calc(14px + var(--safe-top));
  padding: 8px 12px;
}

main {
  position: relative;
  z-index: 1;
}

.scene {
  position: relative;
  min-height: 100svh;
  padding: calc(78px + var(--safe-top)) max(22px, 6vw) calc(78px + var(--safe-bottom));
  display: grid;
  align-items: center;
  overflow: clip;
}

.scene::after {
  content: attr(data-chapter);
  position: absolute;
  right: max(22px, 5vw);
  top: calc(90px + var(--safe-top));
  color: rgba(245,239,231,.08);
  font-size: clamp(72px, 14vw, 180px);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .22em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 34px;
  font-size: clamp(44px, 9vw, 102px);
  line-height: 1.02;
  font-weight: 680;
}

h2 {
  margin-bottom: 16px;
  font-size: clamp(31px, 6vw, 68px);
  line-height: 1.12;
  font-weight: 650;
}

h3 {
  margin-bottom: 10px;
  font-size: clamp(23px, 4vw, 34px);
  line-height: 1.22;
  font-weight: 620;
}

.hero-scene {
  place-items: center;
  min-height: 100svh;
}

.light-field span {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .46;
  animation: lightDrift 14s ease-in-out infinite alternate;
}

.light-field span:nth-child(1) {
  width: 38vw;
  height: 38vw;
  left: 7%;
  top: 12%;
  background: rgba(232,188,124,.16);
}

.light-field span:nth-child(2) {
  width: 32vw;
  height: 32vw;
  right: 8%;
  top: 32%;
  background: rgba(180,150,118,.13);
  animation-delay: -4s;
}

.light-field span:nth-child(3) {
  width: 28vw;
  height: 28vw;
  left: 36%;
  bottom: 4%;
  background: rgba(255,255,255,.07);
  animation-delay: -8s;
}

@keyframes lightDrift {
  from { transform: translate3d(-18px, 12px, 0) scale(.95); }
  to { transform: translate3d(24px, -18px, 0) scale(1.08); }
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(980px, 100%);
  text-align: center;
}

.enter-button,
.final-button,
.flip-photo {
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 52px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}

.enter-button:hover,
.final-button:hover,
.flip-photo:hover {
  transform: translateY(-2px);
  border-color: rgba(232,188,124,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 24px 70px rgba(0,0,0,.32), 0 0 38px rgba(232,188,124,.13);
}

.enter-button:active,
.final-button:active,
.flip-photo:active {
  transform: translateY(0) scale(.98);
}

.chapter {
  grid-template-columns: minmax(0, .82fr) minmax(320px, 1fr);
  gap: clamp(34px, 7vw, 110px);
}

.chapter-copy {
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
}

.chapter-copy.narrow {
  width: min(560px, 100%);
}

.chapter-copy p,
.final-copy {
  color: var(--muted);
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.85;
}

.cinema-frame {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  perspective: 1000px;
}

.cinema-frame::before {
  content: "";
  position: absolute;
  width: min(560px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,188,124,.16), transparent 64%);
  filter: blur(30px);
}

.feature-photo,
.memory-photo,
.demo-photo {
  border: 1px solid rgba(255,255,255,.22);
  display: grid;
  place-items: center;
  text-align: center;
  color: #f8f8f8;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(145deg, #b4b4b4, #737373);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 90px rgba(0,0,0,.34);
}

.feature-photo {
  position: relative;
  z-index: 2;
  width: min(380px, 72vw);
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  padding: 22px;
  cursor: pointer;
  transform: rotateY(-8deg) rotateZ(2deg);
  transition: transform .7s cubic-bezier(.18,.84,.18,1), filter .5s ease, box-shadow .5s ease;
}

.feature-photo:hover {
  transform: rotateY(-4deg) rotateZ(1deg) translateY(-8px);
  filter: brightness(1.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 120px rgba(0,0,0,.44), 0 0 44px rgba(232,188,124,.12);
}

.feature-photo span,
.memory-photo span,
.demo-photo span {
  align-self: end;
  font-size: 16px;
  font-weight: 650;
}

.feature-photo em,
.memory-photo em,
.demo-photo em {
  font-style: normal;
  letter-spacing: .18em;
  font-size: 12px;
}

.feature-photo small,
.memory-photo small,
.demo-photo small {
  align-self: start;
  font-size: 11px;
}

.gallery-chapter {
  min-height: 135svh;
  grid-template-columns: .46fr 1fr;
  align-items: start;
  padding-top: calc(110px + var(--safe-top));
}

.photo-cosmos {
  position: relative;
  min-height: 880px;
  perspective: 1200px;
}

.memory-photo {
  position: absolute;
  width: clamp(128px, 16vw, 230px);
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: photoFloat 7s ease-in-out infinite alternate;
  transition: transform .55s ease, filter .55s ease, opacity .55s ease;
}

.memory-photo:hover {
  filter: brightness(1.06);
}

.photo-cosmos.is-muted .memory-photo {
  filter: blur(4px) brightness(.58);
  opacity: .42;
}

.m1 { left: 4%; top: 4%; transform: translateZ(110px) rotate(-7deg); animation-delay: -1s; }
.m2 { left: 38%; top: 0; width: clamp(150px, 20vw, 270px); transform: translateZ(210px) rotate(4deg); animation-delay: -2s; }
.m3 { right: 6%; top: 14%; transform: translateZ(60px) rotate(8deg); animation-delay: -3s; }
.m4 { left: 18%; top: 36%; width: clamp(160px, 21vw, 286px); transform: translateZ(160px) rotate(2deg); animation-delay: -4s; }
.m5 { right: 16%; top: 48%; transform: translateZ(260px) rotate(-5deg); animation-delay: -5s; }
.m6 { left: 2%; top: 68%; transform: translateZ(40px) rotate(7deg); animation-delay: -6s; }
.m7 { right: 2%; top: 74%; width: clamp(150px, 18vw, 250px); transform: translateZ(130px) rotate(-3deg); animation-delay: -7s; }

@keyframes photoFloat {
  from { translate: 0 0; }
  to { translate: 0 -18px; }
}

.fragments-chapter {
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr);
}

.fragment-space {
  position: relative;
  min-height: 560px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 52%, rgba(255,255,255,.055), rgba(255,255,255,.018));
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.memory-fragment {
  position: absolute;
  min-width: 66px;
  min-height: 34px;
  border: 1px solid rgba(232,188,124,.28);
  border-radius: 999px;
  background: rgba(232,188,124,.08);
  color: rgba(245,239,231,.76);
  box-shadow: 0 0 30px rgba(232,188,124,.14);
  cursor: pointer;
  backdrop-filter: blur(14px);
  animation: fragmentDrift 5s ease-in-out infinite alternate;
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.memory-fragment:hover {
  transform: scale(1.08);
  background: rgba(232,188,124,.16);
  color: var(--text);
}

.f1 { left: 12%; top: 18%; animation-duration: 5.2s; }
.f2 { left: 58%; top: 16%; animation-duration: 6.4s; animation-delay: -2s; }
.f3 { left: 72%; top: 48%; animation-duration: 4.8s; animation-delay: -1s; }
.f4 { left: 18%; top: 58%; animation-duration: 7s; animation-delay: -3s; }
.f5 { left: 44%; top: 72%; animation-duration: 5.8s; animation-delay: -4s; }
.f6 { left: 38%; top: 34%; animation-duration: 6.8s; animation-delay: -5s; }

@keyframes fragmentDrift {
  from { translate: -6px 8px; }
  to { translate: 8px -10px; }
}

.fragment-note {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: min(560px, calc(100% - 36px));
  min-height: 56px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 16px;
  transform: translateX(-50%);
  background: rgba(7,7,10,.42);
  color: var(--muted);
  text-align: center;
  line-height: 1.65;
  backdrop-filter: blur(18px);
  transition: transform .35s ease, color .35s ease;
}

.fragment-note.is-active {
  transform: translateX(-50%) translateY(-4px);
  color: var(--text);
}

.finale-scene {
  place-items: center;
  background: radial-gradient(circle at 50% 34%, rgba(232,188,124,.12), transparent 36rem), #04050a;
}

.final-composition {
  position: relative;
  z-index: 2;
  width: min(820px, 100%);
  text-align: center;
}

.final-composition small {
  display: block;
  margin-top: 26px;
  color: var(--faint);
  line-height: 1.7;
}

.final-line {
  min-height: 62px;
  margin: 24px 0 0;
  color: var(--text);
  font-size: clamp(20px, 4vw, 32px);
  line-height: 1.65;
}

.final-stills span {
  position: absolute;
  width: clamp(58px, 10vw, 110px);
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 6px;
  background: linear-gradient(145deg, #aaa, #737373);
  opacity: .28;
  animation: stillFloat 6s ease-in-out infinite alternate;
}

.final-stills span:nth-child(1) { left: 12%; top: 22%; rotate: -9deg; }
.final-stills span:nth-child(2) { right: 12%; top: 18%; rotate: 7deg; animation-delay: -1s; }
.final-stills span:nth-child(3) { left: 18%; bottom: 18%; rotate: 5deg; animation-delay: -2s; }
.final-stills span:nth-child(4) { right: 20%; bottom: 16%; rotate: -6deg; animation-delay: -3s; }

@keyframes stillFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-18px); }
}

.photo-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: calc(70px + var(--safe-top)) 20px calc(38px + var(--safe-bottom));
  background: rgba(4,4,7,.74);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
}

.photo-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: min(450px, 86vw);
  aspect-ratio: 4 / 5;
  perspective: 1200px;
}

.modal-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateY(18px) scale(.94);
  transition: transform .75s cubic-bezier(.18,.84,.18,1);
}

.photo-modal.is-open .modal-inner {
  transform: translateY(0) scale(1);
}

.photo-modal.is-flipped .modal-inner {
  transform: rotateY(180deg);
}

.modal-front,
.modal-back {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  box-shadow: 0 36px 110px rgba(0,0,0,.48);
}

.demo-photo {
  padding: 24px;
}

.modal-back {
  padding: 34px;
  background: linear-gradient(160deg, #f4ead9, #dec8a7);
  color: var(--ink);
  transform: rotateY(180deg);
  display: grid;
  align-content: center;
}

.modal-back p {
  color: rgba(39,33,30,.72);
  line-height: 1.8;
}

.modal-copy {
  width: min(560px, 90vw);
  text-align: center;
}

.modal-copy time {
  display: block;
  margin: 20px 0 8px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .16em;
}

.modal-copy h3 {
  margin: 0 0 8px;
}

.modal-copy p {
  color: var(--muted);
  line-height: 1.75;
}

.modal-close {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  top: calc(16px + var(--safe-top));
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 28px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .scene {
    padding-left: 18px;
    padding-right: 18px;
  }

  .chapter,
  .gallery-chapter,
  .fragments-chapter {
    grid-template-columns: 1fr;
  }

  .cinema-frame {
    min-height: 430px;
  }

  .gallery-chapter {
    min-height: auto;
  }

  .photo-cosmos {
    min-height: 760px;
  }

  .memory-photo {
    width: min(40vw, 170px);
  }

  .m1 { left: 2%; top: 0; }
  .m2 { left: 46%; top: 26px; }
  .m3 { right: 4%; top: 210px; }
  .m4 { left: 8%; top: 260px; }
  .m5 { right: 8%; top: 430px; }
  .m6 { left: 2%; top: 540px; }
  .m7 { right: 4%; top: 600px; }

  .fragment-space {
    min-height: 520px;
  }

  .watermark {
    max-width: 178px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
  }

  .music-chip {
    font-size: 11px;
  }
}

@media (max-width: 430px) {
  h1 {
    font-size: clamp(40px, 12vw, 56px);
  }

  .scene::after {
    top: calc(74px + var(--safe-top));
  }

  .memory-photo {
    padding: 12px;
  }

  .fragment-space {
    min-height: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}