/* wow.css — the material half of the Wow UI kit. Zero dependencies.
 *
 * Every visual is driven by tokens, so swapping a world file (worlds/*.css) or
 * setting data-wow-world on any element changes every surface under it at once.
 * Decorations are pseudo-elements and fixed overlays: they never move layout.
 * Everything that moves stops under prefers-reduced-motion.
 *
 * Layers let you override anything without fighting specificity:
 *   @layer wow.tokens, wow.materials, wow.objects, wow.motion;
 */

@layer wow.tokens, wow.materials, wow.objects, wow.motion;

@property --wow-glint-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -60%;
}

/* ------------------------------------------------------------------------ */
/* Tokens. The defaults are the card-table world: lacquer, felt, gold leaf.  */
/* ------------------------------------------------------------------------ */
@layer wow.tokens {
  :root {
    --wow-base: #060507;
    --wow-base-2: #121014;
    --wow-surface: #0a2118;
    --wow-surface-2: #0f3022;
    --wow-paper: #f6efdf;
    --wow-paper-ink: #17110f;
    --wow-ink: #f3e9d2;
    --wow-accent: #b3122e;
    --wow-metal-shadow: #2a1d05;
    --wow-metal-deep: #6d5012;
    --wow-metal-mid: #c39431;
    --wow-metal-light: #f1d27e;
    --wow-metal-hi: #fff8de;
    --wow-key: #ffd9a0;
    --wow-key-strength: 17%;
    --wow-vignette: 0.74;
    --wow-grain-opacity: 0.55;
    --wow-radius: 16px;
    --wow-font-display: "Cormorant Garamond", "Didot", "Bodoni 72", Georgia, serif;
    --wow-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --wow-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --wow-rosette-speed: 240s;
    --wow-glint-every: 7s;
    --wow-card-w: 220px;

    /* Springs, solved exactly by kit/wow.js and baked in here so CSS works
       without JavaScript. Regenerate with: npm run build */
    /* @springs:start */
    --wow-spring-snappy: linear(0, 0.0312, 0.1076, 0.2086, 0.3196, 0.4305, 0.535, 0.6293, 0.7115, 0.7811, 0.8387, 0.885, 0.9216, 0.9496, 0.9706, 0.9858, 0.9964, 1.0035, 1.0078, 1.0101, 1.011, 1.011, 1.0103, 1.0093, 1.0081, 1.0068, 1.0056, 1.0045, 1.0036, 1.0027, 1.002, 1);
    --wow-dur-snappy: 504ms;
    --wow-spring-deal: linear(0, 0.0131, 0.0484, 0.1001, 0.1633, 0.234, 0.3089, 0.385, 0.4602, 0.5328, 0.6016, 0.6655, 0.7241, 0.7771, 0.8242, 0.8656, 0.9014, 0.932, 0.9578, 0.979, 0.9962, 1.0097, 1.0201, 1.0278, 1.033, 1.0364, 1.038, 1.0384, 1.0377, 1.0362, 1.0341, 1.0316, 1.0289, 1.026, 1.023, 1.0202, 1.0174, 1.0148, 1.0124, 1.0102, 1.0082, 1.0064, 1.0049, 1.0035, 1.0024, 1);
    --wow-dur-deal: 750ms;
    --wow-spring-flip: linear(0, 0.0101, 0.0373, 0.0776, 0.1276, 0.1842, 0.245, 0.3079, 0.3714, 0.434, 0.4947, 0.5528, 0.6076, 0.6587, 0.706, 0.7492, 0.7884, 0.8237, 0.8551, 0.8829, 0.9073, 0.9284, 0.9466, 0.9621, 0.9751, 0.9859, 0.9948, 1.002, 1.0076, 1.012, 1.0152, 1.0174, 1.0189, 1.0197, 1.0199, 1.0197, 1.0192, 1.0184, 1.0174, 1.0163, 1.0151, 1.0138, 1.0126, 1.0113, 1.0101, 1.0089, 1.0078, 1.0068, 1.0059, 1.005, 1.0042, 1.0035, 1.0029, 1.0023, 1.0019, 1);
    --wow-dur-flip: 904ms;
    --wow-spring-toss: linear(0, 0.0064, 0.0242, 0.0515, 0.0867, 0.1281, 0.1743, 0.224, 0.2761, 0.3296, 0.3836, 0.4374, 0.4904, 0.542, 0.5917, 0.6393, 0.6844, 0.7268, 0.7664, 0.8032, 0.837, 0.868, 0.896, 0.9213, 0.9438, 0.9638, 0.9813, 0.9965, 1.0095, 1.0205, 1.0296, 1.037, 1.0429, 1.0474, 1.0506, 1.0528, 1.0539, 1.0543, 1.0539, 1.0529, 1.0514, 1.0494, 1.0472, 1.0446, 1.0419, 1.0391, 1.0362, 1.0333, 1.0303, 1.0275, 1.0247, 1.022, 1.0194, 1.017, 1.0147, 1.0125, 1.0106, 1.0087, 1.0071, 1.0055, 1.0042, 1.003, 1.0019, 1.001, 1.0001, 0.9994, 0.9989, 0.9984, 0.998, 0.9977, 0.9974, 0.9972, 0.9971, 0.9971, 0.9971, 0.9971, 0.9971, 0.9972, 0.9973, 0.9974, 0.9976, 0.9977, 0.9979, 0.998, 0.9982, 0.9984, 1);
    --wow-dur-toss: 1429ms;
    --wow-spring-settle: linear(0, 0.007, 0.0262, 0.0549, 0.091, 0.1325, 0.1779, 0.2258, 0.2751, 0.3249, 0.3743, 0.4228, 0.4699, 0.5153, 0.5586, 0.5996, 0.6382, 0.6744, 0.7082, 0.7394, 0.7683, 0.7948, 0.819, 0.8411, 0.8612, 0.8793, 0.8956, 0.9102, 0.9232, 0.9348, 0.9451, 0.9542, 0.9622, 0.9691, 0.9752, 0.9804, 0.9849, 0.9888, 0.9921, 0.9948, 0.9971, 0.999, 1.0006, 1.0018, 1.0028, 1.0036, 1.0041, 1.0045, 1.0048, 1.005, 1.005, 1.005, 1.0049, 1.0048, 1.0046, 1.0044, 1.0042, 1.0039, 1.0037, 1.0034, 1.0032, 1.0029, 1.0027, 1.0025, 1.0022, 1.002, 1.0018, 1.0017, 1);
    --wow-dur-settle: 1129ms;
    /* @springs:end */
  }

  :root,
  [data-wow-world] {
    --wow-ink-dim: color-mix(in oklab, var(--wow-ink) 64%, transparent);
    --wow-ink-faint: color-mix(in oklab, var(--wow-ink) 36%, transparent);
    --wow-metal: linear-gradient(
      135deg,
      var(--wow-metal-shadow) 0%,
      var(--wow-metal-deep) 14%,
      var(--wow-metal-mid) 33%,
      var(--wow-metal-light) 46%,
      var(--wow-metal-hi) 50%,
      var(--wow-metal-light) 54%,
      var(--wow-metal-mid) 67%,
      var(--wow-metal-deep) 86%,
      var(--wow-metal-shadow) 100%
    );
    /* Leaf for type keeps both ends bright enough to read on lacquer. */
    --wow-leaf: linear-gradient(
      100deg,
      var(--wow-metal-mid) 0%,
      var(--wow-metal-light) 26%,
      var(--wow-metal-hi) 42%,
      var(--wow-metal-light) 58%,
      var(--wow-metal-mid) 80%,
      color-mix(in oklab, var(--wow-metal-mid) 70%, var(--wow-metal-deep)) 100%
    );
    --wow-metal-sheen: linear-gradient(
      110deg,
      transparent 0 38%,
      color-mix(in oklab, var(--wow-metal-hi) 85%, transparent) 50%,
      transparent 62% 100%
    );
    --wow-rule: color-mix(in oklab, var(--wow-metal-mid) 60%, transparent);
    --wow-rule-faint: color-mix(in oklab, var(--wow-metal-mid) 26%, transparent);
    --wow-rim: color-mix(in oklab, var(--wow-metal-hi) 50%, transparent);
    --wow-shadow-lift: 0 1px 0 rgb(0 0 0 / 0.5), 0 10px 22px -8px rgb(0 0 0 / 0.75), 0 34px 60px -24px rgb(0 0 0 / 0.9);
  }
}

