/**
 * Wearwolf: Untold — magic.css
 * "Magical werewolf" overlay layer. Loaded after site.css; purely additive.
 * Every section gets its own treatment; all animations are transform/opacity/
 * clip-path/shadow only. Mobile and reduced-motion guards live at the bottom.
 */

:root {
    --moon-silver: #c9d4e4;
    --blood: #8b1a1a;
    --ember: #e07b39;
    --night-violet: #6b3fa0;
}

/* ══════════════════════════════════════════
   REVEAL VARIANTS (reuse site.js .reveal observer)
   ══════════════════════════════════════════ */
.reveal {
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal--left {
    transform: translateX(-32px);
}
.reveal--right {
    transform: translateX(32px);
}
.reveal--scale {
    transform: scale(0.92);
}
.reveal--mask {
    transform: translateY(6px);
    clip-path: inset(0 0 86% 0);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        clip-path 0.75s ease;
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal--mask.is-visible {
    clip-path: inset(0 0 -8% 0);
}

/* ══════════════════════════════════════════
   GLOBAL: FOG-WIPE SECTION DIVIDERS
   (#features keeps its texture ::before, so it is excluded)
   ══════════════════════════════════════════ */
.section + .section:not(.section--features-bg)::before {
    width: min(420px, 70vw);
    height: 26px;
    background:
        radial-gradient(
            ellipse 55% 90% at 30% 50%,
            rgba(150, 160, 200, 0.12),
            transparent 70%
        ),
        radial-gradient(
            ellipse 60% 80% at 70% 50%,
            rgba(212, 175, 55, 0.1),
            transparent 70%
        ),
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 167, 69, 0.2),
            transparent
        );
    background-repeat: no-repeat;
    background-size: 200% 100%, 200% 100%, 100% 1px;
    background-position: 0% 50%, 100% 50%, 50% 50%;
    animation: fogDrift 80s linear infinite alternate;
}
@keyframes fogDrift {
    from {
        background-position: 0% 50%, 100% 50%, 50% 50%;
    }
    to {
        background-position: 100% 50%, 0% 50%, 50% 50%;
    }
}

/* ══════════════════════════════════════════
   GLOBAL: MOON-PHASE SCROLL INDICATOR
   ══════════════════════════════════════════ */
.myst-scroll-bar {
    background: linear-gradient(
        90deg,
        #1a2030 0%,
        var(--moon-silver) 35%,
        #c8a83a 70%,
        #ffe08a 100%
    );
    box-shadow:
        0 0 8px rgba(201, 212, 228, 0.5),
        0 0 20px rgba(212, 175, 55, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.8);
    animation: none;
}
.myst-scroll-moon {
    position: fixed;
    top: -6px;
    z-index: 10001;
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.7))
        drop-shadow(0 0 12px rgba(201, 212, 228, 0.4));
    transition: left 0.15s ease-out;
    animation: moonIndicatorPulse 3s ease-in-out infinite;
}
@keyframes moonIndicatorPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* ══════════════════════════════════════════
   HERO — "Moonrise over the Hollow"
   ══════════════════════════════════════════ */
.hero--rich::before {
    inset: -60px 0;
    transform: translateY(calc(var(--scroll-hero, 0) * -0.06px));
}

/* Layered drifting fog. Drift = animation on transform,
   mouse parallax = individual `translate` property — they compose. */
.hero__fog {
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -25%;
    width: 150%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    background-image:
        radial-gradient(
            ellipse 45% 60% at 20% 70%,
            rgba(140, 150, 190, 0.1),
            transparent 70%
        ),
        radial-gradient(
            ellipse 50% 55% at 55% 40%,
            rgba(120, 130, 175, 0.08),
            transparent 70%
        ),
        radial-gradient(
            ellipse 40% 50% at 85% 65%,
            rgba(150, 160, 200, 0.09),
            transparent 70%
        );
}
.hero__fog--far {
    opacity: 0.5;
    animation: fogDriftFar 110s linear infinite alternate;
    translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 4px);
    transition: translate 0.4s ease-out;
}
.hero__fog--near {
    opacity: 0.85;
    animation: fogDriftNear 70s linear infinite alternate;
    translate: calc(var(--mx, 0) * 20px) calc(var(--my, 0) * 10px);
    transition: translate 0.3s ease-out;
}
@keyframes fogDriftFar {
    from {
        transform: translateX(-5%);
    }
    to {
        transform: translateX(5%);
    }
}
@keyframes fogDriftNear {
    from {
        transform: translateX(4%);
    }
    to {
        transform: translateX(-4%);
    }
}

