/* === Reset and Base Styles === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    background: linear-gradient(135deg, #4a1259 0%, #000000 100%);
    color: white;
    overflow: hidden;
}

/* === Lock Screen === */
#lock-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2a0845 0%, #000000 100%);
    z-index: 200; /* Below music button */
    transition: opacity 0.5s ease-out;
    padding: 1rem;
}

.lock-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    max-width: 500px;
    width: 90%;
}

.lock-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: white;
}

.gift-icon {
    font-size: 2rem;
}

.lock-content p {
    font-size: 1.1rem;
    color: #eee;
    margin-bottom: 0.5rem;
}

.unlock-date {
    font-size: 1.5rem;
    color: #ff69b4;
    font-weight: bold;
    margin: 1rem 0;
}

#countdown {
    font-size: 2rem;
    font-family: monospace;
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
    color: white;
    min-height: 1.5em;
}

/* === Start Button Screen === */
#start-button-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Use flexbox for centering */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay */
    backdrop-filter: blur(5px);
    z-index: 190; /* Below lock screen, above GSAP */
    opacity: 0; /* Start hidden */
    transition: opacity 0.5s ease-in-out;
    padding: 1rem;
    text-align: center;
}

.start-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.start-content h2 {
    font-size: 2rem;
    color: white;
    text-shadow: 0 0 8px rgba(255, 105, 180, 0.6);
    margin-bottom: 0.5rem;
}

#start-surprise-btn {
    background: linear-gradient(45deg, #ff69b4, #C71585); /* Cute pink gradient */
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.4rem;
    font-weight: bold;
    border-radius: 50px; /* Pill shape */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

#start-surprise-btn:hover {
    transform: scale(1.08); /* Slightly larger hover effect */
    box-shadow: 0 8px 20px rgba(255, 105, 180, 0.6);
    background: linear-gradient(45deg, #ff85c1, #d72c94); /* Brighter gradient on hover */
}

#start-surprise-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(255, 105, 180, 0.3);
}

.start-content .start-hint {
    font-size: 0.9rem;
    color: #ccc;
    margin-top: 0.5rem;
}


/* === GSAP Container Base === */
#gsap-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    text-align: center;
    background: transparent;
    visibility: hidden; /* JS controls visibility */
     z-index: 10; /* Above hearts, below footer/button/start screen */
}


/* === ESSENTIAL POSITIONING RULES === */
#gsap-container > div:not(.seven):not(.eight) {
    position: absolute;
    left: 0;
    right: 0;
    top: 18vh; /* Adjust vertical position */
    width: 100%;
    padding: 0 1rem;
}

#gsap-container div.six {
    top: 10vh;
    z-index: 11; /* Above background elements but below potential overlays */
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#gsap-container div.seven,
#gsap-container div.eight {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 6; /* Above hearts, below main GSAP content */
}
#gsap-container div.eight svg {
    pointer-events: none;
}

/* Hat on top of the image */
#gsap-container .six .hat {
    position: absolute;
    width: 60px;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -20px; /* ADJUSTED horizontal position */
    z-index: 12; /* Above image */
}

/* Balloon positioning */
#gsap-container .baloons img {
    display: inline-block;
    position: absolute;
    max-width: 12%;
    height: auto;
    opacity: 0.5;
    z-index: 7; /* Above hearts, below main GSAP content */
    filter: brightness(1.1) contrast(1.1);
}
#gsap-container .baloons img:nth-child(4n + 1) { left: 5%; }
#gsap-container .baloons img:nth-child(4n + 2) { left: 30%; }
#gsap-container .baloons img:nth-child(4n + 3) { right: 30%; }
#gsap-container .baloons img:nth-child(4n + 4) { right: 5%; }

/* SVG circle burst positioning and styling */
#gsap-container .eight svg {
    width: 25px;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: 7; /* Above hearts, below main GSAP content */
}
/* Use Design B's color palette (pinks, purples, white) */
#gsap-container .eight svg:nth-child(1) { top: 7vh;  left: 5vw;  fill: #ff69b4; } /* Pink */
#gsap-container .eight svg:nth-child(2) { top: 23vh; left: 35vw; fill: #ff1493; } /* DeepPink */
#gsap-container .eight svg:nth-child(3) { top: 33vh; left: 23vw; fill: #C71585; } /* MediumVioletRed */
#gsap-container .eight svg:nth-child(4) { top: 43vh; left: 57vw; fill: #ffffff; } /* White */
#gsap-container .eight svg:nth-child(5) { top: 68vh; left: 7vw;  fill: #ff69b4; }
#gsap-container .eight svg:nth-child(6) { top: 42vh; left: 77vw; fill: #ff1493; }
#gsap-container .eight svg:nth-child(7) { top: 68vh; left: 83vw; fill: #C71585; }
#gsap-container .eight svg:nth-child(8) { top: 86vh; left: 37vw; fill: #ffffff; }
#gsap-container .eight svg:nth-child(9) { top: 94vh; left: 87vw; fill: #ff69b4; }


