/* =====================================================
   ROOT COLORS
   ===================================================== */

:root {

    --ivory: #F8F4EA;

    --beige: #E8DDC7;

    --gold: #B89B5E;

    --dark-gold: #8C713C;

    --text: #51483A;

    --global-font:"Cormorant Garamond", serif;

    --global-title-size: 3rem;

    --global-paragraph-size: 1.25rem;
}


/* =====================================================
   RESET
   ===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {

    scroll-behavior: smooth;
}


body {

    font-family: var(--global-font);

    background: var(--ivory);

    color: var(--text);

    overflow-x: hidden;
}


button,
input,
textarea,
select {

    font-family: inherit;
}


h1,
h2,
h3,
p,
span,
a,
button,
small {

    font-family: inherit;
}


h2 {

    font-size: var(--global-title-size);

    font-weight: 400;

    color: var(--dark-gold);

    margin-bottom: 20px;
}


p {

    font-size: var(--global-paragraph-size);

    line-height: 2;
}


/* =====================================================
   ENVELOPE SCREEN
   ===================================================== */

#envelope-screen {

    height: 100vh;

    width: 100%;

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #f8f4ea,
            #e8ddc7
        );

    z-index: 1000;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


#envelope-screen.hide {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.envelope-wrapper {

    text-align: center;
}


/* =====================================================
   ENVELOPE
   ===================================================== */
/* =====================================================
   ENVELOPE IMAGE
   ===================================================== */

.envelope-image-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;
}


.envelope-image {

    width: 380px;

    max-width: 88vw;

    height: auto;

    display: block;

    opacity: 1;

    transition:
        opacity var(--envelope-fade, 400ms) ease,
        transform var(--envelope-fade, 400ms) ease;

    filter:
        drop-shadow(
            0 20px 30px
            rgba(0, 0, 0, 0.18)
        );
}


/* Completely hide current image */

.envelope-image.swap-out {

    opacity: 0;

    transform: scale(0.98);
}


/* Open envelope visible state */

.envelope-image.opening {

    opacity: 1;

    transform: scale(1.08);
}


/* Final fade to invitation */

.envelope-image.disappear {

    opacity: 0;

    transform: scale(1.15);
}



/* =====================================================
   OPEN BUTTON
   ===================================================== */

#openInvitation {

    margin-top: 55px;

    padding: 12px 38px;

    border: 1px solid var(--gold);

    background:  #4d2f04;

    color: white;

    font-size: 1.2rem;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


#openInvitation:hover {

    transform:
        translateY(-3px);

    background: transparent;

    color: var(--dark-gold);
}


/* =====================================================
   NORMAL SECTIONS
   ===================================================== */

.section {

    min-height: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 40px 25px;

    background: transparent;
}


.content {

    width: 100%;

    max-width: 850px;
}


/* =====================================================
   BLURRED BACKGROUND SYSTEM
   ===================================================== */

.blur-bg-section {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-color:
        var(--section-bg-color, var(--ivory));
}


/* Background photo */
/* =====================================================
   BLURRED BACKGROUND SYSTEM
   ===================================================== */
/* =====================================================
   ONE FIXED BACKGROUND FOR WHOLE INVITATION
   ===================================================== */

#invitation-background {

    position: fixed;

    inset: -30px;

    background-size: cover;

    background-repeat: no-repeat;

    background-position:
        var(--main-bg-position, center);

    filter:
        blur(var(--main-bg-blur, 7px));

    transform:
        scale(1.08);

    z-index: 0;

    pointer-events: none;
}


#invitation-background-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(
            40,
            30,
            20,
            var(--main-bg-overlay, 0.45)
        );

    z-index: 1;

    pointer-events: none;
}


/* All invitation content above background */

#invitation {

    position: relative;

    z-index: 2;
}


/* =====================================================
   COMMON DECORATION
   ===================================================== */

.gold-line {

    width: 75px;

    height: 1px;

    background: var(--gold);

    margin: 20px auto 35px;
}


.ornament {

    color: var(--gold);

    font-size: 2.2rem;

    margin-bottom: 20px;
}


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

.hero {

    color: white;
}


.hero-content {
     font-family: "Allura", cursive;
    width: 100%;

    max-width: 1000px;

    text-align: center;
}


.small-title {

    letter-spacing: 2px;

    margin-bottom: 15px;
}


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

.hero-image-wrapper {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin:
        10px auto 20px;
}


.hero-names-image {

    display: block;

    width: min(75vw, 500px);

    max-height: 32vh;

    object-fit: contain;

    object-position: center;

    margin: 0 auto;
}


.wedding-date {
    font-family: "Allura", cursive;
    margin-top: 25px;
}


.scroll-indicator {

    margin-top: 70px;

    font-size: 2rem;

    color: white;

    animation:
        bounce 2s infinite;
}


@keyframes bounce {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(10px);
    }
}


/* =====================================================
   DETAILS
   ===================================================== */

/* =====================================================
   WEDDING DETAILS
   ===================================================== */

