/* OHR GAMES — GRIT LAYER
   Site-wide enhancement sheet layered over the inline design system shared by every page.
   It only sharpens what already exists: bevelled brutalist edges, blood-and-gilt blends over the
   art, pointer-lit cards, scroll-driven reveals, a torn hero edge, a progress vein along the top,
   and page-to-page view transitions. Paired with js/og-grit.js (pointer + fallbacks).
   Motion is gated behind prefers-reduced-motion throughout. */

/* ---------- registered custom properties (animatable) ---------- */
@property --og-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --og-scroll { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

:root {
  --og-blood: color-mix(in oklch, var(--og-ichor, #8f1d1d) 70%, var(--og-ember, #d0532f));
  --og-bruise: color-mix(in oklch, var(--og-aether, #4a2e6b) 60%, var(--og-ichor, #8f1d1d));
  --og-steel: color-mix(in oklch, var(--og-bone, #ddd6c6) 30%, var(--og-vault-2, #1c1822));
  --og-chamfer: 14px;
  /* irregular tear used along hero / band edges */
  --og-tear: polygon(0 100%, 0 42%, 2% 70%, 4.5% 30%, 7% 64%, 9% 48%, 12% 82%, 14.5% 38%, 17% 60%, 20% 26%, 22% 74%, 25% 44%, 28% 68%, 30.5% 22%, 33% 56%, 36% 80%, 38% 36%, 41% 62%, 44% 30%, 47% 72%, 49.5% 46%, 52% 58%, 55% 24%, 58% 70%, 60.5% 40%, 63% 84%, 66% 32%, 68.5% 60%, 71% 20%, 74% 66%, 77% 44%, 79.5% 76%, 82% 34%, 85% 58%, 88% 28%, 90.5% 70%, 93% 48%, 96% 80%, 98% 36%, 100% 60%, 100% 100%);
}

/* ---------- document ---------- */
html { scrollbar-color: var(--og-gilt-lo) var(--og-crypt); }
::selection { background: var(--og-blood); color: #fff3cf; text-shadow: none; }
::-moz-selection { background: var(--og-blood); color: #fff3cf; text-shadow: none; }

:where(h1, h2, h3, .h-display, .h-1, .h-2, .h-3, .plate h3, .tile h3, .banner h2) { text-wrap: balance; }
:where(p, .lede, li, dd, figcaption, blockquote) { text-wrap: pretty; }

:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--og-gilt-hi); outline-offset: 3px; }

/* cross-page crossfade (MPA view transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: og-vt-out .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: og-vt-in .55s var(--og-ease, ease) both; }
@keyframes og-vt-out { to { opacity: 0; filter: brightness(.6) saturate(.6); } }
@keyframes og-vt-in { from { opacity: 0; filter: brightness(.4) saturate(.5); } }

/* ---------- scroll progress vein ---------- */
.og-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1300; height: 2px; margin: 0; padding: 0;
  pointer-events: none; transform-origin: 0 50%;
  transform: scaleX(var(--og-scroll, 0));
  background: linear-gradient(90deg, var(--og-gilt-hi), var(--og-gilt) 35%, var(--og-ember) 70%, var(--og-ichor-hi));
  box-shadow: 0 0 10px rgba(208, 83, 47, .55), 0 0 2px rgba(236, 217, 160, .7);
}
.og-progress::after {
  content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--og-gilt-hi); box-shadow: 0 0 12px 2px rgba(208, 83, 47, .8);
}
@supports (animation-timeline: scroll()) {
  .og-progress { animation: og-progress linear both; animation-timeline: scroll(root block); transform: scaleX(0); }
  @keyframes og-progress { to { transform: scaleX(1); } }
}

/* ---------- header: pulse in the gilt vein once scrolled ---------- */
.og-header::after {
  background: linear-gradient(90deg, transparent, var(--og-gilt) 30%, var(--og-ember) 50%, var(--og-gilt) 70%, transparent);
  background-size: 200% 100%;
  animation: og-vein 9s linear infinite;
}
@keyframes og-vein { to { background-position: -200% 0; } }
.og-header.og-hidden:not(.is-over-hero):not(:has(.is-open)):not(:focus-within) { transform: translateY(-100%); }

/* While the header is tucked away, sticky toolbars / TOCs ride up with it.
   The real height is preserved for the chrome and hero/map blocks that size themselves by it. */
:root { --og-header-h-real: var(--og-header-h); }
html.og-hdr-hidden body { --og-header-h: 0px; }
html:has(.og-header.is-over-hero) body,
html:has(.og-header .is-open) body,
html:has(.og-header:focus-within) body { --og-header-h: var(--og-header-h-real); }
.og-header, .og-drawer, .hero, .atlas-head, .app { --og-header-h: var(--og-header-h-real); }
.toolbar, .codex__toc, .codex__mobile-toc, .chapter__rail, .ce-toc { transition: top .4s var(--og-ease); }

/* ---------- hero: torn lower edge, breathing vignette ---------- */
.hero::before {
  content: ""; position: absolute; left: -1%; right: -1%; bottom: -1px; height: clamp(18px, 2.4vw, 34px); z-index: 1;
  pointer-events: none; clip-path: var(--og-tear);
  background: linear-gradient(180deg, rgba(196, 165, 90, .28), var(--og-void) 3px);
  filter: drop-shadow(0 -6px 18px rgba(0, 0, 0, .9));
}
.hero.gate::before { display: none; }
.hero__inner > .kicker { position: relative; display: inline-flex; align-items: center; gap: 12px; }
.hero__inner--center > .kicker { justify-content: center; }
.hero__inner > .kicker::before, .hero__inner--center > .kicker::after {
  content: ""; width: 28px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--og-ember), var(--og-gilt));
}
.hero__inner--center > .kicker::after { background: linear-gradient(270deg, var(--og-ember), var(--og-gilt)); }
.hero h1.h-display, .hero h1.h-1 {
  text-shadow: 0 1px 0 rgba(255, 240, 200, .14), 0 -1px 0 rgba(0, 0, 0, .9), 0 4px 40px rgba(0, 0, 0, .55), 0 0 60px rgba(196, 165, 90, .16);
}
.hero .lede { text-shadow: 0 2px 18px rgba(0, 0, 0, .6), 0 0 1px rgba(0, 0, 0, .9); }

/* ---------- section structure ---------- */
.section-head::after {
  content: ""; width: 72px; height: 2px; margin-top: 2px;
  background: linear-gradient(90deg, var(--og-gilt-hi), var(--og-gilt) 45%, var(--og-blood));
  box-shadow: 0 0 12px rgba(208, 83, 47, .35);
  justify-self: start;
}
.section-head--center::after { justify-self: center; background: linear-gradient(90deg, var(--og-blood), var(--og-gilt) 50%, var(--og-blood)); }
.section-head.mb-0::after { margin-top: 0; }

.kicker { position: relative; }
.section-head > .kicker, .split__text > .kicker, .codex .kicker, .chapter__text > .kicker { padding-left: 34px; }
.section-head > .kicker::before, .split__text > .kicker::before, .codex .kicker::before, .chapter__text > .kicker::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--og-ember), var(--og-gilt));
}
.section-head--center > .kicker { padding-left: 0; }
.section-head--center > .kicker::before { content: none; }

