/* Custom gradient for the visual background overlay */
        .gradient-overlay {
            background: linear-gradient(180deg, rgba(147, 51, 234, 0.6) 0%, rgba(16, 24, 32, 0.9) 100%);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1; /* Ensure overlay is above video but below text */
        }

        /* Styles for the video background */
        .video-background {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: 0; /* Behind the overlay */
            transform: translate(-50%, -50%);
            filter: blur(2px) grayscale(50%); 
        }
        
        /* Custom glow effect for the main CTA button */
        .cta-glow {
            box-shadow: 0 0 15px rgba(52, 211, 153, 0.7), 0 0 5px rgba(52, 211, 153, 0.5) inset;
            transition: all 0.2s ease-in-out;
        }
        .cta-glow:hover {
            box-shadow: 0 0 25px rgba(52, 211, 153, 1), 0 0 10px rgba(52, 211, 153, 0.7) inset;
            transform: translateY(-2px);
        }

        /* Full screen overlay and centering */
        #popup-overlay {
            background-color: rgba(255, 255, 255, 0.445);
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }

        /* Ensure smooth opening/closing transitions */
        #popup-modal {
            transition: all 0.3s ease-in-out;
            max-width: 768px; /* Increased max-width to accommodate side-by-side content */
            width: 90%; /* Responsive width */
        }

        /* Font Setup */
        body {
            font-family: 'Inter', sans-serif;
        }

        /* --- Custom Animation for FREE Video Element (Flicker & Rotate) --- */
        @keyframes flicker-rotate {
            0% { 
                box-shadow: 0 0 5px rgba(52, 211, 153, 0.5); 
                transform: rotate(0deg); 
            }
            20% { 
                box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
            }
            40% { 
                box-shadow: 0 0 5px rgba(52, 211, 153, 0.5);
                transform: rotate(1deg); 
            }
            60% { 
                box-shadow: 0 0 15px rgba(52, 211, 153, 1);
                transform: rotate(-1deg); 
            }
            80% { 
                box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
            }
            100% { 
                box-shadow: 0 0 5px rgba(52, 211, 153, 0.5);
                transform: rotate(0deg); 
            }
        }

        .flicker-effect {
            animation: flicker-rotate 2s infinite alternate;
        }

        /* --- Animation for 50% OFF Element (Urgent Blink) --- */
        @keyframes urgent-blink {
            0%, 49% { 
                opacity: 1; 
                filter: brightness(1.2);
            }
            50%, 100% { 
                opacity: 0.8; 
                filter: brightness(1.0);
            }
        }
        
        .blinking-h3 {
            animation: urgent-blink 0.3s step-start infinite; 
        }

        /* Custom image styling for responsiveness */
        .my-gaming-image {
            width: 100%;
            height: 200px; /* Default height for mobile, will be overridden by sm:h-full */
            object-fit: cover;
            object-position: center;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0; /* Remove rounded corners for top on mobile */
        }
        @media (min-width: 640px) { /* sm breakpoint */
            .my-gaming-image {
                height: 100%; /* Take full height on larger screens */
                border-top-left-radius: 0.75rem; /* rounded-xl */
                border-bottom-left-radius: 0.75rem; /* rounded-xl */
                border-bottom-right-radius: 0; /* Remove for side-by-side */
            }
        }

        /* ONLYFANS focal styling */
        .only-fans {
            display: inline-block;
            font-weight: 900;
            letter-spacing: 0.25em;
            color: #00aff0;
            text-shadow: 0 0 10px rgba(0, 175, 240, 0.8);
            text-transform: uppercase;
            position: relative;
            padding: 0.1em 0.35em;
            margin-left: 0.25rem;
            filter: drop-shadow(0 0 16px rgba(0, 175, 240, 0.9));
            animation: pulse-glow 1.6s ease-in-out infinite;
        }

        @keyframes pulse-glow {
            0% {
                transform: scale(1);
                text-shadow: 0 0 8px rgba(0, 175, 240, 0.6);
                filter: drop-shadow(0 0 10px rgba(0, 175, 240, 0.6));
                opacity: 0.9;
            }
            50% {
                transform: scale(1.1);
                text-shadow: 0 0 22px rgba(0, 175, 240, 1);
                filter: drop-shadow(0 0 24px rgba(0, 175, 240, 1));
                opacity: 1;
            }
            100% {
                transform: scale(1);
                text-shadow: 0 0 8px rgba(0, 175, 240, 0.6);
                filter: drop-shadow(0 0 10px rgba(0, 175, 240, 0.6));
                opacity: 0.9;
            }
        }

        .only-fans::before {
            content: "";
            position: absolute;
            inset: -45%;
            background: radial-gradient(circle, rgba(0, 175, 240, 0.35), transparent 70%);
            z-index: -1;
            animation: halo-pulse 2.3s ease-in-out infinite;
        }

        @keyframes halo-pulse {
            0% {
                transform: scale(1);
                opacity: 0.35;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.7;
            }
            100% {
                transform: scale(1);
                opacity: 0.35;
            }
        }