/*
 * The Scholar's Ascent Arcade — Mathematical Vision
 *
 * Canonical public design tokens and cinematic components. Game engines keep
 * their authored art and mechanics; this layer owns only the shared product
 * shell, launch surfaces, and progressive visual enhancement.
 */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Locked Arcade identity palette. */
  --arcade-bronze: #C6A88A;
  --arcade-navy: #1A1A2E;
  --arcade-slate: #2E3B55;
  --arcade-gold: #B8922A;
  --arcade-cream: #F5F0E8;

  /* Mathematical Vision semantic system. */
  --mv-void: #0C0C18;
  --mv-ground: var(--arcade-navy);
  --mv-surface: var(--arcade-slate);
  --mv-surface-deep: color-mix(in srgb, var(--arcade-slate) 72%, var(--mv-void));
  --mv-paper: var(--arcade-cream);
  --mv-text: var(--arcade-cream);
  --mv-text-muted: color-mix(in srgb, var(--arcade-bronze) 72%, var(--arcade-cream));
  --mv-line: color-mix(in srgb, var(--arcade-bronze) 30%, transparent);
  --mv-line-strong: color-mix(in srgb, var(--arcade-gold) 64%, transparent);
  --mv-focus: #E8C66D;
  --mv-success: #80C9A8;
  --mv-warning: #E7B764;
  --mv-danger: #ED7B7B;

  --mv-font-display: "Cormorant Garamond", Georgia, serif;
  --mv-font-heading: "Space Grotesk", "Avenir Next", system-ui, sans-serif;
  --mv-font-body: "Outfit", "Avenir Next", system-ui, sans-serif;
  --mv-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --mv-radius-sm: 0.65rem;
  --mv-radius-md: 1rem;
  --mv-radius-lg: 1.5rem;
  --mv-radius-xl: 2rem;
  --mv-shadow-soft: 0 1.25rem 3.75rem rgba(5, 5, 18, 0.28);
  --mv-shadow-deep: 0 2rem 6rem rgba(5, 5, 18, 0.48);
  --mv-glow-gold: 0 0 2.25rem color-mix(in srgb, var(--arcade-gold) 32%, transparent);
  --mv-glass: color-mix(in srgb, var(--arcade-navy) 78%, transparent);
  --mv-glass-strong: color-mix(in srgb, var(--arcade-slate) 88%, transparent);

  --mv-duration-instant: 80ms;
  --mv-duration-fast: 160ms;
  --mv-duration-base: 240ms;
  --mv-duration-slow: 380ms;
  --mv-duration-reveal: 600ms;
  --mv-ease-out: cubic-bezier(.16, 1, .3, 1);
  --mv-ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* Existing release aliases now resolve to this one system. */
  --ascent-midnight: var(--mv-ground);
  --ascent-panel: var(--mv-surface);
  --ascent-aqua: var(--arcade-bronze);
  --ascent-gold: var(--arcade-gold);
  --ascent-cloud: var(--mv-text);
  --ascent-muted: var(--mv-text-muted);
  --ascent-line: var(--mv-line);
  --aa-bg: var(--mv-ground);
  --aa-surface: var(--mv-surface);
  --aa-surface-2: var(--mv-surface-deep);
  --aa-text: var(--mv-text);
  --aa-muted: var(--mv-text-muted);
  --aa-line: var(--mv-line);
  --aa-input: color-mix(in srgb, var(--mv-void) 74%, var(--mv-surface));
  --aa-shadow: rgba(5, 5, 18, 0.38);
  --aa-accent: var(--arcade-gold);
}

