/* AJ-Group Games — the games portal. One dark arcade theme on purpose (an arcade hall has no light mode). */

@font-face {
  font-family: "Press Start 2P";
  src: url("PressStart2P-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0b0016;
  --bg-2: #1a0533;
  --ink: #f4ecff;
  --ink-dim: #c9b8e8;
  --magenta: #ff2bd6;
  --pink: #ff4f9a;
  --cyan: #19f0ff;
  --yellow: #ffe600;
  --orange: #ff8a00;
  --lime: #7dff3a;
  --red: #ff3355;
  --violet: #8b3dff;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: transparent; /* the page colour is on <html>, so the sky, sun and floor (z-index < 0) show through */
  color: var(--ink);
  font-family: var(--mono);
  line-height: 1.5;
  overflow-x: hidden;
}

/* CRT: scanlines + vignette over everything, never in the way of a click. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0, 0, 0, .55) 100%);
}

a { color: var(--cyan); }

/* ------------------------------------------------------------------ backdrop */

.sky {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 8%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 41% 26%, #ffe9a8 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 73% 22%, #b9f6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 9%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 94% 31%, #ffc6f2 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 36%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 41%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 38%, #fff 50%, transparent 51%),
    radial-gradient(140% 70% at 50% 0%, #3a0a6b 0%, #1a0533 45%, var(--bg) 75%);
  animation: twinkle 4s steps(2) infinite;
}

@keyframes twinkle { 50% { filter: brightness(1.35); } }

/* The synthwave floor: a magenta grid running toward you. */
.floor {
  position: fixed;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 42vh;
  z-index: -2;
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 30%),
    repeating-linear-gradient(to right, rgba(255, 43, 214, .55) 0 2px, transparent 2px 80px),
    repeating-linear-gradient(to bottom, rgba(255, 43, 214, .55) 0 2px, transparent 2px 60px),
    linear-gradient(to bottom, #2a0050, #12001f);
  transform: perspective(320px) rotateX(58deg);
  transform-origin: 50% 0;
  animation: run 1.6s linear infinite;
}

.floor::before { /* glow on the horizon */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 80px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 43, 214, .55), transparent 70%);
}

@keyframes run {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 0, 0 60px, 0 0; }
}

/* ------------------------------------------------------------------ language menu */

/* A strip above the score line (the sun is placed from the top of the hero, so it moves down with it).
   A <details>: opens and closes without the script; portal.js only adds Esc and a click elsewhere to close it. */
.topbar {
  position: relative;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px 0;
}
.langmenu { position: relative; }
.langmenu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 6px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--cyan);
  background: rgba(11, 0, 22, .72);
  border: 2px solid var(--cyan);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(25, 240, 255, .35);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary:hover { filter: brightness(1.2); }
.langmenu summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.langmenu .globe { display: block; flex: none; }
.langmenu .chev {
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  transition: transform .12s;
}
.langmenu[open] .chev { transform: rotate(180deg); }
.langmenu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #12001f;
  border: 2px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 0 0 2px #000, 0 0 22px rgba(25, 240, 255, .4);
}
.langmenu-list a {
  display: block;
  padding: 11px 12px 10px 28px;
  position: relative;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink);
  text-decoration: none;
  border-radius: 3px;
}
.langmenu-list a:hover, .langmenu-list a:focus-visible { background: #2a1a48; outline: none; }
.langmenu-list a.is-on { color: var(--yellow); text-shadow: 0 0 8px rgba(255, 230, 0, .6); }
/* The arcade menu cursor on the language in use. */
.langmenu-list a.is-on::before { content: "\25B6"; position: absolute; left: 10px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  text-align: center;
  padding: 8px 16px 8px; /* 18px before the language strip went above it */
  max-width: 1200px;
  margin: 0 auto;
}

.hud {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--red);
  text-shadow: 0 0 8px rgba(255, 51, 85, .7);
}
.hud b { display: block; margin-top: 6px; color: var(--ink); font-weight: normal; text-shadow: none; }
.hud-hi { color: var(--cyan); text-shadow: 0 0 8px rgba(25, 240, 255, .7); }
.hud-credit { color: var(--yellow); text-shadow: 0 0 8px rgba(255, 230, 0, .6); }