/* ------------------------------------------------------------------------ */
/* Materials                                                                 */
/* ------------------------------------------------------------------------ */
@layer wow.materials {
  /* The scene: lacquer base, a warm key light from above, an edge vignette and
     film grain. Put it on <body> (or any full-bleed root). */
  .wow-scene {
    color: var(--wow-ink);
    font-family: var(--wow-font-body);
    background-color: var(--wow-base);
    background-image:
      radial-gradient(120% 65% at 50% -12%, color-mix(in oklab, var(--wow-key) var(--wow-key-strength), transparent), transparent 62%),
      radial-gradient(150% 120% at 50% 35%, var(--wow-base-2), var(--wow-base) 72%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
  }
  .wow-scene::before,
  .wow-scene::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2147483000;
  }
  .wow-scene::before {
    background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgb(0 0 0 / var(--wow-vignette)) 100%);
  }
  .wow-scene::after {
    /* --wow-grain is a device-resolution tile painted by wow.grain(); without
       JavaScript an SVG turbulence tile stands in. */
    background-image: var(
      --wow-grain,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
    );
    background-size: var(--wow-grain-size, 160px);
    opacity: var(--wow-grain-opacity);
    mix-blend-mode: overlay;
  }

  /* Gold leaf for type: three-stop metal with a highlight, and a sheen band that
     follows the light (--wow-mx is written by wow.tilt). Never flat yellow. */
  .wow-leaf {
    background-image: var(--wow-metal-sheen), var(--wow-leaf);
    background-size: 260% 100%, 100% 100%;
    background-position: var(--wow-mx, 35%) 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.65));
  }

  /* Solid metal for fills: chips, seals, inlays. */
  .wow-metal {
    background-image: var(--wow-metal-sheen), var(--wow-metal);
    background-size: 260% 100%, 100% 100%;
    background-position: var(--wow-mx, 35%) 0, 0 0;
    color: var(--wow-metal-shadow);
    text-shadow: 0 1px 0 color-mix(in oklab, var(--wow-metal-hi) 55%, transparent);
  }

  /* An engraved plate: raised lacquer, an outer rim that catches the key light
     at the top, and a second rule inside it like a fine playing card. */
  .wow-plate {
    position: relative;
    isolation: isolate;
    border-radius: var(--wow-radius);
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--wow-base-2) 88%, white 12%) 0%, var(--wow-base-2) 18%, var(--wow-base) 100%);
    box-shadow:
      inset 0 1px 0 var(--wow-rim),
      inset 0 0 0 1px var(--wow-rule),
      inset 0 -1px 0 rgb(0 0 0 / 0.7),
      var(--wow-shadow-lift);
  }
  .wow-plate::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: max(2px, calc(var(--wow-radius) - 5px));
    border: 1px solid var(--wow-rule-faint);
    pointer-events: none;
    z-index: -1;
  }

  /* Felt: the table surface objects sit on. */
  .wow-felt {
    background:
      radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--wow-surface-2) 100%, white 4%), var(--wow-surface) 70%),
      var(--wow-surface);
    box-shadow: inset 0 0 0 1px var(--wow-rule-faint), inset 0 18px 40px -20px rgb(0 0 0 / 0.8), inset 0 -30px 60px -30px rgb(0 0 0 / 0.9);
    border-radius: var(--wow-radius);
  }

  /* An engraved hairline: one rule that catches the light, one just under it. */
  .wow-rule {
    position: relative;
    height: 1px;
    border: 0;
    margin: 1.5rem auto;
    background: linear-gradient(90deg, transparent, var(--wow-rule) 20% 80%, transparent);
    overflow: visible;
  }
  .wow-rule::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wow-rule-faint) 25% 75%, transparent);
  }

  /* Foil and glint share one overlay so they never fight the object's own
     ::before (a card's inner rule, a plate's second rule). Foil is a highlight
     that tracks the light (--wow-mx/--wow-my from wow.tilt); glint is a sweep of
     light every few seconds, driven by the animated --wow-glint-x. */
  .wow-foil,
  .wow-glint {
    position: relative;
  }
  .wow-foil::after,
  .wow-glint::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background-image: var(--_wow-foil, linear-gradient(transparent, transparent)), var(--_wow-glint, linear-gradient(transparent, transparent));
    mix-blend-mode: soft-light;
  }
  .wow-foil::after {
    --_wow-foil:
      radial-gradient(circle at var(--wow-mx, 50%) var(--wow-my, 30%), rgb(255 255 255 / 0.34), transparent 45%),
      linear-gradient(115deg, transparent 30%, color-mix(in oklab, var(--wow-metal-hi) 30%, transparent) calc(var(--wow-mx, 50%) - 5%), transparent calc(var(--wow-mx, 50%) + 18%));
  }
  .wow-glint::after {
    --_wow-glint: linear-gradient(
      105deg,
      transparent calc(var(--wow-glint-x) - 16%),
      rgb(255 255 255 / 0.28) calc(var(--wow-glint-x) - 6%),
      rgb(255 255 255 / 0.85) var(--wow-glint-x),
      rgb(255 255 255 / 0.28) calc(var(--wow-glint-x) + 6%),
      transparent calc(var(--wow-glint-x) + 16%)
    );
  }

  /* Holographic foil for the big moments only. Its own element, laid over the
     object: <i class="wow-holo" aria-hidden="true"></i> */
  .wow-holo {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
      from calc(var(--wow-ry, 0deg) * 8 + 200deg) at var(--wow-mx, 50%) var(--wow-my, 40%),
      #ff7ac6, #ffd56e, #7dffb4, #6ec9ff, #b77aff, #ff7ac6
    );
    mix-blend-mode: color-dodge;
    opacity: 0.2;
  }
}

