/* THU MUA XANH · V6 preview (27/10/2026) — shared layer for the re-directed scenes 01, 08, 12 and the A/B switch.
   Text rule: display/visibility only where V5 had them (innerText must not change); every other hide is opacity. The look lives in v6-a.css. */

.v6 { --ez6: cubic-bezier(.22, 1, .36, 1); --io6: cubic-bezier(.65, 0, .35, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='520'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='3' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); }
.v6 .sc-bg::before, .v6 .sc-bg::after { display: none; }
.v6-felt, .v6-spot, .v6-grain { position: absolute; inset: 0; pointer-events: none; }
/* the "click the page to use keys" hint never takes the click: any click already focuses the page (app.js), so the control under it works first time */
.focus-hint { pointer-events: none !important; }
/* the source line spans the frame width at the bottom; it is plain text, so controls near it stay clickable */
.v6 .sc-src { pointer-events: none; }
.v6-grain { background-image: var(--noise); background-size: 240px 240px; mix-blend-mode: overlay; opacity: .08; }
.v6 .fr > * { position: absolute; margin: 0; }
.v6 .fr > .slot { z-index: 1; }
.v6 em, .v6 i { font-style: normal; }

/* as in V5: chapter line hidden while presenting, controls only while the mouse moves */
body.present .v6 .eyebrow { display: none; }
.v6 .eyebrow { position: static; margin: 0 0 calc(var(--u) * .6); font-size: var(--fs-cap); }
body.present .v1-cta { display: none; }
body:not(.present) .v1-go { display: none; }
body.present:not(.mouse-on) .v6 .v1-go, body.present .v6 :is(.v8-refb, .v12-sw) { opacity: 0 !important; pointer-events: none; }
body.present .v6 :is(.v1-go, .v8-refb, .v12-sw) { transition: opacity .45s; }

/* ---------- 01 ---------- */
.v1-title, .v1-title em { font-family: var(--font-ui); }
.v1-eye { text-transform: uppercase; }
.v1-foot { display: grid; }
.v1-go { font-size: var(--fs-cap); }
.v1-go kbd { font: 600 max(14px, .92em) var(--font-ui); padding: .05em .45em; border-radius: 4px; border: 1px solid currentColor; }
.v1-cta { left: calc(var(--u) * 6); top: calc(var(--u) * 49); }
/* lights on: copy, then the object, in a short sequence (present only) */
body.present:not(.safe) .v1 .fr > :is(.v1-eye, .v1-title, .v1-sub, .v1-foot, .v1-chip, .v1-go, .v1-plinth) { transition: opacity 1.1s var(--ez6), translate 1.4s var(--ez6); }
body.present:not(.safe) .v1:not(.at1) .fr > :is(.v1-eye, .v1-title, .v1-sub, .v1-foot, .v1-chip, .v1-go, .v1-plinth) { opacity: 0; translate: 0 calc(var(--u) * 1.2); transition-duration: .2s; transition-delay: 0s !important; }
body.present:not(.safe) .v1.at1 .v1-plinth { transition-delay: .5s; }
body.present:not(.safe) .v1.at1 .v1-eye { transition-delay: 1.2s; }
body.present:not(.safe) .v1.at1 .v1-title { transition-delay: 1.45s; }
body.present:not(.safe) .v1.at1 .v1-sub { transition-delay: 1.9s; }
body.present:not(.safe) .v1.at1 .v1-foot { transition-delay: 2.2s; }
body.present:not(.safe) .v1.at1 .v1-chip { transition-delay: 2.6s; }
body.present:not(.safe) .v1.at1 .v1-go { transition-delay: 3s; }

