:root {
    --primary: #5b7b9e;
    --primary-light: #658cb2;
    --primary-dark: #425b78;
    

    --ivory: #fff;
    --paper: #EFE4D8;
    --burgundy: #5C1A2B;
    --burgundy-dark: #3B0F1C;
    --gold: #B08D57;
    --gold-light: #D9BF94;
    --ink: #2A1F22;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--ivory);
    font-family: 'Jost', sans-serif;
    /* overflow-x: hidden; */
}

.band{ 
    max-width: 750px; 
    margin: 0 auto; 
    padding: 0 26px; 
}

.eyebrow {
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--gold);
}

.title {        
    font-family: 'Edwardian Script ITC';
    font-weight: 600;
    font-size: 70px;
    color: var(--primary);
    margin: 16px 0;
    line-height: .8;
}

@media screen and (max-width: 850px) {
    .eyebrow{
        font-size: 10px;
    }

    .title{
        font-size: 50px;
    }
}

@media screen and (max-width: 650px) {
    *{
        font-size: 17px;
    }

    .title{
        font-size: 45px;
    }
}

/* ENVELOPPE */
    #envelope_stage {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        justify-content: center;
        background-image: url(imgbbg.jpg);
        background-position: center;
        z-index: 60000;
        transition: opacity 0.9s ease, visibility 0.9s ease;
    }

    #envelope_stage::before{
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        z-index: 61;
        background-color: #0f1f3190;
    }

    #envelope_stage.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .envelope_caption {
        text-align: center;
        color: var(--ivory);
        letter-spacing: 0.3em;
        text-transform: uppercase;
        font-size: 0.68rem;
        font-weight: bold;
        position: relative;
        z-index: 70;
    }

    .envelope {
        position: relative;
        width: 320px;
        height: 215px;
        cursor: pointer;
        z-index: 70;
    }

    .env_back {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, var(--primary), var(--primary-dark));
        border-radius: 4px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .env_card {
        position: absolute;
        left: 6%;
        right: 6%;
        bottom: 8%;
        height: 78%;
        background: var(--ivory);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: transform 1.05s cubic-bezier(.22, .9, .3, 1);
        z-index: 2;
    }

    .info_card{
        margin-top: 95px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
    }

    .env_card .initials {
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 1.3rem;
        color: var(--primary-dark);
    }

    .env_card .subline {
        font-size: .7rem;
        color: var(--gold);
    }

    .env_flap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        border-left: 160px solid transparent;
        border-right: 160px solid transparent;
        border-top: 108px solid var(--primary-light);
        transform-origin: top center;
        transition: transform 0.85s cubic-bezier(.6, -0.2, .3, 1.3);
        z-index: 3;
        filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
    }

    .envelope.open .env_flap {
        transform: rotateX(180deg);
    }

    .envelope.open .env_card {
        transform: translateY(-56%) scale(1.03);
    }

    .wax_seal {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60px;
        height: 60px;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 65%, #8a6a3a);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ivory);
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 1.15rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(0, 0, 0, 0.25);
        z-index: 4;
        transition: transform 0.3s ease, opacity 0.4s ease;
    }

    .envelope:hover .wax_seal {
        transform: translate(-50%, -50%) scale(1.06);
    }

    .envelope.open .wax_seal {
        opacity: 0;
    }

    .tap_hint {
        text-align: center;
        color: var(--ivory);
        letter-spacing: 0.3em;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: bold;
        text-wrap: nowrap;
        
        position: relative;
        z-index: 70;
        
        animation: pulse 3s ease-in-out infinite;
    }

    @keyframes pulse {
        0%,
        100% {
            opacity: .5;
        }
        50% {
            opacity: 1;
        }
    }
/* ENVELOPPE */

/* HERO */
    .hero {
        padding: 48px;
        width: 100%; height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        background-image: url(wi9.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        z-index: 1;
    }

    /* .hero::before{
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-color: #0f1f3150;
    } */

    .info_hero{
        z-index: 100;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        background-color: #0f1f3170;
        padding: 32px;
        border-radius: 16px;
    }

    .hero .subtitle {
        font-size: 12px;
        letter-spacing: 10px;
        text-transform: uppercase;
        color: var(--ivory);
        text-align: center;
        line-height: 1.6;
    }

    .hero .names {
        margin: 0;
        display: flex;
        align-items: center;
        text-align: center;
        span{
            font-family: 'Edwardian Script ITC';
            font-weight: 600;
            font-size: 130px;
            color: var(--ivory);
        }
    }

    .hero #amp {
        color: var(--primary-light);
        margin: 0 48px;
        margin-left: 10px;
    }

    .hero .date_big {
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 10px;
        color: var(--ivory);
        text-align: center;
        line-height: 1.6;
    }
    
    .designBottom{
        position: absolute;
        width: 100%; height: auto;
        left: 0; bottom: -40px;
        z-index: 100;
    }

    @media screen and (max-width: 850px) {
        .hero .subtitle {
            font-size: 10px;
        }

        .hero .names span{
            font-size: 100px;
        }

        #amp {
            margin-left: 16px;
        }

        .hero .date_big {
            font-size: 17px;
        }

        .designBottom{
            bottom: -25px;
        }
    }
    
    @media screen and (max-width: 700px) {
        .hero .names span {
            font-size: 80px;
        }

        .hero .date_big {
            font-size: 16px;
        }
    }
    
    @media screen and (max-width: 570px) {
        .hero .names span {
            font-size: 70px;
        }

        .hero .date_big {
            font-size: 15px;
        }
    }

    @media screen and (max-width: 550px) {
        .info_hero{
            gap: 5px;
            padding: 16px;
        }

        .hero .subtitle {
            font-size: 8px;
        }
        
        .hero .names {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            span{
                font-size: 65px;
            }
        }

        #amp {
            margin: -20px auto;
            padding-left: -50px;
        }

        .hero .date_big {
            font-size: 14px;
        }

        .designBottom{
            bottom: -5px;
        }
    }
    
    @media screen and (max-width: 450px) {
        .hero .subtitle, .hero .date_big {
            letter-spacing: 5px;
        }
    }
