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

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "Tajawal", sans-serif;

    background: #f8f5ef;

    color: #2d2925;

    text-align: center;

    line-height: 1.8;

    overflow-x: hidden;

}


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

section {

    min-height: 85vh;

    padding: 90px 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: relative;

    overflow: hidden;

}


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

.hero {

    min-height: 100vh;

    background:

        radial-gradient(
            circle at center,
            #fbf9f4 0%,
            #f8f5ef 55%,
            #f2eee6 100%
        );

}


.hero-content {

    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

}


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

.hero-intro {

    opacity: 0;

    transform: translateY(25px);

    animation:

        heroAppear
        0.9s
        ease-out
        forwards;

}


.intro-1 {
    animation-delay: 0.2s;
}


.intro-2 {
    animation-delay: 0.45s;
}


.intro-3 {
    animation-delay: 0.7s;
}


.intro-4 {
    animation-delay: 0.95s;
}


.intro-5 {
    animation-delay: 1.2s;
}


.intro-6 {
    animation-delay: 1.45s;
}


.intro-7 {
    animation-delay: 1.7s;
}


@keyframes heroAppear {

    0% {

        opacity: 0;

        transform:
            translateY(25px);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================
   TEXT
========================= */

.eyebrow {

    font-size: 13px;

    letter-spacing: 1px;

    margin-bottom: 22px;

    opacity: 0.6;

}


h1 {

    font-family: "Cairo", sans-serif;

    font-size:
        clamp(
            45px,
            10vw,
            82px
        );

    font-weight: 400;

    line-height: 1.3;

    margin-bottom: 18px;

}


h1 span {

    font-weight: 300;

    margin: 0 10px;

}


.gold-line {

    width: 55px;

    height: 1px;

    background: #b79a6a;

    margin-bottom: 25px;

}


.date {

    font-family: "Cairo", sans-serif;

    font-size: 18px;

    letter-spacing: 1px;

    margin-bottom: 42px;

    opacity: 0.8;

}


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

.countdown {

    display: flex;

    direction: ltr;

    gap: 25px;

    margin-bottom: 42px;

}


.countdown-item {

    min-width: 75px;

}


.countdown strong {

    display: block;

    min-height: 48px;

    font-family: "Cairo", sans-serif;

    font-size: 34px;

    font-weight: 400;

    line-height: 1.3;

}


.countdown small {

    display: block;

    font-size: 12px;

    opacity: 0.55;

}


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

.countdown strong.fade-out {

    opacity: 0;

    transform:
        translateY(-8px);

    transition:

        opacity 0.35s ease,

        transform 0.35s ease;

}


.countdown strong.fade-in {

    opacity: 1;

    transform:
        translateY(0);

    transition:

        opacity 0.35s ease,

        transform 0.35s ease;

}


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

.button {

    display: inline-block;

    padding:
        13px 32px;

    background: #2d2925;

    color: #ffffff;

    text-decoration: none;

    border: none;

    font-family:
        "Cairo",
        sans-serif;

    font-size: 13px;

    cursor: pointer;

    transition:

        transform 0.35s ease,

        opacity 0.35s ease,

        box-shadow 0.35s ease;

}


.button:hover {

    transform:
        translateY(-3px);

    opacity: 0.9;

    box-shadow:

        0 8px 25px
        rgba(
            45,
            41,
            37,
            0.12
        );

}


.button:disabled {

    opacity: 0.6;

    cursor: wait;

    transform: none;

}


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

.scroll-down {

    margin-top: 38px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-decoration: none;

    color: #2d2925;

    font-size: 12px;

    opacity: 0.55;

}


.arrow {

    display: block;

    font-size: 23px;

    margin-top: 5px;

    animation:

        arrowBounce
        2s
        ease-in-out
        2.6s
        infinite;

}


@keyframes arrowBounce {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(8px);

    }

}


/* =========================
   DECOR
========================= */

.decor {

    position: absolute;

    width: 180px;

    height: 420px;

    border:
        1px solid
        rgba(
            183,
            154,
            106,
            0.22
        );

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

}


.decor-right {

    right: -130px;

    top: 25%;

    transform:
        rotate(25deg);

    animation:

        decorFloatRight
        8s
        ease-in-out
        infinite;

}


.decor-left {

    left: -130px;

    bottom: 15%;

    transform:
        rotate(-25deg);

    animation:

        decorFloatLeft
        9s
        ease-in-out
        infinite;

}


@keyframes decorFloatRight {

    0%,
    100% {

        transform:
            rotate(25deg)
            translateY(0);

    }

    50% {

        transform:
            rotate(25deg)
            translateY(-15px);

    }

}


@keyframes decorFloatLeft {

    0%,
    100% {

        transform:
            rotate(-25deg)
            translateY(0);

    }

    50% {

        transform:
            rotate(-25deg)
            translateY(15px);

    }

}


/* =========================
   FLOATING DOTS
========================= */

.floating-dot {

    position: absolute;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #b79a6a;

    opacity: 0.4;

    pointer-events: none;

}


.dot-one {

    top: 25%;

    right: 18%;

    animation:
        dotFloat
        6s
        ease-in-out
        infinite;

}


.dot-two {

    bottom: 30%;

    left: 17%;

    animation:
        dotFloat
        7s
        ease-in-out
        infinite
        reverse;

}


.dot-three {

    top: 42%;

    left: 25%;

    animation:
        dotFloat
        8s
        ease-in-out
        infinite;

}


@keyframes dotFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-18px);

    }

}


