/* ===========================================================================
   Haven TwinScreen Jumbotron — public placement.
   Nothing in this file renders unless .hts exists, and .hts only exists when a
   validated campaign is live. Campaign-off costs zero geometry.
   =========================================================================== */
/* Base (compact/mobile): the placement is its own two-panel block under the banner. */
.hts{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "d d";align-items:start;gap:12px;padding:12px clamp(10px,3vw,18px) 14px}
.hts__disclosure{grid-area:d;justify-self:center;margin:2px 0 0;padding:4px 12px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#F3ECE0;background:rgba(26,14,36,.62);backdrop-filter:blur(6px);pointer-events:none}
.hts__wing{position:relative;min-width:0}
/* Intrusion boundary: a wing may break its own frame OUTWARD only. It can never
   grow toward the protected centre, so it cannot cover logo, nav or headlines. */
.hts__wing--left{clip-path:inset(-40px 0 -40px -40px)}
.hts__wing--right{clip-path:inset(-40px -40px -40px 0)}
.hts__hit{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;border-radius:16px}
.hts__hit:hover{text-decoration:none}
.hts__hit:focus-visible{outline:3px solid var(--mh-gold-bright);outline-offset:4px}
.hts__stage{position:relative;display:block;aspect-ratio:5/4;border-radius:16px;overflow:hidden;isolation:isolate;background:var(--mh-night-2);box-shadow:0 18px 40px rgba(26,14,36,.42),inset 0 1px 0 rgba(255,255,255,.14);transform-style:preserve-3d}
.hts__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hts__slot{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(120% 130% at 78% -8%,rgba(228,200,120,.34),transparent 58%),linear-gradient(160deg,#4A2A5C,#2B153D)}
.hts__slotglyph{font-size:2.6rem;color:rgba(228,200,120,.9);font-style:normal;text-shadow:0 6px 18px rgba(0,0,0,.5)}
.hts__plane{position:absolute;inset:0;display:block;pointer-events:none}
.hts__plane--bg{background:radial-gradient(90% 80% at 50% 110%,rgba(107,63,160,.55),transparent 65%)}
.hts__plane--mid{background:linear-gradient(0deg,rgba(20,12,28,.78) 2%,rgba(20,12,28,.18) 46%,transparent 72%)}
.hts__plane--fg{display:grid;place-items:center;z-index:3}
.hts__cut{font-style:normal;font-size:clamp(2.4rem,7vw,4.4rem);line-height:1;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
.hts__sweep{position:absolute;inset:0;z-index:4;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.32) 50%,transparent 62%);transform:translateX(-120%);pointer-events:none}
/* Legibility plate: the copy sits on plum, not straight on the artwork. */
.hts__copyblock{position:relative;display:flex;flex-direction:column;gap:5px;padding:12px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(43,21,61,.9),rgba(26,14,36,.94));border:1px solid rgba(228,200,120,.34);box-shadow:0 10px 24px rgba(26,14,36,.34),inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden}
/* Glitter: fine gold speckle over the plate, purely decorative. */
.hts__copyblock::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,245,214,.95),transparent 60%),radial-gradient(1.5px 1.5px at 78% 16%,rgba(228,200,120,.9),transparent 60%),radial-gradient(1px 1px at 34% 74%,rgba(255,245,214,.8),transparent 60%),radial-gradient(1.5px 1.5px at 62% 62%,rgba(228,200,120,.85),transparent 60%),radial-gradient(1px 1px at 90% 82%,rgba(255,245,214,.75),transparent 60%),radial-gradient(1px 1px at 24% 44%,rgba(228,200,120,.7),transparent 60%);opacity:.85}
/* MusicHaven identity type: gold kicker, white serif headline, cream sub — all
   at full opacity with a glitter polish, never a faded tint. */
