<!DOCTYPE html>
<html>
<head>
    <title>Hello World PHP</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }

        .message {
            text-align: center;
            font-size: 24px;
            color: #333;
            opacity: 0;
            transition: opacity 3s ease-in;
        }

        .visible {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="message" id="fadeMessage">
        <?php
        $name = "This is evs.PPSSYS.com";
        echo "Hello, World! $name.";
        ?>
    </div>

    <script>
        // Use requestAnimationFrame to ensure browser has time to apply initial opacity
        window.addEventListener('DOMContentLoaded', () => {
            const el = document.getElementById('fadeMessage');
            requestAnimationFrame(() => {
                el.classList.add('visible');
            });
        });
    </script>
</body>
</html>
