:root {
            --red-gradient: linear-gradient(135deg, #e0616c 0%, #d43c4e 100%);
            --font-display: 'Syne', sans-serif;
            --font-sans: 'Plus Jakarta Sans', sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-sans);
            background-color: #FAF8F7; /* Muted warm cream background for a cleaner premium look */
            height: 100vh;
            min-height: 600px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Diagonal Background Split with Entrance Slide Animation */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--red-gradient);
            z-index: 1;
            clip-path: polygon(0 0, 55% 0, 32% 100%, 0% 100%);
            animation: slideBG 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* Main Container */
        main {
            position: relative;
            z-index: 5;
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 80px;
            align-items: center;
            height: 100%;
        }

        /* Left Side Content - Entrance Animation */
        .left-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            height: 100%;
            padding-left: 20px;
            animation: slideInLeft 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
        }

        .title {
            font-family: var(--font-display);
            font-size: 4.2rem;
            font-weight: 800;
            line-height: 0.95;
            color: #000000;
            text-transform: uppercase;
            letter-spacing: -2px;
            white-space: nowrap;
        }

        /* Center Character Illustration Wrapper */
        .character-container {
            position: absolute;
            left: 48%;
            bottom: 0;
            transform: translateX(-50%);
            height: 85%;
            width: 45%;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            z-index: 8;
            pointer-events: none;
            /* Smooth slide-up transition with absolutely no floating idle animation */
            animation: characterSlideUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
        }

        /* Character Render */
        .character-img {
            max-height: 80%;
            max-width: 90%;
            object-fit: contain;
            filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.15));
        }

        /* Right Side Content - Entrance Animation */
        .right-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            text-align: right;
            height: 100%;
            max-width: 520px;
            justify-self: end;
            animation: slideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
        }

        .char-name {
            font-family: var(--font-display);
            font-size: 4.2rem;
            font-weight: 800;
            line-height: 0.95;
            color: #000000;
            margin-bottom: 45px;
            text-transform: uppercase;
            letter-spacing: -2px;
            white-space: nowrap;
        }

        .about-section {
            max-width: 420px;
        }

        .about-title {
            font-size: 1.5rem;
            font-weight: 800;
            text-transform: uppercase;
            color: #000000;
            margin-bottom: 12px;
            letter-spacing: 1px;
        }

        .about-text {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #333333;
            font-weight: 500;
        }

        /* ==========================================
           PROFESSIONAL ANIMATIONS (KEYFRAMES)
           ========================================== */

        /* 1. Background split wipe effect */
        @keyframes slideBG {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(0);
            }
        }

        /* 2. Left content entrance */
        @keyframes slideInLeft {
            0% {
                opacity: 0;
                transform: translateX(-50px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* 3. Right content entrance */
        @keyframes slideInRight {
            0% {
                opacity: 0;
                transform: translateX(50px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* 4. Character smooth slide up (stays stationary after finish) */
        @keyframes characterSlideUp {
            0% {
                opacity: 0;
                transform: translate(-50%, 150px);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        /* Responsive adjustments */
        @media (max-width: 1024px) {
            body::before {
                clip-path: polygon(0 0, 100% 0, 100% 40%, 0 75%);
                animation: none;
            }
            body {
                overflow-y: auto;
                height: auto;
            }
            main {
                grid-template-columns: 1fr;
                padding: 40px 20px;
                gap: 40px;
            }
            .left-content {
                align-items: center;
                text-align: center;
                padding-left: 0;
                animation: slideInLeft 1s ease forwards;
            }
            .right-content {
                align-items: center;
                text-align: center;
                max-width: 100%;
                justify-self: center;
                animation: slideInRight 1s ease forwards;
            }
            .char-name, .title {
                font-size: 3.5rem;
            }
            .character-container {
                position: relative;
                transform: none;
                left: auto;
                width: 100%;
                height: 350px;
                order: -1;
                animation: characterSlideUp 1s ease forwards;
            }
        }