/* ---------- 08: show/hide per beat exactly as V5 ---------- */
.v8-tl { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.v8-ph { position: absolute; display: grid; text-align: left; pointer-events: auto; cursor: zoom-in; }
.v8-im { position: relative; display: block; overflow: hidden; }
.v8-im img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v8-badge, .v8-stamp { position: absolute; font-style: normal; text-transform: uppercase; white-space: nowrap; }
.v8-stamp { z-index: 3; pointer-events: none; }
.v8-cap { display: grid; align-content: start; }
.v8-step { font-style: normal; text-transform: uppercase; }
.v8-cap em { font-style: normal; }
.v8.at1 .v8-cap span, .v8.at1 .v8-cap em { display: none; }
.v8[data-k="0"] :is(.v8-money, .v8-hero) { visibility: hidden; }
.v8-mh { position: relative; display: flex; align-items: baseline; gap: 1em; margin: 0; }
.v8-refb { position: absolute; right: 0; bottom: calc(100% + var(--u) * .6); white-space: nowrap; }
.v8-lbl { text-transform: uppercase; }
.v8-wf { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.v8-b { position: relative; outline: none; }
.v8-b > * { position: absolute; }
.v8-b i { bottom: calc(var(--lo) * 100%); height: calc((var(--hi) - var(--lo)) * 100%); left: 23%; right: 23%; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .8s var(--ez6); transition-delay: calc(.45s + var(--i) * .26s); }
.v8-b.is-neg i { transform-origin: 50% 0; }
.v8:not([data-k="0"]) .v8-b i { transform: none; }
.v8-b b { left: -20%; right: -20%; bottom: calc(var(--hi) * 100% + var(--u) * .3); text-align: center; opacity: 0; transition: opacity .4s var(--ez6); transition-delay: calc(.8s + var(--i) * .26s); }
.v8:not([data-k="0"]) .v8-b b { opacity: 1; }
.v8-b span { left: -4%; right: -4%; top: calc(100% + var(--u) * .45); text-align: center; line-height: 1.15; }
.v8-tip { left: 50%; bottom: calc(var(--hi) * 100% + var(--u) * 2.6); width: calc(var(--u) * 15); transform: translate(-50%, 6px); font-style: normal; line-height: 1.35; padding: .55em .7em; border-radius: 4px; opacity: 0; pointer-events: none; z-index: 4; transition: opacity .25s, transform .25s; }
.v8-b:first-child .v8-tip { left: 0; transform: translateY(6px); } .v8-b:nth-child(6) .v8-tip { left: auto; right: 0; transform: translateY(6px); }
.v8-b:hover .v8-tip, .v8-b:focus .v8-tip { opacity: 1; transform: translateX(-50%); }
.v8-b:first-child:hover .v8-tip, .v8-b:nth-child(6):hover .v8-tip, .v8-b:first-child:focus .v8-tip, .v8-b:nth-child(6):focus .v8-tip { transform: none; }
.v8-ref { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); list-style: none; pointer-events: none; }
.v8-ref span { position: absolute; bottom: -.62em; }
.v8-hero { display: grid; align-content: start; }
.v8-hl { text-transform: uppercase; }
.v8-hn { display: flex; align-items: baseline; }
.v8-hn small { margin: 0; }
.v8-ho { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .45em; }
.v8-lim { opacity: 0; transition: opacity .6s var(--ez6); }
.v8.at2 .v8-lim { opacity: 1; }
.v8-box { z-index: 8; left: calc(var(--u) * 6); top: calc(var(--u) * 4); width: calc(var(--u) * 88); height: calc(var(--u) * 47); display: grid; place-items: center; background: #070B09; border-radius: 4px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.v8-box.is-on { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
.v8-box img { position: absolute; left: 3%; top: 3%; width: 94%; height: 94%; object-fit: contain; }
.v8-box .cx-btn { position: absolute; right: calc(var(--u) * 1); top: calc(var(--u) * 1); }
/* the counter grows from 0 while the waterfall settles */
body.present:not(.safe) .v8.at1 .v8-hero { transition: opacity .7s var(--ez6) .2s, translate .9s var(--ez6) .2s; }
body.present:not(.safe) .v8[data-k="0"] :is(.v8-hero, .v8-money) { opacity: 0; translate: 0 calc(var(--u) * 1.4); }
body.present:not(.safe) .v8 .v8-money { transition: opacity .7s var(--ez6) .5s, translate .9s var(--ez6) .5s; }
/* stamps hit the prints one by one (sounds: scenes-v6.js enter) */
body.present .v8.is-in[data-k="0"] .v8-stamp { animation: wowStamp .44s cubic-bezier(.3, 0, .3, 1) both; animation-delay: calc(1.3s + var(--i) * .6s); }
body.present .v8.is-in[data-k="0"] .v8-ph { animation: v6thud .32s cubic-bezier(.3, 0, .4, 1) both; animation-delay: calc(1.54s + var(--i) * .6s); }
@keyframes v6thud { 0%, 100% { translate: 0 0; } 35% { translate: 0 calc(var(--u) * .3); } }

/* ---------- 12: show/hide per state exactly as V5 ---------- */
.v12-h1 em, .v1-title em { font-style: normal; }
.v12-sw .cx-seg { display: inline-flex; }
.v12-c { position: absolute; }
.v12-c > * { position: absolute; margin: 0; }
.v12-t { display: flex; align-items: baseline; }
.v12-im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s var(--ez6); }
.v12-im .i-b, .v12.is-bag .v12-im .i-p { opacity: 0; }
.v12.is-bag .v12-im .i-b { opacity: 1; }
.v12-pool { position: absolute; inset: -12% -8%; pointer-events: none; }
.v12-tag { position: absolute; display: flex; text-transform: uppercase; }
.v12-tag i { font-style: normal; }
.v12-tag .l-b, .v12.is-bag .v12-tag .l-p { display: none; }
.v12.is-bag .v12-tag .l-b { display: inline-block; }
.v12-pr { display: flex; align-items: baseline; gap: .4em; }
.v12-pr small { margin: 0; }
.v12-bar { position: static; display: flex; }
.v12-bar > * { position: absolute; font-style: normal; }
.v12-b1 { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ez6) .25s; }
.v12.is-bag .v12-b1 { transform: none; }
.v12-bar em { opacity: 0; transition: opacity .7s var(--ez6), transform .9s var(--ez6), filter .9s var(--ez6); }
.v12.is-bag .v12-bar em { opacity: 1; transform: none; filter: none; }
.v12-dl { opacity: 0; transition: opacity .5s var(--ez6) .9s; }
.v12.is-bag .v12-dl { opacity: 1; }
.v12-end { display: grid; opacity: 0; transition: opacity .7s var(--ez6), translate .9s var(--ez6); translate: 0 calc(var(--u) * .8); }
.v12.is-end .v12-end { opacity: 1; translate: 0 0; }
.v12-prop { pointer-events: none; }

/* ---------- motion: Ken Burns on real photos, counters, reveals; off in safe mode and reduced motion ---------- */
@keyframes v6kb { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.4%, -1.1%, 0); } }
body.present:not(.safe) .v8.is-active .v8-im img { animation: v6kb 18s ease-in-out infinite alternate; }
body.present:not(.safe) .v8.is-active .v8-ph:nth-child(2) .v8-im img { animation-delay: -6s; animation-direction: alternate-reverse; }
body.present:not(.safe) .v8.is-active .v8-ph:nth-child(3) .v8-im img { animation-delay: -11s; }
body.safe .v6 *, body.safe .v6 *::before, body.safe .v6 *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .v6 *, .v6 *::before, .v6 *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* safe mode (slow machines): keep the layout and colours, drop the costly paint — texture layers, blend modes, masks, filters */
body.safe .v6 { --noise: none; --mottle: none; }
body.safe .v6 .v6-grain, body.safe .v6 .v6-felt { display: none; }
body.safe .v6 * { background-blend-mode: normal !important; mix-blend-mode: normal !important; -webkit-mask-image: none !important; mask-image: none !important; filter: none !important; }