.seam { position: relative; }
.seam svg { filter: drop-shadow(0 0 8px rgba(196, 165, 90, .45)); animation: og-seam-breathe 5s ease-in-out infinite; }
@keyframes og-seam-breathe { 50% { filter: drop-shadow(0 0 14px rgba(208, 83, 47, .6)); color: var(--og-gilt-hi); } }

.section--crypt { position: relative; }
.section--crypt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--og-lattice), var(--og-grain);
  background-size: 30px 30px, 180px 180px; opacity: .07;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000 20%, transparent 80%);
  mask-image: radial-gradient(70% 90% at 50% 50%, #000 20%, transparent 80%);
}

/* engraved display headings */
.h-display, .h-1, .h-2, .banner h2, .plate h3 {
  text-shadow: 0 1px 0 rgba(255, 240, 200, .1), 0 -1px 0 rgba(0, 0, 0, .85), 0 0 40px rgba(196, 165, 90, .14);
}
.gilt-text { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .9)); }

/* ledger figures cast in metal */
.ledger dd, .banner .ledger dd {
  background: linear-gradient(180deg, #fff3d0 0%, var(--og-gilt-hi) 42%, var(--og-gilt) 78%, var(--og-gilt-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .9));
}

/* ---------- image blends: a blood-and-bruise grade pulls every photo into one palette ---------- */
.tile--art .tile__img, .figure__img { position: relative; }
.plate__art::after, .split__art::after, .band__art::after, .tile--art .tile__img::after, .dispatch__img::after, .figure__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--og-blood) 0%, transparent 48%, var(--og-gilt-lo) 100%);
  mix-blend-mode: overlay; opacity: var(--og-grade, .42);
  transition: opacity .7s var(--og-ease);
}
.plate:hover .plate__art::after, .tile--art:hover .tile__img::after, .dispatch:hover .dispatch__img::after, .figure:hover .figure__img::after { opacity: .18; }
.band__art::after { opacity: .5; }