/* Fireflies */
.hero__fireflies {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero__fireflies i {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        #ffe9ad,
        rgba(212, 175, 55, 0.6) 60%,
        transparent
    );
    box-shadow: 0 0 8px 2px rgba(212, 175, 55, 0.45);
    opacity: 0;
    animation:
        fireflyFloat var(--ff-dur, 10s) ease-in-out var(--ff-delay, 0s)
            infinite,
        fireflyFlicker 3.4s ease-in-out var(--ff-delay, 0s) infinite;
}
.hero__fireflies i:nth-child(1) { left: 8%;  top: 68%; --ff-dur: 11s;  --ff-delay: 0.2s; }
.hero__fireflies i:nth-child(2) { left: 18%; top: 42%; --ff-dur: 13s;  --ff-delay: 1.4s; }
.hero__fireflies i:nth-child(3) { left: 30%; top: 78%; --ff-dur: 9s;   --ff-delay: 2.6s; }
.hero__fireflies i:nth-child(4) { left: 46%; top: 30%; --ff-dur: 14s;  --ff-delay: 0.9s; }
.hero__fireflies i:nth-child(5) { left: 60%; top: 84%; --ff-dur: 10s;  --ff-delay: 3.3s; }
.hero__fireflies i:nth-child(6) { left: 72%; top: 52%; --ff-dur: 12s;  --ff-delay: 1.9s; }
.hero__fireflies i:nth-child(7) { left: 86%; top: 70%; --ff-dur: 8.5s; --ff-delay: 4.1s; }
.hero__fireflies i:nth-child(8) { left: 93%; top: 36%; --ff-dur: 12.5s;--ff-delay: 2.2s; }
@keyframes fireflyFloat {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(26px, -34px);
    }
    50% {
        transform: translate(-14px, -58px);
    }
    75% {
        transform: translate(18px, -26px);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes fireflyFlicker {
    0%,
    100% {
        opacity: 0;
    }
    12% {
        opacity: 0.9;
    }
    30% {
        opacity: 0.35;
    }
    55% {
        opacity: 0.85;
    }
    80% {
        opacity: 0.2;
    }
}

/* Title emerges from the dark, then the existing glow loop takes over */
.hero__title {
    animation:
        titleEmerge 1.1s cubic-bezier(0.22, 0.7, 0.3, 1) both,
        titleGlow 5s ease-in-out 1.1s infinite;
}
@keyframes titleEmerge {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}
.hero .eyebrow {
    animation: heroRise 0.7s ease 0.15s both;
}
.hero__lead {
    animation: heroRise 0.7s ease 0.4s both;
}
.hero__actions {
    animation: heroRise 0.7s ease 0.6s both;
}
@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Splash parallax now driven by CSS vars set in site.js */
.hero__splash-img {
    translate: calc(var(--mx, 0) * 12px) calc(var(--my, 0) * 8px);
    transition: translate 0.25s ease-out;
}

/* Moonbeam spotlight that follows the cursor across the hero */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    background: radial-gradient(
        340px circle at calc(50% + var(--mx, 0) * 90%)
            calc(50% + var(--my, 0) * 90%),
        rgba(201, 212, 228, 0.09),
        rgba(212, 175, 55, 0.04) 45%,
        transparent 68%
    );
}
.hero.is-spotlit::after {
    opacity: 1;
}