html[data-theme="light"] {
  color-scheme: light;
  --mv-ground: var(--arcade-cream);
  --mv-surface: #FFFDFC;
  --mv-surface-deep: color-mix(in srgb, var(--arcade-cream) 80%, var(--arcade-bronze));
  --mv-text: var(--arcade-navy);
  --mv-text-muted: var(--arcade-slate);
  --mv-line: color-mix(in srgb, var(--arcade-slate) 34%, transparent);
  --mv-glass: color-mix(in srgb, #FFFDFC 84%, transparent);
  --mv-glass-strong: color-mix(in srgb, #FFFDFC 94%, transparent);
  --aa-input: #FFFDFC;
  --aa-shadow: rgba(26, 26, 46, 0.16);
}

body[data-arcade-surface] {
  font-family: var(--mv-font-body);
}

body[data-arcade-surface] :where(h1, h2, h3, h4) {
  font-family: var(--mv-font-heading);
}

body[data-arcade-surface] :where(code, kbd, samp, .eyebrow, [class*="__eyebrow"]) {
  font-family: var(--mv-font-mono);
}

.public-arcade-shell,
.public-arcade-footer {
  font-family: var(--mv-font-body);
}

.public-arcade-shell {
  position: sticky;
  top: 0;
  border-color: var(--mv-line);
  background: color-mix(in srgb, var(--arcade-navy) 94%, transparent);
  color: var(--arcade-cream);
  box-shadow: 0 0.7rem 2rem rgba(5, 5, 18, 0.28);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.public-arcade-shell__brand strong {
  font-family: var(--mv-font-heading);
  font-size: clamp(0.9rem, 1.5vw, 1.08rem);
  letter-spacing: -0.015em;
  color: var(--arcade-cream);
}

.public-arcade-shell__brand small {
  color: var(--arcade-bronze);
  font-family: var(--mv-font-mono);
  letter-spacing: 0.035em;
}

.public-arcade-shell__nav a,
.public-arcade-shell__menu,
.public-arcade-shell__theme {
  font-family: var(--mv-font-body);
  transition:
    border-color var(--mv-duration-fast) var(--mv-ease-out),
    background-color var(--mv-duration-fast) var(--mv-ease-out),
    color var(--mv-duration-fast) var(--mv-ease-out),
    transform var(--mv-duration-fast) var(--mv-ease-out);
}

.public-arcade-shell__nav a:hover,
.public-arcade-shell__menu:hover,
.public-arcade-shell__theme:hover {
  transform: translateY(-1px);
}

.public-arcade-footer {
  overflow: hidden;
  border-color: var(--mv-line);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--arcade-gold) 11%, transparent), transparent 18rem),
    var(--arcade-navy);
}

.public-arcade-footer strong {
  font-family: var(--mv-font-heading);
  color: var(--arcade-gold);
}

.public-arcade-footer span,
.public-arcade-footer a {
  color: color-mix(in srgb, var(--arcade-bronze) 78%, var(--arcade-cream));
}

/* Cinematic launch surface. The image is decorative; headings remain live text. */
.public-arcade-launchpad {
  isolation: isolate;
  position: relative;
  min-height: clamp(34rem, 69vh, 48rem);
  overflow: hidden;
  padding: clamp(1.4rem, 4vw, 4.5rem);
  border-color: var(--mv-line-strong);
  border-radius: var(--mv-radius-xl);
  background: var(--mv-void);
  box-shadow: var(--mv-shadow-deep), var(--mv-glow-gold);
}

.public-arcade-launchpad::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 12, 24, 0.96) 0%, rgba(12, 12, 24, 0.84) 34%, rgba(12, 12, 24, 0.36) 70%, rgba(12, 12, 24, 0.7) 100%),
    radial-gradient(circle at 26% 34%, color-mix(in srgb, var(--arcade-gold) 13%, transparent), transparent 28rem);
  content: "";
}

.public-arcade-launchpad__media,
.public-arcade-launchpad__media picture,
.public-arcade-launchpad__media img,
.public-arcade-launchpad__constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.public-arcade-launchpad__media {
  z-index: -3;
  margin: 0;
}

.public-arcade-launchpad__media img {
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.04);
}

.public-arcade-launchpad__constellation {
  z-index: -1;
  pointer-events: none;
}

.public-arcade-launchpad__intro {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 43rem;
  padding: clamp(0.25rem, 2vw, 1rem);
  text-shadow: 0 0.15rem 1.8rem rgba(5, 5, 18, 0.82);
}