/* ---------- plates: pointer spotlight through the existing gradient, inner frame sharpened ---------- */
.plate::before {
  background:
    radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(236, 217, 160, .14), transparent 60%),
    linear-gradient(180deg, rgba(7, 6, 10, .1) 0%, rgba(7, 6, 10, .25) 35%, rgba(7, 6, 10, .92) 82%, rgba(7, 6, 10, .98) 100%),
    linear-gradient(120deg, rgba(196, 165, 90, .12), transparent 40%, rgba(143, 29, 29, .15));
  transition: opacity .4s;
}
.plate { transform-style: preserve-3d; will-change: transform; }
.plate:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(196, 165, 90, .18), 0 0 46px rgba(143, 29, 29, .18); }
.plate .plate__more { display: inline-flex; align-items: center; gap: 10px; }
.plate .plate__more::after {
  content: ""; width: 20px; height: 1px; background: currentColor; transition: width .4s var(--og-ease), background .4s;
}
.plate:hover .plate__more::after { width: 36px; background: var(--og-ember); }

/* ---------- tiles / panels / tools: bevelled edges + pointer light ---------- */
.tile, .panel, .tools a, .callout, .presence, .dispatch__img, .og-litany {
  isolation: isolate;
}
.tile, .panel, .tools a { position: relative; }
.tile::after, .panel::before, .tools a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(236, 217, 160, .13), rgba(208, 83, 47, .05) 40%, transparent 70%);
  transition: opacity .45s var(--og-ease);
}
.tile:hover::after, .panel:hover::before, .tools a:hover::before { opacity: 1; }
.tile:hover { transform: translateY(-3px); }
.tile:hover::before { opacity: 1; }
.tools a { transition: background .3s, color .3s; }
.tools svg { transition: filter .4s var(--og-ease), transform .5s var(--og-ease), color .3s; }
.tools a:hover svg { color: var(--og-gilt-hi); transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 0 10px rgba(236, 217, 160, .6)) drop-shadow(0 0 22px rgba(208, 83, 47, .35)); }
.tools a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--og-gilt), var(--og-blood)); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--og-ease);
}
.tools a:hover::after { transform: scaleX(1); }

@supports (corner-shape: bevel) {
  .tile, .callout, .presence, .dispatch__img, .og-litany__item, .badge, .chip, .input, .select, .textarea, .toast, .og-toast {
    corner-shape: bevel; border-radius: var(--og-chamfer) 3px var(--og-chamfer) 3px;
  }
  .badge, .chip { border-radius: 8px 2px 8px 2px; }
  .btn { corner-shape: bevel; border-radius: 12px 3px 12px 3px; }
  .btn--sm { border-radius: 9px 2px 9px 2px; }
  .tools { corner-shape: bevel; border-radius: var(--og-chamfer); overflow: hidden; }
}

