/* =========================================================
   PLANT SCIENCE CONFERENCE
   GLOBAL MOTION SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   1. BASE TRANSITIONS
   --------------------------------------------------------- */

[data-transition] {
    transition:
        transform 0.7s cubic-bezier(.22, 1, .36, 1),
        opacity 0.7s ease,
        filter 0.7s ease;
}


/* ---------------------------------------------------------
   2. SCROLL REVEAL
   --------------------------------------------------------- */

.reveal {
    opacity: 0;

    transform:
        translateY(45px);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.22, 1, .36, 1);
}


.reveal.active {
    opacity: 1;

    transform:
        translateY(0);
}


.reveal-left {
    opacity: 0;

    transform:
        translateX(-50px);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.22, 1, .36, 1);
}


.reveal-left.active {
    opacity: 1;

    transform:
        translateX(0);
}


.reveal-right {
    opacity: 0;

    transform:
        translateX(50px);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.22, 1, .36, 1);
}


.reveal-right.active {
    opacity: 1;

    transform:
        translateX(0);
}


.reveal-scale {
    opacity: 0;

    transform:
        scale(0.94);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.22, 1, .36, 1);
}


.reveal-scale.active {
    opacity: 1;

    transform:
        scale(1);
}


/* ---------------------------------------------------------
   3. STAGGERED ANIMATION
   --------------------------------------------------------- */

.stagger > * {
    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}


.stagger.active > *:nth-child(1) {
    transition-delay: 0.05s;
}


.stagger.active > *:nth-child(2) {
    transition-delay: 0.12s;
}


.stagger.active > *:nth-child(3) {
    transition-delay: 0.19s;
}


.stagger.active > *:nth-child(4) {
    transition-delay: 0.26s;
}


.stagger.active > *:nth-child(5) {
    transition-delay: 0.33s;
}


.stagger.active > *:nth-child(6) {
    transition-delay: 0.40s;
}


.stagger.active > * {
    opacity: 1;

    transform:
        translateY(0);
}


/* ---------------------------------------------------------
   4. SOFT FLOAT
   --------------------------------------------------------- */

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


@keyframes floatSoft {

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

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


/* ---------------------------------------------------------
   5. SLOW ROTATION
   --------------------------------------------------------- */

.rotate-soft {
    animation:
        rotateSoft 14s linear infinite;
}


@keyframes rotateSoft {

    from {
        transform:
            rotate(0deg);
    }

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


/* ---------------------------------------------------------
   6. IMAGE HOVER
   --------------------------------------------------------- */

.image-hover {
    overflow: hidden;
}


.image-hover img {

    transition:
        transform 1.2s cubic-bezier(.22, 1, .36, 1);
}


.image-hover:hover img {

    transform:
        scale(1.045);
}


/* ---------------------------------------------------------
   7. MAGNETIC / LIFT EFFECT
   --------------------------------------------------------- */

.motion-lift {

    transition:
        transform 0.6s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.6s ease;
}


.motion-lift:hover {

    transform:
        translateY(-6px);
}


/* ---------------------------------------------------------
   8. BUTTON ARROW MOTION
   --------------------------------------------------------- */

.button-arrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;
}


.button-arrow span {

    display: inline-block;

    transition:
        transform 0.45s cubic-bezier(.22, 1, .36, 1);
}


.button-arrow:hover span {

    transform:
        translateX(5px);
}


/* ---------------------------------------------------------
   9. NAVIGATION SCROLL STATE
   --------------------------------------------------------- */

.site-header.scrolled {

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 10px 35px
        rgba(31, 77, 43, 0.07);
}


/* ---------------------------------------------------------
   10. HERO TEXT MOTION
   --------------------------------------------------------- */

.hero-enter {

    opacity: 0;

    transform:
        translateY(35px);

    animation:
        heroEnter 1s
        cubic-bezier(.22, 1, .36, 1)
        forwards;
}


.hero-enter.delay-1 {
    animation-delay: 0.15s;
}


.hero-enter.delay-2 {
    animation-delay: 0.30s;
}


.hero-enter.delay-3 {
    animation-delay: 0.45s;
}


@keyframes heroEnter {

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ---------------------------------------------------------
   11. REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }
}