/* Letter-by-letter title emergence (markup built by site.js) */
.hero__title--letters {
    animation: titleGlow 5s ease-in-out 1.6s infinite;
}
.hero__title--letters .tchar {
    display: inline-block;
    animation: letterEmerge 0.7s cubic-bezier(0.2, 0.7, 0.3, 1)
        calc(0.2s + var(--ti, 0) * 0.045s) both;
}
@keyframes letterEmerge {
    from {
        opacity: 0;
        transform: translateY(18px) rotate(4deg) scale(0.9);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}
.hero__title--letters .tchar.is-flicker {
    animation: letterFlicker 0.9s ease both;
}
@keyframes letterFlicker {
    0%,
    100% {
        opacity: 1;
        transform: none;
        text-shadow: none;
    }
    30% {
        opacity: 0.55;
    }
    45% {
        opacity: 1;
        transform: translateY(-2px);
        text-shadow:
            0 0 18px rgba(201, 212, 228, 0.9),
            0 0 34px rgba(212, 175, 55, 0.6);
    }
    70% {
        opacity: 0.85;
    }
}

/* Role card 3D tilt smoothing (desktop; JS drives the rotation) */
@media (hover: hover) and (pointer: fine) {
    .roles__card-flip {
        transition: transform 0.18s ease-out;
        will-change: transform;
    }
}

/* ══════════════════════════════════════════
   ROLES — "The Night Phase"
   ══════════════════════════════════════════ */
#roles {
    position: relative;
}
#roles::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 90% 70% at 50% 30%,
        transparent 40%,
        rgba(2, 2, 8, 0.55) 100%
    );
    opacity: 0;
    transition: opacity 1.2s ease;
}
#roles.is-in-view::before {
    opacity: 1;
}
#roles .section__inner {
    position: relative;
    z-index: 1;
}

/* Glowing eyes blinking at the section edges */
.night-eyes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.night-eyes span {
    position: absolute;
    display: flex;
    gap: 7px;
    opacity: 0;
    animation: eyesBlink var(--eye-cycle, 13s) ease-in-out
        var(--eye-delay, 0s) infinite;
}
.night-eyes span:nth-child(1) { left: 3%;  top: 16%; --eye-cycle: 13s; --eye-delay: 2s; }
.night-eyes span:nth-child(2) { right: 2%; top: 48%; --eye-cycle: 17s; --eye-delay: 7s; }
.night-eyes span:nth-child(3) { left: 5%;  top: 80%; --eye-cycle: 11s; --eye-delay: 12s; }
.night-eyes i {
    width: 6px;
    height: 6px;
    border-radius: 50% 50% 60% 60%;
    background: radial-gradient(circle at 50% 40%, #ffd98a, #c8741a 70%);
    box-shadow: 0 0 6px 1px rgba(255, 170, 60, 0.7);
}
.night-eyes span:nth-child(2) i {
    background: radial-gradient(circle at 50% 40%, #ff9a8a, #c83a1a 70%);
    box-shadow: 0 0 6px 1px rgba(255, 80, 50, 0.7);
}
@keyframes eyesBlink {
    0%,
    70%,
    100% {
        opacity: 0;
    }
    74%,
    78% {
        opacity: 0.85;
    }
    79% {
        opacity: 0;
    }
    81%,
    90% {
        opacity: 0.85;
    }
    96% {
        opacity: 0;
    }
}

/* Faction auras on card-front hover (nth-child = role order, works in any language) */
.roles__card-front {
    transition:
        border-color 0.3s,
        box-shadow 0.3s;
}
.roles__card .roles__card-flip:hover .roles__card-front {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.4),
        0 0 32px rgba(212, 175, 55, 0.16);
}
.roles__card:nth-child(1) .roles__card-flip:hover .roles__card-front,
.roles__card:nth-child(5) .roles__card-flip:hover .roles__card-front {
    border-color: rgba(200, 40, 40, 0.6);
    box-shadow:
        0 16px 44px rgba(160, 0, 0, 0.25),
        0 0 36px rgba(255, 30, 30, 0.15);
}
.roles__card:nth-child(2) .roles__card-flip:hover .roles__card-front,
.roles__card:nth-child(6) .roles__card-flip:hover .roles__card-front {
    border-color: rgba(150, 70, 200, 0.55);
    box-shadow:
        0 16px 44px rgba(80, 20, 140, 0.3),
        0 0 36px rgba(150, 70, 200, 0.18);
}

/* Claw mark tears in behind the Roles title */
.roles .section__title {
    position: relative;
}
.roles .section__title::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 180px;
    height: 140px;
    translate: -50% -52%;
    z-index: -1;
    pointer-events: none;
    background: url("../assets/claw_mark.png") center / contain no-repeat;
    opacity: 0;
}
#roles.is-in-view .section__title::before {
    animation: clawTitleRip 0.6s cubic-bezier(0.7, 0, 0.3, 1) 0.35s both;
}
@keyframes clawTitleRip {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 100%);
        transform: scale(1.35) rotate(-7deg);
    }
    100% {
        opacity: 0.3;
        clip-path: inset(-8% -8% -8% -8%);
        transform: scale(1) rotate(0deg);
    }
}