/* The Outrun sun behind the logo: a hot gradient cut by widening dark bands. */
.sun {
  position: absolute;
  left: 50%;
  top: 70px;
  width: min(420px, 78vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(to bottom, #fff36b 0%, #ffb000 35%, #ff4f6d 62%, #ff2bd6 85%);
  -webkit-mask: linear-gradient(to bottom, #000 0 50%, transparent 50% 53%, #000 53% 61%, transparent 61% 65%,
                #000 65% 72%, transparent 72% 77%, #000 77% 83%, transparent 83% 89%, #000 89% 93%, transparent 93%);
          mask: linear-gradient(to bottom, #000 0 50%, transparent 50% 53%, #000 53% 61%, transparent 61% 65%,
                #000 65% 72%, transparent 72% 77%, #000 77% 83%, transparent 83% 89%, #000 89% 93%, transparent 93%);
  filter: drop-shadow(0 0 40px rgba(255, 79, 154, .55));
  opacity: .9;
}

.logo {
  position: relative;
  margin: 64px auto 0;
  width: min(660px, 100%);
  line-height: 0;
  animation: bob 3.2s ease-in-out infinite;
}
.logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(255, 43, 214, .45)) drop-shadow(0 10px 0 rgba(0, 0, 0, .35));
}

/* A chrome glint sweeping across the letters only (masked by the logo itself). */
.logo .shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .85) 48%, transparent 56%);
  background-size: 300% 100%;
  -webkit-mask: url("logo.svg") center / 100% 100% no-repeat;
          mask: url("logo.svg") center / 100% 100% no-repeat;
  mix-blend-mode: overlay;
  animation: glint 4.5s ease-in-out infinite;
}

@keyframes glint {
  0%, 55% { background-position: 100% 0; }
  85%, 100% { background-position: 0% 0; }
}

@keyframes bob { 50% { transform: translateY(-6px); } }

/* Four-point twinkles on the letters. */
.spark {
  position: absolute;
  width: 28px;
  height: 28px;
  background:
    linear-gradient(#fff, #fff) center / 4px 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 4px no-repeat;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px var(--cyan));
  animation: sparkle 2.4s steps(1) infinite;
}
.spark.s1 { left: 3%; top: 6%; }
.spark.s2 { left: 58%; top: -4%; animation-delay: .8s; width: 22px; height: 22px; }
.spark.s3 { right: 6%; bottom: 18%; animation-delay: 1.6s; }

@keyframes sparkle {
  0% { opacity: 0; transform: scale(.4); }
  10% { opacity: 1; transform: scale(1); }
  25% { opacity: .2; transform: scale(.6); }
  35%, 100% { opacity: 0; }
}

.tagline {
  margin: 26px 0 14px;
  font-family: var(--pixel);
  font-size: clamp(14px, 2.4vw, 20px);
  color: var(--yellow);
  text-shadow: 3px 3px 0 #b3006b, 0 0 14px rgba(255, 230, 0, .6);
  letter-spacing: .12em;
}

.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.coin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: .1em;
  color: #fff;
  background: linear-gradient(#ff3355, #b3002a);
  border: 3px solid #fff;
  border-radius: 6px;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 6px 0 #5c0016, 0 0 22px rgba(255, 51, 85, .6);
  text-shadow: 2px 2px 0 #5c0016;
}
.coin:hover { filter: brightness(1.12); }
.coin:active { transform: translateY(4px); box-shadow: 0 2px 0 #5c0016, 0 0 22px rgba(255, 51, 85, .6); }

.coin-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff9c4, #ffd600 45%, #c79100 75%);
  box-shadow: 0 0 0 2px #7a5600 inset;
}
.coin.dropped .coin-icon { animation: drop .45s ease-in; }
@keyframes drop {
  0% { transform: translateY(-28px) rotateY(0); }
  70% { transform: translateY(2px) rotateY(540deg); }
  100% { transform: translateY(0) rotateY(720deg); }
}

/* ------------------------------------------------------------------ cabinets */

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px 40px;
}

