/* Kintsugi Play: black and gold. Contrast figures are WCAG ratios against --bg (#0a0a0a). */
:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --stone: #141311;
  --stone-2: #1c1a16;
  --line: #3a3326;
  --gold: #e8c46a;        /* 11.9:1 on bg */
  --gold-deep: #b8923a;   /* decorative only */
  --ink: #f5efe0;         /* 17.6:1 */
  --ink-soft: #cdc4ad;    /* 11.2:1 */
  --focus: #ffffff;
  --radius: 14px;
  --scale: 1;
}
:root[data-contrast="more"] {
  --line: #8a7a55;
  --ink-soft: #f1e9d2;
}
* { box-sizing: border-box; }
html { font-size: calc(100% * var(--scale)); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 1.0625rem/1.65 ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
*:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; background: var(--gold); color: #0a0a0a;
  padding: .75rem 1.25rem; font-weight: 700; border-radius: 0 0 10px 10px; z-index: 100;
}
.skip-link:focus { top: 0; }

.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: rgba(10,10,10,.96); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: .6rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: .04em; min-height: 44px; }
.brand .mark { color: var(--gold); font-size: 1.35rem; }
.brand small { display: block; font-weight: 400; letter-spacing: .02em; color: var(--ink-soft); font-size: .78rem; line-height: 1; }
nav[aria-label="Primary"] { margin-left: auto; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; flex-wrap: wrap; }
nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; color: var(--ink); text-decoration: none; border-radius: 999px; }
nav a:hover { color: var(--gold); }
nav a[aria-current="page"] { color: #0a0a0a; background: var(--gold); font-weight: 700; }
.tools button, .btn {
  min-height: 44px; min-width: 44px; padding: 0 1.1rem; border-radius: 999px; font: inherit; font-weight: 700;
  cursor: pointer; border: 1.5px solid var(--gold); background: transparent; color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none;
}
.btn.primary { background: var(--gold); color: #0a0a0a; }
.btn:hover, .tools button:hover { filter: brightness(1.12); }

/* Kintsugi seam divider */
.seam { display: block; width: 100%; height: 28px; color: var(--gold-deep); margin-block: 0; }
.seam path { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Hero */
.hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2rem, 5vw, 4rem); position: relative; overflow: hidden;
  background: radial-gradient(900px 420px at 80% -10%, rgba(232,196,106,.14), transparent 60%), var(--bg); }
.eyebrow { color: var(--gold); letter-spacing: .16em; text-transform: uppercase; font-size: .8rem; font-weight: 700; margin: 0 0 1rem; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6em; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); }
h3 { font-size: 1.3rem; }
.lede { font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: var(--ink-soft); max-width: 46rem; }
.gold { color: var(--gold); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Sections */
section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.card {
  background: linear-gradient(180deg, var(--stone-2), var(--stone));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem;
}
.grid { display: grid; gap: 1.25rem; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.badge { display: inline-block; padding: .2rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 700; border: 1.5px solid var(--gold); color: var(--gold); }
.badge.live { background: var(--gold); color: #0a0a0a; }

/* Game cards and features */
.game-card { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: inherit; }
.game-card:hover h3 { color: var(--gold); }
.game-card .shot { border-radius: 12px; border: 1px solid var(--line); aspect-ratio: 9/14; object-fit: cover; object-position: top; width: 100%; background: var(--stone); }
.game-card .meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.icon { width: 56px; height: 56px; border-radius: 13px; border: 1px solid var(--line); }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.feature-list li { padding-left: 1.6rem; position: relative; }
.feature-list li::before { content: ""; position: absolute; left: .25rem; top: .75em; width: .55rem; height: .55rem; background: var(--gold); transform: rotate(45deg); }

/* Screenshot rail */
.rail { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; }
.rail figure { margin: 0; flex: 0 0 min(24rem, 80vw); scroll-snap-align: start; }
.rail img { border-radius: 14px; border: 1px solid var(--line); width: 100%; aspect-ratio: 9/19.5; object-fit: cover; object-position: top; background: var(--stone); }
.rail figcaption { font-size: .92rem; color: var(--ink-soft); margin-top: .5rem; }
.rail:focus-visible { outline-offset: 6px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1.25rem; }
.gallery figure { margin: 0; }
.gallery img { border-radius: 12px; border: 1px solid var(--line); width: 100%; aspect-ratio: 9/19.5; object-fit: cover; object-position: top; background: var(--stone); }
.gallery figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: .4rem; }

.split { display: grid; gap: 2rem; align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.prose p, .prose li { color: var(--ink); }
.muted { color: var(--ink-soft); }
details { border: 1px solid var(--line); border-radius: 12px; padding: .25rem 1.1rem; margin-bottom: .75rem; background: var(--stone); }
summary { cursor: pointer; font-weight: 700; padding: .75rem 0; min-height: 44px; }
details[open] summary { color: var(--gold); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 2.5rem; color: var(--ink-soft); font-size: .95rem; }
.site-footer .wrap { display: flex; gap: 1.5rem; justify-content: space-between; flex-wrap: wrap; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* Settings dialog */
dialog { background: var(--stone-2); color: var(--ink); border: 1px solid var(--gold); border-radius: 16px; padding: 1.5rem; width: min(30rem, calc(100% - 2rem)); }
dialog::backdrop { background: rgba(0,0,0,.75); }
dialog h2 { font-size: 1.4rem; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.setting label, .setting .lbl { font-weight: 700; }
.setting .hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: .9rem; }
.setting input[type="checkbox"] { width: 1.6rem; height: 1.6rem; accent-color: var(--gold); }
.caption-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #000; color: var(--ink); border-top: 2px solid var(--gold); padding: .75rem 1rem; text-align: center; z-index: 80; }
.caption-bar[hidden] { display: none; }

/* ---------- Motion. Every animation here is cancelled by Reduce Motion (system or the site setting). ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glowdrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6%, 4%) scale(1.08); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes dust { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .6; } 100% { transform: translateY(-110vh) translateX(var(--dx, 0)); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }

html.motion .hero > .wrap > div:first-child > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
html.motion .hero > .wrap > div:first-child > :nth-child(1) { animation-delay: .05s; }
html.motion .hero > .wrap > div:first-child > :nth-child(2) { animation-delay: .15s; }
html.motion .hero > .wrap > div:first-child > :nth-child(3) { animation-delay: .28s; }
html.motion .hero > .wrap > div:first-child > :nth-child(4) { animation-delay: .4s; }
html.motion .hero > .wrap > div:first-child > :nth-child(5) { animation-delay: .5s; }
html.motion .hero > .wrap > .hero-art { animation: rise .9s .25s cubic-bezier(.2,.7,.2,1) both; }
html.motion .hero > .wrap > .hero-art img { animation: floaty 7s 1.2s ease-in-out infinite; }
html.motion .hero > .wrap > div:only-child > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
html.motion .hero > .wrap > div:only-child > :nth-child(2) { animation-delay: .12s; }
html.motion .hero > .wrap > div:only-child > :nth-child(3) { animation-delay: .24s; }
html.motion .hero > .wrap > div:only-child > :nth-child(4) { animation-delay: .36s; }

/* A slow gold glow that drifts behind the hero, and kintsugi dust rising through it. */
.hero::before { content: ""; position: absolute; inset: -20% -10%; pointer-events: none; z-index: 0;
  background: radial-gradient(700px 360px at 78% 10%, rgba(232,196,106,.16), transparent 62%); }
html.motion .hero::before { animation: glowdrift 14s ease-in-out infinite; }
.hero > .wrap { position: relative; z-index: 1; }
.dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; display: none; }
html.motion .dust { display: block; }
.dust i { position: absolute; bottom: -2vh; width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px 2px rgba(232,196,106,.55); opacity: 0; animation: dust var(--t, 12s) linear var(--d, 0s) infinite; }

/* Kintsugi seams draw themselves in as they scroll into view. */
html.motion .seam path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
html.motion .seam.in path { animation: draw 1.6s cubic-bezier(.4,0,.2,1) forwards; }
html.motion .seam.in { background: linear-gradient(90deg, transparent 40%, rgba(232,196,106,.08) 50%, transparent 60%);
  background-size: 200% 100%; animation: shimmer 6s 1.8s linear infinite; }

/* Reveal on scroll. Only applied by JS, only when motion is allowed, so nothing is ever stuck hidden. */
html.motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.motion .reveal.in { opacity: 1; transform: none; }
html.motion .reveal:nth-child(2) { transition-delay: .08s; }
html.motion .reveal:nth-child(3) { transition-delay: .16s; }
html.motion .reveal:nth-child(4) { transition-delay: .24s; }
html.motion .reveal:nth-child(5) { transition-delay: .32s; }
html.motion .reveal:nth-child(6) { transition-delay: .4s; }

/* Hover and press. */
html.motion .card { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; }
html.motion .card:hover, html.motion .game-card:focus-within { transform: translateY(-6px); border-color: var(--gold-deep); box-shadow: 0 18px 40px -18px rgba(232,196,106,.35), 0 0 0 1px rgba(232,196,106,.15); }
html.motion .game-card .shot { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
html.motion .game-card:hover .shot { transform: scale(1.025); }
html.motion .btn, html.motion .tools button, html.motion nav a { transition: transform .2s, box-shadow .3s, filter .2s, background-color .3s, color .3s; }
html.motion .btn:hover, html.motion .tools button:hover { box-shadow: 0 0 0 4px rgba(232,196,106,.18), 0 10px 24px -12px rgba(232,196,106,.5); transform: translateY(-1px); }
html.motion .btn:active { transform: translateY(1px) scale(.98); }
html.motion .brand .mark { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
html.motion .brand:hover .mark { transform: rotate(180deg); }
html.motion .rail img, html.motion .gallery img { transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s; }
html.motion .rail figure:hover img, html.motion .gallery figure:hover img { transform: translateY(-4px); border-color: var(--gold-deep); }
html.motion .feature-list li::before { transition: transform .4s; }
html.motion .feature-list li:hover::before { transform: rotate(225deg) scale(1.3); }
html.motion details { transition: border-color .3s; }
html.motion details[open] { border-color: var(--gold-deep); }
html.motion .caption-bar { animation: rise .3s ease both; }

/* Game card structure: the whole card is clickable, but VoiceOver gets image, heading link, text and status as separate items. */
.game-card { position: relative; }
.game-card h3 a { color: inherit; text-decoration: none; }
.game-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.game-card h3 a:focus-visible { outline: none; }
.game-card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.game-card .store { position: relative; z-index: 1; }

/* On-this-page jump list */
.jump { margin: 0 0 1rem; }
.jump ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); }
.jump a:hover { border-color: var(--gold); color: var(--gold); }

/* Lightbox: any screenshot opens full size in a dialog. */
.lb { display: block; border-radius: 14px; }
.lb:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.lb img { cursor: zoom-in; }
#lightbox { padding: 0; width: min(96vw, 1100px); max-height: 96vh; background: #000; border-color: var(--gold-deep); overflow: hidden; }
#lightbox .lb-bar { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
#lightbox .lb-bar p { margin: 0; flex: 1; color: var(--ink); }
#lightbox .lb-bar button { min-width: 44px; }
#lightbox .lb-stage { display: grid; place-items: center; max-height: calc(96vh - 4.2rem); overflow: auto; }
#lightbox img { max-width: 100%; max-height: calc(96vh - 4.2rem); width: auto; height: auto; object-fit: contain; }

/* ---------- Game card slideshow: plays while the card is hovered or focused ---------- */
.caro { position: relative; aspect-ratio: 9/14; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--stone); }
.caro .slide { position: absolute; inset: 0; margin: 0; opacity: 0; }
.caro .slide.is-active { opacity: 1; }
.caro .slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.caro figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem .9rem .9rem; color: var(--gold); font-weight: 700; font-size: .98rem; line-height: 1.35;
  background: linear-gradient(180deg, transparent, rgba(5,5,5,.92) 55%); text-shadow: 0 1px 2px #000; }
html.motion .caro .slide figcaption { transform: translateY(8px); opacity: 0; transition: transform .6s .25s cubic-bezier(.2,.7,.2,1), opacity .6s .25s; }
html.motion .caro .slide.is-active figcaption { transform: none; opacity: 1; }
.caro .dots { position: absolute; top: .6rem; right: .6rem; display: flex; gap: .3rem; }
.caro .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,239,224,.45); border: 1px solid rgba(0,0,0,.4); }
.caro .dot.is-active { background: var(--gold); }
html.motion .caro .dot { transition: background-color .4s, transform .4s; }
html.motion .caro .dot.is-active { transform: scale(1.35); }
.game-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.caro.is-playing .dots::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-left: .25rem; opacity: 0; }