/* =========================
   VENUE
========================= */

.venue {

    background: #f5f1e9;

}


.rsvp {

    background: #faf8f3;

}


/* =========================
   SECTION DECORATION
========================= */

.section-decoration {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 20px;

}


.section-decoration span {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #b79a6a;

    opacity: 0.6;

}


h2 {

    font-family:
        "Cairo",
        sans-serif;

    font-size: 38px;

    font-weight: 400;

    margin-bottom: 18px;

}


.thin-line {

    width: 45px;

    height: 1px;

    background: #b79a6a;

    margin-bottom: 25px;

}


/* =========================
   VENUE
========================= */

.venue-name {

    font-family:
        "Cairo",
        sans-serif;

    font-size: 22px;

    margin-bottom: 4px;

}


.venue-address {

    opacity: 0.65;

    margin-bottom: 25px;

}


/* =========================
   RSVP
========================= */

.rsvp-text {

    font-size: 14px;

    opacity: 0.65;

    margin-bottom: 25px;

}


form {

    width:
        min(
            400px,
            100%
        );

    display: flex;

    flex-direction: column;

    gap: 14px;

}


input {

    width: 100%;

    padding:
        15px 17px;

    border:
        1px solid
        #d8d1c6;

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

    font-family:
        "Tajawal",
        sans-serif;

    font-size: 16px;

    text-align: right;

    outline: none;

    transition:

        border-color
        0.3s ease,

        box-shadow
        0.3s ease;

}


input:focus {

    border-color:
        #b79a6a;

    box-shadow:

        0 5px 20px
        rgba(
            183,
            154,
            106,
            0.08
        );

}


/* =========================
   REVEAL
========================= */

.reveal {

    opacity: 0;

    transform:
        translateY(45px);

    transition:

        opacity 1s ease,

        transform
        1s
        cubic-bezier(
            0.2,
            0.65,
            0.3,
            1
        );

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* ==================================================
   WEDDING TICKET
================================================== */

.success-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(
            35,
            31,
            27,
            0.5
        );

    backdrop-filter:
        blur(9px);

    opacity: 0;

    visibility: hidden;

    transition:

        opacity 0.35s ease,

        visibility 0.35s ease;

}


.success-modal.show {

    opacity: 1;

    visibility: visible;

}


/* =========================
   TICKET
========================= */

.ticket {

    position: relative;

    width:
        min(
            390px,
            100%
        );

    background: #faf8f3;

    color: #2d2925;

    box-shadow:

        0 30px 80px
        rgba(
            0,
            0,
            0,
            0.25
        );

    transform:

        translateY(30px)
        scale(0.94);

    opacity: 0;

    transition:

        transform
        0.5s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        ),

        opacity 0.5s ease;

}


.success-modal.show .ticket {

    transform:

        translateY(0)
        scale(1);

    opacity: 1;

}


/* =========================
   CLOSE
========================= */

.close-modal {

    position: absolute;

    top: 10px;

    left: 12px;

    width: 35px;

    height: 35px;

    border: none;

    background:
        transparent;

    color: #2d2925;

    font-size: 27px;

    cursor: pointer;

    opacity: 0.45;

    z-index: 5;

}


