/* MAJARA_MOTION_V1 */

:root {
    --mj-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Only hidden after JavaScript confirms it is running */
.mj-motion-ready .mj-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition:
        opacity .78s var(--mj-motion-ease),
        transform .78s var(--mj-motion-ease);
    will-change: opacity, transform;
}

.mj-motion-ready .mj-reveal--left {
    transform: translate3d(34px, 0, 0);
}

.mj-motion-ready .mj-reveal--right {
    transform: translate3d(-34px, 0, 0);
}

.mj-motion-ready .mj-reveal--scale {
    transform: scale(.96);
}

.mj-motion-ready .mj-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Hero load sequence */
.mj-motion-ready .hero .mj-eyebrow,
.mj-motion-ready .hero .mj-title,
.mj-motion-ready .hero .hero__subtitle,
.mj-motion-ready .hero .hero__actions,
.mj-motion-ready .project-detail-hero .mj-eyebrow,
.mj-motion-ready .project-detail-hero__title,
.mj-motion-ready .mj-project-v2__hero-summary,
.mj-motion-ready .mj-project-v2__hero-info,
.mj-motion-ready .mj-about-v2__hero .mj-eyebrow,
.mj-motion-ready .mj-about-v2__hero h1,
.mj-motion-ready .mj-about-v2__hero p,
.mj-motion-ready .mj-contact-v2__hero .mj-eyebrow,
.mj-motion-ready .mj-contact-v2__hero h1,
.mj-motion-ready .mj-contact-v2__hero p {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    animation: mj-hero-enter .9s var(--mj-motion-ease) forwards;
}

.mj-motion-ready .hero .mj-title,
.mj-motion-ready .project-detail-hero__title,
.mj-motion-ready .mj-about-v2__hero h1,
.mj-motion-ready .mj-contact-v2__hero h1 {
    animation-delay: .12s;
}

.mj-motion-ready .hero .hero__subtitle,
.mj-motion-ready .mj-project-v2__hero-summary,
.mj-motion-ready .mj-about-v2__hero p,
.mj-motion-ready .mj-contact-v2__hero p {
    animation-delay: .24s;
}

.mj-motion-ready .hero .hero__actions,
.mj-motion-ready .mj-project-v2__hero-info {
    animation-delay: .36s;
}

@keyframes mj-hero-enter {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Subtle image movement */
.hero__image,
.project-detail-hero__image img {
    transform: scale(1.035);
    transition: transform 7s var(--mj-motion-ease);
}

body.mj-page-loaded .hero__image,
body.mj-page-loaded .project-detail-hero__image img {
    transform: scale(1);
}

/* Header becomes tighter after scrolling */
.site-header.mj-header-v2 {
    transition:
        min-height .28s var(--mj-motion-ease),
        background .28s ease,
        box-shadow .28s ease;
}

.site-header.mj-header-v2.is-scrolled {
    min-height: 74px;
    background: rgba(18,18,18,.94);
    box-shadow: 0 12px 34px rgba(0,0,0,.18);
    backdrop-filter: blur(14px);
}

.site-header.mj-header-v2.is-scrolled .mj-header-v2__inner {
    min-height: 74px;
}

.site-header.mj-header-v2.is-scrolled .mj-header-v2__logo {
    transform: scale(.9);
}

.mj-header-v2__logo {
    transition: transform .28s var(--mj-motion-ease);
}

/* Better hover feedback */
.mj-button,
.category-card,
.project-card,
.course-card,
.contact-list__item,
.mj-about-v2__principles article,
.mj-about-v2__quote {
    will-change: transform;
}

.project-gallery__item img {
    transition:
        transform .65s var(--mj-motion-ease),
        filter .4s ease;
}

.project-gallery__item:hover img {
    filter: saturate(1.07) contrast(1.02);
}

/* Respect accessibility / user preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .mj-motion-ready .mj-reveal,
    .mj-motion-ready .hero .mj-eyebrow,
    .mj-motion-ready .hero .mj-title,
    .mj-motion-ready .hero .hero__subtitle,
    .mj-motion-ready .hero .hero__actions,
    .mj-motion-ready .project-detail-hero .mj-eyebrow,
    .mj-motion-ready .project-detail-hero__title,
    .mj-motion-ready .mj-project-v2__hero-summary,
    .mj-motion-ready .mj-project-v2__hero-info,
    .mj-motion-ready .mj-about-v2__hero .mj-eyebrow,
    .mj-motion-ready .mj-about-v2__hero h1,
    .mj-motion-ready .mj-about-v2__hero p,
    .mj-motion-ready .mj-contact-v2__hero .mj-eyebrow,
    .mj-motion-ready .mj-contact-v2__hero h1,
    .mj-motion-ready .mj-contact-v2__hero p {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}