/* ==========================================================================
   NEVERBOUND — "The Descent" homepage
   Self-contained design system for index.njk only.
   News / press-kit pages use styles.css + content.css (untouched).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
    --void: #0b0908;
    --ink: #17130f;
    --ink-2: #201a14;
    --parchment: #e9ddc2;
    --parchment-dim: #b8ab8d;
    --lantern: #c9893c;
    --lantern-bright: #e7ab5c;
    --gold: #cbaa66;
    --gold-bright: #e9cf94;
    --violet: #5b3f7a;
    --violet-light: #9d7fd0;
    --violet-deep: #251a35;
    --rose: #7c2635;
    --rose-bright: #a8394c;

    --font-display: 'Grenze Gotisch', 'Times New Roman', serif;
    --font-body: 'Cormorant Garamond', Georgia, serif;
    --font-label: 'Special Elite', 'Courier New', monospace;

    --container: 1240px;
    --gutter: clamp(1.25rem, 4vw, 4rem);
    --radius: 2px;
    --ease-cinema: cubic-bezier(.22, .61, .36, 1);
    --ease-snap: cubic-bezier(.68, -0.4, .27, 1.4);
}

/* --------------------------------------------------------------------------
   Base (targeted reset for this standalone page)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

body {
    margin: 0;
    background: var(--void);
    color: var(--parchment);
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
ul {
    margin: 0;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--gold-bright);
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

::selection {
    background: var(--violet);
    color: var(--parchment);
}

:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: -100%;
    left: 1rem;
    z-index: 1200;
    padding: .6rem 1rem;
    background: var(--ink-2);
    color: var(--gold-bright);
    font-family: var(--font-label);
    font-size: .8rem;
    transition: top .2s;
}

.skip-link:focus {
    top: 1rem;
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
.section-heading {
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 6vh, 4.5rem);
    text-align: center;
    padding: 0 var(--gutter);
}

.section-heading h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.05;
    color: var(--gold-bright);
    text-wrap: balance;
}

.section-heading p {
    margin-top: 1rem;
    color: var(--parchment-dim);
    font-size: 1.2rem;
}

.section-kicker {
    display: inline-block;
    font-family: var(--font-label);
    font-size: .8rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--lantern-bright);
    margin-bottom: 1rem;
}

/* Split-text chars (added by JS) */
.char {
    display: inline-block;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 1.9rem;
    font-family: var(--font-label);
    font-size: .85rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-radius: var(--radius);
    overflow: hidden;
    transition: color .3s, border-color .3s, box-shadow .3s, background-color .3s;
    will-change: transform;
}

.btn::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -30%;
    width: 36%;
    background: linear-gradient(100deg, transparent, rgba(233, 221, 194, .35), transparent);
    transform: skewX(-20deg) translateX(-120%);
    transition: transform .6s var(--ease-cinema);
    pointer-events: none;
}

.btn:hover::after,
.btn:focus-visible::after {
    transform: skewX(-20deg) translateX(420%);
}

.btn-gold {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    color: #241a08;
    box-shadow: 0 0 0 1px rgba(233, 207, 148, .4), 0 10px 30px -12px rgba(201, 137, 60, .55);
}

.btn-gold:hover,
.btn-gold:focus-visible {
    box-shadow: 0 0 0 1px rgba(233, 207, 148, .8), 0 14px 44px -10px rgba(201, 137, 60, .8);
}

.btn-ghost {
    border: 1px solid rgba(203, 170, 102, .45);
    color: var(--gold-bright);
    background: rgba(23, 19, 15, .35);
    backdrop-filter: blur(4px);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    border-color: var(--gold-bright);
    background: rgba(32, 26, 20, .6);
}

.btn-lg {
    padding: 1.05rem 2.3rem;
    font-size: .92rem;
}

.btn-sm {
    padding: .55rem 1.1rem;
    font-size: .72rem;
}

/* --------------------------------------------------------------------------
   Grain
   -------------------------------------------------------------------------- */
.grain {
    position: fixed;
    inset: -100px;
    z-index: 940;
    pointer-events: none;
    opacity: .055;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Custom cursor
   -------------------------------------------------------------------------- */
.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .3s;
}

body.has-custom-cursor .cursor-dot,
body.has-custom-cursor .cursor-ring {
    opacity: 1;
}

body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor [role="button"] {
    cursor: none;
}

.cursor-dot {
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: var(--lantern-bright);
    box-shadow: 0 0 12px 3px rgba(231, 171, 92, .65);
}

.cursor-ring {
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 1px solid rgba(203, 170, 102, .55);
    transition: opacity .3s, width .25s, height .25s, margin .25s, border-color .25s, background-color .25s;
}

.cursor-ring.is-hover {
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-color: var(--gold-bright);
    background: rgba(203, 170, 102, .08);
}

.cursor-ring.is-down {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
}

.cursor-spark {
    position: fixed;
    z-index: 1099;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--gold-bright);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Loader — "Open the Door"
   -------------------------------------------------------------------------- */
.loader {
    position: fixed;
    inset: -24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    overflow: hidden;
    background: var(--void);
    will-change: transform;
}

.loader-door {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.loader-door-glow {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: min(38vmin, 340px);
    height: min(62vmin, 560px);
    transform: translate(-50%, -50%);
    border-radius: 50% 50% 6px 6px / 34% 34% 6px 6px;
    background: radial-gradient(ellipse at 50% 42%,
            rgba(231, 171, 92, .9),
            rgba(201, 137, 60, .45) 42%,
            rgba(91, 63, 122, .18) 68%,
            transparent 78%);
    filter: blur(6px);
    opacity: calc(.12 + var(--p, 0) * .88);
    scale: calc(.28 + var(--p, 0) * .72);
    transition: opacity .25s linear, scale .25s linear;
}

.loader-door-panel {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 50.5%;
    background:
        repeating-linear-gradient(90deg, rgba(233, 207, 148, .03) 0 2px, transparent 2px 90px),
        linear-gradient(180deg, #14100c, #0b0908);
}

.loader-door-left {
    left: 0;
    border-right: 1px solid rgba(203, 170, 102, .35);
    box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .9) inset;
}

.loader-door-right {
    right: 0;
    border-left: 1px solid rgba(203, 170, 102, .35);
    box-shadow: 30px 0 80px -20px rgba(0, 0, 0, .9) inset;
}

.loader-chains {
    position: relative;
    z-index: 3;
    display: flex;
    gap: .35rem;
    color: var(--gold);
}

.loader-chain {
    width: 34px;
    height: 22px;
    opacity: .9;
    transition: opacity .3s;
}

.loader-chain.is-snapped {
    opacity: .18;
}

.loader-mark {
    position: relative;
    z-index: 3;
    width: min(460px, 74vw);
}

.loader-logo-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 30px rgba(201, 137, 60, .35));
}

.loader-logo-fallback {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.6rem, 9vw, 4.6rem);
    letter-spacing: .08em;
    color: var(--gold-bright);
    text-align: center;
}

.loader-caption {
    position: relative;
    z-index: 3;
    min-height: 1.4em;
    font-family: var(--font-label);
    font-size: .85rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--parchment-dim);
}

.loader-depth {
    position: relative;
    z-index: 3;
    font-family: var(--font-label);
    font-size: .68rem;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: rgba(203, 170, 102, .6);
}

.loader-skip {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: var(--font-label);
    font-size: .65rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(184, 171, 141, .5);
    animation: loaderSkipPulse 2.2s ease-in-out infinite;
}

/* Light flood that bursts from the keyhole on exit */
.loader-flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(ellipse at 50% 46%,
            rgba(233, 221, 194, .95),
            rgba(231, 171, 92, .55) 42%,
            rgba(157, 127, 208, .3) 62%,
            transparent 78%);
    opacity: 0;
    transform: scale(.15);
    pointer-events: none;
}

/* Progress thread under the caption */
.loader-thread {
    position: relative;
    z-index: 3;
    width: min(300px, 56vw);
    height: 1px;
    background: rgba(203, 170, 102, .18);
}

.loader-thread-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--lantern), var(--gold-bright));
    box-shadow: 0 0 8px rgba(231, 171, 92, .6);
    transform: scaleX(0);
    transform-origin: left;
}