.hts__kicker{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mh-gold-bright);text-shadow:0 1px 0 rgba(26,14,36,.7),0 0 12px rgba(228,200,120,.55)}
.hts__headline{font-family:var(--mh-serif);font-weight:900;font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.14;color:#FFF;text-wrap:pretty;text-shadow:0 2px 6px rgba(26,14,36,.85),0 0 18px rgba(228,200,120,.3)}
.hts__sub{font-size:.85rem;line-height:1.45;font-weight:600;color:var(--mh-night-text);text-shadow:0 1px 4px rgba(26,14,36,.8)}
.hts__cta{align-self:flex-start;margin-top:4px;padding:9px 18px;border-radius:999px;font-size:.8rem;font-weight:900;color:var(--mh-ink);background:var(--mh-grad-gold);box-shadow:0 6px 16px rgba(200,164,77,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.hts__audio{position:absolute;right:10px;top:10px;z-index:5;min-height:34px;padding:6px 12px;border-radius:999px;cursor:pointer;font:inherit;font-size:.7rem;font-weight:800;color:#F3ECE0;background:rgba(26,14,36,.68);border:1px solid rgba(243,236,224,.34);backdrop-filter:blur(6px)}
.hts__audio:hover{background:rgba(26,14,36,.86)}
.hts__clock{display:flex;gap:6px;margin:6px 0 2px}
.hts__clockcell{display:flex;flex-direction:column;align-items:center;min-width:44px;padding:6px 8px;border-radius:12px;background:rgba(26,14,36,.66);border:1px solid rgba(228,200,120,.4)}
.hts__clocknum{font-size:1.15rem;font-weight:900;color:#FFF;font-variant-numeric:tabular-nums;line-height:1}
.hts__clocklabel{font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,236,224,.7);margin-top:3px}
.hts__postdrop{margin:6px 0 2px;font-family:var(--mh-serif);font-weight:900;font-size:1.3rem;color:var(--mh-gold-bright)}

/* ---- Motion. Every animation is gated on no-preference AND viewability. ---- */
@media (prefers-reduced-motion:no-preference){
.hts[data-hts-motion="on"] .hts__sweep{animation:hts-sweep 5.2s cubic-bezier(.4,0,.2,1) infinite}
.hts[data-hts-motion="on"] .hts__wing--right .hts__sweep{animation-delay:1.1s}
.hts[data-hts-motion="on"][data-hts-variant="split-story"] .hts__wing--left .hts__media,
.hts[data-hts-motion="on"][data-hts-variant="split-story"] .hts__wing--left .hts__slot{animation:hts-push 12s ease-in-out infinite alternate}
.hts[data-hts-motion="on"][data-hts-variant="split-story"] .hts__wing--right .hts__copyblock{animation:hts-payoff 5.2s ease-out infinite}
.hts[data-hts-motion="on"][data-hts-variant="futureshock"] .hts__stage{perspective:1200px}
.hts[data-hts-motion="on"][data-hts-variant="futureshock"] .hts__plane--fg{animation:hts-approach 6.4s cubic-bezier(.34,1.2,.4,1) infinite;transform:translate3d(calc(var(--hts-px,0)*10px),calc(var(--hts-py,0)*7px),0)}
.hts[data-hts-motion="on"][data-hts-variant="futureshock"] .hts__plane--mid{transform:translate3d(calc(var(--hts-px,0)*5px),calc(var(--hts-py,0)*4px),0);transition:transform .18s ease-out}
.hts[data-hts-motion="on"][data-hts-variant="toonshift"] .hts__media,
.hts[data-hts-motion="on"][data-hts-variant="toonshift"] .hts__slot{animation:hts-toon 7s steps(1,end) infinite}
.hts[data-hts-motion="on"][data-hts-variant="portal"] .hts__plane--fg{animation:hts-portal 6s cubic-bezier(.4,0,.2,1) infinite}
.hts[data-hts-motion="on"][data-hts-variant="dropclock"] .hts__clockcell{animation:hts-tick 1s steps(2,end) infinite}
.hts[data-hts-motion="on"] [data-hts-kinetic="punch"] .hts__headline{animation:hts-punch 5s cubic-bezier(.2,1.4,.3,1) infinite}
.hts[data-hts-motion="on"] [data-hts-kinetic="track"] .hts__headline{animation:hts-track 5s cubic-bezier(.2,.8,.2,1) infinite}
.hts[data-hts-motion="on"] [data-hts-kinetic="stack"] .hts__headline{animation:hts-stack 5s cubic-bezier(.2,.8,.2,1) infinite}
.hts[data-hts-motion="on"] [data-hts-kinetic="snap"] .hts__headline{animation:hts-snap 4.4s cubic-bezier(.2,1.8,.3,1) infinite}
.hts[data-hts-motion="on"] [data-hts-kinetic="scan"] .hts__headline{animation:hts-scan 5.4s cubic-bezier(.4,0,.2,1) infinite}
.hts[data-hts-motion="on"] [data-hts-kinetic="lyric"] .hts__headline{animation:hts-lyric 4.8s steps(1,end) infinite}
.hts[data-hts-motion="on"] .hts__copyblock::before{animation:hts-glitter 3.6s ease-in-out infinite alternate}
}
@keyframes hts-glitter{from{opacity:.5}to{opacity:1}}
@keyframes hts-sweep{0%,58%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
@keyframes hts-push{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes hts-payoff{0%,12%{opacity:.35;transform:translateY(8px)}26%,100%{opacity:1;transform:none}}
@keyframes hts-approach{0%,44%{transform:translateZ(0) scale(1)}62%{transform:translateZ(70px) scale(1.17)}86%,100%{transform:translateZ(0) scale(1)}}
@keyframes hts-toon{0%,48%{filter:none}50%,100%{filter:saturate(1.7) contrast(1.5) brightness(1.06)}}
@keyframes hts-portal{0%,10%{clip-path:circle(0% at 50% 56%)}46%,88%{clip-path:circle(78% at 50% 56%)}100%{clip-path:circle(0% at 50% 56%)}}
@keyframes hts-tick{0%,49%{border-color:rgba(228,200,120,.4)}50%,100%{border-color:rgba(228,200,120,.85)}}
@keyframes hts-punch{0%,8%{opacity:0;transform:scale(1.5)}18%,86%{opacity:1;transform:none}100%{opacity:1}}
@keyframes hts-track{0%,8%{opacity:0;letter-spacing:.5em}22%,86%{opacity:1;letter-spacing:normal}100%{opacity:1}}
@keyframes hts-stack{0%,8%{opacity:0;transform:translateY(18px) skewY(6deg)}24%,86%{opacity:1;transform:none}100%{opacity:1}}
@keyframes hts-snap{0%,10%{transform:scaleX(.6)}26%,86%{transform:none}100%{transform:none}}
@keyframes hts-scan{0%,8%{clip-path:inset(0 100% 0 0)}30%,86%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes hts-lyric{0%,10%{opacity:.25}24%,86%{opacity:1}100%{opacity:.25}}

/* ---- Campaign-on header geometry. Only applies when a campaign is live. ----
   The BAND becomes the three-column grid and the banner occupies the centre
   track, so a wing cannot overlap the identity at any width — it is not a
   z-index or offset rule, the tracks simply do not intersect. */
@media (min-width:1180px){
.mh-brandband--banner:has(.hts){
  display:grid;grid-template-columns:var(--hts-wing) minmax(0,1fr) var(--hts-wing);
  grid-template-rows:auto auto auto;align-items:center;
  column-gap:clamp(14px,1.6vw,28px);padding:clamp(10px,1.2vw,18px) clamp(12px,1.4vw,22px) 0}
.mh-brandband--banner:has(.hts) .mh-brandband__banner{grid-column:2;grid-row:1;width:100%}
.mh-brandband--banner:has(.hts) .mh-utilitybar{grid-column:1/-1;grid-row:3}
.hts{display:contents}
.hts__wing--left{grid-column:1;grid-row:1}
.hts__wing--right{grid-column:3;grid-row:1}
.hts__disclosure{grid-column:2;grid-row:2;justify-self:center;margin:8px 0 0}
.hts__stage{aspect-ratio:5/4}
}
/* Below the measured desktop minimum there is no honest flank inventory. */
@media (max-width:1179px){
.hts__wing--left{grid-area:a;clip-path:none}
.hts__wing--right{grid-area:b;clip-path:none}
.hts__stage{aspect-ratio:16/10}
.hts__headline{font-size:clamp(.92rem,3.2vw,1.1rem)}
.hts__hit{min-height:44px}
}
@media (max-width:479px){
.hts{gap:10px;padding:10px 12px 12px}
.hts__cta{padding:11px 16px;min-height:44px;display:inline-flex;align-items:center}
.hts__audio{min-height:44px;min-width:44px}
.hts__clockcell{min-width:38px;padding:5px 6px}
}
@media (prefers-reduced-motion:reduce){.hts__sweep{display:none}.hts__plane--fg{transform:none!important}}