/* ============================================================
   TRANSHOW — Home
   Page styles on top of the design system (_ds/transhow).
   One full-screen video runs behind eight snap sections; each
   section fades in a fixed overlay "panel" of copy.
   ============================================================ */

:root {
  --hair:    rgba(230,237,242,.14);
  --hair-2:  rgba(230,237,242,.18);
  --glass:   rgba(19,28,36,.72);
  --gold-45: rgba(191,163,105,.45);
  --shadow-text: 0 2px 24px rgba(0,0,0,.6);
}

/* The document never scrolls: body is a viewport-sized stage and <main> is the
   scroller. Keeps the video/panels position:absolute instead of fixed, which
   mobile browsers (iOS Safari above all) stop painting during scroll. */
html, body { height: 100%; overflow: hidden; }
html, body { margin: 0; background: var(--ts-ink); }
body { position: relative; color: var(--ts-mist); }
a { color: var(--ts-gold); text-decoration: none; }
a:hover { color: var(--ts-gold-bright); }
.ts-btn--primary:hover, .ts-wa:hover { color: var(--on-accent); }
img { display: block; }
* { box-sizing: border-box; }

/* ---- Background stack --------------------------------------- */
/* Video and poster share one container; the poster comes AFTER the video in the
   DOM, so it paints above it with no z-index tricks (Safari ignores negative
   z-index on media). It is visible whenever the video is not playing, on every
   device: a blocked autoplay or a paused video shows the scene, never black or
   the native play glyph. js/home.js toggles body.is-playing. */
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bg-video, .bg-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-poster { transition: opacity .5s ease; }
body.is-playing .bg-poster { opacity: 0; }


.bg-scrim, .bg-vignette, .bg-grain { position: absolute; inset: 0; pointer-events: none; }
.bg-scrim { z-index: 0; background: linear-gradient(180deg, rgba(15,21,26,.55), rgba(15,21,26,0) 28%, rgba(15,21,26,0) 62%, rgba(15,21,26,.75)); }
.bg-vignette { z-index: 0; background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,.55)); }
.bg-grain { z-index: 1; }

/* ---- Nav (Setlist variant) ---------------------------------- */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 16px 6vw; }
.nav__brand { display: flex; align-items: center; }
.nav__brand img { height: 42px; width: 42px; }
.nav__wa { justify-self: end; }
.wa-short { display: none; }

.setlist { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 6; display: flex; align-items: stretch; border: 1px solid var(--hair); border-radius: 6px; background: rgba(15,21,26,.72); backdrop-filter: blur(14px); overflow: hidden; }
.setlist__label { display: flex; align-items: center; padding: 0 14px; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ts-gold); border-right: 1px solid var(--hair); }
.setlist a { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; border-right: 1px solid rgba(230,237,242,.1); color: var(--ts-mist); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: color .3s, background .3s; }
.setlist a:last-child { border-right: none; }
.setlist a span { font-size: 9px; color: var(--ts-steel); }
.setlist a:hover { color: var(--ts-gold-bright); }
.setlist a.on { color: var(--ts-gold); background: rgba(191,163,105,.10); }

/* ---- Scroll track + fixed panels ---------------------------- */
main { position: absolute; inset: 0; z-index: 2; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; overscroll-behavior: none; }
main > section { height: 100%; scroll-snap-align: start; }
/* Scrollbar: thin, gold thumb on a transparent track (Firefox + Chromium 121+ via
   scrollbar-color; WebKit pseudo-elements for Safari and older Chromium). */
main { scrollbar-width: thin; scrollbar-color: rgba(191,163,105,.45) transparent; }
main::-webkit-scrollbar { width: 6px; }
main::-webkit-scrollbar-track { background: transparent; }
main::-webkit-scrollbar-thumb { background: rgba(191,163,105,.45); border-radius: 3px; }
main::-webkit-scrollbar-thumb:hover { background: rgba(191,163,105,.8); }

.panels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 110px 6vw 40px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.panel.on { opacity: 1; }
/* Panels stay transparent to touch/wheel so gestures reach the <main> scroller;
   only their links, buttons and focusable bars take pointer events. */
