/* ============================================================
   ARCADE THEME . Midnight Cinema v3
   Token copy of C:\Projects\design\tokens\midnight-cinema.css (v3).
   If canon moves, update the token file first, then re-copy here.
   Shared chrome for /arcade/ hub surfaces (floor, cab).
   ============================================================ */
:root {
  /* ground (darkest to lightest, cold) */
  --mc-void:  #000000;
  --mc-blk:   #101013;
  --mc-deep:  #16161A;
  --mc-wine:  #2A1A22;

  /* ink on dark (cold neutrals) */
  --mc-chalk: #F2F2EF;
  --mc-fog:   #E8E8E5;
  --mc-smoke: #A0A0A6;
  --mc-ash:   #75757C;

  /* accents */
  --mc-gold:  #D9A341;  /* FOIL ONLY: physical print, award marks. Never chrome. */
  --mc-coral: #FF9090;
  --mc-red:   #ED2024;
  --mc-lav:   #CDB1CC;
  --mc-lav-dark: #7A6279;

  /* chromatic aberration pair. Reserved for the CA treatment only. */
  --mc-ca-magenta: #FF2A8C;
  --mc-ca-cyan:    #00F0FF;

  /* type */
  --mc-font-display:  'DM Serif Display', serif;
  --mc-font-editorial:'Fraunces', serif;
  --mc-font-label:    'Azeret Mono', monospace;
  --mc-font-body:     'Nunito', sans-serif;

  /* rhythm */
  --mc-gap:  clamp(100px, 14vw, 180px);
  --mc-wrap: 1100px;

  /* motion */
  --mc-ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --mc-ease-spring:   cubic-bezier(.34, 1.56, .64, 1);

  /* signature numbers */
  --mc-rotate-min: -0.4deg;
  --mc-rotate-max:  0.5deg;
  --mc-ca-offset:   5px;
  --mc-grain-opacity: 0.06;
}

/* ---- base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--mc-coral); color: var(--mc-deep); }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--mc-font-body);
  background: var(--mc-blk);
  color: var(--mc-lav);
  overflow-x: hidden;
  line-height: 1.7;
  min-height: 100vh;
}

/* grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 10000; mix-blend-mode: multiply;
}

.wrap { max-width: var(--mc-wrap); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }

/* ---- shared chrome ---- */
.back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mc-font-label); font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mc-coral); text-decoration: none; transition: color .3s;
}
.back:hover { color: var(--mc-chalk); }
.back::before { content: '<-'; font-size: .7rem; }

.s-label {
  font-family: var(--mc-font-label); font-size: .55rem; font-weight: 600;
  letter-spacing: .35em; text-transform: uppercase; color: var(--mc-ash);
  display: flex; align-items: center; gap: 14px;
}
.s-label::before { content: ''; width: 24px; height: 1px; background: var(--mc-ash); }

.badge {
  font-family: var(--mc-font-label); font-size: .45rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mc-blk); background: var(--mc-coral);
  padding: 2px 8px; border-radius: 2px; transform: rotate(1.5deg); display: inline-block;
}
.badge.red { background: var(--mc-red); color: var(--mc-chalk); }

/* marquee scroller strip */
.marquee {
  overflow: hidden; white-space: nowrap; padding: 14px 0;
  background: var(--mc-wine);
  border-top: 1px solid rgba(122,98,121,.15);
  border-bottom: 1px solid rgba(122,98,121,.15);
}
.marquee-inner { display: inline-block; animation: marqueeScroll 30s linear infinite; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee span {
  font-family: var(--mc-font-label); font-size: .55rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; margin: 0 20px;
}
.marquee .t1 { color: var(--mc-lav); }
.marquee .t2 { color: var(--mc-coral); opacity: .5; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--mc-ease-out-expo), transform .7s var(--mc-ease-out-expo); }
.rv.vis { opacity: 1; transform: translateY(0); }

/* the canon CA aberration treatment (the ONLY place ca colors may appear) */
.ca-title {
  font-family: var(--mc-font-display);
  position: relative; color: var(--mc-chalk);
  text-shadow:
    calc(var(--mc-ca-offset) * -0.6) 0 0 rgba(255, 42, 140, .55),
    calc(var(--mc-ca-offset) *  0.6) 0 0 rgba(0, 240, 255, .45);
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .marquee-inner { animation: none; }
}