body {
	background-color: #161412;
	/* color: #CB2BF5; */
	font-family: "consolas", sans-serif;
	font-size: 22px;
	font-weight: 400;
	font-style: normal;
	margin: 0;
}

@media (width <= 768px){
	body {
		font-size: 16px
	}
}

a {
	color: #CB2BF5
}

p {
	line-height: 1.2;
}

button {
	border: none;
    background: none;
	cursor: pointer;
}

.purple {
	color: #CB2BF5
}

.max-w-80 {
	max-width: 85%;
}

.hero .hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.yi_logo {
	margin: 6rem 0 2rem
}

@media (width <= 768px){ 
	.yi_logo {
		margin: 2rem 0 2rem;
		max-width: 163px;
		height: auto;
	}
}

.yi_hero {
	margin-bottom: 2rem
}

.yi_hero-mob {
	display: none
}


@media (width <= 1024px){
	.yi_hero  {
		width: 100%; 
		height: auto;
	}
}

@media (width <= 768px){ 
	.yi_hero {
		display: none;
	}
}

@media (width <= 768px){ 
	.yi_hero-mob {
		display: block;
		max-width: 95%;
		height: auto;
		/* margin-left: 1rem; */
	}
}

@media (width <= 768px){
	.yi_cube {
		margin-top: 1rem;
		/* margin-left: 1.5rem; */
		width: 100%; 
		height: auto;
	}	
}

@media (width <= 420px){
	.yi_cta {
		margin-top: 2rem
	}	
}

.featured {
	height: 100vh;
	margin: 6rem 0 0;	
    position: relative;
    width: 100%;
    overflow: hidden; /* CRITICAL: This hides the GIFs as they exit the screen */
    max-height: 970px;
	min-height: 970px; /* Adjust to fit your content */
}

@media (width <= 768px){
	.featured {
		min-height: auto
	}
}

.featured .feaured-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	max-width: 615px;
	width: 100%;
	height: 100%;
}

@media (width <= 768px){
	.featured {
		height: 700px;
		padding-bottom: 4rem;
	}
	.featured .feaured-list {
		max-width: 270px;
	}
}

.featured .feaured-list .feaured-list--item {
	position: relative
}

.featured .feaured-list .feaured-list--item-01 {
	margin-top: 2rem
}

@media (width <= 768px){
	.featured .feaured-list .feaured-list--item-01 {
		margin-top: 0
	}
}


/* This is the "anchor" that keeps GIFs relative to your text, not the window */
.featured-content-wrapper {
    position: relative;
    max-width: 1200px; /* Match this to your design's main width */
    margin: 0 auto;
    height: 100%;
}

.featured-animation {
    position: absolute;
    top: 180px; /* Adjust vertical start position */
    width: 200px;
    z-index: 1;
}

@media (width <= 1024px){
	.featured-animation {
		display: none
	}
}

.featured-animation--left {
    /* Positioned relative to the 1200px wrapper, not the window */
    right: 90%; 
    margin-right: 20px; /* Gap between GIFs and center text */
}

.featured-animation--right {
    /* Positioned relative to the 1200px wrapper, not the window */
    left: 90%;
    margin-left: 20px; 
}

.featured-animation_container {
    display: flex;
    flex-direction: column;
}

.featured-animation_container img {
    margin-bottom: 3rem;
    display: block;
}

.yi_background--space {
	position: absolute;
	z-index: -1;
	height: 100vh;
	width: 100%;
	object-fit: cover;
	object-position: top;
}

@media (width <= 768px){
	.yi_background--space {
		object-position: center;
	}
}

.yi_border--lg {
	max-width: 858px;
	padding: 1rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

@media (width <= 1024px){
	.yi_border--lg {
		width: 95%
	}	
}

.yi_border--lg-mob {
	display: none;
}

@media (width <= 768px){
	.yi_border--lg {
		display: none
	}	
	.yi_border--lg-mob {
		display: block;
		padding: 1rem;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
}


.ico-chevron {
    display: inline-block;
    width: 9px;
    height: 13px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Data URI of your SVG */
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='13' viewBox='0 0 9 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.19238L1.16016 0L8.37891 6.02637L1.16016 12.0527L0 10.8711L5.85449 6.04785L0 1.19238Z' fill='black'/%3E%3C/svg%3E");
	position: absolute;
	left: -35px;
	top: 35px;
}

@media (width <= 768px){
	.ico-chevron {
		left: -20px;
		top: 20px;
	}
}


.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); 
    gap: 3rem; 
    padding: 40px;
	position: relative;
    max-width: 1120px;
    margin: 6rem auto 6rem;
}

