/* ---
   BASE
   --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #0a0806;
    font-family: 'DM Sans', sans-serif;
    min-height: 200vh;
}

/* ---
   STICKY HEADER
   --- */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 2rem;
    background: rgba(10, 8, 6, 0.88);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(156, 90, 20, 0.25);
    /* overflow: hidden removed — .header-horse-wrap clips the animation itself;
       keeping it here breaks touch events on iOS for elements at the right edge */
    /* Start hidden — JS adds .visible */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.4s;
}

.sticky-header.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Brand wrap — left-anchored, no flex growth */
.header-brand-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    margin-right: auto;
    /* push nav to far right */
    position: relative;
    z-index: 10;
    /* Start fully clipped out (the polygon is a vertical line at the far right) */
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    /* Ensure it doesn't show before the JS starts */
    visibility: hidden;
}

.header-home-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.header-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(156, 90, 20, 0.5);
    background: rgba(156, 90, 20, 0.12);
    flex-shrink: 0;
    padding: 7px;
    transition: border-color 0.3s, background 0.3s;
}

.header-home-link:hover .header-icon {
    border-color: rgba(221, 158, 91, 0.8);
    background: rgba(156, 90, 20, 0.25);
}

.header-title {
    font-family: 'DM Mono', monospace;
    font-size: clamp(0.72rem, 1.5vw, 0.95rem);
    font-weight: 400;
    color: #f7f3ec;
    letter-spacing: 0.04em;
    opacity: 0;
    /* Hardware acceleration to prevent jitter */
    will-change: filter, opacity, letter-spacing;
    transform: translateZ(0);
}

.header-title.shimmer {
    /* Use 'forwards' to ensure it stays at 100% state */
    animation: inkResolve 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes inkResolve {
    0% {
        opacity: 0;
        filter: blur(8px);
        /* Reduced max blur to prevent artifacting */
        letter-spacing: 0.10em;
        transform: scale(1.02);
        /* Slight scale helps the "resolve" feel */
    }

    50% {
        opacity: 1;
        filter: blur(3px);
        color: #dd9e5b;
        /* Keep the gold tint longer */
    }

    100% {
        opacity: 1;
        filter: blur(0);
        letter-spacing: 0.04em;
        transform: scale(1);
        color: #f7f3ec;
    }
}

/* Nav */
.header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 10;
    opacity: 0;
    /* hidden until animation completes */
}

.header-nav.revealed {
    transition: opacity 0.4s ease;
    opacity: 1;
}

.header-nav a {
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(247, 243, 236, 0.55);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.header-nav a:hover {
    color: #f7f3ec;
}

.header-nav .cta {
    background: #9c5a14;
    color: #f7f3ec !important;
    padding: 0.35rem 1rem;
    border-radius: 4px;
}

/* ---
   HORSE — CSS port, cream coloured, mocha hair & hooves
   --- */
:root {
    /* Design system: Horse anatomy color palette & animation timing */
    --color-horse: #1a0e07;
    /* Warm brown coat - improved contrast */
    --color-horse-back: #0d0d0d;
    /* Shadow for body depth */
    --color-mocha: #b8711a;
    /* Mane & tail highlight */
    --color-hair: #6b5a52;
    /* Hair sheen */
    --color-hoof: #0d0d0d;
    /* Dark hooves */

    --speed: 0.72s;
    --delay-gap: 8;
}

.header-horse-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
    font-size: clamp(12px, 3.5vh, 28px);
}

.horse-head {
    position: absolute;
    width: 4.8rem;
    height: 3.2rem;
    top: 50%;
    transform: translateY(-50%);
    will-change: left, opacity;
    left: -200px;
    opacity: 0;
    transition: opacity 0.4s ease-out;
    /* Cinematic backlit glow — amber halo like firelight on a black coat */
    filter: drop-shadow(0 0 5px rgba(156, 90, 20, 0.8)) drop-shadow(0 0 12px rgba(156, 90, 20, 0.4));
}

.horse-head * {
    position: relative;
}

.horse-head>* {
    position: absolute;
    top: var(--part-y, 0);
    left: var(--part-x, 0);
    width: var(--part-width, 10px);
    height: var(--part-height, 10px);
    border-radius: var(--part-radius, 0);
    transform: rotate(var(--part-rotate, 0deg));
    transform-origin: var(--part-origin, 50% 50%);
    animation-delay: var(--delay, 0s) !important;
}