.panel.on a, .panel.on button, .panel.on [tabindex] { pointer-events: auto; }
.wrap { position: relative; max-width: 1440px; width: 100%; margin-left: auto; margin-right: auto; }
/* Phones: js/home.js moves each panel INTO its section, so copy moves with the
   finger and mandatory snap settles on the next screen. These rules are not
   behind the width media query on purpose: the JS decides "phone" by touch too,
   so a rotated iPhone (844px wide) must keep working. On desktop the panels
   never enter the sections, so the rules are inert there. */
main > section { position: relative; }
main > section > .panel { position: absolute; inset: 0; opacity: 1; transition: none; }
main > section > .panel a, main > section > .panel button, main > section > .panel [tabindex] { pointer-events: auto; }

.scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 60vh; pointer-events: none; background: linear-gradient(180deg, rgba(15,21,26,0), rgba(15,21,26,.82) 55%, rgba(15,21,26,.92)); }
.scrim--tall { height: 70vh; background: linear-gradient(180deg, rgba(15,21,26,0), rgba(15,21,26,.82) 50%, rgba(15,21,26,.94)); }

.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; text-shadow: var(--shadow-text); }
.copy { flex: 1 1 var(--copy-basis, 300px); max-width: var(--copy-max, 480px); }
.copy .ts-eyebrow { margin-bottom: 16px; }
.h { font-size: clamp(28px, 3.4vw, 54px); line-height: 1; letter-spacing: -.01em; white-space: nowrap; color: var(--ts-mist); }
.h--gold { color: var(--ts-gold); }
.h--xl { font-size: clamp(34px, 4.6vw, 76px); line-height: .96; }
.lead { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--ts-mist); text-wrap: pretty; }
.lead--lg { margin-top: 18px; font-size: 17px; }
.lead-en { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ts-steel); font-style: italic; text-wrap: pretty; }

.stamps { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 28px; }
.stamps--center { align-items: center; }
.brandline { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ts-steel); letter-spacing: .06em; }
.brandline img { height: 24px; width: auto; }

/* desk / mob halves of every row */
.desk { text-shadow: none; }
.mob { display: none; flex-direction: column; gap: 12px; text-shadow: none; }
.full { width: min(var(--full, 560px), 100%); flex: 0 1 var(--full, 560px); }

/* ---- Small shared pieces ------------------------------------ */
.gold { color: var(--ts-gold); }
.is-gold { color: var(--ts-gold); }
.is-light { color: var(--ts-mist); }
.right { text-align: right; }
.start { align-items: flex-start; }
.self-start { align-self: flex-start; }
.stack2  { display: flex; flex-direction: column; gap: 2px; }
.stack4  { display: flex; flex-direction: column; gap: 4px; }
.stack12 { display: flex; flex-direction: column; gap: 12px; }
.stack14 { display: flex; flex-direction: column; gap: 14px; }
.stack16 { display: flex; flex-direction: column; gap: 16px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.gap8 { gap: 8px; }
.gap12 { gap: 12px; }
.i20 { width: 20px; height: 20px; color: var(--ts-gold); }
.i22 { width: 22px; height: 22px; color: var(--ts-gold); }
.kicker { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ts-steel); }
.glass { border: 1px solid var(--hair); border-radius: 6px; background: var(--glass); backdrop-filter: blur(10px); overflow: hidden; }
.btn-glass { border-color: rgba(230,237,242,.4); color: var(--ts-mist); backdrop-filter: blur(8px); }
.btn-light { border-color: rgba(230,237,242,.4); color: var(--ts-mist); }
.ts-tooltip::after { white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .02em; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag--m { border-color: var(--gold-45); color: var(--ts-mist); }
.tags.gap8 .tag--m { border-color: rgba(191,163,105,.5); }

.mstats { display: flex; gap: 16px 20px; }
.mstat { display: flex; flex-direction: column; gap: 2px; }
.mstat b, .stat b { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; color: var(--ts-gold); }
.mstat small, .stat small { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-steel); }
.mtitle { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1; color: var(--ts-mist); }

/* list item: icon · bold title · muted line */
.li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.li__b { display: flex; flex-direction: column; gap: 3px; }
.li__t { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.1; color: var(--ts-mist); }
.li__t.sm { font-size: 15px; }
.li__d { font-size: 13px; line-height: 1.4; color: var(--ts-steel); }
.li__d.xs { font-size: 12px; }

