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

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    background: #07090d;
    color: #fff;
}

/* ===========================
   PAGE
=========================== */

.landing-page {

    position: relative;

    width: 100%;
    height: 100vh;

    display: grid;


    background:
    
            linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .2)),
    
            url("../images/new-build.webp");
    
        background-size: cover;
    
        background-position: center bottom;

    overflow: hidden;

    z-index: 5;

}


/* ===========================
   BACKGROUND
=========================== */

body {

    position: relative;

    background:
        radial-gradient(circle at top, #1d2028 0%, #090b10 45%, #050608 100%);
}

/* ===================================
   BACKGROUND EFFECTS
=================================== */

.background-effects {

    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}

.gold-light {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    mix-blend-mode: screen;

    animation: floatLight 8s ease-in-out infinite;
}

.left-light {

    position: absolute;

    left: -120px;

    top: -80px;

    width: 700px;

    height: 900px;

    background: linear-gradient(to bottom,
            rgba(255, 210, 120, .55),
            rgba(255, 210, 120, .18),
            transparent);

    clip-path: polygon(48% 0%, 60% 0%, 100% 100%, 0% 100%);

    filter: blur(60px);

    transform: rotate(-25deg);

    opacity: .55;

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

}

.right-light {

    position: absolute;

    right: -120px;

    top: -80px;

    width: 700px;

    height: 900px;

    background: linear-gradient(to bottom,
            rgba(255, 210, 120, .55),
            rgba(255, 210, 120, .18),
            transparent);

    clip-path: polygon(40% 0%, 52% 0%, 100% 100%, 0% 100%);

    filter: blur(60px);

    transform: rotate(25deg);

    opacity: .55;

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

}
.center-light {

    width: 700px;

    height: 700px;

    left: 50%;

    top: -250px;

    transform: translateX(-50%);

    background:

        radial-gradient(circle,

            rgba(255, 214, 120, .18),

            rgba(255, 190, 50, .08),

            transparent 70%);

    animation-delay: 4s;

}

.noise {

    position: absolute;

    inset: 0;

    opacity: .05;

    background-image:

        radial-gradient(#ffffff 1px, transparent 1px);

    background-size: 90px 90px;
}

@keyframes leftBeam {

    0% {
        transform: rotate(-25deg);
        opacity: .35;
    }

    50% {
        transform: rotate(-21deg);
        opacity: .7;
    }

    100% {
        transform: rotate(-25deg);
        opacity: .35;
    }

}

@keyframes rightBeam {

    0% {
        transform: rotate(25deg);
        opacity: .35;
    }

    50% {
        transform: rotate(21deg);
        opacity: .7;
    }

    100% {
        transform: rotate(25deg);
        opacity: .35;
    }

}


.particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 2;

}

.particle {

    position: absolute;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #ffd774;

    box-shadow: 0 0 8px rgba(255, 215, 116, .8);

    opacity: .4;

}

.landing-page {

    position: relative;

    z-index: 5;
}

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

.hero {
    margin-top: 10px;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.842);

}

.hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    left: 50%;

    top: 50%;

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

    background:
        radial-gradient(circle,
            rgba(255, 204, 90, .08),
            transparent 70%);

    filter: blur(80px);

    z-index: -1;

}

/* Fade into the CTA section */

.hero::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 170px;

    background:
        linear-gradient(to bottom,
            rgba(7, 9, 13, 0),
            rgba(7, 9, 13, .15),
            rgba(7, 9, 13, .45),
            rgba(7, 9, 13, .75));

    pointer-events: none;

}

/* ===========================
   LOGO
=========================== */

.logo {

    margin-top: 10px;

    margin-bottom: 15px;
}

.logo img {

    width: 260px;
}

/* ===========================
   SUBTITLE
=========================== */

.subtitle {

    font-size: .85rem;

    letter-spacing: 6px;

    color: #d4b15b;

    margin-bottom: 12px;
}

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

.hero-title h1 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 3.5rem;

    line-height: .9;

    font-weight: 600;
}

.hero-title h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 5rem;

    line-height: .9;

    background: linear-gradient(to bottom,
            #fff,
            #ffe596,
            #d99c2f);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

   
}



/* ===========================
   DATE
=========================== */

.event-date {

    margin-top: 15px;

    padding: 12px 25px;

    border: 1px solid rgba(255, 205, 95, .3);

    border-radius: 50px;

    backdrop-filter: blur(10px);

    color: #ffd56f;
}

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

.countdown {

    margin-top: 15px;

    display: flex;

    gap: 18px;
    margin-bottom: 10px;
}

.time-box {

    width: 120px;

    height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border-radius: 18px;

    background: rgba(255, 255, 255, .05);

    border: 1px solid rgba(255, 208, 96, .18);

    backdrop-filter: blur(15px);
}

.time-box h3 {

    font-size: 2rem;
}

.time-box span {

    margin-top: 5px;

    font-size: .85rem;

    letter-spacing: 2px;

    color: #d4b15b;
}

/* ===========================
   INVITATION SECTION
=========================== */

.invitation {

    position: relative;

    background: transparent;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    overflow: hidden;

}




/* ===========================
   BUILDING OVERLAY
=========================== */

.building-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(to bottom,

            #07090d 0%,

            rgba(7, 9, 13, .95) 10%,

            rgba(7, 9, 13, .75) 20%,

            rgba(7, 9, 13, .45) 35%,

            rgba(64, 74, 96, 0.048) 50%,

            transparent 75%);

    z-index: 1;

}



/* ===========================
   CTA
=========================== */

