/* Explain: CSS for subtle and gentle animations and transitions. */
/* Gentle, delicate motion system for the studio site */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 1000ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Soft continuous floating motion */
@keyframes float-soft {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

.float-soft {
    animation: float-soft 6.5s ease-in-out infinite;
}

/* Delicate underline sweep for desktop navigation links */
@media (min-width: 1024px) {
    .site-header nav a:not(.btn):not([aria-label]) {
        position: relative;
    }

    .site-header nav a:not(.btn):not([aria-label])::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: -0.28rem;
        height: 1px;
        background: var(--accent-color);
        transform: scaleX(0);
        transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .site-header nav a:not(.btn):not([aria-label]):hover::after,
    .site-header nav a:not(.btn):not([aria-label]):focus-visible::after {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .float-soft {
        animation: none;
    }
}