/* 2so.live homepage sections (cinematic redesign). Loaded after /site.css,
   which holds the shared tokens, type, buttons, cards, nav and footer.
   Served as /home.css (scripts/build-public.sh). */

.home .site-nav{position:fixed;left:0;right:0}
/* Magnetic primary button (pointer devices only; JS adds .is-magnetic) */
.mag{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),padding .35s cubic-bezier(.2,.8,.2,1),letter-spacing .35s ease,background-color .2s ease,color .2s ease}
.mag::after{content:'';position:absolute;inset:-1px;border:1px solid var(--accent);opacity:0;transition:inset .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease;pointer-events:none}
.is-magnetic .mag:hover{padding-left:40px;padding-right:40px;letter-spacing:.14em}
.is-magnetic .mag:hover::after{inset:-9px;opacity:.55}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);padding-top:var(--nav-h)}
.hero-media{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 110%,#262624 0%,#0e0e0d 55%,var(--surface) 100%)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.18) brightness(.5);opacity:0;transition:opacity 1.1s ease}
.hero-video.active{opacity:1}
.hero-veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(7,7,7,0) 5%,rgba(7,7,7,.25) 55%,var(--surface) 100%)}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:280px;background:linear-gradient(180deg,rgba(7,7,7,0),var(--surface))}
.hero-copy{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:48px 18px 140px;text-align:center}
.status-chip{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-logo{width:620px;max-width:100%;height:auto;aspect-ratio:1600/877;filter:drop-shadow(0 8px 28px rgba(0,0,0,.72))}
.hero-copy .tagline{max-width:640px}
.hero-actions{display:flex;align-items:center;gap:16px;margin-top:8px}
.hero-foot{position:absolute;z-index:4;left:0;right:0;bottom:32px}
.hero-foot .wrap{display:flex;align-items:flex-end;justify-content:space-between}
.hero-foot .scroll{display:flex;align-items:center;height:var(--tap);color:var(--ink-muted)}
.clips{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.clip-btns{display:flex;gap:8px}
.clip-btns button{position:relative;overflow:hidden;height:var(--tap);min-width:56px;padding:0 14px;border:1px solid var(--line);background:rgba(7,7,7,.62);color:var(--ink-muted)}
.clip-btns button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--page)}
.clip-btns .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--page)}
.clip-btns button[aria-pressed="true"] .prog{animation:prog 8s linear forwards}

/* ---------- Ticker ---------- */
.ticker{display:block;height:52px;overflow:hidden;background:var(--surface-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ticker[hidden]{display:none}
.ticker-track{display:flex;align-items:center;height:100%;width:max-content;animation:marquee 48s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap;color:var(--ink)}
.ticker-item .sep{color:var(--ink-muted)}

/* ---------- Next show ---------- */
.ticket{display:grid;grid-template-columns:170px minmax(0,1fr) 330px;gap:40px;align-items:stretch;padding:40px;border:1px solid var(--accent);background:linear-gradient(135deg,var(--accent-tint),var(--glass-low));box-shadow:0 0 50px rgba(0,239,209,.05)}
.ticket-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding-right:40px;border-right:1px solid var(--line);text-align:center}
.ticket-date .month{font-size:13px;letter-spacing:.15em}
.ticket-info{display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.ticket-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.ticket-count{display:flex;flex-direction:column;justify-content:center;gap:18px;padding-left:40px;border-left:1px solid var(--line)}
.ticket.has-flyer{grid-template-columns:250px minmax(0,1fr) 330px}
.has-flyer .ticket-date{display:none}
.ticket-flyer{display:block;align-self:center;aspect-ratio:4/5;border:1px solid var(--line);background:var(--bg,#050505)}
.ticket-flyer img{display:block;width:100%;height:100%;object-fit:contain}
.ticket-flyer:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.countdown div{display:flex;flex-direction:column;gap:6px}
.countdown .num{font-size:48px}
.fine{margin-top:16px;max-width:900px;color:var(--ink-muted)}
.show-empty{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:40px;border:1px solid var(--line);background:var(--glass)}
.show-loading{min-height:260px;color:var(--ink-muted)}
.more-shows{margin-top:40px}
.more-shows ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.more-shows li{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:24px;align-items:center;padding:18px 24px;border:1px solid var(--line);background:var(--glass)}
.more-name{display:flex;flex-direction:column;gap:4px;min-width:0}

/* ---------- Sound + story ---------- */
.sound-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:272px;gap:16px}
.sound-grid>*{padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:0}
.sound-grid .big{grid-column:span 2;grid-row:span 2;padding:36px}
.sound-grid .wide{grid-column:span 2}
.stack{display:flex;flex-direction:column;gap:12px}
.wave{display:flex;align-items:center;gap:3px;height:96px}
.wave i{flex:1;background:var(--line-input)}
.wave i.on{background:var(--accent)}
.sc-slot iframe{display:block;width:100%;height:166px;border:0;background:var(--surface-alt)}
.player .text-link{color:var(--ink-soft)}
.player .text-link:hover{color:var(--accent)}
.mix-btn{cursor:pointer;color:var(--ink)}
.mix-btn[aria-pressed="true"]{border-color:var(--accent)}
.eq.on i{animation:eq .8s ease-in-out infinite alternate}
.eq.on i:nth-child(2){animation-delay:.2s}.eq.on i:nth-child(3){animation-delay:.45s}.eq.on i:nth-child(4){animation-delay:.1s}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.player{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{padding:9px 12px;border:1px solid var(--line-input)}
.chips span.hot{border-color:var(--accent);color:var(--accent)}
.clip-card{position:relative;overflow:hidden;padding:0 !important;background:var(--surface-alt)}
.clip-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.18) brightness(.6)}
.clip-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,0) 40%,rgba(7,7,7,.9) 100%)}
.clip-card .clip-tag{position:absolute;z-index:2;left:24px;top:24px;padding:8px 10px;background:var(--nav);border:1px solid var(--line)}
.clip-card figcaption{position:absolute;z-index:2;left:24px;right:24px;bottom:22px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px}
.clip-card figcaption .meta{white-space:nowrap}

