/* Base layout, reset, typography, and global background.
   Tokens load first via document order (tokens.css). */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Clip horizontal prop bleed without creating a scroll container. */
  overflow-x: clip;
}

body {
  min-height: 100vh;
  /* Clip props that bleed past the sides; vertical bleed onto the felt is fine. */
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--white);
  line-height: 1.5;
  /* One continuous felt that scrolls with the page so the eye pans across the
     table. Never background-attachment: fixed: it reads as static wallpaper
     and also breaks on iOS Safari. */
  background-color: var(--felt-deep);
  background-image: url("../assets/textures/felt-tile.webp");
  background-repeat: repeat;
  background-size: 800px auto;
  background-attachment: scroll;
  /* Every text inherits the stamped/letterpress recipe: dark above, a faint
     light lip below, so the type reads pressed into the felt nap. */
  text-shadow:
    0 -1px 1px rgb(0 0 0 / 0.5),
    0 1px 0 rgb(255 255 255 / 0.1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
  line-height: 1.12;
  letter-spacing: 0.03em;
  /* Deeper stamp for the large engraved caps. */
  text-shadow:
    0 -1px 1px rgb(0 0 0 / 0.6),
    0 1px 0 rgb(255 255 255 / 0.14),
    0 2px 4px rgb(0 0 0 / 0.45);
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

/* Cinematic screen overlay: a persistent vignette plus a moving 16mm film
   grain. Fixed over everything, never intercepts clicks. */
.screen-fx {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.screen-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 44%,
    rgb(0 0 0 / 0.48) 74%,
    rgb(0 0 0 / 0.94) 100%
  );
}

.screen-fx::after {
  content: "";
  position: absolute;
  /* Oversized so the grain drift never reveals an edge. */
  inset: -60%;
  /* Medium grain: between the fine 16mm and the coarse 8mm passes. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.65'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 210px 210px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  will-change: transform;
  animation: film-grain 0.7s steps(5) infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .screen-fx::after {
    animation: none;
  }
}

/* Preloader curtain: a felt screen over everything while assets load, with a
   single suit symbol cycling through the four suits (JS swaps the glyph). It
   fades out and the hero reveals once loading finishes. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--felt-deep);
  background-image:
    radial-gradient(ellipse at center, transparent 45%, rgb(0 0 0 / 0.55) 100%),
    url("../assets/textures/felt-tile.webp");
  background-size: cover, 800px auto;
  background-position: center, center;
}

.preloader-suits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 2.5vw, 1.6rem);
}

.preloader-suit {
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  line-height: 1;
  color: var(--gold);
  text-shadow:
    0 -1px 1px rgb(0 0 0 / 0.6),
    0 1px 0 rgb(255 255 255 / 0.14),
    0 3px 10px rgb(0 0 0 / 0.5);
}

.preloader-suit.is-light {
  color: var(--white-soft);
}