/* Explore button underline animation */
.explore-button {
	position: relative;
	overflow: visible;
}
.explore-button::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 0;
	height: 4px;
	background-color: #F6F6FF;
	transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
	z-index: 1;
}
.explore-button:hover::after {
	width: 100%;
}
* {
	-o-box-sizing: border-box;
	box-sizing: border-box;
	cursor: none !important;
}

/* Prevent image dragging */
img {
	-webkit-user-drag: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	pointer-events: none;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	 user-select: none; /* Standard syntax */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
}
body {
	overflow: hidden;
	color: #F6F6FF !important;
	font-family: "Inter", "Lora", system-ui, sans-serif;
	font-weight: 400;
	font-variation-settings: 'wght' 400, 'ital' 0;
	font-feature-settings: 'kern' 1, 'liga' 1;
	font-optical-sizing: auto;
	cursor: none !important;
}

/* Welcome screen sun gif background */
.welcome-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 12; /* Above canvas (5) but below text (15-20) */
	pointer-events: none;
	/* Enable hardware acceleration for smoother parallax */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.clouds-bg {
	position: absolute;
	top: 55%;
	right: -50%;
	width: 60%;
	height: 60%;
	background-image: url('../assets/png/index/firstVerticalScroll/cloudsBack.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: 7; /* Above canvas (5) - farthest back cloud layer */
	/* Scroll parallax - slowest movement (farthest back) */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.clouds-bg.fade-in {
	animation: floatInCloudsBack 1.5s ease-out forwards, parallaxCloudsBack 45s ease-in-out infinite 1.5s;
}


.clouds-middle {
	position: absolute;
	top: 50%;
	right:75%;
	width: 80%;
	height: 80%;
	background-image: url('../assets/png/index/firstVerticalScroll/cloudsMiddle.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: 8; /* Above canvas (5) - middle cloud layer */
	/* Scroll parallax - medium movement */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.clouds-middle.fade-in {
	animation: floatInCloudsMiddle 1.5s ease-out forwards, parallaxCloudsMiddle 20s ease-in-out infinite 2.5s;
}



.clouds-front {
	position: absolute;
	top: -25%;
	right: -15%;
	width: 55%;
	height: 55%;
	background-image: url('../assets/png/index/firstVerticalScroll/cloudsFront.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: 9; /* Above canvas (5) - front cloud layer */
	/* Scroll parallax - fast movement (closer to viewer) */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.clouds-front.fade-in {
	animation: floatInCloudsFront 1.5s ease-out forwards, parallaxCloudsFront 35s ease-in-out infinite 2s;
}



.clouds-front-2 {
	position: absolute;
	top: -30%;
	right: 95%;
	width: 50%;
	height: 50%;
	background-image: url('../assets/png/index/firstVerticalScroll/cloudsFront.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: 10; /* Above canvas (5) - closest cloud layer */
	transform: scaleX(-1);
	/* Scroll parallax - fastest movement (closest to viewer) */
	transform: scaleX(-1) translate3d(0, 0, 0);
	will-change: transform;
}

.clouds-front-2.fade-in {
	animation: floatInCloudsFront2 1.5s ease-out forwards, parallaxCloudsFront2 40s ease-in-out infinite 3.5s;
}



/* Parallax animations for different cloud layers */
@keyframes parallaxCloudsBack {
	0%, 100% {
		transform: translateX(0) translateY(0);
	}
	25% {
		transform: translateX(-15px) translateY(-8px);
	}
	50% {
		transform: translateX(-25px) translateY(12px);
	}
	75% {
		transform: translateX(-10px) translateY(-5px);
	}
}

@keyframes parallaxCloudsMiddle {
	0%, 100% {
		transform: translateX(0) translateY(0);
	}
	25% {
		transform: translateX(-20px) translateY(-12px);
	}
	50% {
		transform: translateX(-35px) translateY(18px);
	}
	75% {
		transform: translateX(-15px) translateY(-8px);
	}
}

@keyframes parallaxCloudsFront {
	0%, 100% {
		transform: translateX(0) translateY(0);
	}
	25% {
		transform: translateX(-30px) translateY(-18px);
	}
	50% {
		transform: translateX(-50px) translateY(25px);
	}
	75% {
		transform: translateX(-20px) translateY(-12px);
	}
}

@keyframes parallaxCloudsFront2 {
	0%, 100% {
		transform: scaleX(-1) translateX(0) translateY(0);
	}
	25% {
		transform: scaleX(-1) translateX(-35px) translateY(-15px);
	}
	50% {
		transform: scaleX(-1) translateX(-55px) translateY(20px);
	}
	75% {
		transform: scaleX(-1) translateX(-25px) translateY(-8px);
	}
}

/* Floating-in animations for background elements */
@keyframes floatInSun {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(20px) scale(0.8);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) translateY(0) scale(1);
	}
}

@keyframes floatInCloudsBack {
	0% {
		opacity: 0;
		transform: translateX(-30px) translateY(30px) scale(0.9);
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
}

@keyframes floatInCloudsMiddle {
	0% {
		opacity: 0;
		transform: translateX(25px) translateY(-10px) scale(0.9);
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
}

@keyframes floatInCloudsFront {
	0% {
		opacity: 0;
		transform: translateX(20px) translateY(15px) scale(0.85);
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
}

@keyframes floatInCloudsFront2 {
	0% {
		opacity: 0;
		transform: scaleX(-1) translateX(-25px) translateY(12px) scale(0.85);
	}
	100% {
		opacity: 1;
		transform: scaleX(-1) translateX(0) translateY(0) scale(1);
	}
}

/* Float-out animations for when leaving Welcome screen */
@keyframes floatOutSun {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) translateY(-30px) scale(0.7);
	}
}

@keyframes floatOutCloudsBack {
	0% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(-40px) translateY(20px) scale(0.8);
	}
}

@keyframes floatOutCloudsMiddle {
	0% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(35px) translateY(-15px) scale(0.8);
	}
}

@keyframes floatOutCloudsFront {
	0% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(30px) translateY(-20px) scale(0.75);
	}
}

@keyframes floatOutCloudsFront2 {
	0% {
		opacity: 1;
		transform: scaleX(-1) translateX(0) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: scaleX(-1) translateX(-35px) translateY(18px) scale(0.75);
	}
}

/* Zoom transition animation starting from opacity 0 */
@keyframes zoomTransition {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Zoom transition animation for Bean with position offset */
@keyframes zoomTransitionBean {
	0% {
		opacity: 0;
		transform: translateX(-200px) translateY(-5px) scaleX(-1) scale(0);
	}
	100% {
		opacity: 1;
		transform: translateX(-200px) translateY(-5px) scaleX(-1) scale(1);
	}
}

/* Zoom transition animation for Chip with position offset */
@keyframes zoomTransitionChip {
	0% {
		opacity: 0;
		transform: translateX(-15px) translateY(50px) scaleX(-1) scale(0);
	}
	100% {
		opacity: 1;
		transform: translateX(-15px) translateY(50px) scaleX(-1) scale(1);
	}
}

/* Zoom transition animation for Teddy with position offset */
@keyframes zoomTransitionTeddy {
	0% {
		opacity: 0;
		transform: translateX(255px) translateY(80px) scaleX(-1) scale(0);
	}
	100% {
		opacity: 1;
		transform: translateX(255px) translateY(80px) scaleX(-1) scale(1);
	}
}

/* Zoom transition animation for Penny with position offset */
@keyframes zoomTransitionPenny {
	0% {
		opacity: 0;
		transform: translateX(125px) translateY(10px) scaleX(-1) scale(0);
	}
	100% {
		opacity: 1;
		transform: translateX(125px) translateY(10px) scaleX(-1) scale(1);
	}
}

/* Parallax entrance animations - each layer animates differently when screen becomes active */

/* Wall - furthest back (slow, subtle entrance) */
#zoomTransitionScreen.active .parallax-wall {
	opacity: 1 !important;
	transform: scale(1.0) translateY(0px) !important;
}

/* Hallway - second layer (medium entrance with slight movement) */
#zoomTransitionScreen.active .parallax-hallway {
	opacity: 1 !important;
	transform: scale(1.0) translateY(0px) translateX(0px) !important;
}

/* Back Light - third layer (faster entrance with bounce) */
#zoomTransitionScreen.active .parallax-backlight {
	opacity: 1 !important;
	transform: scale(1.1) translateY(0px) translateX(0px) !important;
}

/* Front Light - front layer (explosive entrance) */
#zoomTransitionScreen.active .parallax-frontlight {
	opacity: 1 !important;
	transform: scale(1.2) translateY(0px) translateX(0px) !important;
}

/* Characters - foreground (dramatic zoom-in entrance) */
#zoomTransitionScreen.active .character-selection-container {
	opacity: 1 !important;
	transform: scale(1.0) translateY(0px) !important;
}

/* Trees and Houses Float-in Animations */
@keyframes floatInTrees {
	from {
		opacity: 0;
		transform: translateX(-50%) translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateX(0);
	}
}

@keyframes floatInHouses {
	from {
		opacity: 0;
		transform: translateX(-50%) translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateX(0);
	}
}

/* Playground Float-in Animation */
@keyframes floatInPlayground {
	from {
		transform: translateX(-50%) translateY(40px);
	}
	to {
		transform: translateX(-50%) translateY(0);
	}
}

/* Trees and Houses Float-out Animations */
@keyframes floatOutTrees {
	from {
		transform: translateX(-50%) translateY(0);
	}
	to {
		transform: translateX(-50%) translateY(40px);
	}
}

@keyframes floatOutHouses {
	from {
		transform: translateX(-50%) translateY(0);
	}
	to {
		transform: translateX(-50%) translateY(30px);
	}
}

/* Playground Float-out Animation */
@keyframes floatOutPlayground {
	from {
		transform: translateX(-50%) translateY(0);
	}
	to {
		transform: translateX(-50%) translateY(40px);
	}
}

@keyframes parallaxSun {
	0%, 100% {
		transform: translate(-50%, -50%) translateX(0) translateY(0);
	}
	25% {
		transform: translate(-50%, -50%) translateX(-25px) translateY(-15px);
	}
	50% {
		transform: translate(-50%, -50%) translateX(-45px) translateY(25px);
	}
	75% {
		transform: translate(-50%, -50%) translateX(-15px) translateY(-10px);
	}
}

/* Exaggerated parallax animations for ground elements */
@keyframes parallaxTrees {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	25% {
		transform: translateX(-50%) translateY(-20px);
	}
	50% {
		transform: translateX(-50%) translateY(30px);
	}
	75% {
		transform: translateX(-50%) translateY(-10px);
	}
}

@keyframes parallaxHouses {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	25% {
		transform: translateX(-50%) translateY(-25px);
	}
	50% {
		transform: translateX(-50%) translateY(35px);
	}
	75% {
		transform: translateX(-50%) translateY(-15px);
	}
}

@keyframes parallaxPlayground {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	25% {
		transform: translateX(-50%) translateY(-30px);
	}
	50% {
		transform: translateX(-50%) translateY(40px);
	}
	75% {
		transform: translateX(-50%) translateY(-20px);
	}
}

/* Horizontal01 Float-in and Parallax Animations */
@keyframes floatInCity {
	from {
		transform: translateX(-50%) translateY(50px);
	}
	to {
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes floatInBusStop {
	from {
		transform: translateX(-50%) translateY(40px);
	}
	to {
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes floatInRoad {
	from {
		transform: translateX(-50%) translateY(30px);
	}
	to {
		transform: translateX(-50%) translateY(0);
	}
}

/* Reverse float-out animations */
@keyframes floatOutCity {
	from {
		transform: translateX(-50%) translateY(0);
	}
	to {
		transform: translateX(-50%) translateY(50px);
	}
}

@keyframes floatOutBusStop {
	from {
		transform: translateX(-50%) translateY(0);
	}
	to {
		transform: translateX(-50%) translateY(40px);
	}
}

@keyframes floatOutRoad {
	from {
		transform: translateX(-50%) translateY(0);
	}
	to {
		transform: translateX(-50%) translateY(30px);
	}
}

/* Cloud float-out animations */
@keyframes floatOutCloudsBack {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}
}

@keyframes floatOutCloudsFront {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		transform: translate3d(0, 40px, 0);
	}
}

@keyframes subtleParallaxCity {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	25% {
		transform: translateX(-50%) translateY(-25px);
	}
	50% {
		transform: translateX(-50%) translateY(35px);
	}
	75% {
		transform: translateX(-50%) translateY(-15px);
	}
}

@keyframes subtleParallaxBusStop {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	25% {
		transform: translateX(-50%) translateY(-35px);
	}
	50% {
		transform: translateX(-50%) translateY(55px);
	}
	75% {
		transform: translateX(-50%) translateY(-25px);
	}
}

@keyframes subtleParallaxRoad {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	25% {
		transform: translateX(-50%) translateY(-45px);
	}
	50% {
		transform: translateX(-50%) translateY(65px);
	}
	75% {
		transform: translateX(-50%) translateY(-30px);
	}
}

.sun-gif {
	position: absolute;
	top: 20%;
	left: 90%;
	transform: translate(-50%, -50%);
	width: 25%;
	height: 25%;
	object-fit: contain;
	opacity: 0;
	z-index: 6; /* Above canvas (5) - sun in background */
	/* Scroll parallax - very slow movement (farthest back) */
	will-change: transform;
}

.sun-gif.fade-in {
	animation: floatInSun 1.5s ease-out forwards;
}



/* Custom rotating cursor */
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	background: url("/assets/svg/cursor.svg") no-repeat center center;
	background-size: contain;
	pointer-events: none;
	z-index: 999999;
	transform-origin: center;
	transition: transform 0.1s ease-out;
}

/* Drawing Canvas */
#c {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 500vh; /* Much larger to cover all content sections */
	background: transparent; /* No background */
	pointer-events: none; /* Start with no pointer events to allow scrolling */
	z-index: 5; /* Higher than scroll containers (z-index: 3) to capture drawing events */
	border: none; /* Remove debugging border */
}

/* Scroll indicator animations */
.scroll-text {
	transition: opacity 0.3s ease-in-out;
}

.scroll-arrow {
	transition: all 0.3s ease-in-out;
}

