html, body { height: 100%; overflow: hidden; background: #0b1233; }
.viewer { position: fixed; inset: 0; display: grid; place-items: center; background: #0b1233; /* any letterbox bars blend with the night sky */ user-select: none; -webkit-user-select: none; }

/* 1920×1080 stage, scaled to fit by slides.js */
.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: var(--night); }

.slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.slide.on { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.slide h2 { font-family: var(--display); font-weight: 900; color: var(--gold); margin: 0; font-size: 104px; line-height: 1.05; }

/* Content rise-in when a slide appears */
@media (prefers-reduced-motion: no-preference) {
  .slide.on .rise { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .slide.on .rise:nth-child(2) { animation-delay: .12s; }
  .slide.on .rise:nth-child(3) { animation-delay: .24s; }
  .slide.on .rise:nth-child(4) { animation-delay: .36s; }
  .slide.on .rise:nth-child(5) { animation-delay: .48s; }
  .slide.on .rise:nth-child(6) { animation-delay: .6s; }
  .slide.on .zoom { animation: kb 14s ease-out both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes kb { from { transform: scale(1.12); } }

/* 1 · Title */
.s-title .s-moon { position: absolute; width: 760px; height: 760px; right: 140px; top: 150px; }
.t-body { position: absolute; left: 150px; bottom: 140px; }
.kicker { display: flex; align-items: center; gap: 20px; font-size: 36px; font-weight: 700; color: var(--ink); margin: 0; }
.kicker img { background: #fff; border-radius: 14px; padding: 4px; }
.s-title h1 { font-family: var(--display); font-weight: 900; font-size: 210px; line-height: .92; margin: 0; padding-top: .28em; /* room for the accent on “Tết” */ text-shadow: 0 8px 50px rgba(0, 0, 0, .55); }
.s-title h1 span { display: block; color: var(--gold); }
.t-when { font-size: 52px; font-weight: 700; margin: 44px 0 16px; }
.t-when i { color: var(--pink); font-style: normal; padding: 0 10px; }
.t-when { margin-bottom: 0; }
.s-title .h1 { left: 110px; --string: 60px; --dur: 4.8s; }
.s-title .h2 { left: 330px; --string: 40px; --dur: 5.6s; }
.s-title .h3 { left: 1780px; --string: 120px; --dur: 6.2s; }
.nowrap { white-space: nowrap; }

/* 2 · About */
.s-about { background: radial-gradient(circle at 0 100%, rgba(224, 38, 47, .45), transparent 55%), linear-gradient(135deg, #0d1638, #241556); }
.about-text { position: absolute; left: 140px; top: 170px; width: 820px; }
.about-logo { background: #fff; border-radius: 22px; padding: 8px; margin-bottom: 40px; }
.s-about .sv { font-size: 30px; color: var(--ink-soft); margin: 18px 0 60px; }
.s-about .big { font-size: 46px; font-weight: 700; line-height: 1.3; color: var(--ink); margin: 0; border-left: 6px solid var(--red); padding-left: 36px; }
.about-photos img { position: absolute; object-fit: cover; border-radius: 26px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); border: 8px solid #fff; }
.about-photos .p1 { width: 600px; height: 450px; left: 1180px; top: 80px; transform: rotate(3deg); }
.about-photos .p2 { width: 480px; height: 320px; left: 1020px; top: 560px; transform: rotate(-4deg); }
.about-photos .p3 { width: 460px; height: 345px; left: 1400px; top: 620px; transform: rotate(2deg); }

/* 3 · Activities */
.s-acts { background: linear-gradient(180deg, #120f3a, #2a1658); padding: 90px 120px; }
.acts { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 360px 360px; gap: 28px; }
.acts li { position: relative; border-radius: 24px; overflow: hidden; }
.tile-stk { position: absolute; right: 18px; bottom: 14px; width: 110px; height: 110px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.acts img { width: 100%; height: 100%; object-fit: cover; }
.acts span { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 28px 22px; font-size: 40px; font-weight: 700; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }

/* 4 · Membership */
.s-member { background: radial-gradient(circle at 100% 0, rgba(255, 201, 74, .25), transparent 50%), linear-gradient(135deg, #a8101f, #e0262f 55%, #ff6a4d); }
.m-text { position: absolute; left: 150px; top: 190px; }
.s-member h2 { color: #fff; font-size: 100px; }
.m-price { font-size: 52px; margin: 30px 0 70px; }
.m-price b { font-family: var(--display); font-weight: 900; font-size: 160px; color: var(--gold); text-shadow: 0 6px 30px rgba(0, 0, 0, .25); }
.s-member dl { margin: 0; display: grid; gap: 22px; }
.s-member dl div { display: flex; align-items: baseline; gap: 36px; }
.s-member dt { width: 240px; font-size: 40px; opacity: .85; }
.s-member dd { margin: 0; font-size: 64px; font-weight: 700; font-variant-numeric: tabular-nums; }
.s-member .m-web dd { font-size: 44px; }
.m-qr { position: absolute; right: 150px; top: 140px; height: 800px; border-radius: 34px; box-shadow: 0 40px 90px rgba(0, 0, 0, .4); }

/* 5–6 · Programme */
.s-prog { background: radial-gradient(circle at 100% 100%, rgba(255, 122, 162, .22), transparent 50%), linear-gradient(160deg, #0d1638, #1d1450); padding: 80px 150px; }
.s-prog h2 small { font-size: 44px; color: var(--ink-soft); font-family: var(--body); font-weight: 400; margin-left: 20px; }
.prog { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 22px; }
.prog > li { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; padding: 22px 40px; border-radius: 28px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.prog time { font-size: 58px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.prog h3 { font-size: 46px; margin: 2px 0 4px; }
.prog ul { margin: 0; padding: 0; list-style: none; font-size: 31px; color: var(--ink-soft); line-height: 1.35; }
.prog ul li { display: flex; align-items: flex-start; gap: 12px; }
.prog .li-stk { display: inline-flex; gap: 4px; flex: none; margin-top: 2px; }
.prog .li-stk:empty { display: none; }
.prog .li-stk .stk { width: 38px; height: 38px; }
.prog > li > div { padding-right: 200px; }
.row-stk { position: absolute; right: 30px; top: 50%; margin-top: -60px; display: flex; }
.row-stk .stk { width: 120px; height: 120px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .4)); }
.row-stk .stk + .stk { margin-left: -36px; transform: rotate(12deg) translateY(18px); }
.row-stk .stk:first-child { transform: rotate(-8deg); }
.s-prog[data-agenda="3-7"] .prog > li { padding: 16px 40px; }

/* 7 · Closing: the moon with Chú Cuội, Chị Hằng flying, sky lanterns rising */
.e-moonwrap { position: absolute; left: 130px; top: 70px; width: 540px; height: 540px; }
.e-moon, .e-cuoi { position: absolute; inset: 0; width: 100%; height: 100%; }
.e-rabbit { position: absolute; width: 150px; height: 150px; right: -40px; bottom: -10px; filter: drop-shadow(0 0 20px rgba(255, 240, 200, .6)); }
.e-hang { position: absolute; left: 1080px; top: 50px; width: 660px; height: 503px; filter: drop-shadow(0 0 26px rgba(255, 190, 220, .45)); }
.e-body { position: absolute; left: 0; right: 0; bottom: 110px; text-align: center; }
.s-end h2 { font-size: 150px; color: #fff; text-shadow: 0 8px 50px rgba(0, 0, 0, .6); }
.e-tale { margin: 22px 0 0; font-weight: 700; font-size: 36px; line-height: 1.3; color: var(--gold); }
.e-contact { list-style: none; padding: 0; margin: 34px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 60px; font-size: 32px; color: var(--ink-soft); }

/* Rising sky lanterns (đèn trời) */
.sky-lanterns i {
  position: absolute; bottom: -120px; width: var(--w, 46px); aspect-ratio: 46 / 62;
  background: radial-gradient(ellipse at 50% 95%, #fff7d0 0 10%, transparent 30%), linear-gradient(#ff8a3d, #ffc65a 60%, #fff1b8);
  clip-path: polygon(8% 4%, 50% 0, 92% 4%, 78% 100%, 22% 100%);
  filter: drop-shadow(0 0 14px rgba(255, 170, 60, .9));
  opacity: 0;
}
.sky-lanterns i:nth-child(1) { left: 8%;  --w: 40px; --t: 19s; --d: 0s; }
.sky-lanterns i:nth-child(2) { left: 30%; --w: 28px; --t: 26s; --d: -9s; }
.sky-lanterns i:nth-child(3) { left: 46%; --w: 54px; --t: 16s; --d: -4s; }
.sky-lanterns i:nth-child(4) { left: 61%; --w: 32px; --t: 23s; --d: -15s; }
.sky-lanterns i:nth-child(5) { left: 77%; --w: 44px; --t: 18s; --d: -11s; }
.sky-lanterns i:nth-child(6) { left: 90%; --w: 26px; --t: 28s; --d: -20s; }
.sky-lanterns i:nth-child(7) { left: 20%; --w: 36px; --t: 21s; --d: -6s; }

/* Floating stickers that keep the content slides alive */
.float { position: absolute; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .4)); pointer-events: none; }
.f-a1 { width: 150px; height: 150px; left: 860px; top: 110px; }
.f-a2 { width: 170px; height: 170px; left: 1730px; top: 470px; }
.f-p1 { width: 170px; height: 170px; right: 120px; top: 50px; }
.f-p2 { width: 150px; height: 150px; right: 330px; top: 70px; }
.f-p3 { width: 160px; height: 160px; right: 330px; top: 40px; }
.f-p4 { width: 130px; height: 130px; right: 190px; top: 70px; }
.f-p5 { width: 130px; height: 130px; right: 60px; top: 50px; }

@media (prefers-reduced-motion: no-preference) {
  .slide.on .float { animation: drift 4.5s ease-in-out infinite alternate; }
  .slide.on .float:nth-of-type(even) { animation-duration: 3.6s; animation-delay: -1.5s; }
  .slide.on .row-stk { animation: bob 3s ease-in-out infinite alternate; }
  .slide.on .prog > li:nth-child(even) .row-stk { animation-duration: 2.6s; animation-delay: -1s; }
  .slide.on .tile-stk { animation: pop .7s cubic-bezier(.3, 1.6, .5, 1) both, bob 3s 1s ease-in-out infinite alternate; }
  .slide.on .acts li:nth-child(2) .tile-stk { animation-delay: .15s, 1.2s; }
  .slide.on .acts li:nth-child(3) .tile-stk { animation-delay: .3s, 1.4s; }
  .slide.on .acts li:nth-child(4) .tile-stk { animation-delay: .45s, 1.6s; }
  .slide.on .acts li:nth-child(5) .tile-stk { animation-delay: .6s, 1.8s; }
  .slide.on .acts li:nth-child(6) .tile-stk { animation-delay: .75s, 2s; }
  .slide.on .about-photos img { animation: sway 7s ease-in-out infinite alternate; }
  .slide.on .about-photos .p2 { animation-duration: 8s; animation-delay: -3s; }
  .slide.on .about-photos .p3 { animation-duration: 6s; animation-delay: -2s; }
  .slide.on .sky-lanterns i { animation: fly var(--t) var(--d) linear infinite; }
  .slide.on .e-hang { animation: hover 6s ease-in-out infinite alternate; }
  .slide.on .e-rabbit { animation: hop 3.4s ease-in-out infinite; }
  .slide.on .e-moonwrap { animation: glow 5s ease-in-out infinite alternate; }
}
@keyframes drift { from { translate: 0 0; rotate: -6deg; } to { translate: 10px -24px; rotate: 6deg; } }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -14px; } }
@keyframes pop { from { scale: 0; rotate: -30deg; } }
@keyframes sway { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes fly {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(40px, -640px); }
  85% { opacity: 1; }
  100% { transform: translate(-20px, -1300px) scale(.6); opacity: 0; }
}
@keyframes hover { from { translate: 0 0; rotate: -2deg; } to { translate: -30px -26px; rotate: 2deg; } }
@keyframes hop { 0%, 60%, 100% { translate: 0 0; } 70% { translate: 0 -26px; } 80% { translate: 0 0; } 86% { translate: 0 -10px; } }
@keyframes glow { to { filter: drop-shadow(0 0 40px rgba(255, 210, 120, .5)); } }

/* Controls */
.controls {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px;
  background: rgba(10, 12, 30, .78); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: opacity .35s, transform .35s; z-index: 5;
}
.controls button, .controls a { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.controls button:hover, .controls a:hover { background: rgba(255, 255, 255, .14); }
.controls .count { min-width: 64px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; color: #ddd; }
.controls .home { margin-right: 4px; border-right: 1px solid rgba(255, 255, 255, .14); border-radius: 50% 0 0 50%; }
#play .i-pause, #play[aria-pressed="true"] .i-play { display: none; }
.controls .lang-btn svg { display: block; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
#play[aria-pressed="true"] .i-pause { display: block; }
#fs .i-exit, #fs[aria-pressed="true"] .i-enter { display: none; }
#fs[aria-pressed="true"] .i-exit { display: block; }
#music .i-on, #music[aria-pressed="true"] .i-off { display: none; }

/* Volume slider above the note button */
.vol-wrap { position: relative; display: grid; }
.vol {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 8px);
  padding: 16px 10px; border-radius: 999px;
  background: rgba(10, 12, 30, .85); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.vol::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* keeps hover alive across the gap */
.vol-wrap.open .vol { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .2s; }
.vol input { display: block; writing-mode: vertical-lr; direction: rtl; width: 26px; height: 120px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.embed:not(.full) .vol input { height: 90px; }
#music[aria-pressed="true"] .i-on { display: block; color: var(--gold); }
.idle .controls { opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }
.idle { cursor: none; }

.bar { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .08); z-index: 4; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--red)); transition: width .4s; }

/* Embedded on the home page: smaller controls and no home button, until it goes fullscreen */
.embed .controls .home { display: none; }
.embed:not(.full) .controls { bottom: 10px; padding: 3px; }
.embed:not(.full) .controls button { width: 36px; height: 36px; }
.embed:not(.full) .controls .count { min-width: 50px; font-size: 13px; }

/* ── Portrait (phones held upright): 1080×1920 stage, slides re-flowed ── */
.portrait .stage { width: 1080px; height: 1920px; }
.portrait .slide { inset: auto 0; top: var(--dy, 0px); height: 1920px; overflow: visible; isolation: isolate; }
.portrait .slide::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * var(--dy, 0px)); bottom: calc(-1 * var(--dy, 0px)); background: inherit; }
.portrait .slide h2 { font-size: 88px; }

.portrait .s-title .s-moon { width: 620px; height: 620px; right: -90px; top: 230px; }
.portrait .s-title .h1 { left: 60px; }
.portrait .s-title .h2 { left: 250px; }
.portrait .s-title .h3 { left: 880px; --string: 90px; }
.portrait .t-body { left: 80px; right: 70px; bottom: 170px; }
.portrait .kicker { font-size: 34px; }
.portrait .s-title h1 { font-size: 168px; }
.portrait .t-when { font-size: 50px; line-height: 1.35; margin-top: 40px; }

.portrait .about-text { left: 80px; top: 110px; width: 920px; }
.portrait .about-logo { margin-bottom: 30px; }
.portrait .s-about .sv { margin: 14px 0 44px; }
.portrait .s-about .big { font-size: 44px; }
.portrait .about-photos .p1 { width: 560px; height: 420px; left: 60px; top: 1010px; }
.portrait .about-photos .p2 { width: 440px; height: 300px; left: 580px; top: 1090px; }
.portrait .about-photos .p3 { width: 520px; height: 390px; left: 440px; top: 1440px; }
.portrait .f-a1 { left: 860px; top: 120px; width: 140px; height: 140px; }
.portrait .f-a2 { left: 90px; top: 1520px; }

.portrait .s-acts { padding: 100px 60px; }
.portrait .acts { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 480px); gap: 24px; margin-top: 50px; }
.portrait .acts span { font-size: 38px; }

.portrait .m-text { left: 80px; right: 80px; top: 120px; }
.portrait .s-member h2 { font-size: 92px; }
.portrait .m-price { margin: 20px 0 46px; font-size: 46px; }
.portrait .m-price b { font-size: 140px; }
.portrait .s-member dl div { gap: 24px; }
.portrait .s-member dt { width: 200px; font-size: 34px; }
.portrait .s-member dd { font-size: 58px; }
.portrait .s-member .m-web dd { font-size: 38px; }
.portrait .m-qr { right: auto; left: 50%; top: 860px; height: 900px; transform: translateX(-50%); }

.portrait .s-prog { padding: 90px 50px; }
.portrait .s-prog h2 small { font-size: 40px; }
.portrait .prog { margin-top: 70px; gap: 34px; }
.portrait .prog > li, .portrait .s-prog[data-agenda="3-7"] .prog > li { grid-template-columns: 1fr; gap: 8px; padding: 32px 36px; }
.portrait .prog time { font-size: 56px; }
.portrait .prog h3 { font-size: 52px; }
.portrait .prog ul { font-size: 36px; margin-top: 8px; }
.portrait .prog .li-stk .stk { width: 44px; height: 44px; }
.portrait .prog > li > div { padding-right: 0; }
.portrait .row-stk { top: 18px; margin-top: 0; right: 24px; }
.portrait .row-stk .stk { width: 104px; height: 104px; }
.portrait .f-p1, .portrait .f-p3 { right: auto; left: 70px; top: auto; bottom: 90px; }
.portrait .f-p2, .portrait .f-p4 { right: auto; left: 470px; top: auto; bottom: 110px; }
.portrait .f-p5 { right: 80px; top: auto; bottom: 90px; }

.portrait .e-moonwrap { left: 260px; top: 250px; width: 560px; height: 560px; }
.portrait .e-hang { left: -40px; top: 40px; width: 560px; height: 427px; }
.portrait .e-body { bottom: 200px; padding: 0 50px; }
.portrait .s-end h2 { font-size: 100px; }
.portrait .e-tale { font-size: 40px; padding: 0 40px; }
.portrait .e-contact { flex-direction: column; gap: 10px; font-size: 34px; }
.controls [hidden] { display: none; }
.rabbit-pen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.rabbit-pen:not(.out) { visibility: hidden; } /* until it hops in on the first play */

/* YouTube music player: YouTube requires the player to stay visible (at least 200×200),
   so it shows as a small card in the corner while a YouTube song plays. */
.yt-box {
  position: fixed; right: 16px; bottom: 16px; z-index: 6; width: 240px; height: 200px;
  border-radius: 14px; overflow: hidden; background: #000;
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s, transform .35s, visibility 0s .35s;
}
.yt-on .yt-box { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s; }
.yt-box iframe { display: block; width: 100%; height: 100%; border: 0; }
.portrait .yt-box { width: 200px; right: 10px; bottom: auto; top: 10px; } /* over the sky, clear of the text */

/* QA readout for the meadow phases (T key) */
.meadow-hud { position: fixed; left: 12px; top: 12px; z-index: 9; margin: 0; padding: 6px 12px; border-radius: 10px; background: rgba(10, 12, 30, .8); color: #fff; font: 600 13px/1.4 var(--body); font-variant-numeric: tabular-nums; pointer-events: none; }