/* =========================================================
   AISEL GALLERY
   ANIMATIONS
   Smooth • Luxury • Elegant
========================================================= */


/* =========================================================
   01. GLOBAL
========================================================= */

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

}

@keyframes fadeDown {

    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

}

@keyframes fadeRight {

    from {
        opacity: 0;
        transform: translateX(25px);
    }

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

}

@keyframes fadeLeft {

    from {
        opacity: 0;
        transform: translateX(-25px);
    }

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

}

@keyframes scaleIn {

    from {
        opacity: 0;
        transform: scale(0.92);
    }

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

}


/* =========================================================
   02. PAGE LOAD
========================================================= */

.site-header {

    animation:
        fadeDown 0.7s ease both;
}

.hero-section {

    animation:
        fadeUp 0.9s ease 0.1s both;
}

.categories-section {

    animation:
        fadeUp 0.9s ease 0.2s both;
}

.products-section {

    animation:
        fadeUp 0.9s ease 0.3s both;
}

.about-section {

    animation:
        fadeUp 0.9s ease 0.4s both;
}

.contact-section {

    animation:
        fadeUp 0.9s ease 0.5s both;
}


/* =========================================================
   03. BRAND
========================================================= */

.brand {

    transition:
        transform 0.35s ease;
}

.brand:hover {

    transform:
        translateY(-2px);
}

.brand-en {

    transition:
        letter-spacing 0.4s ease,
        text-shadow 0.4s ease;
}

.brand:hover .brand-en {

    letter-spacing: 7px;

    text-shadow:
        0 5px 20px rgba(201,164,92,0.25);
}


/* =========================================================
   04. MENU BUTTON
========================================================= */

.menu-button {

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.menu-button:hover {

    box-shadow:
        0 8px 25px rgba(232,137,169,0.18);
}

.menu-button:active {

    transform:
        scale(0.92);
}


/* =========================================================
   05. ICON BUTTONS
========================================================= */

.icon-button {

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.icon-button:active {

    transform:
        scale(0.9);
}

.cart-button:hover .cart-count {

    animation:
        cartPulse 0.5s ease;
}

@keyframes cartPulse {

    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }

}


/* =========================================================
   06. HERO
========================================================= */

.hero-content {

    animation:
        fadeRight 0.9s ease 0.25s both;
}

.hero-decoration {

    animation:
        fadeIn 1.2s ease 0.3s both;
}

.gold-circle {

    animation:
        floatingGold 6s ease-in-out infinite;
}

.silver-circle {

    animation:
        floatingSilver 7s ease-in-out infinite;
}

.pink-circle {

    animation:
        floatingPink 8s ease-in-out infinite;
}

@keyframes floatingGold {

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

    50% {
        transform:
            translate(15px, 20px);
    }

}

@keyframes floatingSilver {

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

    50% {
        transform:
            translate(-12px, -15px);
    }

}

@keyframes floatingPink {

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

    50% {
        transform:
            scale(1.08);
    }

}

.hero-label {

    animation:
        fadeDown 0.7s ease 0.45s both;
}

.hero-button {

    position: relative;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.hero-button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.28),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.7s ease;
}

.hero-button:hover::before {

    left: 140%;
}

.hero-button:hover {

    transform:
        translateY(-3px);
}


/* =========================================================
   07. CATEGORY CARDS
========================================================= */

.category-card {

    animation:
        scaleIn 0.7s ease both;

    transition:
        transform 0.4s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.4s ease;
}

.category-card:nth-child(1) {
    animation-delay: 0.05s;
}

.category-card:nth-child(2) {
    animation-delay: 0.10s;
}

.category-card:nth-child(3) {
    animation-delay: 0.15s;
}

.category-card:nth-child(4) {
    animation-delay: 0.20s;
}

.category-card:nth-child(5) {
    animation-delay: 0.25s;
}

.category-card:nth-child(6) {
    animation-delay: 0.30s;
}

.category-card:hover {

    transform:
        translateY(-9px);
}

.category-image {

    transition:
        transform 0.6s cubic-bezier(.2,.8,.2,1);
}

.category-card:hover .category-image {

    transform:
        scale(1.035);
}

.category-image::after {

    content: "";

    position: absolute;

    top: 0;
    left: -130%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.16),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.8s ease;
}

.category-card:hover
.category-image::after {

    left: 140%;
}

.category-number {

    transition:
        transform 0.4s ease,
        color 0.4s ease;
}

.category-card:hover .category-number {

    transform:
        translateX(-4px);

    color:
        var(--gold);
}


/* =========================================================
   08. PRODUCT SLIDER
========================================================= */

.products-slider {

    scroll-behavior: smooth;
}

.products-slider > * {

    transition:
        transform 0.35s ease;
}

.products-slider > *:hover {

    transform:
        translateY(-4px);
}


/* =========================================================
   09. EMPTY PRODUCTS
========================================================= */

.empty-products > span {

    animation:
        elegantPulse 2.5s ease-in-out infinite;
}

@keyframes elegantPulse {

    0%,
    100% {
        opacity: 0.65;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }

}


/* =========================================================
   10. ABOUT
========================================================= */

.about-section {

    overflow: hidden;
}

.about-section::after {

    transition:
        transform 1s ease;
}

.about-section:hover::after {

    transform:
        translateX(-25px);
}

.about-content {

    animation:
        fadeRight 0.9s ease both;
}

.about-content a {

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.about-content a:hover {

    transform:
        translateY(-3px);
}


/* =========================================================
   11. CONTACT
========================================================= */

.contact-section {

    animation:
        fadeUp 0.9s ease both;
}

.contact-button {

    position: relative;

    overflow: hidden;
}

.contact-button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.35),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.7s ease;
}

.contact-button:hover::before {

    left: 140%;
}


/* =========================================================
   12. BOTTOM NAV
========================================================= */

.bottom-navigation {

    animation:
        navAppear 0.7s ease 0.8s both;
}

@keyframes navAppear {

    from {
        opacity: 0;
        transform:
            translate(-50%, 30px);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, 0);
    }

}

.bottom-nav-item {

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.bottom-nav-item:active {

    transform:
        scale(0.92);
}

.bottom-nav-item.active .bottom-icon {

    animation:
        navIcon 0.45s ease;
}

@keyframes navIcon {

    0% {
        transform: translateY(0);
    }

    45% {
        transform: translateY(-3px);
    }

    100% {
        transform: translateY(0);
    }

}


/* =========================================================
   13. SPLASH ANIMATION
========================================================= */

.splash-content {

    animation:
        splashContent 0.9s ease both;
}

@keyframes splashContent {

    from {
        opacity: 0;
        transform:
            scale(0.92)
            translateY(15px);
    }

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

}

.splash-logo {

    animation:
        splashLogo 1.2s ease both;
}

@keyframes splashLogo {

    from {
        opacity: 0;
        letter-spacing: 25px;
    }

    to {
        opacity: 1;
        letter-spacing: 12px;
    }

}


/* =========================================================
   14. LINK UNDERLINE
========================================================= */

.footer-links a {

    position: relative;
}

.footer-links a::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: -5px;

    width: 0;
    height: 1px;

    background:
        var(--pink);

    transition:
        width 0.3s ease;
}

.footer-links a:hover::after {

    width: 100%;
}


/* =========================================================
   15. TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .category-card:hover {

        transform: none;
    }

    .hero-button:hover {

        transform: none;
    }

    .about-content a:hover {

        transform: none;
    }

}


/* =========================================================
   16. REDUCED MOTION
========================================================= */

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

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

        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;
    }

}


/* =========================================================
   END ANIMATIONS
========================================================= */