/* Hide arrows completely when in drawing mode */
.scroll-indicator.drawing-mode .scroll-arrow {
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.scroll-indicator.drawing-mode .scroll-text {
	opacity: 1;
}


   .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            /* background-color: rgba(246, 246, 255, 0.95); */
            /* backdrop-filter: blur(10px); */
            z-index: 10002;
            transition: color 0.6s cubic-bezier(0.77,0,0.175,1);
        }

        .navbar.menu-open {
            color: #F6F6FF;
        }


        .navbar .logo {
            filter: none;
            transition: filter 0.6s cubic-bezier(0.77,0,0.175,1);
        }

        .navbar.menu-open .logo {
            filter: brightness(0) invert(1);
        }

        .logo {
            width: 80px;
            height: 30px;
            margin-top: 5px;
			z-index: 4001 !important;
        }

        /* School name highlighting in Horizontal05 welcome text */
        .school-name-char {
            font-style: italic !important;
            font-weight: bold !important;
        }

        /* Trees for Horizontal05 - same position as Horizontal04 */
        .horizontal05-trees {
            position: absolute;
            bottom: 4%; /* Same position as Horizontal04 */
            left: 49%; /* Center horizontally */
            transform: translateX(-50%) translateY(30px); /* Center the image with initial offset */
            width: auto; /* Maintain aspect ratio */
            height: auto; /* Maintain aspect ratio */
            max-width: 100%; /* Don't exceed container width */
            max-height: 100%; /* Don't take up more than half the height */
            opacity: 0; /* Start invisible */
            z-index: 1; /* Behind the text content and school building */
            will-change: transform, opacity;
            animation: fadeInTrees 1.5s ease-out 0.5s forwards; /* Same delay as everything else */
        }

        /* School building gif for Horizontal05 */
        .horizontal05-school-building {
            position: absolute;
            bottom: 20%; /* Position above the trees */
            left: 50%; /* Center horizontally */
            transform: translateX(-50%) translateY(27px) scale(3.2); /* Center the image with initial offset and scale up moderately */
            width: 560px; /* Maintain aspect ratio with moderate size */
            height: auto; /* Maintain aspect ratio */
            opacity: 0; /* Start invisible */
            z-index: 2; /* Above the trees but behind text */
            will-change: transform, opacity;
            animation: fadeInSchool 1.5s ease-out 0.5s forwards; /* Same delay as everything else */
        }

        /* Keyframe animations */
        @keyframes fadeInTrees {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        @keyframes fadeInSchool {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(25px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        .menu-button {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 16px;
            background: none;
            border: none;
            color: #171717; /* Default color when menu is closed */
            position: relative;
            transition: color 0.6s cubic-bezier(0.77,0,0.175,1);
        }

        .navbar.menu-open .menu-button {
            color: inherit; /* Inherit color from navbar when menu is open */
        }

        .menu-button::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: #171717;
            transition: width 0.3s ease, background-color 0.3s ease;
        }

        .menu-button:hover::after {
            width: 100%;
        }

        .navbar.menu-open .menu-button::after {
            background-color: #F6F6FF; /* Light gray underline when menu is open */
        }

        .navbar-controls {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .mute-button {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 18px;
            background: none;
            border: none;
            color: #171717;
            cursor: pointer;
            padding: 0;
            border-radius: 0;
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            position: relative;
        }

        .speaker-icon {
            width: 24px;
            height: 24px;
            transition: all 0.3s ease;
            opacity: 0;
        }

        .mute-button:hover {
            transform: scale(1.1);
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style="transform: scaleX(-1);"><image href="assets/svg/blueCursor.svg" width="32" height="32"/></svg>'), auto;
        }

        .navbar.menu-open .mute-button:hover .speaker-icon {
            transform: scale(1.1);
        }

        .navbar.menu-open .mute-button {
            color: #F6F6FF;
        }

        .navbar.menu-open .speaker-icon {
            filter: brightness(0) invert(1);
            opacity: 1;
            transition: all 0.3s ease 0.2s;
        }

        .navbar.menu-open .mute-button.muted .speaker-icon {
            opacity: 0.5;
            transition: all 0.3s ease 0.2s;
        }

     /* Bounce animation for experience tag */
     @keyframes tagBounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-8px);
            }
            60% {
                transform: translateY(-4px);
            }
     }

     /* White tag container for experience button - initially hidden */
     .experience-tag {
            position: fixed;
            bottom: -100px; /* Initially completely hidden */
            right: 20px;
            background: white;
            color: #5b5a5a;
            border: 1.5px solid #5b5a5a;
            border-bottom: none;
            padding: 18px 18px 30px 18px; /* Extra bottom padding for arrow */
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            z-index: 4000;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
			font-weight: 200 !important;
            opacity: 0; /* Initially invisible */
            animation: none; /* No animation until experience button appears */
     }
     
     /* Show tag when experience button is visible */
     .experience-tag.button-visible {
            bottom: -45px; /* Partially visible by default */
            opacity: 1;
            animation: tagBounce 3s ease-in-out infinite;
            animation-delay: 2s; /* Start bouncing after 2 seconds */
     }
     
     /* Remove bounce animation on hover */
     .experience-tag:hover {
            bottom: 0; /* Fully revealed on hover */
            animation: none; /* Stop bouncing when hovered */
     }
     
     /* Hide tag when clicked or on horizontal04 */
     .experience-tag.dropped {
            bottom: -100px; /* Drop down completely */
            opacity: 0.3;
            animation: none; /* Stop bouncing when dropped */
     }

     .experience-button {
            background: none !important;
            border: none;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 16px;
            font-weight: 400;
            color: #171717;
            cursor: pointer;
            padding: 0;
            margin: 0;
            position: relative;
            z-index: 4001;
            transition: all 0.2s ease;
            display: block;
            text-align: left;
            width: 100%;
     }
     
     .experience-button:hover {
            color: #171717;
            opacity: 0.8;
     }

        .experience-tag.hidden {
            transform: translateY(125%); /* Move down off screen */
            opacity: 0;
            pointer-events: none; /* Prevent interaction when hidden */
        }

        .scroll-indicator {
            position: fixed;
            bottom: 14px;
            left: 50vw !important;
            right: auto !important;
            transform: translateX(-50%) !important;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 16px;
            background: none;
            border: none;
            color: #171717;
            z-index: 4000;
            transition: opacity 0.3s ease-in-out;
            opacity: 0;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: auto;
            white-space: nowrap;
            margin: 0;
            text-align: center;
        }

        /* Show arrows by default for normal scroll text */
        .scroll-arrow {
            transition: all 0.3s ease-in-out;
            display: inline-block;
        }

        /* Completely hide arrows when showing welcome message */
        .scroll-indicator.welcome-fade-in .scroll-arrow,
        .scroll-indicator.welcome-fade-out .scroll-arrow {
            display: none !important;
            opacity: 0 !important;
            width: 0 !important;
            height: 0 !important;
            overflow: hidden;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* Force visibility when in drawing mode */
        .scroll-indicator.drawing-mode {
            opacity: 1 !important;
        }

        /* Hide arrows completely when in drawing mode */
        .scroll-indicator.drawing-mode .scroll-arrow {
            opacity: 0;
            width: 0;
            height: 0;
            overflow: hidden;
            margin: 0;
            padding: 0;
            display: none !important;
        }

        .scroll-indicator.drawing-mode .scroll-text {
            opacity: 1;
        }

        /* Welcome message fade-in animation */
        .scroll-indicator.welcome-fade-in {
            animation: welcomeFadeIn 1s ease-in-out forwards;
        }

        /* Welcome message fade-out animation */
        .scroll-indicator.welcome-fade-out {
            animation: welcomeFadeOut 1.5s ease-in-out forwards;
        }

        /* Normal scroll text fade-in animation */
        .scroll-indicator.scroll-fade-in {
            animation: scrollFadeIn 1s ease-in-out forwards;
        }

        @keyframes welcomeFadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes welcomeFadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(-10px);
            }
        }

        @keyframes scrollFadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .scroll-arrow {
            font-size: 18px;
            display: none;
        }

        .scroll-arrow-down {
            animation: bounce-down 1.5s ease-in-out infinite;
        }

        .scroll-arrow-right {
            animation: bounce-right 1.5s ease-in-out infinite;
        }

        .scroll-text {
            font-size: 16px;
            display: none;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        /* Vertical sections (scr01-scr03) */
        .scroll-indicator.vertical {
            flex-direction: row;
        }

        .scroll-indicator.vertical .scroll-arrow-down {
            display: inline;
            order: 1;
        }

        .scroll-indicator.vertical .scroll-text-down {
            display: inline;
            order: 2;
        }

        .scroll-indicator.vertical .scroll-text-right {
            display: none;
        }

        .scroll-indicator.vertical .scroll-arrow-right {
            display: none;
        }

        /* Horizontal sections (horizontal01-horizontal03) */
        .scroll-indicator.horizontal {
            flex-direction: row;
        }

        .scroll-indicator.horizontal .scroll-arrow-down {
            display: none;
        }

        .scroll-indicator.horizontal .scroll-text-down {
            display: none;
        }

        .scroll-indicator.horizontal .scroll-text-right {
            display: inline;
            order: 1;
        }

        .scroll-indicator.horizontal .scroll-arrow-right {
            display: inline;
            order: 2;
        }

        .scroll-indicator.visible {
            opacity: 1;
        }

        .scroll-indicator.visible .scroll-arrow-down {
            animation: bounce-down 1.5s ease-in-out infinite;
        }

        .scroll-indicator.visible .scroll-arrow-right {
            animation: bounce-right 1.5s ease-in-out infinite;
        }

        .scroll-indicator.hidden {
            opacity: 0;
            animation: none;
        }

        .scroll-indicator.hidden .scroll-arrow-down,
        .scroll-indicator.hidden .scroll-arrow-right {
            animation: none;
        }

        .scroll-indicator.fade-out {
            opacity: 0;
            animation: none;
        }

        .scroll-indicator.fade-out .scroll-arrow-down,
        .scroll-indicator.fade-out .scroll-arrow-right {
            animation: none;
        }

        @keyframes pulse {
            0% {
                opacity: 0.3;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0.3;
            }
        }

        @keyframes bounce-down {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-4px);
            }
            60% {
                transform: translateY(-2px);
            }
        }

        @keyframes bounce-right {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(0);
            }
            40% {
                transform: translateX(4px);
            }
            60% {
                transform: translateX(2px);
            }
        }

        .experience-button.showing {
            animation: jumpUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        .experience-button.hiding {
            animation: jumpDown 1s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
        }

        @keyframes jumpUp {
            0% {
                transform: translateY(120px);
                opacity: 0;
            }
            30% {
                transform: translateY(20px);
                opacity: 0.3;
            }
            60% {
                transform: translateY(-2px);
                opacity: 0.8;
            }
            80% {
                transform: translateY(1px);
                opacity: 1;
            }
            90% {
                transform: translateY(-0.5px);
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes jumpDown {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            20% {
                transform: translateY(-5px);
                opacity: 0.9;
            }
            40% {
                transform: translateY(10px);
                opacity: 0.6;
            }
            70% {
                transform: translateY(50px);
                opacity: 0.2;
            }
            100% {
                transform: translateY(120px);
                opacity: 0;
            }
        }

        body.menu-open .experience-button {
            color: #000000;
        }


/* Top progress bar styles */
#top-progress-bar-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 5px;
	background: rgba(128, 128, 128, 0.3);
	z-index: 9999;
	opacity: 0; /* Initially hidden during loading screen */
	transition: opacity 0.5s ease;
}

/* Show progress bar when loading screen is done */
body:not(.loading) #top-progress-bar-container {
	opacity: 1;
}

#top-progress-bar {
	height: 100%;
	width: 0%;
	background: #171717;
	transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

        .menu-overlay {
            position: fixed;
            top: 0;
            right: 0;
            width: 0;
            height: 100vh;
            background: #171717;
            /* School book cover texture */
            background-image: 
                /* Subtle paper texture */
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.02) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.02) 1px, transparent 1px),
                radial-gradient(circle at 40% 40%, rgba(255,255,255,0.01) 1px, transparent 1px),
                /* Fabric-like texture */
                linear-gradient(45deg, rgba(255,255,255,0.01) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(255,255,255,0.01) 25%, transparent 25%),
                /* Subtle grain */
                repeating-linear-gradient(0deg, rgba(255,255,255,0.005), rgba(255,255,255,0.005) 1px, transparent 1px, transparent 2px),
                repeating-linear-gradient(90deg, rgba(255,255,255,0.005), rgba(255,255,255,0.005) 1px, transparent 1px, transparent 2px);
            background-size: 30px 30px, 25px 25px, 20px 20px, 8px 8px, 8px 8px, 3px 3px, 3px 3px;
            background-position: 0 0, 10px 10px, 5px 5px, 0 0, 4px 4px, 0 0, 1px 1px;
            overflow: hidden;
            z-index: 10001;
            transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1);
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .menu-overlay.active {
            width: 100vw;
        }

        .menu-links {
            margin-top: 25vh;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            width: 100%;
            overflow: hidden;
        }

        .menu-link {
            color: #F6F6FF;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 38px;
			font-weight: 400;
            text-decoration: none;
            margin: 20px;
            transition: color 0.2s;
            font-variation-settings: 'wght' 400;
            white-space: nowrap;
            display: inline-block;
            position: relative;
        }

        .menu-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: #F6F6FF;
            transition: width 0.3s ease;
        }

        .menu-link:hover::after {
            width: 100%;
        }

/* School Input Section Styling */
.school-input-section {
	margin-top: -8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	width: 100%;
	z-index: 20;
}

/* Input wrapper for proper error message positioning */
.input-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.school-input {
	position: relative;
}

/* Initial hidden state for form elements only */
.school-question,
.school-input,
.start-experience-btn {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Staggered animation classes for form elements */
.school-question.animate {
	opacity: 1;
	transform: translateY(0);
}

.school-input.animate {
	opacity: 1;
	transform: translateY(0);
}

.start-experience-btn.animate {
	opacity: 1;
	transform: translateY(0);
}

.school-question {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	color: #171717;
	font-weight: 400;
	text-align: center;
}

.school-input {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	padding: 8px 16px;
	border: 2px solid #171717;
	border-radius: 4%;
	background: transparent;
	color: #171717;
	width: 275px;
	text-align: center;
	transition: border-color 0.3s ease, background-color 0.3s ease;
	cursor: text;
	background-color: white;
}

.school-input:hover {
	cursor: url('../assets/svg/cursor.svg'), auto;
}

.school-input:focus {
	outline: none;
	background-color: white;
}

/* Color cycling classes that will be toggled by JavaScript */
.school-input.color-red:focus {
	border-color: #FF6576;
	color: #FF6576;
}

.school-input.color-blue:focus {
	border-color: #4A90E2;
	color: #4A90E2;
}

.school-input.color-yellow:focus {
	border-color: #FFD02E;
	color: #FFD02E;
}

.school-input.color-green:focus {
	border-color: #7ED321;
	color: #7ED321;
}

/* Ensure text returns to #171717 when not focused */
.school-input:not(:focus) {
	color: #171717;
}

.school-input::placeholder {
	color: #999;
	transition: opacity 0.3s ease;
}

.school-input:focus::placeholder {
	opacity: 0;
}

.start-experience-btn {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	background: none;
	border: none;
	color: #171717;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	gap: 8px;
	transition: opacity 0.8s ease, transform 0.8s ease, color 0.6s cubic-bezier(0.77,0,0.175,1);
	position: relative;
	padding: 0;
	line-height: 1;
}

.start-experience-btn::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -12px;
	left: 0;
	background-color: #171717;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.start-experience-btn:hover::after {
	width: 100%;
}



.start-experience-btn .arrow {
	transition: transform 0.3s ease;
	display: flex;
	align-items: center;
	line-height: 1;
	font-size: 16px;
}

.start-experience-btn:hover .arrow {
	transform: translateX(4px);
}

.start-experience-btn.disabled {
	color: #cccccc;
	cursor: not-allowed;
	pointer-events: none;
}

.start-experience-btn.disabled::after {
	background-color: #cccccc;
}

.start-experience-btn.disabled:hover::after {
	width: 0;
}

.start-experience-btn.disabled:hover .arrow {
	transform: translateX(0);
}

        .close-menu {
            position: absolute;
            top: 20px;
            right: 40px;
            background: none;
            border: none;
            color: #F6F6FF;
            font-size: 16px;
            font-family: 'Plus Jakarta Sans', sans-serif;
            z-index: 2100;
            position: relative;
        }

        .close-menu::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: #F6F6FF;
            transition: width 0.3s ease;
        }

        .close-menu:hover::after {
            width: 100%;
        }

        .menu-footer {
            position: fixed;
            left: 20px;
            bottom: 15px;
            z-index: 10003;
            text-align: left;
        }

        .footer-year {
            color: #F6F6FF;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 16px;
            opacity: 0.5;
            font-variation-settings: 'wght' 400;
        }

        .footer-author {
            color: #F6F6FF;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 16px;
            opacity: 1;
            font-variation-settings: 'wght' 400;
            text-decoration: none;
        }

        body.menu-open .menu-footer {
            display: block;
        }

        body:not(.menu-open) .menu-footer {
            display: none;
        }

        .menu-footer-right {
            position: fixed;
            right: 20px;
            bottom: 15px;
            z-index: 10003;
            text-align: right;
        }

        body.menu-open .menu-footer-right {
            display: block;
        }

        body:not(.menu-open) .menu-footer-right {
            display: none;
        }

        /* Apply school book texture to all elements when menu is open */
        body.menu-open {
            background-image: 
                /* Subtle paper texture */
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.02) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.02) 1px, transparent 1px),
                radial-gradient(circle at 40% 40%, rgba(255,255,255,0.01) 1px, transparent 1px),
                /* Fabric-like texture */
                linear-gradient(45deg, rgba(255,255,255,0.01) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(255,255,255,0.01) 25%, transparent 25%),
                /* Subtle grain */
                repeating-linear-gradient(0deg, rgba(255,255,255,0.005), rgba(255,255,255,0.005) 1px, transparent 1px, transparent 2px),
                repeating-linear-gradient(90deg, rgba(255,255,255,0.005), rgba(255,255,255,0.005) 1px, transparent 1px, transparent 2px);
            background-size: 30px 30px, 25px 25px, 20px 20px, 8px 8px, 8px 8px, 3px 3px, 3px 3px;
            background-position: 0 0, 10px 10px, 5px 5px, 0 0, 4px 4px, 0 0, 1px 1px;
        }

        body.menu-open #ScrollPane,
        body.menu-open .scr.pane {
            background-image: inherit;
            background-size: inherit;
            background-position: inherit;
        }





#ScrollPane {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: auto; /* Allow scroll events */
}
.scr,
.pane {
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 30px;
	z-index: 15; /* Above canvas (5) and background images (6-10) */
	pointer-events: auto; /* Allow scroll events */
}
b {
	font-size: 26px;
	display: block;
	color: #171717;
	font-family: "Lora", serif;
	font-weight: 400;
    line-height: 44px;
	pointer-events: auto; /* Allow text to be selectable */
	z-index: 20; /* Above canvas (5) and background images (6-10) and panes (15) */
	position: relative;
}


/* span {
	display: block;
	text-align: center;
} */
.horiz {
	position: relative;
	width: 100%;
	height: 100%;
}
.horiz .spane {
	overflow: hidden;
	font-size: 0;
	position: relative;
	width: 100%;
	height: 100%;
	white-space: nowrap;
	background-image: 
		linear-gradient(rgba(200, 200, 200, 0.3) 1px, transparent 1px),
		linear-gradient(90deg, rgba(200, 200, 200, 0.3) 1px, transparent 1px);
	background-size: 20px 20px;
	background-attachment: local;
}

/* Vertical sections grid background */
.scr.pane.prt[data-id="Welcome"],
.scr.pane.prt[data-id="scr02"],
.scr.pane.prt[data-id="scr03"] {
	background-image: 
		linear-gradient(rgba(200, 200, 200, 0.3) 1px, transparent 1px),
		linear-gradient(90deg, rgba(200, 200, 200, 0.3) 1px, transparent 1px);
	background-size: 20px 20px;
	background-attachment: local;
	overflow: visible;
}
.horiz .pane {
	display: inline-block;
	width: 100%;
}

/* Move text 40px higher on all horizontal scrolling screens */
.horiz .pane .ct {
	align-items: flex-start !important;
	padding-top: 120px !important;
}

/* Center align everything in the "Before we get started" section */
[data-id="Horizontal04"] .ct {
	align-items: center !important;
	text-align: center !important;
	justify-content: flex-start !important;
	flex-direction: column !important;
	padding-top: 120px !important;
}

/* Move text in Horizontal05 up by 10px */
[data-id="Horizontal05"] .ct {
	padding-top: 0px !important;
	align-items: center !important;
	text-align: center !important;
	justify-content: flex-start !important;
	flex-direction: column !important;
}

/* Container for welcome text - center it on screen */
[data-id="Horizontal05"] .welcome-text-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Top welcome text container */
[data-id="Horizontal05"] .top-welcome-container {
	position: absolute;
	top: calc(5% + 10px);
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 1001;
	display: flex;
	flex-direction: row;
	gap: 0.4em;
	flex-wrap: wrap;
	justify-content: center;
}

/* Individual welcome text parts */
[data-id="Horizontal05"] .welcome-part,
[data-id="Horizontal05"] .school-name-part,
[data-id="Horizontal05"] .school-word-part {
	font-family: "Lora", serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 44px;
	color: #171717;
	opacity: 0;
	transition: opacity 0.5s ease;
	display: inline-block;
	position: relative;
	overflow: hidden;
}

/* School name and school word styling */
[data-id="Horizontal05"] .school-name-part,
[data-id="Horizontal05"] .school-word-part {
	font-weight: bold !important;
	font-style: italic !important;
}

[data-id="Horizontal05"] .school-name-bold {
	font-weight: bold !important;
	font-style: italic !important;
}

/* Word animation for top welcome text */
[data-id="Horizontal05"] .top-welcome-text .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	margin-right: 0.3em;
}

[data-id="Horizontal05"] .top-welcome-text .word:last-child {
	margin-right: 0;
}

[data-id="Horizontal05"] .top-welcome-text.word-animate .word {
	opacity: 1;
	transform: translateY(0);
}

/* Additional rule to move welcome text down by 20% */
[data-id="Horizontal05"] .welcome-school-text {
	transform: translateY(10vh) !important;
	display: block;
	text-align: center;
	margin: 0;
	padding: 0;
	opacity: 0 !important; /* Initially hidden, controlled by JavaScript */
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 24px;
	color: #171717;
	font-weight: bold;
	transition: opacity 0.5s ease !important; /* Smooth transition */
}

/* Styling for scroll instruction text */
[data-id="Horizontal05"] .scroll-instruction-text {
	margin: 0;
	padding: 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 16px;
	color: #171717;
	text-align: center;
	font-weight: normal;
	display: block;
	width: 100%;
	clear: both;
	opacity: 0;
	transform: translateY(10px);
	/* animation: fade-in-up 0.6s ease-out 2.2s forwards; - REMOVED: Now controlled by JavaScript */
	position: absolute;
	bottom: 45px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
}

/* Animated scroll arrows */
[data-id="Horizontal05"] .scroll-arrow-left {
	display: inline-block;
	margin-right: 8px;
	font-size: 18px;
	animation: bounce-arrow-left 0.8s ease-in-out infinite;
}

[data-id="Horizontal05"] .scroll-arrow-right {
	display: inline-block;
	margin-left: 8px;
	font-size: 18px;
	animation: bounce-arrow-right 0.8s ease-in-out infinite;
}

/* Keyframe animations for bouncing arrows */
@keyframes bounce-arrow-left {
	0%, 100% {
		transform: translateX(0px);
	}
	50% {
		transform: translateX(-2px);
	}
}

@keyframes bounce-arrow-right {
	0%, 100% {
		transform: translateX(0px);
	}
	50% {
		transform: translateX(2px);
	}
}

/* Fade in and slide up animation for scroll text */
@keyframes fade-in-up {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0px);
	}
}

[data-id="Horizontal04"] .text-animation {
	text-align: center !important;
	width: 100% !important;
	display: block !important;
	margin-bottom: 24px;
}

.ct {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	text-align: center;
}
.an .ct {
	transform: translate3D(0, 20px, 0) rotateX(90deg);
	opacity: 0;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.38, 1.47);
}

/* Remove scale animation for Horizontal03 - no pop forward/back effect */
.an[data-id="Horizontal03"] .ct {
	transform: translate3D(0, 20px, 0) rotateX(90deg);
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.38, 1.47);
}
.left,
.right {
	overflow: hidden;
	display: block;
	position: absolute;
	height: 100%;
	width: 50%;
	top: 0;
}
.right {
	left: 50%;
}
.scrollup {
	position: absolute;
	width: 200px;
	top: 10px;
	left: 50%;
	margin-left: -100px;
	z-index: 3000;
	font-size: 20px;
	text-align: center;
}
.scrolldown {
	position: absolute;
	width: 200px;
	bottom: 10px;
	left: 50%;
	margin-left: -100px;
	z-index: 3000;
	font-size: 20px;
	text-align: center;
}
.an.visible .ct {
	transform: translate3D(0, 0, 0);
	opacity: 1;
}

/* Remove scale animation for Horizontal03 - no pop forward/back effect */
.an.visible[data-id="Horizontal03"] .ct {
	transform: translate3D(0, 0, 0);
	opacity: 1;
}

/* HORIZONTAL04 SPECIFIC STYLING - Remove pop-up animation, only use text animation */
[data-id="Horizontal04"].an .ct {
	transform: none !important;
	opacity: 1 !important;
	transition: none !important;
}

[data-id="Horizontal04"].an.visible .ct {
	transform: none !important;
	opacity: 1 !important;
}

/* Horizontal04 text - slide up with fade animation like form elements */
[data-id="Horizontal04"] .text-animation {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	display: block;
	text-align: center;
}

[data-id="Horizontal04"].an.visible .text-animation {
	opacity: 1;
	transform: translateY(0);
}

