@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Playfair+Display:wght@600;700&display=swap');

    @font-face {
    font-family: 'SilvexEditorial';
    src: url('assets/fonts/SilvexEditorial-Regular-BF66f36842cab8b.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    }

    @font-face {
    font-family: 'SilvexEditorial';
    src: url('assets/fonts/SilvexEditorial-Thin-BF66f368475b86e.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    }

    @font-face {
    font-family: 'SilvexEditorial';
    src: url('assets/fonts/SilvexEditorial-Bold-BF66f36846ce06c.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    }

    @font-face {
    font-family: 'SilvexEditorial';
    src: url('assets/fonts/SilvexEditorial-ThinItalic-BF66f3684768834.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    }

    @font-face {
    font-family: 'SingelDemo';
    src: url('assets/fonts/SingelDemo-SemiBold.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    }


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Google Sans", Arial, sans-serif;
}


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

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
    overflow-y:auto;   /* was: overflow:hidden */
}


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

.background{

    position:fixed;

    inset:0;

    background:
    url("assets/background.webp")
    center/cover
    no-repeat;


    filter:
    blur(5px)
    brightness(.65);


    transform:scale(1.1);

    z-index:-1;

    animation: bgPulse 12s ease-in-out infinite alternate;
}

@keyframes bgPulse {
    0% {
        transform: scale(1.08) translateY(0);
    }
    100% {
        transform: scale(1.14) translateY(-10px);
    }
}


/* =========================
   MAIN CONTAINER
========================= */

.container{
    display:flex;
    width:100%;
    max-width:950px;
    border-radius:50px;
    overflow:hidden;

    box-shadow:0 30px 70px rgb(0, 0, 0);

    animation: containerFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.container:hover {
    box-shadow: 0 35px 85px rgba(0, 0, 0, 0.95);
}

@keyframes containerFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}



/* =========================
   LEFT CARD
========================= */


.card1{

    flex:1.9;


    background:
    linear-gradient(
        145deg,
        #f32c09be,
        #9ec8e4
    );


    padding: 20px 30px 30px 30px;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    text-align:center;


    position:relative;

    overflow:hidden;

    animation: fadeInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.c1logo{

    width: 150px;

    height: auto;

    margin-bottom: 20px;

    transition: transform 0.4s ease;
}

.c1logo:hover {
    transform: scale(1.04);
}

.card1-image {
    width:100%;
    height:auto;         /* image dictates its own height again */
    object-fit:contain;
    display:block;
    border-radius:35px;

    /* -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        transparent 100%,
        transparent 100%,
        transparent
    ); */
    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 0%,
        black 97%,
        transparent
    );

    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.card1-image:hover {
    transform: scale(1.025);
    filter: contrast(1.04) brightness(1.02);
}


.card1 h1{

    font-family:"SilvexEditorial",serif;

    font-size:34px;

    font-weight:700;

    color:white;

    line-height:1.1;

    margin-bottom:6px;

    z-index:1;

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

}


/* Event details */

.card1-kicker{
    font-family:"SilvexEditorial",serif;
    font-weight:300;
    font-style:italic;
    font-size:20px;
    color:rgba(255,255,255,.85);
    max-width:36ch;
    margin-bottom:18px;
    z-index:1;
}

.card1-subtitle{
    font-family:"Google Sans", Arial, sans-serif;
    font-weight:500;
    font-size:16px;
    color:rgba(255,255,255,.85);
    margin-bottom:22px;
    z-index:1;
}

.card1-desc{
    font-family:"Google Sans", Arial, sans-serif;
    font-size:15px;
    line-height:1.6;
    color:rgba(255,255,255,.9);
    max-width:42ch;
    margin:0 auto 24px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.3);
    z-index:1;
}

.card1-details{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-family:"Google Sans", Arial, sans-serif;
    font-size:15px;
    font-weight:500;
    color:#ffffff;
    margin-bottom:22px;
    z-index:1;
}

.card1-details span:first-child{
    font-family:"SilvexEditorial",serif;
    font-weight:700;
    font-size:20px;
    margin-bottom:2px;
}

.card1-note{
    font-family:"Google Sans", Arial, sans-serif;
    font-size:13px;
    color:rgba(255,255,255,.7);
    max-width:36ch;
    margin:0 auto;
    z-index:1;
}


/* =========================
   RIGHT CARD
========================= */


.card2{

    flex:1;


    background:rgba(255, 254, 254, 0.801);

    padding:35px 50px;
    overflow-y:auto;     /* scrolls internally instead of stretching the container */
    max-height:100%;     /* capped to match card1's height via flex stretch */

    animation: fadeInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.input-group{
    margin-bottom:14px;  /* was 20px */
}



/* RSVP Title */

.card2 h1{

    font-family:"SingelDemo",serif;


    font-size:42px;


    color:#333;


    text-align:left;


    margin-bottom:10px;

    animation: fadeInDown 0.6s ease 0.3s both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card2_h2{

    font-family:"Google Sans", Arial, sans-serif;
    
    color:#696969;

    font-size:15px;

    margin-bottom:10px;

    text-align:left;
}


/* Description */

p{

    

    color:#444444;

    font-size:16px;

    margin-bottom:35px;

    text-align:left;

    animation: fadeInDown 0.6s ease 0.4s both;
}



/* =========================
   FORM
========================= */


.input-group{

    margin-bottom:18px;
    animation: fadeInUpStagger 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.input-group:nth-of-type(1) { animation-delay: 0.45s; }
.input-group:nth-of-type(2) { animation-delay: 0.50s; }
.input-group:nth-of-type(3) { animation-delay: 0.55s; }
.input-group:nth-of-type(4) { animation-delay: 0.60s; }
.input-group:nth-of-type(5) { animation-delay: 0.65s; }
.input-group:nth-of-type(6) { animation-delay: 0.70s; }

@keyframes fadeInUpStagger {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


label{

    display:block;


    font-size:15px;


    font-weight:600;


    color:#555;


    margin-bottom:8px;

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

.input-group:focus-within label {
    color: #e4573f;
    transform: translateX(3px);
}



input,
select{

    width:100%;


    padding:15px 18px;


    border-radius:15px;


    border:1px solid #e5e5e5;


    background:#fafafa;


    font-size:15px;


    outline:none;


    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

}



input:focus,
select:focus{

    background:white;


    border-color:#ec7560;

    transform: translateY(-2px);

    box-shadow:
    0 8px 20px rgba(236, 117, 96, 0.22);

}

input:hover:not(:focus),
select:hover:not(:focus) {
    border-color: #d1d1d6;
    background: #fdfdfd;
}



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


.submitButton{
    display:block;
    width:100%;
    max-width:300px;
    margin:0 auto;
    padding:30px 20px;

    border:none;
    border-radius:20px;

    background:linear-gradient(135deg, #B7110D, rgb(250, 122, 84));

    color:white;
    text-decoration:none;
    text-align:center;
    font-size:26px;
    font-weight:bold;
    letter-spacing:0.5px;
    cursor:pointer;

    position:relative;
    overflow:hidden;

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, filter 0.3s ease;
    animation: fadeInUpStagger 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}

.submitButton:visited,
.submitButton:hover,
.submitButton:active{
    color:white;
    text-decoration:none;
}

/* Subtle shine effect on submit button */
.submitButton::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    transition: transform 0.75s ease;
}

.submitButton:hover::after {
    transform: rotate(25deg) translate(300%, 0);
}

.submitButton:hover{

    transform:translateY(-3px) scale(1.01);


    box-shadow:

    0 14px 28px rgba(183, 17, 13, 0.42);

    filter: brightness(1.05);

}

.submitButton:active{

    transform:translateY(0) scale(0.99);

    box-shadow:

    0 6px 14px rgba(183, 17, 13, 0.3);

.adminBTN {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: default;
}


.admin-btn{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:max-content;

    /*  */

    /* border: red 1px solid; */

    /* margin: 130px 0px 0px 370px; */

    color:white;

    text-decoration:none;

    transition:.3s;

}

.admin-icon{

    width:20px;

    height:20px;

    vertical-align:middle;

}


.admin-btn:hover{

    background:#444;

    transform:translateY(-3px);

}


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

/* Phone */
@media(max-width:768px){


    body{

        overflow:auto;

        padding:20px;

    }


    .container{

        flex-direction:column;

        border-radius:50px;

    }

    .card1{

        padding: 30px 20px 20px 20px;

    }

    .card1-kicker{
        padding:0;
    }

    .c1logo{

        width: 300px;

        padding: 70px 10px 0px 10px;
    }

    .card1-image{

        border-radius: 35px 35px 0px 0px;
    }

    
    .card2{
    flex:1;
    background:rgba(255, 254, 254, 0.801);
    padding:35px 50px;

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

    animation: fadeInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}



    .card1 h1{

        font-size:28px;

    }



    .card2 h1{

        font-size:35px;

    }

}


/* Tablet */
@media (min-width:769px) and (max-width:1200px){
    .container{
        min-height:auto;
    }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}