.wedding-details-visual {

    display: flex;

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

    gap: 70px;

    margin-top: 35px;
}


/* =====================================================
   CALENDAR
   ===================================================== */

.wedding-calendar {

    width: 330px;

    padding: 30px;

    border:
        1px solid
        rgba(218, 190, 120, 0.7);

    background:
        rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(5px);

    border-radius: 4px;
}


.calendar-month {

    font-family:
        "Allura",
        cursive;

    font-size: 2.8rem;

    color: #f3dfad;

    margin-bottom: 20px;
}


.calendar-weekdays {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    margin-bottom: 12px;
}


.calendar-weekdays span {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 0.9rem;

    color:
        rgba(255, 255, 255, 0.7);
}


.calendar-days {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 7px;
}


.calendar-day {

    aspect-ratio: 1;

    display: flex;

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

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 1.1rem;

    color: white;
}


/* Wedding date */

.calendar-day.wedding-day {

    background:
        var(--gold);

    color: white;

    border-radius: 50%;

    font-weight: 600;

    box-shadow:
        0 0 18px
        rgba(184, 155, 94, 0.55);

    position: relative;
}


/* Small decorative circle */

.calendar-day.wedding-day::after {

    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid
        rgba(243, 223, 173, 0.7);

    border-radius: 50%;
}


/* =====================================================
   TIME
   ===================================================== */

.wedding-time {

    min-width: 220px;

    text-align: center;
}


.clock-icon {

    width: 120px;

    height: 120px;

    margin:
        0 auto 25px;

    border:
        2px solid
        var(--gold);

    border-radius: 50%;

    position: relative;
}


/* Hour hand */

.clock-hour {

    position: absolute;

    width: 2px;

    height: 30px;

    background:
        #f3dfad;

    left: 50%;

    top: 50%;

    transform-origin:
        bottom center;

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


/* Minute hand */

.clock-minute {

    position: absolute;

    width: 2px;

    height: 42px;

    background:
        #f3dfad;

    left: 50%;

    top: 50%;

    transform-origin:
        bottom center;

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


.clock-center {

    position: absolute;

    width: 9px;

    height: 9px;

    background:
        var(--gold);

    border-radius: 50%;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);
}


.time-label {

    font-family:
        "Allura",
        cursive;

    font-size: 2rem;

    color: #f3dfad;
}


.time-value {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 2.2rem;

    color: white;

    margin-top: 5px;
}


.details-venue {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 1.4rem;

    color: white;

    margin-top: 45px;

    letter-spacing: 1px;
}

/* =====================================================
   COUNTDOWN
   ===================================================== */

.countdown {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 40px;
}


.countdown div {

    min-width: 100px;

    padding: 20px 10px;

    border:
        1px solid
        rgba(220, 196, 135, 0.65);

    background:
        rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(3px);
}


.countdown span {

    display: block;

    color: #f3dfad;

    line-height: 1.2;
}


.countdown small {

    display: block;

    color: white;

    font-size: 1.1rem;

    margin-top: 8px;
}


/* =====================================================
   GALLERY
   ===================================================== */

.gallery-section {

    min-height: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:  40px 25px 15px;


    background: transparent;
}


.gallery {

    display: grid;

    grid-template-columns:
        repeat(
            var(--gallery-columns, 2),
            1fr
        );

    gap:
        var(--gallery-gap, 15px);
}


.gallery img {

    width: 100%;

    aspect-ratio:
        var(
            --gallery-aspect-ratio,
            1 / 1
        );

    object-fit: cover;

    display: block;

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    transition:
        transform 0.5s ease,
        opacity 0.5s ease,
        box-shadow 0.5s ease;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;

    -webkit-user-drag: none;

    pointer-events: auto;
}


.gallery img:hover {

    transform:
        scale(1.03);

    box-shadow:
        0 15px 30px
        rgba(0, 0, 0, 0.2);
}

.great-vibes-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
}

/* =====================================================
   LOCATION BUTTON
   ===================================================== */

.gold-button {

    display: inline-block;

    margin-top: 30px;

    padding: 12px 32px;

    border:
        1px solid
        var(--gold);

    color: #fff7e6;

    text-decoration: none;

    font-size: 1.2rem;

    background:
        rgba(184, 155, 94, 0.15);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.gold-button:hover {

    background:
        var(--gold);

    color:
        white;

    transform:
        translateY(-3px);
}


/* =====================================================
   CLOSING
   ===================================================== */

.gallery-closing {

    margin-top: 45px;

    text-align: center;
}


.gallery-closing .ornament {

    margin-bottom: 20px;
}


#closing-message {

    max-width: 500px;

    margin: 0 auto;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 1.7rem;

    line-height: 1.8;

    color: white;
}


.closing-line {

    margin-top: 25px;

    margin-bottom: 0;
}

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

