/* Background Beam Animation - Rising Arc */

.beam-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150vw;
    /* Very wide to look like a large arc */
    height: 0;
    z-index: -1;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* The expanding beam arc */
.beam-body {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(251, 146, 60, 0.15) 0%,
            rgba(251, 146, 60, 0.0) 80%);
    border-radius: 100% 100% 0 0;
    /* Huge Arc */
    border-top: 11px solid var(--accent-orange);
    /* Thickened significantly (+5px) */
    box-shadow: 0 -15px 50px rgba(251, 146, 60, 0.6), 0 0 20px rgba(251, 146, 60, 0.4) inset;
    /* Enhanced Glow */

    opacity: 0;
    will-change: height, opacity;
    transform: translateZ(0);
    /* Removed beamBodyFade from here, moved to pseudo-element */
    animation: beamRise 3s cubic-bezier(0.4, 0, 0.2, 1) forwards,
        beamPulse 6s ease-in-out 3s infinite;
    /* Slowed down from 4s to 6s, delay updated to match rise */

    /* Background moved to ::before for smooth opacity fade */
    position: relative;
    overflow: hidden;
    /* Ensure fill stays within rounded corners */
}

/* The filled body color - strictly for fading out smoothly */
.beam-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(251, 146, 60, 0.2) 0%,
            transparent 100%);
    opacity: 1;
    z-index: -1;
    /* Fade out over 4s, starting after the 2s rise */
    animation: beamFillFade 4s ease-out 2s forwards;
}

.beam-surface {
    display: none;
}

@keyframes beamRise {
    0% {
        height: 0;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    100% {
        height: calc(65vh + 100px);
        opacity: 1;
        /* No background change here */
    }
}

@keyframes beamFillFade {
    to {
        opacity: 0;
        /* Smoothly fade out the fill only */
    }
}


@keyframes beamPulse {
    0% {
        box-shadow: 0 -15px 50px rgba(251, 146, 60, 0.6), 0 0 20px rgba(251, 146, 60, 0.4) inset;
        border-top-color: var(--accent-orange);
        border-top-width: 11px;
    }

    50% {
        box-shadow: 0 -10px 30px rgba(234, 88, 12, 0.4), 0 0 10px rgba(234, 88, 12, 0.3) inset;
        border-top-color: rgba(251, 146, 60, 0.8);
        border-top-width: 9px;
        /* Slight throb */
    }

    100% {
        box-shadow: 0 -15px 50px rgba(251, 146, 60, 0.6), 0 0 20px rgba(251, 146, 60, 0.4) inset;
        border-top-color: var(--accent-orange);
        border-top-width: 11px;
    }
}

/* Static beam - NO Pulse */
.beam-body.static {
    animation: beamRise 3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}