/* Cards dealt past the camera at each chain snap (JS-spawned) */
.loader-card {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: 72px;
    aspect-ratio: 3 / 4.2;
    margin: -80px 0 0 -36px;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: #251a35;
    background: linear-gradient(180deg, #efe3c8, #dccb9f);
    border: 3px solid #a5823f;
    border-radius: 8px;
    box-shadow: 0 0 0 2px rgba(60, 42, 18, .4) inset, 0 18px 50px -12px rgba(0, 0, 0, .8);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Ember burst on chain snaps (JS-spawned) */
.loader-ember {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 8px 2px rgba(231, 171, 92, .7);
    pointer-events: none;
}

@keyframes loaderSkipPulse {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: .8;
    }
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    transition: transform .45s var(--ease-cinema), background-color .35s, box-shadow .35s;
}

.site-nav.is-hidden {
    transform: translateY(-110%);
}

.site-nav.is-scrolled {
    background: rgba(11, 9, 8, .82);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(203, 170, 102, .16);
}

.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: .9rem var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.nav-logo img {
    height: 30px;
    width: auto;
    transition: transform .3s var(--ease-cinema);
}

.nav-logo:hover img {
    transform: rotate(-4deg) scale(1.06);
}

.nav-logo-fallback {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--gold-bright);
}

.nav-links {
    display: flex;
    gap: 1.8rem;
}

.nav-links a {
    position: relative;
    font-family: var(--font-label);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--parchment-dim);
    padding: .3rem 0;
    transition: color .25s;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--gold-bright);
    transition: right .3s var(--ease-cinema);
}

.nav-links a:hover,
.nav-links a:focus-visible {
    color: var(--gold-bright);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
    right: 0;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.sound-toggle {
    position: relative;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(203, 170, 102, .35);
    border-radius: 50%;
    color: var(--parchment-dim);
    transition: color .25s, border-color .25s, box-shadow .25s;
}

.sound-toggle:hover {
    color: var(--gold-bright);
    border-color: var(--gold-bright);
}

.sound-toggle .sound-icon {
    width: 16px;
    height: 16px;
    grid-area: 1 / 1;
    transition: opacity .2s, transform .3s var(--ease-snap);
}

.sound-toggle .sound-on {
    opacity: 0;
    transform: scale(.4);
}

.sound-toggle[aria-pressed="true"] {
    color: var(--lantern-bright);
    border-color: var(--lantern-bright);
    box-shadow: 0 0 14px -2px rgba(231, 171, 92, .5);
}

.sound-toggle[aria-pressed="true"] .sound-on {
    opacity: 1;
    transform: scale(1);
}

.sound-toggle[aria-pressed="true"] .sound-off {
    opacity: 0;
    transform: scale(.4);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: .5rem;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--gold-bright);
    transition: transform .3s var(--ease-cinema), opacity .2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile {
    display: none;
    flex-direction: column;
    padding: 1rem var(--gutter) 1.6rem;
    background: rgba(11, 9, 8, .96);
    border-bottom: 1px solid rgba(203, 170, 102, .16);
}

.nav-mobile a {
    padding: .8rem 0;
    font-family: var(--font-label);
    font-size: .9rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--parchment);
    border-bottom: 1px solid rgba(203, 170, 102, .1);
}

.nav-mobile.is-open {
    display: flex;
}

/* --------------------------------------------------------------------------
   Board-trail progress nav (desktop)
   -------------------------------------------------------------------------- */
.trail {
    position: fixed;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 800;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1.05rem;
}

@media (min-width: 1100px) {
    .trail {
        display: flex;
    }
}

.trail-thread {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(203, 170, 102, .3) 12%, rgba(203, 170, 102, .3) 88%, transparent);
}

.trail-stop {
    position: relative;
    display: grid;
    place-items: center;
}

.trail-tile {
    position: relative;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-family: var(--font-label);
    font-size: .62rem;
    letter-spacing: .05em;
    line-height: 1;
    color: var(--parchment-dim);
    transition: color .3s;
}

.trail-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    border: 1px solid rgba(203, 170, 102, .35);
    border-radius: 4px;
    transform: rotate(45deg);
    transition: background-color .3s, border-color .3s, box-shadow .3s;
}

.trail-stop:hover .trail-tile,
.trail-stop:focus-visible .trail-tile {
    color: var(--gold-bright);
}

.trail-stop:hover .trail-tile::before,
.trail-stop:focus-visible .trail-tile::before {
    border-color: var(--gold-bright);
}

.trail-stop.is-passed .trail-tile {
    color: var(--violet-light);
}

.trail-stop.is-passed .trail-tile::before {
    background: var(--violet-deep);
    border-color: var(--violet-light);
}

.trail-stop.is-current .trail-tile {
    color: #241a08;
}

.trail-stop.is-current .trail-tile::before {
    background: var(--gold);
    border-color: var(--gold-bright);
    box-shadow: 0 0 16px rgba(203, 170, 102, .55);
}

.trail-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    font-family: var(--font-label);
    font-size: .62rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold-bright);
    background: rgba(11, 9, 8, .9);
    border: 1px solid rgba(203, 170, 102, .3);
    padding: .35rem .6rem;
    border-radius: var(--radius);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s var(--ease-cinema);
}

.trail-stop:hover .trail-label,
.trail-stop:focus-visible .trail-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.trail-pawn {
    position: absolute;
    left: 50%;
    top: 0;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--lantern));
    box-shadow: 0 0 14px 3px rgba(231, 171, 92, .65);
    pointer-events: none;
    will-change: transform;
}

/* Mobile scroll bar */
.scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 890;
    background: rgba(203, 170, 102, .12);
}

@media (min-width: 1100px) {
    .scroll-bar {
        display: none;
    }
}

.scroll-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--lantern), var(--gold-bright));
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #08060e;
}

.hero-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Faint violet nebula behind the transparent WebGL field */
.hero-nebula {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 88% 62% at 14% 18%, rgba(91, 63, 122, .46), transparent 58%),
        radial-gradient(ellipse 62% 48% at 86% 22%, rgba(157, 127, 208, .2), transparent 54%),
        radial-gradient(ellipse 70% 52% at 72% 82%, rgba(91, 63, 122, .34), transparent 60%),
        radial-gradient(ellipse 48% 40% at 28% 78%, rgba(37, 26, 53, .9), transparent 68%),
        radial-gradient(ellipse 90% 70% at 50% 48%, rgba(18, 12, 28, .45), transparent 72%),
        #08060e;
}

.hero-nebula-cloud {
    position: absolute;
    inset: -22%;
    background:
        radial-gradient(ellipse 42% 34% at 22% 42%, rgba(157, 127, 208, .16), transparent 70%),
        radial-gradient(ellipse 38% 30% at 78% 58%, rgba(91, 63, 122, .24), transparent 68%),
        radial-gradient(ellipse 28% 22% at 48% 28%, rgba(157, 127, 208, .08), transparent 72%);
    pointer-events: none;
}

html.fx .hero-nebula-cloud {
    animation: nebulaDrift 56s ease-in-out infinite alternate;
}

@keyframes nebulaDrift {
    from {
        transform: translate3d(-3%, 1.5%, 0) scale(1.02);
    }

    to {
        transform: translate3d(3.5%, -2%, 0) scale(1.08);
    }
}

.hero-nebula-stars {
    position: absolute;
    inset: 0;
    opacity: .7;
    background-image:
        radial-gradient(1px 1px at 8% 14%, rgba(233, 221, 194, .55), transparent),
        radial-gradient(1px 1px at 18% 42%, rgba(157, 127, 208, .45), transparent),
        radial-gradient(1.5px 1.5px at 27% 22%, rgba(233, 221, 194, .35), transparent),
        radial-gradient(1px 1px at 36% 68%, rgba(157, 127, 208, .4), transparent),
        radial-gradient(1px 1px at 44% 12%, rgba(233, 221, 194, .3), transparent),
        radial-gradient(1.5px 1.5px at 53% 36%, rgba(157, 127, 208, .28), transparent),
        radial-gradient(1px 1px at 61% 74%, rgba(233, 221, 194, .4), transparent),
        radial-gradient(1px 1px at 70% 18%, rgba(157, 127, 208, .5), transparent),
        radial-gradient(1px 1px at 78% 48%, rgba(233, 221, 194, .28), transparent),
        radial-gradient(1.5px 1.5px at 86% 64%, rgba(157, 127, 208, .35), transparent),
        radial-gradient(1px 1px at 92% 26%, rgba(233, 221, 194, .45), transparent),
        radial-gradient(1px 1px at 12% 82%, rgba(157, 127, 208, .3), transparent),
        radial-gradient(1px 1px at 23% 58%, rgba(233, 221, 194, .22), transparent),
        radial-gradient(1px 1px at 48% 88%, rgba(157, 127, 208, .32), transparent),
        radial-gradient(1px 1px at 66% 8%, rgba(233, 221, 194, .25), transparent),
        radial-gradient(1px 1px at 81% 86%, rgba(157, 127, 208, .22), transparent);
    pointer-events: none;
}

.hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity .9s ease .15s;
}

html.webgl-on .hero-canvas {
    opacity: 1;
}

/* Dims debris + nebula; sits under the door and under the town reveal */
.hero-dim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(8, 6, 14, .95);
}

html:not(.js) .hero-dim {
    opacity: 0;
}

.hero-fallback {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.hero-fallback-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 112vw;
    height: 112vh;
    height: 112svh;
    margin: -56vh 0 0 -56vw;
    margin: -56svh 0 0 -56vw;
    background-size: cover;
    background-position: center;
    opacity: .5;
    transition: opacity .8s;
}

/* With JS running, the full-bleed art only returns if WebGL fails —
   otherwise it flashes behind the scene while the module loads */
html.js .hero-fallback-bg {
    opacity: 0;
}

html.js.no-webgl .hero-fallback-bg {
    opacity: .5;
}

/* GSAP owns these opacities — a CSS transition fights the scrub and flashes */
html.fx .hero-canvas,
html.fx .hero-fallback-bg,
html.fx .hero-dim {
    transition: none;
}

.hero-embers {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-embers span,
.wishlist-embers span {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lantern-bright);
    box-shadow: 0 0 8px 2px rgba(231, 171, 92, .5);
    opacity: 0;
    animation: emberRise linear infinite;
}

@keyframes emberRise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    12% {
        opacity: .9;
    }

    100% {
        transform: translateY(-104vh) translateX(var(--drift, 20px));
        opacity: 0;
    }
}

.hero-door {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    width: clamp(300px, 40vmin, 480px);
    aspect-ratio: 1;
    will-change: transform, opacity;
    pointer-events: auto;
}

.hero-portal-shell {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
}

/* Soft nebula wash — no hard edge */
.hero-portal-bloom {
    position: absolute;
    inset: -70%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(42, 20, 78, .28) 8%,
            rgba(58, 34, 108, .32) 28%,
            rgba(32, 48, 102, .16) 48%,
            transparent 72%);
    pointer-events: none;
    mix-blend-mode: screen;
}

html.fx .hero-portal-bloom {
    animation: portalPulse 4s ease-in-out infinite;
}

@keyframes portalPulse {

    0%,
    100% {
        opacity: .6;
        transform: scale(1);
    }

    50% {
        opacity: .85;
        transform: scale(1.04);
    }
}

/* Painted spiral nebula — gaseous arms, open center */
.hero-portal-vortex {
    position: absolute;
    inset: -42%;
    z-index: 2;
    width: 184%;
    height: 184%;
    display: block;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .82;
    filter: blur(2.2px) contrast(1.1) saturate(1.08);
}

.hero-portal-vortex--b {
    inset: -48%;
    width: 196%;
    height: 196%;
    opacity: .64;
    filter: blur(3.4px) contrast(1.06) saturate(1.02);
}

html.fx .hero-portal-vortex {
    animation: portalSwirl 22s linear infinite;
}

html.fx .hero-portal-vortex--b {
    animation: portalSwirl 38s linear infinite reverse;
}

@keyframes portalSwirl {
    to {
        transform: rotate(360deg);
    }
}

.hero-door:hover .hero-portal-vortex,
.hero-door:focus-visible .hero-portal-vortex {
    animation-duration: 10s;
}

.hero-door:hover .hero-portal-vortex--b,
.hero-door:focus-visible .hero-portal-vortex--b {
    animation-duration: 16s;
}

.hero-door:hover .hero-portal-bloom,
.hero-door:focus-visible .hero-portal-bloom {
    opacity: .75;
}

/* Town window — feathered hole, no stroke. Closed until the iris opens. */
.hero-door-frame {
    position: absolute;
    inset: 22%;
    z-index: 3;
    overflow: hidden;
    border-radius: 50%;
    transform-origin: 50% 50%;
    -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 100%);
    mask-image: radial-gradient(circle, #000 58%, transparent 100%);
}

html.fx .hero-door-frame {
    transform: scale(0);
}

.hero.is-inside .hero-portal-bloom,
.hero.is-inside .hero-portal-vortex {
    opacity: 0;
    animation: none;
}

/* Window onto the same full-bleed town you arrive in — not a tiny crop */
.hero-door-art {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: 112vw;
    height: 112vh;
    height: 112svh;
    margin: -56vh 0 0 -56vw;
    margin: -56svh 0 0 -56vw;
    background-size: cover;
    background-position: center;
    transform-origin: 50% 50%;
    will-change: transform;
}

/* Soft violet lip where town meets the vortex */
.hero-door-glow {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%,
            transparent 28%,
            rgba(12, 6, 22, .12) 62%,
            rgba(6, 4, 14, .38) 100%);
    pointer-events: none;
}

/* Pass-through tunnel: rings rush past as you fly through the portal */
.hero-tunnel {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
}

.hero-tunnel-ring {
    position: absolute;
    width: 72vmin;
    height: 72vmin;
    border-radius: 50%;
    border: 2px dashed rgba(157, 127, 208, .55);
    opacity: 0;
}

.hero-tunnel-ring:nth-child(2) {
    border-color: rgba(203, 170, 102, .5);
}

.hero-tunnel-ring:nth-child(3) {
    border-color: rgba(157, 127, 208, .4);
}

.hero-tunnel-ring:nth-child(4) {
    border-color: rgba(233, 207, 148, .45);
}

html.fx .hero-tunnel-ring {
    animation: none;
}

.hero.is-through .hero-tunnel-ring {
    animation: tunnelZoom 2.3s linear infinite;
}

.hero.is-through .hero-tunnel-ring:nth-child(2) {
    animation-delay: -.58s;
}

.hero.is-through .hero-tunnel-ring:nth-child(3) {
    animation-delay: -1.15s;
}

.hero.is-through .hero-tunnel-ring:nth-child(4) {
    animation-delay: -1.72s;
}

@keyframes tunnelZoom {
    0% {
        transform: scale(.06);
        opacity: 0;
    }

    18% {
        opacity: .9;
    }

    100% {
        transform: scale(2.1);
        opacity: 0;
    }
}

/* White-gold flood at the moment of pass-through */
.hero-flash {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: radial-gradient(ellipse at 50% 45%,
            rgba(233, 221, 194, .92),
            rgba(157, 127, 208, .4) 55%,
            transparent 78%);
    opacity: 0;
    pointer-events: none;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(11, 9, 8, .55) 78%, rgba(11, 9, 8, .92) 100%),
        linear-gradient(180deg, rgba(11, 9, 8, .5), transparent 22%, transparent 70%, var(--void) 98%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--gutter);
    padding-top: 12vh;
    transform: translateZ(0);
}

/* Local veil so the wordmark/tagline stay readable over the portal.
   Sized to the copy, not the viewport — fades with .hero-content on scroll. */
.hero-content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: calc(50% + 6vh);
    width: 145%;
    height: 155%;
    min-width: 36rem;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
            rgba(11, 9, 8, .9) 0%,
            rgba(11, 9, 8, .62) 36%,
            rgba(11, 9, 8, .22) 62%,
            transparent 78%);
    pointer-events: none;
}

.hero-eyebrow {
    font-family: var(--font-label);
    font-size: .78rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--lantern-bright);
    margin-bottom: 1.2rem;
    text-shadow: 0 2px 12px rgba(11, 9, 8, .9);
}

.hero-logo {
    width: min(620px, 82vw);
    height: auto;
    filter: drop-shadow(0 10px 44px rgba(0, 0, 0, .85)) drop-shadow(0 0 26px rgba(201, 137, 60, .28));
}

.hero-logo-fallback {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, 11vw, 6.5rem);
    letter-spacing: .06em;
    color: var(--gold-bright);
    text-shadow: 0 10px 44px rgba(0, 0, 0, .85);
}

