/* ============================================
   AI EXPRESSIONS V4
   animations.css
============================================ */

/* ---------- GLOBAL TRANSITIONS ---------- */

*{
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .45s ease,
        box-shadow .45s ease,
        opacity .45s ease;
}

/* ---------- HERO ---------- */

.hero img{

    transition:transform 8s ease;

}

.hero:hover img{

    transform:scale(1.04);

}

/* ---------- SEASON BUTTONS ---------- */

.season-buttons button:hover{

    transform:scale(1.15);

    background:rgba(255,255,255,.15);

    box-shadow:0 0 18px rgba(245,201,106,.45);

}

/* ---------- NAVIGATION ---------- */

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:width .35s ease;

}

nav a:hover::after{

    width:100%;

}

/* ---------- PANELS ---------- */

.panel{

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

.panel:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 50px rgba(0,0,0,.45);

}

/* ---------- CARDS ---------- */

.card{

    cursor:pointer;

    overflow:hidden;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.55);

}

/* ---------- CARD IMAGE ---------- */

.card img{

    transition:transform 1.4s ease;

}

.card:hover img{

    transform:scale(1.08);

}

/* ---------- CARD TITLE ---------- */

.card h3{

    transition:color .35s ease;

}

.card:hover h3{

    color:#fff3c8;

}

/* ---------- BUTTON ---------- */

.button{

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;

}

.button:hover{

    background:var(--gold);

    color:#111;

    transform:translateY(-3px);

}

/* ---------- FADE IN ---------- */

.fade-in{

    animation:fadeIn 1s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- GLOW ---------- */

.glow:hover{

    box-shadow:
        0 0 15px rgba(245,201,106,.35),
        0 0 35px rgba(245,201,106,.25);

}

/* ---------- FLOAT ---------- */

.float{

    animation:float 6s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}