/* Global design tokens and resets. Component styles live next to each component (*.module.css). */

:root {
  --ink: #1a0829;
  --paper: #fffaf0;
  --purple: #7300c2;
  --yellow: #ffcc00;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

/* While the language is being detected (`language-pending`, set by the script in index.html),
   hide the page except for the loading cover and the language switcher. */
html.language-pending main > :not([data-visible-while-loading]) {
  visibility: hidden;
}
/* Small "(optional)" tag after a field title. */
.optional__OrMMS {
  font-size: 0.8em;
  opacity: 0.8;
  white-space: nowrap;
}
/* Full-width yellow budget bar: label and toggle on the left, amount and slider on the right. */
.budget__BNWL9 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(175px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 62px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  background: var(--yellow);
  color: var(--purple);
}

.legend__JkTOs {
  display: block;
  padding: 0;
  font:
    400 1.55rem 'VT323',
    monospace;
  letter-spacing: 0.03em;
}

.hint__7xvGH {
  display: block;
  margin: 5px 0 0;
  opacity: 0.75;
  font:
    500 1rem 'VT323',
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toggle__rFLAz {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font:
    400 1rem/1 'VT323',
    monospace;
  cursor: pointer;
}

.checkbox__d0Pa1 {
  margin: 0;
  accent-color: var(--purple);
}

.control__Dk-s7 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.amount__uGNrz {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  font:
    400 2rem/1 'VT323',
    monospace;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.slider__qBr5P {
  flex: 1;
  width: 100%;
  height: 24px;
  margin: 0;
  accent-color: var(--purple);
  cursor: pointer;
}

.slider__qBr5P:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .budget__BNWL9 {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px;
  }

  .control__Dk-s7 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .amount__uGNrz {
    font-size: 1.65rem;
  }

  .slider__qBr5P {
    height: 30px;
  }
}
/* Field title: yellow on the purple dialog, purple inside the yellow dropdown buttons. */
.title__BnCrv {
  display: block;
  color: var(--yellow);
  font:
    400 1.15rem/1 'VT323',
    monospace;
  letter-spacing: 0.03em;
}

.onYellow__ddR6M {
  color: var(--purple);
}
/* A labelled booking field: title on top, one 43px-tall control below. */
.field__d7afw {
  display: grid;
  grid-template-rows: minmax(15px, auto) 43px;
  gap: 4px;
}

/* Shared look for the text, date and select controls. */
.input__-oLGL {
  width: 100%;
  height: 43px;
  padding: 8px 12px;
  border: 1px solid var(--yellow);
  border-radius: 0;
  background: var(--yellow);
  color: var(--purple);
  font:
    500 1rem 'VT323',
    monospace;
  letter-spacing: 0.04em;
}

.input__-oLGL:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.input__-oLGL::placeholder {
  color: var(--purple);
  opacity: 0.75;
}
/* Start and end date side by side, never wider than the field. */
.range__62HxN {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.date__8Zsjn {
  display: block;
  min-width: 0;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
/* Second step of the booking form: email, notes and "Send request". */
.heading__Glydv {
  width: 100%;
  margin: 0;
  color: var(--yellow);
  font:
    400 clamp(1.1rem, 3.2vw, 2.5rem)/0.95 'VT323',
    monospace;
  letter-spacing: 0.03em;
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
}

.fields__lpaeJ {
  display: grid;
  gap: 12px;
}

.note__qHtRg {
  margin: 5px 0 0;
  color: var(--yellow);
  font:
    400 1.2rem/1.15 'VT323',
    monospace;
  letter-spacing: 0.03em;
}

.input__euRMw {
  display: block;
  width: 100%;
  height: 43px;
  margin: 0;
  padding: 8px 12px;
  border: 2px solid var(--yellow);
  border-radius: 0;
  background: var(--yellow);
  color: var(--purple);
  font:
    400 1.2rem 'VT323',
    monospace;
  letter-spacing: 0.04em;
}

.input__euRMw:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.input__euRMw::placeholder {
  color: var(--purple);
  opacity: 0.75;
}

.notes__HdHy1 {
  min-height: 112px;
  height: auto;
  padding: 13px;
  resize: vertical;
}

.actions__UGwHJ {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.send__yKq59 {
  display: inline-grid;
  place-items: center;
  height: 48px;
  padding: 0 21px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--purple);
  font:
    500 10px 'DM Mono',
    monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
/* One row in a dropdown: square checkbox and label; the row turns purple on hover. */
.option__eMHL8 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  color: var(--purple);
  font:
    500 1.1rem 'VT323',
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.option__eMHL8:hover {
  background: var(--purple);
  color: var(--yellow);
}

/* Custom square box with a ✓ that scales in when checked. */
.checkbox__h7en3 {
  appearance: none;
  display: grid;
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--purple);
  background: var(--yellow);
}

.checkbox__h7en3::before {
  content: '✓';
  color: var(--paper);
  font: 700 13px/1 sans-serif;
  transform: scale(0);
}

.checkbox__h7en3:checked {
  background: var(--purple);
}

.checkbox__h7en3:checked::before {
  color: var(--yellow);
  transform: scale(1);
}

.checkbox__h7en3:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
/* Dropdown of checkboxes. The panel floats over the form on desktop and pushes content down on phones. */
.menu__LuNXO {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  margin: 0;
}

.summary__h9X-K {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding: 7px 12px;
  border: 1px solid var(--yellow);
  background: var(--yellow);
  color: var(--purple);
  list-style: none;
  cursor: pointer;
}

.summary__h9X-K::-webkit-details-marker {
  display: none;
}

.summary__h9X-K::after {
  content: '+';
  margin-left: 12px;
  font:
    400 24px/1 'DM Mono',
    monospace;
}

.menu__LuNXO[open] > .summary__h9X-K {
  border-bottom-color: transparent;
}

.menu__LuNXO[open] > .summary__h9X-K::after {
  content: '−';
}

.summaryText__-buuY {
  min-width: 0;
}

/* "SELECT EVENT TYPES" or "2 SELECTED". */
.value__G2rSu {
  display: block;
  margin-top: 3px;
  opacity: 0.75;
  font:
    500 0.8rem/1 'VT323',
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.panel__Qq5E7 {
  position: absolute;
  z-index: 10;
  top: 100%;
  right: 0;
  left: 0;
  max-height: 272px;
  overflow: auto;
  padding: 7px;
  border: 1px solid var(--yellow);
  background: var(--yellow);
  box-shadow: 7px 8px 0 var(--yellow);
}

@media (max-width: 720px) {
  .panel__Qq5E7 {
    position: static;
    max-height: 236px;
    box-shadow: none;
  }
}
/* Booking modal: yellow backdrop, purple dialog, two-column form. */
.modal__tI0ik {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(255, 204, 0, 0.82);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.open__fmbQ8 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dialog__-TmlQ {
  position: relative;
  width: min(1040px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: auto;
  padding: 52px 6vw;
  border: 2px solid var(--yellow);
  background: var(--purple);
  color: var(--yellow);
  box-shadow: 12px 14px 0 var(--yellow);
}

.close__VIypd {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid var(--yellow);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--purple);
  font: 400 21px/1 sans-serif;
  cursor: pointer;
}

/* Justified across the full width, like the other VT323 headings. */
.title__CFAT3 {
  width: min(720px, 100%);
  margin: 8px auto 3px;
  font:
    400 clamp(1rem, 3vw, 2.8rem)/0.9 'VT323',
    monospace;
  letter-spacing: 0.03em;
  text-align: justify;
  text-align-last: justify;
  text-transform: uppercase;
  white-space: nowrap;
}

.layout__4DaD5 {
  max-width: 930px;
  margin: 0 auto;
}

.form__RiTHr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(62px, auto);
  gap: 12px;
}

.next__DFeXz {
  grid-column: 1 / -1;
  justify-self: end;
  display: grid;
  place-items: center;
  min-width: 132px;
  height: 46px;
  margin: 12px 0 0;
  padding: 0 24px;
  border: 2px solid var(--yellow);
  background: var(--yellow);
  color: var(--purple);
  font:
    400 1.6rem/1 'VT323',
    monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.next__DFeXz:hover {
  background: var(--purple);
  color: var(--yellow);
}

.lead__-tph4 {
  display: grid;
  gap: 18px;
  margin-top: 6px;
}

.lead__-tph4[hidden] {
  display: none;
}

/* Second step: only the email section is shown, in a narrower column. */
.leadStep__u1TNg .title__CFAT3 {
  display: none;
}

.leadStep__u1TNg .layout__4DaD5 {
  max-width: 620px;
  margin: 24px auto;
}

.leadStep__u1TNg .form__RiTHr {
  display: block;
}

.leadStep__u1TNg .form__RiTHr > :not(.lead__-tph4) {
  display: none;
}

@media (max-width: 720px) {
  .modal__tI0ik {
    padding: 10px;
  }

  .dialog__-TmlQ {
    max-height: calc(100vh - 20px);
    padding: 40px 7vw;
  }

  /* Keep the close button reachable while the long form scrolls. */
  .close__VIypd {
    position: fixed;
    z-index: 50;
    top: max(16px, env(safe-area-inset-top));
    right: 18px;
  }

  .form__RiTHr {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 14px;
  }
}
/* Yellow strip at the bottom of the page. */
.contact__RDm1n {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 4vw;
  border-bottom: 1px solid var(--ink);
  background: var(--yellow);
}

.brand__Y1nJ-,
.links__eIxx4 {
  font:
    500 11px 'DM Mono',
    monospace;
  text-transform: uppercase;
}

.brand__Y1nJ- {
  color: var(--ink);
  white-space: nowrap;
}

.links__eIxx4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
}

.link__rx2FS {
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 720px) {
  .contact__RDm1n {
    flex-direction: column;
    align-items: flex-start;
  }

  .links__eIxx4 {
    justify-content: flex-start;
  }
}
/* Faint film grain and CRT scanlines over the whole site. Never blocks clicks. Above the page and
   popups, below the language loading cover. */
.scanlines__UExf1,
.grain__QRz7X {
  position: fixed;
  z-index: 60;
  pointer-events: none;
}

.scanlines__UExf1 {
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(26, 8, 41, 0.22) 2px 3px);
  opacity: 0.35;
}

/* Oversized so it can jump around without showing its edges. Moved with transforms only. */
.grain__QRz7X {
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.075;
  animation: jitter__NPcvp 0.9s steps(6) infinite;
  will-change: transform;
}

@keyframes jitter__NPcvp {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-7%, 4%);
  }
  40% {
    transform: translate(5%, -6%);
  }
  60% {
    transform: translate(-3%, 8%);
  }
  80% {
    transform: translate(8%, 2%);
  }
  100% {
    transform: translate(-5%, -4%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grain__QRz7X {
    animation: none;
  }
}
/* Branded cover, only shown while the language is being detected. */
.loading__i4e0R {
  display: none;
}

html.language-pending .loading__i4e0R {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
}

.logo__CRmsS {
  width: min(160px, 35vw);
  height: auto;
}
/* One big choice in the portal grid; turns purple on hover. */
.option__XrFFC {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 104px;
  padding: 14px 18px;
  border-right: 1px solid var(--purple);
  border-bottom: 1px solid var(--purple);
  color: var(--purple);
  font:
    600 1.45rem/1 'Playfair Display',
    serif;
  letter-spacing: -0.04em;
  text-align: center;
}

.option__XrFFC:hover {
  background: var(--purple);
  color: var(--yellow);
}

.label__zPrAv {
  font:
    400 clamp(2.5rem, 5vw, 4.4rem)/0.85 'VT323',
    monospace;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transform: translateY(-3px);
}

@media (max-width: 720px) {
  .option__XrFFC {
    min-height: 78px;
    padding: 12px 16px;
    font-size: 1.28rem;
  }
}
/* "I want..." popup over a purple backdrop. */
.overlay__-bPfA {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--ink);
  background: rgba(115, 0, 194, 0.78);
  backdrop-filter: blur(8px);
}

.open__oyXDY {
  display: grid;
}

.panel__dGhUJ {
  position: relative;
  width: min(900px, 100%);
  padding: 42px 48px 28px;
  border: 1px solid var(--purple);
  background: var(--yellow);
}

/* Purple/yellow stripe along the top edge. */
.panel__dGhUJ::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, var(--purple) 0 70%, var(--yellow) 70% 100%);
}

.close__G29Jf {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  aspect-ratio: 1;
  border: 1px solid var(--purple);
  background: var(--yellow);
  color: var(--purple);
  font:
    500 20px 'DM Mono',
    monospace;
  cursor: pointer;
}

.question__e9AKU {
  margin: 0;
  color: var(--purple);
  font:
    400 clamp(2.1rem, 4vw, 3.5rem)/0.9 'VT323',
    monospace;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Three options side by side, sharing their borders. */
.options__RXrXa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 26px;
  border-top: 1px solid var(--purple);
  border-left: 1px solid var(--purple);
}

@media (max-width: 720px) {
  .overlay__-bPfA {
    padding: 12px;
  }

  .panel__dGhUJ {
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 44px 20px 20px;
  }

  .options__RXrXa {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }
}
/* Ghostly wireframe of a page, in brand colours, positioned over the real page's elements. */
.page__2Gcn6 {
  position: absolute;
  inset: 0;
}

.bar__LNkpG,
.block__SS843,
.solid__EUq5J,
.text__r4lH7,
.button__LrZoB {
  position: absolute;
}

/* Top bar. */
.bar__LNkpG {
  border-bottom: 2px solid rgba(255, 204, 0, 0.8);
  background: rgba(26, 8, 41, 0.6);
}

/* Headings and panels. */
.block__SS843 {
  border: 1px solid rgba(255, 204, 0, 0.7);
  background: rgba(255, 204, 0, 0.18);
}

/* Cards, photos, players. */
.solid__EUq5J {
  border: 1px solid rgba(255, 204, 0, 0.6);
  background: linear-gradient(160deg, rgba(115, 0, 194, 0.6), rgba(26, 8, 41, 0.6));
}

/* Paragraphs: drawn as lines of text. */
.text__r4lH7 {
  background: repeating-linear-gradient(to bottom, rgba(255, 204, 0, 0.55) 0 0.55em, transparent 0.55em 1.6em);
}

.button__LrZoB {
  background: rgba(255, 204, 0, 0.6);
}
/* TV channel change between pages, about half a second, kept light:
     0–0.15s    static over the dimmed new page, a faint torn ghost of it coming through
     0.15–0.35s the static thins and the ghost locks onto the page (slices slip, the picture rolls)
     0.35–0.5s  the dimming and the ghost fade, leaving the real page
   The ghost is measured from the real page (hooks/useGhostShapes), so it settles exactly on it.
   The on-screen channel readout stays up a little longer. */
.screen__nhw9G {
  position: fixed;
  z-index: 50;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  animation: done__vKwqD 0s linear 1.6s forwards;
}

/* Dims the real page until the picture locks on. */
.backdrop__4p8zv {
  position: absolute;
  inset: 0;
  background: rgba(26, 8, 41, 0.8);
  animation: clear__yJYB1 0.15s ease-in 0.35s forwards;
}

/* The wireframe of the new page, with yellow/purple colour fringing. */
.ghost__sAsaU {
  position: absolute;
  inset: 0;
  filter: drop-shadow(2px 0 0 rgba(255, 204, 0, 0.35)) drop-shadow(-2px 0 0 rgba(115, 0, 194, 0.45));
  opacity: 0;
  animation: ghost__sAsaU 0.5s linear forwards;
}

/* One horizontal quarter of the ghost image; each slips sideways by its own --shift. */
.slice__4Y2tj {
  position: absolute;
  inset: 0;
  animation: tear__ghjRY 0.36s steps(6) forwards;
}

/* Vertical hold: the picture rolls and stretches before settling. */
.slice__4Y2tj > * {
  animation: hold__vtJoP 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Black-and-white snow, tinted toward the brand purple. Oversized so it can jump around. */
.static__xj07K {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-0.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  animation:
    snow__1XQj8 0.2s steps(4) infinite,
    thin__iysJa 0.36s linear forwards;
}

.static__xj07K::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(115, 0, 194, 0.25), rgba(26, 8, 41, 0.3));
}

/* The bright band of a picture rolling as the tuner locks on. */
.roll__cM5Zh {
  position: absolute;
  top: -25vh;
  right: 0;
  left: 0;
  height: 22vh;
  background: linear-gradient(transparent, rgba(255, 250, 240, 0.14), transparent);
  animation:
    roll__cM5Zh 0.34s linear forwards,
    clear__yJYB1 0.18s ease-in 0.34s forwards;
}

/* On-screen display, like a TV's channel readout. */
.osd__USvG7 {
  position: absolute;
  top: 100px;
  right: 4vw;
  display: grid;
  justify-items: end;
  color: var(--yellow);
  font:
    400 clamp(2.2rem, 4vw, 3.4rem)/0.9 'VT323',
    monospace;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 10px rgba(255, 204, 0, 0.65),
    3px 3px 0 var(--purple);
  text-transform: uppercase;
  opacity: 0;
  animation: osd__USvG7 1.5s linear 0.1s forwards;
}

.label__PZ0lQ {
  font-size: 0.55em;
}

@keyframes snow__1XQj8 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-8%, 3%);
  }
  50% {
    transform: translate(5%, -6%);
  }
  75% {
    transform: translate(-3%, 7%);
  }
  100% {
    transform: translate(6%, -2%);
  }
}

@keyframes roll__cM5Zh {
  to {
    transform: translateY(150vh);
  }
}

