/*
 * "Spin the archive" slot machine on the home page: a grimy PS1-style arcade
 * cabinet with one reel, a lever and a big red button.
 *
 * The machine sits inside the 1024px page canvas, so its sizes are canvas
 * pixels and scale with the rest of the page. Every part is placed inside the
 * 568 x 332 section. The textures in assets/slot/ are 64px tiles shown 4x with
 * hard edges, so each texel reads as a chunky block. The result dialog lives
 * outside the canvas and is sized for the real screen.
 */

.slot {
  --item: 100px;
  --red: rgb(137, 19, 19);
  --red-hot: rgb(200, 0, 0);
  --blue: rgba(0, 102, 255, 0.8);
  --amber: #ffb21a;
  --metal: url("../assets/slot/cabinet.png") 0 0 / 256px 256px;
  --worn: url("../assets/slot/ledge.png") 0 0 / 256px 256px;
  /* Darker faces: a flat black layer over the texture. */
  --shade-1: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  --shade-2: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  --shade-3: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

  position: absolute;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-family: Oswald, sans-serif;
}

.slot-cabinet {
  position: absolute;
  inset: 0;
}

.slot-cabinet > *,
.slot-lever > * {
  position: absolute;
  box-sizing: border-box;
  image-rendering: pixelated;
}

/* --- cabinet ---------------------------------------------------------------- */

.slot-shadow {
  left: 30px;
  top: 306px;
  width: 420px;
  height: 30px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), transparent);
}

/* Flat-shaded faces: a light top edge, dark bottom and right edges. */
.slot-body,
.slot-head,
.slot-base {
  background: var(--metal);
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, 0.1),
    inset 4px 0 0 rgba(255, 255, 255, 0.05),
    inset -6px 0 0 rgba(0, 0, 0, 0.35),
    inset 0 -6px 0 rgba(0, 0, 0, 0.45);
}

.slot-body {
  left: 52px;
  top: 50px;
  width: 356px;
  height: 202px;
}

/* The cabinet's right side, turned away from the light. */
.slot-side {
  left: 408px;
  top: 58px;
  width: 20px;
  height: 194px;
  background: var(--shade-3), var(--metal);
  background-position: 37px 11px;
  clip-path: polygon(0 0, 100% 9%, 100% 100%, 0 100%);
}

.slot-head {
  left: 72px;
  top: 0;
  width: 316px;
  height: 58px;
  padding: 9px 26px 7px;
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  background-position: 13px 41px;
}

/* Amber LED display, striped like a cheap dot-matrix panel. */
.slot-title {
  height: 100%;
  margin: 0;
  background: #070605;
  box-shadow: inset 0 0 0 3px #000, inset 0 0 14px rgba(255, 150, 0, 0.15);
  color: var(--amber);
  font-size: 26px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 3px;
  text-align: center;
  text-shadow: 0 0 6px rgba(255, 160, 0, 0.7), 0 0 16px rgba(255, 110, 0, 0.45);
}

.slot-title span {
  background: repeating-linear-gradient(#ffd34d 0 2px, #e08a00 2px 3px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slot-base {
  left: 80px;
  top: 276px;
  width: 300px;
  height: 46px;
  background: var(--shade-1), var(--metal);
  background-position: 91px 7px;
}

.slot-base-hole {
  position: absolute;
  inset: 8px 22px 0;
  background: linear-gradient(#000, #0d0f0b);
  box-shadow: inset 0 6px 0 rgba(0, 0, 0, 0.6);
}

/* --- screen ----------------------------------------------------------------- */

.slot-bezel {
  left: 64px;
  top: 62px;
  width: 332px;
  height: 168px;
  padding: 12px;
  background: var(--shade-2), var(--metal);
  background-position: 101px 3px;
  box-shadow:
    inset 0 6px 0 rgba(0, 0, 0, 0.55),
    inset 6px 0 0 rgba(0, 0, 0, 0.4),
    inset 0 -3px 0 rgba(255, 255, 255, 0.08);
}

.slot-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding-top: 8px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at center, #12100b, #030303 75%);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 22px rgba(0, 0, 0, 0.9);
}

/* CRT scanlines across the whole screen. */
.slot-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px);
}

.slot-sub {
  margin: 6px 0 0;
  color: var(--amber);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(255, 150, 0, 0.6);
}

/* --- reel --------------------------------------------------------------------- */