.horse-head>* *,
.horse-head>* *::after,
.horse-head>* *::before {
    position: absolute;
    background-color: var(--color-horse);
    top: var(--shape-y, 0);
    left: var(--shape-x, 0);
    width: var(--shape-width, 10px);
    height: var(--shape-height, 10px);
    border-radius: var(--shape-radius, 0);
    transform: rotate(var(--shape-rotate, 0deg));
    transform-origin: var(--shape-origin, 50% 50%);
    animation-delay: var(--delay, 0s) !important;
}

/* HEAD */
.head {
    --part-width: 20%;
    --part-height: 15%;
    --part-x: -1%;
    --part-y: 3%;
    --part-origin: 100% 50%;
    --part-rotate: -40deg;
    border: none;
}

.head .skull {
    --shape-width: 55%;
    --shape-height: 80%;
    --shape-radius: 50%;
    --shape-x: 43%;
    --shape-y: 10%;
    --shape-rotate: 40deg;
}

.head .eye {
    background-color: var(--color-horse-back);
    --shape-width: 6%;
    --shape-height: 10%;
    --shape-radius: 30% 100%;
    --shape-x: 45%;
    --shape-y: 20%;
}

.head .face {
    --shape-width: 47%;
    --shape-height: 50%;
    --shape-y: 8%;
    --shape-x: 14%;
    --shape-rotate: -5deg;
}

.head .nose {
    background-color: var(--color-mocha);
    opacity: 0.8;
    --shape-x: 0%;
    --shape-y: 11.7%;
    --shape-width: 24%;
    --shape-height: 35%;
    --shape-radius: 50%;
    --shape-rotate: -12deg;
}

.head .jaw {
    --shape-width: 25%;
    --shape-height: 60%;
    --shape-x: 40%;
    --shape-y: 37%;
    --shape-radius: 45%;
    transform: skew(0deg) rotate(40deg);
}

.head .lip {
    --shape-rotate: 40deg;
    --shape-x: -3%;
    --shape-y: 28%;
    --shape-radius: 30%;
    --shape-width: 12%;
    --shape-height: 25%;
}

.head .chin {
    --shape-width: 15%;
    --shape-height: 40%;
    --shape-y: 31%;
    --shape-x: 2%;
    --shape-radius: 30%;
    --shape-rotate: 40deg;
}

.head .chin::after {
    content: '';
    --shape-width: 130%;
    --shape-height: 180%;
    --shape-radius: 0;
    --shape-x: 123%;
    --shape-y: -95%;
    --shape-rotate: 70deg;
}

.head .ear {
    background-color: var(--color-mocha);
    --shape-width: 20%;
    --shape-height: 15%;
    --shape-y: 17%;
    --shape-x: 78%;
    --shape-radius: 50%;
    --shape-rotate: 10deg;
    --shape-origin: 0% 50%;
}

.head .ear::after {
    content: '';
    --shape-width: 70%;
    --shape-height: 40%;
    --shape-y: 10%;
    --shape-x: 65%;
    --shape-radius: 40%;
    --shape-rotate: -30deg;
}

.head .ear::before {
    content: '';
    --shape-width: 70%;
    --shape-height: 30%;
    --shape-y: -20%;
    --shape-x: 50%;
    --shape-radius: 0%;
    --shape-rotate: -5deg;
}

/* NECK */
.neck {
    --part-width: 30%;
    --part-height: 25%;
    --part-x: 5%;
    --part-y: 35%;
    --part-origin: 90% 50%;
    --part-rotate: 45deg;
    border: none;
}

.neck .under {
    --shape-height: 40%;
    --shape-width: 16%;
    --shape-radius: 50%;
    --shape-x: 11%;
    --shape-y: 55%;
    --shape-rotate: -19deg;
    background-color: transparent;
    border-top: 0.07rem outset var(--color-horse);
}

.neck .front {
    --shape-width: 75%;
    --shape-height: 55%;
    --shape-radius: 50%;
    --shape-y: 28%;
    --shape-x: 7%;
    --shape-rotate: 20deg;
}

.neck .top {
    background-color: var(--color-hair);
    --shape-x: 10%;
    --shape-y: 5%;
    --shape-width: 50%;
    --shape-height: 25%;
    --shape-radius: 50% / 20%;
}

.neck .top::after {
    content: '';
    --shape-x: 50%;
    --shape-y: -10%;
    --shape-width: 70%;
    --shape-height: 50%;
    --shape-radius: 0%;
    --shape-rotate: -5deg;
}