/* ---------- The shatter: a rock hits the glass at a random point, cracks radiate, the pane breaks into shards
   that fly away from the hit, fall, spin and dissolve into the next screenshot. The pattern is generated fresh
   each time in site.js (impact point, ray count, ring radii, shard sizes), so no two breaks are alike. ---------- */
.caro .slide.is-leaving { opacity: 0; }
.caro .slide.is-entering { z-index: 1; }
.caro .shards { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.caro .shard { position: absolute; inset: 0; background-size: cover; background-position: top center; will-change: transform, opacity;
  transform-origin: var(--ox) var(--oy); }
@keyframes shard-fly {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; filter: brightness(1); }
  18%  { transform: translate(calc(var(--dx) * .12), calc(var(--dy) * .08)) rotate(calc(var(--rot) * .15)) scale(1.01); opacity: 1; filter: brightness(1.25); }
  100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)) scale(.92); opacity: 0; filter: brightness(.6) blur(2px); }
}
html.motion .caro .shard { animation: shard-fly 1.05s cubic-bezier(.3,0,.8,.4) var(--d) forwards; }
.caro .cracks { position: absolute; inset: 0; z-index: 4; pointer-events: none; width: 100%; height: 100%; }
.caro .cracks path { fill: none; stroke: #fff6d8; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(232,196,106,.9)); stroke-dasharray: 1; stroke-dashoffset: 1; }
.caro .cracks .crack-ring { stroke-width: 1; opacity: .85; }
@keyframes crack-draw { to { stroke-dashoffset: 0; } }
@keyframes crack-fade { to { opacity: 0; } }
html.motion .caro .cracks path { animation: crack-draw .22s cubic-bezier(.2,.8,.3,1) var(--cd, 0s) forwards; }
html.motion .caro .cracks { animation: crack-fade .5s ease .6s forwards; }
.caro .impact { position: absolute; z-index: 5; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, rgba(255,243,196,.9) 30%, rgba(232,196,106,0) 70%); opacity: 0; }
@keyframes impact-flash { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
html.motion .caro .impact { animation: impact-flash .5s ease-out forwards; }
@keyframes glint { 0% { opacity: 0; transform: translate(0,0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx), calc(var(--sy) + 40px)) scale(0); } }
.caro .glint { position: absolute; z-index: 5; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(255,246,216,.9); opacity: 0; pointer-events: none; }
html.motion .caro .glint { animation: glint .8s ease-out var(--sd, 0s) forwards; }

