body {
    /* NOTE: Replace the placeholder URL below with your actual path:
           url('assets/background.jpg')
           */
    background-image: url("/assets/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: "Schoolbell", cursive;
    font-weight: 400;
    font-style: normal;
    overflow-x: hidden;
}

/* Base styles for the full screen container */
.grid-container {
    min-height: 100vh;
    width: 97vw;
    margin: auto;

    display: grid;

    grid-template-columns: 2fr 3fr 2fr;

    grid-template-areas: "area-1 area-2 area-3";
}

.grid-container > * {
    width: 100%;
}

.title-header {
    font-family: "Peralta", serif;
    font-weight: 400;
    font-style: normal;
}

.image_header {
    width: 80%;
    scale: 0.9;
    margin: 0 auto;
}

.rsvp_header {
    width: 50%;
    scale: 0.9;
    margin-left: 45px;
    margin-top: 40px;
    margin-right: auto;
    mix-blend-mode: multiply;
    rotate: -1deg;
}



/* Stickers */

/* --- The Wrapper --- */
/* This holds both the sticker and the note in the same "slot" on the wall */
.note-wrapper {
    position: relative; /* Anchors the sticker */
    width: fit-content; /* Shrinks to fit the note */
    display: block;     /* Ensures it respects the flex column layout */
    
    /* Optional: Ensures z-index sorting works if notes overlap */
    z-index: 1; 
}

/* Ensure the wrapper doesn't trap clicks meant for elements below */
.note-wrapper:hover {
    z-index: 10; /* Brings the whole group forward when interacting */
}


/* --- The Sticker (Sibling) --- */
.sticker-decoration {
    position: absolute;
    width: 120px;
    aspect-ratio: 1/1;
    object-fit: contain;
    pointer-events: none; /* Clicks pass through */
    z-index: 0; /* Sits BEHIND the note by default */
    filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.2));
}

/* Positioning Presets */
.sticker-left {
    right: 100%; /* Pushes it to the immediate left of the wrapper */
    top: 20px;
    margin-right: 40px; /* Slight overlap tuck */
    transform: rotate(-15deg);
}

.sticker-right {
    left: 100%; /* Pushes it to the immediate right of the wrapper */
    top: 40px;
    margin-left: 60px; /* Slight overlap tuck */
    transform: rotate(10deg);
}

/* Mobile adjustment: Make stickers smaller on phones */
@media (max-width: 550px) {
    .sticker-decoration {
        width: 80px;
        margin-top: -20px;
        margin-bottom: -20px;
    }
}



/* Assign areas to columns (these assignments are now used by both desktop and mobile) */
.col-1 {
    display: flex;
    flex-direction: column;
    grid-area: area-1;
}

.col-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-area: area-2;
    
    container-type: inline-size; /* Tells CSS to watch the width */
    container-name: postcard-area;
}

.col-3 {
    display: flex;
    flex-direction: column;
    grid-area: area-3;
}

.gumbo-sign {
    --parallax-offset: 0px;
    --parallax-speed: 40;
    z-index: -1;
    width: 100%;
    aspect-ratio: 1.9;
    background-size: cover;
    background-image: url("/assets/roadsign.png");
    grid-area: stack;
    animation: parallax linear;
    animation-timeline: scroll();
    animation-range: entry 0% exit 2000px;
}

.corkboard {
    background-image: url("/assets/cork_board.png");
    background-size: 100% 100%;
    width: 96%;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    padding-top: 30px;
    padding-bottom: 30px;
}

.col-1 > * {
    width: 100%;
    margin-bottom: 15px; /* Adds vertical space between each item */
}
/* --- Container Layout --- */
.scatter-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the pile */
    align-items: center;
    gap: 4rem; /* Large gap between items */
    margin: 0 auto;
    width: 100%;
    margin-top: 30px;
}



/* --- "Random" Scattering Logic --- */

/* Every 2nd item: Rotate right and push down */
.scatter-gallery .frame-container:nth-child(2n) {
    transform: translateX(1vw);
    transform: translateY(1vw);
}