/* HORIZONTAL04 FAST & SMOOTH WORD-BY-WORD ANIMATION CSS */
[data-id="Horizontal04"] .word-group-1 .char,
[data-id="Horizontal04"] .word-group-2 .char,
[data-id="Horizontal04"] .word-group-3 .char,
[data-id="Horizontal04"] .word-group-4 .char {
	font-family: "Lora", serif;
	opacity: 0;
	transform: translateY(15px) rotateX(-45deg);
	transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
	            transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Word groups animate in with bouncy smooth easing */
[data-id="Horizontal04"] .word-group-1 .char,
[data-id="Horizontal04"] .word-group-2 .char,
[data-id="Horizontal04"] .word-group-3 .char,
[data-id="Horizontal04"] .word-group-4 .char {
	opacity: 1;
	transform: translateY(0) rotateX(0deg);
}

/* Input validation styling */
.school-input.error {
	border-color: #FF6576 !important;
	box-shadow: 0 0 0 2px rgba(255, 101, 118, 0.2);
}

.school-input-error {
	color: #FF6576;
	font-size: 12px;
	position: absolute;
	top: calc(100% + 5px);
	left: 0;
	text-align: left !important;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	opacity: 0;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	z-index: 10;
	white-space: nowrap;
}

.school-input-error.show {
	opacity: 1;
	transform: translateY(0);
}


/* Text Animation Styles */
.text-animation {
	position: relative;
	overflow: hidden;
}

.text-animation .char {
	display: inline-block;
	opacity: 0;
	transform: translateY(30px) rotateX(75deg);
	transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.text-animation .char.space {
	width: 0.3em;
}

/* Character animation in with style changes */
.char-animate .char:not(.word-2 .char):not(.word-3 .char) {
	opacity: 1;
	transform: translateY(0) rotateX(0deg);
}

/* Ensure smooth scrub out while keeping styling */
.char.visible {
	/* Color and styling transitions remain slow to keep effects */
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            font-weight 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            font-style 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            text-shadow 1.0s ease;
}

/* Style changes that happen as characters appear */
.char-animate .word-1 .char {
	font-variation-settings: 'wght' 400, 'ital' 0;
	font-weight: 400;
	font-style: normal;
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
	            font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            font-weight 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            font-style 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            text-shadow 1.0s ease;
}

.char-animate .word-1 .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1;
	font-weight: 700;
	font-style: italic;
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
	animation: smoothCharGlow 1.2s ease-out forwards;
}

.char-animate .word-2 .char {
	opacity: 0;
	transform: translateY(30px) rotateX(75deg);
	transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 0.6s ease;
}

.char-animate .word-2 .char.animated-in {
	opacity: 1;
	transform: translateY(0) rotateX(0deg);
}

.char-animate .word-2 .char.visible {
	color: #FF6576;
	text-shadow: 0 0 15px rgba(255, 101, 118, 0.4);
	animation: smoothCharGlow2 0.8s ease-out forwards;
	transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 0.2s ease;
}

.char-animate .word-2 .char.visible:hover {
	text-shadow: 0 0 25px rgba(255, 101, 118, 0.8), 0 0 35px rgba(255, 101, 118, 0.6);
}

/* Special styling for scr02 slide */

.char-animate .word-3 .char {
	opacity: 0;
	transform: translateY(30px) rotateX(75deg);
	transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 0.6s ease;
}

.char-animate .word-3 .char.animated-in {
	opacity: 1;
	transform: translateY(0) rotateX(0deg);
}

.char-animate .word-3 .char.visible {
	color: #3F50DC;
	text-shadow: 0 0 15px rgba(63, 80, 220, 0.4);
	animation: smoothCharGlow3 0.8s ease-out forwards;
	transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 0.2s ease;
}

.char-animate .word-3 .char.visible:hover {
	text-shadow: 0 0 25px rgba(63, 80, 220, 0.8), 0 0 35px rgba(63, 80, 220, 0.6);
}

/* Individual character glow animations */
@keyframes smoothCharGlow {
	0% { 
		text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
	}
	30% {
		text-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
	}
	60% {
		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
	}
	100% { 
		text-shadow: 0 0 0 transparent;
	}
}

@keyframes smoothCharGlow2Green {
	0% { 
		text-shadow: 0 0 15px rgba(91, 210, 139, 0.4);
	}
	30% {
		text-shadow: 0 0 20px rgba(91, 210, 139, 0.6);
	}
	60% {
		text-shadow: 0 0 25px rgba(91, 210, 139, 0.7);
	}
	100% { 
		text-shadow: 0 0 0 transparent;
	}
}

@keyframes smoothCharGlow3Yellow {
	0% { 
		text-shadow: 0 0 15px rgba(255, 208, 46, 0.4);
	}
	30% {
		text-shadow: 0 0 20px rgba(255, 208, 46, 0.6);
	}
	60% {
		text-shadow: 0 0 25px rgba(255, 208, 46, 0.7);
	}
	100% { 
		text-shadow: 0 0 0 transparent;
	}
}

@keyframes smoothCharGlow2 {
	0% { 
		text-shadow: 0 0 15px rgba(255, 101, 118, 0.4);
	}
	30% {
		text-shadow: 0 0 20px rgba(255, 101, 118, 0.6);
	}
	60% {
		text-shadow: 0 0 25px rgba(255, 101, 118, 0.7);
	}
	100% { 
		text-shadow: 0 0 0 transparent;
	}
}

@keyframes smoothCharGlow3 {
	0% { 
		text-shadow: 0 0 15px rgba(63, 80, 220, 0.4);
	}
	30% {
		text-shadow: 0 0 20px rgba(63, 80, 220, 0.6);
	}
	60% {
		text-shadow: 0 0 25px rgba(63, 80, 220, 0.7);
	}
	100% { 
		text-shadow: 0 0 0 transparent;
	}
}

@keyframes simpleGlow {
	0% { 
		text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
	}
	50% {
		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
	}
	100% { 
		text-shadow: 0 0 0 transparent;
	}
}

@keyframes charGlow1 {
	0% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
	50% { text-shadow: 0 0 30px rgba(255, 255, 255, 0.6); }
	100% { text-shadow: 0 0 0 transparent; }
}

@keyframes charGlow2 {
	0% { text-shadow: 0 0 15px rgba(255, 101, 118, 0.4); }
	50% { text-shadow: 0 0 25px rgba(255, 101, 118, 0.7); }
	100% { text-shadow: 0 0 0 transparent; }
}

@keyframes charGlow3 {
	0% { text-shadow: 0 0 15px rgba(63, 80, 220, 0.4); }
	50% { text-shadow: 0 0 25px rgba(63, 80, 220, 0.7); }
	100% { text-shadow: 0 0 0 transparent; }
}

/* Legacy style change animations (keeping for compatibility) */
.text-animation .word-1,
.text-animation .word-2,
.text-animation .word-3 {
	position: relative;
	transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.text-animation .word-1 .char,
.text-animation .word-2 .char,
.text-animation .word-3 .char {
	transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Initial state - no styling */
.text-animation .word-1 {
	font-style: normal;
	font-weight: inherit;
}

.text-animation .word-2 {
	color: inherit;
}

.text-animation .word-3 {
	color: inherit;
}

/* Style animation state - when style-animate class is added */
.style-animate .text-animation .word-1 {
	font-style: italic;
	font-weight: 700;
	animation: styleWave1 1.5s ease-out forwards;
}

.style-animate .text-animation .word-2 {
	color: #FF6576;
	animation: styleWave2 1.5s ease-out 0.5s forwards;
}

.style-animate .text-animation .word-3 {
	color: #3F50DC;
	animation: styleWave3 1.5s ease-out 1s forwards;
}

/* Keyframe animations for smooth left-to-right style changes */
@keyframes styleWave1 {
	0% {
		font-style: normal;
		font-weight: inherit;
		text-shadow: 0 0 0 transparent;
	}
	50% {
		text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
	}
	100% {
		font-style: italic;
		font-weight: 700;
		text-shadow: 0 0 0 transparent;
	}
}

@keyframes styleWave2 {
	0% {
		color: inherit;
		text-shadow: 0 0 0 transparent;
		transform: scale(1);
	}
	50% {
		text-shadow: 0 0 15px rgba(255, 101, 118, 0.5);
		transform: scale(1.05);
	}
	100% {
		color: #FF6576;
		text-shadow: 0 0 0 transparent;
		transform: scale(1);
	}
}

@keyframes styleWave3 {
	0% {
		color: inherit;
		text-shadow: 0 0 0 transparent;
		transform: scale(1);
	}
	50% {
		text-shadow: 0 0 15px rgba(63, 80, 220, 0.5);
		transform: scale(1.05);
	}
	100% {
		color: #3F50DC;
		text-shadow: 0 0 0 transparent;
		transform: scale(1);
	}
}

/* Welcome screen specific styling for Autism underline */
[data-id="Welcome"] .word-3 {
	position: relative;
}

/* Blue hand-drawn scribbled underline for Autism in Welcome screen */
[data-id="Welcome"] .word-3::after {
	content: '';
	position: absolute;
	left: -20px;
	bottom: -9px;
	width: calc(100% + 40px);
	height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='500' height='45' viewBox='0 0 500 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M80 25 Q110 20 140 25 Q170 30 200 25 Q230 20 260 25 Q290 30 320 25 Q350 20 380 25 Q395 28 420 25' stroke='%233F50DC' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M85 25 Q115 21 145 25 Q175 29 205 25 Q235 21 265 25 Q295 29 325 25 Q355 21 385 25 Q400 27 415 25' stroke='%233F50DC' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7'/%3E%3Cpath d='M90 25 Q120 22 150 25 Q180 28 210 25 Q240 22 270 25 Q300 28 330 25 Q360 22 390 25 Q405 26 410 25' stroke='%233F50DC' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 center;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

/* Second blue hand-drawn underline for double underline effect */
[data-id="Welcome"] .word-3::before {
	content: '';
	position: absolute;
	left: -20px;
	bottom: -18px;
	width: calc(100% + 40px);
	height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='500' height='45' viewBox='0 0 500 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85 22 Q115 27 145 22 Q175 17 205 22 Q235 27 265 22 Q295 17 325 22 Q355 27 385 22 Q400 19 415 22' stroke='%233F50DC' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M90 22 Q120 26 150 22 Q180 18 210 22 Q240 26 270 22 Q300 18 330 22 Q360 26 390 22 Q405 20 410 22' stroke='%233F50DC' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.6'/%3E%3Cpath d='M95 22 Q125 25 155 22 Q185 19 215 22 Q245 25 275 22 Q305 19 335 22 Q365 25 395 22 Q407 21 405 22' stroke='%233F50DC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 center;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

/* Show blue underlines when word-3 becomes visible */
[data-id="Welcome"] .word-3.show-autism-underline::after {
	opacity: 1 !important;
	animation: drawBlueLineSimple 1.0s ease-out forwards;
}

[data-id="Welcome"] .word-3.show-autism-underline::before {
	opacity: 1 !important;
	animation: drawBlueLineSimple 1.0s ease-out 0.2s forwards;
}

/* Hide blue underlines when word-3 becomes hidden */
[data-id="Welcome"] .word-3.hide-autism-underline::after {
	opacity: 1 !important;
	animation: drawBlueLineReverse 0.8s ease-in forwards;
}

[data-id="Welcome"] .word-3.hide-autism-underline::before {
	opacity: 1 !important;
	animation: drawBlueLineReverse 0.8s ease-in 0.1s forwards;
}

/* Blue line drawing animation keyframes */
@keyframes drawBlueLineSimple {
	0% {
		clip-path: inset(0 100% 0 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}

/* Blue line reverse animation keyframes */
@keyframes drawBlueLineReverse {
	0% {
		clip-path: inset(0 0 0 0);
	}
	100% {
		clip-path: inset(0 100% 0 0);
		opacity: 0;
	}
}

/* Short red underline for word "one" */
[data-id="Welcome"] .word-2 {
	position: relative;
}

[data-id="Welcome"] .word-2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 100%;
	height: 15px;
	background-image: url("data:image/svg+xml,%3Csvg width='300' height='30' viewBox='0 0 300 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 15 Q100 8 180 15 Q220 20 260 15' stroke='%23FF6576' stroke-width='12' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

/* Show red underline when word-2 becomes visible */
[data-id="Welcome"] .word-2.show-red-underline::after {
	opacity: 1 !important;
	animation: drawRedUnderline 0.8s ease-out forwards;
}

/* Hide red underline when word-2 becomes hidden */
[data-id="Welcome"] .word-2.hide-red-underline::after {
	opacity: 1 !important;
	animation: drawRedUnderlineReverse 0.6s ease-in forwards;
}

/* Red underline drawing animation keyframes */
@keyframes drawRedUnderline {
	0% {
		clip-path: inset(0 100% 0 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}

/* Red underline reverse animation keyframes */
@keyframes drawRedUnderlineReverse {
	0% {
		clip-path: inset(0 0 0 0);
	}
	100% {
		clip-path: inset(0 100% 0 0);
		opacity: 0;
	}
}

/* SCR02 BACKGROUND CLOUDS - Same floating and parallax effects as Welcome */

.scr02-background {
	position: absolute;
	top: -40%;
	left: -20%;
	width: 100%;
	height: 100%;
	z-index: 12; /* Above canvas (5) but below text (15-20) */
	pointer-events: none;
	/* Enable hardware acceleration for smoother parallax */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.scr02-clouds-bg {
	position: absolute;
	top: 80%; /* Center vertically */
	left: 30%; /* Center horizontally */
	width: 60%; /* Moderate size for visibility */
	height: 60%; /* Moderate size for visibility */
	object-fit: cover;
	object-position: center;
	opacity: 1; /* Full opacity to make it clearly visible */
	z-index: 7; /* Above canvas (5) - farthest back cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	animation: parallaxScr02CloudsBack 25s ease-in-out infinite;
	/* Allow overlapping */
	pointer-events: none;
}

.scr02-clouds-middle {
	position: absolute;
	top: 60%;
	left: 25%; /* Moved more into view */
	width: 50%; /* Larger for overlapping effect */
	height: 80%; /* Larger for better coverage */
	object-fit: cover;
	object-position: center; /* Center positioning for better visibility */
	z-index: 8; /* Above canvas (5) - middle cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	animation: parallaxScr02CloudsMiddle 20s ease-in-out infinite 2.5s;
	/* Allow overlapping */
	pointer-events: none;
}

.scr02-clouds-front {
	position: absolute;
	top: 0%; /* Adjusted for better layering */
	left: 50%;
	width: 60%; /* Larger for overlapping */
	height: 80%; /* Larger coverage */
	object-fit: cover;
	object-position: center;
	z-index: 9; /* Above canvas (5) - front cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	animation: parallaxScr02CloudsFront 15s ease-in-out infinite 2s;
	/* Allow overlapping */
	pointer-events: none;
}

/* Parallax animations for scr02 cloud layers */
@keyframes parallaxScr02CloudsBack {
	0%, 100% {
		transform: translateX(0) translateY(0);
	}
	25% {
		transform: translateX(-45px) translateY(-25px);
	}
	50% {
		transform: translateX(-75px) translateY(35px);
	}
	75% {
		transform: translateX(-30px) translateY(-15px);
	}
}

@keyframes parallaxScr02CloudsMiddle {
	0%, 100% {
		transform: translateX(0) translateY(0);
	}
	25% {
		transform: translateX(-60px) translateY(-35px);
	}
	50% {
		transform: translateX(-105px) translateY(55px);
	}
	75% {
		transform: translateX(-45px) translateY(-25px);
	}
}

@keyframes parallaxScr02CloudsFront {
	0%, 100% {
		transform: translateX(0) translateY(0);
	}
	25% {
		transform: translateX(-90px) translateY(-55px);
	}
	50% {
		transform: translateX(-150px) translateY(75px);
	}
	75% {
		transform: translateX(-60px) translateY(-35px);
	}
}

/* Floating-in animations for scr02 background elements */
@keyframes floatInScr02CloudsBack {
	0% {
		opacity: 0;
		transform: translateX(-30px) translateY(30px) scale(0.9);
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
}

@keyframes floatInScr02CloudsMiddle {
	0% {
		opacity: 0;
		transform: translateX(25px) translateY(-10px) scale(0.9);
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
}

@keyframes floatInScr02CloudsFront {
	0% {
		opacity: 0;
		transform: translateX(20px) translateY(15px) scale(0.85);
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
}

/* Float-out animations for when leaving scr02 screen */
@keyframes floatOutScr02CloudsBack {
	0% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(-30px) translateY(30px) scale(0.9);
	}
}

@keyframes floatOutScr02CloudsMiddle {
	0% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(25px) translateY(-10px) scale(0.9);
	}
}

@keyframes floatOutScr02CloudsFront {
	0% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(20px) translateY(15px) scale(0.85);
	}
}

/* Flying Bird Animation */
.flying-bird {
	position: absolute;
	width: 30px;
	height: 30px;
	z-index: 8;
	opacity: 1;
	animation: flyPattern1 15s linear infinite;
	animation-delay: var(--bird-delay, 0s);
	animation-iteration-count: infinite;
	transform: scale(var(--bird-scale, 1));
}

/* Flying patterns */
@keyframes flyPattern1 {
	0% {
		opacity: 1;
		left: -60px;
		top: 10vh;
		transform: scale(var(--bird-scale, 1)) rotateY(0deg);
	}
	25% {
		opacity: 1;
		left: 25vw;
		top: 20vh;
	}
	50% {
		opacity: 1;
		left: 50vw;
		top: 15vh;
	}
	75% {
		opacity: 1;
		left: 75vw;
		top: 25vh;
	}
	100% {
		opacity: 1;
		left: calc(100vw + 60px);
		top: 30vh;
		transform: scale(var(--bird-scale, 1)) rotateY(0deg);
	}
}

@keyframes flyPattern2 {
	0% {
		opacity: 1;
		left: calc(100vw + 60px);
		top: 80vh;
		transform: scale(var(--bird-scale, 1)) rotateY(180deg);
	}
	25% {
		opacity: 1;
		left: 75vw;
		top: 75vh;
	}
	50% {
		opacity: 1;
		left: 50vw;
		top: 85vh;
	}
	75% {
		opacity: 1;
		left: 25vw;
		top: 78vh;
	}
	100% {
		opacity: 1;
		left: -60px;
		top: 70vh;
		transform: scale(var(--bird-scale, 1)) rotateY(180deg);
	}
}

@keyframes flyPattern3 {
	0% {
		opacity: 1;
		left: -60px;
		top: 45vh;
		transform: scale(var(--bird-scale, 1)) rotateY(0deg);
	}
	25% {
		opacity: 1;
		left: 25vw;
		top: 40vh;
	}
	50% {
		opacity: 1;
		left: 50vw;
		top: 55vh;
	}
	75% {
		opacity: 1;
		left: 75vw;
		top: 48vh;
	}
	100% {
		opacity: 1;
		left: calc(100vw + 60px);
		top: 60vh;
		transform: scale(var(--bird-scale, 1)) rotateY(0deg);
	}
}

@keyframes flyPattern4 {
	0% {
		opacity: 1;
		left: 50vw;
		top: -60px;
		transform: scale(var(--bird-scale, 1)) rotateY(0deg);
	}
	25% {
		opacity: 1;
		left: 40vw;
		top: 25vh;
	}
	50% {
		opacity: 1;
		left: 60vw;
		top: 50vh;
	}
	75% {
		opacity: 1;
		left: 70vw;
		top: 75vh;
	}
	100% {
		opacity: 1;
		left: 80vw;
		top: calc(100vh + 60px);
		transform: scale(var(--bird-scale, 1)) rotateY(0deg);
	}
}

@keyframes flyPattern5 {
	0% {
		opacity: 1;
		left: 30vw;
		top: calc(100vh + 60px);
		transform: scale(var(--bird-scale, 1)) rotateY(180deg);
	}
	25% {
		opacity: 1;
		left: 40vw;
		top: 75vh;
	}
	50% {
		opacity: 1;
		left: 60vw;
		top: 50vh;
	}
	75% {
		opacity: 1;
		left: 70vw;
		top: 25vh;
	}
	100% {
		opacity: 1;
		left: 90vw;
		top: -60px;
		transform: scale(var(--bird-scale, 1)) rotateY(180deg);
	}
}

@keyframes flyPattern6 {
	0% {
		opacity: 1;
		left: calc(100vw + 60px);
		top: 35vh;
		transform: scale(var(--bird-scale, 1)) rotateY(180deg);
	}
	25% {
		opacity: 1;
		left: 75vw;
		top: 30vh;
	}
	50% {
		opacity: 1;
		left: 50vw;
		top: 40vh;
	}
	75% {
		opacity: 1;
		left: 25vw;
		top: 35vh;
	}
	100% {
		opacity: 1;
		left: -60px;
		top: 45vh;
		transform: scale(var(--bird-scale, 1)) rotateY(180deg);
	}
}

/* scr03 background container */
.scr03-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 7;
	pointer-events: none;
}

/* scr03 cloud styles - same as scr02 */
.scr03-clouds-bg, .scr03-clouds-middle, .scr03-clouds-front {
	position: absolute;
	width: 60%;
	height: 60%;
	object-fit: cover;
	opacity: 1;
}

.scr03-clouds-bg {
	z-index: 7;
	opacity: 1;
	animation: floatScr03CloudsBack 8s ease-in-out infinite alternate;
	left: 40%;
	top: 15%;
}

.scr03-clouds-middle {
	z-index: 8;
	opacity: 1;
	animation: floatScr03CloudsMiddle 6s ease-in-out infinite alternate;
	left: 0%;
	top: 15%;
}

.scr03-clouds-front {
	z-index: 9;
	opacity: 1;
	animation: floatScr03CloudsFront 7s ease-in-out infinite alternate;
	left: 30%;
	top: 30%;
}

/* scr03 cloud floating animations */
@keyframes floatScr03CloudsBack {
	0% {
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		transform: translateX(-15px) translateY(-20px) scale(1.05);
	}
}

@keyframes floatScr03CloudsMiddle {
	0% {
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		transform: translateX(20px) translateY(15px) scale(0.95);
	}
}

@keyframes floatScr03CloudsFront {
	0% {
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		transform: translateX(-10px) translateY(-25px) scale(1.02);
	}
}

/* scr03 parallax animations */
@keyframes parallaxScr03CloudsBack {
	0%, 100% {
		transform: translateX(0) translateY(0);
	}
	25% {
		transform: translateX(-45px) translateY(-25px);
	}
	50% {
		transform: translateX(-75px) translateY(35px);
	}
	75% {
		transform: translateX(-30px) translateY(-15px);
	}
}

@keyframes parallaxScr03CloudsMiddle {
	0%, 100% {
		transform: translateX(0) translateY(0);
	}
	25% {
		transform: translateX(-60px) translateY(-35px);
	}
	50% {
		transform: translateX(-105px) translateY(55px);
	}
	75% {
		transform: translateX(-45px) translateY(-25px);
	}
}

@keyframes parallaxScr03CloudsFront {
	0%, 100% {
		transform: translateX(0) translateY(0);
	}
	25% {
		transform: translateX(-90px) translateY(-55px);
	}
	50% {
		transform: translateX(-150px) translateY(75px);
	}
	75% {
		transform: translateX(-60px) translateY(-35px);
	}
}

/* Fade out animations for scr03 clouds */
@keyframes floatOutScr03CloudsBack {
	0% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(-30px) translateY(30px) scale(0.9);
	}
}

@keyframes floatOutScr03CloudsMiddle {
	0% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(25px) translateY(-10px) scale(0.9);
	}
}

@keyframes floatOutScr03CloudsFront {
	0% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateX(20px) translateY(15px) scale(0.85);
	}
}

/* Complete scr02 styling - duplicated from Welcome slide with green/yellow colors */

/* scr02 word-1 styles (for "only") */
[data-id="scr02"] .char-animate .word-1 .char {
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            font-weight 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            font-style 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            text-shadow 1.0s ease;
}

[data-id="scr02"] .char-animate .word-1 .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1;
	font-weight: 700;
	font-style: italic;
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
	animation: smoothCharGlow 1.2s ease-out forwards;
}

/* scr02 word-2 styles (for "ONE" - GREEN) */
[data-id="scr02"] .char-animate .word-2 .char {
	opacity: 0;
	transform: translateY(50px) rotateX(90deg);
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 1.0s ease;
}

/* Remove scr02-specific animated-in rule to use general one */

[data-id="scr02"] .char-animate .word-2 .char.visible {
	color: #5BD28B !important;
	text-shadow: 0 0 15px rgba(91, 210, 139, 0.4) !important;
	animation: smoothCharGlow2Green 1.2s ease-out forwards;
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 0.2s ease;
}

[data-id="scr02"] .char-animate .word-2 .char.visible:hover {
	text-shadow: 0 0 25px rgba(91, 210, 139, 0.8), 0 0 35px rgba(91, 210, 139, 0.6);
}

/* scr02 word-3 styles (for "Autism" - YELLOW) */
[data-id="scr02"] .char-animate .word-3 .char {
	opacity: 0;
	transform: translateY(50px) rotateX(90deg);
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 1.0s ease;
}

/* Remove scr02-specific animated-in rule to use general one */

[data-id="scr02"] .char-animate .word-3 .char.visible {
	color: #FFD02E !important;
	text-shadow: 0 0 15px rgba(255, 208, 46, 0.4) !important;
	animation: smoothCharGlow3Yellow 1.2s ease-out forwards;
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 0.2s ease;
}

[data-id="scr02"] .char-animate .word-3 .char.visible:hover {
	text-shadow: 0 0 25px rgba(255, 208, 46, 0.8), 0 0 35px rgba(255, 208, 46, 0.6);
}

/* Loading Screen Styles */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
	background-color: #F6F6FF !important;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

.loading-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loading-gif-container {
    flex: none;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -20px;
    margin-bottom: 10px;
}

.loading-text-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.loading-gif {
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 60vh;
    margin-top: 0;
}

.loading-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    color: #171717;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.loading-dots {
    display: inline-flex;
    margin-left: 2px;
}

.loading-dots .dot {
    animation: loadingDot 1.4s infinite ease-in-out;
    opacity: 0;
}

.loading-dots .dot:nth-child(1) {
    animation-delay: 0s;
}

.loading-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Initial state for main elements - simplified approach */
.navbar,
.experience-button,
#ScrollPane {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease;
}

.navbar.fade-in,
.experience-button.fade-in,
#ScrollPane.fade-in {
    opacity: 1;
    transform: translateY(0);
}

@keyframes loadingDot {
    0%, 80%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* FORCE CORRECT COLORS FOR SCR02 - FINAL OVERRIDE */
.pane[data-id="scr02"] .word-2 .char.visible,
[data-id="scr02"] .word-2 .char.visible {
    color: #5BD28B !important; /* GREEN for ONE */
    text-shadow: 0 0 15px rgba(91, 210, 139, 0.4) !important;
}

.pane[data-id="scr02"] .word-3 .char.visible,
[data-id="scr02"] .word-3 .char.visible {
    color: #FFD02E !important; /* YELLOW for Autism */
    text-shadow: 0 0 15px rgba(255, 208, 46, 0.4) !important;
}

/* SCR02 ANIMATIONS - Green circle around ONE and yellow zig-zag under Autism */

/* Position word-2 (ONE) for circle animation in scr02 */
[data-id="scr02"] .word-2 {
	position: relative;
}

/* Green hand-drawn circle around ONE in scr02 - Advanced CodePen style */
[data-id="scr02"] .word-2 {
	position: relative;
}

[data-id="scr02"] .word-2 svg {
	position: absolute;
	left: -68px;
	top: -10px;
	width: calc(100% + 140px);
	height: calc(100% + 20px);
	pointer-events: none;
	z-index: 1;
}

[data-id="scr02"] .word-2 svg path {
	transition: stroke-dashoffset 800ms ease-out;
	stroke-width: 2.5;
	stroke: #5BD28B;
	fill: none;
	stroke-linecap: round;
	opacity: 0.75;
	visibility: visible;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
}

[data-id="scr02"] .word-2.show-green-circle svg path {
	stroke-dashoffset: 0 !important;
}

/* Position word-3 (Autism) for underline animation in scr02 */
[data-id="scr02"] .word-3 {
	position: relative;
}

/* Yellow hand-drawn zig-zag underline for Autism in scr02 */
[data-id="scr02"] .word-3::after {
	content: '';
	position: absolute;
	left: -20px;
	bottom: -9px;
	width: calc(100% + 40px);
	height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='500' height='45' viewBox='0 0 500 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M80 26 Q105 14 142 28 Q172 36 195 22 Q231 9 262 29 Q285 42 315 21 Q352 12 375 27 Q398 35 420 23' stroke='%23FFD02E' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.9'/%3E%3Cpath d='M81 25 Q106 15 141 27 Q173 37 196 21 Q230 8 261 28 Q286 41 316 22 Q351 11 376 28 Q397 34 419 24' stroke='%23FFD02E' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7'/%3E%3Cpath d='M79 27 Q104 13 143 29 Q171 35 194 23 Q232 10 263 30 Q284 43 314 20 Q353 13 374 26 Q399 36 421 22' stroke='%23FFD02E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.5'/%3E%3Cpath d='M82 25 Q107 16 140 26 Q174 38 197 20 Q229 7 260 27 Q287 40 317 23 Q350 14 377 29 Q396 33 418 25' stroke='%23FFD02E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 center;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

/* Animation keyframes for scr02 yellow zig-zag - scrub effect */
@keyframes drawYellowZigzag {
	0% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translateX(-10px);
	}
	30% {
		opacity: 1;
		transform: translateX(-5px);
	}
	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateX(0);
	}
}

/* Show yellow underline when word-3 (Autism) becomes visible in scr02 - scrub animation */
[data-id="scr02"] .word-3.show-yellow-underline::after {
	animation: drawYellowZigzag 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Hide animations when leaving scr02 */
[data-id="scr02"] .word-2.hide-green-circle svg path {
	stroke-dashoffset: 1000 !important;
	transition: stroke-dashoffset 0.8s ease-out;
}

[data-id="scr02"] .word-3.hide-yellow-underline::after {
	opacity: 1 !important;
	clip-path: inset(0 0 0 0) !important;
	transform: translateX(0) !important;
	animation: hideYellowZigzag 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Animation for hiding yellow underline - exact reverse of drawYellowZigzag */
@keyframes hideYellowZigzag {
	0% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateX(0);
	}
	70% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateX(-5px);
	}
	100% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translateX(-10px);
	}
}

/* SCR03 UNDERLINE ANIMATIONS */

/* Position word-2 (recognize) for underline animation in scr03 */
[data-id="scr03"] .word-2 {
	position: relative;
}

/* Red hand-drawn underline for "recognize" in scr03 */
[data-id="scr03"] .word-2::after {
	content: '';
	position: absolute;
	left: -20px;
	bottom: -9px;
	width: calc(100% + 40px);
	height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='500' height='45' viewBox='0 0 500 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M80 26 Q90 20 100 26 Q110 32 120 26 Q130 20 140 26 Q150 32 160 26 Q170 20 180 26 Q190 32 200 26 Q210 20 220 26 Q230 32 240 26 Q250 20 260 26 Q270 32 280 26 Q290 20 300 26 Q310 32 320 26 Q330 20 340 26 Q350 32 360 26 Q370 20 380 26 Q390 32 400 26 Q410 20 420 26' stroke='%23FF6B6B' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.9'/%3E%3Cpath d='M81 25 Q91 19 101 25 Q111 31 121 25 Q131 19 141 25 Q151 31 161 25 Q171 19 181 25 Q191 31 201 25 Q211 19 221 25 Q231 31 241 25 Q251 19 261 25 Q271 31 281 25 Q291 19 301 25 Q311 31 321 25 Q331 19 341 25 Q351 31 361 25 Q371 19 381 25 Q391 31 401 25 Q411 19 419 25' stroke='%23FF6B6B' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7'/%3E%3Cpath d='M79 27 Q89 21 99 27 Q109 33 119 27 Q129 21 139 27 Q149 33 159 27 Q169 21 179 27 Q189 33 199 27 Q209 21 219 27 Q229 33 239 27 Q249 21 259 27 Q269 33 279 27 Q289 21 299 27 Q309 33 319 27 Q329 21 339 27 Q349 33 359 27 Q369 21 379 27 Q389 33 399 27 Q409 21 421 27' stroke='%23FF6B6B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 center;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

/* Position word-3 (respond) for underline animation in scr03 */
[data-id="scr03"] .word-3 {
	position: relative;
}

/* Blue hand-drawn underline for "respond" in scr03 */
[data-id="scr03"] .word-3::after {
	content: '';
	position: absolute;
	left: -20px;
	bottom: -9px;
	width: calc(100% + 40px);
	height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='500' height='45' viewBox='0 0 500 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M80 25 Q110 20 140 25 Q170 30 200 25 Q230 20 260 25 Q290 30 320 25 Q350 20 380 25 Q395 28 420 25' stroke='%233F50DC' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M85 25 Q115 21 145 25 Q175 29 205 25 Q235 21 265 25 Q295 29 325 25 Q355 21 385 25 Q400 27 415 25' stroke='%233F50DC' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7'/%3E%3Cpath d='M90 25 Q120 22 150 25 Q180 28 210 25 Q240 22 270 25 Q300 28 330 25 Q360 22 390 25 Q405 26 410 25' stroke='%233F50DC' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 center;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

/* Position word-5 (ALL) for underline animation in scr03 */
[data-id="scr03"] .word-5 {
	position: relative;
}

/* Yellow zig-zag underline for "ALL" in scr03 */
[data-id="scr03"] .word-5::after {
	content: '';
	position: absolute;
	left: -20px;
	bottom: -18px;
	width: calc(100% + 40px);
	height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='500' height='50' viewBox='0 0 500 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 12 L440 12 L70 40 L350 40' stroke='%23FFD02E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.8' stroke-dasharray='800' stroke-dashoffset='800'/%3E%3Cpath d='M72 15 L438 15 L72 37 L355 37' stroke='%23FFD02E' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.9' stroke-dasharray='790' stroke-dashoffset='790'/%3E%3Cpath d='M68 9 L442 9 L68 43 L345 43' stroke='%23FFD02E' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7' stroke-dasharray='810' stroke-dashoffset='810'/%3E%3Cpath d='M75 18 L435 18 L75 34 L360 34' stroke='%23FFD02E' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.6' stroke-dasharray='795' stroke-dashoffset='795'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	opacity: 0;
	visibility: hidden;
}

/* Show underlines when words become visible in scr03 */
[data-id="scr03"] .word-2.show-red-underline::after {
	animation: drawRedUnderline 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[data-id="scr03"] .word-3.show-blue-underline::after {
	animation: drawBlueUnderline 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[data-id="scr03"] .word-5.show-yellow-underline::after {
	opacity: 1;
	visibility: visible;
	animation: drawYellowZShape 1s ease-in-out forwards;
}

/* Hide underlines when leaving scr03 */
[data-id="scr03"] .word-2.hide-red-underline::after {
	animation: hideRedUnderline 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[data-id="scr03"] .word-3.hide-blue-underline::after {
	animation: hideBlueUnderline 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[data-id="scr03"] .word-5.hide-yellow-underline::after {
	animation: hideYellowZShape 1s ease-in-out forwards;
}

/* Animation keyframes for scr03 underlines */
@keyframes drawRedUnderline {
	0% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translateX(-10px);
	}
	30% {
		opacity: 1;
		transform: translateX(-5px);
	}
	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateX(0);
	}
}

@keyframes drawBlueUnderline {
	0% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translateX(-10px);
	}
	30% {
		opacity: 1;
		transform: translateX(-5px);
	}
	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateX(0);
	}
}

@keyframes drawYellowZShape {
	0% {
		background-image: url("data:image/svg+xml,%3Csvg width='500' height='50' viewBox='0 0 500 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 12 L440 12 L70 40 L350 40' stroke='%23FFD02E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.8' stroke-dasharray='800' stroke-dashoffset='800'/%3E%3Cpath d='M72 15 L438 15 L72 37 L355 37' stroke='%23FFD02E' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.9' stroke-dasharray='790' stroke-dashoffset='790'/%3E%3Cpath d='M68 9 L442 9 L68 43 L345 43' stroke='%23FFD02E' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7' stroke-dasharray='810' stroke-dashoffset='810'/%3E%3Cpath d='M75 18 L435 18 L75 34 L360 34' stroke='%23FFD02E' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.6' stroke-dasharray='795' stroke-dashoffset='795'/%3E%3C/svg%3E");
	}
	100% {
		background-image: url("data:image/svg+xml,%3Csvg width='500' height='50' viewBox='0 0 500 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 12 L440 12 L70 40 L350 40' stroke='%23FFD02E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.8' stroke-dasharray='800' stroke-dashoffset='0'/%3E%3Cpath d='M72 15 L438 15 L72 37 L355 37' stroke='%23FFD02E' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.9' stroke-dasharray='790' stroke-dashoffset='0'/%3E%3Cpath d='M68 9 L442 9 L68 43 L345 43' stroke='%23FFD02E' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7' stroke-dasharray='810' stroke-dashoffset='0'/%3E%3Cpath d='M75 18 L435 18 L75 34 L360 34' stroke='%23FFD02E' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.6' stroke-dasharray='795' stroke-dashoffset='0'/%3E%3C/svg%3E");
	}
}

/* Hide animation keyframes for scr03 underlines */
@keyframes hideRedUnderline {
	0% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateX(0);
	}
	70% {
		opacity: 1;
		transform: translateX(-5px);
	}
	100% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translateX(-10px);
	}
}

@keyframes hideBlueUnderline {
	0% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateX(0);
	}
	70% {
		opacity: 1;
		transform: translateX(-5px);
	}
	100% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translateX(-10px);
	}
}