.hero-tagline {
    margin-top: 1.1rem;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-style: italic;
    color: var(--parchment);
    text-shadow: 0 2px 16px rgba(11, 9, 8, .95);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.2rem;
}

.scroll-cue {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    color: var(--parchment-dim);
    font-family: var(--font-label);
    font-size: .68rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    transition: color .3s;
}

.scroll-cue:hover {
    color: var(--gold-bright);
}

.scroll-cue-link {
    width: 30px;
    height: 19px;
    transform: rotate(90deg);
    animation: cueSwing 2.6s ease-in-out infinite;
}

@keyframes cueSwing {

    0%,
    100% {
        transform: rotate(90deg) translateX(0);
        opacity: .6;
    }

    50% {
        transform: rotate(90deg) translateX(6px);
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   Chain dividers
   -------------------------------------------------------------------------- */
.chain-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .3rem;
    padding: clamp(2rem, 5vh, 3.5rem) 0;
    color: rgba(203, 170, 102, .4);
}

.chain-divider .icon-link {
    width: 30px;
    height: 18px;
    transition: transform .8s var(--ease-snap), opacity .8s, color .8s;
}

.chain-divider.is-broken .is-break-left {
    transform: translateX(-26px) rotate(-38deg);
    opacity: .25;
    color: var(--rose-bright);
}

.chain-divider.is-broken .is-break-right {
    transform: translateX(26px) rotate(38deg);
    opacity: .25;
    color: var(--rose-bright);
}

/* --------------------------------------------------------------------------
   World / story
   -------------------------------------------------------------------------- */
.world {
    position: relative;
    padding: clamp(4rem, 10vh, 7rem) var(--gutter);
    overflow: clip;
}

.world-rings {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: .5;
}

.world-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(157, 127, 208, .22);
    animation: ringSpin 90s linear infinite;
}

.world-ring:nth-child(1) {
    width: 62vmin;
    height: 62vmin;
}

.world-ring:nth-child(2) {
    width: 96vmin;
    height: 96vmin;
    border-color: rgba(203, 170, 102, .14);
    animation-duration: 130s;
    animation-direction: reverse;
}

.world-ring:nth-child(3) {
    width: 132vmin;
    height: 132vmin;
    border-color: rgba(157, 127, 208, .12);
    animation-duration: 170s;
}

@keyframes ringSpin {
    to {
        transform: rotate(360deg);
    }
}

.world-grid {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.world-visual {
    position: sticky;
    top: 12vh;
    aspect-ratio: 4 / 5;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}

.world-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.12);
    transition: opacity .7s var(--ease-cinema), transform 1.1s var(--ease-cinema), clip-path .9s var(--ease-cinema);
    clip-path: inset(0 0 100% 0);
}

.world-img.is-active {
    opacity: 1;
    transform: scale(1);
    clip-path: inset(0 0 0 0);
}

.world-visual-frame {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(203, 170, 102, .4);
    border-radius: 4px;
    box-shadow: inset 0 0 60px rgba(11, 9, 8, .55);
    pointer-events: none;
}

.world-rail {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.world-tick {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    border: 1px solid rgba(203, 170, 102, .5);
    background: rgba(11, 9, 8, .6);
    transition: background-color .3s, box-shadow .3s;
}

.world-tick.is-active {
    background: var(--gold-bright);
    box-shadow: 0 0 10px rgba(233, 207, 148, .7);
}

.world-text {
    display: flex;
    flex-direction: column;
    gap: 42vh;
    padding: 16vh 0 22vh;
}

.world-beat {
    max-width: 34rem;
    opacity: .18;
    transform: translateY(24px);
    transition: opacity .5s var(--ease-cinema), transform .5s var(--ease-cinema);
}

.world-beat.is-active {
    opacity: 1;
    transform: none;
}

.world-beat h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.05;
    color: var(--gold-bright);
    margin-bottom: 1.1rem;
}

.world-beat p {
    color: var(--parchment-dim);
    font-size: 1.22rem;
}

/* --------------------------------------------------------------------------
   The Fallen — tarot deck
   -------------------------------------------------------------------------- */
.fallen {
    position: relative;
    padding: clamp(4rem, 10vh, 7rem) 0;
    transition: background-color 1s var(--ease-cinema);
}

.fallen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 55% at 50% 42%, var(--char-tint, transparent), transparent 70%);
    opacity: .16;
    transition: opacity .6s;
    pointer-events: none;
}

.deck {
    position: relative;
    max-width: min(100%, calc(var(--container) * 1.5625));
    width: 100%;
    margin: 0 auto;
    padding-inline: clamp(.4rem, 1.1vw, .85rem);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.75rem, 1.8vw, 1.35rem);
    perspective: 1600px;
}

.tarot {
    position: relative;
    aspect-ratio: 3 / 4.5;
    outline-offset: 6px;
    --char-color: var(--gold);
    container-type: inline-size;
    container-name: tarot;
}

.tarot[data-char="wukong"] {
    --char-color: var(--gold-bright);
    --char-tint: rgba(203, 170, 102, .55);
}

.tarot[data-char="dracula"] {
    --char-color: var(--rose-bright);
    --char-tint: rgba(124, 38, 53, .8);
}

.tarot[data-char="alice"] {
    --char-color: var(--violet-light);
    --char-tint: rgba(91, 63, 122, .8);
}

.tarot[data-char="red"] {
    --char-color: #d2544a;
    --char-tint: rgba(124, 38, 53, .65);
}

.tarot-inner {
    position: absolute;
    inset: 0;
    --rx: 0deg;
    --ry: 0deg;
    --flip: 0deg;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip)));
    transition: box-shadow .4s;
    will-change: transform;
}

html.no-gsap .tarot-inner {
    transition: transform .8s var(--ease-cinema);
}

/* GSAP owns --flip when fx is on; the class only drives the fallback path */
html:not(.fx) .tarot.is-flipped .tarot-inner {
    --flip: 180deg;
}

.tarot-face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--ink);
    border: 1px solid rgba(203, 170, 102, .35);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .85);
}

.tarot-back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(.5rem, 3.2cqi, 1.05rem);
    padding: clamp(1.15rem, 7cqi, 2.15rem) clamp(1.05rem, 6.2cqi, 1.85rem);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(91, 63, 122, .25), transparent 60%),
        linear-gradient(180deg, var(--ink-2), var(--ink));
}

.tarot-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    transform: scale(1.02);
    transition: transform .7s var(--ease-cinema);
}

.tarot:hover .tarot-art,
.tarot:focus-visible .tarot-art {
    transform: scale(1.09);
}

.tarot-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 9, 8, .1) 40%, rgba(11, 9, 8, .88) 88%);
}

.tarot-frame {
    position: absolute;
    inset: clamp(8px, 3.2cqi, 14px);
    border: 1px solid rgba(233, 207, 148, .35);
    border-radius: 6px;
    pointer-events: none;
}

.tarot-numeral {
    position: absolute;
    top: clamp(.7rem, 4.2cqi, 1.15rem);
    left: clamp(.85rem, 4.6cqi, 1.25rem);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 7.2cqi, 2rem);
    color: var(--gold-bright);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

.tarot-front-content {
    position: absolute;
    left: clamp(.95rem, 5cqi, 1.45rem);
    right: clamp(.95rem, 5cqi, 1.45rem);
    bottom: clamp(.9rem, 4.6cqi, 1.35rem);
}

.tarot-front-content h3,
.tarot-back h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 9.4cqi, 2.45rem);
    line-height: 1;
    color: var(--parchment);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.tarot-epithet {
    margin-top: clamp(.25rem, 1.4cqi, .45rem);
    font-family: var(--font-label);
    font-size: clamp(.62rem, 3.4cqi, .88rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--char-color);
}

.tarot-bio {
    font-size: clamp(1rem, 5.2cqi, 1.32rem);
    line-height: 1.55;
    color: var(--parchment-dim);
}

.tarot-hint {
    position: absolute;
    right: clamp(.75rem, 4.2cqi, 1.15rem);
    bottom: clamp(.75rem, 4.2cqi, 1.15rem);
    font-family: var(--font-label);
    font-size: clamp(.52rem, 2.7cqi, .7rem);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(233, 221, 194, .45);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s, transform .3s var(--ease-cinema);
}

.tarot-back .tarot-hint {
    position: static;
    opacity: 1;
    transform: none;
    color: rgba(184, 171, 141, .5);
    margin-top: .4rem;
}

