body { background-color: #050505; color: #f3f4f6; overflow-x: hidden; cursor: none; }

/* Custom Cursor Elements */
#cursor-dot, #cursor-circle { pointer-events: none; position: fixed; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.3s ease; z-index: 10000; }
#cursor-dot { width: 8px; height: 8px; background-color: white; }
#cursor-circle { width: 40px; height: 40px; border: 2px solid rgba(255,255,255,0.5); transition: width 0.2s, height 0.2s, border-color 0.2s; }
body:hover #cursor-dot, body:hover #cursor-circle { opacity: 1; }

/* Mouse trail canvas */
#trail-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* Glass & Gradients */
.glass-nav { background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.05); }

.site-logo {
	display: inline-flex;
	align-items: center;
	overflow: visible;
}
.site-logo-svg {
	width: auto;
	display: block;
	overflow: visible;
}
.site-logo .logo-play {
	fill: #fff;
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition: fill 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-logo:hover .logo-play,
.site-logo:focus-visible .logo-play {
	fill: #f59e0b;
	transform: rotate(-14deg);
}
.glass-card { background: rgba(30, 30, 30, 0.3); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden;}
.glass-card:hover { border-color: rgba(245, 158, 11, 0.5); background: rgba(30, 30, 30, 0.6); transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15); }

.text-gradient {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(135deg, #facc15, #f59e0b, #fb923c, #facc15);
	background-size: 200% auto;
	animation: textShine 4s linear infinite;
}
@keyframes textShine { to { background-position: 200% center; } }

.bg-gradient-cta { background-image: linear-gradient(135deg, #facc15, #f59e0b); background-size: 200% auto; transition: 0.5s; }
.bg-gradient-cta:hover { background-position: right center; box-shadow: 0 0 30px rgba(245, 158, 11, 0.6); }

.cta-photo-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.58);
	pointer-events: none;
}

/* Initial state for GSAP hero animations */
.gsap-reveal { opacity: 1; transform: translateY(40px); }
.gsap-ready #hero .gsap-reveal { opacity: 0; }

/* Scroll reveals — IntersectionObserver + CSS */
.gsap-ready main .gsap-reveal,
.gsap-ready .gsap-reveal-up,
.gsap-ready .gsap-reveal-solution,
.gsap-ready .gsap-reveal-left,
.gsap-ready .gsap-reveal-right {
	opacity: 0;
	transform: translate3d(0, 56px, 0);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gsap-ready .gsap-reveal-left { transform: translate3d(-40px, 0, 0); }
.gsap-ready .gsap-reveal-right { transform: translate3d(40px, 0, 0); }
.gsap-ready main .gsap-reveal.is-inview:not(.is-settled),
.gsap-ready .gsap-reveal-up.is-inview:not(.is-settled),
.gsap-ready .gsap-reveal-solution.is-inview:not(.is-settled),
.gsap-ready .gsap-reveal-left.is-inview:not(.is-settled),
.gsap-ready .gsap-reveal-right.is-inview:not(.is-settled) {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
.gsap-ready main .gsap-reveal.is-settled,
.gsap-ready .gsap-reveal-up.is-settled,
.gsap-ready .gsap-reveal-solution.is-settled,
.gsap-ready .gsap-reveal-left.is-settled,
.gsap-ready .gsap-reveal-right.is-settled {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.gsap-ready main .gsap-reveal,
	.gsap-ready .gsap-reveal-up,
	.gsap-ready .gsap-reveal-solution,
	.gsap-ready .gsap-reveal-left,
	.gsap-ready .gsap-reveal-right {
		opacity: 1;
		transform: none;
		transition: none;
	}
} 

/* Image Zooms — include opacity/filter so Tailwind transition-* utilities cannot drop the zoom easing */
.img-zoom {
	transition-property: transform, opacity, filter !important;
	transition-duration: 1.15s, 0.7s, 0.7s !important;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease, ease !important;
}
.group:hover .img-zoom { transform: scale(1.12) rotate(0.4deg); }

/* Falling items container */
#falling-items { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.falling-item { position: absolute; opacity: 0.7; pointer-events: none; }

/* Progress Bar at Top */
#scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 4px; background: linear-gradient(90deg, #facc15, #f59e0b, #fb923c); z-index: 1000; transition: width 0.1s linear; }

/* Shine effect for buttons */
.shine-effect { position: relative; overflow: hidden; }
.shine-effect::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); transform: skewX(-25deg); transition: 0.75s; }
.shine-effect:hover::before { left: 150%; }

/* Visual hierarchy & responsive refinements */
#hero-title {
	font-size: clamp(2.35rem, 4.8vw, 4.5rem);
	max-width: 18ch;
	text-wrap: balance;
}
@media (min-width: 1024px) {
	#hero-title { max-width: 16ch; }
}
@media (min-width: 1280px) {
	#hero-title { max-width: 18ch; }
}
@media (max-width: 639px) {
	#hero-title { font-size: clamp(2.1rem, 9.5vw, 3rem); max-width: 14ch; margin-left: auto; margin-right: auto; }
}
#hero-title.hero-title-long {
	max-width: 22ch;
}
@media (min-width: 1024px) {
	#hero-title.hero-title-long { max-width: 20ch; }
}
@media (min-width: 1280px) {
	#hero-title.hero-title-long { max-width: 22ch; }
}
@media (max-width: 639px) {
	#hero-title.hero-title-long { max-width: 18ch; }
}