@keyframes hideYellowZShape {
	0% {
		background-image: url("data:image/svg+xml,%3Csvg width='500' height='50' viewBox='0 0 500 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 12 L440 12 L70 40 L350 40' stroke='%23FFD02E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.8' stroke-dasharray='800' stroke-dashoffset='0'/%3E%3Cpath d='M72 15 L438 15 L72 37 L355 37' stroke='%23FFD02E' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.9' stroke-dasharray='790' stroke-dashoffset='0'/%3E%3Cpath d='M68 9 L442 9 L68 43 L345 43' stroke='%23FFD02E' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7' stroke-dasharray='810' stroke-dashoffset='0'/%3E%3Cpath d='M75 18 L435 18 L75 34 L360 34' stroke='%23FFD02E' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.6' stroke-dasharray='795' stroke-dashoffset='0'/%3E%3C/svg%3E");
	}
	100% {
		background-image: url("data:image/svg+xml,%3Csvg width='500' height='50' viewBox='0 0 500 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 12 L440 12 L70 40 L350 40' stroke='%23FFD02E' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.8' stroke-dasharray='800' stroke-dashoffset='800'/%3E%3Cpath d='M72 15 L438 15 L72 37 L355 37' stroke='%23FFD02E' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.9' stroke-dasharray='790' stroke-dashoffset='790'/%3E%3Cpath d='M68 9 L442 9 L68 43 L345 43' stroke='%23FFD02E' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7' stroke-dasharray='810' stroke-dashoffset='810'/%3E%3Cpath d='M75 18 L435 18 L75 34 L360 34' stroke='%23FFD02E' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.6' stroke-dasharray='795' stroke-dashoffset='795'/%3E%3C/svg%3E");
	}
}

/* SCR03 SPECIFIC STYLING */

/* scr03 word-1 styles (for "you" - bold italic character by character) */
[data-id="scr03"] .char-animate .word-1 .char {
	font-variation-settings: 'wght' 400, 'ital' 0;
	font-weight: 400;
	font-style: normal;
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
	            font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            font-weight 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            font-style 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            text-shadow 1.0s ease;
}

[data-id="scr03"] .char-animate .word-1 .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1;
	font-weight: 700;
	font-style: italic;
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
	animation: smoothCharGlow 1.2s ease-out forwards;
}

/* scr03 word-2 styles (for "recognize" - RED) */
[data-id="scr03"] .char-animate .word-2 .char {
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 1.0s ease;
}

[data-id="scr03"] .char-animate .word-2 .char.visible {
	color: #FF6576 !important;
	text-shadow: 0 0 15px rgba(255, 101, 118, 0.4) !important;
	animation: smoothCharGlow2 1.2s ease-out forwards;
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 0.2s ease;
}

[data-id="scr03"] .char-animate .word-2 .char.visible:hover {
	text-shadow: 0 0 25px rgba(255, 101, 118, 0.8), 0 0 35px rgba(255, 101, 118, 0.6);
}

/* scr03 word-3 styles (for "respond" - BLUE) */
[data-id="scr03"] .char-animate .word-3 .char {
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 1.0s ease;
}

[data-id="scr03"] .char-animate .word-3 .char.visible {
	color: #3F50DC !important;
	text-shadow: 0 0 15px rgba(63, 80, 220, 0.4) !important;
	animation: smoothCharGlow3 1.2s ease-out forwards;
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 0.2s ease;
}

[data-id="scr03"] .char-animate .word-3 .char.visible:hover {
	text-shadow: 0 0 25px rgba(63, 80, 220, 0.8), 0 0 35px rgba(63, 80, 220, 0.6);
}

/* scr03 word-4 styles (for "sensory needs" - GREEN) */
[data-id="scr03"] .char-animate .word-4 .char {
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 1.0s ease;
}

[data-id="scr03"] .char-animate .word-4 .char.visible {
	color: #5BD28B !important;
	text-shadow: 0 0 15px rgba(91, 210, 139, 0.4) !important;
	animation: smoothCharGlow2Green 1.2s ease-out forwards;
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 0.2s ease;
}

[data-id="scr03"] .char-animate .word-4 .char.visible:hover {
	text-shadow: 0 0 25px rgba(91, 210, 139, 0.8), 0 0 35px rgba(91, 210, 139, 0.6);
}

/* scr03 word-5 styles (for "ALL" - YELLOW) */
[data-id="scr03"] .char-animate .word-5 .char {
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 1.0s ease;
}

[data-id="scr03"] .char-animate .word-5 .char.visible {
	color: #FFD02E !important;
	text-shadow: 0 0 15px rgba(255, 208, 46, 0.4) !important;
	animation: smoothCharGlow3Yellow 1.2s ease-out forwards;
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
	            text-shadow 0.2s ease;
}

[data-id="scr03"] .char-animate .word-5 .char.visible:hover {
	text-shadow: 0 0 25px rgba(255, 208, 46, 0.8), 0 0 35px rgba(255, 208, 46, 0.6);
}