.select {
  margin: 0 0 30px;
  text-align: center;
  font-family: var(--pixel);
  font-weight: normal;
  font-size: clamp(14px, 2.6vw, 22px);
  letter-spacing: .1em;
  color: var(--cyan);
  text-shadow: 3px 3px 0 #3d00a8, 0 0 16px rgba(25, 240, 255, .7);
}
.select span { color: var(--magenta); text-shadow: 0 0 12px var(--magenta); animation: blink 1.1s steps(1) infinite; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 30px;
  align-items: stretch;
}

.cab {
  --accent: var(--cyan);
  --accent-2: var(--yellow);
  --accent-deep: #003a5c;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(to bottom, #241040, #120724);
  border: 3px solid var(--accent);
  box-shadow:
    0 0 0 3px #000,
    0 0 26px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 0 30px rgba(0, 0, 0, .6);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cab:hover, .cab:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 3px #000,
    0 0 44px color-mix(in srgb, var(--accent) 85%, transparent),
    inset 0 0 30px rgba(0, 0, 0, .6);
}

.cab--didivers { --accent: var(--cyan); --accent-2: var(--yellow); --accent-deep: #003a6b; }
.cab--park     { --accent: var(--lime); --accent-2: var(--orange); --accent-deep: #1f5200; }
.cab--neon     { --accent: var(--magenta); --accent-2: var(--cyan); --accent-deep: #5c0050; }
.cab--racetrack { --accent: var(--red); --accent-2: var(--yellow); --accent-deep: #5c0016; }
.cab--avion   { --accent: var(--orange); --accent-2: var(--cyan); --accent-deep: #6b3500; }

/* The lit marquee on top of the cabinet. */
.marquee {
  position: relative;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-radius: 14px 14px 0 0;
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 6px),
    linear-gradient(var(--accent-deep), #0d0420);
  border-bottom: 3px solid #000;
}
.marquee h3 {
  margin: 0;
  font-family: var(--pixel);
  font-weight: normal;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: .06em;
  color: #fff;
  text-shadow:
    3px 3px 0 color-mix(in srgb, var(--accent) 60%, #000),
    0 0 10px var(--accent),
    0 0 24px var(--accent);
}
.cab--park .marquee h3 { font-size: 15px; }
.marquee .nb { white-space: nowrap; } /* a subtitle that must wrap breaks between these, not mid-phrase */
.marquee p {
  margin: 0;
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--accent-2);
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent-2) 70%, transparent);
}

/* The CRT inside its bezel. */
.screen {
  position: relative;
  margin: 16px 16px 0;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, #2b2b3a, #0c0c14);
  box-shadow: inset 0 0 0 2px #000, inset 0 4px 10px rgba(255, 255, 255, .08), 0 3px 0 #000;
}
.shots {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px / 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 2px #000, 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.shots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.25) contrast(1.06);
}
/* Attract mode: the shots take turns (2 or 3 of them). */
.shots--2 img:nth-child(2) { animation: show2 9s steps(1) infinite; opacity: 0; }
@keyframes show2 { 50% { opacity: 1; } }
.shots--3 img:nth-child(2) { animation: show3b 12s steps(1) infinite; opacity: 0; }
.shots--3 img:nth-child(3) { animation: show3c 12s steps(1) infinite; opacity: 0; }
@keyframes show3b { 33.3% { opacity: 1; } 66.6% { opacity: 0; } }
@keyframes show3c { 66.6% { opacity: 1; } }

/* Glass: scanlines, curvature shade and a glare. */
.shots::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, transparent 28%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
    radial-gradient(110% 100% at 50% 50%, transparent 62%, rgba(0, 0, 0, .55) 100%);
}

.tag, .sticker {
  position: absolute;
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: .08em;
  z-index: 2;
}
.tag {
  left: 22px;
  bottom: 22px;
  padding: 6px 7px;
  color: #000;
  background: var(--accent-2);
  box-shadow: 2px 2px 0 #000;
}
.sticker {
  right: 2px;
  top: -12px;
  padding: 8px 9px;
  color: #fff;
  background: var(--red);
  border: 2px solid #fff;
  transform: rotate(6deg);
  box-shadow: 3px 3px 0 #000;
}

/* The control deck. */
.deck {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
  padding: 16px 18px 20px;
}
.panel {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  background: linear-gradient(#1a1a26, #08080f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 2px 0 #000;
}
.stick {
  position: relative;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8aa0, var(--red) 50%, #7a0016);
  box-shadow: 0 6px 0 -2px #222, 0 8px 0 -2px #000;
  transform: translateY(-5px);
}
.btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), 0 2px 0 #000;
}
.b1 { background: var(--yellow); }
.b2 { background: var(--cyan); }
.b3 { background: var(--magenta); }

.blurb {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}

.keys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-dim);
}
kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px 3px;
  color: #fff;
  background: #2a1a48;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, #000);
  border-bottom-width: 3px;
  border-radius: 4px;
}
.keys .touch { color: var(--accent-2); }