/* ---------- Classes that replaced inline styles (strict CSP forbids style attributes) ---------- */
.m0 { margin: 0; } .mt1 { margin-top: 1rem; } .mt2 { margin-top: 2rem; } .plain { text-decoration: none; }
.plain-list { list-style: none; padding: 0; } .wide { max-width: none; } .promise { font-weight: 700; font-size: 1.15rem; }
.title-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.hero-phone { max-height: 34rem; width: auto; margin-inline: auto; border-radius: 18px; border: 1px solid var(--line); }

/* ---------- Modern pass: glass, tilt, sheen, crack field, progress line ---------- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold), #fff3c4); z-index: 100; box-shadow: 0 0 8px rgba(232,196,106,.6); }
.site-header { transition: background-color .4s, backdrop-filter .4s, border-color .4s; }
.site-header.is-scrolled { background: rgba(10,10,10,.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: rgba(232,196,106,.25); }

/* Cards become glass; a gold sheen follows the pointer; the card tilts a few degrees toward it. */
.card { background: linear-gradient(180deg, rgba(28,26,22,.78), rgba(20,19,17,.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position: relative; overflow: hidden; transform-style: preserve-3d; }
.card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(232,196,106,.16), transparent 42%); transition: opacity .4s; }
html.motion .card:hover::after { opacity: 1; }
html.motion .card.tilting { transition: transform .08s linear, border-color .35s, box-shadow .35s; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.card > * { transform: translateZ(0); }

/* The hero carries a field of slow gold cracks across its full width, drawn in when it first appears. */
.hero-cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .55; }
.hero-cracks path { fill: none; stroke: var(--gold-deep); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px rgba(232,196,106,.45)); }
html.motion .hero-cracks path { animation: crack-draw 2.4s cubic-bezier(.2,.8,.3,1) var(--cd, 0s) forwards; }
html:not(.motion) .hero-cracks path { stroke-dashoffset: 0; }
@keyframes gold-shine { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
.gold { background: linear-gradient(90deg, var(--gold) 0%, #fff3c4 45%, var(--gold) 55%, var(--gold-deep) 100%); background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
html.motion h1 .gold { animation: gold-shine 6s linear infinite; }
:root[data-contrast="more"] .gold, html:not(.motion) .gold { background: none; color: var(--gold); -webkit-text-fill-color: initial; }

/* Buttons: a sheen sweeps across on hover. */
.btn.primary { position: relative; overflow: hidden; background: linear-gradient(135deg, #f0d083, var(--gold) 55%, #c9a24f); }
.btn.primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); }
html.motion .btn.primary:hover::before { animation: sheen .7s ease forwards; }
@keyframes sheen { to { left: 130%; } }

/* ---------- Brand: the real wordmark in the header, and the opening splash on the home page ---------- */
.brand .wordmark { height: 30px; width: auto; display: block; }
.brand small { margin-top: .15rem; }
.splash { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; cursor: pointer; }
.splash video { height: 100vh; height: 100dvh; width: auto; max-width: 100vw; aspect-ratio: 9 / 16; object-fit: cover; background: #000;
  /* Feather the portrait clip's edges into the black so its glow fades out instead of stopping at a hard line on wide screens. */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
@media (max-aspect-ratio: 9 / 16) { .splash video { width: 100vw; height: auto; } }
.splash-skip { position: absolute; bottom: 1.5rem; left: 0; right: 0; text-align: center; color: var(--ink-soft); font-size: .9rem; margin: 0; opacity: 0; transition: opacity .6s; }
.splash.is-armed .splash-skip { opacity: .8; }
.splash.is-leaving { transition: opacity .55s ease; opacity: 0; pointer-events: none; }
html:not(.motion) .splash { display: none; }