.tarot:hover .tarot-front .tarot-hint,
.tarot:focus-visible .tarot-front .tarot-hint {
    opacity: 1;
    transform: none;
}

.tarot-shine {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(233, 221, 194, .22),
            transparent 42%);
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
    mix-blend-mode: screen;
}

.tarot:hover .tarot-shine,
.tarot:focus-visible .tarot-shine {
    opacity: 1;
}

.tarot.is-flipped {
    z-index: 5;
}

.fallen-footnote {
    margin-top: clamp(2rem, 5vh, 3.5rem);
    padding-inline: var(--gutter);
    text-align: center;
    font-family: var(--font-label);
    font-size: .78rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(184, 171, 141, .55);
}

/* --------------------------------------------------------------------------
   Trials — board-game path
   -------------------------------------------------------------------------- */
.trials {
    position: relative;
    padding: clamp(4rem, 10vh, 7rem) var(--gutter);
}

.trials-board {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
}

.board-path {
    position: absolute;
    inset: -40px -20px;
    width: calc(100% + 40px);
    height: calc(100% + 80px);
    pointer-events: none;
    overflow: visible;
}

.board-path-line {
    stroke: rgba(203, 170, 102, .5);
    stroke-width: 2;
    stroke-dasharray: 6 10;
}

/* Bright tail riding the draw-head of the path */
.board-path-comet {
    stroke: var(--gold-bright);
    stroke-width: 3.5;
    stroke-linecap: round;
    opacity: .9;
    filter: drop-shadow(0 0 6px rgba(233, 207, 148, .9));
}

.board-space {
    fill: var(--ink);
    stroke: rgba(203, 170, 102, .5);
    stroke-width: 1.5;
    transition: fill .4s, stroke .4s, filter .4s;
}

.board-space.is-lit {
    fill: var(--gold);
    stroke: var(--gold-bright);
    filter: drop-shadow(0 0 8px rgba(233, 207, 148, .8));
}

.board-pawn-glow {
    fill: rgba(231, 171, 92, .3);
    animation: pawnPulse 1.6s ease-in-out infinite;
}

@keyframes pawnPulse {

    0%,
    100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }
}

.board-pawn-core {
    fill: var(--gold-bright);
}

/* Spark burst when a space ignites (JS-spawned) */
.board-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 8px 2px rgba(231, 171, 92, .7);
    pointer-events: none;
    z-index: 3;
}

/* Dice: heading pair + one per trial card */
.heading-die,
.trial-die {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 7px;
    background: linear-gradient(160deg, #efe3c8, #d3bf92);
    border: 2px solid #a5823f;
    border-radius: 8px;
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(60, 42, 18, .25);
    will-change: transform;
}

.heading-die .pip,
.trial-die .pip {
    width: 62%;
    height: 62%;
    place-self: center;
    border-radius: 50%;
    background: #3a2c16;
}

.trial-die {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 38px;
    height: 38px;
    z-index: 2;
}

.heading-die {
    position: absolute;
    top: 12%;
    width: 46px;
    height: 46px;
}

.heading-die-left {
    left: 6%;
    transform: rotate(-14deg);
}

.heading-die-right {
    right: 6%;
    transform: rotate(11deg);
}

/* Dice stay hidden until rolled in fx mode; never shown without GSAP */
html.fx .trial-die,
html.fx .heading-die {
    opacity: 0;
}

html.no-gsap .trial-die,
html.no-gsap .heading-die {
    display: none;
}

.trials .section-heading {
    position: relative;
}

/* Gold border-sweep when a trial card ignites */
.trial-card-inner {
    position: relative;
    overflow: hidden;
}

.trial-card-inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--trial-color);
    opacity: .9;
    pointer-events: none;
}

.trial-card-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--trial-bright) 50%, transparent) 50%, transparent 65%);
    transform: translateX(-130%);
    pointer-events: none;
}

.trial-card.is-lit .trial-card-inner::after {
    animation: cardSweep 1s var(--ease-cinema) .1s;
}

@keyframes cardSweep {
    from {
        transform: translateX(-130%);
    }

    to {
        transform: translateX(130%);
    }
}

.trial-grid {
    position: relative;
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 1.8rem);
}

.trial-card:nth-child(odd) {
    transform: translateY(46px);
}

.trial-card {
    --trial-color: var(--gold);
    --trial-bright: var(--gold-bright);
    --trial-tint: rgba(203, 170, 102, .16);
    --trial-glow: rgba(201, 137, 60, .35);
}

.trial-card[data-trial="0"] {
    --trial-color: #d8b56a;
    --trial-bright: #f3dc96;
    --trial-tint: rgba(216, 181, 106, .2);
    --trial-glow: rgba(216, 181, 106, .4);
}

.trial-card[data-trial="1"] {
    --trial-color: #e24b5e;
    --trial-bright: #ff8a97;
    --trial-tint: rgba(180, 28, 52, .38);
    --trial-glow: rgba(226, 75, 94, .45);
}

.trial-card[data-trial="2"] {
    --trial-color: var(--violet-light);
    --trial-bright: #c4b0ef;
    --trial-tint: rgba(91, 63, 122, .3);
    --trial-glow: rgba(157, 127, 208, .4);
}

.trial-card[data-trial="3"] {
    --trial-color: #3e9a8c;
    --trial-bright: #8ed9c8;
    --trial-tint: rgba(40, 110, 100, .34);
    --trial-glow: rgba(142, 217, 200, .4);
}

.trial-card-inner {
    height: 100%;
    padding: 1.7rem 1.5rem 1.9rem;
    background:
        radial-gradient(ellipse 90% 55% at 50% -10%, var(--trial-tint), transparent 68%),
        linear-gradient(180deg, rgba(32, 26, 20, .92), rgba(23, 19, 15, .96));
    border: 1px solid color-mix(in srgb, var(--trial-color) 42%, transparent);
    border-radius: 6px;
    transition: border-color .35s, box-shadow .35s;
    transform-style: preserve-3d;
    will-change: transform;
}

.trial-card:hover .trial-card-inner,
.trial-card:focus-within .trial-card-inner,
.trial-card.is-lit .trial-card-inner {
    border-color: color-mix(in srgb, var(--trial-bright) 75%, transparent);
    box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .9), 0 0 40px -12px var(--trial-glow);
}

.trial-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.trial-index {
    font-family: var(--font-label);
    font-size: .66rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--trial-bright);
}

.trial-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--trial-color) 55%, transparent);
    border-radius: 50%;
    background: rgba(11, 9, 8, .5);
    transition: transform .5s var(--ease-snap), box-shadow .35s;
}

.trial-card:hover .trial-icon {
    transform: rotate(-10deg) scale(1.12);
    box-shadow: 0 0 18px -4px var(--trial-glow);
}

.trial-icon img {
    width: 20px;
    height: 20px;
}

.trial-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.55rem;
    line-height: 1.1;
    color: var(--trial-bright);
    margin-bottom: .4rem;
}

.trial-epithet {
    font-family: var(--font-label);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--trial-color);
    margin-bottom: .9rem;
}

.trial-card p:not(.trial-epithet) {
    font-size: 1.02rem;
    color: var(--parchment-dim);
}

/* --------------------------------------------------------------------------
   Playtest — she is watching
   -------------------------------------------------------------------------- */
.playtest {
    position: relative;
    padding: clamp(6rem, 16vh, 11rem) var(--gutter);
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 50% at 50% 30%, rgba(37, 26, 53, .85), transparent 75%);
}

/* Her presence fills the room: giant faint eyes behind everything */
.playtest-presence {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 14vmin;
    padding-top: 6vh;
    opacity: .09;
    pointer-events: none;
    will-change: transform;
}