.neck .base {
    --shape-width: 50%;
    --shape-height: 30%;
    --shape-x: 20%;
    --shape-y: 10%;
    --shape-radius: 30%;
    --shape-rotate: -10deg;
}

.neck .shoulder {
    --shape-width: 50%;
    --shape-height: 30%;
    --shape-x: 48%;
    --shape-y: -2%;
    --shape-rotate: -20deg;
    --shape-radius: 50%;
}

/* BODY */
.body {
    --part-width: 55%;
    --part-height: 33%;
    --part-x: 20%;
    --part-y: 30%;
    --part-origin: 10% 50%;
    border: none;
}

.body .section {
    --shape-width: 94%;
    --shape-height: 90%;
    --shape-x: 40%;
    --shape-y: 5%;
    --shape-origin: 10% 30%;
    --shape-radius: 50% 0 20% 20%;
    --shape-rotate: -9deg;
}

.body .section.last {
    --shape-radius: 45%;
}

.body .section.last::after {
    content: none;
}

.body>.section {
    --shape-x: 4%;
    --shape-y: 4%;
    --shape-width: 32%;
    --shape-height: 92%;
    --shape-rotate: 10deg;
    --shape-origin: 50% 50%;
    --shape-radius: 45%;
}

.body>.section::after {
    content: '';
    --shape-height: 70%;
    --shape-width: 202%;
    --shape-x: 40%;
    --shape-y: 48%;
    --shape-rotate: -23deg;
    --shape-origin: 0% 100%;
    --shape-radius: 50%;
}

.body .back-side {
    --shape-x: 60%;
    --shape-y: -10%;
    --shape-width: 38%;
    --shape-height: 70%;
    --shape-origin: 0 0;
    --shape-rotate: 8deg;
    --shape-radius: 40% 50% 50%;
}

/* TAIL */
.tail {
    --part-width: 35%;
    --part-height: 18%;
    --part-x: 63%;
    --part-y: 29%;
    --part-rotate: 10deg;
    --part-origin: 0% 50%;
    border: none;
}

.tail .nub {
    background-color: var(--color-hair);
    --shape-width: 35%;
    --shape-height: 30%;
    --shape-rotate: 4deg;
    --shape-origin: 10% 50%;
    --shape-radius: 20% / 50%;
}

.tail .section {
    background-color: var(--color-hair);
    --shape-width: 100%;
    --shape-height: 90%;
    --shape-rotate: 15deg;
    --shape-origin: 0% 50%;
    --shape-radius: 30% / 50%;
    --shape-y: -25%;
    --shape-x: 60%;
}

.tail .section::after {
    content: '';
    --shape-width: 170%;
    --shape-height: 120%;
    --shape-rotate: 6deg;
    --shape-origin: 0% 50%;
    --shape-radius: 50%;
    --shape-y: -10%;
    --shape-x: 0%;
    background-color: transparent;
    box-shadow: none;
}

.tail .section::before {
    content: '';
    --shape-width: 130%;
    --shape-height: 100%;
    --shape-rotate: -20deg;
    --shape-origin: 0% 50%;
    --shape-radius: 50%;
    --shape-y: 0%;
    --shape-x: 50%;
    background-color: transparent;
    box-shadow: none;
}

.tail .nub>.section {
    --shape-width: 50%;
    --shape-height: 170%;
}

.tail .section>*>* {
    --shape-rotate: 0deg;
    --shape-height: 80%;
}

.tail .section>*>*>*>* {
    --shape-rotate: -25deg;
    --shape-height: 40%;
}

/* FRONT LEG */
.front-leg {
    --part-width: 15%;
    --part-height: 60%;
    --part-x: 20%;
    --part-y: 40%;
    --part-origin: 100% 50%;
    border: none;
}

.front-leg.right {
    --color-horse: var(--color-horse-back);
    --delay: calc(0s - var(--speed) / var(--delay-gap));
    filter: brightness(0.8);
}

.front-leg .shoulder {
    --shape-x: 20%;
    --shape-width: 80%;
    --shape-height: 35%;
    --shape-origin: 100% 50%;
    --shape-radius: 30% 30% 30% 50%;
}

.front-leg .upper {
    --shape-x: 40%;
    --shape-y: 60%;
    --shape-width: 40%;
    --shape-height: 80%;
    --shape-origin: 40% 10%;
    --shape-radius: 30% 30% 50% 50%;
}