.public-arcade-launchpad__intro h1 {
  max-width: 11ch;
  color: var(--arcade-cream);
  font-family: var(--mv-font-display);
  font-size: clamp(3rem, 7.2vw, 5.7rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.88;
}

.public-arcade-launchpad__intro > p:not(.public-arcade-launchpad__eyebrow) {
  max-width: 35rem;
  color: color-mix(in srgb, var(--arcade-cream) 74%, var(--arcade-bronze));
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.public-arcade-launchpad__eyebrow,
.public-arcade-launchpad__action-eyebrow {
  font-family: var(--mv-font-mono);
}

.public-arcade-launchpad__primary a {
  border-radius: 999px;
  font-family: var(--mv-font-body);
  transition:
    transform var(--mv-duration-fast) var(--mv-ease-out),
    box-shadow var(--mv-duration-fast) var(--mv-ease-out),
    background-color var(--mv-duration-fast) var(--mv-ease-out);
}

.public-arcade-launchpad__primary a:hover {
  transform: translateY(-2px);
}

.public-arcade-launchpad__primary-action {
  background: linear-gradient(135deg, var(--arcade-bronze), var(--arcade-gold));
  box-shadow: var(--mv-glow-gold);
}

.public-arcade-launchpad .public-arcade-launchpad__secondary-action {
  color: var(--arcade-cream);
}

.public-arcade-launchpad__actions {
  position: relative;
  z-index: 1;
  align-self: end;
}

.public-arcade-launchpad .public-arcade-launchpad__action {
  min-height: 9.2rem;
  border-color: var(--mv-line);
  border-radius: var(--mv-radius-md);
  background: color-mix(in srgb, var(--mv-glass-strong) 84%, transparent);
  box-shadow: 0 0.9rem 2.2rem rgba(5, 5, 18, 0.2);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.public-arcade-host-hero {
  isolation: isolate;
  position: relative;
  min-height: clamp(28rem, 62vh, 43rem);
  overflow: hidden;
  margin: clamp(1rem, 3vw, 2rem) 0 clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 6vw, 5.5rem);
  border: 1px solid var(--mv-line-strong);
  border-radius: var(--mv-radius-xl);
  background: var(--mv-void);
  box-shadow: var(--mv-shadow-deep);
}

.public-arcade-host-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 12, 24, 0.95), rgba(12, 12, 24, 0.6) 58%, rgba(12, 12, 24, 0.82)),
    radial-gradient(circle at 75% 35%, color-mix(in srgb, var(--arcade-gold) 15%, transparent), transparent 25rem);
  content: "";
}

.public-arcade-host-hero__media,
.public-arcade-host-hero__media picture,
.public-arcade-host-hero__media img,
.public-arcade-host-hero__constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.public-arcade-host-hero__media {
  z-index: -3;
  margin: 0;
}

.public-arcade-host-hero__media img {
  object-fit: cover;
  object-position: center;
}

.public-arcade-host-hero__constellation {
  z-index: -1;
  pointer-events: none;
}

.public-arcade-host-hero > :not(.public-arcade-host-hero__media, .public-arcade-host-hero__constellation) {
  position: relative;
  z-index: 1;
}

.public-arcade-host-hero .eyebrow {
  color: var(--arcade-gold) !important;
  font-family: var(--mv-font-mono);
}

.public-arcade-host-hero h1 {
  max-width: 10ch;
  color: var(--arcade-cream) !important;
  font-family: var(--mv-font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.public-arcade-host-hero h1 em {
  color: var(--arcade-bronze) !important;
  font-style: italic;
}

.public-arcade-host-hero .hero__copy > p:last-child {
  color: color-mix(in srgb, var(--arcade-cream) 72%, var(--arcade-bronze)) !important;
}

.public-arcade-host-hero .signal-board {
  border-color: var(--mv-line-strong);
  background: var(--mv-glass);
  box-shadow: 0.9rem 0.9rem 0 color-mix(in srgb, var(--arcade-gold) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.public-arcade-vip-hero {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-color: var(--mv-line-strong);
  background:
    linear-gradient(90deg, rgba(12, 12, 24, 0.94), rgba(12, 12, 24, 0.62)),
    url("/assets/images/scenes/vip-lounge.webp") center / cover no-repeat;
  background-color: var(--arcade-navy);
  box-shadow: var(--mv-shadow-deep), var(--mv-glow-gold);
}

.public-arcade-vip-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--arcade-gold) 18%, transparent), transparent 20rem);
  content: "";
  pointer-events: none;
}