.actions {
  margin-top: auto;
  display: grid;
  gap: 12px;
}

/* PLAY: a fat arcade button that really presses down. */
.play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 16px;
  font-family: var(--pixel);
  font-size: 15px;
  letter-spacing: .12em;
  text-decoration: none;
  text-align: center;
  color: #000;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 70%, #000));
  border: 3px solid #000;
  border-radius: 8px;
  box-shadow: 0 6px 0 #000, 0 0 20px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform .06s, box-shadow .06s, filter .12s;
}
.play::after { content: "\25B6"; font-size: 13px; }
.play:hover { filter: brightness(1.12); }
.play:active { transform: translateY(5px); box-shadow: 0 1px 0 #000, 0 0 20px color-mix(in srgb, var(--accent) 60%, transparent); }
.play:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}
/* The arcade menu cursor next to whichever game is selected. */
.play:focus-visible::before {
  content: "\25B6";
  position: absolute;
  left: -26px;
  color: var(--yellow);
  text-shadow: 0 0 8px var(--yellow);
  animation: blink .8s steps(1) infinite;
}

/* PLAY without a credit: the button shakes and the coin box comes up. */
.play.denied { animation: shake .4s; }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.coin-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 28px 24px 24px;
  text-align: center;
  color: var(--ink);
  background: radial-gradient(120% 100% at 50% 0%, #3a0a6b, #12001f 72%);
  border: 3px solid var(--yellow);
  border-radius: 14px;
  box-shadow: 0 0 0 3px #000, 0 0 44px rgba(255, 230, 0, .45);
}
.coin-dialog::backdrop { background: rgba(5, 0, 15, .78); }
.coin-dialog-game {
  margin: 0 0 18px;
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(25, 240, 255, .7);
}
.coin-dialog h2 {
  margin: 0 0 24px;
  font-family: var(--pixel);
  font-weight: normal;
  font-size: clamp(16px, 4.8vw, 22px);
  line-height: 1.5;
  color: var(--yellow);
  text-shadow: 3px 3px 0 #b3006b, 0 0 14px rgba(255, 230, 0, .6);
}
.coin-dialog.ready h2 { color: var(--lime); text-shadow: 3px 3px 0 #1f5200, 0 0 14px rgba(125, 255, 58, .7); animation: none; }
.coin--big { font-size: 14px; padding: 16px 24px; }
.coin--big .coin-icon { width: 22px; height: 22px; }
.coin:disabled { cursor: default; filter: saturate(.4); }
.coin-dialog-hint {
  margin: 20px 0 0;
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--ink-dim);
}
.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-keys { display: none; }
  .hint-touch { display: inline; }
}

/* ------------------------------------------------------------------ footer */

.foot {
  text-align: center;
  padding: 10px 16px 40px;
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-dim);
}
.foot p { margin: 10px 0; }
.foot .small { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }

/* A small pixel alien of our own. */
.invader {
  display: inline-block;
  width: 22px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 8px;
  background: url("icon.svg") center / contain no-repeat;
  animation: march 1s steps(2) infinite;
}
@keyframes march { 50% { transform: translateX(4px); } }

/* ------------------------------------------------------------------ small screens */

@media (max-width: 600px) {
  .hud { font-size: 9px; }
  .logo { margin-top: 50px; }
  .sun { top: 56px; }
  .spark { width: 18px; height: 18px; }
  .grid { gap: 26px; }
  .marquee h3 { font-size: 18px; }
  .cab--park .marquee h3 { font-size: 13px; }
  .play:focus-visible::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .shots img:not(:first-child) { opacity: 0; }
}