/* ============================================================
            RAY STUDIO COLLECTION INTRO
============================================================ */

.collection-intro-section {

    position: relative;

    min-height: 390px;

    padding: 55px 25px 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #f8f2ea 100%
        );
}


/* ============================================================
            SUBTLE BACKGROUND THREAD CURVES
============================================================ */

.intro-thread-background {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.intro-thread-curve {

    position: absolute;

    border:

        1px solid
        rgba(168, 116, 58, 0.12);

    border-radius: 50%;
}


.intro-thread-curve-one {

    width: 500px;

    height: 210px;

    top: -80px;

    left: -120px;

    transform: rotate(15deg);

    animation:
        introThreadFloatOne
        9s ease-in-out
        infinite;
}


.intro-thread-curve-two {

    width: 580px;

    height: 230px;

    right: -180px;

    bottom: -90px;

    transform: rotate(-12deg);

    animation:
        introThreadFloatTwo
        10s ease-in-out
        infinite;
}


.intro-thread-curve-three {

    width: 290px;

    height: 120px;

    left: 50%;

    top: 50%;

    opacity: 0.45;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);
}


/* ============================================================
            INTRO CONTENT
============================================================ */

.collection-intro-content {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 760px;

    text-align: center;
}


/* ============================================================
            SMALL TITLE
============================================================ */

.collection-intro-small {

    margin-bottom: 13px;

    color: #a8743a;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(15px);

    transition:

        opacity 0.7s ease,

        transform 0.7s ease;
}


/* ============================================================
            MAIN TITLE
============================================================ */

.collection-intro-title {

    color: #4b3328;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(48px, 6vw, 72px);

    font-weight: 600;

    line-height: 1;

    opacity: 0;

    transform: translateY(28px);

    transition:

        opacity 0.9s ease 0.12s,

        transform 0.9s ease 0.12s;
}


/* ============================================================
            NEEDLE + THREAD DIVIDER
============================================================ */

.intro-thread-divider {

    position: relative;

    width: 260px;

    height: 32px;

    margin: 24px auto 18px;

    opacity: 0;

    transition:
        opacity 0.8s ease 0.3s;
}


/* THREAD */

.intro-thread-line {

    position: absolute;

    top: 15px;

    left: 0;

    width: 0;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #a8743a 15%,
            #a8743a 85%,
            transparent
        );

    transition:
        width 1.5s ease 0.3s;
}


/* NEEDLE */

.intro-needle {

    position: absolute;

    top: 9px;

    left: -10px;

    width: 35px;

    height: 4px;

    border-radius: 10px;

    background: #4b3328;

    transform:
        rotate(-10deg);

    opacity: 0;
}


/* NEEDLE POINT */

.intro-needle::after {

    content: "";

    position: absolute;

    right: -7px;

    top: 0;

    width: 0;

    height: 0;

    border-top:
        2px solid transparent;

    border-bottom:
        2px solid transparent;

    border-left:
        8px solid #4b3328;
}


/* NEEDLE EYE */

.intro-needle::before {

    content: "";

    position: absolute;

    left: 5px;

    top: 1px;

    width: 4px;

    height: 2px;

    border-radius: 50%;

    background: #eee0cd;
}


/* ============================================================
            DESCRIPTION
============================================================ */

.collection-intro-description {

    max-width: 560px;

    margin: 0 auto;

    color: #6e5a50;

    font-size: 13px;

    line-height: 1.9;

    opacity: 0;

    transform: translateY(18px);

    transition:

        opacity 0.8s ease 0.55s,

        transform 0.8s ease 0.55s;
}


/* ============================================================
            SCROLL INDICATOR
============================================================ */

.collection-scroll-indicator {

    margin-top: 28px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: rgba(75, 51, 40, 0.55);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: 0;

    transition:
        opacity 0.8s ease 0.8s;
}


.collection-scroll-indicator i {

    color: #a8743a;

    font-size: 12px;

    animation:
        collectionArrowMove
        1.7s ease-in-out
        infinite;
}