.public-arcade-vip-hero > * {
  position: relative;
  z-index: 1;
}

/* Generated game inventory: exact live modes, now with bespoke key art. */
#public-games {
  width: min(calc(100% - clamp(1rem, 4vw, 4rem)), 100rem);
  max-width: none;
  margin: clamp(3rem, 7vw, 6rem) auto;
}

.public-arcade-catalog-heading {
  margin-bottom: 1.35rem;
  text-align: left;
}

.public-arcade-catalog-heading span {
  color: var(--arcade-gold);
  font: 800 0.75rem/1.3 var(--mv-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.public-arcade-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
}

#public-games .public-arcade-game-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  flex-direction: column;
  padding: 0 0 1.25rem;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius-lg);
  background: var(--mv-surface-deep);
  box-shadow: var(--mv-shadow-soft);
  color: var(--mv-text);
  text-align: left;
  text-decoration: none;
  transform: translateZ(0);
  transition:
    border-color var(--mv-duration-base) var(--mv-ease-out),
    box-shadow var(--mv-duration-base) var(--mv-ease-out),
    transform var(--mv-duration-base) var(--mv-ease-out);
}

#public-games .public-arcade-game-card:hover {
  border-color: var(--mv-line-strong);
  box-shadow: var(--mv-shadow-deep), var(--mv-glow-gold);
  transform: translateY(-0.35rem);
}

.public-arcade-game-art {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0 0 1rem;
  background: var(--mv-void);
}

.public-arcade-game-art::after {
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, color-mix(in srgb, var(--mv-surface-deep) 96%, transparent));
  content: "";
  pointer-events: none;
}

.public-arcade-game-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mv-duration-slow) var(--mv-ease-out);
}

.public-arcade-game-card:hover .public-arcade-game-art img {
  transform: scale(1.035);
}

.public-arcade-game-card__title,
.public-arcade-game-card__description,
.public-arcade-game-card__badge {
  margin-right: 1.2rem;
  margin-left: 1.2rem;
}

html[data-theme="light"] .public-arcade-game-card__badge {
  border-color: color-mix(in srgb, var(--arcade-gold) 72%, var(--arcade-navy));
  background: color-mix(in srgb, var(--arcade-gold) 15%, var(--arcade-cream));
  color: var(--arcade-navy);
}

.public-arcade-game-card__title {
  color: var(--mv-text);
  font: 700 clamp(1.05rem, 1.9vw, 1.35rem)/1.1 var(--mv-font-heading);
  letter-spacing: -0.02em;
}

.public-arcade-game-card__description {
  flex: 1;
  margin-top: 0.55rem;
  color: var(--mv-text-muted);
  font: 450 0.88rem/1.48 var(--mv-font-body);
}

.public-arcade-game-card__badge {
  align-self: flex-start;
  margin-top: 0.9rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--mv-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--arcade-gold) 12%, transparent);
  color: color-mix(in srgb, var(--arcade-cream) 82%, var(--arcade-gold));
  font: 800 0.62rem/1.2 var(--mv-font-mono);
  letter-spacing: 0.07em;
}