.hero-secondary-btn {
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(250,204,21,0.75);
	box-shadow: 0 10px 30px rgba(250,204,21,0.14), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.hero-secondary-btn:hover {
	background: #fff;
	color: #050505;
	border-color: #fff;
	box-shadow: 0 14px 34px rgba(250,204,21,0.28);
}

.scroll-indicator {
	color: #fff;
	filter: drop-shadow(0 0 10px rgba(250,204,21,0.65));
	z-index: 30;
}
.scroll-indicator .scroll-mouse { border-color: rgba(250,204,21,0.95); background: rgba(5,5,5,0.55); }
.scroll-indicator .scroll-dot { background: #facc15; box-shadow: 0 0 12px rgba(250,204,21,0.95); }

/* Keep body copy white; use weight and opacity for hierarchy instead of grey shades */
main .text-gray-300,
main .text-gray-400,
main .text-gray-500,
main .text-gray-600 { color: #fff !important; }
main p.font-light,
main div.font-light { opacity: 0.82; }
main strong,
main .font-medium,
main .font-semibold,
main .font-bold,
main .font-black { opacity: 1; }

.solution-image {
	opacity: 0.62;
	filter: saturate(0.9) contrast(1.08) brightness(1.08);
	mix-blend-mode: normal;
	transition-property: transform, opacity, filter !important;
	transition-duration: 1.15s, 0.7s, 0.7s !important;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease, ease !important;
}
.group:hover .solution-image {
	opacity: 0.9;
	filter: saturate(1.12) contrast(1.05) brightness(1.12);
}
.solution-overlay {
	background: linear-gradient(to top, rgba(5,5,5,0.98) 0%, rgba(5,5,5,0.68) 43%, rgba(5,5,5,0.08) 100%);
}

.cadre-card {
	background: transparent;
	backdrop-filter: none;
}
.cadre-card:hover {
	background: transparent;
}
.cadre-mask {
	background: linear-gradient(to right, #121212 0%, rgba(18,18,18,0.94) 36%, rgba(18,18,18,0.4) 68%, rgba(18,18,18,0.06) 100%);
}

.hero-mask-ltr {
	background: linear-gradient(to right, #050505 0%, rgba(5,5,5,0.88) 38%, rgba(5,5,5,0.35) 72%, rgba(5,5,5,0.12) 100%);
}

.hero-slider {
	position: relative;
	width: 100%;
}
.hero-slider-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 4.15;
	perspective: 1800px;
	transform-style: preserve-3d;
}
.hero-slide {
	position: absolute;
	top: 7%;
	left: 50%;
	width: 64%;
	height: 86%;
	border-radius: 1.6rem;
	overflow: hidden;
	background: #0a0a0a;
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 18px 40px rgba(0,0,0,0.35);
	transform: translate3d(-50%, 0, -320px) scale(0.58);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	transform-origin: center center;
	will-change: transform, opacity, filter;
	transition:
		transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.55s ease,
		filter 0.95s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.95s ease;
}
.hero-slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(5,5,5,0.28);
	opacity: 1;
	pointer-events: none;
	transition: opacity 0.7s ease;
}
.hero-slide.is-far {
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}
.hero-slide.is-prev,
.hero-slide.is-next {
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
	filter: saturate(0.85);
	z-index: 3;
}
.hero-slide.is-prev {
	transform: translate3d(calc(-50% - 58%), 4%, -80px) scale(0.84) rotateY(8deg);
}
.hero-slide.is-next {
	transform: translate3d(calc(-50% + 58%), 4%, -80px) scale(0.84) rotateY(-8deg);
}
.hero-slide.is-active {
	transform: translate3d(-50%, 0, 60px) scale(1);
	opacity: 1;
	z-index: 5;
	pointer-events: auto;
	filter: none;
	border-color: rgba(250,204,21,0.28);
	box-shadow:
		0 28px 60px rgba(0,0,0,0.5),
		0 0 0 1px rgba(250,204,21,0.12);
}
.hero-slide.is-active::after {
	opacity: 0;
}
.hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.02);
	transition: transform 6.5s ease-out;
}
.hero-slide.is-active img {
	transform: scale(1.07);
}
.hero-slider-btn {
	position: absolute;
	top: 46%;
	z-index: 8;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	color: #fff;
	background: rgba(5,5,5,0.55);
	border: 1px solid rgba(255,255,255,0.18);
	backdrop-filter: blur(10px);
	transform: translateY(-50%);
	transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.hero-slider-btn:hover {
	background: rgba(250,204,21,0.9);
	color: #050505;
	border-color: #facc15;
}
.hero-slider-prev { left: 6%; }
.hero-slider-next { right: 6%; }
.hero-slider-dots {
	position: relative;
	z-index: 8;
	display: flex;
	justify-content: center;
	gap: 0.45rem;
	margin-top: 1.15rem;
}
.hero-slider-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: rgba(255,255,255,0.4);
	border: 0;
	transition: width 0.25s, background 0.25s;
}
.hero-slider-dot.is-active {
	width: 1.4rem;
	background: #facc15;
}
@media (min-width: 1024px) {
	.hero-slider-stage {
		aspect-ratio: 16 / 11;
	}
	.hero-slide {
		width: 66%;
		height: 90%;
		top: 3%;
		border-radius: 1.85rem;
	}
	.hero-slide.is-prev {
		transform: translate3d(calc(-50% - 56%), 3%, -90px) scale(0.82) rotateY(10deg);
	}
	.hero-slide.is-next {
		transform: translate3d(calc(-50% + 56%), 3%, -90px) scale(0.82) rotateY(-10deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero-slide,
	.hero-slide img {
		transition: none;
	}
	.hero-slide img,
	.hero-slide.is-active img {
		transform: none;
	}
	.hero-slide.is-prev {
		transform: translate3d(calc(-50% - 58%), 0, 0) scale(0.84);
	}
	.hero-slide.is-next {
		transform: translate3d(calc(-50% + 58%), 0, 0) scale(0.84);
	}
	.hero-slide.is-active {
		transform: translate3d(-50%, 0, 0) scale(1);
	}
}

/* FAQ accordion */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] {
	border-color: rgba(250, 204, 21, 0.35);
}
.faq-item[open] .faq-icon {
	transform: rotate(45deg);
	border-color: rgba(250, 204, 21, 0.5);
	background: rgba(250, 204, 21, 0.1);
}

/* Event games catalogue accordion */
.game-accordion {
	align-self: start;
}
.game-accordion summary::-webkit-details-marker,
.game-accordion summary::marker {
	display: none;
}
.glass-card.game-accordion:hover {
	transform: none;
}
.game-accordion[open] {
	border-color: rgba(250, 204, 21, 0.4);
}
.game-accordion-icon {
	transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.game-accordion[open] .game-accordion-icon {
	transform: rotate(180deg);
	border-color: rgba(250, 204, 21, 0.5);
	background: rgba(250, 204, 21, 0.1);
}

/* Contact form */
.form-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9ca3af;
	margin-bottom: 0.5rem;
}
.form-input {
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	padding: 0.875rem 1.125rem;
	color: #fff;
	font-size: 1rem;
	font-family: inherit;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
	outline: none;
}
.form-input::placeholder { color: rgba(156, 163, 175, 0.6); }
.form-input:focus {
	border-color: rgba(245, 158, 11, 0.55);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.form-input-error {
	border-color: rgba(239, 68, 68, 0.55);
}
.form-error {
	margin-top: 0.4rem;
	font-size: 0.85rem;
	color: #f87171;
	font-weight: 500;
}
.form-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.25rem;
	padding-right: 2.75rem;
}
.form-select option {
	background: #121212;
	color: #fff;
}
.form-textarea {
	resize: vertical;
	min-height: 110px;
}
.form-checkbox {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: #f59e0b;
	cursor: pointer;
	flex-shrink: 0;
}
input[type="date"].form-input {
	color-scheme: dark;
}

/* Navigation dropdowns */
.nav-dropdown-menu {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	min-width: 15.5rem;
	padding: 0.5rem;
	border-radius: 1rem;
	background: rgba(12, 12, 12, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav-dropdown:hover .nav-chevron,
.nav-dropdown:focus-within .nav-chevron {
	transform: rotate(180deg);
}
.nav-dropdown-item {
	display: block;
	padding: 0.65rem 0.9rem;
	border-radius: 0.7rem;
	color: #d1d5db;
	transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-item:hover,
.nav-dropdown-item.is-current {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}
.nav-dropdown-item.is-current {
	color: #facc15;
}

/* Mobile nav details marker */
#mobile-nav summary::-webkit-details-marker { display: none; }