/* ---------- On the record ---------- */
.record[hidden]{display:none}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stat{padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.stat+.stat{padding-left:32px;border-left:1px solid var(--line)}
.stat .num{font-size:120px}
.highlight{padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;transition:background-color .2s ease}
.highlight:hover{background:var(--accent-wash);color:var(--ink)}
.highlight-top{display:flex;justify-content:space-between;align-items:flex-start}
.highlight .t-md{overflow-wrap:anywhere}
.block{margin-top:56px;display:flex;flex-direction:column;gap:20px}
.rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.room{height:104px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);background:var(--glass-low)}
.room .t-sm{font-size:20px}
.billing{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
.billing>div{display:flex;flex-direction:column;gap:14px}
.billing>div[hidden]{display:none}

/* ---------- Talent buyer hub ---------- */
.tabs{display:flex;gap:40px;border-bottom:1px solid var(--line);margin-bottom:40px}
.tabs button{height:56px;padding:0;margin-bottom:-1px;display:flex;align-items:center;gap:12px;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--ink-muted)}
.tabs button:hover{color:var(--ink)}
.tabs button .n{color:var(--ink-muted)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button[aria-selected="true"] .n{color:var(--accent)}
.gig-row{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center;padding:22px 16px;border-bottom:1px solid var(--line);transition:background-color .2s ease}
.gig-row:hover{background:var(--accent-wash)}
.gig-row .bst{text-transform:uppercase}
.panel-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:32px}
.kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kit a{min-height:220px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}
.book-form{display:flex;flex-direction:column;gap:20px;padding:32px}
.radios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.radios button{min-height:52px;padding:0 16px;text-align:left;border:1px solid var(--line-input);background:transparent;color:var(--ink);transition:border-color .2s ease,color .2s ease}
.radios button:hover{border-color:var(--accent)}
.radios button[aria-checked="true"]{border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}

/* ---------- Footer / contact ---------- */
.site-foot{position:relative;overflow:hidden;background:var(--surface);border-top:1px solid var(--line)}
.mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.haze{position:absolute;border-radius:50%;filter:blur(56px);will-change:transform}
.haze.a{left:-8%;top:4%;width:900px;height:900px;background:radial-gradient(circle,rgba(0,239,209,.08),rgba(0,239,209,0) 65%);animation:driftA 28s ease-in-out infinite}
.haze.b{right:-10%;top:18%;width:820px;height:820px;background:radial-gradient(circle,rgba(242,242,239,.07),rgba(242,242,239,0) 65%);animation:driftB 32s ease-in-out infinite}
.contact{position:relative;padding:128px 0 96px}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:start}
.contact-main{display:flex;flex-direction:column;gap:28px}
.email-link{align-self:flex-start;font:600 20px/28px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid var(--ink)}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.socials a{height:var(--tap);padding:0 16px;display:flex;align-items:center;border:1px solid var(--line)}
.socials a:hover{border-color:var(--accent)}
.alerts{display:flex;flex-direction:column;gap:18px;padding:36px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.kit-shell{min-height:120px}
.kit-shell .formkit-header h2{line-height:1.2}

/* ---------- Motion ---------- */
.js .reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.in>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.js .reveal.in>*:nth-child(2){animation-delay:.08s}.js .reveal.in>*:nth-child(3){animation-delay:.16s}.js .reveal.in>*:nth-child(4){animation-delay:.24s}
.rise{animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@keyframes prog{from{width:0}to{width:100%}}
@keyframes driftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(90px,-50px,0) scale(1.15)}}
@keyframes driftB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-70px,60px,0) scale(.9)}}