/* Every 3rd item: Rotate left more and push up */
.scatter-gallery .frame-container:nth-child(3n) {
    transform: translateX(2vw);
    transform: translateY(2vw);
}

/* Every 5th item: Straighten out and push right */
.scatter-gallery .frame-container:nth-child(5n) {
    transform: translateX(-2vw);
    transform: translateY(-1vw);
}

/* --- Animation Updates --- */

.frame-container.visible {
   /* animation-name: swing-in;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy feel */
    animation-fill-mode: forwards;*/
}

@keyframes swing-in {
    0% {
        opacity: 0;
        /* Start from a wider angle */
        transform: scale(0.8) rotate(-15deg); 
    }
    100% {
        opacity: 1;
        /* IMPORTANT: We do NOT define rotate here. 
           This allows the nth-child rotations defined above to stick. 
           We only reset scale/opacity. */
        transform: scale(1) inherit; 
    }
}

/* --- 3D Scene Setup --- */
.scene {
    width: 100%;
    max-width: 700px;
    aspect-ratio: 1.6;
    margin: 0 auto;
    perspective: 1000px; /* Gives it the 3D depth */
}

.postcard-object {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

/* This class is added by JS to trigger the flip */
.postcard-object.is-flipped {
    transform: rotateY(180deg);
}

/* --- Front and Back Faces --- */
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hides the back when facing away */
    padding: 30px;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    font-family: 'Courier New', Courier, monospace;
}

/* --- Front Specifics --- */
.front {
    background-image: url('/assets/postcard.png'); /* Original Image */
    z-index: 2;
}

/* --- Back Specifics --- */
.back {
    background-image: url('/assets/postcard_back.png'); /* New Success Image */
    transform: rotateY(180deg); /* Already rotated so it looks correct when flipped */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes content to bottom */
    align-items: center;
    text-align: center;
}

/* --- Back Content Styling --- */
.bottom-message {
    padding: 20px;
    width: 80%;
}

.handwritten-text {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.postcard {
  rotate: -2deg;
     margin: 0 60px;
    margin-bottom: 40px;
}


/* --- Layout: 2 Columns --- */
.postcard-form {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Left side slightly wider */
    height: 100%;
}

.postcard-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 30px; /* Breathing room from the middle line */
    padding-left: 10px;
}

.postcard-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers buttons vertically */
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    padding-left: 10px;
}

/* --- Input Styling (Paper Style) --- */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 2px;
}

/* Remove default box look, make it look like lines on paper */
.postcard-form input[type="text"], 
.postcard-form input[type="number"], 
.postcard-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #555;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    padding: 3px 0;
}

/* Focus effect */
.postcard-form input:focus, 
.postcard-form textarea:focus {
    border-bottom-color: #000;
    background-color: rgba(255, 255, 255, 0.3);
}

.postcard-form textarea {
    resize: none;
    background-image: linear-gradient(transparent 95%, #555 95%);
    background-size: 100% 1.5em; /* Creates lines in textarea */
    line-height: 1.5em;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.action-btn {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #333;
    background: #fff; /* Sticker look */
    color: #333;
    cursor: pointer;
    transform: rotate(-2deg); /* Slight messy rotation */
    transition: transform 0.2s;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.action-btn:hover {
    transform: scale(1.05) rotate(0deg);
}

.venmo-button {
    background-color: #3d95ce; /* Venmo Blueish */
    color: white;
    border: none;
    font-size: 0.9rem;
    border-radius: 4px;
}

.chalk-button {
    background-color: #d64040; /* Stamp Red */
    color: white;
    border: 2px dashed white;
    width: 100%;
    font-size: 1.1rem;
    box-shadow: none;
}

#success-message {
  text-align: center;
  font-family: "Permanent Marker", cursive;
  color: #ffffff;
}

.success-checkmark {
  font-size: 5rem; /* Makes the checkmark large */
  line-height: 1;
  margin-bottom: 1.5rem;
}

#success-message h2 {
  font-family: "Permanent Marker", cursive;
  color: #ffffff;
  font-size: 2.5rem;
  margin: 0 0 1.5rem 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

/* Style for the new button (reuses existing .venmo-button) */
#success-message .venmo-button {
  margin-bottom: 1rem;
}

/* Style for the dynamic payment text */
#payment-text {
  font-family: "Courier New", cursive;
  font-size: 20px;
  margin-bottom: 10px;
}


