@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Paytone+One&family=Ubuntu:wght@300;400;500;600&family=Poppins:wght@400;600;700;800;900&family=Righteous&display=swap');

:root {
	--orange: #ED3902;
	--orange-dark: #C22F02;
	--purple: #D1A9D7;
	--karakk-black: #171717;
	--yellow: #F5930B;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	width: 100%;
	min-height: 100vh;
	padding: 0;
	margin: 0;
	background: #000;
	color: #fff;
	overflow-x: hidden;
	font-family: sans-serif;
}

header.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	background: rgba(0,0,0,0.55);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 32px;
}

.site-logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 18px;
	text-decoration: none;
}

.site-logo img {
	height: 110px;
	width: auto;
	display: block;
	-webkit-user-drag: none;
}

.site-logo .karakk-logo {
	height: 68px;
}

.logo-divider {
	width: 1px;
	height: 52px;
	background: rgba(255,255,255,0.25);
	flex-shrink: 0;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 24px;
}

.site-nav a {
	color: #fff;
	font-family: "Ubuntu", system-ui, sans-serif;
	font-size: 23px;
	font-weight: 300;
	letter-spacing: 0.02em;
	opacity: 0.86;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.site-nav a:hover {
	opacity: 1;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 4px;
	width: 30px;
	height: 30px;
	position: relative;
	z-index: 60;
}

.nav-toggle span {
	width: 22px;
	height: 1.5px;
	background: #fff;
	display: block;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.card,
.content {
	overflow: hidden;
}

.hero-wrap {
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #000;
}

.card,
.container {
	display: flex;
	align-items: center;
}

.card {
	width: 1280px;
	height: 720px;
	margin: 0;
	justify-content: center;
}

.container-full,
.content {
	width: 1000px;
	height: 562px;
}

.backgroundImage {
	position: absolute;
	width: 1000px;
}

.boyImage {
	position: absolute;
	width: 1000px;
	z-index: 2;
	animation: 200s linear infinite kk-blur;
}

.content {
	border-radius: 40px;
	animation: 200s linear infinite kk-brightness;
}

.container {
	justify-content: center;
}

.container-full,
.face {
	display: flex;
	align-items: center;
	overflow: hidden;
}

.container-full {
	margin: 0;
	justify-content: center;
	transform: scale(1);
	animation: 200s linear infinite kk-zoom;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.container-full.dragging {
	cursor: grabbing;
}

.container-full img {
	-webkit-user-drag: none;
	pointer-events: none;
}

.cube,
.face {
	width: 870px;
	height: 190px;
}

.cube {
	position: relative;
	transform-style: preserve-3d;
	perspective: 480px;
	perspective-origin: 51% 70%;
}

.face,
.hue {
	position: absolute;
}

.face {
	background: transparent;
	border: 0;
	opacity: 0.92;
}

.bottom,
.top {
	width: 870px;
	height: 870px;
}

p {
	white-space: nowrap;
	overflow: hidden;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-size: calc(6em + (190px / 10) * 0.7);
	padding-top: 20px;
	color: #fff;
}

span {
	color: red;
}

.front { transform: translateZ(435px); display: none; }
.back  { transform: translateZ(-435px) rotateY(180deg) scaleX(-1); }
.left  { transform: translateX(-435px) rotateY(-90deg) scaleX(-1); }
.right { transform: translateX(435px) rotateY(90deg) scaleX(-1); }
.top   { transform: translateY(-435px) rotateX(90deg) scaleY(-1); }
.bottom{ transform: translateY(-245px) rotateX(-90deg) scaleY(-1); }

.left p  { margin-left: 480px; }
.back p  { margin-left: -390px; }
.right p { margin-left: -1260px; }

.hue {
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	mix-blend-mode: overlay;
	background: radial-gradient(ellipse at center, #1e5799 0, #7db9e8 100%);
	opacity: 1;
}

.hue.animated {
	animation: 8s infinite kk-hue;
}

.container-reflect {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 380px;
	filter: blur(10px);
}

.container-reflect .cube { perspective-origin: 51% -30%; }
.container-reflect .back  { transform: translateZ(-435px) rotateY(180deg) scaleX(-1) scaleY(-1); }
.container-reflect .left  { transform: translateX(-435px) rotateY(-90deg) scaleX(-1) scaleY(-1); }
.container-reflect .right { transform: translateX(435px) rotateY(90deg) scaleX(-1) scaleY(-1); }
.container-reflect p { transform: scaleY(70%); }

.hint {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	color: rgba(255,255,255,0.55);
	font-family: system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: 0.04em;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.hint.hidden { opacity: 0; }

.ticker-logo {
	height: 0.85em;
	vertical-align: middle;
	margin: 0 30px;
	-webkit-user-drag: none;
	pointer-events: none;
	filter: saturate(1.3) contrast(1.1) drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.ticker-artist {
	height: 220px;
	width: auto;
	object-fit: contain;
	vertical-align: bottom;
	margin: 0 20px;
	-webkit-user-drag: none;
	pointer-events: none;
	filter: saturate(1.2) contrast(1.1) drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

@keyframes kk-hue       { 0%,100%{filter:hue-rotate(0deg);}50%{filter:hue-rotate(100deg);} }
@keyframes kk-zoom      { 0%{transform:scale(1);}100%{transform:scale(2.5);} }
@keyframes kk-blur      { 0%{filter:blur(0px);}100%{filter:blur(3px);} }
@keyframes kk-brightness{ 0%{filter:brightness(1) contrast(1);}100%{filter:brightness(0.8) contrast(1.3);} }
@keyframes marq         { from{transform:translateX(0);}to{transform:translateX(-50%);} }

.content-strip {
	position: relative;
	width: 100%;
	min-height: 150px;
	margin-top: -110px;
	background: #F5930B;
	box-shadow: 0 -24px 50px rgba(0,0,0,0.55), 0 24px 50px rgba(0,0,0,0.55);
	z-index: 3;
}

.marquee-section {
	background: var(--orange);
	padding: 60px 0;
	overflow: hidden;
}

.marquee-row {
	overflow: hidden;
	white-space: nowrap;
	padding: 20px 0;
	transform: skewY(-3deg);
	margin: 8px 0;
}

.marquee-row.purple { background: var(--purple); }
.marquee-row.yellow { background: var(--yellow); }
.marquee-row.black  { background: var(--karakk-black); }

.marquee-row span {
	display: inline-block;
	font-family: 'Bebas Neue', sans-serif;
	font-size: clamp(32px, 5.6vw, 60px);
	letter-spacing: 1px;
	color: transparent;
	-webkit-text-stroke: 1.5px #fff;
}

.marquee-row.yellow span { -webkit-text-stroke: 1.5px var(--karakk-black); }
.marquee-track { display: inline-flex; animation: marq 20s linear infinite; }
.marquee-row.reverse .marquee-track { animation-direction: reverse; }

.site-footer {
	background: #0a0a0a;
	border-top: 1px solid rgba(255,255,255,0.08);
	padding: 70px 24px 0;
	overflow: hidden;
}

.site-footer-top {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 50px;
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.site-footer nav a {
	color: rgba(255,255,255,0.7);
	font-family: "Ubuntu", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 300;
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer nav a:hover { color: #fff; }

.site-footer .footer-socials {
	display: flex;
	gap: 14px;
}

.site-footer .footer-socials a {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.18);
	color: rgba(255,255,255,0.8);
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.site-footer .footer-socials a:hover {
	border-color: #ED3902;
	color: #fff;
	background: #ED3902;
}

.site-footer .footer-socials svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.footer-big-title {
	width: 100%;
	overflow: hidden;
	line-height: 0.82;
	text-align: center;
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 10px;
}

.footer-big-title span {
	display: inline-block;
	font-family: "Bebas Neue", sans-serif;
	font-size: clamp(90px, 18vw, 280px);
	letter-spacing: -4px;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255,255,255,0.9);
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
	-webkit-background-clip: text;
	background-clip: text;
}

.footer-bottom-row {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	color: rgba(255,255,255,0.4);
	font-family: "Ubuntu", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.02em;
	padding: 22px 0 26px;
	border-top: 1px solid rgba(255,255,255,0.06);
}

#gsap-zoom * { margin: 0; padding: 0; box-sizing: border-box; }

#gsap-zoom,
#gsap-zoom .content {
	position: relative;
	width: 100%;
	z-index: 1;
	height: 100vh;
}

#gsap-zoom .content { overflow-x: hidden; }
#gsap-zoom .content .section { width: 100%; height: 100vh; }

#gsap-zoom .content .section.hero {
	background-image: url(https://celebratingqatar.com/wp-content/uploads/2026/07/bg224.jpg);
	background-position: center center;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
}

#gsap-zoom .image-container {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	perspective: 500px;
	overflow: hidden;
}

#gsap-zoom .image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

@media (max-width: 860px) {
	.site-header-inner { padding: 12px 20px; }

	.site-logo img { height: 52px !important; }
	.site-logo .karakk-logo { height: 34px !important; }
	.logo-divider { height: 28px !important; }
	.site-logo { gap: 10px !important; }

	.site-nav {
		position: absolute;
		top: calc(100% + 10px);
		right: 20px;
		left: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		background: rgba(20,20,20,0.85);
		backdrop-filter: saturate(180%) blur(24px);
		-webkit-backdrop-filter: saturate(180%) blur(24px);
		border: 1px solid rgba(255,255,255,0.1);
		border-radius: 18px;
		box-shadow: 0 20px 50px rgba(0,0,0,0.45);
		min-width: 220px;
		padding: 8px;
		opacity: 0;
		transform: translateY(-8px) scale(0.96);
		transform-origin: top right;
		pointer-events: none;
		transition: opacity 0.22s ease, transform 0.22s ease;
	}

	.site-nav.open {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}

	.site-nav a {
		width: 100%;
		padding: 13px 16px;
		border-radius: 12px;
		font-size: 13px;
	}

	.site-nav a:active,
	.site-nav a:hover {
		background: rgba(255,255,255,0.08);
		opacity: 1;
	}

	.nav-toggle { display: flex; }

	.content { border-radius: 24px !important; animation: none !important; }
	.boyImage { animation: none !important; filter: none !important; }
	.container-full { animation: none !important; }
	.hue.animated { animation: none !important; }

	.content-strip {
		min-height: 90px;
		margin-top: -70px;
	}

	.marquee-section { padding: 40px 0; }
	.marquee-row span { font-size: 30px; }

	.site-footer { padding: 48px 20px 0; }
	.site-footer-top { justify-content: center; text-align: center; padding-bottom: 34px; }
	.site-footer nav { justify-content: center; gap: 18px 22px; }
	.footer-bottom-row { justify-content: center; text-align: center; }
}

.tickets-cta {
	background: #0a0a0a;
	border-top: 1px solid rgba(255,255,255,0.06);
	border-bottom: 1px solid rgba(255,255,255,0.06);
	overflow: hidden;
}

.tickets-cta-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 80px 40px;
}

.tickets-col-left {
	flex: 1;
}

.tickets-col-left .tickets-cta-label {
	text-align: left;
}

.tickets-col-left .tickets-cta-heading {
	text-align: left;
	margin: 0;
}

.tickets-col-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	flex-shrink: 0;
	min-width: 220px;
}

.tickets-col-right .tickets-cta-logo {
	display: block;
	width: 100%;
}

.tickets-col-right .tickets-cta-phone {
	display: block;
	width: 100%;
}

.tickets-banner {
	width: 100%;
}

.tickets-banner img {
	width: 100%;
	height: auto;
	display: block;
}

.tickets-cta-label {
	font-family: "Ubuntu", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #ED3902;
	margin: 0;
}

.tickets-cta-heading {
	font-family: "Bebas Neue", sans-serif;
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 400;
	color: #fff;
	letter-spacing: 2px;
	line-height: 1;
	margin: 0;
}

.tickets-cta-phone {
	font-family: "Ubuntu", system-ui, sans-serif;
	font-size: 1.4rem;
	font-weight: 300;
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	letter-spacing: 2px;
	transition: color 0.2s;
}

.tickets-cta-phone:hover {
	color: #fff;
}

.tickets-cta-logo {
	display: inline-block;
	margin-top: 8px;
	transition: opacity 0.2s;
}

.tickets-cta-logo:hover {
	opacity: 0.85;
}

.tickets-cta-logo img {
	height: 60px;
	width: auto;
	display: block;
}

@media (max-width: 860px) {
	.tickets-cta-inner {
		padding: 40px 20px;
		gap: 20px;
		align-items: flex-start;
	}
	.tickets-col-left .tickets-cta-heading {
		font-size: clamp(1.6rem, 5.5vw, 2.8rem);
		line-height: 1.1;
	}
	.tickets-col-right {
		align-items: flex-start;
		gap: 14px;
		justify-content: center;
		height: 100%;
	}
	.tickets-cta-logo img { height: 38px; max-width: 160px; }
	.tickets-cta-phone {
		font-size: 1rem;
		letter-spacing: 1px;
	}
}

.artists-section {
	background: #000;
}

.artists-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

.artist-item {
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.artist-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 0.5s ease;
}

.artist-item:hover img {
	transform: scale(1.04);
}

@media (max-width: 600px) {
	.artists-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}