/* SCR03 SPECIFIC LAYOUT - Make container narrower to force line break after "sensory needs" */
[data-id="scr03"] .ct {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	height: 100%;
	overflow: visible !important;
}

[data-id="scr03"] .text-animation {
	max-width: 75%;
	word-wrap: break-word;
	line-height: 1.4;
	text-align: center;
	overflow: visible !important;
}

/* Enhanced scr03 word-4 styles (for "sensory needs" - GREEN) with higher specificity */
[data-id="scr03"] .char-animate .word-4 .char.visible {
	color: #5BD28B !important;
	text-shadow: 0 0 15px rgba(91, 210, 139, 0.4) !important;
	animation: smoothCharGlow2Green 1.2s ease-out forwards !important;
}

/* Additional fallback styles for word-4 */
[data-id="scr03"] .word-4 .char.visible {
	color: #5BD28B !important;
	text-shadow: 0 0 15px rgba(91, 210, 139, 0.4) !important;
}

[data-id="scr03"] .word-4.visible {
	color: #5BD28B !important;
}

/* SCR03 Green Circle Animation for "sensory needs" (word-4) - Duplicate of scr02 but 2x wider */

/* Position word-4 (sensory needs) for circle animation in scr03 */
[data-id="scr03"] .word-4 {
	position: relative;
	overflow: visible !important;
	z-index: 999;
}

[data-id="scr03"] .word-4 svg {
	position: absolute;
	left: -1862px;
	top: -12px;
	width: 3900px !important;
	height: calc(100% + 30px);
	pointer-events: none;
	z-index: 999;
	opacity: 0.8;
	overflow: visible !important;
}
	

[data-id="scr03"] .word-4 svg path {
	transition: opacity 800ms ease-out;
	stroke-width: 2.5;
	stroke: #5BD28B !important;
	fill: none;
	stroke-linecap: round;
	opacity: 0;
	visibility: visible;
}

[data-id="scr03"] .word-4.show-green-circle svg path {
	opacity: 0.75 !important;
}

/* Hide animations when leaving scr03 */
[data-id="scr03"] .word-4.hide-green-circle svg path {
	opacity: 0 !important;
	transition: opacity 0.8s ease-out;
}

/* Enhanced scr03 word-5 styles (for "ALL" - YELLOW) with higher specificity */
[data-id="scr03"] .char-animate .word-5 .char.visible {
	color: #FFD02E !important;
	text-shadow: 0 0 15px rgba(255, 208, 46, 0.4) !important;
	animation: smoothCharGlow3Yellow 1.2s ease-out forwards !important;
}

/* Additional fallback styles for word-5 */
[data-id="scr03"] .word-5 .char.visible {
	color: #FFD02E !important;
	text-shadow: 0 0 15px rgba(255, 208, 46, 0.4) !important;
}

[data-id="scr03"] .word-5.visible {
	color: #FFD02E !important;
}

/* scr03 word-6 styles (for "thrive" - BOLD ITALIC like word-1) */
[data-id="scr03"] .char-animate .word-6 .char {
	font-variation-settings: 'wght' 400, 'ital' 0;
	font-weight: 400;
	font-style: normal;
	transition: opacity 0.1s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
	            font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            font-weight 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            font-style 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            text-shadow 1.0s ease;
}

[data-id="scr03"] .char-animate .word-6 .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1;
	font-weight: 700;
	font-style: italic;
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
	animation: smoothCharGlow 1.2s ease-out forwards;
}

/* Additional fallback styles for word-6 - THRIVE MUST BE BOLD ITALIC */
[data-id="scr03"] .word-6 .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1;
	font-weight: 700 !important;
	font-style: italic !important;
	text-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
}

[data-id="scr03"] .word-6.visible {
	font-variation-settings: 'wght' 700, 'ital' 1;
	font-weight: 700 !important;
	font-style: italic !important;
}

/* Extra specific rule to force thrive to be bold italic */
[data-id="scr03"] .char-animate .word-6 .char.visible,
[data-id="scr03"] .word-6 .char.visible,
[data-id="scr03"] .word-6.visible .char {
	font-variation-settings: 'wght' 700, 'ital' 1;
	font-weight: bold !important;
	font-style: italic !important;
	font-family: "Lora", serif !important;
}

/* Ultra-specific rule for "thrive" - highest specificity */
[data-id="scr03"][data-id="scr03"] .text-animation .word-6 .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1;
	font-weight: 700 !important;
	font-style: italic !important;
	font-family: "Lora", serif !important;
	transition: none !important;
}

/* Maximum specificity rule for "thrive" word - ensure bold-italic transition */
[data-id="scr03"] .text-animation[data-text*="thrive"] .word-6 .char.visible,
[data-id="scr03"] .char-animate .word-6 .char.visible[style*="italic"],
[data-id="scr03"] .word-6 .char.visible[class*="visible"] {
	font-variation-settings: 'wght' 700, 'ital' 1;
	font-weight: bold !important;
	font-style: italic !important;
	font-family: "Lora", serif !important;
	transition: none !important;
}

/* Prevent flash on scr03 - hide entire text element initially */
/* Hide scr03 text until animation is ready */
[data-id="scr03"] .text-animation {
	opacity: 0;
	visibility: hidden;
}

/* Show text element when animation is ready */
[data-id="scr03"].scr03-animation-ready .text-animation {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.1s ease;
}

/* Hide all word-group characters initially as backup */
[data-id="scr03"] .word-group-1 .char,
[data-id="scr03"] .word-group-2 .char,
[data-id="scr03"] .word-group-3 .char,
[data-id="scr03"] .word-group-4 .char,
[data-id="scr03"] .word-group-5 .char,
[data-id="scr03"] .word-group-6 .char,
[data-id="scr03"] .word-group-7 .char,
[data-id="scr03"] .word-group-8 .char,
[data-id="scr03"] .word-group-9 .char,
[data-id="scr03"] .word-group-10 .char,
[data-id="scr03"] .word-group-11 .char {
	opacity: 0;
	transform: translateY(25px) rotateX(-90deg);
}

/* HORIZONTAL01 SPECIFIC STYLING - Remove pop-up animation, only use text animation */
[data-id="Horizontal01"].an .ct {
	transform: none !important;
	opacity: 1 !important;
	transition: none !important;
}

[data-id="Horizontal01"].an.visible .ct {
	transform: none !important;
	opacity: 1 !important;
}

/* Handdrawn text styling for Horizontal01 */
.handdrawn-text {
	position: absolute;
	top: 60%;
	left: 90%;
	transform: translateX(-50%);
	font-family: 'Comico-Regular', sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #171717;
	text-align: center;
	rotate: 6deg;
}

.handdrawn-line {
	margin: 6px 0;
	display: block;
	white-space: nowrap;
}

/* Individual line rotations for handdrawn skew effect */
.handdrawn-line.line1 {
    transform: rotate(-1.5deg);
}

.handdrawn-line.line2 {
    transform: rotate(1deg);
}

@keyframes writeOut {
	0% { 
		opacity: 0.8; 
		transform: scale(1) rotate(var(--rotation, 0deg)); 
	}
	100% { 
		opacity: 0; 
		transform: scale(0.3) rotate(var(--rotation, 0deg)) translateY(-30px); 
	}
}

@keyframes wiggleSubtle {
	0%, 100% { transform: rotate(var(--rotation, 0deg)) translateX(0px) translateY(0px); }
	25% { transform: rotate(var(--rotation, 0deg)) translateX(0.5px) translateY(-0.3px); }
	50% { transform: rotate(var(--rotation, 0deg)) translateX(-0.3px) translateY(0.5px); }
	75% { transform: rotate(var(--rotation, 0deg)) translateX(0.3px) translateY(0px); }
}

@keyframes wiggle {
	0%, 100% { transform: rotate(var(--rotation, 0deg)) translateX(0px) translateY(0px); }
	25% { transform: rotate(var(--rotation, 0deg)) translateX(1px) translateY(-1px); }
	50% { transform: rotate(var(--rotation, 0deg)) translateX(-1px) translateY(1px); }
	75% { transform: rotate(var(--rotation, 0deg)) translateX(1px) translateY(0px); }
}

.handdrawn-line.line3 {
    transform: rotate(-0.8deg);
}

.handdrawn-text.scroll-out .handdrawn-word {
	animation: writeOut 0.8s ease-out forwards !important;
}

.handdrawn-text.scroll-in .handdrawn-word {
	animation: none;
}

