:root {
  --ink: rgba(48, 61, 57, 0.92);
  --ink-soft: rgba(57, 72, 67, 0.66);
  --page-base: #c8d0c7;
  --background-gradient: linear-gradient(165deg, #ece9dc 0%, #c2cec6 50%, #91a79e 100%);
  --background-sheen: rgba(255, 255, 255, 0.08);
  --background-shade: rgba(70, 93, 86, 0.05);
  --background-depth: rgba(62, 82, 76, 0.09);
  --plane-left: rgba(246, 239, 218, 0.38);
  --plane-right: rgba(89, 115, 107, 0.2);
  --line-color: rgba(72, 96, 88, 0.18);
  --pocket-body-start: #aeb8aa;
  --pocket-body-middle: #89998f;
  --pocket-body-end: #71847d;
  --pocket-lip-start: #c8cec0;
  --pocket-lip-end: #87988e;
  --pocket-opening: rgba(67, 88, 80, 0.48);
  --pocket-stitch: rgba(216, 216, 201, 0.35);
  --pocket-seam: rgba(80, 102, 94, 0.32);
  --card-left-outer: #bea99d;
  --card-left-inner: #b5c6c1;
  --card-center: #d1c3aa;
  --card-right-inner: #aaaebe;
  --card-right-outer: #c1ad9f;
  --card-detail: rgba(247, 243, 229, 0.42);
  --glow-core: #e6c98f;
  --glow-middle: #d7bd89;
  --glow-edge: #b4a27e;
  --hint-color: rgba(46, 65, 59, 0.6);
  --hint-line: rgba(105, 88, 58, 0.44);
}

body.theme-mist {
  --ink: rgba(37, 52, 47, 0.95);
  --ink-soft: rgba(48, 68, 61, 0.68);
  --page-base: #c5d0c8;
  --background-gradient: linear-gradient(165deg, #f0eee2 0%, #c1cec7 50%, #8fa79d 100%);
  --background-sheen: rgba(255, 255, 255, 0.1);
  --background-shade: rgba(58, 83, 74, 0.06);
  --background-depth: rgba(53, 78, 69, 0.11);
  --plane-left: rgba(248, 242, 222, 0.42);
  --plane-right: rgba(76, 106, 96, 0.22);
  --line-color: rgba(57, 84, 75, 0.2);
  --pocket-body-start: #b5c0b2;
  --pocket-body-middle: #879a8f;
  --pocket-body-end: #667c73;
  --pocket-lip-start: #d2d5c9;
  --pocket-lip-end: #80948a;
  --pocket-opening: rgba(53, 77, 68, 0.56);
  --card-left-outer: #bea79d;
  --card-left-inner: #a9c4bd;
  --card-center: #d4c6a8;
  --card-right-inner: #a5aabd;
  --card-right-outer: #c4aa9e;
  --glow-core: #e6c17f;
  --glow-middle: #d8ba82;
  --hint-color: rgba(39, 61, 53, 0.62);
}

body.theme-warm {
  --ink: rgba(49, 64, 58, 0.94);
  --ink-soft: rgba(67, 78, 69, 0.68);
  --page-base: #d3cbbb;
  --background-gradient: linear-gradient(165deg, #f1e9d9 0%, #d6c8b3 46%, #99afa2 100%);
  --background-sheen: rgba(255, 251, 236, 0.12);
  --background-shade: rgba(91, 79, 61, 0.05);
  --background-depth: rgba(66, 91, 80, 0.1);
  --plane-left: rgba(250, 237, 205, 0.43);
  --plane-right: rgba(86, 116, 104, 0.2);
  --line-color: rgba(106, 89, 67, 0.18);
  --pocket-body-start: #b8b6a5;
  --pocket-body-middle: #8c9a8c;
  --pocket-body-end: #6d8177;
  --pocket-lip-start: #d1cebd;
  --pocket-lip-end: #89978a;
  --pocket-opening: rgba(71, 87, 77, 0.54);
  --pocket-stitch: rgba(238, 228, 202, 0.38);
  --card-left-outer: #bca399;
  --card-left-inner: #abc2b5;
  --card-center: #d4bd8f;
  --card-right-inner: #9fadb9;
  --card-right-outer: #c5a898;
  --card-detail: rgba(252, 244, 221, 0.44);
  --glow-core: #edc780;
  --glow-middle: #d8ad68;
  --glow-edge: #b69868;
  --hint-color: rgba(51, 69, 61, 0.62);
  --hint-line: rgba(120, 91, 50, 0.46);
}

body.theme-dusk {
  --ink: rgba(242, 235, 220, 0.94);
  --ink-soft: rgba(235, 228, 215, 0.7);
  --page-base: #626b78;
  --background-gradient: linear-gradient(165deg, #777987 0%, #6f7683 45%, #526f70 100%);
  --background-sheen: rgba(244, 235, 216, 0.06);
  --background-shade: rgba(42, 48, 63, 0.09);
  --background-depth: rgba(27, 49, 51, 0.12);
  --plane-left: rgba(172, 162, 174, 0.18);
  --plane-right: rgba(42, 70, 72, 0.28);
  --line-color: rgba(225, 211, 185, 0.15);
  --pocket-body-start: #74827f;
  --pocket-body-middle: #5c6e6d;
  --pocket-body-end: #445a5c;
  --pocket-lip-start: #89938d;
  --pocket-lip-end: #566a69;
  --pocket-opening: rgba(36, 50, 52, 0.66);
  --pocket-stitch: rgba(224, 216, 195, 0.3);
  --pocket-seam: rgba(28, 47, 49, 0.4);
  --card-left-outer: #9b877f;
  --card-left-inner: #78938f;
  --card-center: #b49b70;
  --card-right-inner: #918ba1;
  --card-right-outer: #a18b80;
  --card-detail: rgba(247, 237, 215, 0.4);
  --glow-core: #e3bc72;
  --glow-middle: #c99f5f;
  --glow-edge: #8f775d;
  --hint-color: rgba(240, 231, 211, 0.62);
  --hint-line: rgba(229, 195, 126, 0.46);
}

body.title-motion-spectrum {
  --title-motion-duration: 7s;
  --title-base-filter: brightness(0) saturate(100%) invert(18%) sepia(5%) saturate(260%) hue-rotate(92deg) brightness(86%) contrast(94%);
  --title-red-filter: brightness(0) saturate(100%) invert(30%) sepia(48%) saturate(1900%) hue-rotate(326deg) brightness(94%) contrast(88%);
  --title-gold-filter: brightness(0) saturate(100%) invert(68%) sepia(44%) saturate(1050%) hue-rotate(4deg) brightness(102%) contrast(82%);
  --title-green-filter: brightness(0) saturate(100%) invert(45%) sepia(28%) saturate(950%) hue-rotate(96deg) brightness(91%) contrast(86%);
  --title-blue-filter: brightness(0) saturate(100%) invert(39%) sepia(35%) saturate(1450%) hue-rotate(169deg) brightness(94%) contrast(86%);
  --title-purple-filter: brightness(0) saturate(100%) invert(41%) sepia(30%) saturate(1350%) hue-rotate(232deg) brightness(94%) contrast(84%);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--page-base);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
}

.cover-page {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  cursor: pointer;
  touch-action: manipulation;
}

.cover-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--background-gradient);
  transition: background 600ms ease;
}

.cover-background::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--background-sheen), transparent 34%, var(--background-shade)),
    linear-gradient(180deg, transparent 66%, var(--background-depth));
  content: "";
}

