/* Font Face Declarations */
@font-face {
	font-family: "Montserrat";
	src: url("../assets/fonts/montserrat/Montserrat-Regular.woff2")
		format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../assets/fonts/montserrat/Montserrat-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../assets/fonts/montserrat/Montserrat-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../assets/fonts/montserrat/Montserrat-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* Base styles */
* {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, sans-serif;
}

@layer utilities {
	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}
	.no-scrollbar {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
}

body {
	overflow-x: hidden;
	max-width: 100vw;
	background: #000;
	color: #fff;
}

/* Custom Container */
.container {
	max-width: 1440px;
	padding: 0 30px;
	margin: 0 auto;
}

@media screen and (max-width:768px) {
	.container{
		padding: 0 20px;
	}
}


.header__lang.opened {
	border-radius: 5px 5px 0 0 !important;
	transition-delay: 0s !important;
}

.header__lang.opened .header__lang--options {
	height: 75px !important;
}

/* Intro Image Fade Effect */

@media screen and (max-width: 1024px) {
	.intro-img-fade {
		-webkit-mask-image: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 1) 0%,
			rgba(0, 0, 0, 1) calc(100% - 100px),
			rgba(0, 0, 0, 0) 100%
		);
		mask-image: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 1) 0%,
			rgba(0, 0, 0, 1) calc(100% - 100px),
			rgba(0, 0, 0, 0) 100%
		);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* Once Section Spinner */
.once-spinner__orbit {
	animation: spin 30s linear infinite;
}