/* Claw flash when a wolf-family card is flipped */
.roles__card {
    position: relative;
}
.roles__card.claw-flash::after {
    content: "";
    position: absolute;
    inset: -6%;
    z-index: 5;
    pointer-events: none;
    background: url("../assets/claw_mark.png") center / contain no-repeat;
    animation: clawFlash 0.65s cubic-bezier(0.6, 0, 0.3, 1) both;
}
@keyframes clawFlash {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 100%);
        transform: scale(1.4) rotate(-9deg);
    }
    30% {
        opacity: 0.95;
    }
    60% {
        opacity: 0.85;
        clip-path: inset(-8% -8% -8% -8%);
        transform: scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        clip-path: inset(-8% -8% -8% -8%);
        transform: scale(1.02);
    }
}

/* Character films: film grain + gold flicker on slide change */
.phone-carousel__frame {
    position: relative;
}
.phone-carousel--films .phone-carousel__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.45;
    mix-blend-mode: overlay;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0 1px,
            transparent 1px 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.04) 0 2px,
            transparent 2px 5px
        );
    animation: grainShift 0.9s steps(2) infinite;
}
@keyframes grainShift {
    0% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(-2px, 1px);
    }
    66% {
        transform: translate(1px, -2px);
    }
    100% {
        transform: translate(0, 0);
    }
}
.phone-carousel__frame.is-flicker::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(212, 175, 55, 0.18),
        transparent 70%
    );
    animation: filmFlicker 0.45s ease-out both;
}
@keyframes filmFlicker {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* ══════════════════════════════════════════
   INTRO — "The Scriptorium"
   ══════════════════════════════════════════ */
#intro {
    position: relative;
}
.intro__lede::first-letter {
    font-family: var(--serif);
    font-size: 3.1em;
    line-height: 0.85;
    float: left;
    padding: 0.04em 0.12em 0 0;
    color: var(--gold);
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}
.intro__pullquote {
    animation: candleFlicker 5s ease-in-out infinite;
}
@keyframes candleFlicker {
    0%,
    100% {
        text-shadow: 0 0 14px rgba(212, 175, 55, 0.12);
    }
    22% {
        text-shadow: 0 0 22px rgba(224, 123, 57, 0.22);
    }
    45% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
    }
    70% {
        text-shadow: 0 0 26px rgba(224, 123, 57, 0.25);
    }
}
.intro__highlights {
    position: relative;
}
.intro__highlights::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--gold),
        rgba(212, 175, 55, 0.05)
    );
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.9s ease 0.3s;
}
.intro__highlights.is-visible::before {
    transform: scaleY(1);
}

/* Embers drifting up from the hearth */
.intro__embers {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.intro__embers i {
    position: absolute;
    bottom: 4%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffc98a, var(--ember) 70%);
    box-shadow: 0 0 6px 1px rgba(224, 123, 57, 0.5);
    opacity: 0;
    animation: emberRise var(--em-dur, 9s) linear var(--em-delay, 0s) infinite;
}
.intro__embers i:nth-child(1) { left: 12%; --em-dur: 10s; --em-delay: 1s; }
.intro__embers i:nth-child(2) { left: 50%; --em-dur: 12s; --em-delay: 5s; }
.intro__embers i:nth-child(3) { left: 84%; --em-dur: 9s;  --em-delay: 8s; }
@keyframes emberRise {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    8% {
        opacity: 0.7;
    }
    60% {
        opacity: 0.4;
    }
    100% {
        transform: translate(26px, -72vh);
        opacity: 0;
    }
}

/* ══════════════════════════════════════════
   OUTCOMES — "Two Dawns" (village dawn vs blood moon)
   ══════════════════════════════════════════ */