.presence-eye {
    width: 32vmin;
    height: 13vmin;
    border-radius: 50%;
    clip-path: polygon(0% 50%, 6% 28%, 14% 12%, 28% 3%, 50% 0%, 72% 3%, 86% 12%, 94% 28%, 100% 50%, 94% 72%, 86% 88%, 72% 97%, 50% 100%, 28% 97%, 14% 88%, 6% 72%);
    background:
        radial-gradient(ellipse 14% 72% at 50% 50%, transparent 38%, rgba(20, 10, 32, .45) 100%),
        radial-gradient(ellipse at 50% 38%, #f3eaff 0%, #d4c0f5 20%, #b08ae0 42%, #7a58b0 68%, #3a2460 100%);
    display: grid;
    place-items: center;
    box-shadow: 0 0 28px 2px rgba(157, 127, 208, .4);
    overflow: hidden;
}

.presence-eye i {
    width: 2.2vmin;
    height: 9vmin;
    border-radius: 40%;
    background: #050308;
    box-shadow: 0 0 1.2vmin rgba(5, 3, 8, .85);
    transition: transform .25s ease-out;
}

/* Lights-out: the section blinks dark, and her eyes come forward */
.playtest-dark {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: #050308;
    opacity: 0;
    transition: opacity .16s;
    pointer-events: none;
}

.playtest.lights-out .playtest-dark {
    opacity: .93;
}

.playtest.lights-out .playtest-presence {
    z-index: 11;
    opacity: .4;
}

.playtest.lights-out .watcher .eye {
    box-shadow: 0 0 34px rgba(157, 127, 208, .95);
}

.watcher {
    position: relative;
    z-index: 11;
    width: 190px;
    margin: 0 auto 2.5rem;
    color: var(--violet-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Proximity-driven grin needs snappier transitions than the linger class */
.watcher.proximity .grin {
    transition: opacity .35s, transform .35s var(--ease-cinema);
}

.watcher .eyes {
    display: flex;
    gap: 22px;
}

.watcher .eye {
    width: 42px;
    height: 17px;
    border-radius: 50%;
    clip-path: polygon(0% 50%, 6% 28%, 14% 12%, 28% 3%, 50% 0%, 72% 3%, 86% 12%, 94% 28%, 100% 50%, 94% 72%, 86% 88%, 72% 97%, 50% 100%, 28% 97%, 14% 88%, 6% 72%);
    background:
        radial-gradient(ellipse 18% 70% at 50% 50%, transparent 42%, rgba(42, 24, 64, .28) 100%),
        radial-gradient(ellipse at 50% 38%, #f3eaff 0%, #d4c0f5 20%, #b08ae0 42%, #7a58b0 68%, #3a2460 100%);
    display: grid;
    place-items: center;
    box-shadow: 0 0 22px 6px rgba(157, 127, 208, .45);
    transition: transform .13s ease;
    overflow: hidden;
}

.watcher .eye i {
    width: 3px;
    height: 12px;
    border-radius: 40%;
    background: linear-gradient(180deg, #1a0c28 0%, #050308 52%, #0a0610 100%);
    transition: transform .18s ease-out;
}

.watcher.blink .eye {
    transform: scaleY(.08);
}

.watcher .grin {
    width: 120px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 1.4s, transform 1.4s var(--ease-cinema);
    filter: drop-shadow(0 0 10px rgba(157, 127, 208, .5));
}

.watcher.grin-on .grin {
    opacity: .9;
    transform: none;
}

.playtest-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
}

/* Title letters that briefly turn into suit symbols */
.playtest-title .char.is-suit {
    color: var(--violet-light);
    text-shadow: 0 0 18px rgba(157, 127, 208, .8);
}

.playtest-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    line-height: 1.02;
    color: var(--parchment);
    text-wrap: balance;
    margin-bottom: 1.4rem;
}

.playtest-title .char {
    text-shadow: 0 0 26px rgba(157, 127, 208, .35);
}

.playtest-inner > p {
    color: var(--parchment-dim);
    font-size: 1.25rem;
    max-width: 34rem;
    margin: 0 auto;
}

.playtest-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.4rem;
}

.playtest .btn-gold {
    animation: ctaPulse 2.8s ease-in-out infinite;
}

@keyframes ctaPulse {

    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(233, 207, 148, .4), 0 10px 30px -12px rgba(201, 137, 60, .55);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(233, 207, 148, .8), 0 10px 46px -8px rgba(201, 137, 60, .95);
    }
}

/* --------------------------------------------------------------------------
   Studio
   -------------------------------------------------------------------------- */
.studio {
    padding: clamp(4rem, 10vh, 7rem) var(--gutter);
}

.studio-inner {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(2rem, 6vw, 4.5rem);
    align-items: center;
}

.studio-media {
    position: relative;
    padding: 2.2rem;
    display: grid;
    place-items: center;
}

/* The logo mounted on a square brass plate */
.studio-plate {
    position: relative;
    aspect-ratio: 1;
    width: min(300px, 68vw);
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #241c12, #17130f 65%);
    border: 1px solid rgba(203, 170, 102, .55);
    border-radius: 6px;
    box-shadow:
        0 0 0 5px rgba(11, 9, 8, .6),
        inset 0 0 0 1px rgba(203, 170, 102, .22),
        inset 0 0 46px rgba(0, 0, 0, .65),
        0 30px 70px -28px rgba(0, 0, 0, .9);
    transform-style: preserve-3d;
    will-change: transform;
}

/* Engraved inner frame */
.studio-plate::before {
    content: "";
    position: absolute;
    inset: 13px;
    border: 1px solid rgba(203, 170, 102, .3);
    border-radius: 3px;
    pointer-events: none;
}

/* Firelight glow, ignited by the match-strike (JS adds .is-lit) */
.studio-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: radial-gradient(ellipse at 50% 115%, rgba(201, 137, 60, .34), rgba(201, 137, 60, .08) 55%, transparent 75%);
    opacity: 0;
    transition: opacity .8s;
    pointer-events: none;
}

html:not(.fx) .studio-plate::after {
    opacity: .45;
}

html.fx .studio-plate.is-lit::after {
    animation: firelight 3.4s ease-in-out infinite;
}

@keyframes firelight {

    0%,
    100% {
        opacity: .4;
    }

    22% {
        opacity: .68;
    }

    41% {
        opacity: .5;
    }

    63% {
        opacity: .78;
    }

    84% {
        opacity: .46;
    }
}

.plate-rivet {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--gold-bright), #6b4f24 75%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.plate-rivet:nth-of-type(1) {
    left: 7px;
    top: 7px;
}

.plate-rivet:nth-of-type(2) {
    right: 7px;
    top: 7px;
}

.plate-rivet:nth-of-type(3) {
    left: 7px;
    bottom: 7px;
}

.plate-rivet:nth-of-type(4) {
    right: 7px;
    bottom: 7px;
}

.studio-plate img {
    width: 62%;
    height: 62%;
    object-fit: contain;
    filter: drop-shadow(0 12px 34px rgba(0, 0, 0, .7));
}

/* The match spark that strikes the plate alight */
.studio-spark {
    position: absolute;
    left: 82%;
    top: 78%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff7e0;
    box-shadow: 0 0 14px 5px rgba(233, 207, 148, .95);
    opacity: 0;
    pointer-events: none;
}

/* Embers from the strike (JS-spawned) */
.studio-ember {
    position: absolute;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--lantern-bright);
    box-shadow: 0 0 8px 2px rgba(231, 171, 92, .7);
    pointer-events: none;
    z-index: 3;
}

.studio-logo-fallback {
    font-family: var(--font-display);
    color: var(--gold-bright);
    letter-spacing: .1em;
}

.studio-copy h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4.4vw, 3rem);
    color: var(--gold-bright);
    margin-bottom: 1rem;
}

.studio-copy p {
    color: var(--parchment-dim);
    font-size: 1.18rem;
}

/* --------------------------------------------------------------------------
   Home news — "The Labyrinth Dispatch" (conditional)
   -------------------------------------------------------------------------- */
.home-news {
    position: relative;
    padding: clamp(4rem, 10vh, 7rem) var(--gutter);
    overflow: hidden;
    background:
        radial-gradient(ellipse 50% 55% at 18% 30%, rgba(37, 26, 53, .55), transparent 70%),
        radial-gradient(ellipse 45% 50% at 85% 75%, rgba(201, 137, 60, .08), transparent 70%);
}

/* Giant slow-turning postmark watermark behind the dispatch */
.home-news::before {
    content: "";
    position: absolute;
    right: -16vmin;
    top: 50%;
    width: 74vmin;
    height: 74vmin;
    border: 2px dashed rgba(203, 170, 102, .09);
    border-radius: 50%;
    box-shadow: inset 0 0 0 14px rgba(203, 170, 102, .03);
    transform: translateY(-50%);
    animation: newsRingSpin 140s linear infinite;
    pointer-events: none;
}