/* ============================================================
            SHOW INTRO
============================================================ */

.collection-intro-section.intro-visible
.collection-intro-small,

.collection-intro-section.intro-visible
.collection-intro-title,

.collection-intro-section.intro-visible
.collection-intro-description,

.collection-intro-section.intro-visible
.intro-thread-divider,

.collection-intro-section.intro-visible
.collection-scroll-indicator {

    opacity: 1;

    transform: translateY(0);
}


.collection-intro-section.intro-visible
.intro-thread-line {

    width: 100%;
}


.collection-intro-section.intro-visible
.intro-needle {

    animation:

        needleTravel
        1.5s ease
        0.3s forwards,

        needleFloat
        2.8s ease-in-out
        1.8s infinite;
}


/* ============================================================
            LATEST COLLECTION HEADING REVEAL
============================================================ */

.section-heading {

    opacity: 0;

    transform: translateY(25px);

    transition:

        opacity 0.8s ease,

        transform 0.8s ease;
}


.section-heading.reveal-visible {

    opacity: 1;

    transform: translateY(0);
}


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

.product-card {

    opacity: 0;

    transform: translateY(30px);

    transition:

        opacity 0.65s ease,

        transform 0.65s ease,

        box-shadow 0.35s ease;
}


.product-card.product-visible {

    opacity: 1;

    transform: translateY(0);
}


.product-card.product-visible:hover {

    transform: translateY(-8px);
}


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

@keyframes needleTravel {

    0% {

        left: -10px;

        opacity: 0;
    }

    15% {

        opacity: 1;
    }

    100% {

        left: 235px;

        opacity: 1;
    }

}


@keyframes needleFloat {

    0%,
    100% {

        transform:
            rotate(-10deg)
            translateY(0);
    }

    50% {

        transform:
            rotate(-7deg)
            translateY(-3px);
    }

}


@keyframes collectionArrowMove {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(6px);
    }

}


@keyframes introThreadFloatOne {

    0%,
    100% {

        transform:
            rotate(15deg)
            translate(0, 0);
    }

    50% {

        transform:
            rotate(18deg)
            translate(25px, 15px);
    }

}


@keyframes introThreadFloatTwo {

    0%,
    100% {

        transform:
            rotate(-12deg)
            translate(0, 0);
    }

    50% {

        transform:
            rotate(-15deg)
            translate(-25px, -10px);
    }

}


/* ============================================================
            TABLET
============================================================ */

@media screen and (max-width: 800px) {

    .collection-intro-section {

        min-height: 340px;

        padding:
            60px
            20px
            50px;
    }


    .intro-thread-divider {

        width: 220px;
    }


    @keyframes needleTravel {

        0% {

            left: -10px;

            opacity: 0;
        }

        15% {

            opacity: 1;
        }

        100% {

            left: 195px;

            opacity: 1;
        }

    }

}


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

@media screen and (max-width: 550px) {

    .collection-intro-section {

        min-height: 310px;

        padding:
            50px
            18px
            45px;
    }


    .collection-intro-title {

        font-size: 45px;
    }


    .collection-intro-description {

        font-size: 12px;

        line-height: 1.75;
    }


    .intro-thread-divider {

        width: 180px;

        margin-top: 20px;
    }


    @keyframes needleTravel {

        0% {

            left: -10px;

            opacity: 0;
        }

        15% {

            opacity: 1;
        }

        100% {

            left: 155px;

            opacity: 1;
        }

    }

}


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

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

    .intro-thread-curve,
    .intro-needle,
    .collection-scroll-indicator i {

        animation: none !important;
    }


    .collection-intro-small,
    .collection-intro-title,
    .collection-intro-description,
    .intro-thread-divider,
    .collection-scroll-indicator,
    .section-heading,
    .product-card {

        opacity: 1;

        transform: none;
    }


    .intro-thread-line {

        width: 100%;
    }

}