.background-plane {
  position: absolute;
  display: block;
  opacity: 0.25;
}

.plane-left {
  top: 0;
  left: 0;
  width: 45vw;
  height: 54vh;
  background: var(--plane-left);
  clip-path: polygon(0 0, 100% 0, 52% 100%, 0 78%);
}

.plane-right {
  right: 0;
  bottom: 0;
  width: 52vw;
  height: 45vh;
  background: var(--plane-right);
  clip-path: polygon(34% 0, 100% 18%, 100% 100%, 0 100%);
}

.background-line {
  position: absolute;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-color), transparent);
}

.line-one {
  top: 48%;
  left: -5%;
  width: 44%;
  transform: rotate(-8deg);
}

.line-two {
  right: -4%;
  bottom: 28%;
  width: 38%;
  transform: rotate(7deg);
}

.cover-copy {
  position: absolute;
  top: clamp(7%, 9vh, 11%);
  left: 50%;
  z-index: 3;
  width: min(92vw, 760px);
  text-align: center;
  transform: translateX(-50%);
}

.cover-copy h1,
.cover-copy p,
.cover-copy blockquote {
  margin: 0;
  letter-spacing: 0;
}

.cover-copy .cover-title-wrap {
  position: relative;
  width: min(38vw, 520px);
  aspect-ratio: 520 / 156;
  margin: 0 auto;
  line-height: 0;
  opacity: 0;
  transform: translateY(8px);
  animation: coverTextReveal 1300ms cubic-bezier(0.22, 0.8, 0.25, 1) 120ms forwards;
}

