/* General Reset */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    color: #333;
    background: linear-gradient(to bottom, #ffebf0, #fffaf4);
    height: 100%;
    overflow-x: hidden;
}

/* Prevent scrolling while the welcome screen is visible */
body.no-scroll {
    overflow: hidden;
}

/* Welcome Screen */
#welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: radial-gradient(circle, #ffbfd2, #ff90a3);
    color: white;
    text-align: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#welcome-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none; /* Completely remove the element from the layout */
}

/* Welcome Screen Text and Button */
#welcome-screen h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

#welcome-screen button {
    padding: 10px 20px;
    font-size: 1.2rem;
    border: none;
    border-radius: 5px;
    background: #ff5c8a;
    color: white;
    cursor: pointer;
    transition: background 0.3s;
}

#welcome-screen button:hover {
    background: #ff3d6e;
}

/* Main Content */
#main-content {
    display: none; /* Initially hidden */
    padding: 20px;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    height: 100%; /* Ensure the main content takes full height */
}

/* Timeline Section */
#timeline {
    margin: 30px auto;
    max-width: 600px;
    text-align: center;
}

.memory {
    margin-bottom: 20px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.memory h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #ff5c8a;
}

/* Interactive Notes */
#interactive-notes {
    text-align: center;
    margin-top: 30px;
}

.note {
    display: inline-block;
    font-size: 2rem;
    margin: 10px;
    cursor: pointer;
    transition: transform 0.2s;
}

.note:hover {
    transform: scale(1.2);
}

/* Final Surprise Section */
#final-surprise {
    text-align: center;
    margin-top: 30px;
}

/* big-text style: prominent, one-line, scalable, decorative */
.big-text {
    display: inline-block;
    white-space: nowrap;
    /* keep in one line */
    max-width: 100%;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0b84ff;
    /* bright light-blue */
    padding: 10px 18px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(11, 132, 255, 0.08), rgba(11, 132, 255, 0.02));
    box-shadow: 0 8px 30px rgba(11, 132, 255, 0.12), inset 0 -2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(11, 132, 255, 0.12);
    transform-origin: center;
    transition: transform 0.15s ease;
    /* fallback responsive size; JS will adjust to perfectly fit */
    font-size: 7vw;
}

/* Hover/tap micro-interaction */
.big-text:hover {
    transform: translateY(-3px) scale(1.01);
}

/* Scroll indicator (fixed, centered at bottom) */
.scroll-indicator {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 9999;
    pointer-events: none;
    /* non-interactive */
    -webkit-tap-highlight-color: transparent;
}

/* chevrons (SVG use currentColor) */
.scroll-indicator .chev {
    color: #9be2ff;
    /* base light-blue */
    opacity: 0.45;
    transform-origin: center;
    will-change: opacity, transform;
}

/* ripple animation: lights chevrons top->bottom */
@keyframes chev-ripple {
    0% {
        opacity: 0.18;
        transform: translateY(0) scale(0.98);
        filter: blur(0.2px);
    }

    35% {
        opacity: 1;
        transform: translateY(3px) scale(1.06);
        filter: blur(0);
    }

    70% {
        opacity: 0.4;
        transform: translateY(6px) scale(1.00);
        filter: blur(0.2px);
    }

    100% {
        opacity: 0.18;
        transform: translateY(10px) scale(0.98);
        filter: blur(0.6px);
    }
}

/* apply animation with staggered delays to create downward motion */
.scroll-indicator .chev:nth-child(1) {
    animation: chev-ripple 1.6s cubic-bezier(.2, .9, .3, .95) infinite;
    animation-delay: 0s;
}

.scroll-indicator .chev:nth-child(2) {
    animation: chev-ripple 1.6s cubic-bezier(.2, .9, .3, .95) infinite;
    animation-delay: 0.18s;
}

.scroll-indicator .chev:nth-child(3) {
    animation: chev-ripple 1.6s cubic-bezier(.2, .9, .3, .95) infinite;
    animation-delay: 0.36s;
}

/* hide indicator elegantly */
.scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(12px);
    transition: opacity 300ms ease, transform 300ms ease;
}

/* responsive tweaks */
@media (max-width: 420px) {
    .scroll-indicator {
        bottom: 12px;
    }

    .scroll-indicator .chev {
        width: 28px;
        height: 18px;
    }
                .big-text {
            padding: 8px 12px;
                border-radius: 10px;
            }
}