/* Define Variables for easy color changes */
              :root {
            --blue-fill: #1e90ff; /* Blue fill */
            --white-fill: #fff;
            --white-outline: #fff; /* White outline */
            --dark-overlay: rgba(30, 0, 60, 0.7); /* Dark purple-blue overlay */
            --font-stack: 'Impact', 'Arial Black', sans-serif;
            
            /* Animation Variables */
            --stroke-width: 0.5px; /* Very thin border */
            --base-fill: 50%; /* The central fill level */
            --max-wave-travel: 4%; /* Reduced max distance for smoother effect */
        }

    

        /* ========================================
        TEXT LAYOUT & TYPOGRAPHY
        ========================================
        */
        .text-group {
            position: relative;
            line-height: 1.2;
            font-family: var(--font-stack);
            text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
            max-width: 90%;
        }
        
        /* H1: Top text - HAND CAR WASH AND DETAILING SERVICE */
        .text-group h1 {
            font-size: 2.5vw;
            margin: 0 0 10px 0;
            color: var(--white-outline);
            letter-spacing: 3px;
            font-weight: normal;
            text-transform: uppercase;
            -webkit-text-stroke: var(--stroke-width) var(--white-outline);
            text-stroke: var(--stroke-width) var(--white-outline);
        }

        /* H2: Animated Half-Filled Text (ADVANCED) - This is the one with wave fill */
        .text-group h2 {
            font-size: 5vw;
            margin: 0;
            position: relative;
            letter-spacing: 2px;
            font-weight: normal;
            
            /* Base: Transparent fill with Very Thin White Outline */
            color: transparent;
            -webkit-text-stroke: var(--stroke-width) var(--white-outline);
            text-stroke: var(--stroke-width) var(--white-outline);
            z-index: 10;
        }

        /* The Animated Fill Layer for ADVANCED */
        .text-group h2::before {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden; 
            letter-spacing: 2px;
            
            /* Set the fill color to blue */
            color: var(--blue-fill);
            
            /* Remove the stroke from the filled portion */
            -webkit-text-stroke: none;
            text-stroke: none;

            /* Initial state: Clip to 50% from the top */
            clip-path: inset(var(--base-fill) 0 0 0); 
            
            /* Smoother wave animation */
            animation: smooth-wave-fill 8s ease-in-out infinite;
            z-index: 20; 
        }

        /* H3: Bottom text - CONSTRUCTION */
        .text-group h3 {
            font-size: 3.5vw;
            margin: 0;
            color: var(--white-outline);
            letter-spacing: 4px;
            font-weight: normal;
            text-transform: uppercase;
            -webkit-text-stroke: var(--stroke-width) var(--white-outline);
            text-stroke: var(--stroke-width) var(--white-outline);
        }

        /* Smoother, More Even Wave Animation */
        @keyframes smooth-wave-fill {
            100% {
                clip-path: inset(calc(var(--base-fill) - var(--max-wave-travel)) 0 0 0); /* 46% */
            }
            20% {
                clip-path: inset(calc(var(--base-fill) - (var(--max-wave-travel) * 0.5)) 0 0 0); /* 48% */
            }
            60% {
                clip-path: inset(calc(var(--base-fill) + var(--max-wave-travel)) 0 0 0); /* 54% */
            }
            7% {
                clip-path: inset(calc(var(--base-fill) + (var(--max-wave-travel) * 0.5)) 0 0 0); /* 52% */
            }
            90% {
                clip-path: inset(calc(var(--base-fill) - var(--max-wave-travel)) 0 0 0); /* 46% */
            }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .text-group h1 {
                font-size: 4vw;
                letter-spacing: 2px;
            }
            .text-group h2 {
                font-size: 12vw;
                letter-spacing: 1px;
            }
            .text-group h3 {
                font-size: 6vw;
                letter-spacing: 2px;
            }
        }