/* BlackOut — a techno show. A pure-black page laid out like the flyer: the flyer's BLACKOUT
   lettering, a CRT screen (everything scrolls inside it), and a Brilliant Sounds credit below it.
   Scoped to body.event-theme-blackout (event page) and .event-card-blackout (tickets page card). */

.event-theme-blackout {
  --bo-white: #f3f5ff;
  --bo-static: #c3bdf0;
  --bo-dim: #9a95c4;
  --bo-display: Anton, Impact, 'Arial Narrow', sans-serif;
  --bo-italic: 'Chakra Petch', 'Arial Black', sans-serif;
  --bo-osd: VT323, 'DM Mono', ui-monospace, monospace;
  background: #000;
  color: var(--bo-white);
}
.event-theme-blackout .archive-header { position: relative; z-index: 10; align-items: center; padding-block: 16px; background: #000; border-bottom: 0; }
.event-theme-blackout .archive-header .logo { width: 62px; }
.event-theme-blackout [data-event-detail] { overflow: hidden; background: #000; }
.bo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ───── Stage: title, screen, credit — sized to the viewport ───── */
.bo-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  gap: clamp(10px, 2vh, 24px);
  height: calc(100svh - var(--bo-header, 94px));
  min-height: 520px;
  padding: clamp(6px, 1.4vh, 18px) max(16px, env(safe-area-inset-right)) clamp(18px, 3.4vh, 38px) max(16px, env(safe-area-inset-left));
  background: #000;
}
.bo-title { margin: 0; line-height: 0; }
.bo-title img {
  display: block;
  width: min(calc(100vw - 32px), calc(clamp(52px, 15vh, 190px) * 4.093));
  height: auto;
  filter: drop-shadow(0 0 16px #c9c4ff40);
  animation: bo-power 7.5s 4s infinite;
}
@keyframes bo-power {
  0%, 84%, 100% { opacity: 1; }
  85% { opacity: .1; }
  85.8% { opacity: .9; }
  86.6%, 89.2% { opacity: .04; }
  90% { opacity: 1; }
}

.bo-frame { container-type: size; display: grid; justify-items: center; width: 100%; min-height: 0; }
.bo-set {
  --bo-credit-h: clamp(92px, 15vh, 160px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--bo-credit-h);
  gap: clamp(8px, 1.8vh, 20px);
  width: min(100cqw, calc((100cqh - var(--bo-credit-h)) * 1.3), 1200px);
  height: 100cqh;
}

/* ───── The CRT screen (outline path is set by JS; the radius is the no-JS fallback) ───── */
.bo-screen {
  --bo-pad-x: clamp(22px, 6cqw, 84px);
  --bo-pad-top: calc(6.5cqmin + 14px);
  position: relative;
  container-type: size;
  overflow: hidden;
  isolation: isolate;
  border-radius: 6% / 9%;
  background: #05050a;
}
.bo-static { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.bo-scroller {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  text-shadow: -1px 0 #ff2a6d59, 1px 0 #2ae8ff59;
  animation: bo-hum 5s steps(1) infinite;
}
.bo-scroller::-webkit-scrollbar { display: none; }
.bo-scroller:focus-visible { outline: none; }
.bo-screen:has(.bo-scroller:focus-visible) .bo-rim path { stroke: var(--bo-white); stroke-width: 5; }
@keyframes bo-hum { 0%, 100% { opacity: 1; } 31% { opacity: .94; } 32% { opacity: 1; } 77% { opacity: .96; } 78% { opacity: 1; } }

.bo-readout { position: absolute; z-index: 2; top: var(--bo-pad-top); right: var(--bo-pad-x); margin: 0; padding: 4px 8px 2px; background: #000c; color: var(--bo-white); font: 400 clamp(19px, 2vw, 28px)/1 var(--bo-osd); letter-spacing: .08em; pointer-events: none; }

/* Glass: scanlines, phosphor mask, vignette, curved-glass glare, rolling hum bar, rim */
.bo-glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(158deg, #ffffff14 0%, #ffffff04 22%, transparent 38%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 58%, #000000a6 100%),
    repeating-linear-gradient(0deg, #00000047 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 clamp(30px, 6cqmin, 90px) #000000b3;
}
.bo-glass::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; background: repeating-linear-gradient(90deg, #ff000026 0 1px, #00ff0020 1px 2px, #0000ff26 2px 3px); }
.bo-roll { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(transparent, #dfe6ff0f 45%, #dfe6ff17 50%, transparent); animation: bo-roll 8s linear infinite; }
@keyframes bo-roll { from { transform: translateY(-110%); } to { transform: translateY(560%); } }
.bo-rim { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bo-rim path { fill: none; stroke: #d8d3f5; stroke-opacity: .6; stroke-width: 3; }
.bo-screen.is-switching .bo-glass { animation: bo-switch .34s steps(3); }
@keyframes bo-switch { 0% { background-color: #c9d2ff38; transform: translateX(-3px); } 50% { background-color: #0000; transform: translateX(2px); } 100% { background-color: #c9d2ff14; transform: none; } }

/* Brought to you by Brilliant Sounds */
.event-theme-blackout .bo-credit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4vh; height: var(--bo-credit-h); padding: 0; border: 0; color: var(--bo-white); text-align: center; text-decoration: none; }
.bo-credit-label { color: var(--bo-dim); font: 400 clamp(14px, 2.1vh, 22px)/1 var(--bo-osd); letter-spacing: .22em; text-transform: uppercase; }
.bo-credit-logo { display: block; width: auto; height: clamp(36px, 7vh, 80px); transition: transform .25s; }
.bo-credit-name { font: 400 clamp(22px, 4.2vh, 48px)/.95 var(--bo-display); letter-spacing: .05em; text-transform: uppercase; }
.bo-credit:hover .bo-credit-logo, .bo-credit:focus-visible .bo-credit-logo { transform: scale(1.06); }
.bo-credit:focus-visible { outline: 2px dashed var(--bo-static); outline-offset: 4px; }

/* ───── Channels inside the screen ───── */
.bo-channel { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: var(--bo-pad-top) var(--bo-pad-x) calc(5cqmin + 18px); }
.bo-channel + .bo-channel { background: #03030ae6; border-top: 2px solid #ffffff2e; }
.bo-osd { display: flex; gap: 16px; width: fit-content; max-width: calc(100% - 7em); margin: 0 0 clamp(16px, 2.4vw, 30px); padding: 4px 8px 2px; background: #000c; color: var(--bo-white); font: 400 clamp(19px, 2vw, 28px)/1 var(--bo-osd); letter-spacing: .08em; text-transform: uppercase; }
.bo-rec { display: inline-flex; align-items: center; gap: 8px; }
.bo-rec i { width: .5em; height: .5em; border-radius: 50%; background: #ff2a4a; box-shadow: 0 0 10px #ff2a4a; animation: bo-blink 1.2s steps(1) infinite; }
@keyframes bo-blink { 50% { opacity: 0; } }

.bo-channel-flyer { justify-content: space-between; background: radial-gradient(ellipse at 50% 45%, transparent 45%, #0006); }
.bo-channel-flyer-foot { display: grid; justify-items: center; gap: clamp(10px, 2cqh, 18px); }
.bo-ident { padding: 6px 12px 4px; background: #000d; color: var(--bo-white); font: 400 clamp(20px, 2.6vw, 34px)/1 var(--bo-osd); letter-spacing: .22em; text-transform: uppercase; }
.bo-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px 8px;
  background: #000;
  color: var(--bo-white);
  font: 400 clamp(22px, 2.4vw, 30px)/1 var(--bo-osd);
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 0 0 2px var(--bo-white), 0 0 26px #c3bdf066;
  transition: opacity .35s, transform .35s;
}
.bo-scroll-hint b { font-size: .8em; animation: bo-nudge 1.1s ease-in-out infinite; }
.bo-scroll-hint.is-hidden { opacity: 0; transform: translateY(10px); }
@keyframes bo-nudge { 50% { transform: translateY(5px); } }

/* Ticket desk */
.bo-ticket { display: grid; gap: clamp(18px, 2.4vw, 28px); width: min(100%, 860px); margin: auto; padding: clamp(18px, 3vw, 40px); border: 2px solid #eef1ffd9; background: #000000b3; box-shadow: 0 0 40px #6a5cff2e, inset 0 0 30px #6a5cff1a; }
.bo-ticket-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 18px; }
.bo-ticket h2 { color: var(--bo-white); font: 400 min(clamp(34px, 5vw, 70px), 7.4cqw)/1.06 var(--bo-display); letter-spacing: .01em; text-transform: uppercase; }
.bo-ticket h2 em { color: var(--bo-static); font: inherit; letter-spacing: inherit; }
.bo-sales-state { display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #ffffff59; color: var(--bo-white); font: 400 clamp(17px, 1.7vw, 22px)/1 var(--bo-osd); letter-spacing: .08em; text-transform: uppercase; }
.bo-sales-state i { width: 8px; height: 8px; background: var(--bo-static); box-shadow: 0 0 10px var(--bo-static); animation: bo-blink 1.4s steps(1) infinite; }
.bo-prices, .bo-when-where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: 1px dashed #ffffff47; }
.bo-prices div, .bo-when-where div { padding: 14px 14px 14px 0; }
.bo-prices div + div, .bo-when-where div + div { padding-left: 14px; border-left: 1px dashed #ffffff33; }
.bo-prices dt, .bo-when-where dt { color: var(--bo-dim); font: 400 clamp(16px, 1.6vw, 20px)/1 var(--bo-osd); letter-spacing: .1em; text-transform: uppercase; }
.bo-prices dd { margin: 8px 0 0; font: italic 700 min(clamp(26px, 4vw, 52px), 7cqw)/1 var(--bo-italic); }
.bo-buy { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.bo-quantity { display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 2px solid #ffffffb3; font: 400 22px/1 var(--bo-osd); letter-spacing: .08em; text-transform: uppercase; }
.bo-quantity select { min-width: 58px; padding: 10px 6px; border: 0; background: transparent; color: var(--bo-white); font: 400 24px/1 var(--bo-osd); cursor: pointer; }
.bo-quantity select option { background: #000; }
.bo-quantity select:disabled { cursor: not-allowed; opacity: .55; }
.bo-buy-button {
  display: inline-flex;
  flex: 1 1 240px;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 16px 22px;
  border: 2px solid var(--bo-white);
  background: var(--bo-white);
  color: #000;
  font: 400 clamp(20px, 2.2vw, 28px)/1 var(--bo-display);
  letter-spacing: .05em;
  text-shadow: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.bo-buy-button span { font-family: var(--bo-italic); }
.bo-buy-button:hover:not(:disabled), .bo-buy-button:focus-visible { background: #000; color: var(--bo-white); box-shadow: 0 0 0 2px var(--bo-white), 0 0 30px #c3bdf099; outline: none; }
.bo-buy-button:disabled { border-style: dashed; background: repeating-linear-gradient(-45deg, #ffffff14 0 8px, transparent 8px 16px); color: var(--bo-white); cursor: not-allowed; }
.bo-ticket-note, .bo-checkout-message { color: #d8d5f2; font: 400 clamp(18px, 1.8vw, 22px)/1.25 var(--bo-osd); letter-spacing: .04em; }
.bo-checkout-message:empty { display: none; }
.bo-checkout-message a { color: var(--bo-white); }
.bo-when-where { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bo-when-where dd { margin: 8px 0 0; font: italic 700 clamp(18px, 2vw, 26px)/1.15 var(--bo-italic); }
.bo-when-where small { display: block; margin-top: 6px; color: var(--bo-dim); font: 400 clamp(15px, 1.5vw, 19px)/1.2 var(--bo-osd); letter-spacing: .04em; }

/* Lineup */
.bo-section-title { color: var(--bo-white); font: 400 min(clamp(52px, 9vw, 132px), 14.5cqw)/1 var(--bo-display); letter-spacing: .01em; text-transform: uppercase; filter: url(#bo-distress); }
.bo-ticker { margin: clamp(16px, 2vw, 26px) calc(var(--bo-pad-x) * -1) 0; overflow: hidden; border-block: 2px solid var(--bo-white); background: var(--bo-white); color: #000; text-shadow: none; }
.bo-ticker-track { display: flex; width: max-content; animation: bo-ticker 38s linear infinite; }
.bo-ticker-track span { padding: 8px 0; font: 400 clamp(20px, 2.2vw, 28px)/1 var(--bo-osd); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.bo-ticker-track b { margin: 0 .5em 0 1em; font-weight: 400; opacity: .55; }
.bo-ticker-track i { margin-left: 1em; font-style: normal; }
@keyframes bo-ticker { to { transform: translateX(-50%); } }
.bo-lineup { margin: clamp(14px, 2vw, 24px) 0 0; padding: 0; list-style: none; }
.bo-lineup li { border-bottom: 1px solid #ffffff2b; }
.bo-lineup a, .bo-dj-row { display: flex; align-items: baseline; gap: clamp(12px, 2vw, 26px); padding: clamp(8px, 1.2vw, 14px) 0; color: var(--bo-white); text-decoration: none; }
.bo-dj-number { flex: none; width: 2.2em; color: var(--bo-dim); font: 400 clamp(18px, 1.8vw, 24px)/1 var(--bo-osd); letter-spacing: .06em; }
.bo-dj-name { position: relative; overflow-wrap: anywhere; font: 400 min(clamp(32px, 5.4vw, 80px), 11cqw)/.95 var(--bo-display); letter-spacing: .02em; text-transform: uppercase; }
.bo-dj-time { width: 3.6em; color: var(--bo-static); white-space: nowrap; }
.bo-dj-arrow { margin-left: auto; color: var(--bo-static); font: italic 700 clamp(18px, 2vw, 28px)/1 var(--bo-italic); }
.bo-lineup li:nth-child(even) .bo-dj-name { color: transparent; -webkit-text-stroke: 1.5px var(--bo-white); text-shadow: none; }
.bo-lineup a:hover .bo-dj-name, .bo-lineup a:focus-visible .bo-dj-name { color: var(--bo-white); animation: bo-glitch .45s steps(2) infinite; }
.bo-lineup a:focus-visible { outline: 2px dashed var(--bo-static); outline-offset: 4px; }
@keyframes bo-glitch { 0% { text-shadow: -3px 0 #ff2a6d, 3px 0 #2ae8ff; transform: translateX(0); } 50% { text-shadow: 3px 0 #ff2a6d, -3px 0 #2ae8ff; transform: translateX(3px); } 100% { text-shadow: -2px 0 #ff2a6d, 2px 0 #2ae8ff; transform: translateX(-2px); } }
.bo-lineup-pending { margin-top: 24px; font: 400 24px/1.2 var(--bo-osd); }

/* The night */
.bo-description { max-width: 820px; margin-top: clamp(18px, 2.4vw, 30px); color: #e4e2fa; font: italic 600 clamp(18px, 2.3vw, 30px)/1.35 var(--bo-italic); }
.bo-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: clamp(22px, 3vw, 40px) 0 0; padding: 0; list-style: none; border: 2px solid #ffffffb3; }
.bo-rules li { padding: 14px; font: italic 700 min(clamp(20px, 2.4vw, 32px), 5.2cqw)/1 var(--bo-italic); white-space: nowrap; }
.bo-rules li + li { border-left: 1px dashed #ffffff4d; }
.bo-rules span { display: block; margin-bottom: 8px; color: var(--bo-dim); font: 400 clamp(15px, 1.5vw, 19px)/1 var(--bo-osd); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.bo-signoff { margin: auto 0 0; padding-top: clamp(26px, 4vw, 50px); color: var(--bo-dim); font: 400 clamp(20px, 2vw, 26px)/1 var(--bo-osd); letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.bo-rewind { align-self: center; margin-top: 14px; padding: 10px 16px; border: 2px solid #ffffffb3; background: transparent; color: var(--bo-white); font: 400 20px/1 var(--bo-osd); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.bo-rewind:hover, .bo-rewind:focus-visible { background: var(--bo-white); color: #000; outline: none; text-shadow: none; }

/* ───── Footer: brought to you by Brilliant Sounds ───── */
.event-theme-blackout .bo-footer {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(28px, 4vw, 44px) max(16px, env(safe-area-inset-right)) clamp(24px, 3vw, 36px) max(16px, env(safe-area-inset-left));
  border-top: 1px solid #ffffff14;
  background: #000;
  color: var(--bo-white);
  text-align: center;
}
.bo-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.event-theme-blackout .bo-footer nav a { padding-bottom: 3px; border-bottom: 1px solid #ffffff59; color: var(--bo-white); font: 400 20px/1 var(--bo-osd); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.event-theme-blackout .bo-footer nav a:hover { border-color: var(--bo-white); }
.event-theme-blackout footer.bo-site-footer { align-items: center; padding-block: 26px; border-top: 1px solid #ffffff14; background: #000; }
.event-theme-blackout .bo-site-footer .logo { width: 70px; }

/* ───── Power-on intro ───── */
/* event-preload.js adds html.bo-preload before first paint: everything waits on pure black.
   The 4s fallback reveals the page even if the intro script never runs. */
html.bo-preload, html.bo-preload body { background: #000; }
html.bo-preload .archive-header, html.bo-preload [data-event-detail] > *, html.bo-preload .bo-stage > *, html.bo-preload .bo-credit { opacity: 0; animation: bo-fade .5s 4s both; }
html.bo-intro .bo-title { animation: bo-ignite 1.25s steps(1, end) both; }
html.bo-intro .bo-screen { animation: bo-crt-on 1.05s cubic-bezier(.3, .7, .2, 1) 1.3s both; }
html.bo-intro .bo-scroller, html.bo-intro .bo-readout { animation: bo-fade .6s ease 2.2s both; }
html.bo-intro .bo-credit, html.bo-intro .archive-header, html.bo-intro .bo-footer, html.bo-intro .bo-site-footer { animation: bo-fade .9s ease 2.35s both; }
@keyframes bo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bo-ignite {
  0%, 10% { opacity: 0; }
  11% { opacity: .85; }
  14% { opacity: 0; }
  24% { opacity: 1; }
  27% { opacity: .08; }
  31% { opacity: 0; }
  40% { opacity: .95; }
  43% { opacity: .3; }
  47% { opacity: 1; }
  56% { opacity: .45; }
  58%, 100% { opacity: 1; }
}
/* A real CRT: a bright dot, stretched into a line, then the picture opens vertically. */
@keyframes bo-crt-on {
  0% { opacity: 0; transform: scale(.012, .006); filter: brightness(9) saturate(0); }
  2% { opacity: 1; }
  24% { transform: scale(1, .006); filter: brightness(9) saturate(0); }
  60% { transform: scale(1, 1.035); filter: brightness(2.6) saturate(.3); }
  74% { transform: scale(1, .985); filter: brightness(1.5) saturate(.8); }
  100% { transform: scale(1, 1); filter: brightness(1) saturate(1); }
}

/* ───── Narrow screens (measured by the CRT screen itself, so it also applies on short desktops) ───── */
@container (max-width: 700px) {
  .bo-ticket { padding: 18px 16px; }
  .bo-ticket-head { flex-direction: column; gap: 12px; }
  .bo-prices div { padding: 12px 8px 12px 0; }
  .bo-prices div + div { padding-left: 8px; }
  .bo-when-where { grid-template-columns: minmax(0, 1fr); }
  .bo-when-where div + div { padding-left: 0; border-left: 0; border-top: 1px dashed #ffffff33; }
  .bo-buy-button { flex-basis: 100%; }
  .bo-quantity { flex: 1; justify-content: space-between; padding-block: 2px; }
  .bo-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-rules li:nth-child(3) { border-left: 0; }
  .bo-rules li:nth-child(n+3) { border-top: 1px dashed #ffffff4d; }
}

@media (prefers-reduced-motion: reduce) {
  .bo-title img, .bo-scroller, .bo-roll, .bo-rec i, .bo-sales-state i, .bo-scroll-hint b, .bo-ticker-track { animation: none !important; }
  .bo-screen.is-switching .bo-glass { animation: none; }
}

/* ───── Tickets page card: the animated flyer ───── */
.event-card-blackout .event-card-poster { background: #000; box-shadow: 15px 15px 0 #02c0a4; }
.tickets-page .event-card-blackout:hover .event-card-poster { box-shadow: 15px 15px 0 #fff, 18px 18px 0 #000; }
.event-card-blackout .poster-stamp { display: none; }
.event-card-poster .bo-card-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }