/* THE PALETTE.
   Two lineages, both true:
     INK + BONE  = 2 Tone. Coventry, 1979. The checkerboard, the suits, the type.
     GREEN/GOLD/RED = Jamaica. Kingston, where the music actually came from.

   Roles are fixed. Do not reach for a colour because it looks nice here:
     green = ACTION      (buttons, links, the thing you click)
     gold  = THE KAZOO   (the instrument, and the member count. nothing else)
     red   = LOUD        (the closer, live, warnings. rare, so it lands)

   The green is DARK and the red is BRIGHT on purpose. Red against green is the hardest
   pair for the commonest colour blindness, so they are separated by ~30 points of
   luminance as well as hue: even if the hue collapses, one still reads clearly darker.
   Colour NEVER carries meaning alone. Everything also has a label, a shape, or a place. */

:root {
  --ink:   #101010;
  --bone:  #F6F2E8;

  --green: #00874F;   /* action. dark on purpose */
  --green-lift: #00A862;
  --gold:  #FFC53D;   /* the kazoo. and the count. that is all */
  --red:   #FF4B33;   /* loud. bright on purpose */

  --grey:  #5A5A55;
  --check: 12px;

  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--bone); padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 3px solid var(--green-lift); outline-offset: 3px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 24px;
  background: var(--ink); color: var(--bone);
  border-bottom: 5px solid var(--green);
}
.nav-brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--bone); text-decoration: none;
  font-weight: 800; letter-spacing: 1px; font-size: 18px;
}
.nav-brand img { transition: transform .3s ease; }
.nav-brand:hover img { transform: rotate(45deg); }   /* the X squares up. one egg, that is it. */
.nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav-links a {
  color: var(--bone); text-decoration: none; font-weight: 600; font-size: 15px;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--green-lift); }
.nav-cta {
  background: var(--green); color: var(--bone) !important;
  padding: 9px 16px; border-radius: 999px; font-weight: 800;
  transition: background .15s ease, transform .15s ease;
}
.nav-cta:hover { background: var(--red); color: var(--bone) !important; transform: translateY(-2px); }

/* ---------- shared ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 820px) { .wrap-split { grid-template-columns: 1fr; gap: 32px; } }

.band { padding: 88px 0; }
.band-dark { background: var(--ink); color: var(--bone); }
.band-green { background: var(--green); color: var(--bone); }
.band-red   { background: var(--red);   color: var(--ink); }
.band-bone  { background: var(--bone);  color: var(--ink); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;                 /* Anton has one weight, and it is already a shout */
  line-height: 0.94;
  margin: 0 0 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
h1 { font-size: clamp(52px, 9vw, 118px); }
h2 { font-size: clamp(38px, 5.6vw, 70px); }
h3 { font-size: clamp(26px, 3.2vw, 38px); }

/* TWO-TONE HEADINGS.
   splitheads.js splits every heading per character into alternating .ch-a / .ch-b.
   At rest the heading is one colour and reads normally. On hover the letters alternate
   INK and BONE, and the checkerboard runs straight through the type.

   Black and white, deliberately, and NOT the brand colours. Maximum contrast means the
   effect reads identically on green, on red, on ink, on bone, and it cannot collapse for
   any kind of colour vision. The background carries Jamaica. The letters carry 2 Tone. */
/* EVERY LETTER IS A TILE.
   Colouring the letters alone was broken: ink letters vanished on the ink band and bone
   letters vanished on the bone band, so half of every heading disappeared on hover.

   So each character gets its own square instead. Black letter on a white tile, white
   letter on a black tile, alternating. That is not a workaround for the contrast problem,
   it IS the checkerboard, and it cannot fail on ANY background: green, red, ink, bone,
   or a photograph. Both the glyph and its ground are always maximum contrast. */
.ch {
  display: inline-block;
  padding: 0.04em 0.035em;
  background: transparent;
  transition: color .12s ease, background-color .12s ease;
}

h1:hover .ch-a, h2:hover .ch-a, h3:hover .ch-a {
  color: var(--ink);
  background-color: var(--bone);
}
h1:hover .ch-b, h2:hover .ch-b, h3:hover .ch-b {
  color: var(--bone);
  background-color: var(--ink);
}

.kicker {
  font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  color: var(--green); margin: 0 0 12px;
}
.band-dark .kicker { color: var(--green-lift); }
.band-green .kicker { color: var(--gold); }
.band-red .kicker { color: var(--ink); opacity: .75; }

.lede { font-size: clamp(18px, 2vw, 21px); max-width: 62ch; margin: 0 0 24px; }

.check-rule {
  height: var(--check);
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%),
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%);
  background-size: calc(var(--check) * 2) calc(var(--check) * 2);
  background-position: 0 0, var(--check) var(--check);
  background-color: var(--bone);
}

.btn {
  display: inline-block; padding: 15px 26px; border-radius: 999px;
  font-weight: 800; font-size: 16px; text-decoration: none; border: 3px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-green { background: var(--green); color: var(--bone); }
.btn-green:hover { background: var(--red); color: var(--bone); }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: var(--bone); color: var(--ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--ink); color: var(--bone); overflow: hidden; }
.hero-art {
  position: absolute; inset: 0;
  background: url('/assets/img/hero-stage.webp') center / cover no-repeat;
  opacity: .5;
}
.hero-inner {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  padding: 132px 24px 108px;
}
.hero h1 { text-shadow: 0 6px 30px rgba(16,16,16,.7); }
.hero .lede { color: var(--bone); }

/* THE COUNTER. This is the best fact on the site, so it is the biggest thing on it.
   Gold, because every one of these numbers is a kazoo. */
.counter {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin: 34px 0 36px; padding: 22px 28px 22px 24px;
  background: rgba(16,16,16,.75);
  border-left: 10px solid var(--gold);
  backdrop-filter: blur(2px);
}
.counter-n {
  font-family: var(--display);
  font-size: clamp(64px, 9vw, 124px);
  line-height: 0.85;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.counter-label {
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 600; line-height: 1.35; color: var(--bone);
}

/* /horns keeps the old inline treatment */
.count-line {
  font-size: clamp(18px, 2.2vw, 24px);
  margin: 26px 0 30px; padding: 16px 22px;
  display: inline-block;
  background: rgba(16,16,16,.72);
  border-left: 8px solid var(--gold);
}
.count-line strong {
  font-family: var(--display);
  font-size: 1.6em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- the kazoo toy ---------- */
.kazoo-box {
  margin-top: 34px; padding: 30px;
  background: #1A1A18; border: 3px solid var(--gold);
  display: grid; gap: 20px; justify-items: center;
}
.kazoo-btn {
  font-family: var(--sans); font-weight: 900; font-size: 20px; letter-spacing: 1px;
  background: var(--gold); color: var(--ink);
  border: none; border-radius: 999px; padding: 22px 46px; cursor: pointer;
  transition: transform .1s ease, background .15s ease, box-shadow .2s ease;
  touch-action: manipulation; user-select: none;
}
.kazoo-btn:hover { transform: translateY(-2px); }
.kazoo-btn[aria-pressed="true"] {
  background: var(--red); color: var(--bone);
  transform: scale(.97);
  box-shadow: 0 0 0 10px rgba(255,75,51,.18), 0 0 40px rgba(255,75,51,.35);
}
.kazoo-viz { width: 100%; max-width: 600px; height: 120px; display: block; }
.kazoo-status { margin: 0; font-size: 14px; color: #9A968C; text-align: center; }
.kazoo-status[data-err="1"] { color: var(--red); }

/* ---------- anatomy + how to ---------- */
.anatomy { margin: 40px 0 56px; }
.anatomy img { width: 100%; border: 3px solid var(--ink); }

.howto-head { margin-top: 8px; }
.howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 74ch; }
.howto li {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start;
  padding: 20px; background: #fff; border: 3px solid var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.howto li:hover { transform: translateY(-3px); box-shadow: 8px 8px 0 var(--green); }
.howto-n {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--bone); font-weight: 900; font-size: 22px;
}

/* ---------- band + origin ---------- */
.roster img, .origin-art img { border: 4px solid var(--bone); }
.member-note {
  border-left: 8px solid var(--gold); padding-left: 16px; color: var(--gold);
  font-weight: 600;
}

/* ---------- set ---------- */
.set-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px; margin: 34px 0 48px;
}
.set-card {
  border: 3px solid var(--ink); padding: 20px; background: #fff;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.set-card:hover { transform: translateY(-4px); box-shadow: 10px 10px 0 var(--ink); background: var(--green); color: var(--bone); }
/* Inside a set card, nothing is coloured. Ink at rest, bone on the green hover, and that
   is all. Red on green was both hard to read and the exact pair this palette is built to
   keep apart. The card carries the colour; the type does not need to. */
.set-card .kicker,
.set-card .set-n { color: var(--ink); }
.set-card:hover .kicker,
.set-card:hover .set-n { color: var(--bone); }
.set-card h3 { font-size: 20px; margin: 0 0 10px; }
.set-card ul { margin: 0; padding-left: 18px; }
.set-card li { margin: 4px 0; }
.set-card .set-n {
  float: right; font-size: 13px; font-weight: 800; color: var(--grey);
  font-variant-numeric: tabular-nums;
}

.closer {
  border: 3px solid var(--ink); border-left-width: 14px; padding: 28px;
  background: #fff; max-width: 74ch;
  transition: box-shadow .15s ease;
}
.closer:hover { box-shadow: 12px 12px 0 var(--red); }

/* ---------- the relic ---------- */
.relic {
  margin: 0 0 56px; max-width: 520px;
}
.relic img { border: 3px solid var(--ink); width: 100%; }
.relic figcaption {
  margin-top: 12px; font-size: 15px; color: var(--grey); max-width: 46ch;
}

/* ---------- join ---------- */
.join-band { position: relative; overflow: hidden; }
.join-art {
  position: absolute; inset: 0;
  background: url('/assets/img/horn-section-crowd.webp') center / cover no-repeat;
  opacity: .22;
  mix-blend-mode: multiply;
}
.join-band .wrap { position: relative; }

.join-form { margin: 30px 0 0; max-width: 640px; }
.join-form label { display: block; font-weight: 700; margin-bottom: 10px; }
.join-row { display: flex; gap: 12px; flex-wrap: wrap; }
.join-row input {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--sans); font-size: 17px; padding: 15px 18px;
  border: 3px solid var(--ink); background: var(--bone); color: var(--ink);
}
.join-row input::placeholder { color: #8A8680; }
.join-error { margin: 14px 0 0; font-weight: 700; color: var(--ink); background: var(--red); padding: 10px 14px; }

.card-out { margin-top: 34px; }

/* the membership card */
.card {
  position: relative; max-width: 620px;
  border: 4px solid var(--ink);
  background: url('/assets/img/union-card.webp') center / cover no-repeat, var(--bone);
  padding: 26px;
  box-shadow: 12px 12px 0 var(--ink);
}
.card-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.card-head img { width: 42px; height: 42px; }
.card-org { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
.card-fields { display: grid; gap: 14px; }
.card-field { background: rgba(246,242,232,.94); border: 2px solid var(--ink); padding: 12px 16px; }
.card-label { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--grey); }
.card-value { font-size: 26px; font-weight: 900; line-height: 1.2; word-break: break-word; }
.card-value.serial { font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.card-foot { margin-top: 16px; font-size: 13px; font-weight: 700; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--bone); padding: 44px 0; border-top: 5px solid var(--green); }
.foot-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-word { margin: 0; font-weight: 900; letter-spacing: 1px; }
.foot-sub { margin: 2px 0 0; font-size: 13px; color: #9A968C; letter-spacing: 1.5px; }
.foot-social { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.foot-social a { color: var(--bone); text-decoration: none; font-weight: 600; font-size: 14px; transition: color .15s ease; }
.foot-social a:hover { color: var(--green-lift); }

/* ---------- the wall (/horns) ---------- */
.wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 3px; margin: 34px 0; background: var(--ink); border: 3px solid var(--ink);
}
.tile {
  aspect-ratio: 1; padding: 10px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--bone); color: var(--ink);
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.tile:nth-child(even) { background: var(--ink); color: var(--bone); }
.tile:hover { background: var(--gold); color: var(--ink); transform: scale(1.06); z-index: 2; }
.tile-n { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; opacity: .75; }
.tile-name { font-size: 17px; font-weight: 800; line-height: 1.15; word-break: break-word; }
.tile-kind { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.tile-band .tile-kind { color: var(--gold); }
.tile-guest .tile-kind { color: var(--red); }
/* The tile hover is gold, so a gold "FOUNDING" label would vanish into it. On hover every
   label goes ink: the tile is the colour now, the text does not need to be. */
.tile:hover .tile-kind { color: var(--ink); }
.tile-empty { background: repeating-linear-gradient(45deg, #E7E1D2, #E7E1D2 6px, #EFEAE0 6px, #EFEAE0 12px); }

/* ---------- tour ---------- */
.tour-hero { position: relative; overflow: hidden; }
.tour-hero-art {
  position: absolute; inset: 0;
  background: url('/assets/img/horn-section-crowd.webp') center / cover no-repeat;
  opacity: .38;
}
.tour-hero .wrap { position: relative; }

.tour-list { margin-top: 34px; display: grid; gap: 3px; }

.show {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center;
  padding: 22px 24px; background: #fff; border: 3px solid var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.show:hover { transform: translateX(6px); box-shadow: -10px 0 0 var(--green); }
.show-date {
  display: grid; place-items: center; text-align: center;
  background: var(--ink); color: var(--bone); padding: 10px 6px;
}
.show-mon { font-size: 13px; font-weight: 800; letter-spacing: 2px; }
.show-day { font-family: var(--display); font-size: 38px; line-height: 1; }
.show-main h3 { margin: 0 0 4px; }
.show-venue { margin: 0; color: var(--grey); font-weight: 600; }
.show-note { margin: 6px 0 0; color: var(--green); font-weight: 700; font-size: 14px; }
.show-tba { font-weight: 800; color: var(--grey); }
.show-done { font-weight: 800; color: var(--red); letter-spacing: 2px; text-transform: uppercase; font-size: 13px; }
.show-past { opacity: .55; }

.tour-empty {
  border: 4px dashed var(--ink); padding: 40px; background: #fff; max-width: 70ch;
}
.tour-empty-head {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(30px, 4vw, 46px); margin: 0 0 14px; line-height: 1;
}
.tour-empty p { margin: 0 0 14px; }
.tour-empty .btn { margin-top: 10px; }

.rider {
  background: var(--ink); color: var(--bone); padding: 30px; border: 4px solid var(--bone);
}
.rider-head {
  font-family: var(--display); text-transform: uppercase; font-size: 30px;
  margin: 0 0 16px; color: var(--gold);
}
.rider-list { margin: 0; padding-left: 22px; }
.rider-list li { margin: 8px 0; font-weight: 600; }

@media (max-width: 700px) {
  .show { grid-template-columns: 72px 1fr; }
  .show-action { grid-column: 2; }
}

/* ============================================================================
   TEXTURE, RHYTHM, MOTION
   The artwork is screenprinted: halftone dots, grain, ink that missed the plate.
   The interface was flat and clean, so the two read as photos taped to a spreadsheet.
   This makes the chrome the same object as the art.
   ============================================================================ */

/* ---------- grain ----------
   Procedural, via feTurbulence in a data URI. No asset to download, no request. It sits
   over the whole page at low opacity and is pointer-transparent so it never eats a click. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- halftone ----------
   The dark bands get a dot screen, densest at the top edge, fading out. It is the same
   move the posters make and it stops a black band from being a black rectangle. */
.band-dark, .band-green, .hero, .tour-hero { position: relative; }
.band-dark::before, .band-green::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1.1px);
  background-size: 6px 6px;
  opacity: 0.06;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%);
  mask-image: linear-gradient(to bottom, #000, transparent 55%);
}
.band-dark > .wrap, .band-green > .wrap { position: relative; z-index: 1; }

/* ---------- the checkerboard as architecture ----------
   It was a 12px garnish between sections. Now the seams are torn: the check rule is
   thicker, sits at an angle, and the tiles run off both edges. */
.check-rule {
  height: 28px;
  transform: rotate(-0.4deg) scaleX(1.04);
  margin: -8px 0;
  position: relative; z-index: 2;
  box-shadow: 0 0 0 1px rgba(16,16,16,0.06);
}

/* A checkerboard floor in perspective, for the band section. This is the stage. */
.floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%);
  mask-image: linear-gradient(to top, #000 10%, transparent 90%);
  opacity: 0.5;
}
.floor::before {
  content: '';
  position: absolute; left: -60%; right: -60%; bottom: -40px; height: 460px;
  background-image:
    linear-gradient(45deg, var(--bone) 25%, transparent 25%, transparent 75%, var(--bone) 75%),
    linear-gradient(45deg, var(--bone) 25%, transparent 25%, transparent 75%, var(--bone) 75%);
  background-size: 76px 76px;
  background-position: 0 0, 38px 38px;
  transform: perspective(280px) rotateX(62deg);
  transform-origin: bottom center;
}

/* ---------- the marquee ----------
   PICK IT UP is not a lyric, it is an instruction that ska crowds have been shouting at
   each other for decades. It belongs on the wall, moving. */
.marquee {
  background: var(--ink); color: var(--bone);
  border-top: 5px solid var(--gold); border-bottom: 5px solid var(--gold);
  overflow: hidden; white-space: nowrap;
  padding: 14px 0;
}
.marquee-track {
  display: inline-block;
  animation: bq-march 26s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  font-family: var(--display); text-transform: uppercase;
  font-size: 34px; letter-spacing: 2px; padding: 0 26px;
}
.marquee span:nth-child(even) { color: var(--gold); }
@keyframes bq-march { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- reveal on the offbeat ---------- */
.reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(26px) rotate(-0.6deg);
  transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
}
.reveal-armed [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ---------- scale contrast ----------
   Everything was the same size. The hero and the counter now shout; the rest speaks. */
.hero-inner { padding: 150px 24px 130px; }
.band { padding: 104px 0; }
.band-tight { padding: 64px 0; }

/* Images break the grid instead of sitting politely inside it. */
.roster img { transform: rotate(1.2deg); box-shadow: 16px 16px 0 var(--gold); }
.origin-art img { transform: rotate(-1.2deg); box-shadow: -16px 16px 0 var(--green); }
.relic img { transform: rotate(-1deg); box-shadow: 12px 12px 0 var(--red); }
.roster img, .origin-art img, .relic img { transition: transform .3s ease, box-shadow .3s ease; }
.roster img:hover { transform: rotate(0deg) scale(1.02); }
.origin-art img:hover { transform: rotate(0deg) scale(1.02); }
.relic img:hover { transform: rotate(0deg) scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .roster img, .origin-art img, .relic img { transform: none; }
  .check-rule { transform: none; }
}