.close-modal:hover {

    opacity: 1;

}


/* =========================
   TICKET HEADER
========================= */

.ticket-header {

    padding:
        38px
        25px
        25px;

    text-align: center;

}


.ticket-label {

    font-size: 11px;

    letter-spacing: 2px;

    opacity: 0.5;

    margin-bottom: 10px;

}


.ticket-header h2 {

    font-family:
        "Cairo",
        sans-serif;

    font-size: 32px;

    font-weight: 400;

    margin:
        0 0 8px;

}


.ticket-header h2 span {

    color: #b79a6a;

    margin:
        0 5px;

}


.ticket-date {

    font-size: 13px;

    opacity: 0.6;

}


/* =========================
   TICKET DIVIDER
========================= */

.ticket-divider {

    position: relative;

    height: 1px;

    border-top:
        1px dashed
        rgba(
            183,
            154,
            106,
            0.5
        );

}


.ticket-divider::before,
.ticket-divider::after {

    content: "";

    position: absolute;

    top: -11px;

    width: 22px;

    height: 22px;

    background: #3f3a35;

    border-radius: 50%;

}


.ticket-divider::before {

    right: -11px;

}


.ticket-divider::after {

    left: -11px;

}


/* =========================
   TICKET BODY
========================= */

.ticket-body {

    padding:
        25px
        30px
        28px;

    text-align: center;

}


.ticket-welcome {

    font-size: 13px;

    opacity: 0.6;

    margin-bottom: 20px;

}


.guest-label {

    font-size: 11px;

    opacity: 0.45;

    margin-bottom: 3px;

}


.ticket-body h3 {

    font-family:
        "Cairo",
        sans-serif;

    font-size: 25px;

    font-weight: 400;

    margin-bottom: 25px;

}


/* =========================
   TICKET INFO
========================= */

.ticket-info {

    display: flex;

    justify-content: center;

    gap: 45px;

    margin-bottom: 25px;

}


.ticket-info div {

    display: flex;

    flex-direction: column;

}


.ticket-info span {

    font-size: 10px;

    opacity: 0.45;

}


.ticket-info strong {

    font-family:
        "Cairo",
        sans-serif;

    font-size: 13px;

    font-weight: 500;

}


/* =========================
   QR CODE
========================= */

.qr-container {

    display: flex;

    justify-content: center;

    align-items: center;

    margin:
        10px auto 15px;

}


#qrcode {

    padding: 10px;

    background: white;

    display: inline-flex;

}


#qrcode img,
#qrcode canvas {

    display: block;

}


/* =========================
   GUEST ID
========================= */

.ticket-id-label {

    font-size: 10px;

    opacity: 0.4;

    margin-bottom: 2px;

}


.ticket-id {

    font-family:
        "Cairo",
        sans-serif;

    font-size: 13px;

    letter-spacing: 1px;

}


/* =========================
   TICKET FOOTER
========================= */

.ticket-footer {

    padding:
        17px
        20px;

    border-top:
        1px solid
        rgba(
            45,
            41,
            37,
            0.08
        );

    text-align: center;

}


.ticket-footer p {

    font-size: 11px;

    opacity: 0.5;

}


.ticket-footer p:last-child {

    margin-top: 2px;

}


/* =========================
   TICKET BUTTON
========================= */

.ticket > .button {

    display: block;

    margin:
        0 auto 25px;

}


/* =========================
   FOOTER
========================= */

footer {

    padding:
        35px 20px;

    font-family:
        "Cairo",
        sans-serif;

    font-size: 14px;

    opacity: 0.45;

    background: #f8f5ef;

}


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

@media (max-width: 600px) {

    section {

        min-height: 85vh;

        padding:
            70px 20px;

    }


    h1 {

        font-size: 47px;

    }


    h2 {

        font-size: 32px;

    }


    .countdown {

        gap: 10px;

    }


    .countdown-item {

        min-width: 65px;

    }


    .countdown strong {

        font-size: 27px;

    }


    .countdown small {

        font-size: 11px;

    }


    .decor {

        width: 130px;

        height: 330px;

    }


    .ticket {

        width:
            min(
                360px,
                100%
            );

    }


    .ticket-header h2 {

        font-size: 29px;

    }


    .ticket-info {

        gap: 35px;

    }

}