.front-leg .upper::before {
    content: '';
    --shape-x: 5%;
    --shape-radius: 20%;
}

.front-leg .upper::after {
    content: '';
    --shape-x: 40%;
    --shape-y: 60%;
    --shape-height: 78%;
    --shape-radius: 40%;
    --shape-rotate: 5deg;
}

.front-leg .knee {
    --shape-x: 0%;
    --shape-y: 120%;
    --shape-width: 57%;
    --shape-height: 55%;
    --shape-radius: 45%;
    --shape-origin: 40% 20%;
}

.front-leg .knee::before {
    content: '';
    --shape-x: 0%;
    --shape-y: 60%;
    --shape-width: 30%;
    --shape-height: 40%;
    --shape-radius: 30%;
}

.front-leg .lower {
    background-color: var(--color-mocha) !important;
    --shape-x: 0%;
    --shape-y: 80%;
    --shape-width: 54%;
    --shape-height: 120%;
    --shape-radius: 5%;
    --shape-rotate: 12deg;
}

.front-leg .ankle {
    --shape-x: -20%;
    --shape-y: 80%;
    --shape-width: 170%;
    --shape-height: 45%;
    --shape-radius: 50%;
    --shape-rotate: 20deg;
}

.front-leg .foot {
    --shape-x: -35%;
    --shape-y: 65%;
    --shape-width: 120%;
    --shape-height: 200%;
    --shape-rotate: 30deg;
    clip-path: polygon(0% 0%, 80% 0%, 65% 20%, 63% 30%, 70% 45%, 75% 55%, 46% 90%, 35% 95%, 10% 70%, 5% 50%, 10% 25%);
}

.front-leg .hoof {
    --shape-x: 40%;
    --shape-y: 52%;
    --shape-width: 100%;
    --shape-height: 50%;
    --shape-rotate: 55deg;
    background-color: var(--color-hoof);
}

/* BACK LEG */
.back-leg {
    --part-width: 20%;
    --part-height: 70%;
    --part-x: 60%;
    --part-y: 32%;
    --part-origin: 100% 50%;
    border: none;
}

.back-leg.right {
    --color-horse: var(--color-horse-back);
    --delay: calc(0s - var(--speed) / var(--delay-gap));
    filter: brightness(0.8);
}

.back-leg .top {
    --shape-height: 20%;
    --shape-width: 75%;
    --shape-radius: 45%;
    --shape-rotate: 25deg;
    --shape-x: -8%;
    background-color: transparent;
}

.back-leg .top::after {
    content: '';
    --shape-height: 140%;
    --shape-width: 40%;
    --shape-radius: 50% / 30%;
    --shape-rotate: -19deg;
    --shape-x: 55%;
    --shape-y: 20%;
    --shape-origin: 50% 10%;
}

.back-leg .top::before {
    content: '';
    --shape-height: 150%;
    --shape-width: 80%;
    --shape-radius: 50% / 60%;
    --shape-rotate: -60deg;
    --shape-x: 24%;
    --shape-y: 58%;
}

.back-leg .thigh {
    --shape-height: 140%;
    --shape-width: 22%;
    --shape-radius: 45% / 20%;
    --shape-rotate: -95deg;
    --shape-x: 75%;
    --shape-y: 172%;
    --shape-origin: 50% 0%;
}

.back-leg .thigh::before {
    content: '';
    --shape-height: 80%;
    --shape-width: 50%;
    --shape-radius: 50%;
    --shape-rotate: -15deg;
    --shape-x: -66%;
    --shape-y: -10%;
    --shape-origin: 50% 0%;
}

.back-leg .thigh::after {
    content: '';
    --shape-height: 40%;
    --shape-width: 50%;
    --shape-radius: 50%;
    --shape-rotate: 20deg;
    --shape-x: 110%;
    --shape-y: 23%;
    background-color: transparent;
    box-shadow: -1.2% 0.5% 0 0 var(--color-horse);
}

.back-leg .lower-leg {
    background-color: var(--color-mocha) !important;
    --shape-height: 100%;
    --shape-width: 60%;
    --shape-radius: 50% / 10%;
    --shape-rotate: 47deg;
    --shape-x: 80%;
    --shape-y: 88%;
    --shape-origin: 50% 0%;
}