.cover-title-en {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(90vw, 760px);
  min-height: 156px;
  margin: 0 auto;
  color: #3f4f45;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(8px);
  animation:
    coverTextReveal 1300ms cubic-bezier(0.22, 0.8, 0.25, 1) 120ms forwards,
    titleTextSpectrum 7s ease-in-out infinite;
}

.cover-title-en[hidden] {
  display: none;
}

.cover-title-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.title-base {
  z-index: 0;
  opacity: 0.44;
  filter: var(--title-base-filter);
}

.title-tone {
  z-index: 1;
  opacity: 0;
  animation-duration: var(--title-motion-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: opacity;
}

.title-tone-red {
  filter: var(--title-red-filter);
  animation-name: titleSpectrumRed;
}

.title-tone-gold {
  filter: var(--title-gold-filter);
  animation-name: titleSpectrumGold;
}

.title-tone-green {
  filter: var(--title-green-filter);
  animation-name: titleSpectrumGreen;
}

.title-tone-blue {
  filter: var(--title-blue-filter);
  animation-name: titleSpectrumBlue;
}

.title-tone-purple {
  filter: var(--title-purple-filter);
  animation-name: titleSpectrumPurple;
}

.cover-debug {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  padding: 7px 9px;
  border: 1px solid rgba(62, 79, 70, 0.18);
  border-radius: 4px;
  background: rgba(243, 236, 220, 0.72);
  color: rgba(47, 63, 56, 0.72);
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
  white-space: pre;
  pointer-events: none;
}

.cover-copy .cover-slogan {
  margin-top: clamp(18px, 2.8vh, 28px);
  color: var(--ink-soft);
  font-size: clamp(18px, 2.2vw, 25px);
  font-weight: 320;
  line-height: 1.6;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  animation: coverTextReveal 1300ms cubic-bezier(0.22, 0.8, 0.25, 1) 420ms forwards;
}

.cover-copy .cover-verse {
  width: min(86vw, 620px);
  margin: clamp(14px, 1.8vh, 18px) auto 0;
  color: rgba(55, 69, 63, 0.78);
  font-size: clamp(12.5px, 1vw, 14px);
  font-style: oblique 8deg;
  font-weight: 300;
  line-height: 1.65;
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
  line-break: strict;
  opacity: 0;
  transform: translateY(7px);
  animation: coverVerseReveal 1400ms cubic-bezier(0.22, 0.8, 0.25, 1) 680ms forwards;
}

body[data-lang="en"] .cover-verse {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
}

.cover-verse-line,
.cover-verse-ref {
  display: block;
  white-space: nowrap;
}

.cover-verse-ref {
  margin-top: 3px;
  color: rgba(55, 69, 63, 0.68);
  font-size: 0.9em;
  font-style: inherit;
}

.pocket-visual {
  position: absolute;
  top: 68%;
  left: 50%;
  z-index: 2;
  width: min(42vw, 440px);
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
}

.pocket-visual svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pocket-glow {
  filter: blur(2px);
  transform-box: fill-box;
  transform-origin: center;
  animation: pocketGlowBreath 6.4s ease-in-out infinite;
}

.pocket-body-start {
  stop-color: var(--pocket-body-start);
}

.pocket-body-middle {
  stop-color: var(--pocket-body-middle);
}

.pocket-body-end {
  stop-color: var(--pocket-body-end);
}

.pocket-lip-start {
  stop-color: var(--pocket-lip-start);
}

.pocket-lip-end {
  stop-color: var(--pocket-lip-end);
}

.pocket-glow-core {
  stop-color: var(--glow-core);
  stop-opacity: 0.74;
}

.pocket-glow-middle {
  stop-color: var(--glow-middle);
  stop-opacity: 0.3;
}

.pocket-glow-edge {
  stop-color: var(--glow-edge);
  stop-opacity: 0;
}

.pocket-card {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: pocketCardFloat 7.4s ease-in-out infinite;
}

.pocket-card-left-outer .card-surface {
  fill: var(--card-left-outer);
}

.pocket-card-left-inner .card-surface {
  fill: var(--card-left-inner);
}

.pocket-card-center .card-surface {
  fill: var(--card-center);
}

.pocket-card-right-inner .card-surface {
  fill: var(--card-right-inner);
}

.pocket-card-right-outer .card-surface {
  fill: var(--card-right-outer);
}

.card-detail-line {
  fill: none;
  stroke: var(--card-detail);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.card-detail-short {
  opacity: 0.72;
}

.card-detail-dot {
  fill: var(--card-detail);
  opacity: 0.76;
}

.pocket-opening {
  fill: var(--pocket-opening);
}

.pocket-lip {
  fill-opacity: 0.82;
}

.pocket-stitch {
  stroke: var(--pocket-stitch);
}

.pocket-seam {
  stroke: var(--pocket-seam);
}

.cover-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

.cover-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--particle-color);
  box-shadow:
    0 0 calc(var(--size) * 1.8) rgba(247, 226, 177, 0.38),
    0 0 calc(var(--size) * 3.2) rgba(231, 203, 145, 0.16);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.72);
  animation: coverParticleRise var(--duration) cubic-bezier(0.35, 0.08, 0.3, 1) var(--delay) infinite;
  will-change: transform, opacity;
}

