body.intro {
            overflow: hidden !important;
            background: #1e0909;
        }

        body.page-ready #pageContainer {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
            transition: opacity 700ms ease;
        }

        .page-container {
            opacity: 0;
            visibility: hidden;
            transition: opacity 700ms ease;
        }

        #hero, .entrypage1 {
            grid-area: stack;
        }

        #hero {
            z-index: 4;
            height: 100vh; /* Keeps it full screen */
        }
        /* .intro-cover, .intro-video, .intro-open-btn {
            display: none;
            opacity: 0;
            pointer-events: none;
        } */
/*frandom fixes*/
.timeline {
  opacity: 1 !important;
  transform: none !important;
}
 #music-btn {
            position: fixed;
            bottom: 28px;
            right: 28px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #6a0000;
            color: #ffffff;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            z-index: 999;
        }

        #music-btn:hover {
            transform: scale(1.08);
            box-shadow: 0 12px 32px rgba(212, 175, 55, 0.4);
        }

        #music-btn:active {
            transform: scale(0.96);
        }
body {
  overflow: auto !important;
}

/*for the envelope*/
        body.no-scroll {
            overflow: hidden;
        }

        .intro-cover {
            position: fixed;
            inset: 0;
            background: linear-gradient(180deg, rgba(35, 4, 4, 0.04), rgba(35, 4, 4, 0.34)), url('./images/greenbg-poster.jpg') center/cover no-repeat;
            display: grid;
            place-items: end center;
            z-index: 9999;
            padding: 48px 24px 72px;
            text-align: center;
            color: #fff;
            transition: opacity 0.8s ease, transform 0.8s ease;
            cursor: pointer;
        }

        .intro-cover > .intro-open-btn {
            position: relative;
            z-index: 1;
            background: rgba(255, 248, 242, 0.82);
            color: #6a0000;
            border: 1px solid rgba(106, 0, 0, 0.45);
            box-shadow: 0 14px 36px rgba(40, 0, 0, 0.18);
            padding: 1.2rem 2.4rem;
            animation: pulse 2.2s ease-in-out infinite;
        }

        .intro-cover > .intro-open-btn:hover {
            background: rgba(244, 229, 229, 0.24);
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.18);
            }
            50% {
                transform: scale(1.04);
                box-shadow: 0 0 0 18px rgba(255, 255, 255, 0.05);
            }
        }

        .intro-frame {
            display: none;
        }

        .intro-cover.intro-fade {
            opacity: 0;
            transform: translateY(-16px);
            pointer-events: none;
        }

        .intro-video {
            display: block;
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 9998;
            pointer-events: none;
            background: #000;
            opacity: 0;
            transition: opacity 0.45s ease;
        }

        .intro-video.visible {
            opacity: 1;
        }

        .intro-fade-overlay {
            position: fixed;
            inset: 0;
            background: #fff;
            opacity: 0;
            pointer-events: none;
            z-index: 10000;
            transition: opacity 0.6s ease;
        }

        .intro-fade-overlay.visible {
            opacity: 1;
        }

        .intro-frame {
            width: min(100%, 540px);
            padding: 28px;
            border-radius: 28px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(18, 39, 24, 0.85);
            box-shadow: var(--shadow);
            backdrop-filter: blur(14px);
        }

        .intro-frame h1 {
            margin: 0 0 0.75rem;
            font-size: clamp(2.4rem, 4vw, 4.2rem);
            letter-spacing: 0.03em;
            font-weight: 700;
        }

        .intro-frame p {
            margin: 0 0 1.5rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.85);
            font-size: 1rem;
        }

        .intro-open-btn,
        .button {
            border: none;
            cursor: pointer;
            border-radius: 999px;
            padding: 0.95rem 2rem;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .button.accent {
            background: var(--gold);
            color: #132a1d;
            box-shadow: 0 16px 30px rgba(212, 175, 55, 0.2);
        }

        .button.accent:hover {
            transform: translateY(-2px);
            box-shadow: 0 22px 36px rgba(212, 175, 55, 0.28);
        }

        .intro-video {
            display: block;
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 9998;
            pointer-events: none;
            background: #000;
        }

/* Hide other pages while in intro state (before panels finish opening) 
    body.intro .invitepage2, body.intro .countdownpage3,
    body.intro .timelinepage4, body.intro .receptionpage5,
    body.intro .receptionpage6, body.intro .giftpage7, body.intro .RSVP-page8 {
        display: none;
    }*/
        body.no-scroll {
            overflow: hidden;
        }
        /*red opening*/
    .hero {
        position: fixed;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        padding-left: 0 !important;
    }
    .entrypage1 {
        background: linear-gradient(135deg, #fffaf7, #f7e9e7);
        border: 1px solid rgba(106, 0, 0, 0.2);
        margin: 16px;
        min-height: calc(100vh - 32px);
        box-shadow: var(--shadow);
    }
    .hero-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    /* animate text*/
    .split-line {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .split-line.in-view {
        opacity: 1;
        transform: translateY(0);
    }