/* Page-load sequence for the hero */

.intro {
    opacity: 0;
    transform: translateY(26px);
    animation: rise 0.95s var(--ease) forwards;
    animation-delay: calc(var(--d, 0) * 110ms + 250ms);
}

.hero__scene {
    animation: scene-in 1.6s var(--ease) 0.35s backwards;
}

.hero__sun {
    animation: sun-in 1.8s var(--ease) 0.5s backwards;
}

.hero__inset {
    animation: inset-in 1.3s var(--ease) 1.1s backwards;
}

.hero__pulse {
    animation: pulse 2.4s ease-out infinite;
}

@keyframes rise {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes scene-in {
    from {
        opacity: 0;
        transform: rotateX(22deg) rotateY(-18deg) translateY(60px);
    }
}

@keyframes sun-in {
    from {
        opacity: 0;
        transform: translateZ(-160px) translateY(120px);
    }
}

@keyframes inset-in {
    from {
        opacity: 0;
        transform: translateZ(320px) translateX(-40px);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(250, 186, 62, 0.6);
    }

    80%,
    100% {
        box-shadow: 0 0 0 10px rgba(250, 186, 62, 0);
    }
}

/* Scroll reveal (only when JS is running) */

.js [data-reveal] {
    opacity: 0;
    transform: perspective(1000px) rotateX(9deg) translateY(48px);
    transform-origin: 50% 100%;
    transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Button hover */

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.9s var(--ease);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -14px rgba(8, 29, 33, 0.55);
}

.btn:hover::after {
    transform: translateX(120%);
}

.btn:active {
    transform: translateY(0);
}

.lightbox[open] {
    animation: zoom-in 0.45s var(--ease);
}

@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .intro,
    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}