@keyframes newsRingSpin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Falling pages torn from the ledger */
.news-scraps {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.news-scraps span {
    position: absolute;
    top: -6%;
    width: var(--s, 14px);
    height: calc(var(--s, 14px) * 1.35);
    background: linear-gradient(160deg, rgba(233, 221, 194, .14), rgba(184, 171, 141, .05));
    border: 1px solid rgba(233, 221, 194, .07);
    border-radius: 1px;
    opacity: 0;
    animation: scrapFall linear infinite;
}

@keyframes scrapFall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: .55;
    }

    85% {
        opacity: .3;
    }

    100% {
        transform: translateY(115vh) translateX(var(--drift, 30px)) rotate(var(--spin, 240deg));
        opacity: 0;
    }
}

.home-news-inner {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* Sealed shut with wax — overlaps the card's corner from outside */
.news-seal {
    position: absolute;
    top: -22px;
    right: 22px;
    z-index: 6;
    width: 86px;
    height: 86px;
    border-radius: 48% 52% 51% 49% / 54% 47% 53% 46%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .26), transparent 44%),
        radial-gradient(circle at 50% 54%, var(--rose-bright), var(--rose) 56%, #4e1620 80%);
    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, .16),
        inset 0 -7px 14px rgba(0, 0, 0, .5),
        0 12px 26px -8px rgba(0, 0, 0, .85);
    transform: rotate(-8deg);
    transition: filter .35s;
    pointer-events: none;
}

.news-seal::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    border: 2px solid rgba(0, 0, 0, .26);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .2),
        0 1px 2px rgba(0, 0, 0, .3);
}

.news-seal-rabbit {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 54%;
    height: auto;
    transform: translate(-50%, -50%);
    fill: #220a0e;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, .16))
        drop-shadow(0 -1px 1px rgba(0, 0, 0, .55));
    pointer-events: none;
}

.news-card:hover .news-seal,
.news-card:focus-visible .news-seal {
    filter: brightness(1.14);
}

/* Wax dust kicked up by the stamp (JS-spawned) */
.news-dust {
    position: absolute;
    z-index: 7;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rose-bright);
    box-shadow: 0 0 7px 1px rgba(168, 57, 76, .55);
    pointer-events: none;
}

.news-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto;
    align-items: stretch;
    min-height: 0;
    background:
        radial-gradient(ellipse 85% 90% at 72% 18%, rgba(201, 137, 60, .07), transparent 62%),
        linear-gradient(160deg, var(--ink-2), var(--ink) 58%);
    border: 1px solid rgba(203, 170, 102, .28);
    border-radius: 6px;
    overflow: hidden;
    color: var(--parchment);
    transition: border-color .35s, box-shadow .35s;
    will-change: transform;
}

/* Stitched letter edge */
.news-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 2;
    border: 1px dashed rgba(203, 170, 102, .2);
    border-radius: 3px;
    pointer-events: none;
}

.news-card:hover,
.news-card:focus-visible {
    border-color: rgba(233, 207, 148, .6);
    box-shadow:
        0 30px 70px -26px rgba(0, 0, 0, .95),
        0 0 46px -12px rgba(201, 137, 60, .28);
}

/* Candle-light shine tracking the cursor */
.news-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 40%), rgba(233, 207, 148, .13), transparent 66%);
    opacity: 0;
    transition: opacity .45s;
    pointer-events: none;
}

.news-card:hover .news-shine,
.news-card:focus-visible .news-shine {
    opacity: 1;
}

.news-card--text {
    grid-template-columns: 1fr;
    min-height: 300px;
}

.news-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ink-2);
}

.news-card-media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.news-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(.82) contrast(1.03);
    transition: transform 5s var(--ease-cinema), filter .6s;
}

.news-card:hover .news-card-media img,
.news-card:focus-visible .news-card-media img {
    transform: scale(1.07);
    filter: saturate(1.05) contrast(1.03);
}

.news-card-body {
    position: relative;
    z-index: 1;
    align-self: stretch;
    padding: 4.2rem 2.4rem 6.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Cancellation stamp — on the letter body, out of document flow */
.news-postmark {
    position: absolute;
    z-index: 4;
    top: auto;
    bottom: 12px;
    left: auto;
    right: 12px;
    width: 88px;
    height: 88px;
    margin: 0;
    transform: rotate(-8deg);
    transform-origin: 50% 50%;
    pointer-events: none;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .65));
}

.news-postmark::before {
    content: "";
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 9, 8, .55), transparent 72%);
}

.news-postmark-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.news-postmark-circle {
    fill: none;
    stroke: rgba(231, 171, 92, .5);
    stroke-width: 2;
    stroke-dasharray: 5 3;
}

.news-postmark-circle--inner {
    stroke-width: 1.4;
    stroke-dasharray: 2 3;
    opacity: .7;
}

.news-postmark-text {
    font-family: var(--font-label);
    font-size: 11.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    fill: rgba(231, 171, 92, .62);
}

.news-date {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    text-align: center;
    font-family: var(--font-label);
    font-size: .62rem;
    line-height: 1.35;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lantern-bright);
}

.news-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--gold-bright);
}

.news-card-excerpt {
    color: var(--parchment-dim);
    font-size: 1.05rem;
}

.news-card-link {
    position: relative;
    align-self: flex-start;
    margin-top: auto;
    padding-top: .4rem;
    font-family: var(--font-label);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.news-card-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: var(--gold-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease-cinema);
}

.news-card-link span {
    display: inline-block;
    transition: transform .35s var(--ease-cinema);
}

.news-card:hover .news-card-link::after,
.news-card:focus-visible .news-card-link::after {
    transform: scaleX(1);
}

.news-card:hover .news-card-link span,
.news-card:focus-visible .news-card-link span {
    transform: translateX(5px);
}

.home-news-actions {
    margin-top: 1.6rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Wishlist
   -------------------------------------------------------------------------- */
.wishlist {
    position: relative;
    padding: clamp(5rem, 14vh, 9rem) var(--gutter);
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 60% at 24% 50%, rgba(37, 26, 53, .8), transparent 70%),
        radial-gradient(ellipse 45% 55% at 82% 40%, rgba(201, 137, 60, .12), transparent 70%);
}

.wishlist-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wishlist-inner {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

/* Giant slow-turning seal behind the finale */
.wishlist-seal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 118vmin;
    height: 118vmin;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(203, 170, 102, .22);
    opacity: .5;
    pointer-events: none;
}

.wishlist-seal::before {
    content: "";
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    border: 1px solid rgba(157, 127, 208, .16);
}

.wishlist-seal::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 62%, transparent 63%),
        repeating-conic-gradient(rgba(203, 170, 102, .16) 0deg 2deg, transparent 2deg 24deg);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%, #000 66%, transparent 67%);
    mask: radial-gradient(circle, transparent 58%, #000 59%, #000 66%, transparent 67%);
}

html.fx .wishlist-seal {
    animation: sealSpin 150s linear infinite;
}

@keyframes sealSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.wishlist-inner {
    z-index: 1;
}

.wishlist-capsule-wrap {
    position: relative;
    max-width: 330px;
    transform-style: preserve-3d;
    will-change: transform;
}

.wishlist-capsule {
    border-radius: 6px;
    border: 1px solid rgba(203, 170, 102, .4);
    box-shadow: 0 34px 80px -26px rgba(0, 0, 0, .95);
}

html.fx .wishlist-capsule {
    animation: capsuleFloat 6.5s ease-in-out infinite;
}

@keyframes capsuleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* Holo shine tracking the cursor */
.wishlist-capsule-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(157, 127, 208, .28),
            rgba(233, 207, 148, .16) 32%,
            transparent 58%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}

.wishlist-capsule-wrap:hover::after {
    opacity: 1;
}

/* Ticket-stub CTA */
.ticket {
    gap: 0;
    padding: 0;
    align-items: stretch;
}

.ticket-main {
    display: inline-flex;
    align-items: center;
    padding: 1.05rem 1.5rem 1.05rem 2rem;
}

.ticket-stub {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    border-left: 2px dashed rgba(36, 26, 8, .55);
    writing-mode: vertical-rl;
    font-size: .62rem;
    letter-spacing: .32em;
    color: rgba(36, 26, 8, .75);
    background: rgba(36, 26, 8, .08);
    transition: transform .35s var(--ease-snap);
}

.ticket:hover .ticket-stub,
.ticket:focus-visible .ticket-stub {
    transform: rotate(4deg) translateY(2px);
}