#public-games .public-arcade-game-card > .new-badge {
  z-index: 3;
  top: 0.7rem;
  right: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--arcade-cream) 48%, transparent);
  background: color-mix(in srgb, var(--arcade-navy) 80%, transparent);
  color: var(--arcade-cream);
  box-shadow: 0 0.55rem 1.3rem rgba(5, 5, 18, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.public-arcade-library-status {
  border-color: color-mix(in srgb, var(--arcade-gold) 52%, transparent);
  background: color-mix(in srgb, var(--arcade-navy) 88%, transparent);
  color: var(--arcade-cream);
  box-shadow: var(--mv-shadow-soft);
}

.public-arcade-library-status h2 {
  color: var(--arcade-cream);
  font-family: var(--mv-font-heading);
}

.public-arcade-library-status > p:last-child {
  color: color-mix(in srgb, var(--arcade-bronze) 76%, var(--arcade-cream));
}

/* Host terminal thumbnails reuse the same immutable game-id catalog. */
.game-choice[data-game-id] span::before {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: 0.65rem;
  border-radius: calc(var(--mv-radius-sm) - 0.1rem);
  background-color: var(--mv-void);
  background-image: var(--game-art);
  background-position: center;
  background-size: cover;
  content: "";
}

.game-choice[data-game-id="battle-arena"] { --game-art: url("/assets/images/games/battle-arena.webp"); }
.game-choice[data-game-id="reef-rally"] { --game-art: url("/assets/images/games/reef-rally.webp"); }
.game-choice[data-game-id="code-breaker"] { --game-art: url("/assets/images/games/code-breaker.webp"); }
.game-choice[data-game-id="science-spire"] { --game-art: url("/assets/images/games/science-spire.webp"); }
.game-choice[data-game-id="lab-meltdown"] { --game-art: url("/assets/images/games/lab-meltdown.webp"); }
.game-choice[data-game-id="nexus"] { --game-art: url("/assets/images/games/nexus.webp"); }
.game-choice[data-game-id="coordinate-conquest"] { --game-art: url("/assets/images/games/coordinate-conquest.webp"); }
.game-choice[data-game-id="function-forge"] { --game-art: url("/assets/images/games/function-forge.webp"); }
.game-choice[data-game-id="proof-chain"] { --game-art: url("/assets/images/games/proof-chain.webp"); }
.game-choice[data-game-id="equation-auction"] { --game-art: url("/assets/images/games/equation-auction.webp"); }
.game-choice[data-game-id="solo-mastery"] { --game-art: url("/assets/images/games/solo-mastery.webp"); }

.game-picker__grid:has(.game-choice[data-game-id]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-choice[data-game-id] span {
  min-height: 100%;
  padding: 0.55rem;
}

/* Progressive reveal. Without JavaScript every element stays visible. */
[data-arcade-cinematic="ready"] [data-arcade-reveal] {
  opacity: 0;
  transform: translateY(1.1rem);
}

[data-arcade-cinematic="ready"] [data-arcade-reveal][data-arcade-visible="true"] {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--mv-duration-reveal) var(--mv-ease-out),
    transform var(--mv-duration-reveal) var(--mv-ease-out);
}

@media (max-width: 70rem) {
  .public-arcade-launchpad {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-arcade-launchpad__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-arcade-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 44rem) {
  .public-arcade-shell {
    position: relative;
  }

  .public-arcade-shell__brand strong {
    max-width: 15rem;
    line-height: 1.05;
  }

  .public-arcade-launchpad {
    min-height: auto;
    margin-inline: 0;
    padding: 1.25rem;
    border-radius: var(--mv-radius-lg);
  }

  .public-arcade-host-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding: 1.5rem;
    border-radius: var(--mv-radius-lg);
  }

  .public-arcade-host-hero::before {
    background:
      linear-gradient(180deg, rgba(12, 12, 24, 0.72), rgba(12, 12, 24, 0.97) 54%),
      radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--arcade-gold) 16%, transparent), transparent 20rem);
  }

  .public-arcade-host-hero__media img {
    object-position: 62% center;
  }

  .public-arcade-launchpad::before {
    background:
      linear-gradient(180deg, rgba(12, 12, 24, 0.74), rgba(12, 12, 24, 0.96) 52%),
      radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--arcade-gold) 16%, transparent), transparent 22rem);
  }

  .public-arcade-launchpad__media img {
    object-position: 58% center;
  }

  .public-arcade-launchpad__intro h1 {
    max-width: 9ch;
    font-size: clamp(2.75rem, 16vw, 4.6rem);
  }

  .public-arcade-launchpad__actions,
  .public-arcade-game-grid,
  .game-picker__grid:has(.game-choice[data-game-id]) {
    grid-template-columns: minmax(0, 1fr);
  }

  #public-games {
    width: min(calc(100% - 1.5rem), 100rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
  }

  .public-arcade-shell__nav a,
  .public-arcade-shell__menu,
  .public-arcade-shell__theme,
  .public-arcade-launchpad__primary a,
  .public-arcade-launchpad .public-arcade-launchpad__action,
  #public-games .public-arcade-game-card,
  .public-arcade-game-art img,
  [data-arcade-reveal] {
    animation: none;
    transition: none;
    transform: none;
  }

  [data-arcade-cinematic="ready"] [data-arcade-reveal] {
    opacity: 1;
  }
}