/* 01 Tokens */
@font-face {
  font-family: "Yuko Longyin";
  src: url("./assets/yuko-title-longyin.woff2") format("woff2");
  font-display: swap;
}

/* Preloaded cinematic subsets keep the opening stable on slow Telegram
   connections: headings and captions no longer step through multiple faces. */
@font-face {
  font-family: "Yuko Cinematic Longyin";
  src: url("./assets/fonts/yuko-cinematic-longyin.woff2?v=cinematic-2") format("woff2");
  font-display: block;
}

@font-face {
  font-family: "Yuko Cinematic Xique";
  src: url("./assets/fonts/yuko-cinematic-xique.woff2?v=cinematic-3") format("woff2");
  font-display: block;
}

@font-face {
  font-family: "Yuko Kaiti";
  src: url("./assets/yuko-kaiti-subset.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Yuko Xique";
  src: url("./assets/yuko-body-xique.woff2") format("woff2");
  font-display: swap;
}

/* Local extension for the newer cinematic copy.  The original Yuko files
   stay first in every stack; this compact OFL subset only supplies glyphs
   absent from those intentionally small original font packages. */
@font-face {
  font-family: "Yuko Stage Extended";
  src: url("./assets/fonts/yuko-stage-extended.ttf") format("truetype");
  font-display: swap;
}

/* User-provided handwriting font, subset to the actual envelope and letter
   copy so the reader adds roughly 41KB instead of the original 10MB TTF. */
@font-face {
  font-family: "Yuko Letter Xia";
  src: url("./assets/fonts/yuko-letter-xia-sample.woff2") format("woff2");
  font-display: swap;
}

/* Only the four glyphs used by the cinematic reservation CTA are included. */
@font-face {
  font-family: "Yuko Reserve WenKai";
  src: url("./assets/fonts/yuko-reserve-wenkai.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+5373, U+7ACB, U+7EA6, U+9884;
}

/* Small stage-only fallback, including 静谧, to prevent missing glyphs in WebViews. */
@font-face {
  font-family: "Yuko Stage WenKai Support";
  src: url("./assets/fonts/yuko-stage-wenkai-support.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+4E8E, U+751F, U+800C, U+8C27, U+9759;
}

:root {
  --ink: #352c2d;
  --muted: #776368;
  --cream: #f8f1e9;
  --paper: #fffaf5;
  --blush: #e7c7ce;
  --wine: #743e4b;
  --wine-deep: #25191b;
  --gold: #b68b58;
  --line: rgba(82, 54, 57, .18);
  --font-body: "Yuko Xique", "Songti SC", STSong, SimSun, serif;
  --font-title: "Yuko Longyin", "Yuko Stage Extended", "Yuko Kaiti", KaiTi, serif;
  --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --content: 1280px;
  --reading: 680px;
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
}

/* 02 Reset */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .025em;
  transition: background .65s ease, color .4s ease;
}
body.scene-dark { background: var(--wine-deep); color: #fff8f3; }
body.menu-is-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* 03 Typography */
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 400; line-height: 1.08; }
h1 { font-size: clamp(58px, 16vw, 120px); letter-spacing: .04em; }
h2 { font-size: clamp(37px, 10vw, 82px); letter-spacing: .035em; }
h3 { font-size: clamp(26px, 7vw, 48px); }
.eyebrow, .package-kicker {
  color: var(--wine);
  font: 11px/1.35 var(--font-ui);
  letter-spacing: .18em;
}
.scene-dark .eyebrow { color: #e6bec8; }

/* 04 Global layout */
.section { position: relative; padding: 88px 20px; scroll-margin-top: 70px; }
.section > .center,
.section > .copy,
.section > .letter-card,
.space { width: min(100%, var(--content)); margin-inline: auto; }
.center { text-align: center; }
.center > p:last-child { max-width: var(--reading); margin: 20px auto 0; color: var(--muted); }
.scene-dark .center > p:last-child { color: rgba(255, 248, 243, .72); }
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

/* 05 Header */
.site-header {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  padding: 10px 18px;
  color: #fffaf5;
  transition: background .25s ease, color .25s ease;
}
.site-header.scrolled { color: var(--ink); background: rgba(255, 250, 245, .94); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; line-height: 1; }
.brand-mark { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-title); }
.brand b { display: block; font-family: var(--font-title); font-size: 17px; font-weight: 400; }
.brand small { display: block; margin-top: 4px; color: currentColor; font: 9px/1 var(--font-ui); letter-spacing: .14em; opacity: .7; }
.site-header nav { display: none; }
.menu-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.telegram-top { display: none; }
.ambient-media-engine { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.audio-player { position: fixed; z-index: 75; left: 14px; bottom: var(--safe-bottom); }
.audio-player button { min-width: 58px; min-height: 40px; border: 1px solid rgba(255,255,255,.45); color: #fffaf5; background: rgba(37,25,27,.78); cursor: pointer; font: 11px/1 "Yuko Stage Extended", "Yuko Xique", "Yuko Kaiti", KaiTi, serif; letter-spacing: .1em; }
.audio-player button.playing { color: #f1cbd5; }
.site-header.menu-open { color: #fffaf5; }
.site-header.menu-open nav {
  position: fixed;
  z-index: -1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 96px 28px calc(104px + var(--safe-bottom));
  color: #fffaf5;
  background: linear-gradient(145deg, #211718, #59313b 65%, #7c4655);
}
.site-header.menu-open nav a { font-family: var(--font-title); font-size: clamp(35px, 10vw, 58px); line-height: 1; }
.site-header.menu-open nav a::before { display: inline-block; width: 34px; color: #d9aebb; font: 11px/1 var(--font-ui); vertical-align: middle; content: attr(data-index); }
.site-header.menu-open .menu-reserve { display: block; position: absolute; right: 28px; bottom: calc(34px + var(--safe-bottom)); color: #f4d9e0; font: 13px/1 var(--font-ui); letter-spacing: .12em; }

/* 06 Hero */
.hero {
  position: relative;
  display: flex;
  min-height: 100svh;
  min-height: 100dvh;
  align-items: flex-end;
  padding: 100px 24px calc(52px + var(--safe-bottom));
  overflow: hidden;
  color: #fffaf5;
  isolation: isolate;
}
.hero-image {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    radial-gradient(circle at 83% 20%, rgba(241, 208, 173, .45), transparent 15%),
    radial-gradient(ellipse at 50% 120%, rgba(118, 45, 59, .8), transparent 58%),
    linear-gradient(135deg, #23191b 2%, #5f3440 46%, #b48079 100%);
}
.hero-image::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .52;
  background-image: linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 12vw 12vw;
  mask-image: linear-gradient(to top, #000, transparent 88%);
}
.hero-image::after {
  position: absolute;
  top: 10%;
  right: -21vw;
  width: 75vw;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 239, 225, .3);
  border-radius: 50%;
  box-shadow: 0 0 0 16vw rgba(255, 231, 219, .06), 0 0 0 32vw rgba(255, 231, 219, .035);
  content: "";
}
.hero-wash, .sunlight, .garden-shadow { display: none; }
.hero-content { width: min(100%, 760px); }
.hero-offer { margin-bottom: 22px; color: #f5d4dd; font: 11px/1.6 var(--font-ui); letter-spacing: .12em; }
.hero-offer span { display: none; }.hero-offer span:first-child { display: block; }.hero-offer i { display: none; }
.hero h1 { max-width: 6em; text-align: left; text-wrap: balance; }
.brand-en { margin: 15px 0 16px; color: #eec9d2; font: 11px/1 var(--font-ui); letter-spacing: .25em; }
.brand-subtitle { max-width: 19em; color: rgba(255,250,245,.8); font-size: 16px; line-height: 1.75; }
.hero-pillars { display: none; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 32px; }
.btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 23px;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 999px;
  color: #733e53;
  background: linear-gradient(135deg, #fff8fa, #efbfd0);
  box-shadow:
    0 .65rem 1.45rem rgba(141, 72, 99, .17),
    inset 0 1px 0 rgba(255, 255, 255, .82);
  font: 12px/1 var(--font-ui);
  letter-spacing: .1em;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 .85rem 1.7rem rgba(141, 72, 99, .24),
    inset 0 1px 0 rgba(255, 255, 255, .94);
}

.btn:focus-visible {
  outline: 2px solid #9a526b;
  outline-offset: 3px;
}

.btn--quiet {
  min-height: auto;
  padding: 0;
  border-color: transparent;
  color: #fffaf5;
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.btn--quiet:hover { box-shadow: none; }
.scroll-cue { position: absolute; right: 25px; bottom: calc(21px + var(--safe-bottom)); color: #f5d4dd; font: 9px/1 var(--font-ui); letter-spacing: .18em; writing-mode: vertical-rl; }
.scroll-cue::after { display: block; width: 1px; height: 32px; margin: 10px auto 0; background: currentColor; content: ""; }

/* 07 Scene sections */
.quiet-line { min-height: 88svh; padding: 16vh 24px; display: grid; align-content: center; color: #fff8f3; background: #2b1d20; }
.quiet-line p { max-width: 10em; font-family: var(--font-title); font-size: clamp(47px, 12vw, 86px); line-height: 1.15; }
.space { display: block; }
.space-copy { max-width: 460px; margin-bottom: 38px; }
.space-copy h2 { margin: 12px 0 19px; }.space-copy p { color: var(--muted); }
.letter { color: #fffaf5; background: #472a31; }.letter-card { max-width: var(--reading); }.letter-card h2 { margin: 14px 0 20px; }.letter-text { color: rgba(255,250,245,.82); }.letter-text p + p, .copy p + p { margin-top: 1em; }
.letter-quote { margin: 22px 0 30px; color: #f1cbd5; font-family: var(--font-title); font-size: 28px; line-height: 1.45; }
.reader-trigger { min-height: 50px; padding: 0; border: 0; color: #fffaf5; background: transparent; border-bottom: 1px solid #f1cbd5; cursor: pointer; font: 13px/1 var(--font-ui); letter-spacing: .1em; }
.split { background: var(--paper); }.copy { max-width: var(--reading); }.copy h2 { margin: 14px 0 22px; }.copy p { color: var(--muted); }

/* 08 Gallery */
.gallery-shell { position: relative; min-width: 0; margin-right: -20px; overflow: hidden; }
.gallery-grid { display: grid; width: 100%; max-width: 100%; grid-auto-flow: column; grid-auto-columns: calc(100vw - 54px); gap: 12px; padding-right: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-grid::-webkit-scrollbar { display: none; }
.gallery-item { position: relative; min-height: min(64svh, 530px); margin: 0; overflow: hidden; border-radius: 2px; background: #39262a; scroll-snap-align: start; }
.gallery-item > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d(calc(var(--gallery-pan, 0) * -14px), 0, 0) scale(1.035); transition: transform 420ms var(--ease-soft); user-select: none; -webkit-user-drag: none; }
.gallery-item::before { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(180deg, rgba(74,23,42,.04) 28%, rgba(74,23,42,.64)); }
.gallery-item::after { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 56px 20px 21px; color: #fffaf5; background: linear-gradient(transparent, rgba(25,15,16,.72)); content: attr(data-label); font: 13px/1.4 var(--font-ui); letter-spacing: .08em; }
.gallery-item[data-slot-index] .gallery-count { display: block; }
.gallery-count { position: absolute; z-index: 3; top: 18px; left: 18px; color: #f0c8d3; font: 11px/1 var(--font-ui); letter-spacing: .12em; }
.gallery-controls { display: flex; justify-content: flex-end; gap: 8px; margin: 14px 0 0; }.gallery-controls button { width: 44px; height: 44px; border: 1px solid var(--line); color: var(--wine); background: transparent; cursor: pointer; }

/* 09 Letter reader */
.reader-overlay { position: fixed; z-index: 100; inset: 0; display: none; padding: 78px 20px var(--safe-bottom); color: #fffaf5; background: rgba(33, 23, 24, .98); overflow-y: auto; }.reader-overlay.is-open { display: block; }.reader-overlay__inner { width: min(100%, var(--reading)); margin: 0 auto; }.reader-overlay__close { position: sticky; top: 0; float: right; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fffaf5; background: #3f282d; cursor: pointer; }.reader-overlay h2 { padding-top: 60px; margin-bottom: 28px; }.reader-overlay p { color: rgba(255,250,245,.83); }.reader-overlay p + p { margin-top: 1em; }
.js .letter-text { display: none; }

/* 10 Plan selector */
.plans { padding-bottom: 160px; color: #fffaf5; background: #25191b; }.plans .center { text-align: left; }.plans .center > p:last-child { margin-left: 0; }.plans h2 { max-width: 8em; margin-top: 14px; }
.plan-selector-shell { width: calc(100% + 40px); margin-left: -20px; }.plan-selector { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100vw - 40px); gap: 14px; padding: 10px 20px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.plan-selector::-webkit-scrollbar { display: none; }
.plan-card { position: relative; display: flex; min-height: 68svh; flex-direction: column; align-items: flex-start; padding: 26px 23px; border: 1px solid rgba(255,255,255,.2); color: #fffaf5; background: linear-gradient(155deg, #58323b, #2d1d20 73%); text-align: left; scroll-snap-align: center; cursor: pointer; opacity: .48; transform: scale(.96); transition: opacity .3s ease, transform .3s ease, background .3s ease; }.plan-card[aria-selected="true"] { opacity: 1; transform: scale(1); background: linear-gradient(150deg, #7a4454, #2c1c20 70%); }.plan-card::before { position: absolute; top: 17px; right: 20px; color: #edc8d2; content: attr(data-index); font: 11px/1 var(--font-ui); letter-spacing: .14em; }.plan-badge { color: #efc7d2; font: 10px/1.5 var(--font-ui); letter-spacing: .14em; }.plan-card h3 { max-width: 8em; margin-top: 25px; }.plan-card-price { margin-top: auto; font-family: var(--font-title); font-size: clamp(64px, 18vw, 94px); line-height: .85; letter-spacing: -.03em; }.plan-card-price small { display: block; margin-top: 13px; color: #efc7d2; font: 11px/1 var(--font-ui); letter-spacing: .17em; }.plan-card-copy { margin-top: 21px; color: rgba(255,250,245,.73); font-size: 15px; line-height: 1.7; }.plan-features { display: grid; gap: 7px; margin: 20px 0 22px; color: #f8e7e8; font-size: 13px; line-height: 1.45; }.plan-features span::before { color: #eab8c5; content: "— "; }.card-link { color: #f1cbd5; font: 12px/1 var(--font-ui); letter-spacing: .1em; }.plan-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }.plan-carousel-controls > button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.25); color: #fffaf5; background: transparent; cursor: pointer; }.plan-carousel-controls > button:disabled { opacity: .25; cursor: not-allowed; }.plan-dots { display: flex; gap: 6px; }.plan-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); }.plan-dots span[data-current] { background: #f0c8d3; }

/* 11 Plan details */
.package-showcase { margin-top: 35px; }.package-card { display: block; padding: 27px 20px; border-top: 1px solid rgba(255,255,255,.28); background: #fff9f4; color: var(--ink); }.js .package-card { display: none; }.js .package-card.is-active { display: block; animation: detail-in .45s ease both; }.package-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); }.package-price { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 17px; }.package-price strong { font-family: var(--font-title); font-size: clamp(65px, 18vw, 105px); font-weight: 400; line-height: .8; }.package-price span { color: var(--wine); font: 11px/1 var(--font-ui); letter-spacing: .15em; }.package-meta { margin-top: 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }.package-story-wrap { margin-top: 27px; }.package-story { color: var(--muted); font-size: 16px; }.longform { overflow: hidden; max-height: 12em; mask-image: linear-gradient(#000 56%, transparent); }.longform.is-expanded { max-height: 5000px; mask-image: none; }.text-toggle { min-height: 44px; padding: 0; border: 0; color: var(--wine); background: transparent; cursor: pointer; font: 12px/1 var(--font-ui); letter-spacing: .1em; }.package-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0; }.package-tags span { padding: 6px 9px; border: 1px solid var(--line); color: var(--wine); font: 10px/1.2 var(--font-ui); }.package-project-label { margin: 34px 0 15px; }.package-project-label b { display: block; font-family: var(--font-title); font-size: 25px; font-weight: 400; }.package-project-label span { display: block; margin-top: 8px; color: var(--muted); font: 12px/1.4 var(--font-ui); }

/* 12 Accordion */
.package-project-list { display: grid; gap: 18px; }.package-project-list details { border-bottom: 1px solid var(--line); }.package-project-list summary { display: flex; min-height: 94px; align-items: center; gap: 12px; padding: 13px 0; cursor: pointer; list-style: none; }.package-project-list summary::-webkit-details-marker { display: none; }.project-summary { display: flex; min-width: 0; align-items: center; gap: 14px; }.project-number { min-width: 34px; color: var(--wine); font: 13px/1 var(--font-ui); font-style: normal; }.project-name { display: grid; gap: 5px; }.project-name strong { font-size: 15px; font-weight: 400; line-height: 1.45; }.project-name small { color: var(--muted); font: 11px/1.35 var(--font-ui); }.package-project-list summary > b { margin-left: auto; color: var(--wine); font-size: 0; }.package-project-list summary > b::after { content: "+"; font: 31px/1 var(--font-title); }.package-project-list details[open] summary > b::after { content: "−"; }.package-project-list details[open] summary { border-left: 2px solid var(--wine); padding-left: 12px; background: rgba(231,199,206,.18); }.detail-body { padding: 10px 0 24px; color: var(--muted); }.detail-body p { font-size: 15px; line-height: 1.85; }

/* 13 Process */
.process { background: #ead9d0; }.process-grid { margin-top: 40px; }.process-grid article { padding: 26px 0; border-top: 1px solid var(--line); }.process-grid article:last-child { border-bottom: 1px solid var(--line); }.process-grid span { color: var(--wine); font: 11px/1 var(--font-ui); letter-spacing: .13em; }.process-grid h3 { margin: 14px 0 10px; }.process-grid p { max-width: 33em; color: var(--muted); font-size: 15px; line-height: 1.75; }

/* 14 Promise */
.promise { color: #fffaf5; background: #41282f; }.promise-cards { display: grid; gap: 1px; margin-top: 37px; background: rgba(255,255,255,.18); }.promise-card { min-height: 180px; padding: 24px; background: #41282f; }.promise-card span { color: #e7bdc8; font: 11px/1 var(--font-ui); }.promise-card h3 { margin: 30px 0 10px; }.promise-card p { color: rgba(255,250,245,.7); font-size: 14px; line-height: 1.7; }
.promise .center { text-align: left; }
.promise h2 { max-width: 11em; }
.promise-intro { max-width: 42rem; margin: 18px 0 0; color: var(--muted); font-size: clamp(.98rem, 4vw, 1.1rem); line-height: 1.85; }
.promise-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; background: transparent; }
.promise-cards article { min-height: 0; padding: 22px 20px; border: 1px solid rgba(139, 77, 99, .17); background: rgba(255, 253, 249, .8); }
.promise-cards article span { color: var(--wine); font: 11px/1 var(--font-ui); letter-spacing: .12em; }
.promise-cards article h3 { margin: 16px 0 8px; color: var(--wine); font-size: clamp(1.5rem, 6vw, 2rem); }
.promise-cards article p { color: var(--muted); font-size: .94rem; line-height: 1.75; }

/* 15 CTA */
.reserve { min-height: 86svh; display: grid; place-items: center; padding: 96px 24px calc(76px + var(--safe-bottom)); color: #fffaf5; background: radial-gradient(circle at 74% 15%, rgba(236,197,147,.5), transparent 16%), linear-gradient(145deg, #49333a, #936e5e 100%); }.reserve-panel { width: min(100%, 680px); }.reserve h2 { margin: 14px 0 20px; }.reserve-panel > p:not(.eyebrow) { max-width: 31em; color: rgba(255,250,245,.8); }.contact-list { margin: 30px 0; }.contact-list a { display: flex; justify-content: space-between; padding: 15px 0; border-block: 1px solid rgba(255,255,255,.3); color: #fff3ed; font: 12px/1.4 var(--font-ui); }.contact-list b { color: #edc8d2; font-weight: 400; }.reserve .btn { min-height: 58px; background: #f1cbd5; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 21px 20px calc(21px + var(--safe-bottom)); color: #bdaead; background: #25191b; font: 10px/1.5 var(--font-ui); }

/* 16 Sticky action bar */
.plan-sticky-bar { position: fixed; z-index: 70; right: 12px; bottom: calc(10px + var(--safe-bottom)); left: 12px; display: none; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 11px 10px 15px; color: #fffaf5; background: rgba(37,25,27,.96); box-shadow: 0 12px 28px rgba(26,14,16,.3); }.plan-sticky-bar.is-visible { display: grid; }.plan-sticky-bar p { font: 11px/1.35 var(--font-ui); }.plan-sticky-bar a, .plan-sticky-bar button { min-height: 40px; padding: 0 11px; border: 1px solid rgba(255,255,255,.3); color: #fffaf5; background: transparent; font: 11px/1 var(--font-ui); }.plan-sticky-bar a:last-child { border-color: #f1cbd5; color: #352c2d; background: #f1cbd5; }
.audio-player.is-obscured { display: none; }

/* 17 Progress */
.page-progress { position: fixed; z-index: 90; top: 0; right: 0; left: 0; height: 2px; background: rgba(255,255,255,.18); }.page-progress span { display: block; width: 0; height: 100%; background: #e7bdc8; transform-origin: left; }.chapter-toast { position: fixed; z-index: 60; top: 82px; right: 18px; color: var(--wine); font: 10px/1.5 var(--font-ui); letter-spacing: .13em; opacity: 0; pointer-events: none; transition: opacity .3s ease; }.chapter-toast.is-visible { opacity: 1; }

/* 18 Motion */
@keyframes detail-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes soft-reveal { from { opacity: 0; clip-path: inset(12% 0 0); } to { opacity: 1; clip-path: inset(0); } }
.js .gallery-item { animation: soft-reveal .75s ease both; }

/* 19 Breakpoints */
@media (min-width: 768px) {
  .section { padding: 120px 48px; }.hero { min-height: 92svh; padding-inline: 7vw; }.hero-content { margin-bottom: 4vh; }.gallery-shell { margin-right: 0; }.gallery-grid { grid-auto-columns: minmax(420px, 56vw); }.letter-card { padding: 20px 0; }.process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 38px; }.promise-cards { grid-template-columns: repeat(3, 1fr); }.plan-selector-shell { width: calc(100% + 96px); margin-left: -48px; }.plan-selector { grid-auto-columns: minmax(460px, 58vw); padding-inline: 48px; }.package-card { padding: 52px; }.package-head { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 30px; }.package-meta { margin: 0; }.package-project-list { max-width: 880px; }.plan-sticky-bar { right: 28px; left: auto; width: min(550px, calc(100% - 56px)); }
}

@media (min-width: 1024px) {
  .site-header { min-height: 74px; padding-inline: 48px; }.site-header nav { display: flex; gap: 24px; font: 11px/1 var(--font-ui); letter-spacing: .08em; }.site-header nav a { color: currentColor; }.site-header nav a::before { content: none; }.menu-toggle { display: none; }.telegram-top { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid currentColor; font: 11px/1 var(--font-ui); }.telegram-top svg { width: 15px; fill: currentColor; }.hero { padding-left: max(8vw, 96px); }.hero h1 { max-width: 8em; }.space { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 7vw; }.space > * { min-width: 0; }.space-copy { margin-bottom: 0; }.gallery-grid { grid-auto-columns: minmax(340px, 38vw); }.gallery-item { min-height: 570px; }.plans .center { width: min(var(--content), 100%); }.plan-selector-shell { width: min(var(--content), 100%); margin: 0 auto; }.plan-selector { grid-template-columns: repeat(3, 1fr); grid-auto-flow: initial; grid-auto-columns: auto; padding: 12px 0 25px; overflow: visible; }.plan-card { min-height: 560px; }.plan-carousel-controls { display: none; }.package-showcase { width: min(var(--content), 100%); margin-inline: auto; }.process-grid { grid-template-columns: repeat(4, 1fr); gap: 0 28px; }.process-grid article { min-height: 240px; }.split .copy { margin-left: 15%; }.plan-sticky-bar { display: none !important; }
}

@media (min-width: 1440px) { .section { padding-inline: max(7vw, 100px); }.hero { min-height: 94svh; }.gallery-grid { grid-auto-columns: 460px; }.gallery-item { min-height: 630px; } }

/* 20 Pink portrait and card refinement */
:root {
  --ink: #684853;
  --muted: #95737c;
  --cream: #fff8f2;
  --paper: #fffdf9;
  --blush: #f8dce5;
  --wine: #ad657a;
  --wine-deep: #6e3547;
  --gold: #d5a66f;
  --line: rgba(193, 122, 147, .22);
}

body.scene-dark {
  color: var(--ink);
  background: var(--cream);
}

.hero {
  color: #704653;
}

.hero-image {
  background:
    linear-gradient(180deg, rgba(255, 241, 240, .16), rgba(141, 71, 96, .3) 76%, rgba(110, 53, 71, .52)),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 247, .88), transparent 18%),
    radial-gradient(ellipse at 74% 58%, rgba(244, 186, 204, .88), transparent 25%),
    radial-gradient(ellipse at 34% 72%, rgba(255, 221, 217, .88), transparent 37%),
    linear-gradient(135deg, #f5c9d5, #f9ddd8 48%, #d98fa6 100%);
  animation: hero-photo-breathe 14s ease-in-out infinite alternate;
}

.hero-image::before {
  opacity: .2;
  background-image:
    radial-gradient(circle at 72% 28%, rgba(121, 59, 80, .3) 0 8%, transparent 8.6%),
    radial-gradient(circle at 76% 47%, rgba(255, 248, 239, .58) 0 12%, transparent 12.5%),
    radial-gradient(circle at 62% 42%, rgba(255, 255, 255, .55) 0 3%, transparent 3.4%);
  background-size: cover;
  mask-image: none;
}

.hero-image::after {
  top: 9%;
  right: -16vw;
  width: 72vw;
  border-color: rgba(255, 255, 255, .46);
  box-shadow: 0 0 0 15vw rgba(255, 244, 238, .17), 0 0 0 30vw rgba(255, 244, 238, .08);
}

.hero-content {
  animation: hero-copy-in .9s cubic-bezier(.22, 1, .36, 1) .08s both;
}

.hero-offer {
  color: #9a536a;
  animation: hero-copy-in .7s cubic-bezier(.22, 1, .36, 1) .16s both;
}

.hero h1 {
  color: #754657;
  text-shadow: 0 2px 26px rgba(255, 251, 244, .75);
  animation: hero-copy-in .85s cubic-bezier(.22, 1, .36, 1) .25s both;
}

.brand-en,
.brand-subtitle {
  color: #94576a;
  text-shadow: 0 1px 16px rgba(255, 255, 255, .7);
}

.hero-actions {
  animation: hero-copy-in .8s cubic-bezier(.22, 1, .36, 1) .48s both;
}

.hero .btn {
  color: #fffaf8;
  background: linear-gradient(135deg, #d87999, #b8657e);
  box-shadow: 0 10px 24px rgba(175, 86, 120, .27);
}

.hero .btn--quiet {
  color: #92546a;
  background: transparent;
  box-shadow: none;
}

.scroll-cue {
  color: #a45b72;
  animation: scroll-cue-float 2.5s ease-in-out infinite;
}

.quiet-line {
  min-height: 68svh;
  color: #875267;
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, .74), transparent 18%),
    linear-gradient(135deg, #fff5f2, #f8dbe5 58%, #f0bed0);
}

.letter {
  color: #fffaf8;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 237, 228, .3), transparent 17%),
    linear-gradient(135deg, #c9899c, #ae6d82 70%, #9a5d74);
}

.letter-quote,
.reader-trigger,
.scene-dark .eyebrow {
  color: #fff0f2;
}

.reader-trigger {
  border-bottom-color: rgba(255, 250, 248, .68);
}

.promise {
  color: var(--ink);
  background: #fff5f5;
}

.promise-card {
  background: #fff9f7;
}

.promise-card span {
  color: var(--wine);
}

.promise-card p {
  color: var(--muted);
}

.reserve {
  background:
    radial-gradient(circle at 76% 15%, rgba(255, 238, 211, .65), transparent 17%),
    linear-gradient(145deg, #d987a3, #bd6e87 54%, #a85470);
}

.plans {
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .62), transparent 17%),
    linear-gradient(160deg, #fff4f5, #f7d8e2 74%, #f1c8d5);
}

.plans .center > p:last-child {
  color: var(--muted);
}

.plans .eyebrow {
  color: var(--wine);
}

.plans .center::after {
  display: block;
  margin-top: 14px;
  color: #ab6a7c;
  content: "左右滑动，选择适合您的时光  ⟷";
  font: 12px/1.5 var(--font-ui);
  letter-spacing: .08em;
}

.plan-selector-shell {
  position: relative;
}

.plan-selector {
  grid-auto-columns: 78vw;
  gap: 14px;
  padding: 18px 8vw 28px;
  scroll-padding-inline: 8vw;
  overflow-x: auto;
  opacity: 0;
  transition: opacity .28s ease;
}

.plan-selector.is-ready {
  opacity: 1;
}

.plan-selector.is-hinting {
  animation: plan-swipe-hint .7s cubic-bezier(.22, 1, .36, 1) .35s both;
}

.plan-card {
  min-height: 590px;
  padding: 25px 23px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 26px;
  color: #704853;
  background: linear-gradient(145deg, #fff8f6, #f8d8e3 64%, #efbfd0);
  box-shadow: 0 18px 37px rgba(174, 98, 125, .18);
  opacity: .5;
  transform: translateY(14px) scale(.9);
  filter: saturate(.82);
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1), opacity 420ms ease, filter 420ms ease, box-shadow 520ms cubic-bezier(.22, 1, .36, 1), border-color 420ms ease;
}

.plan-card::before {
  color: #a75e76;
}

.plan-card--signature {
  background: linear-gradient(145deg, #fffaf6, #f8dce7 62%, #f0c6d2);
}

.plan-card--shanghai {
  background: linear-gradient(145deg, #fff7f7, #edbfd0 62%, #d98da8);
}

.plan-card--private {
  background: linear-gradient(145deg, #fffaf3, #f5d9ce 58%, #e6b9b2);
}

.plan-card.is-active.plan-card--signature {
  background: linear-gradient(145deg, #fffdf9, #f6d3df 62%, #edbdd0);
}

.plan-card.is-active.plan-card--shanghai {
  background: linear-gradient(145deg, #fffaf9, #eeb8cc 60%, #d77f9f);
}

.plan-card.is-active.plan-card--private {
  background: linear-gradient(145deg, #fffdf6, #f1d2c4 57%, #e3afa9);
}

.plan-card.is-active {
  z-index: 4;
  border-color: rgba(255, 255, 255, 1);
  opacity: 1;
  filter: saturate(1);
  transform: translateY(-6px) scale(1) rotate(var(--drag-rotate, 0deg));
  box-shadow: 0 26px 54px rgba(164, 76, 109, .28), inset 0 1px rgba(255,255,255,.9);
}

.plan-card.is-prev,
.plan-card.is-next {
  z-index: 2;
  opacity: .78;
  filter: saturate(.9);
  transform: translateY(8px) scale(.95) rotate(calc(var(--drag-rotate, 0deg) * -.22));
}

.plan-card.is-far {
  z-index: 1;
  opacity: .48;
  filter: saturate(.72);
  transform: translateY(14px) scale(.9);
}

.plan-badge,
.plan-card-price small,
.card-link {
  color: #a75e76;
}

.plan-card h3 {
  color: #754657;
}

.plan-card-price {
  color: #9b5169;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.plan-card-copy,
.plan-features {
  color: #805e68;
}

.plan-features span::before {
  color: #c77791;
}

.plan-card .plan-reserve-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 7px;
  padding: 0 15px;
  color: #fffaf8;
  background: #c56f8a;
  font: 11px/1 var(--font-ui);
  letter-spacing: .08em;
}

.plan-carousel-controls > button {
  border-color: rgba(174, 101, 126, .34);
  color: #a75e76;
  background: rgba(255, 255, 255, .46);
}

.plan-dots span {
  background: rgba(173, 101, 126, .3);
}

.plan-dots span[data-current] {
  background: #bd6683;
}

.package-card {
  border: 1px solid rgba(222, 151, 176, .42);
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 17px 38px rgba(180, 101, 130, .11);
}

.js .package-card.is-active {
  animation: package-enter .48s cubic-bezier(.22, 1, .36, 1) both;
}

.package-price,
.package-price span,
.package-price strong,
.package-project-label b,
.project-number,
.package-project-list summary > b {
  color: #af657b;
}

.package-project-list details {
  transition: background-color .28s ease, border-color .28s ease;
}

.package-project-list details[open] {
  border-left: 3px solid #e59ab2;
  background: #fff5f7;
}

.package-project-list details[open] .detail-body {
  animation: detail-copy-in .42s cubic-bezier(.22, 1, .36, 1) both;
}

.btn,
.plan-sticky-bar a,
.plan-sticky-bar button {
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1), box-shadow 280ms ease, background-color 280ms ease;
}

.btn:active,
.plan-sticky-bar a:active,
.plan-sticky-bar button:active,
.plan-card:active {
  transform: scale(.98);
}

.plan-sticky-bar {
  border-radius: 18px;
  color: #704853;
  background: rgba(255, 249, 247, .97);
  box-shadow: 0 14px 34px rgba(162, 78, 108, .22);
}

.plan-sticky-bar a,
.plan-sticky-bar button {
  border-color: rgba(178, 101, 128, .35);
  color: #99546b;
}

.plan-sticky-bar a:last-child {
  color: #fffaf8;
  background: #c56f8a;
}

.site-header.menu-open {
  color: #865164;
}

.site-header.menu-open nav {
  color: #865164;
  background:
    radial-gradient(circle at 80% 15%, rgba(255, 255, 255, .85), transparent 17%),
    linear-gradient(145deg, #fff8f3, #f9dbe4 62%, #edbfd0);
}

.site-header.menu-open nav a::before {
  color: #c58297;
}

.site-header.menu-open .menu-reserve {
  color: #a85c74;
}

@keyframes hero-photo-breathe {
  from { transform: scale(1.01); }
  to { transform: scale(1.035); }
}

@keyframes hero-copy-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scroll-cue-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

@keyframes plan-swipe-hint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}

@keyframes package-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes detail-copy-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
  .plans { padding-bottom: 120px; }
  .plan-selector { grid-auto-columns: minmax(420px, 54vw); padding-inline: 7vw; }
}

@media (min-width: 1024px) {
  .plans { padding-bottom: 110px; }
  .plan-selector { padding-inline: 0; }
  .plan-card { min-height: 560px; }
  .plan-card:hover { transform: translateY(-7px) scale(1.015); box-shadow: 0 27px 50px rgba(162, 82, 112, .28); }
}

/* 22 Motion tokens and cinematic scenes */
:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 260ms;
  --duration-medium: 480ms;
  --duration-slow: 900ms;
}

.sakura-field {
  position: fixed;
  z-index: 18;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: calc(1 - var(--petal-scroll-fade, 0));
  transform: translate3d(0, calc(var(--petal-scroll-y, 0) * -1px), 0);
  transition: opacity 420ms ease;
}

.sakura-field.is-paused .petal { animation-play-state: paused; }

.petal {
  position: absolute;
  top: -12vh;
  left: var(--petal-left);
  width: var(--petal-size);
  height: calc(var(--petal-size) * .72);
  border-radius: 72% 28% 72% 28%;
  opacity: var(--petal-opacity);
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.94) 0 9%, #ffdce8 14% 48%, #e993b1 70%);
  box-shadow: 0 2px 8px rgba(167, 83, 111, .15);
  filter: blur(var(--petal-blur));
  animation: petal-drift var(--petal-duration) linear var(--petal-delay) infinite;
  will-change: transform;
}

.petal.is-touched { animation-duration: 800ms !important; }

.petal-ripple {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 236, 242, .8);
  border-radius: 50%;
  animation: petal-ripple .65s var(--ease-soft) forwards;
}

.hero, .quiet-line, #space, #letter, #about, #plans, #privacy, #reserve { --scene-progress: 0; }
.hero-image { transform: scale(calc(1.035 - var(--scene-progress) * .035)); }
.hero-content { transform: translate3d(0, calc(var(--scene-progress) * -16px), 0); }

.quiet-line::before {
  position: absolute;
  inset: -18% 0 auto;
  height: 38%;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, rgba(255,249,242,.92), transparent);
  content: "";
  pointer-events: none;
}

.quiet-line p {
  position: relative;
  transform: translate3d(0, calc((1 - var(--scene-progress)) * 22px), 0);
  transition: transform var(--duration-slow) var(--ease-soft);
}

#space {
  min-height: 100svh;
  background: linear-gradient(160deg, #fffaf4, #fbe2e8 70%, #f6c9d7);
}

.gallery-item { touch-action: pan-y; }
.gallery-item.is-touched > img { transform: translate3d(0, 0, 0) scale(1.055); }

#about {
  min-height: 150svh;
  padding-top: 7svh;
  background: radial-gradient(circle at 84% 18%, rgba(255,255,255,.75), transparent 17%), linear-gradient(145deg, #fffdf9, #f6dce5 70%, #f0c4d2);
}

#about .copy {
  position: sticky;
  top: 10svh;
  transform: translate3d(0, calc((.5 - var(--scene-progress)) * 12px), 0);
}

#about .copy::before {
  display: none;
  margin-bottom: 12px;
  color: #c77a91;
  content: "01 · 02 · 03";
  font: 10px/1 var(--font-ui);
  letter-spacing: .18em;
}

.plans { min-height: 106svh; }
.package-showcase { overflow: hidden; }
.package-card.is-leaving { animation: package-leave 220ms ease both; }

.reader-overlay {
  background: radial-gradient(circle at 82% 15%, rgba(255,255,255,.42), transparent 18%), linear-gradient(145deg, #f8dce5, #dfa0b5 80%);
}
.reader-overlay.is-open .reader-overlay__inner { animation: reader-rise var(--duration-medium) var(--ease-soft) both; }
.audio-player button.playing { animation: music-breathe 2.8s ease-in-out infinite; }
.page-progress span { width: 100%; transform: scaleX(var(--page-progress, 0)); transform-origin: left; }

@keyframes petal-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(var(--petal-drift), 54svh, 0) rotate(180deg); }
  100% { transform: translate3d(calc(var(--petal-drift) * -.5), 120svh, 0) rotate(390deg); }
}
@keyframes petal-ripple {
  from { opacity: .8; transform: translate(-50%, -50%) scale(.35); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
@keyframes reader-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes package-leave { to { opacity: 0; transform: translate3d(-12px, 8px, 0); } }
@keyframes music-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 150, 180, .15); }
  50% { box-shadow: 0 0 0 7px rgba(232, 150, 180, 0); }
}

@media (min-width: 768px) {
  #about { min-height: 160svh; padding-top: 14svh; }
  #about .copy { top: 24svh; }
}

/* 21 Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .gallery-item,
  .plan-card,
  .package-card,
  .hero-image,
  .hero-content,
  .hero-offer,
  .hero h1,
  .hero-actions,
  .scroll-cue {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
  .page-progress { display: none; }
  .sakura-field { display: none; }
  .hero-image,
  .hero-content,
  .quiet-line p,
  #about .copy { transform: none; }
}

/* 23 Cinematic Sakura stage. Show this static first frame immediately so a
   slow Telegram connection never flashes the retired standard hero first. */
.cinematic-intro {
  display: block;
  position: relative;
  z-index: 1;
}

html.js .natural-hero,
html.js .quiet-line { display: none; }

html:not(.js) .cinematic-timeline { height: 0; }

html.js.cinematic-ready .cinematic-intro {
  display: block;
}

html.js.cinematic-ready .natural-hero,
html.js.cinematic-ready .quiet-line {
  display: none;
}

.cinematic-stage {
  --cinematic-progress: 0;
  --camera-push: 0;
  --scene-return: 0;
  --bg-scale: 1.035;
  --bg-x: 0px;
  --bg-y: 0px;
  --main-scale: 1.07;
  --mid-scale: 1.1;
  --foreground-scale: 1.18;
  --foreground-x: 0px;
  --foreground-y: 0px;
  --title-back-opacity: 0;
  --title-front-opacity: 0;
  --editorial-opacity: 0;
  --editorial-y: 32px;
  --stats-opacity: 0;
  --veil-opacity: 0;
  --scene-softness: 0;
  position: sticky;
  top: 0;
  /* `svh` / `dvh` are not understood by some Android Telegram WebViews.
     Keep the classic viewport unit first so the stage still has real height
     and its scroll timeline never collapses to a static first frame. */
  height: 100vh;
  min-height: 100vh;
  height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #edbdc6;
}

/* Mobile timing: the first camera response arrives within the first short swipe. */
.cinematic-timeline {
  /* Ten deliberate editorial beats: this is intentionally long enough that
     a normal phone swipe cannot skip from the opening promise to the plans. */
  height: 1040vh;
  height: 1040svh;
  pointer-events: none;
}

.stage-layer,
.stage-petals,
.stage-atmosphere,
.stage-transition-veil,
.stage-hero-copy,
.stage-editorial,
.stage-stats,
.stage-scroll-cue,
.stage-title {
  position: absolute;
}

.stage-layer { inset: -6%; pointer-events: none; }

.stage-layer--background {
  inset: -5%;
  z-index: 0;
  transform: translate3d(calc(var(--bg-x) + var(--scene-bg-x, 0px)), calc(var(--bg-y) + var(--scene-bg-y, 0px)), 0) scale(var(--bg-scale));
  will-change: transform, filter;
  filter: saturate(calc(1 - var(--scene-softness) * .18)) contrast(calc(1 - var(--scene-softness) * .1));
}

.stage-layer--background img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 54%; }

.stage-layer--far {
  z-index: 1;
  background: radial-gradient(circle at 57% 30%, rgba(255,250,238,.34), transparent 24%), linear-gradient(115deg, rgba(82,28,46,.16), transparent 40%);
  transform: translate3d(calc(var(--camera-push) * 4px + var(--scene-far-x, 0px)), calc(var(--camera-push) * -6px + var(--scene-far-y, 0px)), 0) scale(calc(1 + var(--camera-push) * .04));
}

.stage-layer--main {
  z-index: 2;
  opacity: .42;
  background: linear-gradient(90deg, rgba(104,35,57,.25), transparent 34%, transparent 62%, rgba(255,236,217,.14)), url("assets/scenes/hero/hero-desktop.webp") 44% 56% / cover;
  mix-blend-mode: soft-light;
  transform: translate3d(var(--scene-main-x, 0px), calc(var(--camera-push) * 10px + var(--scene-main-y, 0px)), 0) scale(var(--main-scale));
}

.stage-layer--mid {
  z-index: 3;
  opacity: calc(.12 + var(--camera-push) * .18);
  background: linear-gradient(150deg, transparent 42%, rgba(255,225,230,.34)), url("assets/scenes/foreground/cherry-foreground.webp") 15% 38% / 130% auto no-repeat;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--camera-push) * -18px + var(--scene-mid-x, 0px)), calc(var(--camera-push) * -16px + var(--scene-mid-y, 0px)), 0) scale(var(--mid-scale));
}

.stage-layer--foreground {
  z-index: 6;
  opacity: calc(.18 + var(--camera-push) * .18);
  background: radial-gradient(ellipse 40% 42% at 102% 5%, rgba(255,211,221,.7), transparent 70%), radial-gradient(ellipse 34% 35% at -2% 96%, rgba(116,37,61,.22), transparent 72%);
  transform: translate3d(calc(var(--foreground-x) + var(--scene-foreground-x, 0px)), calc(var(--foreground-y) + var(--scene-foreground-y, 0px)), 0) scale(var(--foreground-scale));
}

.stage-atmosphere {
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: calc(.38 + var(--scene-softness) * .5);
  background: linear-gradient(180deg, rgba(57, 15, 35, .14), transparent 30%, rgba(48, 13, 28, .42)), radial-gradient(ellipse at 48% 42%, rgba(255, 244, 248, .10), rgba(250, 211, 224, calc(var(--scene-softness) * .72)) 72%);
}

.stage-title {
  z-index: 3;
  margin: 0;
  color: rgba(255,249,240,.91);
  font-family: "Yuko Cinematic Longyin", "Yuko Longyin", serif;
  font-size: clamp(4.6rem, 18vw, 16rem);
  line-height: .78;
  letter-spacing: .04em;
  pointer-events: none;
  text-shadow: 0 6px 30px rgba(88,30,50,.2);
  will-change: transform, opacity;
}

.stage-title--back { left: -1vw; top: 20svh; z-index: 4; opacity: var(--title-back-opacity); transform: translate3d(calc(var(--camera-push) * -26px), calc(var(--camera-push) * -16px), 0) scale(calc(1 + var(--camera-push) * .07)); }
.stage-title--front { right: -2vw; top: 42svh; z-index: 7; opacity: var(--title-front-opacity); transform: translate3d(calc(var(--camera-push) * 30px), calc(var(--camera-push) * -28px), 0) scale(calc(1 + var(--camera-push) * .1)); }

.stage-hero-copy {
  z-index: 11;
  left: clamp(1.65rem, 7vw, 7rem);
  right: clamp(1.65rem, 7vw, 5rem);
  bottom: max(13svh, calc(env(safe-area-inset-bottom) + 6rem));
  color: #fff7fb;
  max-width: 33rem;
  opacity: calc(1 - min(1, var(--camera-push) * 3.7));
  transform: translate3d(0, calc(var(--camera-push) * -18px), 0);
}

.stage-kicker { color: #ffe0ee; font: 700 .68rem/1.45 "Yuko Cinematic Xique", "Yuko Xique", serif; letter-spacing: .13em; margin: 0 0 1rem; text-shadow: 0 1px 14px rgba(121, 51, 80, .25); }
.stage-hero-copy h1 { color: #fff9fc; font-family: "Yuko Cinematic Longyin", "Yuko Longyin", serif; font-size: clamp(3.1rem, 13.5vw, 7.8rem); line-height: .95; margin: 0 0 1.4rem; letter-spacing: .025em; text-shadow: 0 2px 20px rgba(134, 62, 91, .31); }
.stage-hero-copy h1 span, .stage-hero-copy h1 small { display: block; }
.stage-hero-copy h1 span { color: #fffaff; }
.stage-hero-copy h1 small { color: #f9d8e6; font-family: "Yuko Cinematic Xique", "Yuko Xique", serif; font-size: clamp(.88rem, 3.8vw, 1.15rem); line-height: 1.7; letter-spacing: .08em; margin-top: .7rem; font-weight: 400; text-shadow: 0 1px 12px rgba(112, 43, 72, .25); }
.stage-hero-copy h1 small span { display: block; }
.stage-hero-copy .btn {
  position: relative;
  isolation: isolate;
  min-width: 8.85rem;
  min-height: 3.35rem;
  padding: .9rem 1.5rem .82rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 999px;
  color: #945067;
  background:
    linear-gradient(135deg, rgba(255, 254, 252, .98), rgba(255, 229, 239, .92));
  box-shadow:
    0 .7rem 1.7rem rgba(127, 57, 87, .21),
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(190, 110, 142, .1);
  font-family: "Yuko Reserve WenKai", "Yuko Xique", "Yuko Kaiti", KaiTi, serif;
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .13em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .62);
  transition:
    transform 280ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 280ms ease,
    background-color 280ms ease;
}

.stage-hero-copy .btn::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(112deg, rgba(255, 255, 255, .78), transparent 43%);
  content: "";
  pointer-events: none;
}

.stage-hero-copy .btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1rem 2rem rgba(127, 57, 87, .27),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(190, 110, 142, .12);
}

.stage-hero-copy .btn:active {
  transform: translateY(0) scale(.98);
  box-shadow:
    0 .45rem 1rem rgba(127, 57, 87, .2),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

.stage-hero-copy .btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .96);
  outline-offset: 3px;
}

/* Match cinematic supporting copy to the small type on the opening screen. */
.stage-editorial .eyebrow,
.stage-editorial .stage-panel-subtitle,
.stage-editorial .stage-panel-copy,
.stage-editorial p:last-child {
  font-family: "Yuko Xique", "Yuko Kaiti", "Yuko Stage WenKai Support", KaiTi, serif;
}

/* The three core values are visual title moments, not body copy. */
.stage-editorial article[data-editorial-panel="0"] h2,
.stage-editorial article[data-editorial-panel="1"] h2,
.stage-editorial article[data-editorial-panel="2"] h2 {
  font-family: "Yuko Longyin", "Yuko Stage Extended", "Yuko Kaiti", KaiTi, serif;
}

.stage-editorial { z-index: 12; inset: 0; display: grid; place-items: center; padding: 2.2rem clamp(1.7rem, 7vw, 4rem); pointer-events: none; }
.stage-editorial article { grid-area: 1/1; position: relative; width: min(100%, 38rem); color: #74364d; text-align: left; font-family: "Yuko Stage Extended", serif; opacity: var(--panel-opacity, 0); transform: translate3d(var(--panel-x, 0px), var(--panel-y, 28px), 0) scale(var(--panel-scale, 1)) rotate(var(--panel-rotate, 0deg)); transform-origin: var(--panel-origin, 50% 50%); will-change: opacity, transform; }
.stage-editorial article::before { content: ""; display: block; width: 3.25rem; height: 1px; margin-bottom: 1.1rem; background: currentColor; opacity: .55; transform: scaleX(var(--panel-rule, 1)); transform-origin: left; }
.stage-editorial h2 { font-family: "Yuko Stage Extended", serif; font-size: clamp(2rem, 9vw, 5.4rem); line-height: 1.22; margin: .8rem 0 1rem; letter-spacing: .03em; }
.stage-editorial .eyebrow,
.stage-editorial .stage-panel-subtitle { font-family: "Yuko Stage Extended", serif; }
.stage-editorial .stage-panel-subtitle { margin: 0 0 .65rem; color: #9a5269; font-size: .82rem; line-height: 1.5; letter-spacing: .12em; }
.stage-editorial p:last-child { max-width: 29rem; font-family: "Yuko Stage Extended", serif; font-size: clamp(1rem, 3.8vw, 1.2rem); line-height: 1.9; margin: 0; }
.stage-editorial .stage-panel-copy { max-width: 28rem; margin: 0 0 .78rem; font-family: "Yuko Stage Extended", serif; font-size: clamp(.98rem, 3.7vw, 1.16rem); line-height: 1.85; opacity: var(--copy-opacity, 0); will-change: transform, opacity; }
.stage-editorial .stage-panel-copy[data-copy="a"] { transform: translate3d(calc((1 - var(--copy-a, 0)) * -26px), calc((1 - var(--copy-a, 0)) * 14px), 0); opacity: var(--copy-a, 0); }
.stage-editorial .stage-panel-copy[data-copy="b"] { transform: translate3d(calc((1 - var(--copy-b, 0)) * 30px), calc((1 - var(--copy-b, 0)) * 8px), 0); opacity: var(--copy-b, 0); }
.stage-editorial .stage-panel-copy[data-copy="c"] { transform: translate3d(calc((1 - var(--copy-c, 0)) * -18px), calc((1 - var(--copy-c, 0)) * -14px), 0); opacity: var(--copy-c, 0); }

/* Replaceable image slots for the four ritual pages. Each uses an ordinary
   local <img>, so swapping the src never requires touching the animation. */
.stage-panel-visual {
  position: relative;
  width: min(72vw, 20rem);
  aspect-ratio: 3 / 2;
  margin: 1.2rem 0 0;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 242, .68);
  border-radius: .3rem;
  background: #d8a5b4;
  box-shadow: 0 .75rem 1.7rem rgba(92, 39, 56, .18);
  opacity: var(--visual-opacity, 0);
  transform: translate3d(var(--visual-x, -28px), var(--visual-y, 18px), 0) scale(calc(.94 + var(--visual-opacity, 0) * .06));
  will-change: transform, opacity;
}
.stage-panel-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage-editorial article[data-editorial-panel="5"] .stage-panel-visual { margin-left: auto; }
.stage-editorial article[data-editorial-panel="6"] .stage-panel-visual { margin-inline: auto; }

/* Eight pages, eight different compositions — this reads as a sequence of
   shots rather than one centred text card with replacement copy. */
.stage-editorial article[data-editorial-panel="0"] { align-self: start; justify-self: start; width: min(78vw, 25rem); margin: 18svh 0 0 .25rem; }
.stage-editorial article[data-editorial-panel="0"] h2 { font-size: clamp(4.2rem, 19vw, 8rem); line-height: .92; }
.stage-editorial article[data-editorial-panel="1"] { align-self: end; justify-self: end; width: min(76vw, 25rem); margin: 0 .1rem 17svh 0; text-align: right; color: #91435d; }
.stage-editorial article[data-editorial-panel="1"]::before { margin-left: auto; transform-origin: right; }
.stage-editorial article[data-editorial-panel="1"] h2 { font-size: clamp(4rem, 18vw, 7.5rem); line-height: .94; }
.stage-editorial article[data-editorial-panel="2"] { align-self: center; justify-self: start; width: min(92vw, 25rem); margin: 12svh 0 0 .1rem; color: #633447; }
.stage-editorial article[data-editorial-panel="2"] h2 { font-size: clamp(4rem, 18vw, 7.3rem); line-height: .9; letter-spacing: -.03em; white-space: nowrap; }
.stage-editorial article[data-editorial-panel="3"] { width: min(100%, 31rem); text-align: center; }
.stage-editorial article[data-editorial-panel="3"]::before { margin-inline: auto; width: 5rem; }
.stage-editorial article[data-editorial-panel="3"] h2 { font-size: clamp(3.3rem, 14vw, 6.3rem); }
.stage-editorial article[data-editorial-panel="4"] { align-self: end; justify-self: start; width: min(84vw, 29rem); margin: 0 0 14svh .15rem; }
.stage-editorial article[data-editorial-panel="5"] { align-self: start; justify-self: end; width: min(84vw, 29rem); margin: 17svh .05rem 0 0; text-align: right; }
.stage-editorial article[data-editorial-panel="5"]::before { margin-left: auto; transform-origin: right; }
.stage-editorial article[data-editorial-panel="6"] { align-self: center; justify-self: center; width: min(87vw, 30rem); margin-top: 18svh; }
.stage-editorial article[data-editorial-panel="6"] h2 { font-size: clamp(3.25rem, 13vw, 5.7rem); }
.stage-editorial article[data-editorial-panel="7"] { align-self: start; justify-self: start; width: min(84vw, 29rem); margin: 14svh 0 0 .1rem; }
.stage-editorial article[data-editorial-panel="8"] { align-self: center; justify-self: center; width: min(88vw, 31rem); margin-top: 5svh; }
.stage-editorial article[data-editorial-panel="8"] h2 { font-size: clamp(3.45rem, 14vw, 6.2rem); }
.stage-editorial article[data-editorial-panel="9"] { align-self: end; justify-self: end; width: min(94vw, 33rem); margin: 0 .1rem 13svh 0; text-align: right; color: #6d354a; }
.stage-editorial article[data-editorial-panel="9"]::before { margin-left: auto; transform-origin: right; }
.stage-editorial article[data-editorial-panel="9"] h2 { font-size: clamp(2.15rem, 8.35vw, 4.75rem); line-height: 1.28; letter-spacing: -.025em; }
.stage-editorial article[data-editorial-panel="9"] h2 span { display: block; white-space: nowrap; }
.stage-editorial article[data-editorial-panel="9"] .stage-panel-copy { margin-left: auto; }
.stage-editorial article[data-editorial-panel="10"] { align-self: start; justify-self: start; width: min(88vw, 31rem); margin: 13svh 0 0 .1rem; }
.stage-editorial article[data-editorial-panel="10"] h2 { font-size: clamp(2.15rem, 8.35vw, 4.75rem); line-height: 1.28; letter-spacing: -.025em; }

/* The cinematic copy is deliberately composed asymmetrically, but it still
   needs a consistent Telegram-safe gutter on narrow phones. */
@media (max-width: 767px) {
  .stage-hero-copy {
    left: max(1.4rem, env(safe-area-inset-left));
    right: max(1.6rem, env(safe-area-inset-right));
  }

  .stage-editorial {
    padding-inline: max(1.35rem, env(safe-area-inset-left));
  }

  .stage-editorial article[data-editorial-panel] {
    width: min(calc(100vw - 3rem), 31rem) !important;
  }

  .stage-editorial article[data-editorial-panel="1"],
  .stage-editorial article[data-editorial-panel="5"],
  .stage-editorial article[data-editorial-panel="9"] {
    margin-right: .35rem;
  }

  .stage-editorial article[data-editorial-panel="2"] h2,
  .stage-editorial article[data-editorial-panel="9"] h2 span {
    white-space: normal;
  }

  .stage-editorial article[data-editorial-panel="2"] h2 { font-size: clamp(3.55rem, 16.5vw, 6rem); }

  /* Six-character film titles remain single, intentional lines on compact
     Android Telegram viewports; longer editorial statements use a smaller
     matching line rather than wrapping at an arbitrary word. */
  .stage-editorial article[data-editorial-panel="3"] h2,
  .stage-editorial article[data-editorial-panel="4"] h2,
  .stage-editorial article[data-editorial-panel="5"] h2,
  .stage-editorial article[data-editorial-panel="6"] h2,
  .stage-editorial article[data-editorial-panel="7"] h2,
  .stage-editorial article[data-editorial-panel="8"] h2 {
    font-size: clamp(2.35rem, 11.5vw, 4.4rem);
    letter-spacing: -.02em;
    white-space: nowrap;
  }

  .stage-editorial article[data-editorial-panel="9"] h2,
  .stage-editorial article[data-editorial-panel="10"] h2 {
    font-size: clamp(1.9rem, 8.5vw, 3.2rem);
    letter-spacing: -.04em;
    white-space: nowrap;
  }

  .stage-panel-visual { width: min(68vw, 19rem); }
}

/* Editorial typography sits over a moving image: pearl-white values keep the
   cinematic pages luminous without falling back to stark device-white. */
.stage-editorial article[data-editorial-panel] {
  color: #fff7fb;
  text-shadow: 0 2px 18px rgba(92, 45, 67, .34);
}
.stage-editorial article[data-editorial-panel]::before { background: #ffe6f0; opacity: .72; }
.stage-editorial .eyebrow,
.stage-editorial .stage-panel-subtitle {
  display: inline;
  color: #fff6fa;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 2px 10px rgba(59, 27, 42, .78), 0 0 3px rgba(59, 27, 42, .64);
}
.stage-editorial article[data-editorial-panel="10"] .stage-panel-subtitle { font-size: clamp(1.08rem, 4.2vw, 1.4rem); letter-spacing: .1em; }

/* Use a small contrast field only behind moving editorial copy, preserving
   the bright cherry-blossom image everywhere else. */
.stage-editorial .stage-panel-copy {
  color: #fff8fb;
  text-shadow: 0 2px 12px rgba(56, 27, 41, .7), 0 0 2px rgba(56, 27, 41, .55);
}
.stage-editorial .stage-panel-copy[data-copy="a"] {
  padding: .08rem .16rem;
  border-radius: .12rem;
  background: linear-gradient(90deg, rgba(73, 36, 50, .16), rgba(73, 36, 50, 0));
}

/* Keep the original brush display face first. The local extension only fills
   missing newer glyphs, which is more reliable in Telegram Android WebView. */
.stage-editorial article[data-editorial-panel="8"] h2,
.stage-editorial article[data-editorial-panel="9"] h2,
.stage-editorial article[data-editorial-panel="10"] h2 {
  font-family: "Yuko Stage Extended", serif;
}

/* All cinematic headings share the opening title's brush face. */
.stage-editorial h2 {
  font-family: "Yuko Cinematic Longyin", "Yuko Longyin", serif !important;
  font-weight: 400;
  font-synthesis: none;
}

/* Must follow the stage layout rules above so Telegram uses this same
   supporting face for every cinematic caption. */
.stage-editorial .eyebrow,
.stage-editorial .stage-panel-subtitle,
.stage-editorial .stage-panel-copy,
.stage-editorial p:last-child {
  font-family: "Yuko Cinematic Xique", "Yuko Xique", "Yuko Stage WenKai Support", serif;
}

.stage-stats { z-index: 13; left: 1.5rem; right: 1.5rem; bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3rem)); display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; color: #783a52; opacity: var(--stats-opacity); transform: translateY(calc((1 - var(--stats-opacity)) * 16px)); }
.stage-stats span { border-top: 1px solid rgba(119,59,80,.42); padding-top: .6rem; font: .7rem/1.5 "Yuko Cinematic Xique", "Yuko Xique", serif; letter-spacing: .06em; }
.stage-stats b { display: block; font: 400 clamp(1.15rem, 5vw, 2rem)/1 "Yuko Cinematic Xique", "Yuko Xique", serif; margin-bottom: .26rem; }

.stage-petals { inset: 0; z-index: 14; pointer-events: none; overflow: hidden; }
.stage-petal { position: absolute; width: var(--size); height: calc(var(--size) * .68); border-radius: 100% 0 100% 0; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(246,171,192,.72)); opacity: var(--opacity); filter: blur(var(--blur)); transform: translate3d(var(--x), var(--y), 0) rotate(var(--rotation)); will-change: transform, opacity; }
.stage-petals--front { z-index: 16; }
.stage-petals--front .stage-petal { opacity: calc(var(--opacity) * .6 + var(--veil-opacity) * .65); }

.stage-transition-veil { z-index: 15; inset: -15%; pointer-events: none; opacity: var(--veil-opacity); background: radial-gradient(ellipse at 15% 78%, rgba(255,235,229,.94), transparent 36%), radial-gradient(ellipse at 82% 19%, rgba(237,164,185,.75), transparent 43%), linear-gradient(114deg, #f8e4e0, #eebeca 46%, #f7e3db); clip-path: ellipse(calc(17% + var(--veil-opacity) * 68%) calc(11% + var(--veil-opacity) * 70%) at calc(104% - var(--veil-opacity) * 64%) calc(100% - var(--veil-opacity) * 60%)); }

.stage-scroll-cue { z-index: 18; right: max(1.65rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: .6rem; color: #ffedf5; font: .68rem/1 "Yuko Cinematic Xique", "Yuko Xique", serif; letter-spacing: .1em; text-decoration: none; text-shadow: 0 1px 12px rgba(126, 55, 84, .28); opacity: calc(.95 - var(--camera-push) * .9); }
.stage-scroll-cue i { width: 2.2rem; height: 1px; background: currentColor; position: relative; }.stage-scroll-cue i::after { content: ""; position: absolute; right: 0; top: -3px; border: 4px solid transparent; border-left-color: currentColor; }

.cinematic-intro + .hero { margin-top: 0; }
.cinematic-intro + .hero + .quiet-line + .section.space { scroll-margin-top: 5rem; }

/* Environment photos are now real local <img> files in the HTML. This keeps
   the replacement path obvious and avoids any CSS-only image dependency. */

@media (min-width: 768px) {
  .cinematic-timeline { height: 1100vh; height: 1100svh; }
  .stage-layer--background img { object-position: 50% 52%; }
  .stage-editorial { padding: 4rem clamp(4rem, 13vw, 13rem); }
  .stage-stats { grid-template-columns: repeat(3, minmax(9rem, 15rem)); justify-content: end; gap: 2rem; left: auto; right: 5vw; bottom: 6svh; }
  .stage-hero-copy { max-width: min(78vw, 56rem); bottom: clamp(5rem, 11svh, 8rem); }
  .stage-hero-copy h1 { max-width: 13ch; font-size: clamp(3.5rem, 6vw, 6.4rem); }
}

@media (min-width: 1024px) {
  .stage-title--back { top: 16svh; }.stage-title--front { top: 45svh; }
  .stage-hero-copy { bottom: 17svh; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .cinematic-intro { display: none; }
  html.js.cinematic-ready .natural-hero,
  html.js.cinematic-ready .quiet-line { display: block; }
}

/* 24 Mobile plan card hand + continuous environment marquee */
.environment-marquee {
  position: relative;
  width: 100%;
  max-width: none;
  overflow: hidden;
  padding: .5rem 0 1.15rem;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.environment-marquee::before,
.environment-marquee::after {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 13vw;
  content: "";
  pointer-events: none;
}

.environment-marquee::before { left: 0; background: linear-gradient(90deg, var(--page-bg, #fff7f5), transparent); }
.environment-marquee::after { right: 0; background: linear-gradient(270deg, var(--page-bg, #fff7f5), transparent); }

.environment-marquee__track { display: flex; width: max-content; will-change: transform; }
.environment-marquee__group { display: flex; flex: 0 0 auto; gap: 14px; padding-right: 14px; }
.environment-marquee .gallery-item {
  display: block;
  width: min(72vw, 320px);
  min-width: min(72vw, 320px);
  min-height: min(47svh, 420px);
  margin: 0;
  scroll-snap-align: none;
  border-radius: 20px;
  transform: none;
  animation: none;
}

.environment-marquee .gallery-item:nth-child(2) { width: min(52vw, 250px); min-width: min(52vw, 250px); }
.environment-marquee .gallery-item:nth-child(3) { width: min(80vw, 360px); min-width: min(80vw, 360px); }
.environment-marquee .gallery-item:nth-child(4) { width: min(56vw, 265px); min-width: min(56vw, 265px); }
.environment-marquee .gallery-item::before { transition: transform .7s var(--ease-soft), filter .7s ease; }
.environment-marquee.is-dragging { cursor: grabbing; }
.environment-marquee.is-dragging .gallery-item::before { transform: scale(1.025); }
.environment-marquee .gallery-count { z-index: 2; }

@media (max-width: 767px) {
  .plans { overflow: clip; }
  .plan-selector-shell {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    overflow: visible;
  }
  .plan-selector {
    position: relative;
    display: block;
    width: 100%;
    height: min(66svh, 590px);
    padding: 0;
    overflow: visible;
    opacity: 0;
    /* Telegram WebView intermittently flashes when three large gradient cards
       cross GPU 3D planes. Depth is expressed by z-index, scale and shadow. */
    perspective: none;
    transform-style: flat;
    touch-action: pan-y;
  }
  .plan-selector.is-ready { opacity: 1; }
  .plan-selector.is-hinting { animation: none; }
  .plan-card {
    position: absolute;
    top: 1.15rem;
    left: calc(50% - 40vw);
    display: flex;
    width: 80vw;
    min-height: clamp(31rem, 60svh, 35rem);
    max-height: none;
    padding: 1.05rem 1.15rem 1.2rem;
    overflow: hidden;
    border-radius: 25px;
    opacity: 1;
    filter: none;
    transform-style: flat;
    backface-visibility: visible;
    transform-origin: 50% 95%;
    transition: transform 620ms var(--ease-soft), box-shadow 520ms ease, opacity 420ms ease;
    will-change: transform, opacity;
    contain: paint;
  }
  .plan-card.is-active {
    z-index: 5;
    clip-path: none;
    transform: translate(var(--hand-drag, 0px), 3.55rem) rotate(0) scale(1) !important;
    box-shadow: 0 29px 58px rgba(159, 75, 107, .31), inset 0 1px rgba(255,255,255,.92);
  }
  .plan-card.is-active h3 {
    margin-top: .7rem;
    margin-bottom: .45rem;
    font-size: clamp(1.7rem, 7.8vw, 2.2rem);
    line-height: 1.2;
  }
  .plan-card.is-active .plan-card-price {
    margin-top: .5rem;
    font-size: clamp(3.5rem, 15vw, 4.45rem);
    line-height: .9;
  }
  .plan-card.is-active .plan-card-price small { margin-top: .45rem; }
  .plan-card.is-active .plan-card-copy { margin-top: .75rem; font-size: .93rem; line-height: 1.58; }
  .plan-card.is-active .plan-features { gap: .36rem; margin: .7rem 0 .8rem; font-size: .84rem; line-height: 1.36; }
  .plan-card.is-active .plan-reserve-link { min-height: 40px; margin-top: .25rem; padding: 0 .8rem; }
  .plan-card.is-left-back {
    z-index: 3;
    left: -20vw;
    top: -.75rem;
    transform: translate(0, 0) rotate(-9deg) scale(.95) !important;
    box-shadow: 0 16px 34px rgba(154, 80, 105, .28), inset 0 1px rgba(255, 255, 255, .78);
    clip-path: none;
  }
  .plan-card.is-right-back {
    z-index: 3;
    left: 40vw;
    top: -.75rem;
    transform: translate(0, 0) rotate(8deg) scale(.95) !important;
    box-shadow: 0 16px 34px rgba(154, 80, 105, .28), inset 0 1px rgba(255, 255, 255, .78);
    clip-path: none;
  }
  .plan-card.is-hidden-back.is-left-back { z-index: 2; left: -25vw; top: -.25rem; transform: translate(0, .7rem) rotate(-13deg) scale(.90) !important; opacity: .96; clip-path: none; }
  .plan-card.is-hidden-back.is-right-back { z-index: 2; left: 45vw; top: -.25rem; transform: translate(0, .7rem) rotate(13deg) scale(.90) !important; opacity: .96; clip-path: none; }
  .plan-card.is-picking {
    z-index: 8 !important;
    clip-path: none;
    /* Filter changes allocate a new bitmap layer in Android Telegram and can
       blink during the card lift. The shadow carries the lift instead. */
    filter: none;
    box-shadow: 0 37px 68px rgba(145, 61, 95, .35), inset 0 1px rgba(255,255,255,.95);
    transform: translate(0, -1rem) rotate(1.6deg) scale(1.035) !important;
  }
  .plan-card.is-active .plan-badge,
  .plan-card.is-active h3,
  .plan-card.is-active .plan-card-price,
  .plan-card.is-active .plan-card-copy,
  .plan-card.is-active .plan-features,
  .plan-card.is-active .plan-reserve-link { animation: plan-card-content-in .38s var(--ease-soft) both; }
  .plan-card.is-active h3 { animation-delay: .04s; }
  .plan-card.is-active .plan-card-price { animation-delay: .08s; }
  .plan-card.is-active .plan-card-copy { animation-delay: .12s; }
  .plan-card.is-active .plan-features { animation-delay: .17s; }
  .plan-card.is-active .plan-reserve-link { animation-delay: .22s; }
  .plan-card:not(.is-active) .plan-card-copy,
  .plan-card:not(.is-active) .plan-features,
  .plan-card:not(.is-active) .plan-reserve-link { opacity: 0; pointer-events: none; }
  .plan-card:not(.is-active) h3 { max-width: 7em; margin-top: .55rem; font-size: 1.05rem; line-height: 1.22; }
  .plan-card:not(.is-active) .plan-card-price { margin-top: .55rem; font-size: clamp(2.25rem, 11vw, 3.4rem); }
  .plan-card:not(.is-active) .plan-card-price small { display: none; }
  .plan-card:not(.is-active)::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(145,62,92,.1)); }
  .plan-card.is-left-back::after { background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.34)); }
  .plan-card.is-right-back::after { background: linear-gradient(270deg, rgba(255,255,255,.06), rgba(255,255,255,.34)); }
  .plan-selector.is-demo .plan-card.is-left-back { animation: plan-hand-left-cue .55s var(--ease-soft) both; }
  .plan-selector.is-demo .plan-card.is-right-back { animation: plan-hand-right-cue .55s var(--ease-soft) .45s both; }
  .plan-carousel-controls { margin-top: .35rem; }
  .package-showcase {
    position: relative;
    touch-action: pan-y;
    padding-top: 1.55rem;
  }
  .package-showcase::before {
    position: absolute;
    z-index: 2;
    top: .15rem;
    left: 50%;
    color: #a76a7d;
    content: "左右轻扫，切换套餐详情";
    font: .66rem/1 var(--font-ui);
    letter-spacing: .1em;
    white-space: nowrap;
    transform: translateX(-50%);
  }
  .package-card.is-active {
    transform: translate3d(var(--detail-swipe-x, 0px), 0, 0);
    transition: transform 240ms var(--ease-soft), opacity 360ms ease;
  }
}

/* Detail cards begin together with the hand selection: the old page folds
   away and the new one reveals downward like a softly unrolling scroll. */
.package-card.is-rolling-out {
  transform-origin: top center;
  animation: package-scroll-close 280ms var(--ease-soft) both !important;
}

@keyframes package-scroll-close {
  from { opacity: 1; transform: translateY(0) scaleY(1); clip-path: inset(0 0 0 0); }
  to { opacity: .16; transform: translateY(14px) scaleY(.92); clip-path: inset(0 0 92% 0); }
}

@media (prefers-reduced-motion: reduce) {
  .package-card.is-rolling-out { animation: none !important; }
}

@keyframes plan-card-content-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes plan-hand-left-cue { 50% { transform: translate3d(-8px, -.45rem, -25px) rotate(-11deg) scale(.95); } }
@keyframes plan-hand-right-cue { 50% { transform: translate3d(8px, -.45rem, -25px) rotate(10deg) scale(.95); } }

@media (min-width: 768px) {
  .plan-card.is-left-back,
  .plan-card.is-right-back,
  .plan-card.is-hidden-back { opacity: .82; filter: saturate(.92); transform: translateY(6px) scale(.96); }
  .plan-card.is-active { opacity: 1; transform: translateY(-6px) scale(1); }
  .environment-marquee__group { gap: 20px; padding-right: 20px; }
  .environment-marquee .gallery-item { width: min(39vw, 520px); min-width: min(39vw, 520px); min-height: 520px; }
  .environment-marquee .gallery-item:nth-child(2) { width: min(27vw, 360px); min-width: min(27vw, 360px); }
  .environment-marquee .gallery-item:nth-child(3) { width: min(46vw, 620px); min-width: min(46vw, 620px); }
  .environment-marquee .gallery-item:nth-child(4) { width: min(30vw, 410px); min-width: min(30vw, 410px); }
}

@media (prefers-reduced-motion: reduce) {
  .environment-marquee { overflow-x: auto; scrollbar-width: thin; }
  .environment-marquee__track { transform: none !important; }
  .environment-marquee__group[aria-hidden="true"] { display: none; }
  .environment-marquee .gallery-item { animation: none !important; }
  .plan-card { transition: none !important; animation: none !important; }
}

/* 25 Header actions and stacked plan-detail layers */
/* The compact controls are intentionally icons: the moon opens navigation,
   while the paper-plane keeps the original Telegram reservation destination. */
.site-header .brand {
  display: none;
}

.site-header .menu-toggle,
.site-header .telegram-top {
  position: absolute;
  top: 50%;
  display: grid !important;
  width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: currentColor;
  background: rgba(255, 250, 247, .22);
  transform: translateY(-50%);
}

.site-header .menu-toggle {
  left: max(16px, env(safe-area-inset-left));
}

.site-header .menu-toggle span {
  font-family: var(--font-title);
  font-size: 1.34rem;
  line-height: 1;
}

.site-header .telegram-top {
  right: max(16px, env(safe-area-inset-right));
}

.site-header .telegram-top span {
  display: none;
}

.site-header .telegram-top svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* The former previous/next arrows are deliberately removed.  The three dots
   remain as passive state feedback; cards and detail layers are the controls. */
.plan-carousel-controls > button {
  display: none !important;
}

.plan-carousel-controls {
  min-height: 14px;
}

.plan-sticky-bar a:last-child,
.plan-sticky-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.plan-card .plan-reserve-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

@media (max-width: 767px) {
  .package-showcase {
    position: relative;
    isolation: isolate;
    overflow: visible;
    padding: 2.25rem 12px 0;
  }

  .js .package-showcase .package-card {
    display: block;
  }

  .js .package-showcase .package-card.is-active {
    position: relative;
    z-index: 4;
    width: 100%;
    margin: 0;
  }

  .js .package-showcase .package-card.is-detail-back {
    position: absolute;
    top: .65rem;
    z-index: 1;
    display: block;
    width: calc(100% - 36px);
    height: 7rem;
    min-height: 0;
    overflow: hidden;
    padding: 1rem 1.15rem;
    pointer-events: none;
    opacity: .82;
    filter: saturate(.82);
    box-shadow: 0 12px 26px rgba(160, 77, 108, .14);
    transition: transform 420ms var(--ease-soft), opacity 320ms ease;
  }

  .js .package-showcase .package-card.is-detail-back .package-head {
    display: block;
    padding: 0;
    border: 0;
  }

  .js .package-showcase .package-card.is-detail-back .package-kicker,
  .js .package-showcase .package-card.is-detail-back .package-meta,
  .js .package-showcase .package-card.is-detail-back .package-story-wrap,
  .js .package-showcase .package-card.is-detail-back .text-toggle,
  .js .package-showcase .package-card.is-detail-back .package-tags,
  .js .package-showcase .package-card.is-detail-back .package-project-label,
  .js .package-showcase .package-card.is-detail-back .package-project-list {
    display: none;
  }

  .js .package-showcase .package-card.is-detail-back .package-price {
    display: block;
    margin: 0;
  }

  .js .package-showcase .package-card.is-detail-back .package-price strong {
    font-size: 3.15rem;
    line-height: .72;
    opacity: .18;
  }

  .js .package-showcase .package-card.is-detail-back .package-price span {
    display: none;
  }

  .js .package-showcase .package-card.is-detail-back .package-title {
    position: absolute;
    top: .95rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.15;
    opacity: .72;
  }

  .js .package-showcase .package-card.is-detail-left {
    left: -2px;
    transform: rotate(-2.4deg) translateX(-10px);
  }

  .js .package-showcase .package-card.is-detail-right {
    right: -2px;
    transform: rotate(2.4deg) translateX(10px);
  }

  .js .package-showcase .package-card.is-detail-far {
    z-index: 0;
    top: 1.1rem;
    opacity: .58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .package-showcase .package-card.is-detail-back,
  .js .package-showcase .package-card.is-active {
    transition: none;
    animation: none;
  }
}

/* 26 Low-bandwidth and mobile frame-budget safeguards */
/* Keep the Chinese currency unit attached to its number in the detailed card. */
.package-price {
  display: flex;
  flex-flow: row nowrap;
  align-items: baseline;
  gap: 0 .38rem;
  white-space: nowrap;
}

.package-price strong,
.package-price span {
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  /* Telegram Android composites separately-scaled copies of the same scene
     poorly: the old main/mid copies produced a visible double image while a
     finger moved. On phones the depth comes from the real foreground petals,
     light and titles instead of a second full-size photograph. */
  .stage-layer--background {
    filter: none;
  }

  .stage-layer--main,
  .stage-layer--mid {
    display: none;
  }

  .stage-layer--foreground {
    opacity: calc(.12 + var(--camera-push) * .11);
  }

  /* Animating a large clip-path is a common source of dropped frames in
     Telegram's Custom Tab. A lighter full-stage veil keeps the transition
     without the tremble. */
  .stage-transition-veil {
    clip-path: none;
    opacity: calc(var(--veil-opacity) * .48);
  }

  .stage-petal--front {
    filter: none !important;
  }
}

/* Telegram tablets and several Android emulators report a 768px+ layout but
   still composite like a phone. Keep one photographic plane on every coarse
   touch device so two scaled copies never shimmer during a drag. */
@media (hover: none) and (pointer: coarse) {
  .stage-layer--background {
    filter: none;
    transform: translate3d(var(--bg-x), var(--bg-y), 0) scale(var(--bg-scale));
  }

  .stage-layer--main,
  .stage-layer--mid { display: none; }

  .stage-transition-veil {
    clip-path: none;
    opacity: calc(var(--veil-opacity) * .42);
  }

  .stage-petal--front { filter: none !important; }

  /* The post-intro background is intentionally a single stable bitmap on
     Android. Transform-only movement is reliable; animating blur/brightness
     on a viewport-sized fixed image is not. */
  .water-story-layer img {
    filter: none !important;
    will-change: transform;
  }
}

/* 27 Letter envelope and paper reader */
.letter-card.is-envelope-ready > .eyebrow,
.letter-card.is-envelope-ready > h2,
.letter-card.is-envelope-ready > .letter-text {
  display: none;
}

.letter-card.is-envelope-ready {
  display: grid;
  min-height: min(46svh, 23rem);
  place-items: center;
}

/* Keep the letter as a small interlude between the surrounding scenes,
   rather than another full-height chapter. */
#letter {
  padding-block: clamp(3rem, 10vw, 4.75rem);
}

.letter-envelope {
  position: relative;
  width: min(100%, 31rem);
  min-height: clamp(14.75rem, 49vw, 19rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 242, .86);
  border-radius: 4px 4px 1.35rem 1.35rem;
  color: #74364d;
  background: linear-gradient(145deg, #fffaf2, #f4ced7 75%);
  box-shadow: 0 1.35rem 3.5rem rgba(82, 35, 53, .24);
  cursor: pointer;
  isolation: isolate;
}

.letter-envelope::before,
.letter-envelope::after {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 66%;
  content: "";
  background: linear-gradient(142deg, rgba(255, 248, 242, .94), rgba(237, 177, 194, .9));
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
}

.letter-envelope::after {
  background: linear-gradient(215deg, rgba(252, 224, 229, .94), rgba(232, 159, 181, .88));
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  opacity: .76;
}

.letter-envelope__paper-preview {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 11%;
  width: 78%;
  height: 70%;
  padding: 1.35rem 1.1rem;
  color: #9e6576;
  background: repeating-linear-gradient(180deg, transparent 0 1.72rem, rgba(177, 107, 129, .16) 1.76rem 1.8rem), #fffdf8;
  font-family: "Yuko Letter Xia", var(--font-title);
  font-size: clamp(1.25rem, 5vw, 1.8rem);
  line-height: 1.45;
  transform: rotate(-2deg);
}

.letter-envelope__flap {
  position: absolute;
  z-index: 4;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 63%;
  background: linear-gradient(155deg, #f9dce2, #e9aebe);
  clip-path: polygon(0 0, 100% 0, 50% 88%);
}

.letter-envelope__seal {
  position: absolute;
  z-index: 5;
  top: 49%;
  left: 50%;
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  place-items: center;
  border: 1px solid rgba(255, 248, 242, .82);
  border-radius: 50%;
  color: #fff9f2;
  background: #b4637b;
  font-family: var(--font-title);
  font-size: 1.35rem;
  transform: translate(-50%, -50%);
  box-shadow: 0 .35rem .8rem rgba(108, 49, 68, .2);
}

.letter-envelope__label {
  position: absolute;
  z-index: 6;
  right: 1.1rem;
  bottom: 1.05rem;
  left: 1.1rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  color: #8b4d63;
}

.letter-envelope__label small { font: .58rem/1 var(--font-ui); letter-spacing: .16em; }
.letter-envelope__label b { font: 400 1.05rem/1 "Yuko Letter Xia", var(--font-title); }

.reader-overlay {
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(2rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
  overflow: hidden;
  color: #74364d;
  background: radial-gradient(circle at 77% 13%, rgba(255, 253, 244, .72), transparent 21%), linear-gradient(145deg, rgba(249, 222, 232, .68), rgba(255, 249, 245, .72)), url("assets/images/letter/letter-envelope-background.webp") center / cover no-repeat;
}

.reader-overlay.is-open { display: grid; }

.reader-envelope-stage {
  position: relative;
  width: min(94vw, 39rem);
  height: min(82svh, 46rem);
  perspective: 1100px;
}

.reader-envelope-shell,
.reader-envelope-shell__front,
.reader-envelope-shell__flap {
  position: absolute;
  inset: 0;
}

.reader-envelope-shell {
  z-index: 1;
  top: 18%;
  height: 56%;
  border-radius: .35rem  .35rem 1.3rem 1.3rem;
  background: #f1b8c8;
  box-shadow: 0 1.6rem 4rem rgba(105, 49, 69, .23);
  transform-style: preserve-3d;
}

.reader-envelope-shell__front {
  z-index: 2;
  background: linear-gradient(145deg, #fff2ef, #e6a5b7);
  clip-path: polygon(0 0, 50% 59%, 100% 0, 100% 100%, 0 100%);
}

.reader-envelope-shell__flap {
  z-index: 3;
  bottom: auto;
  height: 68%;
  background: linear-gradient(145deg, #f9dfe5, #df91a9);
  clip-path: polygon(0 0, 100% 0, 50% 92%);
  transform-origin: top;
  transition: transform 420ms var(--ease-soft);
  backface-visibility: hidden;
}

.reader-paper {
  position: absolute;
  z-index: 2;
  top: 8%;
  right: 7%;
  bottom: 3%;
  left: 7%;
  padding: 1.4rem 1.25rem 2.2rem;
  overflow-y: auto;
  border: 1px solid rgba(129, 75, 92, .17);
  border-radius: .2rem;
  color: #5e3a45;
  background: repeating-linear-gradient(180deg, transparent 0 2.1rem, rgba(169, 101, 122, .11) 2.15rem 2.18rem), #fffdf7;
  /* The ruling is part of the paper content: it travels with the text
     while the reader scrolls, instead of staying fixed behind it. */
  background-attachment: local;
  background-origin: content-box;
  box-shadow: 0 1.1rem 2.7rem rgba(98, 47, 65, .18);
  opacity: 0;
  transform: translate3d(0, 34%, 0) scale(.96);
  transition: transform 560ms var(--ease-soft), opacity 260ms ease 120ms;
}

.reader-paper .eyebrow { color: #a45d74; }
.reader-paper h2 {
  margin: .85rem 0 1.9rem;
  font-family: "Yuko Letter Xia", var(--font-title);
  font-size: clamp(2.2rem, 10vw, 4rem);
}
.reader-paper p {
  color: #66424d;
  font-family: "Yuko Letter Xia", var(--font-body);
  font-size: clamp(1.08rem, 4.65vw, 1.32rem);
  line-height: 1.92;
}
.reader-paper p + p { margin-top: 1.1rem; }
.reader-overlay__close { position: sticky; z-index: 4; top: 0; float: right; width: 2.7rem; height: 2.7rem; margin: -.55rem -.55rem .3rem .8rem; border: 1px solid rgba(132, 73, 92, .35); border-radius: 50%; color: #8a4d63; background: rgba(255, 252, 247, .92); cursor: pointer; }

.reader-overlay.is-open .reader-envelope-shell__flap { transform: rotateX(-176deg); }
.reader-overlay.is-letter-open .reader-paper { z-index: 5; opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reader-envelope-shell__flap,
  .reader-paper { transition: none; }
}

/* 28 Continuous Sakura Water Story
   One fixed composition is reframed through CSS variables instead of assigning
   an image to every section. Local veils preserve reading contrast while the
   same water world travels from afternoon bloom to night sakura and morning fog. */
body.water-story-enabled {
  background: #f8edf0;
}

.water-story-background {
  --water-x: 50%;
  --water-y: 50%;
  --water-scale: 1.12;
  --water-blur: 0px;
  --water-brightness: 1;
  --water-saturation: 1;
  --water-night: 0;
  --water-fog: 0;
  --water-opacity: 0;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  opacity: var(--water-opacity);
  /* The renderer already interpolates opacity. A second CSS transition can
     expose Android Telegram's backing surface on the first plans entry. */
  transition: none;
}

.water-story-layer,
.water-story-layer img,
.water-story-light,
.water-story-ripple,
.water-story-vignette,
.water-story-noise {
  position: absolute;
  inset: -7%;
}

.water-story-layer img {
  width: 114%;
  height: 114%;
  object-fit: cover;
  object-position: var(--water-x) var(--water-y);
  filter: blur(var(--water-blur)) brightness(var(--water-brightness)) saturate(var(--water-saturation));
  transform: scale(var(--water-scale));
  transform-origin: var(--water-x) var(--water-y);
  will-change: transform, filter;
}

.water-story-light {
  z-index: 2;
  background: radial-gradient(ellipse at 72% 17%, rgba(255, 252, 246, .64), transparent 25%), linear-gradient(180deg, rgba(255, 247, 249, .06), rgba(100, 67, 92, calc(var(--water-night) * .58)) 100%);
  mix-blend-mode: soft-light;
}

.water-story-vignette {
  z-index: 3;
  background: radial-gradient(ellipse at center, transparent 37%, rgba(93, 60, 80, calc(var(--water-night) * .38)) 100%), linear-gradient(180deg, rgba(255, 250, 249, calc(var(--water-fog) * .48)), rgba(255, 247, 248, calc(var(--water-fog) * .88)));
}

.water-story-noise {
  z-index: 4;
  opacity: .12;
  background-image: radial-gradient(rgba(255,255,255,.52) .55px, transparent .7px);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}

.water-story-ripple {
  z-index: 5;
  inset: 50% auto auto 50%;
  width: 12rem;
  height: 12rem;
  border: 1px solid rgba(255, 251, 252, .75);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
}

.water-story-background.is-rippling .water-story-ripple { animation: water-ripple 1.15s var(--ease-soft) both; }

@keyframes water-ripple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  16% { opacity: .62; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.9); }
}

body.water-story-enabled .section,
body.water-story-enabled .reserve,
body.water-story-enabled footer {
  position: relative;
  z-index: 1;
}

body.water-story-enabled #space,
body.water-story-enabled #letter,
body.water-story-enabled #about,
body.water-story-enabled #plans,
body.water-story-enabled #process,
body.water-story-enabled #privacy,
body.water-story-enabled #reserve,
body.water-story-enabled footer {
  background: transparent;
}

body.water-story-enabled #space,
body.water-story-enabled #about {
  background: linear-gradient(90deg, rgba(255, 251, 249, .78), rgba(255, 247, 248, .28) 62%, rgba(255, 248, 249, .58));
}

body.water-story-enabled .space-copy,
body.water-story-enabled #about .copy {
  padding: clamp(1.3rem, 4vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 1.6rem;
  background: radial-gradient(circle at 16% 0, rgba(255,255,255,.72), transparent 34%), rgba(255, 248, 248, .47);
  box-shadow: 0 1.4rem 4rem rgba(135, 81, 105, .10);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.water-story-enabled .space-copy,
  body.water-story-enabled #about .copy { backdrop-filter: blur(8px) saturate(1.04); }
}

body.water-story-enabled #letter {
  color: #694352;
  /* Before opening, let the shared cherry scene remain visible through a
     quiet translucent colour field instead of introducing a second photo. */
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, .43), transparent 58%),
    linear-gradient(180deg, rgba(255, 235, 242, .34), rgba(255, 250, 247, .56));
}

body.water-story-enabled #letter .letter-card {
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 1.6rem;
  background: linear-gradient(135deg, rgba(255, 254, 248, .72), rgba(255, 242, 246, .38));
  box-shadow: 0 1.7rem 4rem rgba(125, 70, 94, .16), 0 1.9rem 1.8rem rgba(255, 255, 255, .24);
}

body.water-story-enabled #about { overflow: clip; }
body.water-story-enabled #about .split { background: transparent; }
body.water-story-enabled #about .copy { margin-top: clamp(1rem, 8vw, 5rem); }

body.water-story-enabled #plans {
  isolation: isolate;
  color: #5d3948;
  background: radial-gradient(ellipse at 50% 18%, rgba(255, 252, 251, .6), rgba(244, 211, 223, .18) 55%, rgba(127, 78, 98, .22));
}

body.water-story-enabled #plans .plan-selector::after {
  position: absolute;
  z-index: -1;
  right: 7%;
  bottom: 4%;
  left: 7%;
  height: 17%;
  border-radius: 50%;
  content: "";
  opacity: .56;
  background: radial-gradient(ellipse, rgba(255,255,255,.72), transparent 68%);
  /* Keep this reflected glow composited as a simple gradient. Live blur is
     the main source of the first-entry flash on Android WebViews. */
  filter: none;
  transform: scaleX(1.08);
}

body.water-story-enabled #plans::after {
  position: absolute;
  z-index: 0;
  inset: 22% 8% auto;
  height: 14rem;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(.72);
}

body.water-story-enabled #plans > * {
  position: relative;
  z-index: 1;
}

body.water-story-enabled #plans.is-plan-switching::after {
  animation: plan-water-glow 520ms var(--ease-soft) both;
}

@keyframes plan-water-glow {
  0% { opacity: 0; transform: scale(.72); }
  26% { opacity: .38; }
  100% { opacity: 0; transform: scale(1.18); }
}

/* A second, very light wash gives each selected price its own moment without
   repainting the fixed photo or relying on blur/filter effects. */
body.water-story-enabled #plans.is-plan-switching {
  animation: plan-scene-wash 540ms var(--ease-soft) both;
}

@keyframes plan-scene-wash {
  0% { background-color: rgba(255, 250, 251, 0); }
  42% { background-color: rgba(255, 248, 252, .24); }
  100% { background-color: rgba(255, 250, 251, 0); }
}

body.water-story-enabled #plans .plan-card { box-shadow: 0 1.55rem 3.3rem rgba(136, 77, 103, .2); }
body.water-story-enabled #plans .plan-card.is-active { box-shadow: 0 2rem 4rem rgba(136, 77, 103, .28), inset 0 1px rgba(255,255,255,.92); }
body.water-story-enabled .package-showcase .package-card {
  border-color: rgba(255, 255, 255, .68);
  background: linear-gradient(145deg, rgba(255, 253, 249, .94), rgba(255, 244, 248, .84));
  box-shadow: 0 1.5rem 3.8rem rgba(126, 72, 95, .14);
}
body.water-story-enabled .package-showcase .package-card p,
body.water-story-enabled .package-showcase .package-card .package-meta { color: #715563; }

body.water-story-enabled #process {
  color: #714f5d;
  background: linear-gradient(180deg, rgba(255, 249, 247, .62), rgba(245, 220, 229, .54));
}

body.water-story-enabled #process .process-grid {
  position: relative;
  isolation: isolate;
}

body.water-story-enabled #process .process-grid::before {
  position: absolute;
  z-index: -1;
  top: 1.85rem;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 241, 220, .85), rgba(203, 155, 177, .7), transparent);
  transform: scaleX(var(--scene-progress, 0));
  transform-origin: left;
  transition: transform 900ms var(--ease-soft);
}

body.water-story-enabled #process .process-grid article { border-color: rgba(175, 105, 132, .22); }
body.water-story-enabled #process h2,
body.water-story-enabled #process .process-grid h3 { color: #744656; text-shadow: 0 1px 12px rgba(255, 251, 250, .72); }
body.water-story-enabled #process .center > p:last-child,
body.water-story-enabled #process .process-grid p { color: #866672; text-shadow: 0 1px 12px rgba(255, 251, 250, .8); }
body.water-story-enabled #process .process-grid article span { color: #b4627c; text-shadow: 0 1px 10px rgba(255, 251, 250, .72); }

body.water-story-enabled #privacy {
  color: #6b4d5b;
  background: radial-gradient(ellipse at 75% 15%, rgba(255, 255, 251, .72), transparent 35%), linear-gradient(180deg, rgba(246, 221, 230, .58), rgba(255, 249, 247, .78));
}

body.water-story-enabled #privacy .promise-intro { color: #866873; }
body.water-story-enabled #privacy .promise-cards article {
  border-color: rgba(190, 122, 147, .2);
  background: linear-gradient(145deg, rgba(255, 254, 251, .64), rgba(255, 239, 245, .44));
  box-shadow: 0 1.1rem 3rem rgba(123, 72, 94, .11);
}
body.water-story-enabled #privacy .promise-cards article h3,
body.water-story-enabled #privacy .promise-cards article span { color: #744a5a; }
body.water-story-enabled #privacy .promise-cards article p { color: #846671; }

body.water-story-enabled #reserve {
  color: #654453;
  background: radial-gradient(ellipse at center, rgba(255, 254, 250, .86), rgba(255, 244, 248, .36) 56%, rgba(255, 239, 245, .18));
}
body.water-story-enabled #reserve .reserve-panel { text-align: center; }
body.water-story-enabled #reserve .reserve-panel > p:not(.eyebrow),
body.water-story-enabled #reserve .contact-list a { color: #795463; }
body.water-story-enabled #reserve .contact-list { border-color: rgba(139, 84, 108, .18); }
body.water-story-enabled #reserve .btn { color: #fff9fb; background: #bf6d88; box-shadow: 0 1rem 2rem rgba(164, 85, 116, .22); }
body.water-story-enabled footer { color: #896675; background: rgba(255, 249, 248, .78); }

@media (min-width: 768px) {
  body.water-story-enabled #process .process-grid::before { top: 2.2rem; }
  body.water-story-enabled #about .copy { margin-left: clamp(2rem, 10vw, 12rem); }
}

@media (min-width: 1024px) {
  /* A desktop comparison remains fast to scan, but has the same hand-held
     depth as mobile rather than reading as a corporate three-column grid. */
  body.water-story-enabled #plans .plan-card.is-left-back {
    transform: translate3d(0, .9rem, 0) rotate(-1.5deg) scale(.985);
  }
  body.water-story-enabled #plans .plan-card.is-active {
    transform: translate3d(0, -1rem, 0) rotate(0) scale(1.025);
  }
  body.water-story-enabled #plans .plan-card.is-right-back {
    transform: translate3d(0, .9rem, 0) rotate(1.5deg) scale(.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .water-story-background { transition: none; }
  .water-story-layer img { transform: none; filter: none; }
  .water-story-background.is-rippling .water-story-ripple { animation: none; }
  body.water-story-enabled #process .process-grid::before { transform: scaleX(1); transition: none; }
}