.back-leg .foot {
    --shape-x: -120%;
    --shape-y: 100%;
    --shape-width: 180%;
    --shape-height: 60%;
    --shape-rotate: -70deg;
    clip-path: polygon(90% 0%, 95% 10%, 100% 20%, 100% 30%, 60% 45%, 60% 55%, 70% 62%, 80% 65%, 80% 70%, 15% 95%, 10% 50%, 15% 25%, 30% 10%, 70% 0%);
}

.back-leg .hoof {
    --shape-x: -10%;
    --shape-y: 65%;
    --shape-width: 100%;
    --shape-height: 100%;
    --shape-rotate: -5deg;
    background-color: var(--color-hoof);
}

/* GALLOP ANIMATIONS */
@keyframes body {

    0%,
    100% {
        transform: rotate(8deg) translateX(2%) translateY(-5%);
    }

    9% {
        transform: rotate(4deg) translateX(2%) translateY(0%);
    }

    18.1% {
        transform: rotate(1deg) translateX(0%) translateY(5%);
    }

    27.2% {
        transform: rotate(1deg) translateX(2%) translateY(0%) scaleX(0.92);
    }

    36.3% {
        transform: rotate(0deg) translateX(2%) translateY(-2%) scaleX(0.9);
    }

    45.4% {
        transform: rotate(2deg) translateX(2%) translateY(-3%) scaleX(0.9);
    }

    54.5% {
        transform: rotate(3deg) translateX(2%) translateY(-5%) scaleX(0.9);
    }

    63.6% {
        transform: rotate(4deg) translateX(0%) translateY(-4%) scaleX(0.9);
    }

    72.7% {
        transform: rotate(4.5deg) translateX(0%) translateY(-3%) scaleX(0.95);
    }

    81.8% {
        transform: rotate(6.5deg) translateX(0%) translateY(-5%) scaleX(0.95);
    }

    90.9% {
        transform: rotate(10deg) translateX(0%) translateY(-14%) scaleX(1);
    }
}

.animate .body {
    animation: body var(--speed) linear infinite;
}

@keyframes front-shoulder {

    0%,
    100% {
        transform: rotate(20deg) translateX(0%) translateY(6%);
    }

    8.3% {
        transform: rotate(8deg) translateX(-10%) translateY(0%);
    }

    16.6% {
        transform: rotate(0deg) translateX(-12%) translateY(-3%);
    }

    24.9% {
        transform: rotate(0deg) translateX(10%) translateY(0%);
    }

    33.3% {
        transform: rotate(-30deg) translateX(7%) translateY(-12%);
    }

    41.6% {
        transform: rotate(-30deg) translateX(11%) translateY(-10%);
    }

    49.9% {
        transform: rotate(-20deg) translateX(10%) translateY(0%);
    }

    58.3% {
        transform: rotate(-10deg) translateX(30%) translateY(-5%);
    }

    66.6% {
        transform: rotate(15deg) translateX(25%) translateY(5%);
    }

    74.9% {
        transform: rotate(0deg) translateX(0%) translateY(0%);
    }

    91.6% {
        transform: rotate(20deg) translateX(0%) translateY(0%);
    }
}

.animate .front-leg .shoulder {
    animation: front-shoulder var(--speed) linear infinite;
}

@keyframes front-upper {

    0%,
    100% {
        transform: rotate(50deg) translateX(30%) translateY(8%);
    }

    8.3% {
        transform: rotate(45deg) translateX(40%) translateY(10%);
    }

    16.6% {
        transform: rotate(33deg) translateX(25%) translateY(10%);
    }

    24.9% {
        transform: rotate(0deg) translateX(0%) translateY(0%);
    }

    33.3% {
        transform: rotate(18deg) translateX(7%) translateY(10%);
    }

    41.6% {
        transform: rotate(-8deg) translateX(-30%) translateY(15%);
    }

    49.9% {
        transform: rotate(-4deg) translateX(-20%) translateY(10%);
    }

    58.3% {
        transform: rotate(20deg) translateX(17%) translateY(10%);
    }

    66.6% {
        transform: rotate(30deg) translateX(20%) translateY(-10%);
    }

    74.9% {
        transform: rotate(75deg) translateX(40%) translateY(-15%);
    }

    83.3% {
        transform: rotate(85deg) translateX(15%) translateY(-10%);
    }

    91.6% {
        transform: rotate(55deg) translateX(25%) translateY(-5%);
    }
}

.animate .front-leg .upper {
    animation: front-upper var(--speed) linear infinite;
}