.slot-reels {
  position: relative;
  width: 268px;
  margin: 0 auto;
}

.slot-reel {
  position: relative;
  height: var(--item);
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 2px #1b1a14;
}

/* A fade at the top and bottom of the window. */
.slot-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(#000 0%, transparent 24%, transparent 76%, #000 100%);
}

.slot-strip {
  will-change: transform;
}

/* Low-res, dithered thumbnails, enlarged without smoothing. */
.slot-strip img {
  display: block;
  width: 100%;
  height: var(--item);
  object-fit: cover;
  image-rendering: pixelated;
}

.slot.is-spinning .slot-strip {
  filter: blur(1.5px) saturate(1.6);
}

.slot-payline {
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--red-hot);
  box-shadow: 0 0 8px var(--red-hot);
  opacity: 0.85;
  pointer-events: none;
}

.slot-payline::before,
.slot-payline::after {
  content: "";
  position: absolute;
  top: -6px;
  border: 7px solid transparent;
}

.slot-payline::before {
  left: -6px;
  border-left-color: var(--red-hot);
}

.slot-payline::after {
  right: -6px;
  border-right-color: var(--red-hot);
}

/* --- ledge ---------------------------------------------------------------------- */

.slot-ledge {
  left: 30px;
  top: 244px;
  width: 400px;
  height: 40px;
}

.slot-ledge-top,
.slot-ledge-front {
  position: absolute;
  left: 0;
  width: 100%;
  background: var(--worn);
  image-rendering: pixelated;
}

.slot-ledge-top {
  top: 0;
  height: 17px;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}

.slot-ledge-front {
  top: 17px;
  height: 21px;
  background: var(--shade-2), var(--worn);
  background-position: 0 -17px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.5);
}