/* ---------- Quick links (the link-in-bio row under the hero) ---------- */
.quick-links{padding:40px 0 8px;background:var(--surface)}
.quick-links h2{margin-bottom:14px}
.ql-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ql{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:112px;padding:16px 16px 14px;border:1px solid var(--line);background:var(--glass-low);transition:border-color .2s ease,background-color .2s ease}
.ql:hover{border-color:var(--accent);background:var(--accent-wash);color:var(--ink)}
.ql .t-sm{font-size:20px}
.ql .arr{position:absolute;top:14px;right:14px;font-family:var(--mono);color:var(--ink-muted)}
.ql:hover .arr{color:var(--accent)}
.ql[hidden]{display:none}
#ql-tickets{border-color:var(--accent);background:var(--accent-tint)}
.email-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}

/* ---------- Tablet (900px and below) ---------- */
@media (max-width:900px){
  .ticket{grid-template-columns:140px minmax(0,1fr);gap:32px}
  .ticket.has-flyer{grid-template-columns:200px minmax(0,1fr)}
  .ticket-count{grid-column:1/-1;padding:24px 0 0;border-left:0;border-top:1px solid var(--line)}
  .sound-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats .highlight{grid-column:1/-1}
  .rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book,.contact .wrap{grid-template-columns:1fr;gap:40px}
}

/* ---------- Phone (620px and below) ---------- */
@media (max-width:620px){
  .hero-copy{gap:24px;padding-bottom:150px}
  .hero-actions{flex-direction:column;align-self:stretch;gap:10px}
  .hero-actions .button{width:100%;min-height:56px}
  .has-show .hero-book{display:none}
  .quick-links{padding:28px 0 0}
  .ql-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ql{min-height:96px;padding:14px}
  .ql .t-sm{font-size:18px}
  .hero-foot{bottom:20px}
  .clips .meta{display:none}
  .ticket{grid-template-columns:80px minmax(0,1fr);gap:10px 18px;padding:20px}
  .ticket-date{grid-row:1/span 3;padding-right:18px;gap:6px}
  .ticket.has-flyer{grid-template-columns:80px minmax(0,1fr)}
  .ticket-flyer{grid-column:1/-1;grid-row:1;margin-bottom:10px}
  .has-flyer .ticket-date{display:flex;grid-row:2/span 3}
  .ticket-when{display:none}
  .ticket-date .meta{font-size:12px;line-height:16px}
  .ticket-info{display:contents}
  .ticket-info>*{grid-column:2}
  .ticket-actions{grid-column:1/-1;flex-direction:column;margin-top:8px}
  .ticket-actions .button{width:100%;min-height:56px}
  .more-shows li{grid-template-columns:minmax(0,1fr);gap:10px;padding:18px}
  .more-shows li .button{width:100%;min-height:48px}
  .ticket-count{padding-top:20px}
  .countdown .num{font-size:40px}
  .sound-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .sound-grid .big,.sound-grid .wide{grid-column:auto;grid-row:auto}
  .sound-grid>*,.sound-grid .big{padding:20px;min-height:220px}
  .clip-card{min-height:260px}
  .wave{height:64px}
  .stat{padding:24px 0}
  .stat+.stat{padding-left:18px}
  .stat .num{font-size:min(64px,16vw)}
  .highlight{padding:20px}
  .block,.billing{margin-top:40px}
  .rooms{gap:10px}
  .room .t-sm{font-size:min(20px,4.6vw);overflow-wrap:break-word}
  .room{height:auto;min-height:92px;padding:16px;gap:10px}
  .billing{grid-template-columns:1fr;gap:28px}
  .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:24px}
  .tabs button{flex-direction:column;justify-content:center;gap:2px;height:64px;font-size:12px}
  .gig-row{grid-template-columns:1fr;gap:4px;padding:18px 0}
  .gig-row:hover{background:none}
  .panel-foot{flex-direction:column;align-items:flex-start}
  .kit{gap:10px}
  .kit a{min-height:0;padding:18px}
  .kit .t-sm{font-size:20px}
  .book-form{padding:20px}
  .contact{padding:80px 0 64px}
  .alerts{padding:20px}
  .socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .hero-video{transition:none}
}