/* Tiếng Việt @ Brown · culture layer (homepage only)
   Additive, decorative motion that sits behind or beside existing content.
   Palette: the existing tokens from style.css plus one lacquer gold (sơn mài).
   Every rule is scoped to .cx (added by culture.js), so without JS nothing changes. */

:root {
  --cx-gold: #d6a24e;
  --cx-light: #ffe2b0;
}

/* hosts: a positioning context so decorations can sit behind content (no layout change) */
.cx .tones,
.cx .quick,
.cx .footer { position: relative; isolation: isolate; }
.cx .mission-sticky,
.cx .journey-sticky { isolation: isolate; }

.cx-layer {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.cx-layer svg { display: block; }
/* pause every looping detail while its section is off screen */
.cx-layer:not(.cx-on) *,
.cx-layer:not(.cx-on) *::before,
.cx-layer:not(.cx-on) *::after { animation-play-state: paused !important; }

/* =========================================================
   2 · MISSION: bamboo grows while the words light up
   ========================================================= */
.cx-bamboo {
  position: absolute; right: 0; bottom: 0;
  width: clamp(80px, 9vw, 150px); height: auto; max-height: 86vh; overflow: visible;
}
.cx-stalk { stroke-linecap: round; }
.cx-node, .cx-leaf, .cx-shoot { transform-box: fill-box; }
.cx-node { transform-origin: center; }
.cx-leaf { transform-origin: 0 50%; fill-opacity: .8; }
.cx-shoot { transform-origin: 50% 100%; }
.cx-live .cx-stalk,
.cx-live .cx-twig { stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
.cx-live .cx-twig { transition: stroke-dashoffset .35s ease-out; }
.cx-live .cx-node { transform: scaleX(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.cx-live .cx-leaf {
  transform: rotate(-16deg) scale(0);
  transition: transform .8s cubic-bezier(.3, 1.5, .5, 1) calc(var(--d, 0ms) + 120ms);
}
.cx-live .cx-tuft.on .cx-twig { stroke-dashoffset: 0; }
.cx-live .cx-tuft.on .cx-node,
.cx-live .cx-tuft.on .cx-leaf { transform: none; }
.cx-live .cx-shoot { transform: scale(.3, 0); transition: transform .9s cubic-bezier(.3, 1.5, .5, 1); }
.cx-live .cx-done .cx-shoot { transform: none; }

.cx-proverb {
  position: absolute; bottom: 2.2rem; right: calc(clamp(80px, 9vw, 150px) * .62);
  text-align: right; color: var(--rose);
}
.cx-proverb span { display: block; font-family: var(--script); font-size: 1.5rem; line-height: 1; }
.cx-proverb small {
  display: block; margin-top: .4rem; font-family: var(--sans); font-size: .66rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--red); opacity: .75;
}
.cx-live .cx-proverb { opacity: 0; transform: translateY(10px); transition: opacity .9s, transform .9s cubic-bezier(.2, .8, .2, 1); }
.cx-live .cx-done .cx-proverb { opacity: 1; transform: none; }
@media (max-width: 767px) {
  /* phones: a real clump of bamboo in the right gutter, not a thin strip */
  .cx-bamboo { width: 64px; right: -6px; opacity: .62; max-height: 19vh; max-height: 19svh; }
  .cx-proverb { display: none; }
}
@media (max-width: 767px) and (min-height: 700px) {
  .cx-proverb { display: block; right: 58px; bottom: 1.2rem; }
  .cx-proverb span { font-size: 1.2rem; }
  .cx-proverb small { font-size: .56rem; letter-spacing: .18em; }
}
/* short phones: keep the clump low so it stays clear of the paragraph */
@media (max-width: 767px) and (max-height: 740px) {
  .cx-bamboo { width: 48px; right: -10px; max-height: 12vh; max-height: 12svh; }
}
@media (max-height: 640px) { .cx-proverb { display: none; } }

/* =========================================================
   3 · TONES: Đông Sơn drum face + pitch contours on the cards
   ========================================================= */
.cx-tones-layer { border-radius: inherit; }
.cx-drum {
  position: absolute; width: min(52vw, 640px); aspect-ratio: 1;
  top: calc(min(52vw, 640px) * -.22); right: calc(min(52vw, 640px) * -.24);
  opacity: .2; will-change: transform;
}
.cx-drum img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  user-select: none; -webkit-user-drag: none;
}
.cx-drum-birds { will-change: transform; }
/* reveal: the face opens out from the sun in the centre to the rim */
@property --cx-rr { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.cx-live .cx-drum {
  --cx-rr: 0%;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 calc(var(--cx-rr) - 8%), transparent var(--cx-rr));
  mask-image: radial-gradient(circle closest-side, #000 calc(var(--cx-rr) - 8%), transparent var(--cx-rr));
  transition: --cx-rr 2.6s cubic-bezier(.45, 0, .2, 1) .15s;
}
.cx-live .cx-seen .cx-drum { --cx-rr: 110%; }
.cx-live .cx-drum-birds { opacity: 0; transition: opacity 1.2s ease 1.6s; }
.cx-live .cx-seen .cx-drum-birds { opacity: 1; }
/* phones: a half medallion centred above the heading, inside the top padding */
@media (max-width: 767px) {
  .cx-drum {
    --dw: min(64vw, 250px);
    width: var(--dw); top: calc(var(--dw) * -.58); right: auto; left: 50%; margin-left: calc(var(--dw) * -.5);
    opacity: .3;
  }
}

.cx-tone {
  position: absolute; left: 20%; right: 20%; top: 9%;
  aspect-ratio: 100 / 40; overflow: visible; pointer-events: none;
}
.cx-tone .cx-c {
  fill: none; stroke: var(--rose); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.cx-tone .cx-mid { fill: none; stroke: var(--rose); stroke-opacity: .28; stroke-width: 1; stroke-dasharray: 1.5 4; }
.cx-tone .cx-dot { fill: var(--rose); transform-box: fill-box; transform-origin: center; }
.cx-live .cx-tone .cx-c {
  stroke-dasharray: 1 1.02; stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .25, 1) calc(.45s + var(--k, 0) * .3s);
}
.cx-live .cx-tone .cx-dot { transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.8, .5, 1) 1.15s; }
.cx-live .tone-card.in .cx-tone .cx-c { stroke-dashoffset: 0; }
.cx-live .tone-card.in .cx-tone .cx-dot { transform: none; }
@media (hover: hover) {
  .cx-live .tone-card.in:hover .cx-tone .cx-c {
    animation: cx-redraw .8s cubic-bezier(.6, 0, .25, 1) calc(var(--k, 0) * .22s) both;
  }
  .cx-live .tone-card.in:hover .cx-tone .cx-dot { animation: cx-pop .5s cubic-bezier(.3, 1.8, .5, 1) .5s both; }
}
@keyframes cx-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cx-pop { from { transform: scale(0); } to { transform: none; } }

/* =========================================================
   4 · JOURNEY: scenery along the rails, one vignette per stop
   ========================================================= */
.cx-scenery { position: absolute; left: 0; bottom: 40px; height: 140px; width: 100%; will-change: transform; }
.cx-scene { position: absolute; bottom: 0; height: 100%; overflow: visible; }
.cx-lit { transition: fill-opacity .9s ease; }
.cx-lit-glow { opacity: 0; transition: opacity 1.2s ease; }
.cx-home .cx-lit, .cx-static .cx-lit { fill-opacity: .95; }
.cx-home .cx-lit-glow, .cx-static .cx-lit-glow { opacity: .32; }

/* =========================================================
   5 · QUICK LINKS: a flower seller in áo dài cycles past
   ========================================================= */
.cx-street { top: auto; height: clamp(104px, 9rem, 144px); }
.cx-road {
  position: absolute; left: clamp(1.2rem, 6vw, 6rem); right: clamp(1.2rem, 6vw, 6rem); bottom: 22px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(178, 58, 72, .28) 0 16px, transparent 16px 28px);
  transform-origin: left;
}
.cx-live .cx-road { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.6, 0, .2, 1); }
.cx-live .cx-seen .cx-road { transform: none; }
.cx-bike { position: absolute; left: 0; bottom: 21px; width: clamp(104px, 10.5vw, 150px); will-change: transform; }
.cx-live .cx-bike { transform: translate3d(-130%, 0, 0); }
.cx-bike-flip { pointer-events: auto; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.cx-bike-flip.cx-back { transform: scaleX(-1); }
.cx-bike svg { width: 100%; height: auto; overflow: visible; }
.cx-spokes { transform-box: fill-box; transform-origin: center; }
.cx-flap { transform-box: fill-box; transform-origin: 100% 0; }
.cx-live .cx-moving .cx-flap { animation: cx-flutter .42s ease-in-out infinite alternate; }
@keyframes cx-flutter { from { transform: rotate(-5deg); } to { transform: rotate(4deg) scaleX(1.06); } }
.cx-bell {
  position: absolute; left: 100%; bottom: 52%; margin-left: -.2rem;
  font-family: var(--script); font-size: 1.35rem; line-height: 1; color: var(--rose);
  white-space: nowrap; opacity: 0; pointer-events: none; transform-origin: 0 100%;
}
.cx-ring .cx-bell { opacity: 1; }
.cx-live .cx-ring .cx-bell { animation: cx-bell 1.1s cubic-bezier(.2, .9, .3, 1.3) both; }
.cx-live .cx-ring .cx-bike-flip svg { animation: cx-hop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cx-bell {
  0% { opacity: 0; transform: translateY(8px) scale(.6) rotate(-8deg); }
  18% { opacity: 1; transform: none; }
  80% { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes cx-hop { 40% { transform: translateY(-6px) rotate(-2deg); } }

/* =========================================================
   6 · FOOTER: hoa đăng lotus lanterns bloom on a full-moon river
   ========================================================= */
.cx-river {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* A narrow gutter is not an animation stage. Reserve a shallow row instead. */
.cx .footer.cx-footer-row .foot-cols { margin-bottom: 8rem; }
.cx-footer-row .cx-moon { display: none; }
.cx-waves { position: absolute; left: 0; bottom: 0; height: 26px; width: calc(100% + 48px); }
.cx-waves svg { width: 100%; height: 100%; }
.cx-live .cx-waves { animation: cx-flow 6s linear infinite; }
@keyframes cx-flow { to { transform: translateX(-48px); } }
.cx-moon {
  position: absolute; right: 9%; top: 58px; width: clamp(34px, 3.4vw, 50px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #fff8ea, #fff3d6 55%, var(--cx-light));
  box-shadow: 0 0 0 10px rgba(255, 226, 176, .05), 0 0 46px 8px rgba(255, 226, 176, .2);
  opacity: .9;
}
.cx-live .cx-moon { opacity: 0; transform: translateY(30px); transition: opacity 1.6s .2s, transform 2.2s cubic-bezier(.2, .8, .2, 1) .2s; }
.cx-live .cx-seen .cx-moon { opacity: .9; transform: none; }
@media (max-width: 767px) { .cx-moon { display: none; } }

.cx-hd { position: absolute; bottom: 3px; left: var(--x); width: var(--s); margin-left: calc(var(--s) / -2); }
.cx-hd svg { position: relative; width: 100%; height: auto; overflow: visible; }
.cx-live:not(.cx-lite) .cx-hd { animation: cx-drift var(--dur, 11s) ease-in-out calc(var(--i) * -2.3s) infinite alternate; }
@keyframes cx-drift { to { transform: translateX(var(--dx, 20px)); } }
.cx-live .cx-hd-rise {
  opacity: 0; transform: translateY(16px);
  transition: opacity 1s, transform 1.4s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i) * 220ms);
}
.cx-live .cx-seen .cx-hd-rise { opacity: 1; transform: none; }
.cx-live .cx-hd-bob { animation: cx-bob var(--bd, 3.6s) ease-in-out calc(var(--i) * -.9s) infinite alternate; }
@keyframes cx-bob {
  from { transform: translateY(1.5px) rotate(-2.5deg); }
  to { transform: translateY(-2.5px) rotate(2.5deg); }
}
.cx-hd-light { position: absolute; left: -40%; right: -40%; top: -55%; aspect-ratio: 1; transition: transform .5s; }
.cx-hd-glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 226, 176, .5), rgba(255, 226, 176, .12) 60%, transparent);
}
.cx-live .cx-hd-light { opacity: 0; transition: opacity 1.2s calc(var(--i) * 220ms + .9s), transform .5s; }
.cx-live .cx-seen .cx-hd-light { opacity: 1; }
.cx-live:not(.cx-lite) .cx-hd-glow { animation: cx-flicker 2.4s ease-in-out infinite; }
@keyframes cx-flicker {
  0%, 100% { opacity: .75; } 30% { opacity: .95; } 55% { opacity: .68; } 80% { opacity: 1; }
}
.cx-petal { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(var(--a)); }
.cx-live .cx-petal {
  transform: rotate(calc(var(--a) * .08)) scale(.88);
  transition: transform 1.3s cubic-bezier(.3, 1.3, .4, 1) calc(var(--i) * 220ms + .35s + var(--j) * 70ms);
}
.cx-live .cx-seen .cx-petal { transform: rotate(var(--a)); }
.cx-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.cx-live .cx-flame { opacity: 0; transition: opacity .8s calc(var(--i) * 220ms + 1s); }
.cx-live .cx-seen .cx-flame { opacity: 1; }
.cx-live:not(.cx-lite) .cx-flame { animation: cx-fl 1.4s ease-in-out infinite alternate; }
@keyframes cx-fl { from { transform: scale(1, .9); } to { transform: scale(.92, 1.08) skewX(3deg); } }

@media (hover: hover) and (pointer: fine) {
  .cx-hd-bob { pointer-events: auto; }
  .cx-hd-bob:hover .cx-hd-light { transform: scale(1.4); }
}

/* =========================================================
   reduced motion: static, finished states, no parallax
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .cx-layer *, .cx-tone * { animation: none !important; transition: none !important; }
}