.cta-wrapper {

    position: relative;

    z-index: 2;

    margin-top: 60px;

    display: flex;

    flex-direction: column;

    align-items: center;
}

.limited-text {

    color: #d4b15b;

    font-size: .75rem;

    letter-spacing: 5px;

    margin-bottom: 18px;
}

.reserve-btn {

    width: 320px;

    height: 60px;

    border: none;

    border-radius: 60px;

    cursor: pointer;

    font-size: 1rem;

    font-weight: 600;

    background:
        linear-gradient(135deg,
            #fff5be,
            #ffd764,
            #cf9226);

    color: #111;

    transition: .3s;
}

.reserve-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 10px 30px rgba(255, 195, 70, .35);
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px) {

    .landing-page {

        grid-template-rows: 100vh;
    }

    .hero-title h1 {

        font-size: 1.5rem;
    }

    .hero-title h2 {

        font-size: 3rem;
    }

    .countdown {

        gap: 10px;

        flex-wrap: wrap;

        justify-content: center;
    }

    .time-box {

        width: 85px;

        height: 85px;
    }

    .time-box h3{
        font-size: 2rem;
    }

    .time-box span{
        font-size: .65rem;
    }

    .reserve-btn {

        width: 260px;
    }

        .left-light {
    
            position: absolute;
    
            left: -120px;
    
            top: -80px;
    
            width: 700px;
    
            height: 200px;
    
            background: linear-gradient(to bottom,
                    rgba(255, 210, 120, .55),
                    rgba(255, 210, 120, .18),
                    transparent);
    
            clip-path: polygon(48% 0%, 60% 0%, 100% 100%, 0% 100%);
    
            filter: blur(60px);
    
            transform: rotate(-25deg);
    
            opacity: .55;
    
            animation: leftBeam 8s ease-in-out infinite;
    
        }

                .right-light {
        
                    position: absolute;
        
                    right: -120px;
        
                    top: -80px;
        
                    width: 700px;
        
                    height: 200px;
        
                    background: linear-gradient(to bottom,
                            rgba(255, 210, 120, .55),
                            rgba(255, 210, 120, .18),
                            transparent);
        
                    clip-path: polygon(40% 0%, 52% 0%, 100% 100%, 0% 100%);
        
                    filter: blur(60px);
        
                    transform: rotate(25deg);
        
                    opacity: .55;
        
                    animation: rightBeam 8s ease-in-out infinite;
        
                }

}

/* ==========================================
   MODAL
========================================== */

.modal {

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background: rgba(0, 0, 0, .75);

    backdrop-filter: blur(8px);

    opacity: 0;

    visibility: hidden;

    transition: .35s ease;

    z-index: 9999;

    padding: 20px;

}

.modal.active {

    opacity: 1;

    visibility: visible;

}

.modal-content {

    width: 100%;

    max-width: 500px;

    background: rgba(16, 18, 24, .95);

    border: 1px solid rgba(255, 203, 93, .18);

    border-radius: 24px;

    padding: 40px;

    position: relative;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .45),
        0 0 35px rgba(255, 190, 70, .08);

    transform: scale(.92);

    transition: .35s ease;

}

.modal.active .modal-content {

    transform: scale(1);

}

.close-modal {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);

    color: #fff;

    font-size: 1.6rem;

    cursor: pointer;

    transition: .3s;

}

.close-modal:hover {

    background: #d4b15b;

    color: #111;

    transform: rotate(90deg);

}

.modal-content h2 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 2.4rem;

    text-align: center;

    margin-bottom: 10px;

    color: #fff;

}

.modal-content p {

    text-align: center;

    color: #bdbdbd;

    margin-bottom: 30px;

    line-height: 1.6;

}

#registrationForm {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.input-group {

    width: 100%;

}

.input-group input {

    width: 100%;

    height: 56px;

    padding: 0 18px;

    border-radius: 14px;

    border: 1px solid rgba(255, 203, 93, .15);

    background: rgba(255, 255, 255, .04);

    color: #fff;

    font-size: .95rem;

    outline: none;

    transition: .3s;

}

.input-group input::placeholder {

    color: #888;

}

.submit-btn {

    width: 100%;

    height: 58px;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    margin-top: 10px;

    font-size: 1rem;

    font-weight: 600;

    background: linear-gradient(135deg,
            #fff2b0,
            #ffd86d,
            #cf9326);

    color: #111;

    transition: .3s;

}

.submit-btn:hover {

    transform: translateY(-3px);

    box-shadow:

        0 12px 30px rgba(255, 194, 80, .28);

}

@media(max-width:768px) {

    .modal {

        padding: 15px;

    }

    .modal-content {

        padding: 30px 22px;

        border-radius: 20px;

    }

    .modal-content h2 {

        font-size: 2rem;

    }

    .modal-content p {

        font-size: .9rem;

    }

    .input-group input {

        height: 52px;

        font-size: .9rem;

    }

    .submit-btn {

        height: 54px;

    }

}

/*===============
Video
==============*/

/* ===========================
   Video Section
=========================== */

.video-section {
    width: 100%;
    height: 100vh;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0e1e35;
}

.video-wrapper {
    width: min(100%, 1100px);
    border-radius: 22px;
    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .18);

    transition: .4s ease;
}

.video-wrapper:hover {
    transform: translateY(-8px);
    box-shadow:
        0 45px 90px rgba(0, 0, 0, .25);
}

.video-wrapper video {
    width: 100%;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
}

@media (max-width:768px) {

    .video-section {
        padding: 60px 15px;
        height: 100vh;
    }

   
    .video-wrapper {
        border-radius: 14px;
    }

}