.details-guide-section {
    position: relative;
    background: var(--ivory);
    color: var(--burgundy);
    overflow: hidden;
    padding: clamp(80px, 10vh, 130px) 24px;
}

.guide-content {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
}

/* =========================================
                           SATIN LIGHT EFFECT
                        ========================================= */

.details-guide-section::before {
    content: "";
    position: absolute;
    inset: -25%;
    pointer-events: none;
    background: linear-gradient( 115deg, transparent 0%, rgba(255,255,255,.00) 30%, rgba(255,255,255,.10) 47%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.10) 53%, rgba(255,255,255,.00) 70%, transparent 100% );
    transform: translateX(-130%) rotate(-10deg);
    animation: satinSweep 16s ease-in-out infinite;
    z-index: 0;
}



/* LARGE BACKGROUND I / J */

.guide-bg-letter {
    position: absolute;
    z-index: 0;
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    line-height: 0.7;
    color: rgba(82, 0, 13, 0.04);
    pointer-events: none;
    user-select: none;
}

.guide-bg-j {
    top: 2%;
    right: -7%;
    font-size: clamp(28rem, 52vw, 56rem);
    animation: monogram-drift-alt 28s ease-in-out infinite;
}

.guide-bg-i {
    bottom: -5%;
    left: -5%;
    font-size: clamp(26rem, 48vw, 52rem);
    animation: monogram-drift 25s ease-in-out infinite;
}


/* =========================================
                           SHARED HEADINGS
                        ========================================= */

.guide-header {
    width: min(900px, 100%);
    margin: 0 auto clamp(55px, 7vh, 85px);
    text-align: center;
}

.guide-eyebrow {
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.65;
    margin-bottom: 16px;
}

.guide-title {
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.guide-intro {
    max-width: 850px;
    margin: 28px auto 0;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1.55;
}

.guide-divider {
    position: relative;
    overflow: hidden;
    width: 70px;
    height: 1px;
    margin: 25px auto 0;
    background: linear-gradient( 90deg, transparent, rgba(82, 0, 13, 0.55), transparent );
}


    .guide-divider::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.8), transparent );
        animation: dividerShimmer 12s linear infinite;
    }


/* =========================================
                           DRESS CODE CARDS
                        ========================================= */

.dress-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 50px);
}

.dress-card {
    position: relative;
    min-height: 410px;
    padding: clamp(45px, 6vw, 70px) clamp(28px, 5vw, 60px);
    border: 1px solid rgba(82, 0, 13, 0.18);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .dress-card::before {
        content: "";
        position: absolute;
        inset: 10px;
        border: 1px solid rgba(82, 0, 13, 0.08);
        pointer-events: none;
    }

.dress-card-number {
    position: absolute;
    top: 20px;
    right: 28px;
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1;
    opacity: 0.045;
}

.dress-card-label {
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.dress-card-title {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 300;
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.dress-card-text {
    max-width: 440px;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.55;
}

    .dress-card-text strong {
        font-weight: 600;
    }


/* COLOR SWATCHES */

.dress-swatches {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}


.dress-swatch {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid var(--ivory);
    outline: 1px solid rgba(82, 0, 13, 0.16);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    animation: swatchFloat 6s ease-in-out infinite;
}

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

.swatch-burgundy {
    background: #52000d;
}

.swatch-wine {
    background: #75001b;
}

.swatch-deep-wine {
    background: #3c0009;
}

.swatch-champagne {
    background: #ead6d2;
}

.swatch-cream {
    background: #f3e8dc;
}

.swatch-gold {
    background: #d6bd91;
}


/* AVOID NOTE */

.dress-avoid {
    width: min(850px, 100%);
    margin: clamp(45px, 6vh, 70px) auto 0;
    padding-top: 35px;
    border-top: 1px solid rgba(82, 0, 13, 0.15);
    text-align: center;
}

    .dress-avoid p {
        font-size: clamp(1.1rem, 2vw, 1.45rem);
        line-height: 1.55;
    }

    .dress-avoid strong {
        font-weight: 600;
    }


/* =========================================
                           GIFT GUIDE
                        ========================================= */

.gift-guide {
    position: relative;
    margin-top: 70px;
    padding-top: 55px;
    border-top: 1px solid rgba(82, 0, 13, 0.13);
}
.gift-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
}

.gift-title-wrap {
    text-align: center;
}

.gift-title {
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gift-monogram {
    margin-top: 35px;
    font-size: clamp(7rem, 14vw, 13rem);
    font-weight: 300;
    line-height: 0.8;
    opacity: 0.07;
}

.gift-message {
    text-align: center;
}

    .gift-message p {
        font-size: clamp(1.1rem, 2vw, 1.4rem);
        line-height: 1.65;
    }

        .gift-message p + p {
            margin-top: 28px;
        }

    .gift-message strong {
        font-weight: 600;
    }

.guide-transition {
    width: min(760px, 100%);
    margin: 70px auto 0;
    text-align: center;
}

.guide-transition-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 28px;
}

    .guide-transition-divider::before,
    .guide-transition-divider::after {
        content: "";
        flex: 1;
        max-width: 180px;
        height: 1px;
        background: rgba(82,0,13,.18);
    }

    .guide-transition-divider span {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.5rem;
        letter-spacing: .15em;
        color: var(--burgundy);
        opacity: .65;
    }

.guide-transition h3 {
    font-size: clamp(2rem,4vw,3rem);
    font-weight: 300;
    margin-bottom: 18px;
}

.guide-transition p {
    font-size: clamp(1.05rem,2vw,1.35rem);
    line-height: 1.7;
    max-width: 620px;
    margin: auto;
}


/* QR PLACEHOLDER */

.gift-qr-placeholder {
    width: 180px;
    height: 180px;
    margin: 40px auto 0;
    border: 1px solid rgba(82, 0, 13, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

    .gift-qr-placeholder span {
        font-family: "Montserrat", sans-serif;
        font-size: 0.65rem;
        line-height: 1.7;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        opacity: 0.55;
    }


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

.guide-reveal {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--guide-delay, 0s), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--guide-delay, 0s);
}

    .guide-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* =========================================
                           DRESS CODE + GIFT GUIDE - CONTINUOUS MOTION
                        ========================================= */

/* Soft glow moving inside dress cards */
.dress-card {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.8s ease, box-shadow 0.8s ease;
}

    .dress-card::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        top: -100px;
        left: -100px;
        border-radius: 50%;
        background: rgba(82, 0, 13, 0.045);
        filter: blur(65px);
        pointer-events: none;
        animation: dress-glow 12s ease-in-out infinite;
    }

    .dress-card:nth-child(2)::after {
        top: auto;
        left: auto;
        right: -100px;
        bottom: -100px;
        animation: dress-glow-alt 14s ease-in-out infinite;
    }


/* Floating color circles */

.dress-swatch {
    animation: swatch-float 5s ease-in-out infinite;
}

    .dress-swatch:nth-child(2) {
        animation-delay: -1.6s;
    }

    .dress-swatch:nth-child(3) {
        animation-delay: -3.2s;
    }


/* Gift IJ gently breathes */

.gift-monogram {
    animation: gift-breathe 7s ease-in-out infinite;
}


/* Gift section subtle glow */

.gift-guide::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -180px;
    top: 10%;
    border-radius: 50%;
    background: rgba(82, 0, 13, 0.035);
    filter: blur(90px);
    pointer-events: none;
    animation: gift-glow 12s ease-in-out infinite;
}