@media (width <= 920px){ 
	.grid {
		grid-template-columns: repeat(1, 1fr); 
		gap: 1.25rem; 
		margin: 6rem auto 4rem;
	    padding: 0 1rem;
	}
}

.grid-item {
	background-image: url('./img/yi_border--sm.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: auto;
	padding: 2rem 2rem 1rem;
	position: relative;
}

@media (width <= 1200px){ 
	.grid-item {
		background-size: cover;
    	background-position: top right;
		margin: 0 auto;
		max-width: 384px;
		height: auto;
		width: 100%;
		padding: 1.5rem 2rem 1rem;
	}
}

@media (width <= 768px){ 
	.grid-item {
		/* height: 100%; */
		margin: 0 auto;
		max-width: 70%;
	}
}


.grid-item-heading {
	font-size: 25px;
	margin-bottom: .25rem;

	text-transform: uppercase;
}

@media (width <= 768px){ 
	.grid-item-heading {
		font-size: 16px;
		margin-top: .5rem;
	}
}

.grid-item-subheading {
	margin-top: 0;
}

.grid-item-joystick {
	position: absolute;
	left: -115px; 
	top: 5px;
}

@media (width <= 1024px){
	.grid-item-joystick {
		display: none
	}
}

.grid-item-desktop {
	position: absolute;
	right: -50px; 
	top: 55px;
}

@media (width <= 1024px){
	.grid-item-desktop {
		display: none
	}
}

.grid-item-coffee {
	position: absolute;
	left: -105px; 
	top: 95px;
}

@media (width <= 1024px){
	.grid-item-coffee {
		display: none
	}
}

.grid-item-free {
	position: absolute;
	right: -85px; 
	top: 145px;
}

@media (width <= 1024px){
	.grid-item-free {
		display: none
	}
}

.grid-item-free-mob {
	display: none
}

@media (width <= 1024px){
	.grid-item-free-mob {
        display: block;
        position: absolute;
        left: 50%;
        top: -145px;
        transform: translateX(-50%);
        width: 176px;
        height: 93px;
	}
}



.grid-item-books {
	position: absolute;
	right: -150px; 
	top: -205px;
}

@media (width <= 1024px){
	.grid-item-books {
		display: none
	}
}

.grid-item-books-mob {
	display: none
}

@media (width <= 768px){
	.grid-item-books-mob {
		display: block; 
		position: relative;
		margin: 0 auto;
	}
}

.cta {
	background: linear-gradient(90deg, #39144C 20%, #CD00FF 100%);
    background-color: #39144C;     
    min-height: 200px;
    width: 100%;
}

@media (width <= 768px){
	.cta {
		min-height: auto;
	}
}


.cta .cta_container {
	display: flex;
    justify-content: center;
}
.cta .cta_container .yi_cta {
	margin: 6rem 0;
	max-width: 243px;
	height: auto;
}

@media (width <= 768px){
	.cta .cta_container .yi_cta {
		margin: 4rem 0;
	}
}

.hero-btns .yi_cta {
	max-width: 243px;
	height: auto;
}


.yi_gif_arrow--left {
	margin: 1rem 5rem;
	transform: rotate(90deg)
}

.yi_gif_arrow--right {
	margin: 1rem 5rem;
	transform: rotate(-90deg)
}

@media (width <= 768px){
	.yi_gif_arrow--left,
	.yi_gif_arrow--right {
		display: none
	}
}

footer {
	margin: 3rem 0;
	text-align: center
}

@media (width <= 768px){
	footer {
		margin: 3rem auto;
		max-width: 200px;
	}
}

 .loading_desktop,
 .loading_mobile  {
	height: 100vh;
 }
 
 .loading_desktop {
	object-fit: cover;
 }

/* Hide mobile GIF by default */
.loading_mobile {
    display: none;
}

/* Hide desktop GIF and show mobile GIF at 768px and below */
@media (max-width: 768px) {
    .loading_desktop {
        display: none;
    }
    .loading_mobile {
        display: block;
    }
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* Ensure the header fills the screen */
    background: #000; /* Or whatever your background color is */
    z-index: 9999;
    overflow: hidden;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}



video {
    object-fit: cover; /* This ensures the video fills the screen like a background */
    width: 100%;
    height: 100%;
}

/* Ensure only one video shows at a time */
@media (max-width: 768px) {
    .loading_desktop { display: none; }
    .loading_mobile { display: block; }
}
@media (min-width: 769px) {
    .loading_desktop { display: block; }
    .loading_mobile { display: none; }
}