.wishlist-capsule-glow {
    position: absolute;
    inset: -12%;
    background: radial-gradient(ellipse at 50% 60%, rgba(201, 137, 60, .3), transparent 65%);
    filter: blur(10px);
    z-index: -1;
}

.wishlist-copy h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.3rem, 5vw, 3.8rem);
    line-height: 1.02;
    color: var(--gold-bright);
    margin-bottom: .8rem;
}

.wishlist-copy > p {
    font-style: italic;
    font-size: 1.3rem;
    color: var(--parchment-dim);
    margin-bottom: 1.8rem;
}

.social-row {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2rem;
}

/* Socials as poker chips: dashed rim, 3D coin-flip on hover */
.social-row a {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: none;
    color: var(--parchment-dim);
    background:
        radial-gradient(circle, var(--ink-2) 56%, transparent 57%),
        repeating-conic-gradient(rgba(203, 170, 102, .85) 0deg 14deg, rgba(23, 19, 15, .95) 14deg 60deg);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(203, 170, 102, .35);
    transition: color .25s, box-shadow .25s;
    will-change: transform;
}

.social-row a:hover,
.social-row a:focus-visible {
    color: var(--gold-bright);
    box-shadow: 0 10px 26px -8px rgba(201, 137, 60, .65), inset 0 0 0 1px rgba(233, 207, 148, .7);
    animation: chipFlip .7s var(--ease-cinema);
}

@keyframes chipFlip {
    from {
        transform: rotateY(0);
    }

    to {
        transform: rotateY(360deg);
    }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid rgba(203, 170, 102, .16);
    padding: 3.5rem var(--gutter) 2.5rem;
    background: #080605;
}

.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    text-align: center;
}

.footer-logo img {
    height: 26px;
    width: auto;
    opacity: .85;
}

.footer-logo-fallback {
    font-family: var(--font-display);
    letter-spacing: .1em;
    color: var(--gold-bright);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem 1.6rem;
}

.footer-links a {
    font-family: var(--font-label);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--parchment-dim);
    transition: color .25s;
}

.footer-links a:hover {
    color: var(--gold-bright);
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
}

.footer-social a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(203, 170, 102, .22);
    border-radius: 50%;
    color: var(--parchment-dim);
    transition: color .25s, border-color .25s, transform .25s var(--ease-snap);
}

.footer-social a:hover {
    color: var(--gold-bright);
    border-color: var(--gold-bright);
    transform: translateY(-3px);
}

/* Easter egg: tiny door */
.tiny-door {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    opacity: .55;
    transition: opacity .35s;
}

.tiny-door:hover,
.tiny-door:focus-visible {
    opacity: 1;
}

.tiny-door svg {
    width: 30px;
    height: 42px;
}

.tiny-door-glow {
    fill: rgba(157, 127, 208, .0);
    transition: fill .4s;
}

.tiny-door:hover .tiny-door-glow,
.tiny-door:focus-visible .tiny-door-glow {
    fill: rgba(157, 127, 208, .3);
}

.tiny-door-body {
    fill: var(--ink-2);
    stroke: rgba(203, 170, 102, .5);
    stroke-width: 1.4;
    transition: fill .4s, stroke .4s;
}

.tiny-door:hover .tiny-door-body,
.tiny-door:focus-visible .tiny-door-body {
    fill: var(--violet-deep);
    stroke: var(--violet-light);
}

.tiny-door-knob {
    fill: var(--gold);
}

.tiny-door span {
    font-family: var(--font-label);
    font-size: .58rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(184, 171, 141, .6);
}

.footer-meta {
    font-family: var(--font-label);
    font-size: .68rem;
    letter-spacing: .14em;
    color: rgba(184, 171, 141, .5);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* --------------------------------------------------------------------------
   Rabbit easter egg + hole overlay
   -------------------------------------------------------------------------- */
.rabbit {
    position: fixed;
    left: 0;
    bottom: 6vh;
    z-index: 850;
    width: 64px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    filter: drop-shadow(0 0 10px rgba(233, 221, 194, .45));
    transition: opacity .3s;
    will-change: transform;
}

.rabbit.is-out {
    opacity: 1;
    visibility: visible;
}

.rabbit svg {
    display: block;
    width: 100%;
    height: auto;
}

.rabbit-body > * {
    fill: #efe9dc;
}

.rabbit:hover svg,
.rabbit:focus-visible svg {
    filter: drop-shadow(0 0 8px rgba(157, 127, 208, .9));
}

.hole-overlay {
    position: fixed;
    inset: 0;
    z-index: 1150;
    pointer-events: none;
    visibility: hidden;
}

.hole-overlay.is-open {
    visibility: visible;
}

.hole-iris {
    position: absolute;
    left: var(--hx, 50%);
    top: var(--hy, 50%);
    width: 140vmax;
    height: 140vmax;
    margin: -70vmax 0 0 -70vmax;
    border-radius: 50%;
    background: radial-gradient(circle, #000 58%, rgba(37, 26, 53, .9) 72%, rgba(157, 127, 208, .5) 82%, transparent 84%);
    transform: scale(0);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   FX initial states (only when GSAP will animate them in)
   -------------------------------------------------------------------------- */
html.fx .hero-content > * {
    opacity: 0;
}

html.fx .trial-card-inner,
html.fx .studio-inner,
html.fx .wishlist-inner > *,
html.fx .home-news-inner,
html.fx .playtest-inner > * {
    opacity: 0;
    transform: translateY(40px);
}

html.fx .tarot {
    opacity: 0;
}

html.fx .watcher {
    opacity: 0;
    transform: translateY(30px);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .deck {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: min(100%, 1000px);
    }

    .trial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
        margin: 0 auto;
    }

    .trial-card:nth-child(odd) {
        transform: none;
    }

    .board-path {
        display: none;
    }
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-cta {
        display: none;
    }

    .world-grid {
        grid-template-columns: 1fr;
    }

    .world-visual {
        position: relative;
        top: 0;
        max-width: 420px;
        margin: 0 auto;
    }

    .world-text {
        gap: 12vh;
        padding: 8vh 0 6vh;
    }

    .studio-inner,
    .wishlist-inner,
    .news-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .news-card-media {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .news-card-body {
        padding: 1.6rem 1.6rem 5.6rem;
    }

    .news-postmark {
        width: 76px;
        height: 76px;
        top: auto;
        bottom: 10px;
        left: auto;
        right: 10px;
    }

    .news-seal {
        width: 68px;
        height: 68px;
        top: -16px;
        right: 12px;
    }

    .news-seal-rabbit {
        width: 56%;
    }

    .wishlist-capsule-wrap {
        margin: 0 auto;
    }

    .wishlist-copy {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .social-row {
        justify-content: center;
        max-width: calc(4 * 44px + 3 * .8rem);
        margin-inline: auto;
    }

    .hero-door {
        width: clamp(240px, 58vw, 340px);
    }

    .hero-content::before {
        width: 160%;
        min-width: 0;
    }

    .heading-die {
        display: none;
    }
}

@media (max-width: 620px) {
    body {
        font-size: 1.05rem;
    }

    .deck {
        grid-template-columns: 1fr;
        max-width: min(94vw, 500px);
    }

    .trial-grid {
        grid-template-columns: 1fr;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 320px;
    }

    .sound-toggle {
        display: none;
    }
}

/* Touch: don't promote the full-bleed town layer. */
html.touch .hero-door-art {
    will-change: auto;
}

@media (hover: none) {
    .hero-logo {
        filter: none;
    }

    .hero-door-art {
        will-change: auto;
    }

    .hero-content::before {
        width: 120%;
        height: 120%;
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .scroll-cue-link,
    .loader-skip,
    .playtest .btn-gold,
    .world-ring,
    .hero-embers span,
    .wishlist-embers span,
    .hero-nebula-cloud,
    .hero-portal-bloom,
    .hero-portal-vortex,
    .news-scraps span,
    .home-news::before,
    .board-pawn-glow,
    .trial-card.is-lit .trial-card-inner::after,
    .social-row a,
    .social-row a:hover,
    .social-row a:focus-visible {
        animation: none !important;
    }

    .world-img,
    .world-beat,
    .tarot-art,
    .chain-divider .icon-link,
    .hero-portal-bloom,
    .news-card-media img,
    .ticket-stub {
        transition-duration: .01s !important;
    }

    .hero-embers,
    .wishlist-embers,
    .news-scraps {
        display: none;
    }
}