/* Static: light from the start, thinning out as the picture comes through. */
@keyframes thin__iysJa {
  0%,
  30% {
    opacity: 0.55;
  }
  65% {
    opacity: 0.25;
  }
  100% {
    opacity: 0;
  }
}

/* Ghost image: faint behind the static, clearest while locking on, then gone. */
@keyframes ghost__sAsaU {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.2;
  }
  55%,
  70% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

@keyframes tear__ghjRY {
  0% {
    transform: translateX(var(--shift)) skewX(-5deg);
  }
  30% {
    transform: translateX(calc(var(--shift) * -0.6)) skewX(3deg);
  }
  55% {
    transform: translateX(calc(var(--shift) * 0.25)) skewX(-1deg);
  }
  80%,
  100% {
    transform: none;
  }
}

@keyframes hold__vtJoP {
  0% {
    transform: translateY(-5%) scaleY(1.08);
  }
  45% {
    transform: translateY(1.5%) scaleY(0.98);
  }
  75%,
  100% {
    transform: none;
  }
}

@keyframes clear__yJYB1 {
  to {
    opacity: 0;
  }
}

/* Snaps on, holds, then blinks off. */
@keyframes osd__USvG7 {
  0%,
  100% {
    opacity: 0;
  }
  4%,
  88% {
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  94% {
    opacity: 1;
  }
}

@keyframes done__vKwqD {
  to {
    visibility: hidden;
  }
}

@media (max-width: 720px) {
  .osd__USvG7 {
    top: 88px;
    right: 5vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen__nhw9G {
    display: none;
  }
}
/* Full-screen CRT "power-on" when an inner page is loaded fresh: a line of light flashes across the
   middle, then the dark screen pulls apart. */
.curtain__olrb- {
  position: fixed;
  z-index: 50;
  inset: 0;
  pointer-events: none;
  animation: done__on7Np 0s linear 1s forwards;
}

/* Wait for the language loading cover, like the hero intro. */
html.language-pending .curtain__olrb-,
html.language-pending .curtain__olrb- * {
  animation-play-state: paused;
}

.half__NoiOU {
  position: absolute;
  right: 0;
  left: 0;
  height: 50.5%;
  background: var(--ink);
}

.top__FZlby {
  top: 0;
  animation: openUp__NT-po 0.65s cubic-bezier(0.76, 0, 0.24, 1) 0.28s forwards;
}

.bottom__UUTcz {
  bottom: 0;
  animation: openDown__5t2mX 0.65s cubic-bezier(0.76, 0, 0.24, 1) 0.28s forwards;
}

.line__DcRV0 {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--yellow);
  box-shadow:
    0 0 18px 5px rgba(255, 204, 0, 0.75),
    0 0 60px 12px rgba(115, 0, 194, 0.6);
  transform: scaleX(0);
  animation: flash__uH5UL 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes flash__uH5UL {
  45% {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1) scaleY(18);
  }
}

@keyframes openUp__NT-po {
  to {
    transform: translateY(-101%);
  }
}

@keyframes openDown__5t2mX {
  to {
    transform: translateY(101%);
  }
}

@keyframes done__on7Np {
  to {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .curtain__olrb- {
    display: none;
  }
}
/* A tilted band of big scrolling words, overlapping the edges of the sections around it. The strip
   reaches 22px into each neighbouring section, so its tilted corners always sit on top of one
   (otherwise a sliver of page background shows between the strip and the section). */
.band__XgoYd {
  position: relative;
  z-index: 2;
  margin: -48px 0;
  padding: 26px 0;
  overflow-x: clip;
  pointer-events: none;
}

/* A page that ends with a marquee: the strip, its shadow and its tilted corner would cover the slim
   footer's links, so the footer starts its content below them (normally 22px top padding). */
.band__XgoYd + #contact {
  padding-top: calc(22px + 22px + 10px + 1.4vw);
}

.strip__xlbGC {
  width: calc(100% + 80px);
  margin-left: -40px;
  padding: 14px 0 12px;
  /* Clip the (very wide) word track to the strip; otherwise its far end, tilted with the strip,
     hangs below the page and adds empty scroll space under the footer. */
  overflow: hidden;
  border-block: 2px solid var(--ink);
  transform: rotate(-1.6deg);
  box-shadow: 0 10px 0 rgba(26, 8, 41, 0.35);
}

.reverse__99kQN .strip__xlbGC {
  transform: rotate(1.4deg);
}

.yellow__vUweV .strip__xlbGC {
  background: var(--yellow);
  color: var(--purple);
}

.purple__pi9I6 .strip__xlbGC {
  background: var(--purple);
  color: var(--yellow);
}

/* Leans with the scroll speed (set from JavaScript). */
.lean__NH6nq {
  transform: skewX(var(--lean, 0deg));
}

.track__uJiJs {
  display: flex;
  width: max-content;
  animation: slide__8t5kx 36s linear infinite;
}

.reverse__99kQN .track__uJiJs {
  animation-direction: reverse;
}

.sequence__x--Ss {
  flex: none;
  padding-right: 0.6em;
  font:
    700 clamp(1.5rem, 4vw, 3.4rem)/1 'Silkscreen',
    monospace;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.star__vAfuY {
  display: inline-block;
  margin: 0 0.45em;
  color: var(--ink);
  font-size: 0.7em;
  vertical-align: 0.12em;
}

/* Two identical halves: sliding by exactly one half loops seamlessly. */
@keyframes slide__8t5kx {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 720px) {
  .band__XgoYd {
    margin: -32px 0;
    padding: 18px 0;
  }

  .band__XgoYd + #contact {
    padding-top: calc(22px + 14px + 10px + 1.4vw);
  }

  .strip__xlbGC {
    padding: 10px 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .track__uJiJs {
    animation: none;
  }
}
/* EN/PT switcher. */
.switcher__Xpk5v {
  display: flex;
  border: 1px solid var(--yellow);
  background: var(--purple);
  color: var(--yellow);
}

/* Home page: floating over the top-right corner of the hero. */
.floating__idwFS {
  position: absolute;
  z-index: 6;
  top: 22px;
  right: 4vw;
}

/* Stays usable above the loading cover. */
html.language-pending .floating__idwFS {
  position: fixed;
  z-index: 101;
}

.option__yTmlY {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 11px;
  border: 0;
  border-right: 1px solid var(--yellow);
  background: transparent;
  color: var(--yellow);
  font:
    500 11px 'DM Mono',
    monospace;
  cursor: pointer;
}

.option__yTmlY:last-child {
  border-right: 0;
}

.option__yTmlY[aria-pressed='true'] {
  background: var(--yellow);
  color: var(--purple);
}

@media (max-width: 720px) {
  .floating__idwFS {
    top: 14px;
    right: 5vw;
  }

  .option__yTmlY {
    padding: 8px 7px;
  }
}
/* Top bar on the inner pages: logo home on the left; links and the language switcher on the right.

   The header keeps a fixed 78px in the page; the bar inside it is positioned on top, so when it
   opens into the menu it grows over the content below instead of pushing the page down. */
.header__QiZVC {
  position: relative;
  z-index: 5; /* over the page, under the popups */
  height: 78px;
}

.bar__JMxTA {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 14px 4vw;
  border-bottom: 2px solid var(--yellow);
  background: var(--ink);
  box-shadow: 0 0 0 0 rgba(26, 8, 41, 0);
  transition:
    min-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease;
}

.home__rQWMR {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--yellow);
  font:
    700 1.05rem 'Silkscreen',
    monospace;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: font-size 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.home__rQWMR:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 6px;
}

.logo__3x4Qj {
  width: 46px;
  height: 46px;
  transition:
    width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.links__T70eG {
  display: flex;
  align-items: center;
  gap: 8px;
}

.link__0lmaQ {
  display: grid;
  align-content: center;
  padding: 8px 14px;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  transition:
    padding 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.link__0lmaQ:hover,
.link__0lmaQ:focus-visible,
.link__0lmaQ[aria-current='page'] {
  background: var(--yellow);
  color: var(--purple);
  outline: none;
}

.label__ANfvT {
  font:
    400 1.25rem/1 'VT323',
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: font-size 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Short description under each link, only shown while the menu is open (zero width and height
   while closed, so it doesn't stretch the link). */
.hint__jPW-j {
  max-width: 0;
  max-height: 0;
  overflow: hidden;
  font:
    500 10px/1.3 'DM Mono',
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease;
}

/* Open: with a mouse over the bar, or keyboard focus inside it. Not on touch screens. */
@media (hover: hover) {
  .header__QiZVC:hover .bar__JMxTA,
  .header__QiZVC:focus-within .bar__JMxTA {
    min-height: 120px;
    box-shadow:
      0 18px 0 -8px rgba(115, 0, 194, 0.55),
      0 40px 90px 30px rgba(26, 8, 41, 0.75);
  }

  .header__QiZVC:hover .home__rQWMR,
  .header__QiZVC:focus-within .home__rQWMR {
    font-size: 1.35rem;
  }

  .header__QiZVC:hover .logo__3x4Qj,
  .header__QiZVC:focus-within .logo__3x4Qj {
    width: 72px;
    height: 72px;
  }

  .header__QiZVC:hover .link__0lmaQ,
  .header__QiZVC:focus-within .link__0lmaQ {
    padding: 14px 24px;
    box-shadow: 5px 6px 0 var(--purple);
  }

  .header__QiZVC:hover .link__0lmaQ:hover,
  .header__QiZVC:focus-within .link__0lmaQ:focus-visible {
    transform: translate(-2px, -2px);
  }

  .header__QiZVC:hover .label__ANfvT,
  .header__QiZVC:focus-within .label__ANfvT {
    font-size: 1.9rem;
  }

  .header__QiZVC:hover .hint__jPW-j,
  .header__QiZVC:focus-within .hint__jPW-j {
    max-width: 30ch;
    max-height: 2em;
    margin-top: 6px;
    opacity: 0.85;
  }
}

/* The logo mirrors the home page's action button: while the menu is open it breathes with the
   same calm pulse; pointing at the logo itself (or focusing it) switches to the button's hover
   tremble. Same timings as Hero/components/ActionButton. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .header__QiZVC:hover .logo__3x4Qj,
  .header__QiZVC:focus-within .logo__3x4Qj {
    animation: pulse__mvdyp 1.175s ease-in-out infinite;
  }

  .header__QiZVC .home__rQWMR:hover .logo__3x4Qj,
  .header__QiZVC .home__rQWMR:focus-visible .logo__3x4Qj {
    animation: tremble__FFH2o 0.09s linear infinite;
  }
}

@keyframes pulse__mvdyp {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.095);
  }
}

@keyframes tremble__FFH2o {
  0%,
  100% {
    transform: rotate(0deg) scale(1.06);
  }
  25% {
    transform: translate(2px, -1px) rotate(-1.4deg) scale(1.06);
  }
  50% {
    transform: translate(-2px, 1px) rotate(1.4deg) scale(1.06);
  }
  75% {
    transform: translate(1px, 2px) rotate(-0.8deg) scale(1.06);
  }
}

@media (max-width: 720px) {
  .bar__JMxTA {
    padding: 12px 5vw;
  }

  .wordmark__v7L-E {
    display: none;
  }

  .link__0lmaQ {
    padding: 7px 10px;
  }

  .label__ANfvT {
    font-size: 1.1rem;
  }
}
/* Unknown address: a big decoding message and a way home. */
.page__2ufc0 {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  min-height: 70vh;
  padding: 80px 7vw;
  background: var(--purple);
  color: var(--yellow);
  text-align: center;
}

.code__NKvjD {
  margin: 0;
  font:
    700 clamp(4rem, 14vw, 10rem)/0.9 'Silkscreen',
    monospace;
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
}

.title__9tyDr {
  margin: 0;
  font:
    400 clamp(2rem, 5vw, 3.4rem)/1 'VT323',
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.body__fyHKP {
  margin: 0;
  color: var(--paper);
  font:
    400 1.3rem 'VT323',
    monospace;
}

.home__XAGdi {
  margin-top: 10px;
  padding: 12px 24px;
  background: var(--yellow);
  color: var(--purple);
  font:
    400 1.5rem/1 'VT323',
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home__XAGdi:hover,
.home__XAGdi:focus-visible {
  background: var(--paper);
  outline: none;
}
/* One tile per platform: name, audience figure, and a link out to the profile. */
.figures__i3CQr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 560px;
}

.tile__3-RPj {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--yellow);
  background: rgba(115, 0, 194, 0.55);
  color: var(--yellow);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.tile__3-RPj:hover,
.tile__3-RPj:focus-visible {
  background: var(--yellow);
  color: var(--purple);
  transform: translateY(-3px);
  outline: none;
}

.platform__Hbnhp {
  display: flex;
  justify-content: space-between;
  font:
    500 10px 'DM Mono',
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.value__WKCwl {
  font:
    400 2.4rem/0.9 'VT323',
    monospace;
  font-variant-numeric: tabular-nums;
}
/* Opening block of an artist page: tilted portrait on the left, name, figures and booking on the right. */
.hero__PPLB0 {
  position: relative;
  overflow: hidden;
  padding: 40px 7vw 90px;
  background:
    radial-gradient(circle at 25% 40%, rgba(115, 0, 194, 0.55), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(255, 204, 0, 0.12), transparent 45%), var(--ink);
  color: var(--paper);
}

/* Entrance animations wait for the language loading cover, like the home page intro. */
html.language-pending .hero__PPLB0 * {
  animation-play-state: paused;
}

/* Centred with a maximum width, so very wide screens get even margins instead of empty space. */
.container__0iZGD {
  max-width: 1240px;
  margin: 0 auto;
}

.back__Yz0aZ {
  display: inline-block;
  margin-bottom: 36px;
  color: var(--yellow);
  font:
    400 1.4rem/1 'VT323',
    monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.back__Yz0aZ:hover,
.back__Yz0aZ:focus-visible {
  text-decoration: underline;
  outline: none;
}

.layout__PxXAq {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 5vw;
}

/* Portrait in a tilted yellow frame with a purple offset shadow and faint scanlines. Capped in size
   so it stays in proportion with the text beside it on wide screens. */
.frame__as6tC {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  margin: 0;
  border: 3px solid var(--yellow);
  box-shadow: 16px 18px 0 var(--purple);
  transform: rotate(-2.5deg);
}

.frame__as6tC::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(26, 8, 41, 0.25) 3px 4px);
  pointer-events: none;
}

.portrait__Hlc5W {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.info__1eQwa {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* never wider than the page, so the figure tiles wrap */
  justify-items: start;
  gap: 22px;
}

.badge__laqL7 {
  padding: 7px 10px;
  background: var(--yellow);
  color: var(--purple);
  font:
    500 11px 'DM Mono',
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.name__nZ4jk {
  margin: 0;
  color: var(--yellow);
  font:
    700 clamp(2.6rem, 7vw, 6.2rem)/0.95 'Silkscreen',
    monospace;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  -webkit-text-stroke: 10px var(--purple);
  paint-order: stroke fill;
}

.bio__tGuEp {
  max-width: 62ch;
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--yellow);
  color: var(--paper);
  font:
    600 1.1rem/1.6 'Share Tech Mono',
    monospace;
}

.book__5Bh4F {
  padding: 16px 30px;
  border: 0;
  background: var(--yellow);
  color: var(--purple);
  font:
    400 1.9rem/1 'VT323',
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 7px 8px 0 var(--purple);
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.book__5Bh4F:hover,
.book__5Bh4F:focus-visible {
  box-shadow: 10px 11px 0 var(--purple);
  transform: translate(-3px, -3px);
  outline: none;
}

/* Entrance, after the page-change curtain opens. */
@media (prefers-reduced-motion: no-preference) {
  .frame__as6tC {
    animation: portraitIn__OlTZJ 1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s backwards;
  }

  .info__1eQwa > * {
    animation: rise__nY18z 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(0.6s + var(--n, 0) * 0.1s);
  }

  .info__1eQwa > :nth-child(2) {
    --n: 1;
  }

  .info__1eQwa > :nth-child(3) {
    --n: 2;
  }

  .info__1eQwa > :nth-child(4) {
    --n: 3;
  }

  .info__1eQwa > :nth-child(5) {
    --n: 4;
  }
}

@keyframes portraitIn__OlTZJ {
  from {
    opacity: 0;
    transform: rotate(-9deg) scale(0.85) translateY(40px);
  }
}

@keyframes rise__nY18z {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}

@media (max-width: 720px) {
  .hero__PPLB0 {
    padding: 24px 7vw 64px;
  }

  .back__Yz0aZ {
    margin-bottom: 24px;
  }

  /* minmax(0, …): the column follows the screen width instead of growing to fit three figure
     tiles side by side, so the tiles wrap. */
  .layout__PxXAq {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* Narrower than the column, leaving room for the tilt and the offset shadow. */
  .frame__as6tC {
    width: min(calc(100% - 28px), 360px);
    justify-self: center;
  }

  .name__nZ4jk {
    -webkit-text-stroke-width: 7px;
  }
}
/* "Previous bard / Next bard": two big tiles at the bottom of an artist page. */
.nav__9Zebt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: 2px solid var(--ink);
  background: var(--purple);
}

.link__9v1DZ {
  display: grid;
  gap: 8px;
  padding: 34px 7vw;
  color: var(--yellow);
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.link__9v1DZ + .link__9v1DZ {
  border-left: 2px solid var(--ink);
  text-align: right;
}

.link__9v1DZ:hover,
.link__9v1DZ:focus-visible {
  background: var(--yellow);
  color: var(--purple);
  outline: none;
}

.label__EP6NZ {
  font:
    400 1.3rem/1 'VT323',
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.name__YvVYY {
  font:
    700 clamp(1.4rem, 3vw, 2.4rem)/1.05 'Silkscreen',
    monospace;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .nav__9Zebt {
    grid-template-columns: 1fr;
  }

  .link__9v1DZ + .link__9v1DZ {
    border-top: 2px solid var(--ink);
    border-left: 0;
  }
}
/* Yellow band with the artist's Spotify player, centred. */
.section__pcz-k {
  padding: 90px 7vw;
  background: var(--yellow);
  color: var(--purple);
}

.inner__Ctu7X {
  max-width: 900px;
  margin: 0 auto;
}

.heading__F-j3f {
  margin: 0 0 18px;
  font:
    400 clamp(2rem, 4vw, 3.2rem)/1 'VT323',
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.player__ASww1 {
  display: block;
  width: 100%;
  height: 352px;
  border: 0;
  border-radius: 12px;
  /* Shown until the Spotify player has loaded. */
  background: var(--purple);
  box-shadow: 10px 12px 0 var(--ink);
}

@media (max-width: 720px) {
  .section__pcz-k {
    padding: 64px 7vw;
  }
}
/* Yellow "click to warp this bard" overlay; invisible until the card is hovered. */
.overlay__SN37V {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5cqi, 24px);
  background: rgba(255, 204, 0, 0.8);
  color: var(--purple);
  font:
    700 clamp(1rem, 6cqi, 2.43rem)/1.05 'Silkscreen',
    monospace;
  letter-spacing: 0.03em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  transition: opacity 0.22s ease;
}

/* Portuguese copy is longer. */
[lang='pt-BR'] .overlay__SN37V {
  font-size: clamp(1rem, 5.5cqi, 1.75rem);
}

.text__s-Mk- {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* Row of small outlined links (YouTube / Spotify / Instagram) with the artist's audience on each. */
.links__FECq7 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.link__JqRF8 {
  padding: 5px 7px;
  border: 1px solid var(--yellow);
  background: rgba(26, 8, 41, 0.52);
  color: var(--yellow);
  font:
    500 9px 'DM Mono',
    monospace;
  text-transform: uppercase;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}

.link__JqRF8:hover,
.link__JqRF8:focus-visible {
  outline: none;
  background: var(--yellow);
  color: var(--purple);
  transform: translateY(-3px) scale(1.06);
}
/* Artist card: portrait background with badge, name and platform links. On hover the portrait zooms,
   the text slides away (the platform links stay) and the "warp this bard" overlay pulses in. */
.card__FDel- {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  min-height: 320px;
  overflow: hidden;
  padding: 24px;
  color: var(--paper);
  font:
    500 16px 'DM Mono',
    monospace;
  box-shadow: inset 0 0 0 2px rgba(27, 7, 43, 0.72);
  cursor: pointer;
  /* Tilt toward the pointer (set by hooks/useTilt); eases back when the pointer leaves. */
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card__FDel-:hover {
  transition-duration: 0.15s;
}

/* Soft light that follows the pointer across the card. */
.glare__F31xj {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: radial-gradient(
    circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255, 250, 240, 0.32),
    rgba(255, 204, 0, 0.08) 30%,
    transparent 55%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.card__FDel-:hover .glare__F31xj {
  opacity: 1;
}

/* The link covering the whole card (see ArtistCard.tsx). */
.cardLink__8Ds6z {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.card__FDel-:has(.cardLink__8Ds6z:focus-visible) {
  outline: 4px solid var(--purple);
  outline-offset: 3px;
}

.cardLink__8Ds6z:focus-visible {
  outline: none;
}

/* Portrait, set per card through the --portrait custom property. */
.card__FDel-::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--portrait) center / cover no-repeat;
  transition: transform 0.45s ease;
}

/* Dark fade so the text stays readable. */
.card__FDel-::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 8, 41, 0.02) 20%, rgba(26, 8, 41, 0.92) 100%);
  transition: opacity 0.35s ease;
}

/* Badge, name and platform links. Clicks pass through them to the card link, except on the
   platform links themselves. */
.content__j0ONd {
  position: relative;
  z-index: 1;
  pointer-events: none;
  transition:
    transform 0.38s cubic-bezier(0.2, 0.75, 0.25, 1),
    opacity 0.24s ease;
}

.badge__qoLKv {
  margin-bottom: 1px;
  padding: 7px 9px;
  background: var(--yellow);
  color: var(--purple);
  font:
    500 10px 'DM Mono',
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.name__OdMXq {
  color: var(--yellow);
  font:
    700 clamp(1.28rem, 2.35vw, 2rem)/1.08 'Silkscreen',
    monospace;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  -webkit-text-stroke: 6px var(--purple);
  paint-order: stroke fill;
}

.links__yv7y6 a {
  pointer-events: auto;
}

/* Hover */
.card__FDel-:hover::before {
  transform: scale(1.09);
}

.card__FDel-:hover::after {
  opacity: 0.2;
}

.card__FDel-:hover > .content__j0ONd {
  opacity: 0;
  transform: translateY(165%);
}

/* The platform links stay visible and clickable on top of the overlay. */
.card__FDel-:hover > .links__yv7y6 {
  z-index: 3;
  opacity: 1;
  transform: translateY(0);
}

.card__FDel-:hover .links__yv7y6 a {
  border-color: var(--purple);
  background: var(--purple);
  color: var(--yellow);
}

.card__FDel-:hover .links__yv7y6 a:hover,
.card__FDel-:hover .links__yv7y6 a:focus-visible {
  background: var(--yellow);
  color: var(--purple);
}

.card__FDel-:hover > .overlay__k2SPs {
  opacity: 1;
  animation: pulse__-54n9 1.05s ease-in-out infinite;
}

@keyframes pulse__-54n9 {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.075);
  }
}

@media (max-width: 720px) {
  .card__FDel- {
    grid-column: 1 / -1;
    min-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card__FDel-:hover > .overlay__k2SPs {
    animation: none;
  }
}
/* "See all bards" under the home page's roster teaser, over the warp tunnel's rings (see WarpGate). */
.link__GlZFh {
  position: relative;
  z-index: 2;
  display: block;
  width: fit-content;
  margin: 28px auto 0;
  padding: 14px 28px;
  border: 2px solid var(--yellow);
  background: var(--yellow);
  color: var(--purple);
  font:
    400 1.6rem/1 'VT323',
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 6px 7px 0 var(--ink);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}

.link__GlZFh:hover,
.link__GlZFh:focus-visible {
  background: var(--purple);
  color: var(--yellow);
  box-shadow: 9px 10px 0 var(--ink);
  transform: translate(-3px, -3px);
  outline: none;
}

.arrow__Y97bo {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.16s ease;
}

.link__GlZFh:hover .arrow__Y97bo {
  transform: translateX(5px);
}

@media (max-width: 720px) {
  .link__GlZFh {
    width: 100%;
    margin-top: 16px;
    text-align: center;
  }
}
/* Artist roster: a three-column grid of artist cards on a purple band. */
.roster__oBL1U {
  padding: 90px 7vw;
  border-bottom: 1px solid var(--ink);
  background: var(--purple);
  color: var(--paper);
}

.head__xzfml {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 18px;
  margin-bottom: 55px;
  text-align: center;
}

.title__mxRM4 {
  max-width: 720px;
  margin: 0 auto;
  color: var(--yellow);
  font:
    600 clamp(1.75rem, 3.6vw, 3.2rem)/1.08 'Silkscreen',
    monospace;
  letter-spacing: 0.02em;
}

.intro__NB12- {
  max-width: 620px;
  margin: 0;
  color: var(--paper);
  font:
    400 1.3rem/1.25 'VT323',
    monospace;
  letter-spacing: 0.03em;
}

/* Over the warp tunnel's rings (see WarpGate). */
.grid__xJ3G6 {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
  background: var(--yellow);
  perspective: 1400px;
}

/* Entrance: cards wait out of sight until the grid arrives, then flip up into place one after
   another (each card sets its own --i). */
.armed__sKenw > * {
  opacity: 0;
}

.entering__zkCaG > * {
  animation: flipIn__UFBr7 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes flipIn__UFBr7 {
  from {
    opacity: 0;
    transform: translateY(90px) rotateX(-38deg) scale(0.9);
  }
}

@media (max-width: 720px) {
  .roster__oBL1U {
    padding: 36px 7vw 64px;
  }

  .head__xzfml {
    gap: 12px;
    margin-bottom: 20px;
  }

  .grid__xJ3G6 {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 4px;
  }
}
/* Words never break internally; each character can be transformed on its own. */
.word__bD7x8 {
  display: inline-block;
  white-space: nowrap;
}

/* No `will-change` here: on 1,000+ letters it forces a GPU layer for each one, all the time. */
.char__Dr0xJ {
  display: inline-block;
}

/* Small uppercase labels set their letter-spacing on the container only. */
.tight__nfov- .char__Dr0xJ {
  letter-spacing: 0;
}
/* Founder card: round photo beside the roles and name, bio underneath. */
.founder__5A6Xd {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--purple);
}

.photo__M-SLw {
  width: 118px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
}

.details__2qXUr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 118px;
}

.roles__lUOlb {
  margin: 10px 0 0;
  font:
    600 0.98rem/1.45 'Share Tech Mono',
    monospace;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.role__lvOgv {
  display: block;
}

.name__AUtWH {
  margin: 0;
  font:
    400 1.55rem/1 'VT323',
    monospace;
  letter-spacing: 0.02em;
}

.bio__f1T5M {
  grid-column: 1 / -1;
  margin: 0;
  font:
    600 0.98rem/1.45 'Share Tech Mono',
    monospace;
}

@media (max-width: 720px) {
  .founder__5A6Xd {
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 10px;
  }

  .photo__M-SLw {
    width: 88px;
  }

  .details__2qXUr {
    min-height: 88px;
  }
}
/* "The work behind the show": yellow section with intro copy and the two founders. */
.about__R5Tyy {
  overflow: hidden;
  padding: 90px 7vw;
  border-bottom: 1px solid var(--ink);
  background: var(--yellow);
  color: var(--purple);
}

/* Heading and body share a narrow empty left column on desktop. */
.head__scFRM,
.body__An9Cn {
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: 35px;
}

.head__scFRM {
  margin-bottom: 14px;
}

.title__thd0B {
  grid-column: 2;
  margin: 0;
  font:
    400 clamp(1.9rem, 3.6vw, 4.1rem)/0.98 'VT323',
    monospace;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.copy__-1iHu {
  grid-column: 2;
  max-width: 720px;
  font:
    600 1.18rem/1.55 'Share Tech Mono',
    monospace;
}

.founders__IBXHo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 32px;
}

/* Everything that spirals into place (see hooks/useSpiralReveal) stays put for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .about__R5Tyy [data-spiral-item] {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 720px) {
  .about__R5Tyy {
    padding: 64px 7vw;
  }

  .head__scFRM,
  .body__An9Cn {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .title__thd0B,
  .copy__-1iHu {
    grid-column: auto;
  }

  .founders__IBXHo {
    grid-template-columns: 1fr;
  }
}
/* Text set along a slowly spinning circle, filling its parent. */
.ring__d0ClQ {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: spin__DXstH 12s linear infinite;
}

.text__5g7qR {
  fill: var(--yellow);
  font:
    400 12px 'VT323',
    monospace;
  letter-spacing: 0.3px;
}

.dot__oAO3q {
  fill: var(--yellow);
}

@keyframes spin__DXstH {
  to {
    transform: rotate(360deg);
  }
}

/* Short phones: the ring is too small for the dots. */
@media (max-width: 720px) and (max-height: 900px) {
  .dot__oAO3q {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ring__d0ClQ {
    animation: none;
  }
}
/* The pulsing Warp-A-Bard logo button in the middle of the hero. Trembles on hover. */
.button__ZCauX {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 305px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
  animation:
    pulse__Qzt3F 1.175s ease-in-out infinite,
    appear__U9eSo 0.5s ease 0.55s backwards;
}

/* `appear` stays in the list: dropping it would replay the fade-in (from invisible) on mouse leave. */
.button__ZCauX:hover {
  animation:
    tremble__6pkpW 0.09s linear infinite,
    appear__U9eSo 0.5s ease 0.55s backwards;
}

/* The text ring spins faster while hovered. */
.button__ZCauX:hover .ring__sh68k {
  animation-duration: 3s;
}

.logo__gGNby {
  position: relative;
  z-index: 1;
  display: block;
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(26, 8, 41, 0.34));
  translate: calc(var(--px, 0) * 7px) calc(var(--py, 0) * 7px);
}

/* Intro: the logo spins in out of the spiral. */
@media (prefers-reduced-motion: no-preference) {
  .logo__gGNby {
    animation: warpIn__uzeZf 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s backwards;
  }
}

@keyframes warpIn__uzeZf {
  from {
    scale: 0.05;
    rotate: -240deg;
  }
}

@keyframes appear__U9eSo {
  from {
    opacity: 0;
  }
}

@keyframes pulse__Qzt3F {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.095);
  }
}

@keyframes tremble__6pkpW {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.06);
  }
  25% {
    transform: translate(calc(-50% + 2px), calc(-50% - 1px)) rotate(-1.4deg) scale(1.06);
  }
  50% {
    transform: translate(calc(-50% - 2px), calc(-50% + 1px)) rotate(1.4deg) scale(1.06);
  }
  75% {
    transform: translate(calc(-50% + 1px), calc(-50% + 2px)) rotate(-0.8deg) scale(1.06);
  }
}

@media (max-width: 720px) {
  .button__ZCauX {
    width: 318px;
  }
}

/* Short phones: smaller, and lower, below the reach panel. */
@media (max-width: 720px) and (max-height: 900px) {
  .button__ZCauX {
    top: max(60%, 416px);
    width: min(70vw, 250px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button__ZCauX {
    animation: none;
  }
}
/* CRT "power-on" over the hero: a line of light flashes across the middle, then the two halves of
   the dark screen pull apart. Starts when the loading cover lifts (see Hero.module.css). */
.curtain__42-7G {
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  animation: done__U6KWd 0s linear 1.2s forwards;
}

.half__wJ-yC {
  position: absolute;
  right: 0;
  left: 0;
  height: 50.5%;
  background: var(--ink);
}

.top__iQUi9 {
  top: 0;
  animation: openUp__-bduu 0.75s cubic-bezier(0.76, 0, 0.24, 1) 0.38s forwards;
}

.bottom__3HmJO {
  bottom: 0;
  animation: openDown__Ie8eF 0.75s cubic-bezier(0.76, 0, 0.24, 1) 0.38s forwards;
}

.line__BiboT {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--yellow);
  box-shadow:
    0 0 18px 5px rgba(255, 204, 0, 0.75),
    0 0 60px 12px rgba(115, 0, 194, 0.6);
  transform: scaleX(0);
  animation: flash__Z72Lb 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes flash__Z72Lb {
  45% {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1) scaleY(18);
  }
}

@keyframes openUp__-bduu {
  to {
    transform: translateY(-101%);
  }
}

@keyframes openDown__Ie8eF {
  to {
    transform: translateY(101%);
  }
}

@keyframes done__U6KWd {
  to {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .curtain__42-7G {
    display: none;
  }
}
/* One-line pitch under the action button: two lines on desktop, three on phones. */
.intro__JiSF- {
  position: absolute;
  z-index: 4;
  top: calc(50% + 215px);
  left: 50%;
  width: min(720px, calc(100% - 48px));
  margin: 0;
  color: var(--yellow);
  font:
    400 clamp(0.55rem, 1.1vw, 1rem)/1 'VT323',
    monospace;
  letter-spacing: 0.025em;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.line__VSGbq {
  display: block;
}

/* Intro: the lines rise in one after another, last. */
@media (prefers-reduced-motion: no-preference) {
  .line__VSGbq {
    animation: rise__T8WmD 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.25s backwards;
  }

  .line__VSGbq:nth-child(2) {
    animation-delay: 1.37s;
  }

  .line__VSGbq:nth-child(3) {
    animation-delay: 1.49s;
  }
}

@keyframes rise__T8WmD {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

.mobile__2wJNX {
  display: none;
}

@media (max-width: 720px) {
  .intro__JiSF- {
    width: calc(100% - 28px);
    font-size: clamp(0.95rem, 3.8vw, 1.2rem);
    line-height: 1.05;
    white-space: normal;
  }

  .desktop__AxdjO {
    display: none;
  }

  .mobile__2wJNX {
    display: block;
  }
}

/* Short phones: follows the action button down. */
@media (max-width: 720px) and (max-height: 900px) {
  .intro__JiSF- {
    top: calc(max(60%, 416px) + 160px);
  }
}
/* One platform's total: small label above a big number. */
.item__udJv5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 1px 10px;
  text-align: center;
}

.item__udJv5 + .item__udJv5 {
  border-left: 1px solid var(--yellow);
}

.label__pY9LZ {
  font:
    500 9px 'DM Mono',
    monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.value__pajwH {
  font:
    400 clamp(1.3rem, 2.5vw, 2rem)/0.9 'VT323',
    monospace;
  font-variant-numeric: tabular-nums; /* keeps the ticking counters from jittering */
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .item__udJv5 {
    padding: 1px 4px;
  }

  .label__pY9LZ {
    font-size: 7px;
    letter-spacing: 0;
  }

  .value__pajwH {
    font-size: clamp(0.88rem, 4.4vw, 1.15rem);
  }
}
/* "Reach over" panel near the top of the hero. */
.reach__MJNA4 {
  position: absolute;
  z-index: 4;
  top: clamp(192px, calc(4vh + 174px), 222px);
  left: 50%;
  width: min(720px, calc(100% - 48px));
  padding: 7px 10px;
  border: 1px solid var(--yellow);
  background: rgba(115, 0, 194, 0.82);
  color: var(--yellow);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

/* Intro: drops in after the logo. */
@media (prefers-reduced-motion: no-preference) {
  .reach__MJNA4 {
    animation: dropIn__WQ039 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.95s backwards;
  }
}

@keyframes dropIn__WQ039 {
  from {
    opacity: 0;
    translate: 0 -28px;
  }
}

/* Heading sits just above the panel, outlined in purple. */
.title__oZ7G- {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 58px;
  margin: 0;
  font:
    400 clamp(2rem, 4vw, 3.4rem)/0.85 'VT323',
    monospace;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: 6px var(--purple);
  paint-order: stroke fill;
}

.grid__kx4zb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Keep the panel clear of the action button on short laptop screens. */
@media (min-width: 721px) {
  .reach__MJNA4 {
    top: min(clamp(192px, calc(4vh + 174px), 222px), calc(50% - 250px));
  }
}

@media (max-width: 720px) {
  .reach__MJNA4 {
    top: 192px;
    width: calc(100% - 28px);
    padding: 7px 8px;
  }
}
/* Faint Warp-A-Bard spiral behind the action button. Its rotation is set from JavaScript on scroll.
   Its slight contrast/saturation boost is baked into the image rather than applied as a CSS filter.
   `translate` (the mouse parallax) and the intro's `scale` combine with that rotation.
   Kept under the marquee band (z-index 2) that overlaps the bottom of the hero. */
.spiral__ZrFnp {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: clamp(950px, 118vw, 1560px);
  height: auto;
  opacity: 0.15;
  translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -22px);
  pointer-events: none;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .spiral__ZrFnp {
    animation: bloom__wAMwK 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
  }
}

@keyframes bloom__wAMwK {
  from {
    opacity: 0;
    scale: 0.55;
  }
}

@media (max-width: 720px) {
  .spiral__ZrFnp {
    width: 560px;
    opacity: 0.2;
  }
}

/* Short phones: centred lower, below the reach panel. */
@media (max-width: 720px) and (max-height: 900px) {
  .spiral__ZrFnp {
    top: max(60%, 416px);
    width: 620px;
  }
}
/* Stage footage filling the hero, slightly oversized so its blurred edges stay off-screen (and so
   the mouse parallax has room to move it). The blur and darkening are baked into the video file:
   as a CSS filter the browser had to redo them on every frame. */
.video__AKW3z {
  position: absolute;
  z-index: 0;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  transform: scale(1.035);
  translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 9px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .video__AKW3z {
    animation: fadeIn__Vp6gP 1.4s ease 0.35s backwards;
  }
}

@keyframes fadeIn__Vp6gP {
  from {
    opacity: 0;
  }
}
/* Full-height stage behind the reach panel, action button and intro text. */
.hero__lg0KH {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* Soft yellow glow over the video. */
.hero__lg0KH::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 204, 0, 0.03), rgba(255, 204, 0, 0.16));
  pointer-events: none;
}

/* Slowly shimmering light behind the action button. */
.hero__lg0KH::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 270px;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.26;
  background: conic-gradient(
    from 15deg,
    transparent 0 12%,
    rgba(255, 204, 0, 0.34) 16%,
    transparent 21% 37%,
    rgba(115, 0, 194, 0.3) 42%,
    transparent 47% 68%,
    rgba(225, 184, 255, 0.24) 73%,
    transparent 80%
  );
  filter: blur(7px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: shine__2Dqz2 6.5s ease-in-out infinite;
}

@keyframes shine__2Dqz2 {
  0%,
  100% {
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(0.9) rotate(0deg);
  }
  50% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(1.12) rotate(24deg);
  }
}

/* Hold every hero animation (the intro included) while the language loading cover is up, so the
   intro plays from its first frame the moment the cover lifts. */
html.language-pending .hero__lg0KH *,
html.language-pending .hero__lg0KH::after {
  animation-play-state: paused;
}

/* Leave room for the action button's pulse on short laptop screens. */
@media (min-width: 721px) {
  .hero__lg0KH {
    min-height: max(100svh, 650px);
  }
}

@media (max-width: 720px) {
  .hero__lg0KH::before {
    background: radial-gradient(circle at center, rgba(26, 8, 41, 0.26), rgba(26, 8, 41, 0.72));
  }

  .hero__lg0KH::after {
    width: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__lg0KH::after {
    animation: none;
  }
}
/* Zero-height marker sitting on the boundary between two sections. */
.marker__qVF6G {
  position: relative;
  height: 0;
}

/* Full-screen layer of rings that rush outward while the boundary crosses the screen.
   Above the section backgrounds, below the roster's cards and "See all bards" link (z-index 2).
   Opacity and scale are set from JavaScript. */
.tunnel__WASqb {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.ring__1ELny {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40vmax;
  height: 40vmax;
  margin: -20vmax 0 0 -20vmax;
  border: 0.9vmax solid var(--yellow);
  border-radius: 50%;
  box-shadow:
    0 0 2.5vmax rgba(255, 204, 0, 0.45),
    inset 0 0 2.5vmax rgba(255, 204, 0, 0.35);
  opacity: 0;
  will-change: transform, opacity;
}

.ring__1ELny:nth-child(even) {
  border-color: var(--purple);
  box-shadow:
    0 0 2.5vmax rgba(115, 0, 194, 0.55),
    inset 0 0 2.5vmax rgba(115, 0, 194, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .tunnel__WASqb {
    display: none;
  }
}
/* Purple title band, then the document as a single readable column on paper. */
.banner__yMEa- {
  padding: 70px 7vw 56px;
  background: var(--purple);
  color: var(--yellow);
}

.title__5hHrT {
  margin: 0 0 14px;
  font:
    400 clamp(2.4rem, 6vw, 4.4rem)/1 'VT323',
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.updated__btFAs {
  margin: 0;
  color: var(--paper);
  font:
    500 12px 'DM Mono',
    monospace;
  text-transform: uppercase;
}

.document__RGsKV {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 7vw 90px;
  box-sizing: content-box;
  line-height: 1.6;
}

.intro__vheML {
  margin-top: 0;
  font-size: 1.15rem;
}

.heading__HGF7Q {
  margin: 44px 0 10px;
  color: var(--purple);
  font:
    400 clamp(1.7rem, 3vw, 2.2rem)/1.1 'VT323',
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.document__RGsKV li {
  margin-bottom: 8px;
}

.link__2eRQZ {
  color: var(--purple);
  font-weight: 600;
  text-decoration: underline;
}

.link__2eRQZ:hover,
.link__2eRQZ:focus-visible {
  color: var(--ink);
}

@media (max-width: 720px) {
  .banner__yMEa- {
    padding: 48px 7vw 40px;
  }

  .document__RGsKV {
    padding: 40px 7vw 64px;
  }
}