.pocket-card-left-outer {
  animation-delay: -1.2s;
  transform: rotate(-10deg);
}

.pocket-card-right-outer {
  animation-delay: -2.4s;
  transform: rotate(10deg);
}

.pocket-card-left-inner {
  animation-delay: -3.6s;
  transform: rotate(-6deg);
}

.pocket-card-right-inner {
  animation-delay: -5.1s;
  transform: rotate(6deg);
}

.pocket-card-center {
  animation-delay: -4.3s;
  transform: rotate(0deg);
}

.cover-enter {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(34px, 7vh, 72px) + env(safe-area-inset-bottom));
  z-index: 4;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--hint-color);
  cursor: pointer;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 330;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  animation: coverHintReveal 1200ms ease 900ms forwards;
  touch-action: manipulation;
}

.cover-enter::after {
  display: block;
  width: 38px;
  height: 1px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, var(--hint-line), transparent);
  content: "";
}

.cover-enter:focus-visible {
  outline: 1px solid rgba(62, 82, 76, 0.48);
  outline-offset: 4px;
}

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

@keyframes coverVerseReveal {
  to {
    opacity: 0.72;
    transform: translateY(0);
  }
}

@keyframes titleTextSpectrum {
  0%,
  100% {
    color: #9b5c60;
  }
  20% {
    color: #a77c43;
  }
  40% {
    color: #477863;
  }
  60% {
    color: #426f8a;
  }
  80% {
    color: #765d86;
  }
}