/* ------------------------------------------------------------------------ */
/* Objects                                                                   */
/* ------------------------------------------------------------------------ */
@layer wow.objects {
  /* Tilt: pair with wow.tilt(el) or data-wow-tilt. */
  .wow-tilt {
    transform: perspective(1000px) rotateX(var(--wow-rx, 0deg)) rotateY(var(--wow-ry, 0deg));
    will-change: transform;
  }

  /* A playing card. Faces are paper by default; .wow-card--lacquer is dark. */
  .wow-card {
    position: relative;
    width: var(--wow-card-w);
    aspect-ratio: 5 / 7;
    border-radius: calc(var(--wow-card-w) * 0.065);
    background:
      radial-gradient(120% 80% at 30% 10%, color-mix(in oklab, var(--wow-paper) 100%, white 30%), var(--wow-paper) 60%, color-mix(in oklab, var(--wow-paper) 90%, black 10%));
    color: var(--wow-paper-ink);
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / 0.12),
      inset 0 1px 0 rgb(255 255 255 / 0.9),
      var(--wow-shadow-lift);
    overflow: hidden;
    user-select: none;
  }
  .wow-card::before {
    content: "";
    position: absolute;
    inset: 5.5%;
    border-radius: calc(var(--wow-card-w) * 0.03);
    border: 1px solid color-mix(in oklab, var(--wow-metal-mid) 75%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--wow-paper) 100%, transparent), 0 0 0 4px color-mix(in oklab, var(--wow-metal-mid) 45%, transparent);
    pointer-events: none;
  }
  .wow-card--lacquer {
    background:
      radial-gradient(120% 80% at 30% 0%, color-mix(in oklab, var(--wow-base-2) 85%, white 15%), var(--wow-base-2) 45%, var(--wow-base));
    color: var(--wow-ink);
    box-shadow: inset 0 1px 0 var(--wow-rim), inset 0 0 0 1px var(--wow-rule), var(--wow-shadow-lift);
  }
  .wow-card--lacquer::before {
    box-shadow: 0 0 0 3px transparent, 0 0 0 4px var(--wow-rule-faint);
  }
  .wow-card__index {
    position: absolute;
    top: 7%;
    left: 8%;
    display: grid;
    justify-items: center;
    line-height: 0.9;
    font-family: var(--wow-font-display);
    font-weight: 700;
    font-size: calc(var(--wow-card-w) * 0.15);
    z-index: 1;
  }
  .wow-card__index small {
    font-size: 0.72em;
  }
  .wow-card__index--end {
    top: auto;
    left: auto;
    bottom: 7%;
    right: 8%;
    transform: rotate(180deg);
  }
  .wow-card__pip {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: calc(var(--wow-card-w) * 0.5);
    line-height: 1;
    z-index: 1;
  }
  .wow-card .is-red,
  .wow-card.is-red {
    color: var(--wow-accent);
  }

  /* A card back: lacquer with a guilloché field (fill [data-wow-rosette] inside). */
  .wow-back {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--wow-base-2) 80%, var(--wow-metal-deep) 20%), var(--wow-base) 75%);
    color: var(--wow-metal-mid);
    box-shadow: inset 0 0 0 1px var(--wow-rule), inset 0 1px 0 var(--wow-rim);
    overflow: hidden;
  }
  .wow-back > svg,
  .wow-back > [data-wow-rosette] > svg {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    opacity: 0.55;
  }

  /* Two-faced objects: .wow-flip > .wow-face + .wow-face.wow-face--back */
  .wow-flip {
    position: relative;
    transform-style: preserve-3d;
    transition: transform var(--wow-dur-flip, 900ms) var(--wow-spring-flip, var(--wow-spring-snappy));
  }
  .wow-flip.is-flipped {
    transform: rotateY(180deg);
  }
  .wow-face {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .wow-face--back {
    transform: rotateY(180deg);
  }

  /* A casino chip. The button IS the chip: edge inlays, an engraved ring,
     a lacquer centre. Set --wow-chip-edge for its colour. */
  .wow-chip {
    --wow-chip-size: 72px;
    --wow-chip-edge: var(--wow-accent);
    --wow-chip-inlay: var(--wow-paper);
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--wow-chip-size);
    height: var(--wow-chip-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--wow-metal-light);
    font: 600 calc(var(--wow-chip-size) * 0.16) / 1 var(--wow-font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background:
      radial-gradient(circle, color-mix(in oklab, var(--wow-base-2) 85%, white 6%) 0 46%, transparent 46.5%),
      radial-gradient(circle, transparent 0 49%, var(--wow-metal-mid) 49.5% 51.5%, transparent 52% 100%),
      repeating-conic-gradient(from 8deg, var(--wow-chip-inlay) 0 13deg, var(--wow-chip-edge) 13deg 45deg),
      var(--wow-chip-edge);
    box-shadow:
      inset 0 0 0 2px color-mix(in oklab, var(--wow-chip-edge) 60%, black 40%),
      inset 0 2px 1px rgb(255 255 255 / 0.28),
      inset 0 -3px 4px rgb(0 0 0 / 0.45),
      0 3px 0 color-mix(in oklab, var(--wow-chip-edge) 45%, black 55%),
      0 10px 18px -6px rgb(0 0 0 / 0.8);
    transition: transform var(--wow-dur-snappy) var(--wow-spring-snappy);
    -webkit-tap-highlight-color: transparent;
  }
  .wow-chip::before {
    content: "";
    position: absolute;
    inset: 24%;
    border-radius: 50%;
    border: 1px dashed color-mix(in oklab, var(--wow-metal-light) 45%, transparent);
    pointer-events: none;
  }
  .wow-chip:hover {
    transform: translateY(-2px);
  }
  .wow-chip:active {
    transform: translateY(1px) scale(0.97);
  }
  .wow-chip[aria-pressed="true"] {
    box-shadow:
      inset 0 0 0 2px var(--wow-metal-light),
      inset 0 2px 1px rgb(255 255 255 / 0.28),
      inset 0 -3px 4px rgb(0 0 0 / 0.45),
      0 3px 0 color-mix(in oklab, var(--wow-chip-edge) 45%, black 55%),
      0 0 0 3px color-mix(in oklab, var(--wow-metal-light) 35%, transparent),
      0 10px 22px -6px rgb(0 0 0 / 0.8);
  }
  .wow-chip > span {
    position: relative;
    z-index: 1;
  }

  /* A stack of chips for balances. Children are .wow-chip-disc. */
  .wow-stack {
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  .wow-chip-disc {
    width: 58px;
    height: 12px;
    margin-top: -5px;
    border-radius: 50%;
    background:
      repeating-linear-gradient(90deg, var(--wow-chip-inlay, var(--wow-paper)) 0 6px, var(--wow-chip-edge, var(--wow-accent)) 6px 16px);
    box-shadow: inset 0 -3px 2px rgb(0 0 0 / 0.45), inset 0 2px 1px rgb(255 255 255 / 0.3), 0 2px 3px rgb(0 0 0 / 0.6);
  }

  /* A primary action engraved into metal, for the rare control that is not a chip. */
  .wow-button {
    position: relative;
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 44px;
    padding: 0 1.4em;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: 700 0.92rem / 1 var(--wow-font-body);
    letter-spacing: 0.06em;
    background-image: var(--wow-leaf);
    color: color-mix(in oklab, var(--wow-metal-shadow) 75%, black);
    text-shadow: 0 1px 0 color-mix(in oklab, var(--wow-metal-hi) 50%, transparent);
    box-shadow: inset 0 1px 0 var(--wow-metal-hi), inset 0 -2px 0 color-mix(in oklab, var(--wow-metal-shadow) 60%, transparent), 0 6px 16px -6px rgb(0 0 0 / 0.8);
    transition: transform var(--wow-dur-snappy) var(--wow-spring-snappy), filter 200ms ease;
  }
  .wow-button:hover {
    filter: brightness(1.08) saturate(1.05);
  }
  .wow-button:active {
    transform: translateY(1px) scale(0.98);
  }
  .wow-button--quiet {
    background: transparent;
    color: var(--wow-metal-light);
    text-shadow: none;
    box-shadow: inset 0 0 0 1px var(--wow-rule);
  }

  /* The rosette: banknote line work, faint and slowly turning, behind content. */
  .wow-rosette {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--wow-metal-mid);
    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
  }
  .wow-rosette > svg {
    width: min(140vmin, 1100px);
    height: min(140vmin, 1100px);
  }

  /* The dealer's riffle shuffle: a loader made of ten cards.
     <div class="wow-riffle" role="status" aria-label="Shuffling"><i style="--i:0"></i>…<i style="--i:9"></i></div> */
  .wow-riffle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 62px;
  }
  .wow-riffle > i {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background:
      repeating-linear-gradient(45deg, transparent 0 3px, color-mix(in oklab, var(--wow-metal-mid) 30%, transparent) 3px 4px),
      linear-gradient(180deg, var(--wow-base-2), var(--wow-base));
    box-shadow: inset 0 0 0 1px var(--wow-rule), 0 1px 0 rgb(0 0 0 / 0.7);
    transform: translateY(calc(var(--i, 0) * -1px));
  }
  .wow-riffle > i:last-child::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.5) 50%, transparent 60%);
    background-size: 300% 100%;
    background-position: 120% 0;
    mix-blend-mode: overlay;
  }

  /* The Joker: the error object. It states the exact reason and holds the fix. */
  .wow-joker {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem 1rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border-radius: var(--wow-radius);
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--wow-accent) 22%, var(--wow-base-2)), var(--wow-base-2));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wow-accent) 55%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.12), var(--wow-shadow-lift);
  }
  .wow-joker__mark {
    width: 40px;
    aspect-ratio: 5 / 7;
    border-radius: 4px;
    display: grid;
    place-items: center;
    font: 700 1.1rem / 1 var(--wow-font-display);
    background: var(--wow-paper);
    color: var(--wow-accent);
    box-shadow: 0 4px 10px -4px rgb(0 0 0 / 0.8);
    transform: rotate(-6deg);
  }

  /* Code entry typed onto the back of a card. Wrong code: add .is-cold. */
  .wow-code {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
  }
  .wow-code input {
    width: 2.6rem;
    height: 3.4rem;
    border: 0;
    border-radius: 8px;
    text-align: center;
    font: 600 1.6rem / 1 var(--wow-font-display);
    color: var(--wow-metal-light);
    background: color-mix(in oklab, var(--wow-base) 70%, transparent);
    box-shadow: inset 0 0 0 1px var(--wow-rule-faint), inset 0 2px 6px rgb(0 0 0 / 0.6);
    caret-color: var(--wow-metal-light);
    transition: box-shadow 300ms ease, color 400ms ease, filter 400ms ease;
  }
  .wow-code input:not(:placeholder-shown) {
    box-shadow: inset 0 0 0 1px var(--wow-metal-light), 0 0 18px -4px color-mix(in oklab, var(--wow-metal-light) 60%, transparent), inset 0 2px 6px rgb(0 0 0 / 0.6);
  }
  .wow-code.is-cold input {
    color: #9a978f;
    filter: grayscale(1);
    box-shadow: inset 0 0 0 1px #6d6a64, inset 0 2px 6px rgb(0 0 0 / 0.6);
  }

  /* Visible focus, in the world's metal. */
  :where(.wow-chip, .wow-button, .wow-card, .wow-code input, [data-wow-focus]):focus-visible {
    outline: 2px solid var(--wow-metal-light);
    outline-offset: 3px;
  }
}

