[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms var(--ease-artful), transform 600ms var(--ease-artful);
    transition-delay: calc(var(--stagger-index, 0) * 70ms);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hero .title-reveal {
    animation: fadeRise 700ms var(--ease-artful) both;
}

.hero .subtitle-reveal {
    animation: fadeRise 700ms 120ms var(--ease-artful) both;
}

.hero .cta-reveal {
    animation: fadeRise 700ms 240ms var(--ease-artful) both;
}

@keyframes fadeRise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: radial-gradient(circle at 22% 20%, rgba(255, 122, 51, 0.2), transparent 50%),
        radial-gradient(circle at 80% 24%, rgba(30, 140, 74, 0.2), transparent 44%),
        var(--warm-ivory);
    display: grid;
    place-items: center;
    gap: var(--space-3);
    transition: opacity 320ms var(--ease-artful), visibility 320ms linear;
}

.loading-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.spinner-stage {
    width: 7rem;
    height: 7rem;
    display: grid;
    place-items: center;
}

.spinner {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
}

.spinner-label {
    margin: 0;
    color: var(--deep-green-800);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.spinner-stage[data-spinner="coffee"] .spinner-coffee,
.spinner-stage[data-spinner="dumbbell"] .spinner-dumbbell,
.spinner-stage[data-spinner="racket"] .spinner-racket,
.spinner-stage[data-spinner="castle"] .spinner-castle,
.spinner-stage[data-spinner="corgi"] .spinner-corgi,
.spinner-stage[data-spinner="cat"] .spinner-cat {
    display: block;
}

.coffee-cup {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
    border-radius: 0.75rem;
    animation: spinObject 1.35s linear infinite;
}

.dumbbell {
    position: absolute;
    width: 4.6rem;
    height: 0.9rem;
    background: #145f33;
    top: 3rem;
    left: 1.2rem;
    border-radius: 999px;
    animation: spinObject 1.05s linear infinite;
}

.dumbbell::before,
.dumbbell::after {
    content: "";
    position: absolute;
    top: -0.65rem;
    width: 0.95rem;
    height: 2.2rem;
    background: #0f1a26;
    border-radius: 0.3rem;
}

.dumbbell::before {
    left: -0.75rem;
}

.dumbbell::after {
    right: -0.75rem;
}

.racket {
    position: absolute;
    width: 3.7rem;
    height: 4.8rem;
    border: 3px solid #1e8c4a;
    border-radius: 49% 51% 52% 48% / 56% 56% 44% 44%;
    top: 0.8rem;
    left: 1.65rem;
    animation: spinObject 1.2s linear infinite;
}

.racket::after {
    content: "";
    position: absolute;
    width: 0.75rem;
    height: 2.4rem;
    background: #d85f24;
    left: 1.42rem;
    top: 4.55rem;
    border-radius: 999px;
}

.castle-track {
    position: absolute;
    inset: 0;
}

.piece {
    position: absolute;
    bottom: 1.6rem;
    width: 1.4rem;
    height: 2.2rem;
    border-radius: 0.3rem;
}

.king-piece {
    left: 0.8rem;
    background: #4b2e2b;
    animation: castleKing 1.8s var(--ease-artful) infinite;
}

.king-piece::after {
    content: "";
    position: absolute;
    width: 0.8rem;
    height: 0.25rem;
    left: 0.3rem;
    top: -0.3rem;
    background: #4b2e2b;
}

.rook-piece {
    right: 0.8rem;
    background: #145f33;
    animation: castleRook 1.8s var(--ease-artful) infinite;
}

.rook-piece::after {
    content: "";
    position: absolute;
    width: 1.4rem;
    height: 0.32rem;
    left: 0;
    top: -0.32rem;
    background: #145f33;
}

.animal {
    position: absolute;
    inset: 0;
    animation: runAcross 1s linear infinite;
}

.animal-body {
    position: absolute;
    width: 3.4rem;
    height: 1.7rem;
    left: 1.4rem;
    top: 2.5rem;
    border-radius: 1rem;
}

.animal-head {
    position: absolute;
    width: 1.2rem;
    height: 1.1rem;
    left: 4.3rem;
    top: 2.15rem;
    border-radius: 0.7rem;
}

.animal-legs {
    position: absolute;
    left: 1.65rem;
    top: 4rem;
    width: 2.8rem;
    height: 0.28rem;
    background: currentColor;
    color: inherit;
    box-shadow: 0.2rem 0.58rem 0 0 currentColor, 1rem 0.58rem 0 0 currentColor, 1.8rem 0.58rem 0 0 currentColor;
    animation: runLegs 360ms linear infinite;
}

.corgi {
    color: #d85f24;
}

.corgi .animal-body,
.corgi .animal-head {
    background: #d98a58;
    border: 2px solid #7a4228;
}

.cat {
    color: #145f33;
}

.cat .animal-body,
.cat .animal-head {
    background: #5fa56f;
    border: 2px solid #234f32;
}

.cat .animal-head::before,
.cat .animal-head::after {
    content: "";
    position: absolute;
    width: 0.35rem;
    height: 0.35rem;
    top: -0.22rem;
    background: #234f32;
}

.cat .animal-head::before {
    left: 0.1rem;
    transform: rotate(35deg);
}

.cat .animal-head::after {
    right: 0.1rem;
    transform: rotate(-35deg);
}

@keyframes spinObject {
    from {
        transform: rotate(0deg);
    }

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

@keyframes castleKing {
    0%,
    15% {
        transform: translateX(0);
    }

    50%,
    100% {
        transform: translateX(2.1rem);
    }
}

@keyframes castleRook {
    0%,
    15% {
        transform: translateX(0);
    }

    50%,
    100% {
        transform: translateX(-2.1rem);
    }
}

@keyframes runAcross {
    0% {
        transform: translateX(-0.35rem);
    }

    50% {
        transform: translateX(0.35rem);
    }

    100% {
        transform: translateX(-0.35rem);
    }
}

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

    50% {
        transform: translateY(-0.22rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
        transition-delay: 0ms;
    }

    .loading-overlay {
        transition-duration: 120ms;
    }

    .spinner,
    .spinner * {
        animation: none !important;
    }
}