/* Add custom CSS styles below */ 
/* ==========================================
   ONLY — FULL CSS EFFECT PACK
   CSS ONLY
========================================== */


/* ==========================================
   1. FLOATING ONLY TENNIS BALLS
========================================== */

html::before,
html::after,
body::before,
body::after {
    content: "only";

    position: fixed;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    border-radius: 50%;

    z-index: 999999;
    pointer-events: none;

    background-color: #c9f227;

    /* ملمس وإضاءة الكرة */
    background-image:
        radial-gradient(
            circle at 35% 28%,
            rgba(255,255,255,.35),
            transparent 32%
        ),
        radial-gradient(
            circle at 65% 72%,
            rgba(0,0,0,.10),
            transparent 45%
        );

    box-shadow:
        inset -5px -6px 12px rgba(0,0,0,.12),
        inset 5px 5px 10px rgba(255,255,255,.22),
        0 12px 25px rgba(0,0,0,.14);

    color: #111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: -0.7px;
    line-height: 1;

    text-transform: lowercase;

    opacity: .92;

    will-change: transform;
}


/* الكرة الأولى */
html::before {
    top: 12%;
    left: -90px;

    width: 58px;
    height: 58px;

    font-size: 13px;

    animation:
        onlyBallOne
        14s
        linear
        infinite;
}


/* الكرة الثانية */
html::after {
    top: 64%;
    right: -90px;

    width: 43px;
    height: 43px;

    font-size: 9px;

    animation:
        onlyBallTwo
        18s
        linear
        infinite;
}


/* الكرة الثالثة */
body::before {
    top: 38%;
    left: -110px;

    width: 34px;
    height: 34px;

    font-size: 7px;

    animation:
        onlyBallThree
        21s
        linear
        infinite;
}


/* الكرة الرابعة */
body::after {
    top: 78%;
    right: -120px;

    width: 76px;
    height: 76px;

    font-size: 16px;

    opacity: .72;

    animation:
        onlyBallFour
        25s
        linear
        infinite;
}


/* ==========================================
   BALL MOVEMENT
========================================== */

@keyframes onlyBallOne {

    0% {
        transform:
            translateX(-120px)
            translateY(20px)
            rotate(0deg);
    }

    28% {
        transform:
            translateX(32vw)
            translateY(-90px)
            rotate(280deg);
    }

    62% {
        transform:
            translateX(68vw)
            translateY(100px)
            rotate(650deg);
    }

    100% {
        transform:
            translateX(calc(100vw + 200px))
            translateY(-45px)
            rotate(1050deg);
    }
}


@keyframes onlyBallTwo {

    0% {
        transform:
            translateX(120px)
            translateY(10px)
            rotate(0deg);
    }

    45% {
        transform:
            translateX(-45vw)
            translateY(-130px)
            rotate(-430deg);
    }

    100% {
        transform:
            translateX(calc(-100vw - 200px))
            translateY(70px)
            rotate(-950deg);
    }
}


@keyframes onlyBallThree {

    0% {
        transform:
            translateX(-120px)
            translateY(0)
            rotate(0deg);
    }

    48% {
        transform:
            translateX(52vw)
            translateY(140px)
            rotate(520deg);
    }

    100% {
        transform:
            translateX(calc(100vw + 220px))
            translateY(-100px)
            rotate(980deg);
    }
}


@keyframes onlyBallFour {

    0% {
        transform:
            translateX(120px)
            translateY(30px)
            rotate(0deg);
    }

    50% {
        transform:
            translateX(-55vw)
            translateY(-170px)
            rotate(-520deg);
    }

    100% {
        transform:
            translateX(calc(-100vw - 240px))
            translateY(60px)
            rotate(-1080deg);
    }
}


/* ==========================================
   2. TENNIS BALL CURSOR
========================================== */