/* Claw-mark divider above the section (real claw art, rips in diagonally) */
#outcomes::before {
    width: min(280px, 60vw);
    height: 150px;
    margin: -38px auto -18px;
    background: url("../assets/claw_mark.png") center / contain no-repeat;
    clip-path: inset(0 0 100% 100%);
    animation: none;
}
#outcomes.is-in-view::before {
    animation:
        clawRipIn 0.55s cubic-bezier(0.7, 0, 0.3, 1) 0.15s both,
        clawGlowPulse 4s ease-in-out 0.9s infinite;
}
@keyframes clawRipIn {
    0% {
        clip-path: inset(0 0 100% 100%);
        transform: scale(1.3) rotate(-8deg);
        opacity: 0.4;
    }
    100% {
        clip-path: inset(-10% -10% -10% -10%);
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}
@keyframes clawGlowPulse {
    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(190, 30, 25, 0.25));
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(255, 60, 40, 0.55));
    }
}
/* Shared impact shake for claw strikes */
@keyframes clawImpact {
    0%,
    100% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-3px, 2px) rotate(-0.4deg);
    }
    40% {
        transform: translate(3px, -2px) rotate(0.4deg);
    }
    60% {
        transform: translate(-2px, 1px);
    }
    80% {
        transform: translate(2px, -1px);
    }
}

.outcomes__frame {
    position: relative;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.outcomes__card:hover .outcomes__frame {
    transform: translateY(-4px);
}

/* Village: warm rotating dawn rays */
.outcomes__card--village .outcomes__frame {
    border-color: rgba(212, 175, 55, 0.45);
}
.outcomes__card--village .outcomes__frame::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 1;
    pointer-events: none;
    background: conic-gradient(
        from 0deg at 50% 60%,
        transparent 0deg,
        rgba(255, 214, 130, 0.1) 14deg,
        transparent 28deg,
        transparent 110deg,
        rgba(255, 214, 130, 0.08) 128deg,
        transparent 146deg,
        transparent 230deg,
        rgba(255, 214, 130, 0.09) 246deg,
        transparent 262deg
    );
    animation: dawnRays 26s linear infinite;
}
@keyframes dawnRays {
    to {
        transform: rotate(360deg);
    }
}
.outcomes__card--village figcaption {
    color: #ead9a8;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}
.outcomes__card--village:hover .outcomes__frame {
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(212, 175, 55, 0.15);
}

/* Wolf: blood rim + claw marks that wipe in on reveal */
.outcomes__card--wolf .outcomes__frame {
    border-color: rgba(190, 50, 40, 0.5);
    animation: bloodPulse 5s ease-in-out infinite;
}
@keyframes bloodPulse {
    0%,
    100% {
        box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.45),
            inset 0 0 30px rgba(139, 26, 26, 0.18);
    }
    50% {
        box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.45),
            0 0 30px rgba(139, 26, 26, 0.25),
            inset 0 0 55px rgba(139, 26, 26, 0.4);
    }
}
.outcomes__card--wolf .outcomes__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url("../assets/claw_mark.png") center / 72% no-repeat;
    clip-path: inset(0 0 100% 100%);
    opacity: 0;
}
.outcomes__card--wolf.is-visible .outcomes__frame::after {
    animation:
        clawRake 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.4s both,
        clawGlowPulse 5s ease-in-out 1.1s infinite;
}
@keyframes clawRake {
    0% {
        clip-path: inset(0 0 100% 100%);
        transform: scale(1.35) rotate(-9deg);
        opacity: 0.4;
    }
    100% {
        clip-path: inset(-8% -8% -8% -8%);
        transform: scale(1) rotate(0deg);
        opacity: 0.92;
    }
}
/* The cage rattles when the claws land */
.outcomes__card--wolf.is-visible .outcomes__frame {
    animation:
        bloodPulse 5s ease-in-out infinite,
        clawImpact 0.4s ease-out 0.62s;
}
.outcomes__card--wolf figcaption {
    color: #e8b2a8;
    text-shadow: 0 0 12px rgba(190, 50, 40, 0.35);
}

/* ══════════════════════════════════════════
   FEATURES — "Arcane Sigils"
   ══════════════════════════════════════════ */
