/* =========================================================
   IPHONE PREMIUM MARKETPLACE
   ANIMATION CSS
   ========================================================= */


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes fadeUp {
    from {
        opacity: 0;

        transform:
            translateY(24px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes fadeDown {
    from {
        opacity: 0;

        transform:
            translateY(-18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes fadeLeft {
    from {
        opacity: 0;

        transform:
            translateX(-24px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


@keyframes fadeRight {
    from {
        opacity: 0;

        transform:
            translateX(24px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


@keyframes scaleIn {
    from {
        opacity: 0;

        transform:
            scale(0.94);
    }

    to {
        opacity: 1;

        transform:
            scale(1);
    }
}


@keyframes scaleUp {
    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.035);
    }
}


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

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


@keyframes pulseSoft {
    0% {
        transform:
            scale(1);

        opacity: 1;
    }

    50% {
        transform:
            scale(1.04);

        opacity: 0.85;
    }

    100% {
        transform:
            scale(1);

        opacity: 1;
    }
}


@keyframes shimmer {
    0% {
        background-position:
            -600px 0;
    }

    100% {
        background-position:
            600px 0;
    }
}


@keyframes spin {
    to {
        transform:
            rotate(360deg);
    }
}


@keyframes slideDown {
    from {
        opacity: 0;

        transform:
            translateY(-10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes slideUp {
    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   PAGE LOAD
   ========================================================= */

.page-load {
    animation:
        fadeIn
        0.5s
        ease
        both;
}


.page-load-up {
    animation:
        fadeUp
        0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.page-load-left {
    animation:
        fadeLeft
        0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.page-load-right {
    animation:
        fadeRight
        0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


.page-load-scale {
    animation:
        scaleIn
        0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}


/* =========================================================
   ANIMATION DELAYS
   ========================================================= */

.delay-1 {
    animation-delay:
        0.08s;
}


.delay-2 {
    animation-delay:
        0.16s;
}


.delay-3 {
    animation-delay:
        0.24s;
}


.delay-4 {
    animation-delay:
        0.32s;
}


.delay-5 {
    animation-delay:
        0.40s;
}


.delay-6 {
    animation-delay:
        0.48s;
}


.delay-7 {
    animation-delay:
        0.56s;
}


.delay-8 {
    animation-delay:
        0.64s;
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


.reveal-left {
    opacity: 0;

    transform:
        translateX(-30px);

    transition:
        opacity 0.7s ease,
        transform 0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.reveal-left.is-visible {
    opacity: 1;

    transform:
        translateX(0);
}


.reveal-right {
    opacity: 0;

    transform:
        translateX(30px);

    transition:
        opacity 0.7s ease,
        transform 0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.reveal-right.is-visible {
    opacity: 1;

    transform:
        translateX(0);
}


.reveal-scale {
    opacity: 0;

    transform:
        scale(0.96);

    transition:
        opacity 0.7s ease,
        transform 0.7s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.reveal-scale.is-visible {
    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   STAGGER ANIMATION
   ========================================================= */

.stagger > * {
    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity 0.6s ease,
        transform 0.6s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


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


.stagger.is-visible > *:nth-child(2) {
    transition-delay:
        0.10s;
}


.stagger.is-visible > *:nth-child(3) {
    transition-delay:
        0.15s;
}


.stagger.is-visible > *:nth-child(4) {
    transition-delay:
        0.20s;
}


.stagger.is-visible > *:nth-child(5) {
    transition-delay:
        0.25s;
}


.stagger.is-visible > *:nth-child(6) {
    transition-delay:
        0.30s;
}


.stagger.is-visible > *:nth-child(7) {
    transition-delay:
        0.35s;
}


.stagger.is-visible > *:nth-child(8) {
    transition-delay:
        0.40s;
}


.stagger.is-visible > * {
    opacity: 1;

    transform:
        translateY(0);
}


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

.site-header {
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.site-header.is-scrolled {
    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    box-shadow:
        0 8px 30px
        rgba(
            0,
            0,
            0,
            0.06
        );
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu-toggle span {
    transition:
        transform 0.25s ease,
        opacity 0.2s ease;
}


.mobile-menu-toggle.is-active
span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.mobile-menu-toggle.is-active
span:nth-child(2) {
    opacity: 0;
}


.mobile-menu-toggle.is-active
span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


@media (max-width: 900px) {

    .main-navigation {
        animation:
            slideDown
            0.25s
            ease
            both;
    }

}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.hero-image-wrapper {
    animation:
        scaleIn
        0.9s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        0.15s
        both;
}


.hero-floating-card {
    animation:
        floating
        4s
        ease-in-out
        infinite;
}


/* =========================================================
   BUTTON EFFECT
   ========================================================= */

.btn {
    position: relative;

    overflow: hidden;
}


.btn::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 60%;
    height: 100%;

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

    transform:
        skewX(-20deg);

    transition:
        left 0.55s ease;

    pointer-events: none;
}


.btn:hover::after {
    left: 140%;
}


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

.product-card {
    transition:
        transform 0.3s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.product-image img {
    transition:
        transform 0.6s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.product-card:hover
.product-image img {
    transform:
        scale(1.045);
}


/* =========================================================
   CATEGORY CARD
   ========================================================= */

.category-card {
    transition:
        transform 0.3s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.category-arrow {
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


.category-card:hover
.category-arrow {
    transform:
        translateX(3px);
}


/* =========================================================
   TEXT LINK
   ========================================================= */

.text-link {
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.text-link:hover {
    transform:
        translateX(3px);
}


/* =========================================================
   REVIEW CARD
   ========================================================= */

.review-card {
    transition:
        transform 0.3s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        box-shadow 0.3s ease;
}


.review-card:hover {
    transform:
        translateY(-5px);
}


/* =========================================================
   PROMO CARD
   ========================================================= */

.promo-card {
    transition:
        transform 0.3s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        box-shadow 0.3s ease;
}


.promo-card:hover {
    transform:
        translateY(-5px);
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-list details {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.faq-list details:hover {
    border-color:
        var(--color-gray-300);
}


.faq-list details[open] {
    box-shadow:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            0.04
        );
}


.faq-list summary::after {
    transition:
        transform 0.25s ease;
}


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

.image-hover {
    overflow: hidden;
}


.image-hover img {
    transition:
        transform 0.6s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.image-hover:hover img {
    transform:
        scale(1.04);
}


/* =========================================================
   FLOATING ELEMENT
   ========================================================= */

.float-animation {
    animation:
        floating
        4s
        ease-in-out
        infinite;
}


/* =========================================================
   PULSE
   ========================================================= */

.pulse-animation {
    animation:
        pulseSoft
        2.5s
        ease-in-out
        infinite;
}


/* =========================================================
   LOADING SPINNER
   ========================================================= */

.loading-spinner {
    width: 22px;
    height: 22px;

    border:
        2px solid
        var(--color-gray-200);

    border-top-color:
        var(--color-black);

    border-radius:
        50%;

    animation:
        spin
        0.7s
        linear
        infinite;
}


/* =========================================================
   SKELETON LOADING
   ========================================================= */

.skeleton {
    position: relative;

    overflow: hidden;

    background:
        var(--color-gray-100);
}


.skeleton::after {
    content: "";

    position: absolute;

    inset: 0;

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

    background-size:
        600px 100%;

    animation:
        shimmer
        1.4s
        linear
        infinite;
}


/* =========================================================
   TOAST
   ========================================================= */

.site-toast {
    transition:
        opacity 0.3s ease,
        transform 0.3s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* =========================================================
   PAGE TRANSITION
   ========================================================= */

body.page-transition {
    animation:
        fadeIn
        0.35s
        ease
        both;
}


/* =========================================================
   FOCUS ANIMATION
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline:
        2px solid
        var(--color-black);

    outline-offset:
        3px;
}


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

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

    *,
    *::before,
    *::after {
        animation:
            none !important;

        transition:
            none !important;
    }


    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .stagger > * {
        opacity: 1;

        transform:
            none;
    }

}


/* =========================================================
   ANIMATION
   iPhone Premium Marketplace
========================================================= */


/* ---------------------------------------------------------
   PAGE FADE
--------------------------------------------------------- */

@keyframes pageFadeIn {

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

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

}

body {
    animation: pageFadeIn .45s ease both;
}


/* ---------------------------------------------------------
   PRODUCT CARD
--------------------------------------------------------- */

@keyframes productReveal {

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

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

}

.product-card {
    animation: productReveal .55s ease both;
}

.product-card:nth-child(2) {
    animation-delay: .05s;
}

.product-card:nth-child(3) {
    animation-delay: .1s;
}

.product-card:nth-child(4) {
    animation-delay: .15s;
}

.product-card:nth-child(5) {
    animation-delay: .2s;
}

.product-card:nth-child(6) {
    animation-delay: .25s;
}


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

.btn,
.option-button,
.color-option,
.filter-reset {
    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        color .2s ease;
}


/* ---------------------------------------------------------
   PRODUCT IMAGE
--------------------------------------------------------- */

.product-image img,
.product-detail-main-image img {
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        opacity .3s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.045);
}


/* ---------------------------------------------------------
   PRODUCT DETAIL
--------------------------------------------------------- */

.product-detail-info {
    animation: productDetailReveal .6s ease both;
}

@keyframes productDetailReveal {

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

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

}


/* ---------------------------------------------------------
   THUMBNAIL
--------------------------------------------------------- */

.product-thumbnail {
    transition:
        transform .2s ease,
        border-color .2s ease,
        opacity .2s ease;
}

.product-thumbnail:hover {
    transform: translateY(-2px);
}

.product-thumbnail.active {
    animation: thumbnailActive .25s ease both;
}

@keyframes thumbnailActive {

    from {
        transform: scale(.96);
    }

    to {
        transform: scale(1);
    }

}


/* ---------------------------------------------------------
   FILTER
--------------------------------------------------------- */

.filter-card {
    animation: filterReveal .45s ease both;
}

@keyframes filterReveal {

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

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

}


/* ---------------------------------------------------------
   LEGAL CONTENT
--------------------------------------------------------- */

.legal-article {
    animation: legalReveal .55s ease both;
}

@keyframes legalReveal {

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

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

}


/* ---------------------------------------------------------
   LEGAL SIDEBAR LINKS
--------------------------------------------------------- */

.legal-sidebar nav a {
    transition:
        color .2s ease,
        transform .2s ease;
}

.legal-sidebar nav a:hover {
    transform: translateX(3px);
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.products-cta-card,
.product-detail-cta-card,
.legal-cta-card {
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.products-cta-card:hover,
.product-detail-cta-card:hover,
.legal-cta-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(0,0,0,.14);
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

}