#name:focus {
    background-image: linear-gradient(transparent 31px, #000 32px);
    outline: none !important;
}



#note {
    /* 1. Remove the boxy container */
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important; /* Removes the blue glow on click */

    /* 2. Create the "Ruled Paper" lines */
    /* This draws a 1px dark line every 32 pixels */
    background-image: linear-gradient(transparent 31px, #555 32px);
    background-size: 100% 32px; /* must match line-height */
    
    /* 3. Align text to the lines */
    line-height: 32px; /* matches background-size */
    padding: 0;
    
    /* 4. Font tweaks to make it sit right on the line */
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    color: #333;
    resize: none; /* Prevents the user from breaking the layout */
}


/* --- Mobile Styles --- */
@media (max-width: 1360px) {
    .grid-container {
        /* Changes to a single column layout */
        grid-template-columns: 1fr;

        /* Defines the new stacking order (top to bottom) as 2, 3, 1 */
        grid-template-areas:
            "area-2"
            "area-3"
            "area-1";
    }

    .grid-container > * {
        width: 100vw;
    }
}

.sticky-note-container {
    position: relative;
    width: 240px;
    height: 240px;
    transition: scale 0.3s ease-in-out, rotate 0.3s ease-in-out;
    /* Optional: Add a filter for a subtle drop shadow
               that matches the shadow in the image */
}

.sticky-note-container:hover {
    scale: 1.8;
    rotate: 0deg;
    z-index: 10;
    
}

.right-sticky {
    margin-left: 5%;
    margin-right: auto;
}

.left-sticky {
    margin-right: 5%;
    margin-left: auto;
}

.sticky-note-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sticky-text-content {
    position: absolute;
    margin-top: 12%;
    padding: 20px 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 80%;
}

.sticky-text-content p {
    font-size: 16px;
    line-height: 1.4;
    color: #333;
    font-family: "Gamja Flower", sans-serif;
    font-weight: 400;
    font-style: normal;
}



.sticky-note-container.visible {
    animation-name: pin-on-wall;
    animation-duration: 0.6s; /* A quick "pop" */
    /* This special timing function creates the "boing" or "overshoot" effect */
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards; /* Stays at the end state */
}

.sticky-style-1 {
    rotate: -3deg;
}
.sticky-style-1 .sticky-note-bg {
    filter: hue-rotate(0deg);
}
.sticky-style-2 {
    rotate: 1deg;
}
.sticky-style-2 .sticky-note-bg {
    filter: hue-rotate(-105deg);
}
.sticky-style-3 {
    rotate: -1deg;
}
.sticky-style-3 .sticky-note-bg {
    filter: hue-rotate(90deg);
}
.sticky-style-4 {
    rotate: 3deg;
}
.sticky-style-4 .sticky-note-bg {
    filter: hue-rotate(145deg);
}

/* 4-8 require sticky_alt */
.sticky-style-8 {
    rotate: -3deg;
}
.sticky-style-8 .sticky-note-bg {
    filter: hue-rotate(0deg);
}
.sticky-style-5 {
    rotate: 1deg;
}
.sticky-style-5 .sticky-note-bg {
    filter: hue-rotate(-33deg);
}
.sticky-style-6 {
    rotate: -1deg;
}
.sticky-style-6 .sticky-note-bg {
    filter: hue-rotate(110deg);
}
.sticky-style-7 {
    rotate: 3deg;
}
.sticky-style-7 .sticky-note-bg {
    filter: hue-rotate(185deg);
}