.feature-card {
    position: relative;
}
.feature-card::before,
.feature-card::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    transition:
        width 0.5s ease 0.15s,
        height 0.5s ease 0.15s,
        border-color 0.4s ease;
}
.feature-card::before {
    top: 8px;
    left: 8px;
    border-top: 1px solid rgba(212, 175, 55, 0.55);
    border-left: 1px solid rgba(212, 175, 55, 0.55);
}
.feature-card::after {
    bottom: 8px;
    right: 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.55);
    border-right: 1px solid rgba(212, 175, 55, 0.55);
}
.feature-card.is-visible::before,
.feature-card.is-visible::after {
    width: 18px;
    height: 18px;
}
.feature-card:hover::before,
.feature-card:hover::after {
    width: 26px;
    height: 26px;
    border-color: rgba(212, 175, 55, 0.85);
}
.feature-card__tag {
    background-image: linear-gradient(
        110deg,
        rgba(212, 175, 55, 0.12) 25%,
        rgba(255, 230, 160, 0.38) 50%,
        rgba(212, 175, 55, 0.12) 75%
    );
    background-size: 200% 100%;
    animation: tagShimmer 4s linear infinite;
}
@keyframes tagShimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

/* ══════════════════════════════════════════
   HOW — "Phases of the Moon"
   ══════════════════════════════════════════ */
.how__steps {
    position: relative;
}
.how__steps::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 1px;
    background: linear-gradient(
        180deg,
        rgba(212, 175, 55, 0.05),
        rgba(212, 175, 55, 0.35),
        rgba(212, 175, 55, 0.05)
    );
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.2s ease 0.2s;
}
#how.is-in-view .how__steps::before {
    transform: scaleY(1);
}
.how__step-num {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.12);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* New moon → crescent → half → gibbous; the final step is always full moon */
.how__steps li:nth-child(1) .how__step-num {
    background: #141826;
    color: rgba(212, 175, 55, 0.9);
}
.how__steps li:nth-child(2) .how__step-num {
    background:
        radial-gradient(circle at 28% 50%, #141826 0 60%, transparent 61%),
        linear-gradient(#e8c96a, #c9a437);
    color: #f2f0ea;
}
.how__steps li:nth-child(3) .how__step-num {
    background: linear-gradient(90deg, #141826 50%, #e0bd55 50%);
    color: #f2f0ea;
}
.how__steps li:nth-child(4) .how__step-num {
    background:
        radial-gradient(circle at -18% 50%, #141826 0 40%, transparent 41%),
        linear-gradient(#e8c96a, #c9a437);
    color: #1a1408;
    text-shadow: none;
}
.how__steps li:last-child .how__step-num {
    background: radial-gradient(circle at 35% 35%, #ffeebb, #d4af37 75%);
    color: #14110a;
    text-shadow: none;
    animation: fullMoonPulse 3s ease-in-out infinite;
}
@keyframes fullMoonPulse {
    0%,
    100% {
        box-shadow:
            0 0 10px rgba(212, 175, 55, 0.35),
            0 0 22px rgba(212, 175, 55, 0.2);
    }
    50% {
        box-shadow:
            0 0 18px rgba(255, 230, 160, 0.6),
            0 0 40px rgba(212, 175, 55, 0.35);
    }
}

/* Moonbeam sweep across the gameplay carousel */
.phone-carousel--hero .phone-carousel__frame {
    overflow: hidden;
}
.phone-carousel--hero .phone-carousel__frame::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 34%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent,
        rgba(220, 230, 250, 0.1) 45%,
        rgba(255, 248, 225, 0.16) 50%,
        rgba(220, 230, 250, 0.1) 55%,
        transparent
    );
    transform: translateX(-160%) skewX(-14deg);
    animation: moonbeamSweep 9s ease-in-out infinite;
}
@keyframes moonbeamSweep {
    0%,
    64% {
        transform: translateX(-160%) skewX(-14deg);
    }
    82%,
    100% {
        transform: translateX(420%) skewX(-14deg);
    }
}

/* ══════════════════════════════════════════
   TRUST — "The Pact" (wax seal)
   ══════════════════════════════════════════ */
.trust__inner {
    position: relative;
}
.trust__inner::before {
    content: "☽";
    position: absolute;
    top: -16px;
    right: 8%;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--gold);
    border: 2px solid rgba(212, 175, 55, 0.55);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(139, 26, 26, 0.35),
            rgba(20, 12, 10, 0.9)
        ),
        #1a1014;
    box-shadow:
        0 0 18px rgba(212, 175, 55, 0.18),
        inset 0 0 12px rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
}
.trust__inner.is-visible::before {
    animation: sealStamp 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 0.3s both;
}
@keyframes sealStamp {
    0% {
        opacity: 0;
        transform: scale(1.8) rotate(-16deg);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(-8deg);
    }
}
.trust__links a {
    background-image: linear-gradient(90deg, var(--gold), var(--gold));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    padding-bottom: 2px;
    transition:
        background-size 0.35s ease,
        color 0.3s ease;
}
.trust__links a:hover {
    background-size: 100% 1px;
    color: var(--gold);
}

/* ══════════════════════════════════════════
   FAQ — "The Grimoire"
   ══════════════════════════════════════════ */
.faq__item {
    position: relative;
    box-shadow:
        inset 0 0 0 1px rgba(212, 175, 55, 0.07),
        inset 0 0 24px rgba(0, 0, 0, 0.35);
}
.faq__item:hover {
    box-shadow:
        inset 0 0 0 1px rgba(212, 175, 55, 0.14),
        0 0 18px rgba(212, 175, 55, 0.07);
}
.faq__item::before,
.faq__item::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    opacity: 0.5;
}
.faq__item::before {
    top: 5px;
    left: 5px;
    border-top: 1px solid rgba(212, 175, 55, 0.45);
    border-left: 1px solid rgba(212, 175, 55, 0.45);
}
.faq__item::after {
    bottom: 5px;
    right: 5px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.45);
    border-right: 1px solid rgba(212, 175, 55, 0.45);
}
.faq__item[open] > p {
    animation: pageTurn 0.45s ease-out both;
    transform-origin: top center;
}
@keyframes pageTurn {
    from {
        opacity: 0;
        transform: perspective(600px) rotateX(-10deg) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ══════════════════════════════════════════
   DOWNLOAD — "The Summons" (full-moon finale)
   ══════════════════════════════════════════ */
.download .section__inner {
    position: relative;
}
.download .section__inner > * {
    position: relative;
    z-index: 1;
}
.download .section__inner::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(420px, 80vw);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        circle,
        rgba(230, 238, 250, 0.16) 0%,
        rgba(201, 212, 228, 0.09) 30%,
        rgba(212, 175, 55, 0.05) 50%,
        transparent 70%
    );
    transform: translate(-50%, -55%);
    animation: summonsPulse 7s ease-in-out infinite;
}
@keyframes summonsPulse {
    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -55%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -55%) scale(1.06);
    }
}
.store-badge {
    position: relative;
    overflow: hidden;
}
.store-badge::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: 0;
    width: 36%;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent,
        rgba(255, 240, 200, 0.18),
        transparent
    );
    transform: translateX(-180%) skewX(-20deg);
}
.store-badge:hover::after {
    animation: badgeShine 0.8s ease;
}
@keyframes badgeShine {
    from {
        transform: translateX(-180%) skewX(-20deg);
    }
    to {
        transform: translateX(420%) skewX(-20deg);
    }
}