/* Scroll-in animation classes */
.handdrawn-text.scroll-in .handdrawn-word.word1 {
	animation: writeIn 0.6s ease-out 0.2s forwards, wiggle 3s ease-in-out 0.8s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word2 {
	animation: writeIn 0.6s ease-out 0.4s forwards, wiggle 3s ease-in-out 1s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word3 {
	animation: writeIn 0.6s ease-out 0.6s forwards, wiggle 3s ease-in-out 1.2s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word4 {
	animation: writeIn 0.6s ease-out 0.8s forwards, wiggle 3s ease-in-out 1.4s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word5 {
	animation: writeIn 0.6s ease-out 1s forwards, wiggle 3s ease-in-out 1.6s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word6 {
	animation: writeIn 0.6s ease-out 1.2s forwards, wiggle 3s ease-in-out 1.8s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word7 {
	animation: writeIn 0.6s ease-out 1.4s forwards, wiggle 3s ease-in-out 2s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word8 {
	animation: writeIn 0.6s ease-out 2.6s forwards, wiggle 3s ease-in-out 2.2s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word9 {
	animation: writeIn 0.6s ease-out 2.8s forwards, wiggle 3s ease-in-out 2.4s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word10 {
	animation: writeIn 0.6s ease-out 3s forwards, wiggle 3s ease-in-out 2.6s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word11 {
	animation: writeIn 0.6s ease-out 3.2s forwards, wiggle 3s ease-in-out 2.8s infinite;
}

.handdrawn-text.scroll-in .handdrawn-word.word12 {
	animation: writeIn 0.6s ease-out 3.4s forwards, wiggle 3s ease-in-out 3s infinite;
}

/* scr02 specific scroll-in animations with subtle wiggle - delayed to start after main text finishes */
.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word1 {
	animation: writeIn 0.4s ease-out 4.2s forwards, wiggleSubtle 4s ease-in-out 4.6s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word2 {
	animation: writeIn 0.4s ease-out 4.3s forwards, wiggleSubtle 4s ease-in-out 4.7s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word3 {
	animation: writeIn 0.4s ease-out 4.4s forwards, wiggleSubtle 4s ease-in-out 4.8s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word4 {
	animation: writeIn 0.4s ease-out 4.5s forwards, wiggleSubtle 4s ease-in-out 4.9s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word5 {
	animation: writeIn 0.4s ease-out 4.6s forwards, wiggleSubtle 4s ease-in-out 5.0s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word6 {
	animation: writeIn 0.4s ease-out 4.7s forwards, wiggleSubtle 4s ease-in-out 5.1s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word7 {
	animation: writeIn 0.4s ease-out 4.8s forwards, wiggleSubtle 4s ease-in-out 5.2s infinite;
}

/* Horizontal03 specific handdrawn text styling - disclaimer text */
[data-id="Horizontal03"] .handdrawn-text.horizontal03-handdrawn {
	/* Position adjusted for disclaimer text */
	transform: translateX(-400px) translateY(-230px) !important;
	font-size: 14px !important; /* Slightly smaller for disclaimer text */
	rotate: -2.5deg;
}

[data-id="Horizontal03"] .handdrawn-text.horizontal03-handdrawn .handdrawn-word {
	/* Start visible for debugging */
	opacity: 0.8 !important;
	transform: scale(1) translateY(0) rotate(calc(var(--rotation, 0) * 1deg));
	text-decoration: none !important;
	border: none !important;
	animation: wiggleSubtle 4s ease-in-out infinite;
}

/* Word rotations for horizontal03 disclaimer text */
[data-id="Horizontal03"] .handdrawn-text.horizontal03-handdrawn .handdrawn-word.word1 { --rotation: -3.5deg; text-decoration: none !important; border: none !important; } /* view */
[data-id="Horizontal03"] .handdrawn-text.horizontal03-handdrawn .handdrawn-word.word2 { 
	--rotation: -2.5deg; 
	position: relative; 
	text-decoration: none !important; 
	border: none !important;
	cursor: pointer;
	transition: all 0.3s ease;
} /* *disclaimer */

/* Thick underline on hover for disclaimer word */
[data-id="Horizontal03"] .handdrawn-text.horizontal03-handdrawn .handdrawn-word.word2:hover {
	transform: scale(1.05) rotate(calc(var(--rotation, 0) * 1deg));
}

[data-id="Horizontal03"] .handdrawn-text.horizontal03-handdrawn .handdrawn-word.word2::after {
	content: '';
	position: absolute;
	left: -2px;
	bottom: -3px;
	width: calc(100% + 4px);
	height: 2px;
	background: #171717;
	border-radius: 1px;
	opacity: 0;
	transform: scaleX(0);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform-origin: left center;
}

[data-id="Horizontal03"] .handdrawn-text.horizontal03-handdrawn .handdrawn-word.word2:hover::after {
	opacity: 0.9;
	transform: scaleX(1);
}

/* Horizontal03 scroll-in animations for disclaimer text - Immediate smooth entrance */
[data-id="Horizontal03"] .handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word1 {
	animation: smoothHanddrawnEntrance 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
	           wiggleSubtle 4s ease-in-out 1.2s infinite;
}

[data-id="Horizontal03"] .handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word2 {
	animation: smoothHanddrawnEntrance 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards,
	           wiggleSubtle 4s ease-in-out 1.6s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word3 {
	animation: writeIn 0.6s ease-out 0.3s forwards, wiggleSubtle 4s ease-in-out 0.9s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word4 {
	animation: writeIn 0.6s ease-out 0.4s forwards, wiggleSubtle 4s ease-in-out 1s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word5 {
	animation: writeIn 0.6s ease-out 0.5s forwards, wiggleSubtle 4s ease-in-out 1.1s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word6 {
	animation: writeIn 0.6s ease-out 0.6s forwards, wiggleSubtle 4s ease-in-out 1.2s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word7 {
	animation: writeIn 0.6s ease-out 0.7s forwards, wiggleSubtle 4s ease-in-out 1.3s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word8 {
	animation: writeIn 0.6s ease-out 0.8s forwards, wiggleSubtle 4s ease-in-out 1.4s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word9 {
	animation: writeIn 0.6s ease-out 0.9s forwards, wiggleSubtle 4s ease-in-out 1.5s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word10 {
	animation: writeIn 0.6s ease-out 1s forwards, wiggleSubtle 4s ease-in-out 1.6s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word11 {
	animation: writeIn 0.6s ease-out 1.1s forwards, wiggleSubtle 4s ease-in-out 1.7s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word12 {
	animation: writeIn 0.6s ease-out 1.2s forwards, wiggleSubtle 4s ease-in-out 1.8s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word13 {
	animation: writeIn 0.6s ease-out 1.3s forwards, wiggleSubtle 4s ease-in-out 1.9s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word14 {
	animation: writeIn 0.6s ease-out 1.4s forwards, wiggleSubtle 4s ease-in-out 2s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word15 {
	animation: writeIn 0.6s ease-out 1.5s forwards, wiggleSubtle 4s ease-in-out 2.1s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word16 {
	animation: writeIn 0.6s ease-out 1.6s forwards, wiggleSubtle 4s ease-in-out 2.2s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word17 {
	animation: writeIn 0.6s ease-out 1.7s forwards, wiggleSubtle 4s ease-in-out 2.3s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word18 {
	animation: writeIn 0.6s ease-out 1.8s forwards, wiggleSubtle 4s ease-in-out 2.4s infinite;
}

.handdrawn-text.horizontal03-handdrawn.scroll-in .handdrawn-word.word19 {
	animation: writeIn 0.6s ease-out 1.9s forwards, wiggleSubtle 4s ease-in-out 2.5s infinite;
}



/* Horizontal04 scroll-in animations */
.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word1 {
	animation: writeIn 0.6s ease-out 0.1s forwards, wiggleSubtle 4s ease-in-out 0.7s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word2 {
	animation: writeIn 0.6s ease-out 0.2s forwards, wiggleSubtle 4s ease-in-out 0.8s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word3 {
	animation: writeIn 0.6s ease-out 0.3s forwards, wiggleSubtle 4s ease-in-out 0.9s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word4 {
	animation: writeIn 0.6s ease-out 0.4s forwards, wiggleSubtle 4s ease-in-out 1s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word5 {
	animation: writeIn 0.6s ease-out 0.5s forwards, wiggleSubtle 4s ease-in-out 1.1s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word6 {
	animation: writeIn 0.6s ease-out 0.6s forwards, wiggleSubtle 4s ease-in-out 1.2s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word7 {
	animation: writeIn 0.6s ease-out 0.7s forwards, wiggleSubtle 4s ease-in-out 1.3s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word8 {
	animation: writeIn 0.6s ease-out 0.8s forwards, wiggleSubtle 4s ease-in-out 1.4s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word9 {
	animation: writeIn 0.6s ease-out 0.9s forwards, wiggleSubtle 4s ease-in-out 1.5s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word10 {
	animation: writeIn 0.6s ease-out 1s forwards, wiggleSubtle 4s ease-in-out 1.6s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word11 {
	animation: writeIn 0.6s ease-out 1.1s forwards, wiggleSubtle 4s ease-in-out 1.7s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word12 {
	animation: writeIn 0.6s ease-out 1.2s forwards, wiggleSubtle 4s ease-in-out 1.8s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word13 {
	animation: writeIn 0.6s ease-out 1.3s forwards, wiggleSubtle 4s ease-in-out 1.9s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word14 {
	animation: writeIn 0.6s ease-out 1.4s forwards, wiggleSubtle 4s ease-in-out 2s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word15 {
	animation: writeIn 0.6s ease-out 1.5s forwards, wiggleSubtle 4s ease-in-out 2.1s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word16 {
	animation: writeIn 0.6s ease-out 1.6s forwards, wiggleSubtle 4s ease-in-out 2.2s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word17 {
	animation: writeIn 0.6s ease-out 1.7s forwards, wiggleSubtle 4s ease-in-out 2.3s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word18 {
	animation: writeIn 0.6s ease-out 1.8s forwards, wiggleSubtle 4s ease-in-out 2.4s infinite;
}

.handdrawn-text.horizontal04-handdrawn.scroll-in .handdrawn-word.word19 {
	animation: writeIn 0.6s ease-out 1.9s forwards, wiggleSubtle 4s ease-in-out 2.5s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word8 {
	animation: writeIn 0.4s ease-out 4.9s forwards, wiggleSubtle 4s ease-in-out 5.3s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word9 {
	animation: writeIn 0.4s ease-out 5.0s forwards, wiggleSubtle 4s ease-in-out 5.4s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word10 {
	animation: writeIn 0.4s ease-out 5.1s forwards, wiggleSubtle 4s ease-in-out 5.5s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word11 {
	animation: writeIn 0.4s ease-out 5.2s forwards, wiggleSubtle 4s ease-in-out 5.6s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word12 {
	animation: writeIn 0.4s ease-out 5.3s forwards, wiggleSubtle 4s ease-in-out 5.7s infinite;
}

.handdrawn-text.scr02-handdrawn.scroll-in .handdrawn-word.word13 {
	animation: writeIn 0.4s ease-out 5.4s forwards, wiggleSubtle 4s ease-in-out 5.8s infinite;
}

.handdrawn-word {
	display: inline-block;
	margin: 0 4px;
	position: relative;
	opacity: 0;
	transform: scale(0.8);
}

/* ===== HANDDRAWN TEXT STYLING - SEPARATED BY SECTION ===== */

/* ----- HORIZONTAL01 HANDDRAWN TEXT STYLING ----- */
.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn) {
	/* Position Horizontal01 handdrawn text */
	transform: translateX(-370px) translateY(-80px);
}

.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn) .handdrawn-word {
	/* Default wiggle animation for Horizontal01 */
	animation: wiggle 3s ease-in-out infinite;
}

.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn) .handdrawn-word.word1 { 
	/* HOVER - underlined in Horizontal01 */
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	--rotation: -1.5;
}

.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn) .handdrawn-word.word2 { --rotation: 0.8; }  /* OVER */
.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn) .handdrawn-word.word3 { --rotation: -1; }   /* EACH */
.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn) .handdrawn-word.word4 { --rotation: 1.5; }  /* STUDENT */
.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn) .handdrawn-word.word5 { --rotation: 1; }    /* TO */
.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn) .handdrawn-word.word6 { --rotation: -0.8; } /* LEARN */
.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn) .handdrawn-word.word7 { --rotation: 2; }    /* MORE */

/* Horizontal01 scroll-in animations */
.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn).scroll-in .handdrawn-word.word1 {
	animation: writeIn 0.6s ease-out 0.2s forwards, wiggle 3s ease-in-out 0.8s infinite;
}

.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn).scroll-in .handdrawn-word.word2 {
	animation: writeIn 0.6s ease-out 0.4s forwards, wiggle 3s ease-in-out 1s infinite;
}

.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn).scroll-in .handdrawn-word.word3 {
	animation: writeIn 0.6s ease-out 0.6s forwards, wiggle 3s ease-in-out 1.2s infinite;
}

.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn).scroll-in .handdrawn-word.word4 {
	animation: writeIn 0.6s ease-out 0.8s forwards, wiggle 3s ease-in-out 1.4s infinite;
}

.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn).scroll-in .handdrawn-word.word5 {
	animation: writeIn 0.6s ease-out 1s forwards, wiggle 3s ease-in-out 1.6s infinite;
}

.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn).scroll-in .handdrawn-word.word6 {
	animation: writeIn 0.6s ease-out 1.2s forwards, wiggle 3s ease-in-out 1.8s infinite;
}

.handdrawn-text:not(.scr02-handdrawn):not(.horizontal02-handdrawn).scroll-in .handdrawn-word.word7 {
	animation: writeIn 0.6s ease-out 1.4s forwards, wiggle 3s ease-in-out 2s infinite;
}

/* ----- SCR02 HANDDRAWN TEXT STYLING ----- */
.handdrawn-text.scr02-handdrawn {
	margin-top: 80px;
	transform: translateX(-90%) rotate(-10deg);
}

.handdrawn-text.scr02-handdrawn .handdrawn-word {
	animation: wiggleSubtle 4s ease-in-out infinite;
}

.handdrawn-text.scr02-handdrawn .handdrawn-word.word1 { --rotation: -1.5; } /* *EVERY */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word2 { --rotation: 0.8; }  /* CHILD'S */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word3 { --rotation: -1; }   /* NEEDS */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word4 { --rotation: 1.5; }  /* ARE */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word5 { 
	--rotation: 1; 
	text-decoration: underline; 
	text-decoration-thickness: 2px; 
	text-underline-offset: 3px; 
} /* UNIQUE, - underlined in scr02 */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word6 { --rotation: -0.8; } /* AND */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word7 { --rotation: 2; }    /* THEY'RE */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word8 { --rotation: -1.2; } /* NOT */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word9 { --rotation: 0.5; }  /* ALWAYS */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word10 { --rotation: -2; }  /* THE */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word11 { --rotation: 1.8; } /* SAME */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word12 { --rotation: -0.5; } /* EACH */
.handdrawn-text.scr02-handdrawn .handdrawn-word.word13 { --rotation: 1.2; } /* DAY. */

/* ----- HORIZONTAL02 HANDDRAWN TEXT STYLING ----- */
.handdrawn-text.horizontal02-handdrawn {
	/* Position Horizontal02 handdrawn text */
	transform: translateX(-400px) translateY(-200px);
}

.handdrawn-text.horizontal02-handdrawn .handdrawn-word {
	/* Default wiggle animation for Horizontal02 */
	animation: wiggle 3s ease-in-out infinite;
}

.handdrawn-text.horizontal02-handdrawn .handdrawn-word.word1 { 
	/* Curvy arrow rotated to 250 degrees and moved left 30px */
	--rotation: 250; 
	font-size: 2rem;
	transform: translateX(-10px) translateY(5px) rotate(250deg) scale(1.5) !important;
	animation: none; /* Remove wiggle animation from arrow */
}
.handdrawn-text.horizontal02-handdrawn .handdrawn-word.word2 { --rotation: 2; }    /* CLICK */
.handdrawn-text.horizontal02-handdrawn .handdrawn-word.word3 { --rotation: -1.5; } /* TO */
.handdrawn-text.horizontal02-handdrawn .handdrawn-word.word4 { --rotation: 1; }    /* LEARN */
.handdrawn-text.horizontal02-handdrawn .handdrawn-word.word5 { --rotation: -0.5; } /* MORE */

/* Horizontal02 scroll-in animations */
.handdrawn-text.horizontal02-handdrawn.scroll-in .handdrawn-word.word1 {
	animation: writeIn 0.6s ease-out 4.5s forwards; /* Arrow animates in but no wiggle */
}

.handdrawn-text.horizontal02-handdrawn.scroll-in .handdrawn-word.word2 {
	animation: writeIn 0.6s ease-out 4.7s forwards, wiggle 3s ease-in-out 5.3s infinite;
}

.handdrawn-text.horizontal02-handdrawn.scroll-in .handdrawn-word.word3 {
	animation: writeIn 0.6s ease-out 4.9s forwards, wiggle 3s ease-in-out 5.5s infinite;
}

.handdrawn-text.horizontal02-handdrawn.scroll-in .handdrawn-word.word4 {
	animation: writeIn 0.6s ease-out 5.1s forwards, wiggle 3s ease-in-out 5.7s infinite;
}

.handdrawn-text.horizontal02-handdrawn.scroll-in .handdrawn-word.word5 {
	animation: writeIn 0.6s ease-out 5.3s forwards, wiggle 3s ease-in-out 5.9s infinite;
}

/* ===== HANDDRAWN TEXT ANIMATIONS ===== */
@keyframes writeIn {
	0% {
		opacity: 0;
		transform: translateY(-2px) rotate(-1deg) scale(0.5);
	}
	50% {
		opacity: 0.6;
		transform: translateY(1px) rotate(0.5deg) scale(1.1);
	}
	100% {
		opacity: 0.8;
		transform: translateY(0) rotate(calc(var(--rotation, 0) * 1deg)) scale(1);
	}
}

/* Smooth handdrawn entrance animation for Horizontal03 */
@keyframes smoothHanddrawnEntrance {
	0% {
		opacity: 0;
		transform: scale(0.9) translateY(10px) rotate(calc(var(--rotation, 0) * 1deg));
	}
	30% {
		opacity: 0.3;
		transform: scale(0.95) translateY(5px) rotate(calc(var(--rotation, 0) * 1deg));
	}
	70% {
		opacity: 0.7;
		transform: scale(1.02) translateY(-2px) rotate(calc(var(--rotation, 0) * 1deg));
	}
	100% {
		opacity: 0.8;
		transform: scale(1) translateY(0) rotate(calc(var(--rotation, 0) * 1deg));
	}
}



/* HORIZONTAL01 CLOUD BACKGROUNDS - Same parallax effect as other clouds */
.horizontal01-clouds-bg {
	position: absolute;
	top: 40%;
	right: 100%; /* Moved further left (was -40%) */
	width: 60%;
	height: 80%;
	object-fit: cover;
	object-position: right;
	opacity: 1; /* Always visible - no fade-in */
	z-index: 7; /* Back cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	animation: parallaxCloudsBack 25s ease-in-out infinite; /* Just the parallax animation */
}

.horizontal01-clouds-middle {
	position: absolute;
	top: 0%;
	right: 55%; /* Brought back into view (was 40%) */
	width: 60%;
	height: 80%;
	object-fit: cover;
	object-position: right;
	opacity: 1; /* Always visible - no fade-in */
	z-index: 8; /* Middle cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	animation: parallaxCloudsMiddle 20s ease-in-out infinite; /* Just the parallax animation */
}

.horizontal01-clouds-front {
	position: absolute;
	top: -15%;
	right: -20%; /* Different positioning for the new front cloud */
	width: 60%;
	height: 80%;
	object-fit: cover;
	object-position: right;
	opacity: 1; /* Always visible - no fade-in */
	z-index: 9; /* Front cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	animation: parallaxCloudsFront 15s ease-in-out infinite; /* Just the parallax animation */
}

.horizontal01-city {
	position: absolute;
	bottom:-6%; /* At the bottom of the page */
	left: 47%; /* Center horizontally */
	transform: translateX(-50%) translateY(0); /* Center the image - final position */
	width: auto; /* Maintain aspect ratio */
	height: auto; /* Maintain aspect ratio */
	max-width: 120%; /* Don't exceed container width */
	max-height: 120%; /* Don't take up more than half the height */
	opacity: 1;
	z-index: 10; /* Above clouds but below text */
}

.horizontal01-city.float-in {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.horizontal01-bus-stop {
	position: absolute;
	bottom: 0; /* At the bottom of the page */
	left: 50%; /* Center horizontally */
	transform: translateX(-50%) translateY(0); /* Center the image - final position */
	width: auto; /* Maintain aspect ratio */
	height: auto; /* Maintain aspect ratio */
	max-width: 100%; /* Don't exceed container width */
	max-height: 100%; /* Don't take up more than half the height */
	opacity: 1;
	z-index: 11; /* Same layer as road but above due to HTML order */
}

.horizontal01-bus-stop.float-in {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.horizontal01-road {
	position: absolute;
	bottom: -2%; /* At the bottom of the page */
	left: 50%; /* Center horizontally */
	transform: translateX(-50%) translateY(0); /* Center the image - final position */
	width: auto; /* Maintain aspect ratio */
	height: auto; /* Maintain aspect ratio */
	max-width: 110%; /* Don't exceed container width */
	max-height: 110%; /* Don't take up more than half the height */
	opacity: 1;
	z-index: 10; /* Same layer as bus stop but below due to HTML order */
}

.horizontal01-road.float-in {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Float-out animation classes */
.horizontal01-city.float-out {
	opacity: 0;
	transform: translateX(-50%) translateY(40px);
}

.horizontal01-bus-stop.float-out {
	opacity: 0;
	transform: translateX(-50%) translateY(40px);
}

.horizontal01-road.float-out {
	opacity: 0;
	transform: translateX(-50%) translateY(30px);
}

/* HORIZONTAL01 BUS - GSAP ScrollTrigger Only */
.horizontal01-bus {
	position: absolute;
	bottom: 12%; /* Position on the road */
	width: 575px; /* Bus size */
	height: auto;
	z-index: 15; /* Above other elements */
	transform: translateX(-40%);
	/* All positioning and animations handled by GSAP ScrollTrigger */
}

/* HORIZONTAL02 BUS - Same styling as horizontal01 */
.horizontal02-bus {
	position: absolute;
	bottom: 12%; /* Position on the road */
	width: 575px; /* Bus size */
	height: auto;
	z-index: 15; /* Above other elements */
	transform: translateX(-50%);
	/* All positioning and animations handled by GSAP ScrollTrigger */
}

/* HORIZONTAL01 WORD "FOUR" SMOOTH VARIABLE FONT ANIMATION */
[data-id="Horizontal01"] .char-animate .word-four .char {
	font-variation-settings: 'wght' 400, 'ital' 0;
	font-weight: 400;
	font-style: normal;
	font-family: "Lora", serif;
	transition: opacity 0.3s ease, 
	            transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
	            font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            text-shadow 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-id="Horizontal01"] .char-animate .word-four .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1;
	font-weight: 700;
	font-style: italic;
	font-family: "Lora", serif;
	text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
	animation: smoothCharGlow 2.0s ease-out forwards;
}

/* Smooth variable font fallback styles for word-four */
[data-id="Horizontal01"] .word-four .char {
	font-family: "Lora", serif !important;
	font-variation-settings: 'wght' 400, 'ital' 0;
	transition: font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            text-shadow 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-id="Horizontal01"] .word-four .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1 !important;
	font-weight: 700 !important;
	font-style: italic !important;
	font-family: "Lora", serif !important;
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
}

/* Ensure smooth transitions for all word-four targeting */
[data-id="Horizontal01"] .text-animation .word-four .char,
[data-id="Horizontal01"] .char-animate .word-four .char {
	font-family: "Lora", serif !important;
	transition: opacity 0.3s ease, 
	            transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
	            font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            text-shadow 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-id="Horizontal01"] .text-animation .word-four .char.visible,
[data-id="Horizontal01"] .char-animate .word-four .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1 !important;
	font-weight: 700 !important;
	font-style: italic !important;
	font-family: "Lora", serif !important;
}

/* Clean, optimized rules for smooth word-four animation with Lora font */
[data-id="Horizontal01"] .word-four .char {
	font-family: "Lora", serif !important;
	font-variation-settings: 'wght' 400, 'ital' 0;
	transition: font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Smooth variable font transition for "four" word when visible */
[data-id="Horizontal01"] .word-four .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1 !important;
	font-weight: 700 !important;
	font-style: italic !important;
	font-family: "Lora", serif !important;
	text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* HORIZONTAL02 CLOUD ANIMATIONS */
.horizontal02-back-cloud {
	position: absolute;
	top: 0%; /* Moved higher from 40% */
	right: 40%; /* Moved more to the left from 10% */
	width: 60%;
	height: 80%;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: 7; /* Background cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.horizontal02-back-cloud.fade-in {
	animation: floatInCloudsBack 1.5s ease-out forwards, parallaxCloudsBack 25s ease-in-out infinite 1.5s;
}

.horizontal02-front-cloud {
	position: absolute;
	top: -15%; /* Moved down from -50% to be more visible */
	right: -15%; /* Brought back from -60% to be visible but still left-positioned */
	width: 60%;
	height: 80%;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: 9; /* Front cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	mix-blend-mode: multiply;
}

.horizontal02-front-cloud.fade-in {
	animation: floatInCloudsFront 1.5s ease-out forwards, parallaxCloudsFront 15s ease-in-out infinite 2s;
}

/* Float-out animation classes for Horizontal02 clouds */
.horizontal02-back-cloud.float-out {
	animation: floatOutCloudsBack 1s ease-in forwards;
}

.horizontal02-front-cloud.float-out {
	animation: floatOutCloudsFront 1s ease-in forwards;
}

/* HORIZONTAL03 CLOUD ANIMATIONS */
.horizontal03-back-cloud {
	position: absolute;
	top: -10%; /* Different from Horizontal02 (0%) */
	right: 50%; /* Different positioning from Horizontal02 (40%) */
	width: 60%;
	height: 80%;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: 7; /* Background cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.horizontal03-back-cloud.fade-in {
	animation: floatInCloudsBack 1.5s ease-out forwards, parallaxCloudsBack 25s ease-in-out infinite 1.5s;
}

.horizontal03-front-cloud {
	position: absolute;
	top: -5%; /* Different from Horizontal02 (-15%) */
	right: -25%; /* Different positioning from Horizontal02 (-15%) */
	width: 60%;
	height: 80%;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: 9; /* Front cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.horizontal03-front-cloud.fade-in {
	animation: floatInCloudsFront 1.5s ease-out forwards, parallaxCloudsFront 15s ease-in-out infinite 2s;
}

.horizontal03-front-cloud-2 {
	position: absolute;
	top: 10%; /* Different positioning from the first front cloud */
	right: 30%; /* More to the right for variety */
	width: 60%;
	height: 80%;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: 8; /* Between back and front clouds */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.horizontal03-front-cloud-2.fade-in {
	animation: floatInCloudsFront 1.5s ease-out forwards, parallaxCloudsFront 20s ease-in-out infinite 2.5s;
}

/* Float-out animation classes for Horizontal03 clouds */
.horizontal03-back-cloud.float-out {
	animation: floatOutCloudsBack 1s ease-in forwards;
}

.horizontal03-front-cloud.float-out {
	animation: floatOutCloudsFront 1s ease-in forwards;
}

.horizontal03-front-cloud-2.float-out {
	animation: floatOutCloudsFront 1s ease-in forwards;
}

/* Playground for Horizontal03 */
.horizontal03-playground {
	position: absolute;
	bottom: 0; /* At the bottom of the page */
	left: 50%; /* Center horizontally */
	transform: translateX(-50%) translateY(40px); /* Center the image + initial offset */
	width: auto; /* Maintain aspect ratio */
	height: auto; /* Maintain aspect ratio */
	max-width: 100%; /* Don't exceed container width */
	max-height: 100%; /* Don't take up more than half the height */
	opacity: 0; /* Start hidden */
	z-index: 8; /* Middle layer - between clouds */
	will-change: transform;
	transition: transform 0.1s ease-out; /* Smooth scroll parallax */
}

.horizontal03-playground.float-in {
	animation: floatInPlayground 1.0s ease-out forwards, parallaxPlayground 20s ease-in-out infinite 1.0s;
}

.horizontal03-playground.float-out {
	animation: floatOutPlayground 1s ease-in forwards;
}

/* HORIZONTAL03 WORD COLOR AND STYLE ANIMATIONS */
/* "Experience" - Green styling with SMOOTH VARIABLE FONT BOLD ITALIC */
[data-id="Horizontal03"] .char-animate .word-experience .char {
	font-family: "Lora", serif !important;
	font-variation-settings: 'wght' 400, 'ital' 0;
	font-weight: 400 !important;
	font-style: normal !important;
	transition: opacity 0.3s ease, 
	            transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
	            font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            color 0.8s ease,
	            text-shadow 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-id="Horizontal03"] .char-animate .word-experience .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1 !important;
	font-weight: 700 !important;
	font-style: italic !important;
	font-family: "Lora", serif !important;
	text-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
	animation: smoothCharGlow 2.0s ease-out forwards;
}

/* Additional fallback rules for smooth "experience" animation */
[data-id="Horizontal03"] .word-experience .char {
	font-family: "Lora", serif !important;
	font-variation-settings: 'wght' 400, 'ital' 0;
	transition: font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-id="Horizontal03"] .word-experience .char.visible {
	font-variation-settings: 'wght' 700, 'ital' 1 !important;
	font-weight: 700 !important;
	font-style: italic !important;
	font-family: "Lora", serif !important;
	text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* "responses," - Blue styling */
[data-id="Horizontal03"] .char-animate .word-responses .char {
	transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-id="Horizontal03"] .char-animate .word-responses .char.visible {
	color: #3b82f6 !important;
	text-shadow: 0 0 12px rgba(59, 130, 246, 0.4) !important;
	transition: none !important; /* Instant color change */
}

/* "recognize" - Red styling */
[data-id="Horizontal03"] .char-animate .word-recognize .char {
	transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-id="Horizontal03"] .char-animate .word-recognize .char.visible {
	color: #ef4444 !important;
	text-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important;
	transition: none !important; /* Instant color change */
}

/* "triggers," - Red styling */
[data-id="Horizontal03"] .char-animate .word-triggers .char {
	transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-id="Horizontal03"] .char-animate .word-triggers .char.visible {
	color: #ef4444 !important;
	text-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important;
	transition: none !important; /* Instant color change */
}

/* Position word-triggers for radiating lines animation */
[data-id="Horizontal03"] .word-triggers {
	position: relative;
	overflow: visible !important;
}

/* Ensure parent containers don't clip the GIF */
[data-id="Horizontal03"] .text-animation,
[data-id="Horizontal03"] .char-animate {
	overflow: visible !important;
}

/* Hide shine GIF when leaving horizontal03 */
[data-id="Horizontal03"] .word-triggers.hide-blue-radiating-lines::after {
	opacity: 0;
}

/* "sensory" - Yellow styling */
[data-id="Horizontal03"] .char-animate .word-sensory .char {
	transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-id="Horizontal03"] .char-animate .word-sensory .char.visible {
	color: #eab308 !important;
	text-shadow: 0 0 12px rgba(234, 179, 8, 0.4) !important;
	transition: none !important; /* Instant color change */
}

/* "overload" - Yellow styling */
[data-id="Horizontal03"] .char-animate .word-overload .char {
	transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-id="Horizontal03"] .char-animate .word-overload .char.visible {
	color: #eab308 !important;
	text-shadow: 0 0 12px rgba(234, 179, 8, 0.4) !important;
	transition: none !important; /* Instant color change */
}

/* HORIZONTAL03 UNDERLINE ANIMATIONS */
/* Position word-responses for underline animation in horizontal03 */
[data-id="Horizontal03"] .word-responses {
	position: relative;
}

/* Red squiggly underline for "responses" in horizontal03 */
[data-id="Horizontal03"] .word-responses::after {
	content: '';
	position: absolute;
	left: -23px;
	bottom: -9px;
	width: calc(100% + 40px);
	height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='500' height='45' viewBox='0 0 500 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M80 25 Q110 20 140 25 Q170 30 200 25 Q230 20 260 25 Q290 30 320 25 Q350 20 380 25 Q395 28 420 25' stroke='%23FF6B6B' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M85 25 Q115 21 145 25 Q175 29 205 25 Q235 21 265 25 Q295 29 325 25 Q355 21 385 25 Q400 27 415 25' stroke='%23FF6B6B' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.7'/%3E%3Cpath d='M90 25 Q120 22 150 25 Q180 28 210 25 Q240 22 270 25 Q300 28 330 25 Q360 22 390 25 Q405 26 410 25' stroke='%23FF6B6B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none' opacity='0.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 center;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

/* Show underline when word becomes visible in horizontal03 */
[data-id="Horizontal03"] .word-responses.show-red-zigzag-underline::after {
	animation: drawRedSquigglyUnderline 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Hide underline when leaving horizontal03 */
[data-id="Horizontal03"] .word-responses.hide-red-zigzag-underline::after {
	animation: hideRedSquigglyUnderline 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Animation keyframes for horizontal03 squiggly underline */
@keyframes drawRedSquigglyUnderline {
	0% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translateX(-10px);
	}
	30% {
		opacity: 1;
		transform: translateX(-5px);
	}
	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateX(0);
	}
}

@keyframes hideRedSquigglyUnderline {
	0% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translateX(0);
	}
	70% {
		opacity: 1;
		transform: translateX(-5px);
	}
	100% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translateX(-10px);
	}
}

/* Trees for Horizontal04 */
.horizontal04-trees {
	position: absolute;
	bottom: 2%; /* Moved down from 5% to 2% */
	left: 49%; /* Center horizontally */
	transform: translateX(-50%) translateY(40px); /* Center the image + initial offset */
	width: auto; /* Maintain aspect ratio */
	height: auto; /* Maintain aspect ratio */
	max-width: 100%; /* Don't exceed container width */
	max-height: 100%; /* Don't take up more than half the height */
	opacity: 1; /* Fully visible */
	z-index: 1; /* Behind the text content */
	will-change: transform;
	transition: transform 0.1s ease-out; /* Smooth scroll parallax */
}

.horizontal04-trees.float-in {
	animation: floatInTrees 1.0s ease-out forwards, parallaxTrees 18s ease-in-out infinite 1.0s;
}

.horizontal04-trees.float-out {
	animation: floatOutTrees 1s ease-in forwards;
}

/* Animation for Horizontal04 Trees */
@keyframes floatInTrees {
	from {
		opacity: 0;
		transform: translateX(-50%) translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateX(0);
	}
}

/* HORIZONTAL04 CLOUD ANIMATIONS */
.horizontal04-back-cloud {
	position: absolute;
	top: 10%; /* Adjusted positioning */
	right: -05%; /* Better positioning for visibility */
	width: 60%;
	height: 80%;
	background-image: url('../assets/png/index/thirdHorizontalScroll/cloudBack.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: -1; /* Background cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	mix-blend-mode: multiply;
}

.horizontal04-back-cloud.fade-in {
	animation: floatInCloudsBack 1.5s ease-out forwards, parallaxCloudsBack 25s ease-in-out infinite 1.5s;
}

/* Float-in class for Horizontal04 back clouds with floating animation */
.horizontal04-back-cloud.float-in {
	animation: floatInCloudsBack 1.5s ease-out forwards, parallaxCloudsBack 25s ease-in-out infinite 1.5s;
}

.horizontal04-front-cloud {
	position: absolute;
	top: -10%; /* Adjusted positioning */
	right: 40%; /* Brought back from -35% for better visibility */
	width: 50%;
	height: 70%;
	background-image: url('../assets/png/index/thirdHorizontalScroll/cloudFront.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: right;
	opacity: 0;
	z-index: -2; /* Front cloud layer */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	mix-blend-mode: multiply;
}

.horizontal04-front-cloud.fade-in {
	animation: floatInCloudsFront 1.5s ease-out forwards, parallaxCloudsFront 15s ease-in-out infinite 2s;
}

/* Float-in class for Horizontal04 front clouds with floating animation */
.horizontal04-front-cloud.float-in {
	animation: floatInCloudsFront 1.5s ease-out forwards, parallaxCloudsFront 15s ease-in-out infinite 2s;
}

/* Float-out animation classes for Horizontal04 clouds */
.horizontal04-back-cloud.float-out {
	animation: floatOutCloudsBack 1s ease-in forwards;
}

.horizontal04-front-cloud.float-out {
	animation: floatOutCloudsFront 1s ease-in forwards;
}

/* Middle Trees and Front Houses for Horizontal02 */
.horizontal02-middle-trees {
	position: absolute;
	bottom: 0; /* At the bottom of the page */
	left: 50%; /* Center horizontally */
	transform: translateX(-50%) translateY(40px); /* Center the image + initial offset */
	width: auto; /* Maintain aspect ratio */
	height: auto; /* Maintain aspect ratio */
	max-width: 100%; /* Don't exceed container width */
	max-height: 100%; /* Don't take up more than half the height */
	opacity: 0; /* Start hidden */
	z-index: 8; /* Middle layer - between clouds and houses */
	will-change: transform;
	transition: transform 0.1s ease-out; /* Smooth scroll parallax */
}

.horizontal02-middle-trees.float-in {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.horizontal02-middle-trees.float-out {
	opacity: 0;
	transform: translateX(-50%) translateY(40px);
}

.horizontal02-front-houses {
	position: absolute;
	bottom: 0; /* At the bottom of the page */
	left: 50%; /* Center horizontally */
	transform: translateX(-50%) translateY(30px); /* Center the image + initial offset */
	width: auto; /* Maintain aspect ratio */
	height: auto; /* Maintain aspect ratio */
	max-width: 100%; /* Don't exceed container width */
	max-height: 100%; /* Don't take up more than half the height */
	opacity: 0; /* Start hidden */
	z-index: 10; /* Front layer - above everything except text */
	will-change: transform;
	transition: transform 0.1s ease-out; /* Smooth scroll parallax */
}

.horizontal02-front-houses.float-in {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.horizontal02-front-houses.float-out {
	opacity: 0;
	transform: translateX(-50%) translateY(30px);
}

/* HORIZONTAL02 SPECIFIC STYLING - Dunn's Model of Sensory Processing Link and Animation */

/* Link styling - hand-drawn underline appears after styling */
[data-id="Horizontal02"] .dunns-link {
	text-decoration: none !important;
	border-bottom: none;
	color: inherit;
	cursor: pointer;
	position: relative;
}

[data-id="Horizontal02"] .dunns-link:hover {
	border-bottom: none !important;
}

/* Hand-drawn scribbled underline that appears after the text is styled */
[data-id="Horizontal02"] .dunns-link::after {
	content: '';
	position: absolute;
	left: -40px;
	bottom: -9px;
	width: calc(100% + 80px);
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg width='1100' height='45' viewBox='0 0 1100 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 25C25 22.8 45 26.1 68 23.9C92 21.7 118 27.3 145 24.8C172 22.3 198 28.1 225 25.6C252 23.1 278 27.9 305 25.4C332 22.9 358 26.7 385 24.2C412 21.7 438 25.5 465 23.8C492 22.1 518 26.6 545 24.9C572 23.4 598 27.2 625 25.8C652 24.1 678 26.9 705 25.5C732 23.8 758 27.1 785 25.4C812 23.7 838 26.5 865 24.8C892 22.1 918 25.9 945 23.2C972 20.5 998 24.3 1025 21.6C1052 18.9 1078 22.7 1095 20.5' stroke='%23000000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 center;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
}

/* Show underline when link has the show-underline class */
[data-id="Horizontal02"] .dunns-link.show-underline::after {
	opacity: 1 !important;
	animation: drawHandLineSimple 1.2s ease-out forwards;
}

/* Hide underline with reverse animation when scrolling away */
[data-id="Horizontal02"] .dunns-link.hide-underline::after {
	opacity: 1 !important;
	animation: drawHandLineReverse 0.8s ease-in forwards;
}

/* Animation keyframes for simple hand-drawn line effect */
@keyframes drawHandLineSimple {
	0% {
		clip-path: inset(0 100% 0 0);
		background-image: url("data:image/svg+xml,%3Csvg width='1100' height='45' viewBox='0 0 1100 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 25C25 22.8 45 26.1 68 23.9C92 21.7 118 27.3 145 24.8C172 22.3 198 28.1 225 25.6C252 23.1 278 27.9 305 25.4C332 22.9 358 26.7 385 24.2C412 21.7 438 25.5 465 23.8C492 22.1 518 26.6 545 24.9C572 23.4 598 27.2 625 25.8C652 24.1 678 26.9 705 25.5C732 23.8 758 27.1 785 25.4C812 23.7 838 26.5 865 24.8C892 22.1 918 25.9 945 23.2C972 20.5 998 24.3 1025 21.6C1052 18.9 1078 22.7 1095 20.5' stroke='%23000000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
	}
	100% {
		clip-path: inset(0 0 0 0);
		background-image: url("data:image/svg+xml,%3Csvg width='1100' height='45' viewBox='0 0 1100 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 25C25 22.8 45 26.1 68 23.9C92 21.7 118 27.3 145 24.8C172 22.3 198 28.1 225 25.6C252 23.1 278 27.9 305 25.4C332 22.9 358 26.7 385 24.2C412 21.7 438 25.5 465 23.8C492 22.1 518 26.6 545 24.9C572 23.4 598 27.2 625 25.8C652 24.1 678 26.9 705 25.5C732 23.8 758 27.1 785 25.4C812 23.7 838 26.5 865 24.8C892 22.1 918 25.9 945 23.2C972 20.5 998 24.3 1025 21.6C1052 18.9 1078 22.7 1095 20.5' stroke='%23000000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
	}
}

/* Wavy animation for underline on hover */
@keyframes wavyUnderline {
	0% { transform: translateY(0px) scaleX(1); }
	25% { transform: translateY(-2px) scaleX(1.02); }
	50% { transform: translateY(0px) scaleX(0.98); }
	75% { transform: translateY(2px) scaleX(1.02); }
	100% { transform: translateY(0px) scaleX(1); }
}

/* Reverse animation - line disappears from right to left */
@keyframes drawHandLineReverse {
	0% {
		clip-path: inset(0 0 0 0);
		background-image: url("data:image/svg+xml,%3Csvg width='1100' height='45' viewBox='0 0 1100 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 25C25 22.8 45 26.1 68 23.9C92 21.7 118 27.3 145 24.8C172 22.3 198 28.1 225 25.6C252 23.1 278 27.9 305 25.4C332 22.9 358 26.7 385 24.2C412 21.7 438 25.5 465 23.8C492 22.1 518 26.6 545 24.9C572 23.4 598 27.2 625 25.8C652 24.1 678 26.9 705 25.5C732 23.8 758 27.1 785 25.4C812 23.7 838 26.5 865 24.8C892 22.1 918 25.9 945 23.2C972 20.5 998 24.3 1025 21.6C1052 18.9 1078 22.7 1095 20.5' stroke='%23000000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
	}
	100% {
		clip-path: inset(0 100% 0 0);
		background-image: url("data:image/svg+xml,%3Csvg width='1100' height='45' viewBox='0 0 1100 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 25C25 22.8 45 26.1 68 23.9C92 21.7 118 27.3 145 24.8C172 22.3 198 28.1 225 25.6C252 23.1 278 27.9 305 25.4C332 22.9 358 26.7 385 24.2C412 21.7 438 25.5 465 23.8C492 22.1 518 26.6 545 24.9C572 23.4 598 27.2 625 25.8C652 24.1 678 26.9 705 25.5C732 23.8 758 27.1 785 25.4C812 23.7 838 26.5 865 24.8C892 22.1 918 25.9 945 23.2C972 20.5 998 24.3 1025 21.6C1052 18.9 1078 22.7 1095 20.5' stroke='%23000000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
	}
}

/* HORIZONTAL02 DUNN'S MODEL - SMOOTH VARIABLE FONT ANIMATION */
[data-id="Horizontal02"] .char-animate .dunns-link-text .char,
[data-id="Horizontal02"] .word-group-7 .char,
[data-id="Horizontal02"] .word-group-8 .char,
[data-id="Horizontal02"] .word-group-9 .char {
    font-family: 'Lora', serif !important;
    font-variation-settings: 'wght' 400, 'ital' 0;
    font-weight: 400 !important;
    font-style: normal !important;
    background: transparent;
    color: inherit;
    transition: opacity 0.3s ease,
                transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                font-variation-settings 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                text-shadow 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Smooth transition to bold italic when dunns-styled class is applied */
[data-id="Horizontal02"] .char-animate .dunns-link-text .char.dunns-styled,
[data-id="Horizontal02"] .word-group-7 .char.dunns-styled,
[data-id="Horizontal02"] .word-group-8 .char.dunns-styled,
[data-id="Horizontal02"] .word-group-9 .char.dunns-styled {
    font-variation-settings: 'wght' 700, 'ital' 1 !important;
    font-weight: 700 !important;
    font-style: italic !important;
    font-family: 'Lora', serif !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    animation: smoothCharGlow 2.0s ease-out forwards;
}

/* --- Lora font family loaded from Google Fonts --- */
/* Font weights and styles are handled via Google Fonts CDN */

/* Teddy Character Styling moved to character-container */

/* Moving red glow effect on hover - now handled by character-container:hover */

@keyframes smoothPulse {
    0% {
        filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.15)) drop-shadow(0 0 12px rgba(255, 0, 0, 0.08));
    }
    100% {
        filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.4)) drop-shadow(0 0 18px rgba(255, 0, 0, 0.25));
    }
}

/* Animation when handdrawn text gets scroll-in class */
.handdrawn-text.scroll-in ~ .teddy-character {
    opacity: 1;
    transform: scale(1);
}

/* Teddy container and character styling */
.teddy-container {
    position: absolute;
    bottom: 22%;
    right: 30%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Moving red glow effect on hover - restored for teddy-character */
.teddy-character {
    width: 80px;
    height: auto;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    cursor: pointer;
    filter: brightness(1);
    position: relative;
}

.teddy-character:hover {
    filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.15)) drop-shadow(0 0 12px rgba(255, 0, 0, 0.08));
    animation: smoothPulse 2.5s ease-in-out infinite alternate;
}

.character-name-label {
    font-family: 'Comico-Regular', sans-serif;
    font-size: 16px;
    color: #ff6666;
    text-align: center;
    pointer-events: none;
    letter-spacing: 0.5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    white-space: nowrap;
    z-index: -10;
    order: -1;
    margin-bottom: 15px;
    transform: translateY(10px) scale(0.8) rotate(-2deg);
    overflow: hidden;
    width: 0;
}

.teddy-container:hover .character-name-label {
    opacity: 1;
    visibility: visible;
    width: auto;
    transform: translateY(0) scale(1) rotate(0deg);
    animation: typewriterBounce 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.teddy-container:not(:hover) .character-name-label {
    animation: typewriter-reverse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform: translateY(5px) scale(0.9) rotate(1deg);
}

@keyframes typewriterBounce {
    0% {
        width: 0;
        transform: translateY(10px) scale(0.8) rotate(-2deg);
    }
    30% {
        width: 60%;
        transform: translateY(-1px) scale(1.02) rotate(0.5deg);
    }
    70% {
        width: 90%;
        transform: translateY(1px) scale(1.01) rotate(-0.5deg);
    }
    100% {
        width: 100%;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes typewriter-reverse {
    0% {
        width: 100%;
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    30% {
        width: 70%;
        transform: translateY(2px) scale(0.98) rotate(-0.5deg);
    }
    70% {
        width: 30%;
        transform: translateY(5px) scale(0.95) rotate(1deg);
    }
    100% {
        width: 0;
        opacity: 0;
        transform: translateY(10px) scale(0.8) rotate(2deg);
    }
}

/* Penny container and character styling */
.penny-container {
    position: absolute;
    bottom: 22%;
    right: 30%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.penny-character {
    width: 80px;
    height: auto;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    cursor: pointer;
    filter: brightness(1);
    position: relative;
}

.penny-character:hover {
    filter: drop-shadow(0 0 8px rgba(63, 80, 220, 0.4)) drop-shadow(0 0 16px rgba(63, 80, 220, 0.2)) drop-shadow(0 0 24px rgba(63, 80, 220, 0.1)) !important;
    animation: smoothPulse 2.5s ease-in-out infinite alternate;
}

.penny-container .character-name-label {
    color: #3F50DC !important;
}

.penny-container:hover .character-name-label {
    opacity: 1;
    visibility: visible;
    width: auto;
    transform: translateY(0) scale(1) rotate(0deg);
    animation: typewriterBounce 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.penny-container:not(:hover) .character-name-label {
    animation: typewriter-reverse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform: translateY(5px) scale(0.9) rotate(1deg);
}

/* Chip container and character styling */
.chip-container {
    position: absolute;
    bottom: 22%;
    right: 30%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chip-character {
    width: 90px;
    height: auto;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    cursor: pointer;
    filter: brightness(1);
    position: relative;
}

.chip-character:hover {
    filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.4)) drop-shadow(0 0 16px rgba(255, 204, 0, 0.2)) drop-shadow(0 0 24px rgba(255, 204, 0, 0.1)) !important;
    animation: smoothPulse 2.5s ease-in-out infinite alternate;
}

.chip-container .character-name-label {
    color: #ffcc00;
}

.chip-container:hover .character-name-label {
    opacity: 1;
    visibility: visible;
    width: auto;
    transform: translateY(0) scale(1) rotate(0deg);
    animation: typewriterBounce 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.chip-container:not(:hover) .character-name-label {
    animation: typewriter-reverse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform: translateY(5px) scale(0.9) rotate(1deg);
}

/* Bean container and character styling */
.bean-container {
    position: absolute;
    bottom: 22%;
    right: 30%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bean-character {
    width: 110px;
    height: auto;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    cursor: pointer;
    filter: brightness(1);
    position: relative;
}

.bean-character:hover {
    filter: drop-shadow(0 0 8px rgba(0, 255, 100, 0.4)) drop-shadow(0 0 16px rgba(0, 255, 100, 0.2)) drop-shadow(0 0 24px rgba(0, 255, 100, 0.1)) !important;
    animation: smoothPulse 2.5s ease-in-out infinite alternate;
}

.bean-container .character-name-label {
    color: #00cc66;
}

.bean-container:hover .character-name-label {
    opacity: 1;
    visibility: visible;
    width: auto;
    transform: translateY(0) scale(1) rotate(0deg);
    animation: typewriterBounce 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bean-container:not(:hover) .character-name-label {
    animation: typewriter-reverse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform: translateY(5px) scale(0.9) rotate(1deg);
}

/* Character Modal Styles */
.character-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation-duration: 0.3s;
}

.character-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease-out;
}

.modal-content {
    background-color: white;
    border: 1.5px solid #171717;
    border-radius: 8px;
    padding: 20px;
    max-width: 700px;
    width: 90%;
    position: relative;
    transform: scale(0);
    animation: modalScaleIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: 400;
    background: none;
    border: none;
    cursor: pointer;
    color: #171717;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #000000;
}

.modal-body h2 {
    font-family: 'Comico-Regular', sans-serif;
    font-size: 24px;
    color: #171717;
    margin-bottom: 15px;
    text-align: center;
}

.modal-body p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
	font-weight: 400;
    color: #666666;
    line-height: 1.5;
    text-align: center;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalScaleIn {
    0% {
        transform: scale(0) rotate(5deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes starPopIn {
    0% {
        opacity: 0;
        transform: scale(0) rotate(180deg);
    }
    70% {
        transform: scale(1.2) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Character Information Styles */
.character-info {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.character-image {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
}

.character-image img {
    width: 300px;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
	 border: 0px solid #171717;
    box-shadow: 
        1px 1px 0px #171717,
        -1px 1px 0px #171717,
        1px -1px 0px #171717;
}

.character-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
	padding: 4px;
}

.character-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 24px;
    color: #171717 !important;
    margin: 0;
    font-weight: normal;
	text-align: left !important;
    opacity: 0;
    transform: translateY(20px);
    animation: slideInFromBottom 0.6s ease-out 0.2s forwards;
}

.character-description {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    color: #171717 !important;
    line-height: 1.6;
	font-weight: 400;
    margin: 0;
    text-align: left !important;
    text-align: justify;
    opacity: 0;
    transform: translateY(20px);
    animation: slideInFromBottom 0.6s ease-out 0.4s forwards;
}

.character-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
	font-weight: 600;
	font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    animation: slideInFromBottom 0.6s ease-out 0.6s forwards;
}

/* Responsive grid for larger screens */
@media (min-width: 768px) {
    .modal-content {
        max-width: 900px;
    }
    
    .character-stats {
        grid-template-columns: 1fr 1fr;
    }
    
    .stat-box:nth-child(4),
    .stat-box:nth-child(5) {
        grid-column: auto;
    }
}

/* For very large screens, ensure optimal layout */
@media (min-width: 1200px) {
    .modal-content {
        max-width: 1000px;
    }
}

.stat-box {
    background-color: #f2f2f2;
    border-radius: 2px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #171717;
    position: relative;
    text-align: left;
}

.stat-box:nth-child(5) {
    grid-column: 1 / -1;
    max-width: calc(50% - 5px);
}

/* Reset 5th box for 3-column layout on larger screens */
@media (min-width: 768px) {
    .stat-box:nth-child(5) {
        grid-column: auto;
        max-width: none;
    }
}

.stat-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    color: #171717;
    font-weight: 400;
    text-align: left;
}

.stars {
    display: flex;
    gap: 2px;
}

.star {
    width: 16px;
    height: 16px;
    display: inline-block;
    opacity: 0;
    transform: scale(0) rotate(180deg);
    animation: starPopIn 0.4s ease-out forwards;
}

.star:nth-child(1) { animation-delay: 0.8s; }
.star:nth-child(2) { animation-delay: 0.9s; }
.star:nth-child(3) { animation-delay: 1.0s; }
.star:nth-child(4) { animation-delay: 1.1s; }
.star:nth-child(5) { animation-delay: 1.2s; }

/* Animation when handdrawn text gets scroll-in class */
.handdrawn-text.scroll-in ~ .penny-character {
    opacity: 1;
    transform: scale(1);
}

/* Animation when handdrawn text gets scroll-in class */
.handdrawn-text.scroll-in ~ .chip-character {
    opacity: 1;
    transform: scale(1);
}

/* Animation when handdrawn text gets scroll-in class */
.handdrawn-text.scroll-in ~ .bean-character {
    opacity: 1;
    transform: scale(1);
}

/* View All Patterns Button Styles */
.view-all-patterns-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}

.view-all-patterns-btn {
    color: #171717;
	background-color: transparent;
    border: none;
    padding: 6px 6px 10px 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: all 0.2s ease;
    text-decoration: none;
    outline: none;
    opacity: 0;
    transform: translateY(10px);
    animation: buttonSlideIn 0.6s ease-out 0.8s forwards;
    position: relative;
}

.view-all-patterns-btn::after {
    content: '';
    position: absolute;
    width: 0;
	height: 1.5px;
	bottom: 2px;
	left: 0;
	transform: none;
	background-color: #171717;
	transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
}

.view-all-patterns-btn:hover {
    transform: translateY(-2px);
}

.view-all-patterns-btn:hover::after {
	width: 100%;
}

.view-all-patterns-btn:active {
    transform: translateY(0px);
	box-shadow: none;
}

.view-all-patterns-btn:focus {
	outline: none;
}

/* Arrow styling */
.view-all-patterns-btn span {
    margin-left: 8px;
    transition: transform 0.2s ease;
    display: inline-block;
}

.view-all-patterns-btn:hover span {
    transform: translateX(2px);
}

/* Button slide-in animation */
@keyframes buttonSlideIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .view-all-patterns-btn {
        font-size: 12px;
        padding: 10px 16px;
        bottom: 15px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .view-all-patterns-btn {
        font-size: 11px;
        padding: 8px 12px;
        bottom: 10px;
        right: 10px;
    }
    
    .view-all-patterns-btn span {
        margin-left: 6px;
    }
}

/* Disclaimer Modal Styles */
.disclaimer-link {
    cursor: pointer;
    color: #171717;
}

.disclaimer-link:hover {
    opacity: 0.8;
}

#disclaimerModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    animation: modalFadeIn 0.3s ease-out forwards;
}

#disclaimerModal.show {
    display: flex;
}

#disclaimerModal.hide {
    animation: modalFadeOut 0.3s ease-out forwards;
}

.disclaimer-modal-content {
    background-color: white;
    border: 3px solid #171717;
    border-radius: 2px;
    padding: 20px;
    max-width: 700px;
    width: 90%;
    position: relative;
    transform: scale(0);
    animation: modalScaleIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.disclaimer-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #171717;
    margin: 0 0 20px 0;
    text-align: center;
}

.disclaimer-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #171717;
}

.disclaimer-text p {
    margin: 0 0 16px 0;
    text-align: justify;
}

.disclaimer-text p:last-child {
    margin-bottom: 0;
}

/* LEVELS PAGE CLOUD STYLING */
.levels-cloud-back {
    opacity: 0;
    z-index: 100;
    position: absolute;
    top: 10%;
    right: -15%;
    width: 750px;
    height: 550px;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    animation: fadeInCloud 1.5s ease-out 0.5s forwards, subtleFloatBack 25s ease-in-out infinite 2s;
}

.levels-cloud-back-flipped {
    opacity: 0;
    z-index: 100;
    position: absolute;
    top: 8%;
    left: 4%;
    width: 700px;
    height: 520px;
    transform: translate3d(0, 0, 0) scaleX(-1);
    will-change: transform, opacity;
    animation: fadeInCloud 1.5s ease-out 0.5s forwards, subtleFloatBackFlipped 28s ease-in-out infinite 2s;
}

.levels-cloud-front {
    opacity: 0;
    z-index: 101;
    position: absolute;
    top: 6%;
    right: 50%;
    width: 700px;
    height: 500px;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    animation: fadeInCloud 1.5s ease-out 0.5s forwards, subtleFloatFront 20s ease-in-out infinite 2s;
}

.levels-cloud-front-2 {
    opacity: 0;
    z-index: 102;
    position: absolute;
    top: -5%;
    right: 10%;
    width: 720px;
    height: 530px;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    animation: fadeInCloud 1.5s ease-out 0.5s forwards, subtleFloatFront2 30s ease-in-out infinite 2s;
}

/* LEVELS PAGE BUS ANIMATION */
.levelsbus {
    position: fixed;
    bottom: 15%;
    width: 575px;
    height: auto;
    z-index: 1000;
    opacity: 0;
    display: block;
}

@keyframes busEntrance {
    /* Bus enters from left to center */
    0% {
        transform: translateX(-600px) !important;
    }
    100% {
        transform: translateX(-50%) !important;
    }
}

/* Keyframes for subtle floating animations */
@keyframes subtleFloatBack {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    25% {
        transform: translate3d(-10px, -8px, 0) scale(1.02);
    }
    50% {
        transform: translate3d(5px, -15px, 0) scale(0.98);
    }
    75% {
        transform: translate3d(8px, -5px, 0) scale(1.01);
    }
}

@keyframes subtleFloatBackFlipped {
    0%, 100% {
        transform: translate3d(0, 0, 0) scaleX(-1) scale(1);
    }
    30% {
        transform: translate3d(12px, -10px, 0) scaleX(-1) scale(0.99);
    }
    60% {
        transform: translate3d(-8px, -18px, 0) scaleX(-1) scale(1.01);
    }
    85% {
        transform: translate3d(6px, -6px, 0) scaleX(-1) scale(0.97);
    }
}

@keyframes subtleFloatFront {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    20% {
        transform: translate3d(8px, -12px, 0) scale(1.01);
    }
    40% {
        transform: translate3d(-6px, -8px, 0) scale(0.99);
    }
    60% {
        transform: translate3d(12px, -18px, 0) scale(1.02);
    }
    80% {
        transform: translate3d(-4px, -10px, 0) scale(0.98);
    }
}

@keyframes subtleFloatFront2 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    15% {
        transform: translate3d(-12px, -6px, 0) scale(0.99);
    }
    35% {
        transform: translate3d(6px, -14px, 0) scale(1.01);
    }
    55% {
        transform: translate3d(-8px, -20px, 0) scale(0.97);
    }
    75% {
        transform: translate3d(10px, -8px, 0) scale(1.03);
    }
}

/* Cloud fade-in animations */
@keyframes fadeInCloudBack {
    from {
        opacity: 0;
        transform: translate3d(-20px, 15px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInCloudBackFlipped {
    from {
        opacity: 0;
        transform: translate3d(20px, 12px, 0) scaleX(-1);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scaleX(-1);
    }
}

@keyframes fadeInCloudFront {
    from {
        opacity: 0;
        transform: translate3d(15px, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInCloudFront2 {
    from {
        opacity: 0;
        transform: translate3d(-15px, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Simple fade-in animation for all clouds */
@keyframes fadeInCloud {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Student selection notification - menu button style */
#studentSelectionNotification:hover .notification-underline {
    width: 100%;
}

#studentSelectionNotification {
    position: relative;
}

/* Page title styling for bottom left positioning with slide-up animation */
.page-title-bottom-right {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 10;
    pointer-events: none;
}

/* Page title styling for top center positioning */
.page-title-center {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    text-align: center;
    width: 100%;
}

/* Description text styling for top center positioning */
.page-title-center-desc {
    position: absolute;
    top: 19%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    text-align: center;
    width: 100%;
    max-width: 800px;
}

.page-title-center-desc .description {
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    display: flex;
    flex-direction: column;
}

.page-title-center-desc > div {
    overflow: hidden;
}

.page-title-center-desc > div > p {
    margin: 0 auto;
    line-height: 1.5;
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    text-align: center;
    width: max-content;
}

.page-title-center-desc > div:nth-child(2) > p {
    animation-delay: 0.025s;
}

.heading {
    font-size: 6rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 300;
    color: #000000;
    width: max-content;
    display: flex;
    flex-direction: column;
}

.heading > div {
    overflow: hidden;
}

.heading > div > p {
    width: max-content;
    white-space: nowrap;
    margin: 0;
    line-height: 1.15;
}

.heading > div:nth-child(2) > p {
    animation-delay: 0.025s;
}

.slide-up {
    animation: slide-up 0.85s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes slide-up {
    0% {
        transform: translateY(100px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Description text styling for bottom right positioning */
.description-bottom-right {
    position: absolute;
    bottom: 30px;
    right: 30px;
    max-width: 400px;
    z-index: 10;
    pointer-events: none;
}

.description-bottom-right.heading {
    font-size: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    color: #000000;
}

.description-bottom-right.heading > div > p {
    line-height: 1.4;
}

/* Animation delays for description text lines */
.description-bottom-right > div:nth-child(2) > p {
    animation-delay: 0.025s;
}
.description-bottom-right > div:nth-child(3) > p {
    animation-delay: 0.05s;
}
.description-bottom-right > div:nth-child(4) > p {
    animation-delay: 0.075s;
}
.description-bottom-right > div:nth-child(5) > p {
    animation-delay: 0.1s;
}
.description-bottom-right > div:nth-child(6) > p {
    animation-delay: 0.125s;
}
.description-bottom-right > div:nth-child(7) > p {
    animation-delay: 0.15s;
}

/* Allow scrolling for classroom materials page but hide scrollbar */
.classroom-materials-page {
    overflow-y: auto !important;
    overflow-x: hidden;
    /* Hide scrollbar for webkit browsers */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for webkit browsers */
.classroom-materials-page::-webkit-scrollbar {
    display: none;
}

/* Also hide scrollbar on body and html for this page */
body.classroom-materials-page {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body.classroom-materials-page::-webkit-scrollbar {
    display: none;
}

html.classroom-materials-page {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html.classroom-materials-page::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar on container element */
.container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.container::-webkit-scrollbar {
    display: none;
}

/* Universal scrollbar hiding for this page */
* {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

*::-webkit-scrollbar {
    display: none !important;
}

/* Force hide scrollbar on html and body */
html, body {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none !important;
}

/* Stacking Cards CSS */
.container {
  position: relative;
  width: 100%;
  height: 150vh;
  background-image: linear-gradient(rgba(200, 200, 200, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 200, 200, 0.3) 1px, transparent 1px);
  background-size: 20px 20px;
  background-attachment: local;
}

.slider {
  position: absolute;
  top: 50vh;
  width: 100vw;
  height: 100vh;
  perspective: 300px;
  perspective-origin: 50% 50%;
}

.card {
  position: absolute;
  top: 35%;
  left: 50%;
  width: calc(100% - 40px);
  height: 400px;
  transform: translate3d(-50%, -50%, 0);
  background-color: #F6F6FF;
  border: 1px solid #171717;
  border-radius: 8px 8px 8px 8px;
  overflow: visible;
  max-width: 75vw;
  cursor: pointer;
}

/* Folder tab styling */
.folder-tab {
  position: absolute;
  top: -32px;
  left: 50px;
  background-color: #F6F6FF;
  border: 1px solid #171717;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #171717;
  z-index: 5;
  width: 200px; /* Fixed width to accommodate longest text without wrapping */
  text-align: center; /* Center the text within the tab */
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide any overflow */
}

.folder-content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #F6F6FF;
  border-radius: 8px 8px 8px 8px;
  overflow: hidden;
}

/* Individual card and folder tab colors - based on data attributes, not position */
/* Calming Charts - Blue */
.card[data-card-type="calming-charts"] .folder-tab {
  background-color: #3F50DC;
  color: #FFFFFF;
}
.card[data-card-type="calming-charts"] .folder-content {
  background-color: #3F50DC;
}

/* Communication Cards - Green */
.card[data-card-type="communication-cards"] .folder-tab {
  background-color: #5BD28B;
  color: #171717;
}
.card[data-card-type="communication-cards"] .folder-content {
  background-color: #5BD28B;
}

/* Awareness Posters - Red */
.card[data-card-type="awareness-posters"] .folder-tab {
  background-color: #FF6576;
  color: #171717;
}
.card[data-card-type="awareness-posters"] .folder-content {
  background-color: #FF6576;
}

/* Language Guide - Yellow */
.card[data-card-type="language-guide"] .folder-tab {
  background-color: #FFD02E;
  color: #171717;
}
.card[data-card-type="language-guide"] .folder-content {
  background-color: #FFD02E;
}

/* Experience Reference - Keep default */
.card[data-card-type="experience-reference"] .folder-tab {
  background-color: #F6F6FF;
  color: #171717;
}
.card[data-card-type="experience-reference"] .folder-content {
  background-color: #F6F6FF;
}

@media(max-width: 500px) {
  .slider {
    top: 27vh;
  }
  .card {
    height: 300px;
  }
  .folder-tab {
    font-size: 0.8rem;
    padding: 6px 15px;
    width: 180px; /* Fixed width for mobile to accommodate longest text */
    text-align: center;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide any overflow */
  }
}

.copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

/* Card inner layout */
.card-inner {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 24px;
  padding: 24px 48px 24px 24px;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

/* Ensure folder tabs always remain visible */
.folder-tab {
  visibility: visible !important;
  opacity: 1 !important;
}

.card-image {
  flex: 0 0 33.333%;
  width: 33.333%;
  display: flex;
  align-items: stretch;
  border: 1px solid #000000;
  border-radius: 8px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: auto;
}

.card-text {
  flex: 0 0 66.667%;
  width: 66.667%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 0;
  border-radius: 8px;
  box-sizing: border-box;
}

.card-text h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 400;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #000000 !important;
  padding: 24px 24px 0 24px;
}

.card-text p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  color: #000000 !important;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 0 24px;
}

.download-btn {
  background: transparent;
  color: #000000 !important;
  border: none;
  padding: 0 24px 24px 24px;
  font-size: 0.8rem;
  font-weight: 400;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: none;
  transition: all 0.3s ease;
  width: fit-content;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.download-btn::after {
  content: '';
  position: absolute;
  bottom: 18px;
  left: 24px;
  width: 0;
  height: 1px;
  background-color: #000000;
  transition: width 0.3s ease;
}

.download-btn:hover::after {
  width: calc(100% - 48px);
}

.arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.download-btn:hover .arrow {
  animation: arrowBounce 0.6s ease-in-out;
}

/* White underline for calming-charts, dark underline for awareness-posters */
.card[data-card-type="calming-charts"] .download-btn::after {
  background-color: white !important;
}

.card[data-card-type="awareness-posters"] .download-btn::after {
  background-color: #171717 !important;
}

.card[data-card-type="calming-charts"]:hover,
.card[data-card-type="awareness-posters"]:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style="transform: scaleX(-1);"><image href="assets/svg/blueCursor.svg" width="32" height="32"/></svg>'), auto;
}

.card[data-card-type="calming-charts"] .download-btn:hover,
.card[data-card-type="awareness-posters"] .download-btn:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style="transform: scaleX(-1);"><image href="assets/svg/blueCursor.svg" width="32" height="32"/></svg>'), auto;
}

@keyframes arrowBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.copy h1 {
  position: relative;
  text-align: center;
  font-size: 4vw;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #171717;
  margin: 0;
}

.copy h1 span {
  position: relative;
  display: inline-block;
}

/* Footer Styles */
.page-footer {
  background-color: #171717;
  /* School book cover texture */
  background-image: 
    /* Subtle paper texture */
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.008) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.008) 1px, transparent 1px),
    radial-gradient(circle at 40% 40%, rgba(255,255,255,0.004) 1px, transparent 1px),
    /* Fabric-like texture */
    linear-gradient(45deg, rgba(255,255,255,0.004) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.004) 25%, transparent 25%),
    /* Subtle grain */
    repeating-linear-gradient(0deg, rgba(255,255,255,0.002), rgba(255,255,255,0.002) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.002), rgba(255,255,255,0.002) 1px, transparent 1px, transparent 2px);
  background-size: 30px 30px, 25px 25px, 20px 20px, 8px 8px, 8px 8px, 3px 3px, 3px 3px;
  background-position: 0 0, 10px 10px, 5px 5px, 0 0, 4px 4px, 0 0, 1px 1px;
  color: #F6F6FF;
  padding: 60px 12px 40px 12px;
  margin-top: 0;
  border-top: none;
  border-radius: 24px 24px 0 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}

/* Footer content - no entrance animations */
.footer-left a, .footer-logo, .footer-left h3, .footer-left p, 
.footer-link, .footer-bottom {
  opacity: 1;
  transform: translateY(0);
}

.footer-left {
  flex: 1;
}

.footer-left a {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-left a:hover {
  opacity: 0.8;
}

.footer-logo {
  width: 150px;
  height: auto;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
  display: block;
}

.footer-left h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #F6F6FF;
}

.footer-left p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  color: #CCCCCC;
  max-width: 400px;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.footer-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: #F6F6FF;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

.footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #F6F6FF;
  transition: width 0.3s ease;
}

.footer-link:hover::after {
  width: 100%;
}

.footer-link:hover {
  color: #FFFFFF;
}

.footer-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
}

.footer-year {
  color: #CCCCCC;
  font-size: 14px;
}

.footer-author {
  color: #CCCCCC;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 14px;
}

.footer-author:hover {
  color: #F6F6FF;
}

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-right {
    align-items: center;
  }
  
  .footer-links {
    align-items: center;
  }
}

/* Disclaimer Overlay Styles - Matching index.html modal */
.disclaimer-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  animation: modalFadeIn 0.3s ease-out forwards;
}

.disclaimer-overlay.active {
  display: flex;
}

.disclaimer-overlay.hide {
  animation: modalFadeOut 0.3s ease-out forwards;
}

.disclaimer-content {
  background-color: white;
  border: 3px solid #171717;
  border-radius: 2px;
  padding: 20px;
  max-width: 700px;
  width: 90%;
  position: relative;
  transform: scale(0);
  animation: modalScaleIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.disclaimer-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
  color: #171717;
  line-height: 1;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.disclaimer-close:hover {
  color: #000000;
}

.disclaimer-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #171717;
  margin: 0 0 20px 0;
  text-align: center;
}

.disclaimer-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  color: #171717;
}

.disclaimer-text p {
  margin: 0 0 20px 0;
  text-align: justify;
}

.disclaimer-text p:last-child {
  margin-bottom: 0;
}

.disclaimer-close:hover {
  color: #666666;
}

.disclaimer-content h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 24px 0;
  color: #171717;
}

.disclaimer-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.6;
}

.disclaimer-text p {
  margin: 0 0 16px 0;
  font-size: 14px;
}

.disclaimer-text p:last-child {
  margin-bottom: 0;
}

.disclaimer-text strong {
  color: #171717;
  font-weight: 600;
}

/* Responsive Small Screen Overlay */
.small-screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #F6F6FF;
    background-image: 
        linear-gradient(rgba(200, 200, 200, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 200, 200, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
    background-attachment: local;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    padding: 20px;
    box-sizing: border-box;
}

.small-screen-overlay .loading-animation {
    width: 306px;
    height: auto;
    max-width: 306px;
    max-height: 245px;
    margin-bottom: 30px;
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    animation: logoFadeIn 1.2s ease-out 0.3s forwards;
}

.small-screen-overlay .message {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    color: #171717;
    text-align: center;
    line-height: 1.5;
    max-width: 400px;
    opacity: 0;
    transform: translateY(20px);
    animation: textFadeIn 1s ease-out 0.8s forwards;
}

/* Small screen overlay animations */
@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide all content when small screen overlay is active */
@media (max-width: 1199px) {
    .small-screen-overlay {
        display: flex !important;
    }
    
    /* Hide all other content */
    body > *:not(.small-screen-overlay) {
        display: none !important;
    }
    
    /* Ensure cursor is hidden on small screens */
    .cursor {
        display: none !important;
    }
    
    /* Hide and mute all audio elements on small screens */
    audio {
        display: none !important;
    }
}

/* Increase school building size slightly for 1920x1080 screens */
@media (min-width: 1906px) and (min-height: 912px) {
    .horizontal05-school-building {
        transform: translateX(-50%) translateY(27px) scale(3.4);
        width: 580px;
    }
}