:root {
  --ink: #f8f4e9;
  --muted: #a9afbc;
  --gold: #efbd58;
  --gold-deep: #9e6818;
  --night: #030811;
  --panel: rgba(11, 18, 31, 0.72);
  --line: rgba(255, 255, 255, 0.13);
  --mx: 68%;
  --my: 38%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 999;
  transform: translateY(-180%);
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #111;
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 88px;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem);
  transition: background 260ms ease, border-color 260ms ease, height 260ms ease;
}
.site-header.scrolled {
  height: 72px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(3, 8, 17, .78);
  backdrop-filter: blur(18px) saturate(125%);
}
.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: .7rem;
  width: max-content;
  color: #fff;
  font-weight: 650;
  letter-spacing: -.025em;
  text-decoration: none;
}
.brand-mark { width: 28px; height: 28px; fill: var(--gold); filter: drop-shadow(0 0 10px rgba(239,189,88,.35)); }
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  padding: .55rem 1.35rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(3,8,17,.32);
  backdrop-filter: blur(12px);
}
.desktop-nav a {
  position: relative;
  color: rgba(255,255,255,.68);
  font-size: .88rem;
  text-decoration: none;
  transition: color 180ms ease;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.67rem;
  width: 0;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 180ms ease;
}
.desktop-nav a:hover, .desktop-nav a.active { color: #fff; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { width: 100%; }
.header-cta {
  justify-self: end;
  padding: .72rem 1.3rem;
  border: 1px solid rgba(239,189,88,.35);
  border-radius: 999px;
  background: rgba(162,104,23,.16);
  color: #f7d894;
  font-size: .84rem;
  font-weight: 650;
  text-decoration: none;
  box-shadow: inset 0 0 22px rgba(239,189,88,.05);
  transition: transform 180ms ease, background 180ms ease;
}
.header-cta:hover { transform: translateY(-2px); background: rgba(162,104,23,.28); }
.menu-button, .mobile-menu { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 73% 45%, rgba(113,72,25,.22), transparent 34%),
    radial-gradient(circle at 22% 32%, rgba(19,47,93,.20), transparent 31%),
    linear-gradient(110deg, #02060d 0%, #040b18 48%, #030711 100%);
}
.star-field {
  position: absolute;
  inset: 0;
  z-index: -6;
  opacity: .9;
  background-image:
    radial-gradient(circle, rgba(255,231,174,.92) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(167,204,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.45) 0 .7px, transparent 1px);
  background-size: 157px 149px, 239px 211px, 83px 97px;
  background-position: 12px 17px, 58px 31px, 27px 48px;
  mask-image: linear-gradient(to right, #000, rgba(0,0,0,.78));
}
.aurora {
  position: absolute;
  z-index: -5;
  width: 58vw;
  height: 28vw;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .18;
  transform: rotate(-20deg);
  pointer-events: none;
}
.aurora-one { top: 4%; right: 4%; background: #345aa1; }
.aurora-two { right: 18%; bottom: -12%; background: #c1762e; opacity: .12; }

.hero-art {
  position: absolute;
  z-index: -3;
  top: 0;
  right: -2vw;
  width: min(65vw, 990px);
  height: 100%;
  transform: translate3d(var(--art-x, 0), var(--art-y, 0), 0) scale(1.045);
  transform-origin: 60% 46%;
  will-change: transform;
}
.hero-art picture, .hero-art img { display: block; width: 100%; height: 100%; }
.hero-art img {
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.02);
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.08) 4%, #000 24%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.08) 4%, #000 24%, #000 92%, transparent 100%);
}
.art-bloom {
  position: absolute;
  inset: 5% 8% 12% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 51% 40%, rgba(255,205,104,.28), rgba(208,116,32,.06) 37%, transparent 68%);
  filter: blur(32px);
  animation: breathe 5.8s ease-in-out infinite;
}
.cursor-light {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(460px circle at var(--mx) var(--my), rgba(248,196,94,.10), transparent 68%);
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(2,6,13,.96) 0%, rgba(2,6,13,.83) 31%, rgba(2,6,13,.25) 55%, rgba(2,6,13,.04) 77%),
    linear-gradient(to top, rgba(1,4,9,.66), transparent 36%);
}
#petal-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(47rem, 52vw);
  height: 100%;
  padding: 8rem 0 5rem clamp(2rem, 7vw, 7.2rem);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.4rem;
  color: #d4a74c;
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .22em;
}
.eyebrow span { width: 2rem; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); }
.hero h1 {
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  font-weight: 400;
  font-size: clamp(4rem, 6.6vw, 7rem);
  line-height: .98;
  letter-spacing: -.07em;
  text-shadow: 0 10px 45px rgba(0,0,0,.38);
}
.hero h1 span, .hero h1 em { display: block; font-style: normal; }
.hero h1 span { color: #f5f0e5; }
.hero h1 em {
  margin-top: .2em;
  color: transparent;
  background: linear-gradient(100deg, #f6d67e 0%, #d79a35 55%, #f7db8c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 7px 24px rgba(208,134,31,.18));
}
.hero-lead {
  max-width: 36rem;
  margin: 2rem 0 0;
  color: rgba(226,230,238,.68);
  font-size: clamp(.98rem, 1.2vw, 1.14rem);
  line-height: 1.9;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 48px;
  padding: .82rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.button:hover { transform: translateY(-2px); }
.button-primary {
  background: linear-gradient(110deg, #f4c969, #d8942c);
  color: #221304;
  box-shadow: 0 14px 40px rgba(216,148,44,.22);
}
.button-primary:hover { box-shadow: 0 18px 50px rgba(216,148,44,.34); }
.button-secondary {
  border-color: rgba(255,255,255,.2);
  background: rgba(8,13,23,.42);
  color: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
}
.button-secondary:hover { border-color: rgba(239,189,88,.45); background: rgba(15,21,33,.67); }

.scroll-hint {
  position: absolute;
  z-index: 11;
  left: clamp(2rem, 7vw, 7.2rem);
  bottom: max(1.6rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  color: rgba(255,255,255,.52);
  font-size: .72rem;
  letter-spacing: .08em;
  text-decoration: none;
}
.scroll-hint svg { width: 20px; fill: none; stroke: var(--gold); stroke-width: 1.4; animation: drift-down 1.8s ease-in-out infinite; }
.side-progress {
  position: absolute;
  z-index: 12;
  right: clamp(1rem, 2.5vw, 2.6rem);
  top: 43%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.side-progress::before { content: ""; position: absolute; top: 0; bottom: 3rem; width: 1px; background: rgba(255,255,255,.22); }
.side-progress i { position: relative; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background: #d7dbe4; }
.side-progress i:first-child { width: 9px; height: 9px; background: var(--gold); box-shadow: 0 0 18px rgba(239,189,88,.7); }
.side-progress span { margin-top: .2rem; color: rgba(255,255,255,.35); font-size: .56rem; letter-spacing: .38em; writing-mode: vertical-rl; }

.section {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.4rem, 7vw, 7.2rem);
  background: #050a12;
}
.section-intro { border-top: 1px solid rgba(255,255,255,.07); }
.section-kicker { margin-bottom: 1.25rem; color: var(--gold); font-size: .8rem; letter-spacing: .2em; }
.section h2 {
  max-width: 60rem;
  margin: 0;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  font-size: clamp(2rem, 4.2vw, 4.6rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.045em;
}
.section-intro > p { max-width: 48rem; margin: 1.5rem 0 0; color: var(--muted); line-height: 1.8; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 4rem;
}
.feature-card {
  min-height: 260px;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.feature-card > span { color: #8d7240; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.feature-card h3 { margin: 5rem 0 .8rem; font-size: 1.35rem; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.75; }
.section-quote {
  display: flex;
  min-height: 68vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(193,122,30,.18), transparent 28%),
    #03070e;
}
.quote-mark { height: 4rem; color: rgba(239,189,88,.35); font-family: Georgia, serif; font-size: 7rem; line-height: 1; }
blockquote { margin: 1rem 0; font-family: "Songti SC", "STSong", serif; font-size: clamp(2.2rem, 5vw, 5.2rem); font-weight: 400; }
.section-quote p { margin: .3rem 0 2.2rem; color: var(--muted); }
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem clamp(1.4rem, 7vw, 7.2rem);
  border-top: 1px solid rgba(255,255,255,.08);
  background: #02050a;
  color: rgba(255,255,255,.45);
  font-size: .8rem;
}
.footer-brand { color: rgba(255,255,255,.72); }
.footer-brand .brand-mark { width: 22px; height: 22px; }

@keyframes breathe { 0%,100% { opacity:.72; transform:scale(.96); } 50% { opacity:1; transform:scale(1.04); } }
@keyframes drift-down { 0%,100% { transform:translateY(0); } 50% { transform:translateY(7px); } }

@media (max-width: 1000px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-cta { display: none; }
  .menu-button {
    display: grid;
    place-content: center;
    justify-self: end;
    gap: 6px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(3,8,17,.35);
    color: #fff;
  }
  .menu-button span { display:block; width:18px; height:1px; background:currentColor; transition:transform 180ms ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu {
    position: absolute;
    top: calc(100% + .7rem);
    right: 1.25rem;
    display: grid;
    width: min(280px, calc(100vw - 2.5rem));
    padding: .7rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    background: rgba(4,9,17,.94);
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  }
  .mobile-menu.open { opacity:1; visibility:visible; transform:none; }
  .mobile-menu a { padding:.85rem 1rem; border-radius:12px; color:rgba(255,255,255,.76); text-decoration:none; }
  .mobile-menu a:hover { background:rgba(255,255,255,.06); color:#fff; }
  .mobile-menu .mobile-cta { margin-top:.35rem; background:linear-gradient(110deg,#f4c969,#d8942c); color:#261504; text-align:center; font-weight:700; }
}

@media (max-width: 759px) {
  .site-header { height: 72px; padding: 0 1rem; }
  .brand { font-size: .9rem; }
  .brand-mark { width: 24px; height: 24px; }
  .hero { min-height: 100svh; height: auto; padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
  .hero-art {
    top: 0;
    right: 0;
    width: 100%;
    height: 78svh;
    transform: translate3d(var(--art-x, 0), var(--art-y, 0), 0) scale(1.025);
  }
  .hero-art img {
    object-position: center top;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 63%, rgba(0,0,0,.65) 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 63%, rgba(0,0,0,.65) 75%, transparent 100%);
  }
  .hero-vignette {
    background:
      linear-gradient(to bottom, rgba(2,6,13,.08) 0%, rgba(2,6,13,.08) 42%, rgba(2,6,13,.72) 65%, #02060d 82%),
      linear-gradient(to right, rgba(2,6,13,.18), transparent 55%);
  }
  .cursor-light, .side-progress { display: none; }
  .hero-content {
    justify-content: flex-end;
    width: 100%;
    min-height: 100svh;
    height: auto;
    padding: 64svh 1.2rem 5.8rem;
  }
  .eyebrow { margin-bottom:.9rem; font-size:.68rem; letter-spacing:.16em; }
  .hero h1 { font-size: clamp(3rem, 16vw, 4.8rem); line-height: .96; }
  .hero-lead { margin-top:1.2rem; font-size:.9rem; line-height:1.75; }
  .hero-actions { gap:.65rem; margin-top:1.35rem; }
  .button { min-height:44px; padding:.72rem 1.1rem; font-size:.8rem; }
  .scroll-hint { left:1.25rem; bottom:1.1rem; font-size:.62rem; }
  .section { padding:5rem 1.2rem; }
  .feature-grid { grid-template-columns:1fr; margin-top:2.5rem; }
  .feature-card { min-height:210px; }
  .feature-card h3 { margin-top:3.2rem; }
  footer { align-items:flex-start; flex-direction:column; gap:1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #petal-canvas { display:none; }
  .hero-art { transform:none !important; }
}

/* Rotating aureole overlay -------------------------------------------------
   The detailed Buddha remains a lightweight pre-rendered WebP. These two
   transparent SVG annuli add real motion without loading a 3D model, video,
   or another raster asset. Only transform/opacity are animated. */
.rotating-halo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 30.2%;
  width: min(42vw, 62vh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  isolation: isolate;
  contain: layout paint;
  opacity: .78;
  mix-blend-mode: screen;
  /* Keep the overlay in the aureole band so no animated line crosses the face. */
  -webkit-mask-image: radial-gradient(circle, transparent 0 51%, #000 58% 100%);
  mask-image: radial-gradient(circle, transparent 0 51%, #000 58% 100%);
}
.halo-disc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform;
}
.halo-stroke {
  fill: none;
  stroke: rgba(255, 205, 101, .76);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.halo-stroke-inner { stroke: rgba(255, 232, 162, .58); }
.halo-disc-outer { animation: halo-rotate-clockwise 54s linear infinite; }
.halo-disc-inner { animation: halo-rotate-counter 37s linear infinite; }
.rotating-halo::before,
.rotating-halo::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  pointer-events: none;
}
.rotating-halo::before {
  border: 1px solid rgba(255, 212, 116, .34);
  box-shadow:
    0 0 10px rgba(255, 208, 105, .24),
    inset 0 0 12px rgba(255, 222, 146, .14);
}
.rotating-halo::after {
  inset: 23%;
  border: 1px dashed rgba(255, 237, 181, .28);
  animation: halo-rotate-counter 25s linear infinite;
}
.motion-paused .halo-disc,
.motion-paused .rotating-halo::after { animation-play-state: paused; }

@keyframes halo-rotate-clockwise {
  to { transform: rotate(360deg); }
}
@keyframes halo-rotate-counter {
  to { transform: rotate(-360deg); }
}

@media (max-width: 759px) {
  .rotating-halo {
    top: 31.2%;
    width: 82vw;
    opacity: .68;
    -webkit-mask-image: radial-gradient(circle, transparent 0 53%, #000 60% 100%);
    mask-image: radial-gradient(circle, transparent 0 53%, #000 60% 100%);
  }
  .halo-disc-outer { animation-duration: 66s; }
  .halo-disc-inner { animation-duration: 46s; }
}

@media (prefers-reduced-motion: reduce) {
  .halo-disc,
  .rotating-halo::after { animation: none !important; }
  .rotating-halo { opacity: .52; }
}


/* v7 — unified max-width scene and independent visual layers ----------------
   The ambient hero remains full-bleed so ultra-wide displays never expose a
   hard vertical boundary. All art, copy and controls live inside a centered
   1920px frame. River, aureole backdrop and Buddha/lotus foreground are
   independent assets and share one responsive coordinate system. */
:root {
  --page-max: 1920px;
  --content-max: 1440px;
  --frame-gutter: clamp(1.25rem, 4vw, 4.5rem);
}

body {
  background: #030811;
}

.site-header {
  left: 50%;
  right: auto;
  width: min(100%, var(--page-max));
  max-width: var(--page-max);
  transform: translateX(-50%);
}

.hero {
  width: 100%;
  max-width: none;
  margin: 0;
  background:
    radial-gradient(circle at 71% 38%, rgba(43, 72, 126, .20), transparent 32%),
    radial-gradient(circle at 74% 72%, rgba(154, 91, 31, .13), transparent 31%),
    radial-gradient(circle at 16% 28%, rgba(12, 38, 76, .18), transparent 34%),
    linear-gradient(110deg, #02060d 0%, #040b18 48%, #030711 100%);
}

.hero-frame {
  position: relative;
  width: min(100%, var(--page-max));
  max-width: var(--page-max);
  height: 100%;
  margin-inline: auto;
}

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Continuous procedural water remains beneath the photographic river layer,
   filling its feathered edges and the outer portion of ultra-wide screens. */
.hero-stage .water-plane {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(230px, 34vh, 390px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 68% 112%, rgba(231, 151, 42, .25), transparent 43%),
    radial-gradient(ellipse at 27% 110%, rgba(218, 143, 42, .14), transparent 46%),
    linear-gradient(to bottom, rgba(3, 10, 20, 0), rgba(4, 13, 24, .58) 28%, #030811 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 22%, #000 52% 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 22%, #000 52% 100%);
}
.hero-stage .water-plane::before {
  content: "";
  position: absolute;
  inset: 20% -4% -10%;
  opacity: .48;
  background:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(242,190,91,.06) 8px, transparent 9px 16px),
    linear-gradient(90deg, transparent 0 7%, rgba(234,168,64,.11) 14%, transparent 22% 34%, rgba(248,199,102,.09) 41%, transparent 52% 62%, rgba(220,139,38,.10) 69%, transparent 80% 100%);
  filter: blur(.35px);
  transform: perspective(480px) rotateX(64deg) scaleY(1.75);
  transform-origin: center bottom;
}

.river-background {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  filter: saturate(1.035) contrast(1.015);
}
.river-background img {
  display: block;
  width: 100%;
  height: auto;
}

/* Buddha group: static star/mandala backdrop -> rotating SVG aureole ->
   clean transparent Buddha and lotus foreground. */
.buddha-group {
  position: absolute;
  z-index: 3;
  right: 4.5%;
  bottom: -1.5%;
  width: min(61%, 102dvh, 1125px);
  aspect-ratio: 900 / 850;
  transform: translate3d(var(--art-x, 0), var(--art-y, 0), 0);
  transform-origin: 58% 46%;
  will-change: transform;
  isolation: isolate;
}
.buddha-backdrop,
.buddha-foreground {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.buddha-backdrop { z-index: 0; }
.buddha-foreground {
  z-index: 3;
  filter: saturate(1.035) contrast(1.015) drop-shadow(0 0 10px rgba(243,184,75,.08));
}
.buddha-group .rotating-halo {
  z-index: 2;
  top: 30.2%;
  width: 72%;
}
.buddha-group .art-bloom {
  z-index: 1;
  inset: 7% 7% 8%;
}

#water-canvas,
#petal-canvas {
  left: 50%;
  right: auto;
  width: min(100%, var(--page-max));
  max-width: var(--page-max);
  transform: translateX(-50%);
}
#water-canvas {
  position: absolute;
  inset-block: 0;
  z-index: 6;
  height: 100%;
  pointer-events: none;
}
#petal-canvas { z-index: 8; }

.hero-vignette {
  z-index: 7;
  background:
    linear-gradient(to right, rgba(2,6,13,.97) 0%, rgba(2,6,13,.84) 29%, rgba(2,6,13,.28) 52%, rgba(2,6,13,.03) 76%),
    linear-gradient(to top, rgba(1,4,9,.48), transparent 34%);
}

.hero-content {
  z-index: 10;
  width: min(47rem, 50%);
  padding-left: clamp(2rem, 5.6vw, 6.7rem);
}

/* The cue is a real absolutely positioned page element. It is no longer baked
   into the river image and therefore stays crisp and aligned at every width. */
.scroll-hint {
  left: clamp(2rem, 5.6vw, 6.7rem);
  bottom: max(1.35rem, env(safe-area-inset-bottom));
  z-index: 12;
}
.side-progress {
  right: clamp(1rem, 2.3vw, 2.75rem);
}

/* Section backgrounds remain full-width; actual page content is capped and
   centered on screens two and three. */
.section {
  width: 100%;
  padding-inline: clamp(1.4rem, 4.5vw, 5rem);
}
.section-inner {
  width: min(100%, var(--content-max));
  margin-inline: auto;
}
.section-intro .section-inner > p {
  max-width: 48rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  line-height: 1.8;
}
.section-quote {
  display: block;
  min-height: 68vh;
}
.section-quote .section-inner {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
footer {
  display: block;
  padding-inline: clamp(1.4rem, 4.5vw, 5rem);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, var(--content-max));
  margin-inline: auto;
}

@media (min-width: 1921px) {
  /* The scene stops growing at 1920px, while ambient gradients continue across
     the viewport. Feathered river/backdrop edges prevent a visible boundary. */
  .hero {
    box-shadow: inset 0 0 190px rgba(0,0,0,.18);
  }
}

@media (max-width: 1180px) {
  .buddha-group {
    right: -2%;
    width: min(66%, 101dvh, 950px);
  }
  .hero-content { width: 52%; }
}

@media (max-width: 759px) {
  .site-header { width: 100%; }
  .hero-frame { width: 100%; }
  .hero-stage { inset: 0; }
  .hero-stage .water-plane,
  .river-background,
  #water-canvas { display: none; }

  .buddha-group {
    top: 3.5svh;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(142vw, 620px);
    transform: translate3d(calc(-50% + var(--art-x, 0)), var(--art-y, 0), 0);
  }
  .buddha-group .rotating-halo {
    top: 30.2%;
    width: 72%;
  }
  .hero-content {
    width: 100%;
    min-height: 100svh;
    height: auto;
    padding: 61svh 1.2rem 5.8rem;
  }
  .scroll-hint {
    left: 1.2rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
  #petal-canvas { width: 100%; }
  .section { padding-inline: 1.2rem; }
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buddha-group { transform: none !important; }
  #water-canvas { display: none; }
}

/* v7.1 mobile centering correction */
@media (max-width: 759px) {
  .buddha-group {
    width: min(132vw, 580px);
    transform: translateX(-50%) translate3d(var(--art-x, 0px), var(--art-y, 0px), 0);
  }
}

/* v7.2 soften the baked centre of the source river beneath the independent
   Buddha group without punching a transparent hole into the water. */
.river-background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 72% at 58% 8%, rgba(3,8,17,.94) 0%, rgba(3,8,17,.78) 34%, rgba(3,8,17,.26) 62%, transparent 82%);
}

/* v7.3 final river composition: left-bank river/lotus photography only.
   The centre and right water are procedural, so no baked Buddha base or sound
   control can reappear beneath the independent foreground group. */
.river-background::after { display: none; }