@keyframes front-knee {

    0%,
    100% {
        transform: rotate(-15deg) translateX(0%) translateY(0%);
    }

    16.6% {
        transform: rotate(-12deg) translateX(0%) translateY(0%);
    }

    24.9% {
        transform: rotate(-20deg) translateX(0%) translateY(0%);
    }

    33.3% {
        transform: rotate(-55deg) translateX(-25%) translateY(10%);
    }

    41.6% {
        transform: rotate(-35deg) translateX(0%) translateY(-10%);
    }

    49.9% {
        transform: rotate(-28deg) translateX(0%) translateY(0%);
    }

    58.3% {
        transform: rotate(-90deg) translateX(-22%) translateY(0%);
    }

    66.6% {
        transform: rotate(-95deg) translateX(-30%) translateY(0%);
    }

    74.9% {
        transform: rotate(-98deg) translateX(-10%) translateY(0%);
    }

    83.3% {
        transform: rotate(-80deg) translateX(-20%) translateY(8%);
    }

    91.6% {
        transform: rotate(-50deg) translateX(-30%) translateY(10%);
    }
}

.animate .front-leg .knee {
    animation: front-knee var(--speed) linear infinite;
}

@keyframes front-lower {

    0%,
    100% {
        transform: rotate(-25deg) translateX(20%) translateY(0%);
    }

    8.3% {
        transform: rotate(10deg) translateX(0%) translateY(-10%);
    }

    16.6% {
        transform: rotate(10deg) translateX(0%) translateY(0%);
    }

    24.9% {
        transform: rotate(12deg) translateX(0%) translateY(0%);
    }

    33.3% {
        transform: rotate(-12deg) translateX(7%) translateY(-12%);
    }

    41.6% {
        transform: rotate(0deg) translateX(0%) translateY(-10%);
    }

    49.9% {
        transform: rotate(-23deg) translateX(20%) translateY(-20%);
    }

    58.3% {
        transform: rotate(0deg) translateX(0%) translateY(-30%);
    }

    66.6% {
        transform: rotate(-15deg) translateX(30%) translateY(-20%);
    }

    74.9% {
        transform: rotate(-15deg) translateX(0%) translateY(0%);
    }

    83.3% {
        transform: rotate(-15deg) translateX(15%) translateY(0%);
    }

    91.6% {
        transform: rotate(-10deg) translateX(20%) translateY(-30%);
    }
}

.animate .front-leg .lower {
    animation: front-lower var(--speed) linear infinite;
}

@keyframes front-ankle {

    0%,
    100% {
        transform: rotate(20deg);
    }

    49.9% {
        transform: rotate(0deg);
    }

    58.3% {
        transform: rotate(0deg) translateX(0%) translateY(-20%);
    }

    66.6% {
        transform: rotate(-30deg);
    }

    83.3% {
        transform: rotate(-10deg) translateX(0%) translateY(-20%);
    }

    91.6% {
        transform: rotate(20deg);
    }
}

.animate .front-leg .ankle {
    animation: front-ankle var(--speed) linear infinite;
}

@keyframes front-foot {

    0%,
    100% {
        transform: rotate(-28deg) translateX(40%);
    }

    8.3% {
        transform: rotate(-15deg) translateX(50%);
    }

    16.6% {
        transform: rotate(-11deg) translateX(35%);
    }

    24.9% {
        transform: rotate(50deg) translateX(0%);
    }

    33.3% {
        transform: rotate(-10deg) translateX(50%);
    }

    41.6% {
        transform: rotate(-36deg) translateX(50%);
    }

    66.6% {
        transform: rotate(-30deg) translateX(50%);
    }

    91.6% {
        transform: rotate(-50deg) translateX(50%) translateY(10%);
    }
}

.animate .front-leg .foot {
    animation: front-foot var(--speed) linear infinite;
}

@keyframes back-top {

    0%,
    100% {
        transform: rotate(0deg) translateX(-5%) translateY(50%);
    }

    8.3% {
        transform: rotate(-5deg) translateX(-7%) translateY(38%);
    }

    16.6% {
        transform: rotate(-10deg) translateX(-14%) translateY(30%);
    }

    24.9% {
        transform: rotate(25deg) translateX(0%) translateY(10%);
    }

    33.3% {
        transform: rotate(32deg) translateX(-18%) translateY(25%);
    }

    41.6% {
        transform: rotate(45deg) translateX(-5%) translateY(20%);
    }

    49.9% {
        transform: rotate(65deg) translateX(10%) translateY(35%);
    }

    58.3% {
        transform: rotate(65deg) translateX(10%) translateY(40%);
    }

    66.6% {
        transform: rotate(75deg) translateX(20%) translateY(40%);
    }

    74.9% {
        transform: rotate(70deg) translateX(20%) translateY(45%);
    }

    83.3% {
        transform: rotate(60deg) translateX(25%) translateY(40%);
    }

    91.6% {
        transform: rotate(30deg) translateX(10%) translateY(40%);
    }
}