/* HERO */

/* VOEUX */
    .vows {
        text-align: center;
        padding: 20px 0 0;
        position: relative;
        z-index: 1000;
    }

    .vows p {
        line-height: 1.3;
        color: var(--ink);
        margin: 0 0 8px;
        font-family: 'Playfair Display', serif;
        font-style: italic;
    }

    .vows strong {
        color: var(--gold);
        font-weight: 600;
        text-decoration: underline;
    }
/* VOEUX */

/* COUNTDOWN */
    #countdown_section {
        text-align: center;
        margin: 48px 0;
    }

    #countdown_section .box_count{
        background-color: #425b7830;
        padding: 48px;
        border-radius: 16px;
    }

    .countdown {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .countdown .unit {
        min-width: 70px;
    }

    .countdown .num {
        font-family: 'Playfair Display', serif;
        font-size: 40px;
        color: var(--primary-dark);
        display: block;
    }

    .countdown .u_label {
        font-size: 10px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--gold);
    }

    @media screen and (max-width: 500px) {
        .countdown {
            gap: 16px;
        }

        .countdown .unit {
            min-width: 50px;
        }
    }
    
    @media screen and (max-width: 450px) {
        #countdown_section .box_count{
            padding: 48px 32px;
        }
    }
/* COUNTDOWN */

/* GALERIE */
    #gallery {
        text-align: center;
        scroll-margin-top: 70px;
    }

    .gallery_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 25px;
    }

    .gallery_grid .ph {
        aspect-ratio: 3 / 4;
        border-radius: 4px;
        overflow: hidden;
        background: linear-gradient(150deg, var(--ivory), var(--primary-light));
        display: flex;
        align-items: center;
        border: 1px solid var(--primary-dark);
    }

    .gallery_grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
/* GALERIE */

/* CITATION */
    .quote {
        text-align: center;
        margin: 32px auto;
    }

    .quote blockquote {
        font-family: 'Playfair Display', serif;
        font-style: italic;
        line-height: 1.5;
        max-width: 520px;
        margin-inline: auto;
    }

    .quote cite {
        display: block;
        margin-top: 0;
        font-family: 'Edwardian Script ITC';
        font-size: 48px;
        color: var(--primary-dark);
        b{
            font-size: 48px;
            margin-right: 16px;
            font-weight: 100;
        }
    }
/* CITATION */

/* DETAILS */
    #details {
        background: #425b7830;
        padding: 70px 0;
    }

    #details .band {
        text-align: center;
        max-width: 950px;
    }

    .detail_grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 16px;
        justify-content: center;
    }

    .detail_item{
        background-color: var(--primary);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px 16px;
        border-radius: 8px;
    }

    .detail_item h4 i{
        font-size: 22px;
        color: var(--gold-light);
    }

    .detail_item .big {
        font-size: 16px;
        color: var(--ivory);
    }

    .detail_item .small {
        font-size: 12px;
        color: var(--gold-light);
    }    

    @media (max-width: 470px) {        
        .detail_grid {
            grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
            gap: 10px;
        }
    }

    @media (max-width: 430px) {
        .detail_grid {
            max-width: 220px;
            margin: auto;
        }
    }
/* DETAILS */

/* FOOTER */
    footer {
        text-align: center;
        padding: 56px 20px 60px;
    }

    footer .monogram {
        font-family: 'Edwardian Script ITC';
        font-size: 56px;
        color: var(--primary);
        display: block;
        b{
            font-size: 56px;
            font-weight: 100;
            margin-right: 16px;
        }
    }

    footer .final_quote {
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 20px;
        margin: 10px auto;
    }

    footer p.date {
        font-size: 12px;
        letter-spacing: 5px;
        color: var(--gold);
        margin-top: 12px;
    }
/* FOOTER */