@media (pointer: fine) {

    html,
    body,
    a,
    button,
    input,
    select,
    textarea,
    [role="button"] {

        cursor:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='12' fill='%23c9f227'/%3E%3Cpath d='M5 8c6 3 8 8 8 14M25 8c-6 3-8 8-8 14' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
            15 15,
            auto;
    }

}


/* ==========================================
   3. PRODUCT CARD HOVER
========================================== */

:is(
    .product-card,
    .product-item,
    .product-entry,
    .s-product-card-entry,
    .s-product-card-vertical,
    product-card
) {
    position: relative;

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s cubic-bezier(.16,1,.3,1);

    border-radius: 4px;
}


/* ارتفاع المنتج */
@media (hover: hover) {

    :is(
        .product-card,
        .product-item,
        .product-entry,
        .s-product-card-entry,
        .s-product-card-vertical,
        product-card
    ):hover {

        transform:
            translateY(-8px);

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

}


/* ==========================================
   4. PRODUCT IMAGE ZOOM
========================================== */

:is(
    .product-card,
    .product-item,
    .product-entry,
    .s-product-card-entry,
    .s-product-card-vertical,
    product-card
) img {

    transition:
        transform .7s cubic-bezier(.16,1,.3,1),
        filter .4s ease;

    will-change: transform;
}


@media (hover: hover) {

    :is(
        .product-card,
        .product-item,
        .product-entry,
        .s-product-card-entry,
        .s-product-card-vertical,
        product-card
    ):hover img {

        transform:
            scale(1.06)
            rotate(-.7deg);

        filter:
            contrast(1.03)
            saturate(1.04);
    }

}


/* ==========================================
   5. ONLY LABEL ON PRODUCT HOVER
========================================== */

:is(
    .product-card,
    .product-item,
    .product-entry,
    .s-product-card-entry,
    .s-product-card-vertical,
    product-card
)::after {

    content: "ONLY";

    position: absolute;

    left: 16px;
    bottom: 16px;

    z-index: 30;

    padding:
        8px 12px;

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

    color: #111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .18em;

    opacity: 0;

    transform:
        translateY(12px);

    transition:
        opacity .3s ease,
        transform .4s cubic-bezier(.16,1,.3,1);

    pointer-events: none;
}


@media (hover: hover) {

    :is(
        .product-card,
        .product-item,
        .product-entry,
        .s-product-card-entry,
        .s-product-card-vertical,
        product-card
    ):hover::after {

        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ==========================================
   6. BUTTON HOVER
========================================== */

:is(
    button,
    .btn,
    .s-button-element,
    .button
) {

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;
}


@media (hover: hover) {

    :is(
        button,
        .btn,
        .s-button-element,
        .button
    ):hover {

        transform:
            translateY(-2px);

        box-shadow:
            0 9px 20px
            rgba(0,0,0,.10);
    }

}


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

@media (max-width: 768px) {

    /* نخلي كرتين فقط عشان الموقع ما يزحم */
    body::before,
    body::after {
        display: none;
    }


    html::before {
        width: 42px;
        height: 42px;

        font-size: 9px;

        opacity: .85;
    }


    html::after {
        width: 31px;
        height: 31px;

        font-size: 6px;

        opacity: .75;
    }


    /* بدون hover label على الجوال */
    :is(
        .product-card,
        .product-item,
        .product-entry,
        .s-product-card-entry,
        .s-product-card-vertical,
        product-card
    )::after {

        display: none;
    }

}


/* ==========================================
   ACCESSIBILITY
========================================== */

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

    html::before,
    html::after,
    body::before,
    body::after {
        display: none;
    }


    :is(
        .product-card,
        .product-item,
        .product-entry,
        .s-product-card-entry,
        .s-product-card-vertical,
        product-card
    ),
    :is(
        .product-card,
        .product-item,
        .product-entry,
        .s-product-card-entry,
        .s-product-card-vertical,
        product-card
    ) img {

        transition: none;
        transform: none;
    }

}