/* ---- 01 · Hero ---------------------------------------------- */
.panel--hero { justify-content: space-between; padding-bottom: 32px; }
.hero__spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 58% at 50% 52%, rgba(8,11,14,.72) 0%, rgba(8,11,14,.42) 45%, rgba(8,11,14,0) 100%); }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; }
.hero__logo { width: min(440px, 70vw); height: auto; filter: drop-shadow(0 10px 40px rgba(0,0,0,.6)); }
.hero__stack { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero__h { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 6.4vw, 92px); line-height: .92; letter-spacing: -.01em; color: var(--ts-mist); text-shadow: 0 4px 40px rgba(0,0,0,.7); text-wrap: balance; max-width: 16ch; }
.hero__h span { display: block; }
.hero__ghost { color: transparent; -webkit-text-stroke: 2px rgba(230,237,242,.9); }
.hero__p { margin: 0; max-width: 560px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ts-mist); text-shadow: 0 2px 20px rgba(0,0,0,.8); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero__foot { display: flex; flex-direction: column; gap: 20px; }
.ts-rule-caption > .t { color: var(--ts-mist); }
.hero__stamps { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hero__hint { display: none; }

/* ---- 02 · Armazenagem --------------------------------------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.cell { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.cell:first-child { border-right: 1px solid var(--hair); }
.cell .ts-panel-h { margin: 0; }
.cell__t { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; color: var(--ts-mist); }
.cell__d { font-size: 14px; line-height: 1.5; color: var(--ts-mist); text-wrap: pretty; }

/* ---- 03 · Transporte (Lista) -------------------------------- */
.list2 { gap: 0 28px; border-top: 1px solid var(--hair-2); }

/* ---- 04 · Carga (Editorial) --------------------------------- */
.ed__head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--hair-2); }
.ed__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; color: var(--ts-mist); }
.ed__meter { display: grid; grid-template-columns: 1fr 200px; gap: 20px; align-items: end; }
.ed__ends { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ed__end { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; color: var(--ts-mist); }
.ed__sub { font-size: 11px; color: var(--ts-steel); }
.ed__mid { padding-bottom: 4px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; border-bottom: 1px solid rgba(230,237,242,.3); overflow: visible; }
.bar { cursor: default; border-radius: 2px 2px 0 0; transition: filter .2s; }
.bar:hover { filter: brightness(1.15); }
.b1 { flex: 1;   height: 30%;  background: rgba(191,163,105,.45); }
.b2 { flex: 1.3; height: 45%;  background: rgba(191,163,105,.6); }
.b3 { flex: 1.8; height: 62%;  background: rgba(191,163,105,.8); }
.b4 { flex: 3;   height: 100%; background: var(--ts-gold); }
.bars--mini { height: 22px; gap: 3px; flex: 1; max-width: 120px; border-bottom: none; }
.bars--mini .bar { border-radius: 1px; }
.ed__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
.ed__col { padding: 14px 12px; border-right: 1px solid rgba(230,237,242,.12); }
.ed__col:first-child { padding-left: 0; }
.ed__col:last-child { padding-right: 0; border-right: none; }

/* ---- 05 · Passageiros (Specs) ------------------------------- */
.specs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spec { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.specs__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--hair-2); }
.specs__n { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1; color: var(--ts-mist); }
.seats { display: flex; flex-wrap: wrap; gap: 3px; max-width: 190px; justify-content: flex-end; }
.seats i { width: 8px; height: 8px; border-radius: 1.5px; background: var(--ts-gold); }
.seats i.off { background: none; border: 1px solid rgba(191,163,105,.55); }