/* === Styling GSAP Elements with Design B's Aesthetic === */
/* General Text Styling */
#gsap-container h1,
#gsap-container h3,
#gsap-container h5,
#gsap-container p,
#gsap-container strong,
#gsap-container span {
    color: white; /* Base white text */
    line-height: 1.5;
}

/* Headings and Emphasis */
#gsap-container .one h1,
#gsap-container .three p,
#gsap-container .five .idea-5,
#gsap-container .wish-hbd {
    font-weight: bold;
    text-shadow: 0 0 6px rgba(255, 105, 180, 0.6); /* Pink glow */
}

/* Regular Text */
#gsap-container .one p,
#gsap-container .five p:not(.idea-5):not(.idea-6),
#gsap-container .wish h5,
#gsap-container .nine p:not(:has(.next-step-btn)) {
    color: #e0e0e0; /* Light gray/off-white */
    font-size: 1.4rem;
}

/* Specific Element Sizes */
#gsap-container .one h1 { font-size: 3.2rem; }
#gsap-container .one p { font-size: 1.2rem; color: #ccc; }
#gsap-container .three p { font-size: 2.8rem; margin-top: 1rem; }
#gsap-container .five p { font-size: 1.6rem; margin-bottom: 1rem; }
#gsap-container .idea-5 { font-size: 3.8rem !important; } /* Important override */
#gsap-container .idea-6 span { font-size: 11rem; color: rgba(255, 255, 255, 0.5); opacity: 0.8; }
#gsap-container .wish-hbd { font-size: 3rem; text-transform: uppercase; }
#gsap-container .wish h5 { font-size: 1.5rem; color: #eee; }
#gsap-container .nine p { font-size: 1.5rem; color: #eee;}
#gsap-container .last-smile { font-size: 2rem; color: #ff69b4; font-weight: bold;} /* Pink smile */

/* Text Box (.four) */
#gsap-container .four .text-box {
    max-width: 500px;
    width: 90%;
    margin: 1.5rem auto 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 20px;
    position: relative;
}
#gsap-container .text-box p.hbd-chatbox {
    margin: 0 0 40px 0; /* Space for button */
    text-align: left;
    color: #f0f0f0;
    font-size: 1.1rem;
}
#gsap-container .text-box span { /* Keep for GSAP */
    visibility: hidden;
}
/* Fake Button */
#gsap-container .text-box .fake-btn {
    position: absolute;
    right: 15px;
    bottom: 15px;
    background: #ff69b4;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 9999px;
    cursor: default;
    transition: background-color 0.2s;
}

/* Special idea styles */
#gsap-container .idea-3 strong {
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    background-color: #ff69b4; /* Pink accent */
    color: white;
    margin: 0 5px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#gsap-container .idea-5 .smiley {
    display: inline-block;
    color: #ff69b4; /* Pink smiley */
    font-weight: bold;
}

/* Image styling */
#gsap-container .six img.lydia-dp {
    display: block; /* Use block for centering with margin */
    margin: 0 auto;
    max-width: 80%;
    width: auto;
    max-height: 50vh; /* Adjust size */
    height: auto;
    object-fit: contain;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Replay Button Styling */
#gsap-container .nine p:has(.next-step-btn) {
    margin-top: 2rem;
}
#gsap-container .next-step-btn {
    display: inline-block;
    background: #ff69b4;
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 9999px; /* Pill shape */
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.5);
    /* Initially disabled styles */
    opacity: 0.5;
    pointer-events: none;
}
#gsap-container .next-step-btn.enabled { /* Class added by JS */
    opacity: 1;
    pointer-events: auto;
}
#gsap-container .next-step-btn.enabled:hover {
    transform: scale(1.05);
    background: #ff1493; /* Darker pink */
    box-shadow: 0 6px 20px rgba(255, 20, 147, 0.6);
}
#gsap-container .next-step-btn.enabled:active {
    transform: scale(0.98);
}


/* === Confetti Page Styling === */
#confetti-section {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100; /* Below footer/button */
    overflow: hidden;
    background: linear-gradient(135deg, #4a1259 0%, #000000 100%);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0; /* Start hidden for fade-in via JS */
}

#confetti-section #confetti { /* Canvas */
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 105; /* Above section bg, below content */
    pointer-events: none;
}

/* Wrapper for content */
#confetti-section .main {
    position: relative;
    z-index: 110; /* Above canvas */
    width: 100%;
    max-width: 1000px; /* Limit width */
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Spacing between elements */
}

/* Banner Image */
#confetti-section .banner-img {
    max-width: 90%;
    max-height: 20vh;
    height: auto;
}

/* Name Styling */
#confetti-section #name.area {
    font-size: 3.5rem;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255, 105, 180, 0.7);
    letter-spacing: normal;
    margin: 0;
    animation: bounce 1.5s infinite alternate;
}
#confetti-section #nae {
    text-transform: capitalize;
    color: #ffc0cb; /* Light pink */
    font-weight: bold;
}

/* Typed Text Styling */
#confetti-section .type-wrap {
    font-size: 1.5rem;
    color: #f0f0f0;
    min-height: 3em;
    margin: 0;
}
#confetti-section .typing h2 {
    font-size: inherit;
    margin-bottom: 0.6rem;
    font-weight: normal;
}