/* Coin slot on the front of the ledge. */
.slot-coin {
  position: absolute;
  right: 14px;
  top: 19px;
  width: 14px;
  height: 17px;
  background: linear-gradient(90deg, transparent 5px, #000 5px 9px, transparent 9px), #b3140f;
  box-shadow: inset 0 2px 0 #e0352b, inset 0 -2px 0 #5c0907;
}

/* --- spin button: a red dome on a hazard-striped plate ------------------------- */

.slot-spin {
  left: 312px;
  top: 214px;
  width: 84px;
  height: 50px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.slot-spin::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 24px;
  background: repeating-linear-gradient(-45deg, #f2c418 0 6px, #111 6px 12px);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.45);
}

/* Low-poly dome: a 12-sided outline with stepped shading. */
.slot-spin-dome {
  position: absolute;
  left: 16px;
  top: 0;
  width: 52px;
  height: 36px;
  clip-path: polygon(25% 0, 75% 0, 92% 12%, 100% 32%, 100% 70%, 92% 88%, 75% 100%, 25% 100%, 8% 88%, 0 70%, 0 32%, 8% 12%);
  background: radial-gradient(circle at 36% 28%, #ff8b78 0 12%, #e2382b 12% 32%, #b81e16 32% 56%, #7d100c 56% 80%, #4a0807 80%);
  color: #fff;
  font: 700 12px/36px Oswald, sans-serif;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 1px 0 #3a0503;
  transition: transform 0.1s, filter 0.2s;
}

.slot-spin:hover .slot-spin-dome {
  filter: brightness(1.25);
}

.slot-spin:active .slot-spin-dome {
  transform: translateY(4px);
}

.slot-spin:disabled,
.slot-lever:disabled {
  cursor: progress;
}

.slot-spin:disabled .slot-spin-dome {
  transform: translateY(4px);
  filter: brightness(0.8);
}

/* --- lever ------------------------------------------------------------------------ */

.slot-lever {
  position: absolute;
  left: 404px;
  top: 0;
  width: 120px;
  height: 230px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* The disc the lever turns on, seen from the side. */
.slot-lever-hub {
  left: 10px;
  top: 126px;
  width: 30px;
  height: 66px;
  border-radius: 50%;
  background: var(--worn);
  background-position: 40px 0;
  box-shadow: inset -6px 0 0 rgba(0, 0, 0, 0.45), inset 3px 0 0 rgba(255, 255, 255, 0.12);
}

.slot-lever-stick {
  left: 21px;
  top: 40px;
  width: 9px;
  height: 120px;
  background: var(--worn);
  background-position: 60px 0;
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.4);
  transform-origin: 50% 100%;
  transform: rotate(22deg);
  transition: transform 0.18s ease-in;
}

/* Low-poly ball, same shading as the dome. */
.slot-lever-knob {
  position: absolute;
  left: -16px;
  top: -36px;
  width: 41px;
  height: 41px;
  clip-path: polygon(30% 0, 70% 0, 92% 14%, 100% 38%, 100% 62%, 92% 86%, 70% 100%, 30% 100%, 8% 86%, 0 62%, 0 38%, 8% 14%);
  background: radial-gradient(circle at 36% 30%, #ff8b78 0 12%, #e2382b 12% 32%, #b81e16 32% 56%, #7d100c 56% 80%, #4a0807 80%);
  transition: filter 0.2s;
}

.slot-lever:hover .slot-lever-knob {
  filter: brightness(1.25);
}

.slot-lever.is-pulled .slot-lever-stick {
  transform: rotate(118deg);
}

/* --- PS1 wobble while spinning, flash on a win ------------------------------------ */

@keyframes slot-jitter {
  0%, 100% { transform: none; }
  25% { transform: translate(1px, 0); }
  50% { transform: translate(0, 1px); }
  75% { transform: translate(-1px, 0); }
}

.slot.is-spinning .slot-cabinet {
  animation: slot-jitter 0.16s steps(1, end) infinite;
}

@keyframes slot-glitch {
  0%, 100% { transform: none; filter: none; }
  20% { transform: translateX(2px); filter: hue-rotate(-30deg) brightness(1.4); }
  40% { transform: translateX(-2px) skewX(-6deg); filter: none; }
  60% { transform: none; filter: brightness(1.6); }
}

@keyframes slot-payline-win {
  0%, 100% { opacity: 0.85; }
  25%, 75% { opacity: 0.15; }
  50% { opacity: 1; box-shadow: 0 0 18px var(--red-hot); }
}

.slot.is-win .slot-title {
  animation: slot-glitch 0.5s steps(2) 2;
}

.slot.is-win .slot-payline {
  animation: slot-payline-win 0.6s linear 2;
}

/* --- result dialog ---------------------------------------------------------- */

.slot-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  font-family: Oswald, sans-serif;
  color: #fff;
}

.slot-dialog[hidden] {
  display: none;
}

.slot-dialog-backdrop {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px),
    rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(3px);
}

@keyframes slot-dialog-in {
  0% { opacity: 0; transform: scale(0.92) skewX(-4deg); filter: hue-rotate(90deg); }
  60% { opacity: 1; transform: scale(1.02) skewX(1deg); }
  100% { transform: none; filter: none; }
}

.slot-dialog-card {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 22px;
  border: 3px solid #fff;
  border-radius: 24px;
  background: #000;
  animation: slot-dialog-in 0.35s ease-out;
}

.slot-dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: #fff;
  font: 300 34px/1 Oswald, sans-serif;
  cursor: pointer;
}

.slot-dialog-close:hover {
  color: rgb(255, 5, 5);
}

.slot-dialog-kicker {
  margin: 0 0 12px;
  color: rgb(255, 5, 5);
  font-size: 15px;
  letter-spacing: 6px;
}

.slot-dialog-media {
  overflow: hidden;
  border-radius: 12px;
  background: #111;
  aspect-ratio: 16 / 10;
}

.slot-dialog-media img,
.slot-dialog-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.slot-dialog-card h2 {
  margin: 16px 0 0;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 1px;
}

.slot-dialog-tags {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.75;
}

.slot-dialog-text {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.45;
}

.slot-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.slot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  box-sizing: border-box;
  border-radius: 6px;
  font-family: Oswald, Arial, sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

/* Matches the Home / About / Works buttons. */
.slot-btn-outline {
  border: 3px solid #fff;
  background: #000;
  color: #fff;
}

.slot-btn-outline:hover {
  border-color: transparent;
  background: rgba(255, 5, 5, 0.8);
}

/* Matches the [OPEN] button. */
.slot-btn-red {
  border: 0;
  border-radius: 79px;
  background: rgb(137, 19, 19);
  color: #fff;
  font-weight: 700;
}

.slot-btn-red:hover {
  background: rgba(0, 102, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .slot.is-win .slot-title,
  .slot.is-win .slot-payline,
  .slot-dialog-card {
    animation: none;
  }

  .slot.is-spinning .slot-strip {
    filter: none;
  }
}