/* ---------- buttons: pressed steel, with a live ember ring on ichor actions ---------- */
.btn { transition: color .3s, border-color .3s, box-shadow .3s, transform .25s var(--og-ease), filter .3s; }
.btn:hover:not(:active) { transform: translateY(-2px); }
.btn--gilt:hover:not(:active) { filter: saturate(1.08) brightness(1.04); }
.btn--ichor { --og-angle: 0deg; }
.btn--ichor::before {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--og-angle), transparent 0 55%, var(--og-ember) 72%, #ffd3a8 80%, var(--og-ember) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: og-spin-angle 3.2s linear infinite; opacity: .85;
}
.btn--ichor:hover { box-shadow: 0 14px 40px rgba(143, 29, 29, .45), 0 0 24px rgba(208, 83, 47, .35); }
@keyframes og-spin-angle { to { --og-angle: 360deg; } }

.link-arrow { position: relative; transition: color .25s, border-color .25s, letter-spacing .35s var(--og-ease); }
.link-arrow:hover { color: var(--og-gilt-hi); border-color: var(--og-ember); letter-spacing: .16em; }

/* badges breathe when they announce something live or bleeding */
.badge--ichor, .badge--live { box-shadow: 0 0 0 0 rgba(208, 83, 47, 0); animation: og-badge-pulse 3.4s ease-in-out infinite; }
.badge--live { --pulse: 127, 196, 138; }
.badge--ichor { --pulse: 208, 83, 47; }
@keyframes og-badge-pulse { 50% { box-shadow: 0 0 0 4px rgba(var(--pulse, 208, 83, 47), .10), 0 0 18px rgba(var(--pulse, 208, 83, 47), .22); } }

/* ---------- band: torn seams top and bottom, photo held in a bloodied grade ---------- */
.band::before {
  content: ""; position: absolute; left: -1%; right: -1%; top: -1px; height: clamp(16px, 2vw, 28px); z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(196, 165, 90, .28), var(--og-void) 3px); clip-path: var(--og-tear); transform: scaleY(-1);
}
.band blockquote { position: relative; }
.band blockquote::before {
  content: "\201C"; position: absolute; left: -.55em; top: -.35em; font: 400 3.2em/1 var(--og-display); color: var(--og-blood); opacity: .55;
  text-shadow: 0 0 30px rgba(143, 29, 29, .6);
}
.band cite { position: relative; display: inline-block; padding-left: 36px; }
.band cite::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 1px; background: linear-gradient(90deg, var(--og-ember), var(--og-gilt)); }

/* ---------- dispatches ---------- */
.dispatch__img { transition: filter .4s, transform .9s var(--og-ease); }
.dispatch:hover .dispatch__img { transform: translateY(-3px); }
.dispatch h3 { transition: color .25s, text-shadow .4s; }
.dispatch:hover h3 { text-shadow: 0 0 24px rgba(196, 165, 90, .3); }

