/* Keyframes */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.18);
        filter: brightness(1.15);
    }
}

/* Easing & Durations use CSS variables from variables.css */

/* Generic reveals */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Split text animation */
.split [data-char] {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
}

.split .in {
    opacity: 1;
    transform: translateY(0);
    transition: transform .55s var(--ease), opacity .55s var(--ease);
}

/* Preloader */
#preloader {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 10px;
    grid-auto-flow: column;
    background: rgba(10, 10, 13, .88);
    z-index: 9999;
    transition: opacity .5s var(--ease), visibility .5s var(--ease);
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--grad-gold);
    animation: pulse 1.2s infinite;
}

.loader-dot:nth-child(2) {
    animation-delay: .2s;
}

.loader-dot:nth-child(3) {
    animation-delay: .4s;
}

/* Hover glow */
.hover-glow {
    position: relative;
}

.hover-glow::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(400px 200px at var(--x, 50%) var(--y, 50%), rgba(214, 178, 91, .25), transparent 40%);
    opacity: 0;
    transition: opacity var(--speed) var(--ease);
    pointer-events: none;
}

.hover-glow:hover::after {
    opacity: .6;
}

/* Stagger helpers */
.stagger>* {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.stagger.in-view>* {
    opacity: 1;
    transform: translateY(0);
}

.stagger.in-view>*:nth-child(1) {
    transition-delay: .05s
}

.stagger.in-view>*:nth-child(2) {
    transition-delay: .12s
}

.stagger.in-view>*:nth-child(3) {
    transition-delay: .18s
}

.stagger.in-view>*:nth-child(4) {
    transition-delay: .24s
}

.stagger.in-view>*:nth-child(5) {
    transition-delay: .30s
}