/* Hover effect for desktop */

@media (hover: hover) and (pointer: fine) {

    .dress-card:hover {
        transform: translateY(-8px);
        border-color: rgba(82, 0, 13, 0.35);
        box-shadow: 0 25px 65px rgba(82, 0, 13, 0.08);
    }
}


/* ANIMATIONS */

@keyframes dividerShimmer {

    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

@keyframes satinSweep {

    0% {
        transform: translateX(-130%) rotate(-10deg);
    }

    45% {
        transform: translateX(-130%) rotate(-10deg);
    }

    75% {
        transform: translateX(130%) rotate(-10deg);
    }

    100% {
        transform: translateX(130%) rotate(-10deg);
    }
}

@keyframes dress-glow {

    0%, 100% {
        transform: translate(0, 0) scale(0.9);
        opacity: 0.4;
    }

    50% {
        transform: translate(350px, 250px) scale(1.15);
        opacity: 0.9;
    }
}

@keyframes dress-glow-alt {

    0%, 100% {
        transform: translate(0, 0) scale(0.9);
        opacity: 0.4;
    }

    50% {
        transform: translate(-350px, -250px) scale(1.15);
        opacity: 0.9;
    }
}

@keyframes swatch-float {

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

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

@keyframes swatchFloat {

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

    50% {
        transform: translateY(-5px) scale(1.08);
    }
}

@keyframes gift-breathe {

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

    50% {
        transform: scale(1.04);
        opacity: 0.11;
    }
}

@keyframes gift-glow {

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

    50% {
        transform: translate(-180px, 80px) scale(1.15);
    }
}

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

@media (max-width: 600px) {

 
    .dress-card:hover {
        transform: translateY(-8px);
    }

        .dress-card:hover .dress-card-title {
            letter-spacing: .08em;
            transition: .8s;
        }

    .details-guide-section {
        padding: 75px 18px;
    }

    .guide-header {
        margin-bottom: 50px;
    }

    .guide-title,
    .gift-title {
        letter-spacing: 0.04em;
    }

    .dress-code-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .dress-card {
        min-height: 370px;
        padding: 55px 28px;
    }

    .dress-swatch {
        width: 36px;
        height: 36px;
    }

    .gift-guide {
        margin-top: 80px;
        padding-top: 60px;
    }

    .gift-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .gift-monogram {
        margin-top: 25px;
    }

    .guide-bg-j {
        right: -45%;
    }

    .guide-bg-i {
        left: -35%;
    }

    .gift-qr {
        display: block;
        width: 180px;
        height: 180px;
        margin: 40px auto 0;
        padding: 12px;
        box-sizing: border-box;
        background: white;
        border: 1px solid rgba(82, 0, 13, 0.22);
        object-fit: contain;
    }
   
}

/* Gift QR — all screen sizes */
.gift-qr {
    display: block;
    width: min(260px, 100%);
    height: auto;
    margin: 40px auto 0;
    padding: 12px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid rgba(82, 0, 13, 0.22);
}

.gift-qr-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.gift-qr-link {
    display: block;
    width: min(260px, 100%);
}

    .gift-qr-link .gift-qr {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        cursor: zoom-in;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .gift-qr-link:hover .gift-qr {
        transform: scale(1.03);
        box-shadow: 0 8px 22px rgba(82, 0, 13, 0.18);
    }

.gift-qr-download {
    display: block;
    margin-top: 16px;
    color: #52000d;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}