.frame-container-a,
.frame-container-d, .frame-container-e, .frame-container-f {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.frame-container {
    height: 300px;
    position: relative;
    line-height: 0;
    opacity: 0;
    scale: .9;
    transform-origin: center top;
    transition: scale .3s ease-in-out;
}



.frame-container:hover {
    scale: 1.2;
    z-index: 1;
}


.frame-container.visible {
    animation-name: swing-in;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.inner-image {
    display: block;
    width: auto;
    height: 100%;
}

.frame-container-b .inner-image,
.frame-container-c .inner-image {
    scale: 80%;
}

.frame_a,
.frame_b,
.frame_c,
.frame_d, .frame_e, .frame-f {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Ensures the frame is on top */
    pointer-events: none;
}



@container postcard-area (max-width: 550px) {
    /* 1. Labels */
    .form-group label {
        font-size: 0.75rem;
    }
    
    .sticky-note-container {
       width: 200px;
        height: 200px;
    }
    
    .sticky-text-content p {
    font-size: 14px;
}

    /* 2. Text Inputs & Ruled Paper Areas */
    /* We use IDs here to override the specific #name/#note styling */
    .postcard-form input[type="text"], 
    .postcard-form input[type="number"], 
    .postcard-form textarea,
    #name,
    #note {
        font-size: 0.85rem; /* Smaller text */
    
    }

    #note {
        height: 40px; 
    
    line-height: 20px;
    
    background-size: 100% 20px;

    background-image: linear-gradient(transparent 19px, #555 19px);
        
        
    }
    
    .postcard-left {
        margin-bottom: auto;
    }
    
  

    /* 4. Buttons (Stamps) */
    .action-btn, 
    .venmo-button, 
    .chalk-button {
        font-size: 0.85rem;
        padding: 8px 12px; /* Reduce padding slightly to fit better */
    }

    .form-group label {
        font-size: 10px;
    }
    
    .form-group {
        margin-bottom: 2px;
    }
    
    .card-face {
        padding: 22px;
    }
    /* 5. Back of card (Success Message) */
    .handwritten-text {
        font-size: 1rem;
    }
    
    #success-message h2 {
        font-size: 1.8rem;
    }
    
    .success-checkmark {
        font-size: 3.5rem;
    }

    #payment-text {
        font-size: 12px;
    }
    
    .postcard-right {
        margin-top: 0;
        margin-bottom: 40px;
        
    }
    .postcard-left {
        padding-left: 0;
        padding-right: 20px;
    }
    
    .sticker-left {
    right: 100%; /* Pushes it to the immediate left of the wrapper */
    top: 20px;
    margin-right: 10px; /* Slight overlap tuck */
    transform: rotate(-15deg);
}

.sticker-right {
    left: 100%; /* Pushes it to the immediate right of the wrapper */
    top: 40px;
    margin-left: 10px; /* Slight overlap tuck */
    transform: rotate(10deg);
}
    
    .postcard {
     margin: 0 23px;
}
}

@media (max-width: 350px) {
    .postcard-form input[type="text"], 
    .postcard-form input[type="number"], 
    .postcard-form textarea,
    .postcard-form label,
    
    #name,
    #note {
        font-size: 0.6rem !important; /* Smaller text */
    
    }
}

@keyframes parallax {
    from {
        transform: translateY(var(--parallax-offset));
    }

    to {
        transform: translateY(calc(var(--parallax-speed) * 25px + var(--parallax-offset)));
    }
}

@keyframes pin-on-wall {
    0% {
        /* Start invisible, small, and slightly rotated */
        opacity: 0;
        transform: scale(0.3) rotate(-15deg);
    }
    60% {
        /* Overshoot the final size (the "press") */
        opacity: 1; /* Now visible */
        transform: scale(1.1) rotate(5deg);
    }
    80% {
        /* Bounce back */
        transform: scale(0.95) rotate(-2deg);
    }
    100% {
        /* Settle into its final spot */
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes swing-in {
    0% {
        /* Start invisible and rotated to the left */
        opacity: 0;
        rotate: -8deg;
    }
    60% {
        /* Swing past the center (the "overshoot") */
        opacity: 1; /* Become fully visible */
        rotate: 4deg;
    }
    80% {
        /* Swing back the other way */
        rotate: -2deg;
    }
    100% {
        /* Settle perfectly in place */
        opacity: 1;
        rotate: 0deg;
    }
}