/* ---------- footer: an ichor pool seeps up from the floor ---------- */
.og-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(143, 29, 29, .22), rgba(74, 46, 107, .08) 55%, transparent 80%);
  -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent);
}
.og-footer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--og-ichor) 25%, var(--og-ember) 50%, var(--og-ichor) 75%, transparent);
  opacity: .8;
}
.og-footer-nav a { transition: color .25s, letter-spacing .35s var(--og-ease); }
.og-footer-nav a:hover { letter-spacing: .2em; }
.og-footer-seal .og-seal { animation: og-seal-glow 6s ease-in-out infinite; }
@keyframes og-seal-glow { 50% { box-shadow: 0 0 0 1px var(--og-line-strong), 0 0 0 6px #08070b, 0 0 0 7px rgba(196, 165, 90, .3), 0 0 60px rgba(208, 83, 47, .3); } }

/* ---------- litany: a slow-marching strip of mottos (used on home) ---------- */
.og-litany {
  position: relative; overflow: hidden; margin: 0; padding: 0;
  border-top: 1px solid var(--og-line); border-bottom: 1px solid var(--og-line);
  background:
    linear-gradient(90deg, rgba(143, 29, 29, .16), transparent 25%, transparent 75%, rgba(143, 29, 29, .16)),
    linear-gradient(180deg, var(--og-crypt), var(--og-void));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.og-litany::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background-image: var(--og-lattice), var(--og-grain); background-size: 30px 30px, 180px 180px;
}
.og-litany__track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: og-march 64s linear infinite; }
.og-litany:hover .og-litany__track { animation-play-state: paused; }
.og-litany__item {
  display: inline-flex; align-items: center; gap: 34px; padding: 18px 34px 17px 0; white-space: nowrap;
  font: 600 13.5px/1 var(--og-heading); letter-spacing: .28em; text-transform: uppercase; color: var(--og-bone);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
}
.og-litany__item em { font-style: normal; color: var(--og-gilt-hi); }
.og-litany__item i { font-style: normal; color: var(--og-ichor-hi); text-shadow: 0 0 12px rgba(208, 83, 47, .6); transform: translateY(-1px); }
.og-litany__item::after { content: "\25C6"; font-size: 8px; color: var(--og-gilt-lo); }
@keyframes og-march { to { transform: translateX(-50%); } }

/* ---------- gate (index) ---------- */
.gate__frame { transition: inset 1.4s var(--og-ease), border-color 1.4s; }
.gate__frame::before, .gate__frame::after { box-shadow: 0 0 18px rgba(196, 165, 90, .25); }
.gate__paths li { display: inline-flex; align-items: center; gap: 28px; }
.gate__paths li + li::before { content: "\25C6"; font-size: 6px; color: var(--og-gilt-lo); font-style: normal; }
.gate__paths a { position: relative; padding-bottom: 4px; transition: color .25s; }
.gate__paths a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--og-ember), var(--og-gilt)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--og-ease);
}
.gate__paths a:hover::after { transform: scaleX(1); }
.gate__motto em { font-style: inherit; color: var(--og-gilt-hi); }
.gate__motto small { display: block; margin-top: 6px; font: italic 400 .6em/1.3 var(--og-body); color: var(--og-ash); letter-spacing: .04em; }

/* ---------- scroll-driven reveals (modern) ---------- */
@supports (animation-timeline: view()) {
  .og-reveal-on {
    animation: og-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}
.og-reveal { opacity: 0; translate: 0 22px; transition: opacity .9s var(--og-ease), translate .9s var(--og-ease); }
.og-reveal.is-seen { opacity: 1; translate: 0 0; }
@keyframes og-reveal { from { opacity: 0; translate: 0 26px; filter: brightness(.6); } to { opacity: 1; translate: 0 0; filter: brightness(1); } }

/* ---------- touch / small screens ---------- */
@media (hover: none) {
  .plate::before { background:
    linear-gradient(180deg, rgba(7, 6, 10, .1) 0%, rgba(7, 6, 10, .25) 35%, rgba(7, 6, 10, .92) 82%, rgba(7, 6, 10, .98) 100%),
    linear-gradient(120deg, rgba(196, 165, 90, .12), transparent 40%, rgba(143, 29, 29, .15)); }
  .og-litany__track { animation-duration: 48s; }
}
@media (max-width: 760px) {
  .og-litany__item { font-size: 12px; letter-spacing: .22em; padding: 14px 24px 13px 0; gap: 24px; }
  .section-head::after { width: 54px; }
}

/* ---------- reduced motion: hold everything still ---------- */
@media (prefers-reduced-motion: reduce) {
  .og-header::after, .seam svg, .btn--ichor::before, .badge--ichor, .badge--live, .og-footer-seal .og-seal, .og-litany__track, .og-progress { animation: none !important; }
  .og-litany__track { flex-wrap: wrap; width: auto; justify-content: center; }
  .og-litany__track > li:nth-child(n + 9) { display: none; }
  .og-reveal, .og-reveal-on { opacity: 1 !important; translate: none !important; animation: none !important; transition: none !important; }
  .plate, .tile, .btn, .dispatch__img, .tools svg { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .og-header.og-hidden { transform: none !important; }
}