@keyframes titleSpectrumRed {
  0%,
  100% {
    opacity: 0.94;
  }
  10%,
  90% {
    opacity: 0.34;
  }
  20%,
  80% {
    opacity: 0.03;
  }
}

@keyframes titleSpectrumGold {
  0%,
  40%,
  100% {
    opacity: 0.03;
  }
  10%,
  30% {
    opacity: 0.28;
  }
  20% {
    opacity: 0.94;
  }
}

@keyframes titleSpectrumGreen {
  0%,
  20%,
  60%,
  100% {
    opacity: 0.03;
  }
  30%,
  50% {
    opacity: 0.28;
  }
  40% {
    opacity: 0.94;
  }
}

@keyframes titleSpectrumBlue {
  0%,
  40%,
  80%,
  100% {
    opacity: 0.02;
  }
  50%,
  70% {
    opacity: 0.28;
  }
  60% {
    opacity: 0.94;
  }
}

@keyframes titleSpectrumPurple {
  0%,
  60%,
  100% {
    opacity: 0.03;
  }
  70%,
  90% {
    opacity: 0.3;
  }
  80% {
    opacity: 0.94;
  }
}

@keyframes coverHintReveal {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes pocketGlowBreath {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.78;
    transform: scale(1.03);
  }
}

@keyframes coverParticleRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.72);
  }
  9% {
    opacity: var(--peak-opacity);
  }
  48% {
    opacity: 0.58;
  }
  76% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), calc(-1 * var(--rise)), 0) scale(1.08);
  }
}

@keyframes pocketCardFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -3px;
  }
}

@media (max-width: 720px) {
  .cover-copy {
    top: 12%;
    width: min(94vw, 440px);
  }

  .cover-copy .cover-title-wrap {
    width: min(72vw, 320px);
  }

  .cover-title-en {
    width: min(94vw, 390px);
    min-height: 84px;
    font-size: clamp(34px, 9vw, 52px);
    line-height: 1.08;
  }

  .cover-copy .cover-slogan {
    margin-top: clamp(17px, 2.5vh, 24px);
    font-size: clamp(17px, 4.8vw, 21px);
  }

  .cover-copy .cover-verse {
    width: min(90vw, 390px);
    margin-top: 14px;
    font-size: clamp(12px, 3.2vw, 13px);
    line-height: 1.6;
  }

  .pocket-visual {
    top: 67%;
    width: min(82vw, 390px);
  }

  .cover-enter {
    bottom: calc(clamp(24px, 6vh, 54px) + env(safe-area-inset-bottom));
    font-size: 15px;
  }

  .plane-left {
    width: 78vw;
    height: 42vh;
  }

  .plane-right {
    width: 80vw;
    height: 38vh;
  }
}

@media (max-height: 680px) {
  .cover-copy {
    top: 6%;
  }

  .cover-copy .cover-slogan {
    margin-top: 10px;
  }

  .cover-copy .cover-verse {
    margin-top: 10px;
    line-height: 1.5;
  }

  .pocket-visual {
    top: 74%;
    width: min(50vh, 340px);
  }

  .cover-enter {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

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

  .cover-particle {
    top: calc(var(--y) - 24px);
    opacity: 0.28;
    transform: none;
    animation: none !important;
  }

  .cover-particle:nth-child(n + 9) {
    display: none;
  }

  .pocket-glow {
    opacity: 0.58;
    transform: none;
  }

  .title-tone {
    opacity: 0;
    animation: none !important;
  }

  .title-tone-blue,
  .title-tone-purple {
    opacity: 0.18;
  }

  .cover-title-en {
    color: #46584d;
    animation: coverTextReveal 1ms linear forwards !important;
  }
}