/* =========================================================
   BUSHIROAD DASHBOARD
   CINEMATIC SECTION REVEAL
========================================================= */


/* =========================================================
   CATALOG SECTION
========================================================= */

.catalog-section {
    opacity: 0;
    transform:
        translateY(70px)
        scale(0.96);

    filter: blur(4px);

    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.1s ease;
}

.catalog-section.is-visible {
    opacity: 1;
    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


/* =========================================================
   SECTION HEADER
========================================================= */

.catalog-section .section-header {
    opacity: 0;
    transform:
        translateY(40px)
        scale(0.97);

    transition:
        opacity 0.9s ease 0.15s,
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.catalog-section.is-visible .section-header {
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   PRODUCT CARDS
========================================================= */

.catalog-section .product-card {
    opacity: 0;

    transform:
        translateY(70px)
        scale(0.92);

    filter: blur(3px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   PRODUCT CARD STAGGER
========================================================= */

.catalog-section.is-visible .product-card:nth-child(1) {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 0.25s;
}

.catalog-section.is-visible .product-card:nth-child(2) {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 0.45s;
}

.catalog-section.is-visible .product-card:nth-child(3) {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 0.65s;
}

.catalog-section.is-visible .product-card:nth-child(4) {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 0.85s;
}

.catalog-section.is-visible .product-card:nth-child(5) {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 1.05s;
}

.catalog-section.is-visible .product-card:nth-child(6) {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition-delay: 1.25s;
}


/* =========================================================
   FOOTER BUTTON
========================================================= */

.catalog-section .section-footer-action {
    opacity: 0;

    transform:
        translateY(35px)
        scale(0.96);

    transition:
        opacity 0.8s ease 1.35s,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.35s;
}

.catalog-section.is-visible .section-footer-action {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-card .card-banner {
    overflow: hidden;
}

.product-card .card-banner img {
    transform: scale(1.08);

    transition:
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalog-section.is-visible .product-card .card-banner img {
    transform: scale(1);
}


/* =========================================================
   PRODUCT CARD HOVER
========================================================= */

.product-card:hover {
    transform: translateY(-8px) !important;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.product-card:hover .card-banner img {
    transform: scale(1.06);
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.catalog-section .btn {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.catalog-section .btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   NOTICE SECTION
========================================================= */

.notice-section {
    opacity: 0;

    transform:
        translateY(70px)
        scale(0.96);

    filter: blur(4px);

    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.1s ease;
}

.notice-section.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);
}


/* =========================================================
   NOTICE HEADER
========================================================= */

.notice-section .section-header {
    opacity: 0;

    transform:
        translateY(35px)
        scale(0.96);

    transition:
        opacity 0.9s ease 0.15s,
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.notice-section.is-visible .section-header {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   NOTICE ITEMS
========================================================= */

.notice-section .notice-item {
    opacity: 0;

    transform:
        translateX(-60px)
        scale(0.96);

    filter: blur(3px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   NOTICE ITEM STAGGER
========================================================= */

.notice-section.is-visible .notice-item:nth-child(1) {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    transition-delay: 0.35s;
}

.notice-section.is-visible .notice-item:nth-child(2) {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    transition-delay: 0.55s;
}

.notice-section.is-visible .notice-item:nth-child(3) {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    transition-delay: 0.75s;
}

.notice-section.is-visible .notice-item:nth-child(4) {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    transition-delay: 0.95s;
}

.notice-section.is-visible .notice-item:nth-child(5) {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
    transition-delay: 1.15s;
}


/* =========================================================
   NOTICE HOVER
========================================================= */

.notice-section .notice-item:hover {
    transform: translateX(8px) !important;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .catalog-section,
    .catalog-section .section-header,
    .catalog-section .product-card,
    .catalog-section .section-footer-action,
    .catalog-section .card-banner img,
    .notice-section,
    .notice-section .section-header,
    .notice-section .notice-item {

        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

}