/* ---- 06 · Cobertura (Infográfico + Faixa) ------------------- */
.routes { width: 100%; height: auto; display: block; overflow: visible; }
.routes path { fill: none; stroke-width: 1.5; stroke-dasharray: 4 5; marker-end: url(#arr); }
.routes__sp path { stroke: var(--ts-gold); opacity: .85; }
.routes__rj path { stroke: var(--ts-steel); opacity: .7; }
.routes__hub { fill: rgba(19,28,36,.85); stroke: rgba(191,163,105,.6); }
.routes text { font-family: var(--font-body); }
.routes .routes__big { fill: var(--ts-gold); font-family: var(--font-display); font-weight: 900; font-size: 36px; letter-spacing: -.02em; }
.routes .routes__city { fill: var(--ts-mist); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.routes .routes__meta { fill: var(--ts-steel); font-size: 9.5px; }
.routes__pt { fill: var(--ts-ink); stroke: var(--ts-gold); stroke-width: 2; }
.routes .routes__dest { fill: var(--ts-mist); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.routes .routes__axis { fill: var(--ts-steel); font-size: 10px; letter-spacing: .12em; }
.faixa { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); }
.faixa__c { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-right: 1px solid var(--hair); }
.faixa__c:first-child { padding-left: 0; }
.faixa__c:last-child { padding-right: 0; border-right: none; }
.faixa__n { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--ts-gold); }
.faixa__c .kicker { letter-spacing: .12em; }

/* ---- 07 · Backstage ----------------------------------------- */
.stats { display: flex; flex-wrap: wrap; gap: 16px 36px; padding-bottom: 14px; border-bottom: 1px solid var(--hair-2); align-self: stretch; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat b { font-size: 26px; }
.stat b.is-light { color: var(--ts-mist); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- 08 · Contato ------------------------------------------- */
.contacts { display: flex; flex-direction: column; text-shadow: none; border-top: 1px solid var(--hair-2); }
.contact { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--hair); color: var(--ts-mist); transition: color .2s; }
.contact:hover { color: var(--ts-gold-bright); }
.contact__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact__v { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1; color: inherit; overflow-wrap: anywhere; }
.contact__ar { font-size: 13px; color: var(--ts-gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .nav { display: flex; justify-content: space-between; padding: 12px 5vw; }
  .m-hide, .setlist, .lead-en, .m-rule, .desk { display: none !important; }
  .mob { display: flex; }
  .panel { padding: 80px 5vw calc(20px + env(safe-area-inset-bottom)); transition-duration: .35s; }
  main { scrollbar-width: none; }
  .hero__hint { display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ts-steel); }
  .hero__hint span { display: inline-block; animation: hint-bob 1.6s ease-in-out infinite; }
  @keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
  main::-webkit-scrollbar { display: none; }
  .nav { padding-top: calc(12px + env(safe-area-inset-top)); }
  .stamps { gap: 6px 16px; }
  .stamps .ts-stamp:last-child { text-align: right; }
  .hero__stamps .ts-stamp { font-size: 11px; }
  .bg-vignette, .bg-grain { display: none; }
  .btn-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15,21,26,.35); }
  .hero__logo { filter: none; }
  .h { white-space: normal; font-size: 30px; }
  .row { flex-direction: column; align-items: stretch; gap: 16px; }
  .copy, .full { max-width: none; width: 100%; flex: 0 0 auto; }
  .lead { font-size: 14px; line-height: 1.45; margin-top: 10px; }
  .scrim { height: 85%; }
  .stamps { margin-top: 14px; flex-wrap: wrap; }
  .stamps .ts-stamp { font-size: 11px; }
  .grid2 { grid-template-columns: 1fr; }
  .copy .ts-eyebrow { margin-bottom: 10px; }
  .ts-wa { padding: 8px 12px; font-size: 12px; }
  .wa-label { display: none; }
  .wa-short { display: inline; }
  .hero__h { font-size: clamp(30px, 9vw, 40px); max-width: none; }
  .hero, .hero__stack { gap: 18px; }
  .hero__logo { width: min(280px, 64vw); }
  .panel--hero .ts-btn { flex: 1 1 100%; justify-content: center; }
  .panel--contact .lead { display: none; }
}

@media (max-width: 1300px) and (max-height: 760px) {
  .lead-en { display: none; }
  .lead { font-size: 14px; margin-top: 10px; }
  .h { font-size: clamp(26px, 3vw, 40px); }
  .row { gap: 16px 32px; }
  .stamps { margin-top: 14px; }
  .copy .ts-eyebrow { margin-bottom: 10px; }
  .routes { max-height: 32vh; }
}

@media (max-height: 640px) {
  .panel { padding-top: 76px; padding-bottom: 20px; }
  .hero__logo { width: min(300px, 50vw); }
  .hero, .hero__stack { gap: 16px; }
  .hero__h { font-size: clamp(28px, 4.4vw, 48px); }
  .lead { font-size: 14px; margin-top: 8px; }
  .lead-en, .m-rule { display: none; }
  .scrim { height: 90%; }
  .stamps { margin-top: 12px; }
  .grid2 > div { padding: 12px; }
}

/* ---- Icon masks (declared here so relative URLs resolve from css/) ---- */
.ic-bus { -webkit-mask-image: url(../assets/icons/bus.svg); mask-image: url(../assets/icons/bus.svg); }
.ic-calendar { -webkit-mask-image: url(../assets/icons/calendar.svg); mask-image: url(../assets/icons/calendar.svg); }
.ic-driver { -webkit-mask-image: url(../assets/icons/driver.svg); mask-image: url(../assets/icons/driver.svg); }
.ic-flight-case { -webkit-mask-image: url(../assets/icons/flight-case.svg); mask-image: url(../assets/icons/flight-case.svg); }
.ic-hard-hat { -webkit-mask-image: url(../assets/icons/hard-hat.svg); mask-image: url(../assets/icons/hard-hat.svg); }
.ic-instagram { -webkit-mask-image: url(../assets/icons/instagram.svg); mask-image: url(../assets/icons/instagram.svg); }
.ic-mail { -webkit-mask-image: url(../assets/icons/mail.svg); mask-image: url(../assets/icons/mail.svg); }
.ic-shield { -webkit-mask-image: url(../assets/icons/shield.svg); mask-image: url(../assets/icons/shield.svg); }
.ic-strap { -webkit-mask-image: url(../assets/icons/strap.svg); mask-image: url(../assets/icons/strap.svg); }
.ic-tracking { -webkit-mask-image: url(../assets/icons/tracking.svg); mask-image: url(../assets/icons/tracking.svg); }
.ic-truck { -webkit-mask-image: url(../assets/icons/truck.svg); mask-image: url(../assets/icons/truck.svg); }
.ic-whatsapp { -webkit-mask-image: url(../assets/icons/whatsapp.svg); mask-image: url(../assets/icons/whatsapp.svg); }

/* ---- Bisect switches (set on <html> by js/debug.js from ?nofx / ?novideo / ?promote / ?nopromote) ---- */
html.nofx .bg-grain, html.nofx .bg-vignette { display: none; }
html.nofx .btn-glass, html.nofx .glass, html.nofx .setlist { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.novideo #bg { display: none; }

/* ---- iOS WebKit: explicit compositing order ------------------------------
   Only iOS/iPadOS WebKit understands -webkit-touch-callout, so this block never
   touches desktop or Android. An inline <video> is always its own composited
   layer; with the async scroller (main) above it, WebKit got the order of the
   overlap-promoted layers wrong and the video covered .nav, the buttons and the
   footer. Giving every sibling container its own layer makes the order follow
   the stacking order. Containers only (memory): never the .panel or buttons.
   ?nopromote turns it off for A/B on the device; ?promote turns it on anywhere. */
@supports (-webkit-touch-callout: none) {
  html:not(.nopromote) .bg, html:not(.nopromote) .bg-scrim,
  html:not(.nopromote) .bg-vignette, html:not(.nopromote) .bg-grain,
  html:not(.nopromote) main, html:not(.nopromote) .panels,
  html:not(.nopromote) .nav { -webkit-transform: translateZ(0); transform: translateZ(0); }
  html:not(.nopromote) .setlist { -webkit-transform: translateX(-50%) translateZ(0); transform: translateX(-50%) translateZ(0); }
}
html.promote .bg, html.promote .bg-scrim, html.promote .bg-vignette, html.promote .bg-grain,
html.promote main, html.promote .panels, html.promote .nav { transform: translateZ(0); }
html.promote .setlist { transform: translateX(-50%) translateZ(0); }

/* Reduced motion: keep short fades instead of the design system's hard cuts,
   so a paused/resumed video never flashes. The video itself keeps playing. */
@media (prefers-reduced-motion: reduce) {
  .panel { transition-duration: .35s !important; }
  .bg-video, .bg-poster { transition-duration: .3s !important; }
}