/* Footer: breathing gold seam */
.site-footer {
    position: relative;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.7),
        transparent
    );
    animation: footerBreath 6s ease-in-out infinite;
}
@keyframes footerBreath {
    0%,
    100% {
        opacity: 0.35;
    }
    50% {
        opacity: 1;
    }
}

/* ══════════════════════════════════════════
   SOUND INVITATION TOAST (one-time, built by site.js)
   ══════════════════════════════════════════ */
.sound-invite {
    position: fixed;
    right: 1rem;
    bottom: 4.5rem;
    z-index: 10002;
    max-width: 290px;
    padding: 0.9rem 1rem;
    background: linear-gradient(160deg, #16121c, #0c0a12);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: var(--radius);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(212, 175, 55, 0.12);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}
.sound-invite.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.sound-invite__text {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    color: var(--text);
    font-style: italic;
}
.sound-invite__row {
    display: flex;
    gap: 0.5rem;
}
.sound-invite__yes,
.sound-invite__no {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}
.sound-invite__yes {
    border: 1px solid var(--gold);
    background: linear-gradient(160deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08));
    color: var(--gold);
}
.sound-invite__yes:hover {
    background: var(--gold);
    color: #14110a;
    box-shadow: 0 0 18px var(--gold-glow);
}
.sound-invite__no {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
}
.sound-invite__no:hover {
    color: var(--text);
    border-color: var(--text-dim);
}
@media (max-width: 768px) {
    .sound-invite {
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
        bottom: 4rem;
    }
}

/* ══════════════════════════════════════════
   LOADING SCREEN — claw-slash exit
   ══════════════════════════════════════════ */
.loading-screen::before,
.loading-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: url("../assets/claw_mark.png") center / min(72vmin, 620px)
        no-repeat;
}
.loading-screen::after {
    background-size: min(44vmin, 360px);
    background-position: 74% 24%;
}
.loading-screen.is-leaving::before {
    animation: clawStrike 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
}
.loading-screen.is-leaving::after {
    animation: clawStrike 0.45s cubic-bezier(0.7, 0, 0.3, 1) 0.14s both;
}
.loading-screen.is-leaving .loading-screen__inner {
    animation: clawImpact 0.4s ease-out 0.12s;
}
@keyframes clawStrike {
    0% {
        opacity: 1;
        clip-path: inset(0 0 100% 100%);
        transform: scale(1.45) rotate(-10deg);
    }
    60% {
        opacity: 1;
        clip-path: inset(-10% -10% -10% -10%);
        transform: scale(1) rotate(0deg);
    }
    100% {
        opacity: 0.95;
        clip-path: inset(-10% -10% -10% -10%);
        transform: scale(1.02);
    }
}