.animate .back-leg .top {
    animation: back-top var(--speed) linear infinite;
}

@keyframes back-thigh {

    0%,
    100% {
        transform: rotate(-45deg) translateX(-30%) translateY(-10%);
    }

    8.3% {
        transform: rotate(-45deg) translateX(-30%) translateY(-8%);
    }

    16.6% {
        transform: rotate(-43deg) translateX(-35%) translateY(-10%);
    }

    24.9% {
        transform: rotate(-95deg) translateX(0%) translateY(0%);
    }

    33.3% {
        transform: rotate(-115deg) translateX(0%) translateY(10%);
    }

    41.6% {
        transform: rotate(-130deg) translateX(20%) translateY(-5%);
    }

    49.9% {
        transform: rotate(-130deg) translateX(10%) translateY(0%);
    }

    58.3% {
        transform: rotate(-90deg) translateX(80%) translateY(-20%);
    }

    66.6% {
        transform: rotate(-85deg) translateX(0%) translateY(-20%);
    }

    74.9% {
        transform: rotate(-65deg) translateX(5%) translateY(-10%);
    }

    83.3% {
        transform: rotate(-65deg) translateX(10%) translateY(-10%);
    }

    91.6% {
        transform: rotate(-75deg) translateX(-20%) translateY(-15%);
    }
}

.animate .back-leg .thigh {
    animation: back-thigh var(--speed) linear infinite;
}

@keyframes back-lower-leg {

    0%,
    100% {
        transform: rotate(40deg) translateX(0%) translateY(0%);
    }

    8.3% {
        transform: rotate(30deg) translateX(-30%) translateY(0%);
    }

    16.6% {
        transform: rotate(28deg) translateX(-40%) translateY(0%);
    }

    24.9% {
        transform: rotate(47deg) translateX(0%) translateY(0%);
    }

    33.3% {
        transform: rotate(78deg) translateX(0%) translateY(5%);
    }

    41.6% {
        transform: rotate(110deg) translateX(40%) translateY(10%);
    }

    49.9% {
        transform: rotate(115deg) translateX(50%) translateY(5%);
    }

    58.3% {
        transform: rotate(90deg) translateX(30%) translateY(5%);
    }

    66.6% {
        transform: rotate(76deg) translateX(0%) translateY(0%);
    }

    74.9% {
        transform: rotate(50deg) translateX(-40%) translateY(-4%);
    }

    83.3% {
        transform: rotate(40deg) translateX(-20%) translateY(-5%);
    }

    91.6% {
        transform: rotate(70deg) translateX(0%) translateY(0%);
    }
}

.animate .back-leg .lower-leg {
    animation: back-lower-leg var(--speed) linear infinite;
}

@keyframes back-foot {

    0%,
    100% {
        transform: rotate(40deg) translateX(0%) translateY(-20%);
    }

    8.3% {
        transform: rotate(20deg) translateX(10%) translateY(-20%);
    }

    16.6% {
        transform: rotate(-65deg) translateX(0%) translateY(0%);
    }

    24.9% {
        transform: rotate(-70deg) translateX(0%) translateY(0%);
    }

    33.3% {
        transform: rotate(-60deg) translateX(20%) translateY(-10%);
    }

    41.6% {
        transform: rotate(-80deg) translateX(0%) translateY(0%);
    }

    49.9% {
        transform: rotate(-70deg) translateX(0%) translateY(0%);
    }

    58.3% {
        transform: rotate(-60deg) translateX(10%) translateY(-10%);
    }

    66.6% {
        transform: rotate(-43deg) translateX(20%) translateY(-10%);
    }

    74.9% {
        transform: rotate(-13deg) translateX(5%) translateY(-10%);
    }

    83.3% {
        transform: rotate(8deg) translateX(5%) translateY(-15%);
    }

    91.6% {
        transform: rotate(20deg) translateX(15%) translateY(-20%);
    }
}

.animate .back-leg .foot {
    animation: back-foot var(--speed) linear infinite;
}