@media (max-width: 700px) {
    .hero-image-wrapper {

    margin:
        5px auto 15px;
}


.hero-names-image {

    width: 82vw;

    max-width: 360px;

    max-height: 28vh;
}
    
    .closing .content {
    transform: translateY(-130px);
}

    .wedding-details-visual {

    flex-direction: column;

    gap: 45px;
}


.wedding-calendar {

    width: min(
        330px,
        92vw
    );

    padding: 22px;
}


.clock-icon {

    width: 100px;

    height: 100px;
}

    .section {

        padding:
            70px 20px;
        background: transparent;
    }


    .details {

        grid-template-columns:
            1fr;

        gap:
            15px;
    }


    .gallery {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .countdown {

        gap:
            10px;
    }


    .countdown div {

        min-width:
            calc(50% - 10px);

        padding:
            15px 5px;
    }


    .envelope {

        width:
            min(290px, 85vw);

        height:
            190px;
    }


    .heart {

        display: block;

        margin:
            5px 0;
    }


    .couple-names {

        line-height:
            1.05;
    }

}


/* =====================================================
   VERY SMALL MOBILE
   ===================================================== */

@media (max-width: 400px) {

    .gallery {

        gap:
            8px;
    }


    .countdown div {

        min-width:
            calc(50% - 6px);
    }

}


/* =====================================================
   TYPOGRAPHY
   ===================================================== */


/* -----------------------------------------------------
   ENVELOPE
   ----------------------------------------------------- */

#openInvitation {
    font-family: "Allura", serif;
    font-size: 2rem;
}


/* -----------------------------------------------------
   HERO
   ----------------------------------------------------- */

/* "Wedding Invitation" */

#hero-opening {
    font-family: "Allura", cursive;

    font-size: 1.85rem;

    /* Change color here */
    color: #f3dfad;

    /* Move it slightly upward */
    transform: translateY(-15px);
}


/* Mariam ♥ Hazem */

.couple-names {
    font-family: "Allura", cursive;
    font-size: clamp(4rem, 12vw, 8rem);
}


/* Wedding date */

#wedding-date {
    font-family: "Allura", serif;
    font-size: 1.65rem;
     color: #f3dfad;
}
/* Welcome paragraph */

#welcome-message {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
}


/* -----------------------------------------------------
   WELCOME
   ----------------------------------------------------- */

/* Example: "With Love" */

#welcome-title {
    font-family: "Allura", cursive;
    font-size: 4.5rem;
}




/* -----------------------------------------------------
   STORY
   ----------------------------------------------------- */

/* "Our Story" */



/* -----------------------------------------------------
   WEDDING DETAILS
   ----------------------------------------------------- */

/* Main title */

#details-title {
    font-family: "Allura", cursive;
    font-size: 4.5rem;
}


/* Date / Time / Venue labels */

.detail-card h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.8rem;
    font-weight: 600;
}


/* Actual date / time / venue */

#detail-date,
#detail-time,
#detail-venue {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.4rem;
}


/* -----------------------------------------------------
   COUNTDOWN
   ----------------------------------------------------- */

/* "Counting Down..." */

#countdown-title {
    font-family: "Allura", cursive;
    font-size: 4.5rem;
}


/* Countdown numbers */

.countdown span {
    font-family: "Cormorant Garamond", serif;
    font-size: 3.5rem;
}


/* Days / Hours / Minutes / Seconds */

.countdown small {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
}


/* -----------------------------------------------------
   GALLERY
   ----------------------------------------------------- */

/* "Our Moments" */

#gallery-title {
    font-family: "Allura", cursive;
    font-size: 4.5rem;
}


/* -----------------------------------------------------
   LOCATION
   ----------------------------------------------------- */

/* "Wedding Venue" */

#location-title {
    font-family: "Allura", cursive;
    font-size: 4.5rem;
}


/* Venue name */

#location-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.6rem;
}


/* Map button */

#location-button {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.3rem;
}


/* -----------------------------------------------------
   CLOSING
   ----------------------------------------------------- */

/* Mariam & Hazem */

#closing-section h2 {
    font-family: "Allura", cursive;
    font-size: 5rem;
}


/* Final message */

#closing-message {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.4rem;
}

/* Arrow */
.section-arrow {
    position: relative;
    z-index: 3;

    text-align: center;

    color: white;

    font-size: 2rem;

    line-height: 1;

    margin: 0px 0;

    animation: bounce 2s infinite;
}


/* =====================================================
   FIXED AUDIO CONTROL
   ===================================================== */

.audio-control {

    position: fixed;

    left: 18px;

    bottom:
        max(
            18px,
            env(safe-area-inset-bottom)
        );

    width: 46px;
    height: 46px;

    border-radius: 50%;

    border:
        1px solid var(--gold);

    background:
        rgba(77, 47, 4, 0.72);

    color:
        #F3DFAD;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 1rem;

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

    cursor: pointer;

    z-index: 100;

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(10px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        background 0.3s ease;
}


.audio-control.visible {

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0);
}


.audio-control:hover {

    background:
        rgba(184, 155, 94, 0.8);
}


@media (max-width: 700px) {

    .audio-control {

        width: 44px;
        height: 44px;

        left: 14px;

        bottom:
            max(
                14px,
                env(safe-area-inset-bottom)
            );
    }
}