/* --- Step 2: Desktop Root Variables (Light Mode) --- */
         :root {
            --hero-overlay: rgba(0, 0, 0, 0.4);
         }
  


         /* --- Step 4: Global Body Styles --- */


         /* --- Step 5: Animation Keyframes --- */
         /* Standard Fade In for background and text */
         @keyframes fadeIn {
            from {
               opacity: 0;
               transform: translateY(20px);
            }
            to {
               opacity: 1;
               transform: translateY(0);
            }
         }
         /* Desktop Face Zoom: Scale and Vertical Center */
         @keyframes zoomInFaceDesktop {
            from {
               opacity: 0;
               transform: translateY(-50%) scale(0.2);
            }
            to {
               opacity: 1;
               transform: translateY(-50%) scale(1);
            }
         }
         /* Mobile Face Zoom: Scale and Horizontal Center */
         @keyframes zoomInFaceMobile {
            from {
               opacity: 0;
               transform: translateX(-50%) scale(0.2);
            }
            to {
               opacity: 1;
               transform: translateX(-50%) scale(1);
            }
         }
         /* Text Zoom Out Effect */
         @keyframes zoomOutText {
            from {
               opacity: 0;
               transform: scale(1.3);
            }
            to {
               opacity: 1;
               transform: scale(1);
            }
         }
         /* Slide in from the Right Effect */
         @keyframes heroslideInRight {
            from {
               opacity: 0;
               transform: translateX(250px);
            }
            to {
               opacity: 1;
               transform: translateX(0);
            }
         }
         /* --- Step 6: Hero Section Layout --- */
         .hero-container0,
         .hero-container1 {
            position: relative;
            width: 100%;
            overflow: hidden;
         }
         .hero-container0 {
            aspect-ratio: 4 / 1;
            min-height: 600px;
         }
         .hero-container1 {
            aspect-ratio: 8 / 1;
            min-height: 400px;
         }
         /* Main Hero Background Image */
         .hero-photo0 {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            opacity: 0;
            animation: fadeIn 1.5s ease-out forwards;
            filter: brightness(50%); /* Adjust percentage to your liking */
            transition: filter 0.5s ease; /* Optional: smooths the darkening effect */
         }
         /* --- Step 7: Profile Face Image Styling --- */
         .hero-face0,
         .hero-face1 {
            position: absolute;
            width: 240px;
            height: 320px;
            object-fit: cover;
            border-radius: 50%;
            border: 5px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
            z-index: 10;
            opacity: 0;
            animation: zoomInFaceDesktop 1.5s
               cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
         }
         .hero-face0 {
             left: 3%;
             top: 40%;
         }
         .hero-face1 {
            left: 6%;
            top: 55%;
         }
         /* --- Step 8: Hero Title Bar --- */
         .hero-title-bar0,
         .hero-title-bar1 {
            position: absolute;
            left: 30%;
            margin: 0;
            text-align: center;
            padding-left: 50%;
            border-radius: 5px;
            background: linear-gradient(
               to bottom,
               #666 0%,
               /* Dark top edge */ #333 20%,
               /* Deep shadow */ #555 50%,
               /* Light center highlight */ #222 80%,
               /* Deep shadow */ #444 100% /* Dark bottom edge */
            );
            /* Beveled edges for extra 3D depth */
            border-top: 2px solid #555;
            border-bottom: 2px solid #000;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            padding: 10px 0;
            backdrop-filter: blur(3px);
            z-index: 2;
               opacity: 0; 
              transform: translateX(250px); /* Pre-set the starting position */
            animation: heroslideInRight 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
               forwards;
         }

       .hero-title-bar1 {
            background: linear-gradient(
               to bottom,
               rgba(0, 0, 0, 0.8) 0%,
               /* Dark top */ rgba(70, 70, 70, 0.8) 50%,
               /* Brighter middle */ rgba(0, 0, 0, 0.8) 100% /* Dark bottom */
            );
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            opacity: 1;
         }


         .hero-title-bar0 {
            top: 20%;
            width: 55%;

         }
         .hero-title-bar1 {
            top: 40%;
            width: 65%;

         }
         .hero-title0 {
            color: white;
            font-family: var(--font-serif);
            font-size: clamp(2.6rem, 4vw, 6rem);
            margin: 0;
            display: block;
            letter-spacing: 1px;
         }
         /* --- Step 9: Subtitle Styling --- */
         /* One container to hold both */
         .hero-subtitle-container {
            position: absolute;
            top: 55%; /* Only the container needs a top position */
            left: 25%;
            width: 65%;
            margin: 0;
            text-align: center;
            z-index: 2;
         }
         /* Subtitle Text Base Styles */
         .hero-subtitle-text1,
         .hero-subtitle-text2 {
            color: white;
            display: block; /* Changed to block so they stack vertically */
            margin: 0 auto;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
            opacity: 0; /* Hidden initially for animation */
         }
         .hero-subtitle-text1 {
            font-family: var(--font-sans);
            font-size: clamp(2.2rem, 4vw, 3rem);
            font-weight: 700;
            line-height: 1.3;
            animation: zoomOutText 1.5s ease-out 1s forwards;
         }
         .hero-subtitle-text2 {
            font-family: var(--font-serif);
            font-size: clamp(1.8rem, 3vw, 2.6rem);
            line-height: 1.2;
            margin-top: 40px; /* This is now your consistent gap! */
            animation: fadeIn 1.5s ease-out 2s forwards;
         }

         /* --- Step 12: Mobile Responsiveness Media Query --- */
         @media (max-width: 768px) {
            .hero-title0 {
               font-size: clamp(1.5rem, 5vw, 2rem);
            }
            /* Center Face Photo for Mobile */
            .hero-face0,
            .hero-face1 {
               width: 180px;
               height: 220px;
               top: 15%;
               left: 50%;
               transform: translateX(-50%);
               animation: zoomInFaceMobile 1.5s
                  cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            }

            .hero-face1 {
               top: 14%;
               left: 50%;
            }


            /* Center the Name/Title Bar for Mobile */
            .hero-title-bar0,
            .hero-title-bar1 {
               text-align: center;
               padding-left: 0;
               border-radius: 5px;
               transform-origin: center;
               left: 0;
               right: 0;
               margin: 0 auto;
            }
            .hero-title-bar0 {
               top: 55%;
               width: 85%;
            }
            .hero-title-bar1 {
               top: 88%;
               width: 50%;
            }
            /* The single container for both subtitles */
            .hero-subtitle-container {
               left: 5%; /* Slightly wider on mobile for better fit */
               width: 90%;
               top: 70%; /* Adjusted so the whole block starts at a good height */
               text-align: center;
               padding-left: 0;
               position: absolute;
               z-index: 2;
            }
            .hero-subtitle-text1 {
               font-size: clamp(1.4rem, 6vw, 2rem);
               display: block;
               line-height: 1.2;
               margin-bottom: 0;
            }
            .hero-subtitle-text2 {
               font-size: clamp(
                  1.3rem,
                  5.5vw,
                  1.8rem
               ); /* Slightly smaller to distinguish it */
               display: block;
               /* THIS IS YOUR FIXED GAP */
               margin-top: 25px;
               line-height: 1.3;
            }
         }

         /* Welcome to my world #1 */
         .title1-bar {
            width: 100%;
            padding: 5px 0;
            text-align: center;
            /* Creates a highlight in the center to make it look cylindrical */
            background: linear-gradient(
               to bottom,
               #666 0%,
               /* Dark top edge */ #333 20%,
               /* Deep shadow */ #555 50%,
               /* Light center highlight */ #222 80%,
               /* Deep shadow */ #444 100% /* Dark bottom edge */
            );
            /* Beveled edges for extra 3D depth */
            border-top: 2px solid #555;
            border-bottom: 2px solid #000;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            /* --- ZOOM ANIMATION SETTINGS --- */
            animation: zoomIn 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
               forwards;
            opacity: 0;
         }
         .title1 {
            font-size: clamp(2rem, 4.5vw, 3rem);
            color: white;
            text-align: center;
            font-family: var(--font-sans);
            margin: 0;
            opacity: 0.9;
            text-transform: Normal;
            letter-spacing: 0px;
            /* Text shadow to make the letters "pop" off the 3D strip */
            text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.8);
         }

         /* Your Welcome to my world #2 */
         .title2-bar {
            left: 0; /* CHANGED: Was 50%, now 0 */
            width: 100%;
            text-align: center;
            background: rgba(0, 0, 0, 0.6);
            padding: 10px 0;
            backdrop-filter: blur(3px);
            z-index: 2;
            opacity: 0;
            animation: fadeIn 1.2s ease-out 0.5s forwards;
         }
         /* Title styling */
         .title2 {
            font-size: clamp(2rem, 4.5vw, 3rem);
            color: white;
            text-align: center;
            font-family: var(--font-sans);
            margin: 0;
            opacity: 0.9;
            text-shadow:
               3px 3px 6px rgba(0, 0, 0, 0.9),
               -1px -1px 2px rgba(255, 255, 255, 0.6);
         }

         /* New Title styling: Welcome to my world 3 */
         .title3-bar {
            left: 0;
            width: 100%;
            text-align: center;
            /*    background: rgba(0,0,0,0.6); 
         background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%); 
         background: linear-gradient(to top, rgba(50,50,50,0.6), rgba(0,0,0,0.8)); */
            background: linear-gradient(
               to bottom,
               rgba(0, 0, 0, 0.8) 0%,
               /* Dark top */ rgba(70, 70, 70, 0.8) 50%,
               /* Brighter middle */ rgba(0, 0, 0, 0.8) 100% /* Dark bottom */
            );
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            padding: 8px 0;
            backdrop-filter: blur(3px);
            z-index: 2;
            opacity: 1;
            transform: scale(1);
            transform-origin: center center;
            animation: zoomIn 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
               forwards;
         }
         /* Title styling */
         .title3 {
            font-size: clamp(2rem, 4.5vw, 3rem);
            color: white;
            text-align: center;
            font-family: var(--font-sans);
            text-shadow:
               3px 3px 6px rgba(0, 0, 0, 0.9),
               -1px -1px 2px rgba(255, 255, 255, 0.6);
            margin: 0;
         }

         /* New Title styling: Welcome to my world 4 */
         .title4-bar {
            left: 0;
            width: 100%;
            text-align: center;
            background: linear-gradient(
               to right,
               transparent,
               rgba(0, 0, 0, 0.8),
               transparent
            );
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding: 5px 0;
            backdrop-filter: blur(3px);
            z-index: 2;
         }
         /* Title styling */
         .title4 {
            font-size: clamp(2rem, 4.5vw, 3rem);
            color: white;
            font-family: var(--font-serif);
            text-shadow:
               3px 3px 6px rgba(0, 0, 0, 0.9),
               -1px -1px 2px rgba(255, 255, 255, 0.6);
            margin: 0;
            opacity: 0;
            display: inline-block;
            vertical-align: middle; /* Keeps it centered vertically during the bounce */
            transform-origin: center center;
            animation: zoomIn 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
               forwards;
         }

         @keyframes zoomIn {
            0% {
               opacity: 0;
               transform: scale(0.5);
            }
            100% {
               opacity: 1;
               transform: scale(1);
            }
         }