@keyframes neck {

    0%,
    100% {
        transform: scaleX(1) rotate(40deg) translateX(0%) translateY(-10%);
    }

    16.6% {
        transform: scaleX(1) rotate(40deg) translateX(6%) translateY(-10%);
    }

    33.3% {
        transform: scaleX(0.9) rotate(45deg) translateX(3%) translateY(5%);
    }

    49.9% {
        transform: scaleX(0.85) rotate(45deg) translateX(3%) translateY(-5%);
    }

    66.6% {
        transform: scaleX(0.85) rotate(40deg) translateX(0%) translateY(-15%);
    }

    83.3% {
        transform: scaleX(1) rotate(35deg) translateX(0%) translateY(-15%);
    }
}

.animate .neck {
    animation: neck var(--speed) linear infinite;
}

@keyframes head {

    0%,
    100% {
        transform: rotate(-45deg) translateX(-5%) translateY(10%);
    }

    16.6% {
        transform: rotate(-45deg) translateX(0%) translateY(15%);
    }

    33.3% {
        transform: rotate(-40deg) translateX(5%) translateY(23%);
    }

    49.9% {
        transform: rotate(-36deg) translateX(15%) translateY(35%);
    }

    66.6% {
        transform: rotate(-42deg) translateX(5%) translateY(35%);
    }

    83.3% {
        transform: rotate(-45deg) translateX(-15%) translateY(10%);
    }
}

.animate .head {
    animation: head var(--speed) linear infinite;
}

@keyframes ear {

    0%,
    100% {
        transform: rotate(25deg);
    }

    16.6% {
        transform: rotate(28deg);
    }

    33.3% {
        transform: rotate(24deg);
    }

    49.9% {
        transform: rotate(30deg);
    }

    66.6% {
        transform: rotate(35deg);
    }

    83.3% {
        transform: rotate(35deg);
    }
}

.animate .ear {
    animation: ear var(--speed) linear infinite;
}

@keyframes tail {

    0%,
    100% {
        transform: rotate(-10deg) translateX(-5%) translateY(38%);
    }

    16.6% {
        transform: rotate(-10deg) translateX(-5%) translateY(28%);
    }

    33.3% {
        transform: rotate(-10deg) translateX(-10%) translateY(10%);
    }

    49.9% {
        transform: rotate(-10deg) translateX(-10%) translateY(10%);
    }

    66.6% {
        transform: rotate(-10deg) translateX(-10%) translateY(18%);
    }

    83.3% {
        transform: rotate(-10deg) translateX(-10%) translateY(25%);
    }
}

.animate .tail {
    animation: tail var(--speed) linear infinite;
}

@keyframes tail-s1 {

    0%,
    100% {
        transform: rotate(15deg);
    }

    33.3% {
        transform: rotate(12deg);
    }

    49.9% {
        transform: rotate(5deg);
    }

    66.6% {
        transform: rotate(0deg);
    }

    83.3% {
        transform: rotate(5deg);
    }
}

.animate .tail .section {
    animation: tail-s1 var(--speed) linear infinite;
}

@keyframes tail-s2 {

    0%,
    100% {
        transform: rotate(0deg);
    }

    16.6% {
        transform: rotate(4deg);
    }

    33.3% {
        transform: rotate(15deg);
    }

    49.9% {
        transform: rotate(30deg);
    }

    66.6% {
        transform: rotate(10deg);
    }

    83.3% {
        transform: rotate(-5deg);
    }
}

.animate .tail .section>*>* {
    animation: tail-s2 var(--speed) linear infinite;
}

@keyframes tail-s3 {

    0%,
    100% {
        transform: rotate(-25deg);
    }

    16.6% {
        transform: rotate(-20deg);
    }

    33.3% {
        transform: rotate(-20deg);
    }

    49.9% {
        transform: rotate(-40deg);
    }

    66.6% {
        transform: rotate(0deg);
    }

    83.3% {
        transform: rotate(10deg);
    }
}

.animate .tail .section>*>*>*>* {
    animation: tail-s3 var(--speed) linear infinite;
}

/* Responsive */
@media (max-width: 600px) {
    .sticky-header {
        padding: 0 1rem;
    }

    .header-nav a:not(.cta) {
        display: none;
    }

    .header-horse-wrap {
        font-size: clamp(8px, 2vh, 14px);
    }
}

/* Demo */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(247, 243, 236, 0.2);
    font-family: 'DM Mono', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

.replay-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #9c5a14;
    color: #f7f3ec;
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    z-index: 9999;
}