/* The Theater home: hero, the programme, the Table of Spades fanned as a hand,
   the six playable puzzles, and a word from Zero. Few lines, generous space. */
body.theater.view-home .content-section { padding:104px 0; }
body.theater .section-head { margin-bottom:38px; }
body.theater .section-head h2,body.theater .home-table-copy h2 { margin-top:16px; font:400 clamp(31px,3.6vw,46px)/1.2 var(--display); letter-spacing:-.04em; }
body.theater .section-head>p:not(.event-label) { max-width:52ch; margin-top:16px; color:var(--silver); font-size:15px; line-height:1.8; }

/* the programme: now, next, last */
body.theater .bill { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
body.theater .bill-item { position:relative; overflow:hidden; padding:34px 34px 8px 0; }
body.theater .bill-item+.bill-item { padding-left:34px; border-left:1px solid var(--line); }
body.theater .bill-item h3 { position:relative; z-index:1; margin:16px 0 12px; font:400 clamp(26px,2.6vw,33px)/1.25 var(--display); letter-spacing:-.03em; }
body.theater .bill-item>p:not(.event-label) { position:relative; z-index:1; max-width:28ch; color:var(--silver); font-size:14px; line-height:1.75; }
body.theater .bill-item .text-link { position:relative; z-index:1; display:inline-block; margin-top:12px; }
body.theater .bill-item .button { margin-top:6px; }
body.theater .bill .event-numeral { position:absolute; top:4px; right:-4px; font:400 132px/1 var(--display); letter-spacing:-.06em; color:rgba(255,255,255,.045); pointer-events:none; }
body.theater .bill-winner { display:flex; align-items:center; gap:12px; margin-top:14px; color:var(--ink)!important; }
body.theater .bill-card { display:inline-flex; align-items:center; gap:2px; padding:5px 7px; border-radius:3px; background:var(--ink); color:#000; font:400 13px/1 var(--display); transform:rotate(-6deg); }
body.theater .bill-card svg { width:10px; height:11px; }

/* the Table of Spades, fanned */
body.theater .home-table { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
body.theater .home-table-copy>p:not(.event-label) { max-width:44ch; margin-top:18px; color:var(--silver); font-size:15px; line-height:1.85; }
body.theater .home-table-copy .home-links { display:flex; flex-wrap:wrap; gap:6px 30px; margin-top:22px; }
body.theater.view-home .hero-actions { flex-direction:column; align-items:flex-start; gap:18px; }
body.theater .hero-links { display:flex; flex-wrap:wrap; gap:6px 30px; }
body.theater .hero-actions .hero-secondary { font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
@media(max-width:360px) { body.theater .hero-links { flex-direction:column; gap:2px; } }
body.theater .fan { --w:74px; --h:104px; position:relative; height:calc(var(--h) + 128px); margin:0; padding:0; list-style:none; }
body.theater .fan-seat { --lift:0px; position:absolute; left:50%; bottom:74px; width:var(--w); height:var(--h); margin-left:calc(var(--w) / -2); transform-origin:50% 250%; transform:rotate(var(--r)) translateY(var(--lift)); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
body.theater .fan-seat:nth-child(1){--r:-36deg;--n:0} body.theater .fan-seat:nth-child(2){--r:-30deg;--n:1} body.theater .fan-seat:nth-child(3){--r:-24deg;--n:2}
body.theater .fan-seat:nth-child(4){--r:-18deg;--n:3} body.theater .fan-seat:nth-child(5){--r:-12deg;--n:4} body.theater .fan-seat:nth-child(6){--r:-6deg;--n:5}
body.theater .fan-seat:nth-child(7){--r:0deg;--n:6} body.theater .fan-seat:nth-child(8){--r:6deg;--n:7} body.theater .fan-seat:nth-child(9){--r:12deg;--n:8}
body.theater .fan-seat:nth-child(10){--r:18deg;--n:9} body.theater .fan-seat:nth-child(11){--r:24deg;--n:10} body.theater .fan-seat:nth-child(12){--r:30deg;--n:11}
body.theater .fan-seat:nth-child(13){--r:36deg;--n:12}
body.theater .fan-seat:hover,body.theater .fan-seat:focus-within { --lift:-18px; z-index:20; }
body.theater .fan-card { position:relative; display:block; width:100%; height:100%; border-radius:5px; text-decoration:none; box-shadow:-3px 5px 14px rgba(0,0,0,.65); }
body.theater .fan-card:focus-visible { outline:1px solid #fff; outline-offset:4px; }
body.theater .fan-face { background:#f4f2ee; color:#0b0b0b; }
body.theater .fan-rank { position:absolute; top:7px; left:7px; display:flex; flex-direction:column; align-items:center; font:400 16px/1 var(--display); }
body.theater .fan-rank svg { width:10px; height:11px; margin-top:3px; }
body.theater .fan-pip { position:absolute; inset:0; display:grid; place-items:center; }
body.theater .fan-pip svg { width:26px; height:30px; }
body.theater .fan-back { border:1px solid #474747; background-color:#0a0a0a; background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.05) 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,rgba(255,255,255,.05) 5px 6px); box-shadow:inset 0 0 0 4px #0a0a0a,inset 0 0 0 5px #2c2c2c,-3px 5px 14px rgba(0,0,0,.65); cursor:default; }
body.theater .fan-caption { min-height:1.7em; margin-top:2px; text-align:center; font:italic 400 14px/1.7 var(--display); color:var(--silver); }
body.theater .home-fan.is-revealed .fan-seat { animation:fan-deal .9s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--n) * 45ms + 120ms); }
@keyframes fan-deal { from { opacity:0; transform:rotate(0deg) translateY(12px); } }

/* a word from Zero */
body.theater.view-home .home-story { padding:118px 0 96px; text-align:center; }
body.theater .story-inner { max-width:640px; margin:0 auto; }
body.theater .story-mark { display:block; width:32px; height:auto; margin:0 auto 28px; opacity:.75; }
body.theater .home-story h2 { margin:18px auto 28px; max-width:16ch; font:400 clamp(30px,3.6vw,44px)/1.25 var(--display); letter-spacing:-.04em; }
body.theater .home-story p:not(.event-label) { max-width:54ch; margin:0 auto 20px; color:var(--silver); font-size:15px; line-height:1.95; }
body.theater .home-story .text-link { display:inline-block; margin-top:10px; }

@media(max-width:900px) {
  body.theater .bill-item { padding-right:22px; }
  body.theater .bill-item+.bill-item { padding-left:22px; }
  body.theater .home-table { grid-template-columns:1fr; gap:34px; }
}
@media(max-width:700px) {
  body.theater.view-home .content-section { padding:68px 0; }
  body.theater .section-head { margin-bottom:28px; }
  body.theater .section-head h2,body.theater .home-table-copy h2 { font-size:31px; }
  body.theater .bill { grid-template-columns:1fr; }
  body.theater .bill-item,body.theater .bill-item+.bill-item { padding:28px 0 22px; border-left:0; }
  body.theater .bill-item+.bill-item { border-top:1px solid var(--line); }
  body.theater .bill .event-numeral { font-size:112px; }
  body.theater .fan { --w:60px; --h:84px; }
  body.theater .fan-seat { bottom:60px; }
  body.theater .fan-rank { top:5px; left:5px; font-size:13px; }
  body.theater .fan-pip svg { width:21px; height:24px; }
  body.theater.view-home .home-story { padding:80px 0 64px; }
  body.theater .home-story h2 { font-size:30px; }
}
@media(prefers-reduced-motion:reduce) {
  body.theater .home-fan.is-revealed .fan-seat { animation:none; }
  body.theater .fan-seat { transition:none; }
}


/* ---- The curtain: black velvet, once per visit. Shown only after /curtain-gate.js lowers it. */
body.theater .curtain { display:none; }
html.curtain-down body.theater { overflow:hidden; }
html.curtain-down body.theater .curtain { position:fixed; inset:0; z-index:55; display:grid; place-items:center; overflow:hidden; background:#000; }
body.theater .curtain-panel { position:absolute; top:0; bottom:0; width:50.5%; background:radial-gradient(120% 55% at 50% 0%,rgba(255,255,255,.06),transparent 60%),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.7)),url('/theater-assets/brand/curtain.webp') center top/auto 100% repeat-x,#050505; transition:transform 1.7s cubic-bezier(.72,0,.18,1) .2s; will-change:transform; }
body.theater .curtain-left { left:0; transform-origin:left center; box-shadow:inset 0 -160px 140px -70px #000,inset -40px 0 50px -30px #000; }
body.theater .curtain-right { right:0; transform-origin:right center; box-shadow:inset 0 -160px 140px -70px #000,inset 40px 0 50px -30px #000; }
body.theater .curtain-valance { position:absolute; left:0; right:0; top:0; height:11vh; min-height:64px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.45)),url('/theater-assets/brand/curtain.webp') center 30%/auto 900% repeat-x,#080808; box-shadow:0 18px 30px rgba(0,0,0,.85); -webkit-mask-image:radial-gradient(48px 26px at 50% 100%,transparent 98%,#000) 0 0/96px 100%; mask-image:radial-gradient(48px 26px at 50% 100%,transparent 98%,#000) 0 0/96px 100%; transition:transform 1.4s cubic-bezier(.72,0,.18,1) .5s; }
body.theater .curtain-stage { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; padding:0 24px; text-align:center; transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
body.theater .curtain-stage::before { content:''; position:absolute; z-index:-1; left:50%; top:46%; width:min(760px,130vw); height:min(560px,90vh); transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(255,255,255,.085),transparent); pointer-events:none; }
body.theater .curtain-mark { width:28px; height:auto; opacity:.85; animation:curtain-rise 1.1s cubic-bezier(.2,.7,.2,1) .2s both; }
body.theater .curtain-greeting { margin-top:30px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--silver); animation:curtain-rise 1.1s cubic-bezier(.2,.7,.2,1) .45s both; }
body.theater .curtain-title { margin-top:14px; font:400 clamp(54px,9vw,112px)/1.05 var(--display); letter-spacing:-.05em; animation:curtain-rise 1.3s cubic-bezier(.2,.7,.2,1) .65s both; }
body.theater .curtain-actions { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:44px; animation:curtain-rise 1.1s cubic-bezier(.2,.7,.2,1) 1.05s both; }
body.theater .curtain-actions .button { min-width:180px; }
body.theater .curtain.is-opening { pointer-events:none; }
body.theater .curtain.is-opening .curtain-stage { opacity:0; transform:scale(.97); }
body.theater .curtain.is-opening .curtain-left { transform:translateX(-101%); }
body.theater .curtain.is-opening .curtain-right { transform:translateX(101%); }
body.theater .curtain.is-opening .curtain-valance { transform:translateY(-110%); }
body.theater .curtain.is-opening { background:transparent; transition:background .6s ease .3s; }
@keyframes curtain-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }


@media(max-width:700px) {
  body.theater .curtain-actions { margin-top:36px; }
}
@media(prefers-reduced-motion:reduce) {
  body.theater .curtain *,body.theater .curtain-panel { animation:none!important; transition:none!important; }
}

/* ---- The closed curtain: before the Theater opens, there is no way in. */
body.theater.view-teaser .curtain.is-closed { position:relative; display:grid; place-items:center; min-height:100vh; min-height:100svh; overflow:hidden; background:#000; padding:13vh 0 8vh; }
body.theater .curtain.is-closed .curtain-left { animation:curtain-sway-left 9s ease-in-out infinite alternate; }
body.theater .curtain.is-closed .curtain-right { animation:curtain-sway-right 9s ease-in-out infinite alternate; }
body.theater .curtain-promise { margin-top:30px; animation:curtain-rise 1.1s cubic-bezier(.2,.7,.2,1) 1s both; }
body.theater .curtain-promise p { color:var(--silver); font-size:15px; line-height:1.85; }
body.theater .curtain-soon { margin-top:26px; font:italic 400 24px/1.4 var(--display); animation:curtain-rise 1.2s cubic-bezier(.2,.7,.2,1) 1.4s both; }
body.theater .curtain-follow { display:inline-flex; align-items:center; min-height:44px; margin-top:26px; color:var(--silver); font-size:11px; letter-spacing:.22em; text-transform:uppercase; text-decoration:none; animation:curtain-rise 1.1s cubic-bezier(.2,.7,.2,1) 1.7s both; transition:color .35s; }
body.theater .curtain-follow:hover,body.theater .curtain-follow:focus-visible { color:var(--ink); }
@keyframes curtain-sway-left { from { transform:translateX(0); } to { transform:translateX(-.6%); } }
@keyframes curtain-sway-right { from { transform:translateX(0); } to { transform:translateX(.6%); } }
@media(prefers-reduced-motion:reduce) { body.theater .curtain.is-closed * { animation:none!important; } }

/* ---- Zero's card: the Z on its face; turned over, the smile and a handwritten welcome. */
body.theater.view-home .hero-promise { max-width:24ch; font:400 clamp(20px,1.9vw,24px)/1.5 var(--display); letter-spacing:-.02em; color:var(--ink); }
body.theater .hero-path { max-width:44ch; margin-top:16px; color:var(--silver); font-size:15px; line-height:1.8; }
body.theater .zero-card { width:min(300px,100%); aspect-ratio:5/7; }
body.theater .zero-card-front { background:radial-gradient(120% 75% at 50% 28%,#1f1f1f,#070707 72%); border:1px solid #3a3a3a; box-shadow:inset 0 0 0 9px #0a0a0a,inset 0 0 0 10px #303030,0 40px 70px -20px rgba(0,0,0,.85); }
body.theater .zc-corner { position:absolute; display:flex; flex-direction:column; align-items:center; gap:5px; font:400 22px/1 var(--display); color:var(--ink); }
body.theater .zc-corner svg { width:13px; height:15px; }
body.theater .zc-top { top:22px; left:22px; }
body.theater .zc-bottom { right:22px; bottom:22px; transform:rotate(180deg); }
body.theater .zero-card .zc-mark { display:block; width:88px; height:auto; object-fit:initial; filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
body.theater .zc-name { position:absolute; left:0; right:0; top:68%; text-align:center; font-size:10px; letter-spacing:.42em; text-indent:.42em; text-transform:uppercase; color:var(--silver); }
body.theater .zero-card-back { background:radial-gradient(120% 80% at 50% 30%,#fbf8f2,#e7e2d7 75%); border:0; box-shadow:inset 0 0 0 9px #f3efe7,inset 0 0 0 10px #c9c1b2,0 40px 70px -20px rgba(0,0,0,.85); }
body.theater .zero-card-back::after { content:none; }
body.theater .zero-card .zc-smile { width:56%; height:auto; margin-top:-24%; padding:0; background:none; }
body.theater .zero-card .zc-welcome { padding:0; background:none; position:absolute; left:19%; bottom:17%; width:62%; height:auto; transform:rotate(-5deg); }
body.theater .home-fineprint { margin-top:12px !important; font-size:13px !important; color:var(--muted) !important; }
body.theater .featured-all { display:inline-block; margin-top:30px; }
@keyframes zc-float { from { transform:translateY(0); } to { transform:translateY(-10px); } }
@media(max-width:700px) {
  body.theater .zero-card { width:240px; }
  body.theater .zc-corner { font-size:19px; }
  body.theater .zc-top { top:18px; left:18px; }
  body.theater .zc-bottom { right:18px; bottom:18px; }
  body.theater .zero-card .zc-mark { width:72px; }
}
@media(prefers-reduced-motion:reduce) { body.theater .zero-card-stage { animation:none; } }

/* ---- The hero arrives: the words rise one after another, then Zero's card fades up and turns in.
   Behind a lowered curtain it all waits, unseen, and begins once the curtain has gone. */
body.theater.view-home .theater-hero :is(.greeting,.hero-promise,.hero-path,.hero-actions,.hero-platform),
body.theater.view-home .theater-hero h1>span { animation:hero-rise 1s cubic-bezier(.2,.7,.2,1) both; }
body.theater.view-home .theater-hero .greeting { animation-delay:.05s; }
body.theater.view-home .theater-hero h1>span:first-child { animation-delay:.18s; }
body.theater.view-home .theater-hero h1>span:last-child { animation-delay:.32s; }
body.theater.view-home .theater-hero .hero-promise { animation-delay:.52s; }
body.theater.view-home .theater-hero .hero-path { animation-delay:.64s; }
body.theater.view-home .theater-hero .hero-actions { animation-delay:.78s; }
body.theater.view-home .theater-hero .hero-platform { animation-delay:.92s; }
body.theater .zero-card-stage { animation:zc-arrive 1.3s cubic-bezier(.2,.7,.2,1) .35s both,zc-float 7s ease-in-out 1.7s infinite alternate; }
html.curtain-down body.theater.view-home .theater-hero :is(.greeting,.hero-promise,.hero-path,.hero-actions,.hero-platform,h1>span,.zero-card-stage) { animation-play-state:paused; }
@keyframes hero-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes zc-arrive { from { opacity:0; transform:translateY(28px) scale(.96); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) {
  body.theater.view-home .theater-hero :is(.greeting,.hero-promise,.hero-path,.hero-actions,.hero-platform,h1>span),body.theater .zero-card-stage { animation:none; }
}

/* ---- The next live puzzle, once announced: a line over the hero's buttons (Go to Puzzle 08, New? Start
   here), and its countdown in the Next card of What's happening. */
body.theater .hero-soon { margin:0 0 -6px; font:400 clamp(19px,1.8vw,23px)/1.3 var(--display); letter-spacing:-.02em; color:var(--ink); }
body.theater .hero-buttons { display:flex; flex-wrap:wrap; gap:12px; }
body.theater .hc-clock { display:flex; gap:clamp(14px,2vw,20px); margin:6px 0 14px; }
body.theater .hc-clock > span { display:flex; flex-direction:column; min-width:2.4ch; }
body.theater .hc-clock b { font:300 clamp(28px,2.6vw,36px)/1 var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink); }
body.theater .hc-clock small { margin-top:7px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
body.theater .event-upcoming .button { margin-top:6px; }