/* ══════════════════════════════════════════
   MOBILE GUARDS — heavy ambience is desktop-only
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    .hero__fog,
    .hero__fireflies,
    .night-eyes,
    .intro__embers,
    .outcomes__card--village .outcomes__frame::before,
    .phone-carousel--films .phone-carousel__frame::after,
    .phone-carousel--hero .phone-carousel__frame::after {
        display: none;
    }
    .trust__inner::before {
        width: 46px;
        height: 46px;
        font-size: 1.3rem;
        top: -10px;
        right: 4%;
    }
}

/* ══════════════════════════════════════════
   REDUCED MOTION — everything new goes quiet
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .hero__fog,
    .hero__fireflies,
    .hero::after,
    .night-eyes,
    .intro__embers,
    .myst-scroll-moon,
    .phone-carousel--films .phone-carousel__frame::after,
    .phone-carousel--hero .phone-carousel__frame::after,
    .outcomes__card--village .outcomes__frame::before {
        display: none !important;
    }
    .hero__title,
    .hero .eyebrow,
    .hero__lead,
    .hero__actions,
    .intro__pullquote,
    .feature-card__tag,
    .outcomes__card--wolf .outcomes__frame,
    .how__steps li:last-child .how__step-num,
    .site-footer::before,
    .download .section__inner::before,
    .faq__item[open] > p,
    .loading-screen.is-leaving::before,
    .loading-screen.is-leaving::after,
    .loading-screen.is-leaving .loading-screen__inner,
    .roles__card.claw-flash::after,
    .roles .section__title::before,
    #outcomes.is-in-view::before,
    .outcomes__card--wolf.is-visible .outcomes__frame::after,
    .section + .section:not(.section--features-bg)::before,
    .myst-scroll-bar {
        animation: none !important;
    }
    .hero__title,
    .hero .eyebrow,
    .hero__lead,
    .hero__actions {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
    .reveal {
        transition-delay: 0ms !important;
    }
    .reveal--mask {
        clip-path: none !important;
    }
    .trust__inner.is-visible::before {
        animation: none !important;
        opacity: 1;
        transform: rotate(-8deg);
    }
    /* Show the claw art statically instead of animating it in */
    #outcomes::before,
    .outcomes__card--wolf .outcomes__frame::after {
        clip-path: none !important;
        transition: none !important;
    }
    .outcomes__card--wolf.is-visible .outcomes__frame::after {
        opacity: 0.9;
    }
    .how__steps::before,
    .intro__highlights::before {
        transform: none !important;
        transition: none !important;
    }
    .feature-card::before,
    .feature-card::after {
        width: 18px;
        height: 18px;
        transition: none !important;
    }
    .hero__splash-img,
    .hero__fog--far,
    .hero__fog--near {
        translate: none !important;
    }
    .hero--rich::before {
        transform: none !important;
    }
}