@keyframes spin {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.once-spinner__item {
	position: absolute;
	z-index: -2;
	/* Use flexbox to center the image regardless of load state */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Counter-rotate images to keep them upright */
.once-spinner__item img {
	animation: counter-spin 30s linear infinite;
	display: block;
	border-radius: 50%;
}

@media screen and (max-width: 640px) {
  .once-spinner__center{
    max-width: 250px;
  }
}


/* Set max widths for different positions */
/* Corner elements: top-right, bottom-right, bottom-left, top-left */
.once-spinner__item[data-position="top-right"] img,
.once-spinner__item[data-position="bottom-right"] img,
.once-spinner__item[data-position="bottom-left"] img,
.once-spinner__item[data-position="top-left"] img {
	max-width: 190px;
	height: auto;
	backdrop-filter: blur(8px);
}

@media screen and (max-width: 640px) {
	.once-spinner__item[data-position="top-right"] img,
	.once-spinner__item[data-position="bottom-right"] img,
	.once-spinner__item[data-position="bottom-left"] img,
	.once-spinner__item[data-position="top-left"] img {
		max-width: 120px;
	}
}

/* Side elements: top, right, bottom, left */
.once-spinner__item[data-position="top"] img,
.once-spinner__item[data-position="right"] img,
.once-spinner__item[data-position="bottom"] img,
.once-spinner__item[data-position="left"] img {
	max-width: 150px;
	height: auto;
	backdrop-filter: blur(8px);
}

@media screen and (max-width: 640px) {
	.once-spinner__item[data-position="top"] img,
	.once-spinner__item[data-position="right"] img,
	.once-spinner__item[data-position="bottom"] img,
	.once-spinner__item[data-position="left"] img {
		max-width: 93px;
	}
}

@keyframes counter-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}

/* Position items in a circle using top/left */
/* Using trigonometric positions for perfect circle (radius from center) */
.once-spinner__item[data-position="top"] {
	top: 10%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.once-spinner__item[data-position="top-right"] {
	top: 20%;
	left: 80%;
	transform: translate(-50%, -50%);
}

.once-spinner__item[data-position="right"] {
	top: 50%;
	left: 90%;
	transform: translate(-50%, -50%);
}

.once-spinner__item[data-position="bottom-right"] {
	top: 80%;
	left: 80%;
	transform: translate(-50%, -50%);
}

.once-spinner__item[data-position="bottom"] {
	top: 90%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.once-spinner__item[data-position="bottom-left"] {
	top: 80%;
	left: 20%;
	transform: translate(-50%, -50%);
}

.once-spinner__item[data-position="left"] {
	top: 50%;
	left: 10%;
	transform: translate(-50%, -50%);
}

.once-spinner__item[data-position="top-left"] {
	top: 20%;
	left: 20%;
	transform: translate(-50%, -50%);
}

/* Control Section Orbit */
.control-orbit {
	transform: translate(-50%, -50%);
}

.control-orbit__item {
	position: absolute;
}

.control-orbit__item img {
	display: block;
	transform: translate(-50%, -50%);
}

/* Position items in a circle */
.control-orbit__item[data-position="top"] {
	top: 0;
	left: 50%;
}

.control-orbit__item[data-position="top-right"] {
	top: 15%;
	left: 85%;
}

.control-orbit__item[data-position="right"] {
	top: 50%;
	left: 100%;
}

.control-orbit__item[data-position="bottom-right"] {
	top: 85%;
	left: 85%;
}

.control-orbit__item[data-position="bottom"] {
	top: 100%;
	left: 50%;
}

.control-orbit__item[data-position="bottom-left"] {
	top: 85%;
	left: 15%;
}

.control-orbit__item[data-position="left"] {
	top: 50%;
	left: 0;
}

.control-orbit__item[data-position="top-left"] {
	top: 15%;
	left: 15%;
}

/* Video Train Wave Animation - Impulse/Pulse Effect */
.video-wave {
	opacity: 0.3;
	transition: opacity 0.3s ease;
}

/* Wave 1 - Innermost, smallest (350px) */
.video-wave-1 {
	width: 350px;
	height: auto;
	transform: scale(1);
}

.video-train-card:hover .video-wave-1 {
	animation: pulseWave1 4s ease-in-out infinite;
	animation-delay: 1.3s;
}

/* Wave 2 - Middle (470px) */
.video-wave-2 {
	width: 470px;
	height: auto;
	transform: scale(1);
}

.video-train-card:hover .video-wave-2 {
	animation: pulseWave2 4s ease-in-out infinite;
	animation-delay: 0.65s;
}

/* Wave 3 - Outermost, largest (560px) */
.video-wave-3 {
	width: 560px;
	height: auto;
	transform: scale(1);
}

@media screen and (max-width:640px) {
	.video-wave-3{
		max-width: 100%;
	}

	.video-wave-2{
		max-width: 80%;
	}

	.video-wave-1{
		max-width: 60%;
	}

	.pro-balance-wave-3{
		max-width: 60% !important;
	}
	.pro-balance-wave-2{
		max-width: 40% !important;
	}
	.pro-balance-wave-1{
		max-width: 20% !important;
	}
}

.video-train-card:hover .video-wave-3 {
	animation: pulseWave3 4s ease-in-out infinite;
}

/* Wave 1 Animation - smallest scale range */
@keyframes pulseWave1 {
	0% {
		transform: scale(0.9);
		opacity: 0;
	}
	15% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.5;
	}
	85% {
		opacity: 0.3;
	}
	100% {
		transform: scale(1.1);
		opacity: 0;
	}
}

/* Wave 2 Animation - medium scale range */
@keyframes pulseWave2 {
	0% {
		transform: scale(0.85);
		opacity: 0;
	}
	15% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.5;
	}
	85% {
		opacity: 0.3;
	}
	100% {
		transform: scale(1.15);
		opacity: 0;
	}
}

/* Wave 3 Animation - largest scale range */
@keyframes pulseWave3 {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	15% {
		opacity: 0.4;
	}
	50% {
		opacity: 0.5;
	}
	85% {
		opacity: 0.3;
	}
	100% {
		transform: scale(1.2);
		opacity: 0;
	}
}

/* Intersection Observer Animation Classes */
/* Hide elements by default */
[data-animate] {
	opacity: 0;
	transition: opacity 1s ease, transform 1s ease;
}

/* Hide elements that will be animated by JS */
.video-train-card,
.once-section-property,
.partners-section .grid > div,
.watch-section .flex img[src*="device"] {
	opacity: 0;
}

/* Fade in animation */
.animate-fade-in {
	animation: fadeIn 1.2s ease forwards;
}

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

/* Fade up animation */
.animate-fade-up {
	animation: fadeUp 1s ease forwards;
}

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

/* Fade down animation */
.animate-fade-down {
	animation: fadeDown 1s ease forwards;
}

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

/* Fade left animation */
.animate-fade-left {
	animation: fadeLeft 1s ease forwards;
}

@keyframes fadeLeft {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Fade right animation */
.animate-fade-right {
	animation: fadeRight 1s ease forwards;
}

@keyframes fadeRight {
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Scale up animation */
.animate-scale-up {
	animation: scaleUp 1s ease forwards;
}

@keyframes scaleUp {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Zoom in animation */
.animate-zoom-in {
	animation: zoomIn 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.5) rotate(-5deg);
	}
	to {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

/* Flip in animation */
.animate-flip-in {
	animation: flipIn 1s ease forwards;
	transform-style: preserve-3d;
}

@keyframes flipIn {
	from {
		opacity: 0;
		transform: perspective(1000px) rotateY(90deg);
	}
	to {
		opacity: 1;
		transform: perspective(1000px) rotateY(0deg);
	}
}

/* Slide rotate animation */
.animate-slide-rotate {
	animation: slideRotate 1s ease forwards;
}

@keyframes slideRotate {
	from {
		opacity: 0;
		transform: translateX(-100px) rotate(-10deg);
	}
	to {
		opacity: 1;
		transform: translateX(0) rotate(0deg);
	}
}

/* Blur in animation */
.animate-blur-in {
	animation: blurIn 1s ease forwards;
}

@keyframes blurIn {
	from {
		opacity: 0;
		filter: blur(20px);
		transform: scale(1.1);
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}

/* Glow in animation */
.animate-glow-in {
	animation: glowIn 1.5s ease forwards;
}

@keyframes glowIn {
	from {
		opacity: 0;
		filter: brightness(0.5);
		text-shadow: 0 0 0 rgba(0, 219, 89, 0);
	}
	to {
		opacity: 1;
		filter: brightness(1);
		text-shadow: 0 0 30px rgba(0, 219, 89, 0.3);
	}
}

/* Stagger child animations */
.animate-stagger {
	opacity: 1 !important;
}

.animate-stagger > * {
	opacity: 0;
	transform: translateY(20px);
}

.animate-stagger.is-visible > * {
	animation: staggerItem 0.6s ease forwards;
}

.animate-stagger.is-visible > *:nth-child(1) {
	animation-delay: 0.1s;
}
.animate-stagger.is-visible > *:nth-child(2) {
	animation-delay: 0.2s;
}
.animate-stagger.is-visible > *:nth-child(3) {
	animation-delay: 0.3s;
}
.animate-stagger.is-visible > *:nth-child(4) {
	animation-delay: 0.4s;
}
.animate-stagger.is-visible > *:nth-child(5) {
	animation-delay: 0.5s;
}
.animate-stagger.is-visible > *:nth-child(6) {
	animation-delay: 0.6s;
}
.animate-stagger.is-visible > *:nth-child(7) {
	animation-delay: 0.7s;
}
.animate-stagger.is-visible > *:nth-child(8) {
	animation-delay: 0.8s;
}

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

/* Cards stagger animation */
.animate-cards-stagger {
	opacity: 1 !important;
}

.animate-cards-stagger > * {
	opacity: 0;
	transform: translateY(30px) scale(0.95);
}

.animate-cards-stagger.is-visible > * {
	animation: cardStagger 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-cards-stagger.is-visible > *:nth-child(1) {
	animation-delay: 0.1s;
}
.animate-cards-stagger.is-visible > *:nth-child(2) {
	animation-delay: 0.2s;
}
.animate-cards-stagger.is-visible > *:nth-child(3) {
	animation-delay: 0.3s;
}
.animate-cards-stagger.is-visible > *:nth-child(4) {
	animation-delay: 0.4s;
}

@keyframes cardStagger {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media screen and (max-width: 1024px) {
}