/* Cake Styling */
#confetti-section .cake-container {
    margin: 0 auto;
}
#confetti-section .cake {
    max-width: 130px;
    height: auto;
    display: block;
}

/* Balloon Border */
#confetti-section .balloon-border {
    position: fixed;
    bottom: -500px; /* Start pos for JS animation */
    left: 0;
    width: 100%;
    height: auto;
    max-height: 25vh;
    object-fit: cover;
    opacity: 0.7;
    z-index: 108; /* Below main content */
    pointer-events: none;
}

/* Bounce Animation */
@keyframes bounce {
    from { transform: translateY(-6%); }
    to { transform: translateY(0); }
}


/* === Floating Hearts Background Styles === */
#hearts-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;           /* Behind main content, lockscreen, footer */
    overflow: hidden;
}

.heart {
    position: absolute;
    color: rgba(255, 105, 180, 0.3); /* Slightly more opaque */
    font-size: 20px; /* Base size, JS will randomize */
    user-select: none;
    animation: float 6s ease-in-out infinite; /* Slower animation? */
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.3; }
    50% { transform: translateY(-25px) rotate(15deg) scale(1.1); opacity: 0.15; }
}


/* === Footer === */
#page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    padding: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: #bbb;
    z-index: 150; /* Below music button, above confetti/gsap content */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#page-footer span#footer-year + span { /* The heart */
   color: #ff69b4; /* Pink heart */
}


/* === Persistent Music Button Styles === */
.music-button {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    z-index: 250; /* VERY HIGH - Above lock screen, start screen, footer, etc. */
    transition: background-color 0.2s, transform 0.1s ease-out;
    font-size: 1.2rem; /* Icon size */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.music-button:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.music-button:active {
    transform: scale(0.95);
}

/* Adjust icon alignment */
.music-button span {
    display: inline-block;
    line-height: 1;
}


/* === MEDIA QUERIES === */
@media (max-width: 768px) {
    .lock-content h1 { font-size: 2rem; }
    .unlock-date { font-size: 1.2rem; }
    #countdown { font-size: 1.5rem; padding: 0.8rem;}

    .start-content h2 { font-size: 1.7rem; }
    #start-surprise-btn { font-size: 1.2rem; padding: 0.9rem 2rem; }

    #gsap-container .one h1 { font-size: 2.5rem; }
    #gsap-container .three p { font-size: 2.2rem; }
    #gsap-container .five p { font-size: 1.3rem; }
    #gsap-container .idea-5 { font-size: 3rem !important; }
    #gsap-container .idea-6 span { font-size: 8rem; }
    #gsap-container .wish-hbd { font-size: 2.4rem; }
    #gsap-container .wish h5 { font-size: 1.2rem; }
    #gsap-container .nine p { font-size: 1.2rem; }
    #gsap-container .next-step-btn { padding: 0.8rem 1.6rem; font-size: 1.1rem; }

    #confetti-section #name.area { font-size: 2.5rem; }
    #confetti-section .type-wrap { font-size: 1.2rem; }

    .heart { animation-duration: 7s; }
}

@media (max-width: 480px) {
    .lock-content { padding: 1.5rem; }
    .lock-content h1 { font-size: 1.8rem; }
    .gift-icon { font-size: 1.5rem; }
    .unlock-date { font-size: 1.1rem; }
    #countdown { font-size: 1.2rem; padding: 0.6rem; }

    .start-content h2 { font-size: 1.5rem; }
    #start-surprise-btn { font-size: 1.1rem; padding: 0.8rem 1.8rem; }
    .start-content .start-hint { font-size: 0.8rem; }

    #gsap-container > div:not(.seven):not(.eight) { top: 15vh; }
    #gsap-container .one h1 { font-size: 2rem; }
    #gsap-container .three p { font-size: 1.8rem; }
    #gsap-container .five p { font-size: 1.1rem; }
    #gsap-container .idea-5 { font-size: 2.5rem !important; }
    #gsap-container .idea-6 span { font-size: 6rem; }
    #gsap-container .wish-hbd { font-size: 2rem; }
    #gsap-container .wish h5 { font-size: 1rem; }
    #gsap-container .nine p { font-size: 1.1rem; }
    #gsap-container .next-step-btn { padding: 0.7rem 1.4rem; font-size: 1rem; }

    #gsap-container .four .text-box { padding: 15px; }
    #gsap-container .text-box p.hbd-chatbox { font-size: 1rem; }
    #gsap-container .text-box .fake-btn { padding: 0.4rem 0.8rem; font-size: 0.9rem; }

    #confetti-section #name.area { font-size: 2rem; }
    #confetti-section .type-wrap { font-size: 1rem; }
    #confetti-section .cake { max-width: 100px; }
    #page-footer { font-size: 0.75rem; padding: 0.4rem; }

    .music-button { /* Adjustments for music button on small screens */
        bottom: 0.75rem;
        right: 0.75rem;
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.1rem;
    }

    .heart { animation-duration: 8s; }
}