/* --------------------------------------------------
   Base document reset (iframe-only)
-------------------------------------------------- */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: #000;
    overflow-x: hidden;
}

/* --------------------------------------------------
   Framing container
   Establishes stacking context for overlays
-------------------------------------------------- */

.frame {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 2rem;
    box-sizing: border-box;

    /* 🔑 CRITICAL FIX:
       Creates a stacking context above fixed layers */
    z-index: 3;
}


/* --------------------------------------------------
   Background image (full-bleed, behind everything)
-------------------------------------------------- */

.background-image {
    position: absolute;
    inset: 0;

    background-image: url('/app/uploads/frack_files/gasflare-playground.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    /* 👇 REMOVE THIS */
    /* background-attachment: fixed; */

    z-index: 1;
}





/* --------------------------------------------------
   Black fade overlay (masks first-paint flash)
-------------------------------------------------- */

#fadeOverlay {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 1;
    z-index: 2;
    pointer-events: none;
}


/* --------------------------------------------------
   Overlay text (anchored top-left of frame)
-------------------------------------------------- */

.overlay-text {
    position: absolute;
    left: clamp(1rem, 5%, 3rem);
    top: clamp(1rem, 5%, 3rem);
    max-width: 40ch;

    background: rgba(0, 0, 0, 0.35);
    padding: 0.75rem 1rem;
    border-radius: 6px;

    color: #eee;
    font-family: Georgia, system-ui, -apple-system, BlinkMacSystemFont, serif;
    line-height: 1.4;

    /* 🧠 Allow interaction inside, block pass-through */
    pointer-events: auto;
    z-index: 4;

    /* Fade-in behavior */
    opacity: 0;
    animation:
        overlayFadeIn 750ms ease-in-out forwards,
        overlayGlowPulse 2.6s ease-in-out infinite;
    animation-delay: 800ms, 1.4s;
}

/* ---------------------------------------------
   Link styling (rides the container glow)
--------------------------------------------- */

.overlay-text a {
    text-decoration: none;   /* 🚫 underline */
    color: #eee;
    cursor: pointer;

    /* Subtle companion glow */
    text-shadow:
        0 0 6px rgba(10, 155, 48, 0.55),
        0 0 14px rgba(10, 155, 48, 0.35);
}

.overlay-text a:hover {
    text-shadow:
        0 0 12px rgba(10, 155, 48, 0.9),
        0 0 28px rgba(10, 155, 48, 0.65),
        0 0 56px rgba(10, 155, 48, 0.45);
}

/* ---------------------------------------------
   Container glow (the real power source)
--------------------------------------------- */

@keyframes overlayGlowPulse {
    0% {
        box-shadow:
            0 0 0 rgba(10, 155, 48, 0.0),
            0 0 0 rgba(10, 155, 48, 0.0);
    }
    50% {
        box-shadow:
            0 0 22px rgba(10, 155, 48, 0.55),
            0 0 48px rgba(10, 155, 48, 0.35);
    }
    100% {
        box-shadow:
            0 0 0 rgba(10, 155, 48, 0.0),
            0 0 0 rgba(10, 155, 48, 0.0);
    }
}

/* ---------------------------------------------
   Accessibility: reduced motion
--------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .overlay-text {
        animation: overlayFadeIn 750ms ease-in-out forwards;
        box-shadow:
            0 0 18px rgba(10, 155, 48, 0.45);
    }

    .overlay-text a {
        text-shadow:
            0 0 10px rgba(10, 155, 48, 0.6);
    }
}


/* --------------------------------------------------
   Overlay typography
-------------------------------------------------- */

.overlay-text h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.4rem;
    font-weight: 500;
}

/* ---------------------------------------------
   Paragraph reveal wipe (left → right, slower)
--------------------------------------------- */

.overlay-text p {
    margin: 0;
    opacity: 0;

    /* Start hidden from the right */
    clip-path: inset(0 100% 0 0);

    animation:
        pRevealWipeLR 3500ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards;

    animation-delay: 2.35s; /* stays aligned with h1 */
}

@keyframes pRevealWipeLR {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    to {
        opacity: 0.9;
        clip-path: inset(0 0 0 0);
    }
}

/* ---------------------------------------------
   Reduced motion safety
--------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .overlay-text p {
        animation: none;
        opacity: 0.9;
        clip-path: none;
    }
}




/* --------------------------------------------------
   Animations
-------------------------------------------------- */

@keyframes fade-in-from-black {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* --------------------------------------------------
   Accessibility: reduced motion
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #fadeOverlay {
        animation: none;
        opacity: 0;
    }

    .overlay-text {
        animation: none;
        opacity: 1;
    }
}