/* ------------------------------------------------------------------------ */
/* Motion. All of it stops under prefers-reduced-motion.                     */
/* ------------------------------------------------------------------------ */
@layer wow.motion {
  @media (prefers-reduced-motion: no-preference) {
    .wow-scene::after {
      animation: wow-grain 1s steps(12) infinite;
    }
    .wow-rosette > svg {
      animation: wow-turn var(--wow-rosette-speed) linear infinite;
    }
    .wow-glint::after {
      animation: wow-glint var(--wow-glint-every) var(--wow-glint-delay, 1.4s) infinite;
    }
    .wow-riffle > i {
      animation: wow-riffle-a 1.8s var(--wow-spring-snappy) infinite;
      animation-delay: calc(var(--i, 0) * 50ms);
    }
    .wow-riffle > i:nth-child(even) {
      animation-name: wow-riffle-b;
    }
    .wow-riffle > i:last-child::after {
      animation: wow-sheen 1.8s ease-in-out infinite;
    }
    .wow-breathe {
      animation: wow-breathe 2.8s ease-in-out infinite;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wow-flip {
      transition: none;
    }
    .wow-riffle > i:last-child {
      animation: wow-pulse 1.6s ease-in-out infinite;
    }
  }

  @keyframes wow-grain {
    0% { background-position: 0 0; }
    10% { background-position: -37px 21px; }
    20% { background-position: 53px -45px; }
    30% { background-position: -11px 66px; }
    40% { background-position: 79px 8px; }
    50% { background-position: -64px -30px; }
    60% { background-position: 25px 47px; }
    70% { background-position: -80px 13px; }
    80% { background-position: 41px -71px; }
    90% { background-position: -18px -9px; }
    100% { background-position: 0 0; }
  }
  @keyframes wow-turn {
    to { transform: rotate(1turn); }
  }
  @keyframes wow-glint {
    0% { --wow-glint-x: -60%; }
    18%, 100% { --wow-glint-x: 160%; }
  }
  @keyframes wow-sheen {
    0%, 55% { background-position: 120% 0; }
    85%, 100% { background-position: -20% 0; }
  }
  @keyframes wow-riffle-a {
    0%, 100% { transform: translate(0, calc(var(--i, 0) * -1px)) rotate(0); }
    22% { transform: translate(-30px, calc(var(--i, 0) * -1px + 4px)) rotate(-16deg); }
    48% { transform: translate(-4px, calc(var(--i, 0) * -1.4px)) rotate(-2deg); }
    66% { transform: translate(0, calc(var(--i, 0) * -1px)) rotate(0); }
  }
  @keyframes wow-riffle-b {
    0%, 100% { transform: translate(0, calc(var(--i, 0) * -1px)) rotate(0); }
    22% { transform: translate(30px, calc(var(--i, 0) * -1px + 4px)) rotate(16deg); }
    48% { transform: translate(4px, calc(var(--i, 0) * -1.4px)) rotate(2deg); }
    66% { transform: translate(0, calc(var(--i, 0) * -1px)) rotate(0); }
  }
  @keyframes wow-breathe {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.035); filter: brightness(1.12); }
  }
  /* wow-lint-disable-next-line plain-fade -- runs only inside the Reduce Motion fallback above */
  @keyframes wow-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }
}