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

body{
	/* Force Dubai font only */
	font-family: 'Dubai', sans-serif !important;
	height:100vh;
	overflow:hidden;
	background:black;
}

/* VIDEO BACKGROUND */

.video-container{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;
overflow:hidden;
}

video{
width:100%;
height:100%;
object-fit:cover;
filter: blur(4px);
transform: scale(1.08);
}

/* DARK OVERLAY FOR QUALITY LOOK */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.25);
z-index:-1;
}

/* CENTER CONTENT */

.content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
padding:20px;
}

/* MAIN TEXT */

.title{
	/* responsive heading size */
	font-size: clamp(30px, 6vw, 64px);
	color: rgba(255,255,255,0.95);
	letter-spacing:2px;
	animation:fadeUp 1.6s ease;
	text-transform:uppercase;
	white-space:nowrap; /* keep in one line on small screens */
	overflow:hidden;
	text-overflow:ellipsis;

/* Creative subtitle animation: pop in each strong, then draw a subtle underline */
.subtitle strong{
	display:inline-block;
	opacity:0;
	transform: translateY(10px) scale(0.98);
	animation: subtitlePop 700ms cubic-bezier(.2,.9,.2,1) forwards;
	will-change: transform, opacity;
}

.subtitle strong:nth-of-type(1){
	animation-delay: 0.15s;
}

.subtitle strong:nth-of-type(2){
	animation-delay: 0.45s;
}

.subtitle strong::after{
	content:'';
	display:block;
	height:4px;
	width:0;
	margin-top:8px;
	border-radius:3px;
	background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7));
}

.subtitle strong:nth-of-type(1)::after{
	animation: underlineGrow 600ms ease forwards;
	animation-delay: 0.9s;
}

.subtitle strong:nth-of-type(2)::after{
	animation: underlineGrow 600ms ease forwards;
	animation-delay: 1.2s;
}

@keyframes subtitlePop{
	0%{ opacity:0; transform:translateY(12px) scale(0.98); }
	60%{ opacity:1; transform:translateY(-4px) scale(1.02); }
	100%{ opacity:1; transform:translateY(0) scale(1); }
}

@keyframes underlineGrow{
	from{ width:0; }
	to{ width:100%; }
}

/* subtle glow pulse on subtitle after reveal */
@keyframes subtitleGlow{
	0%{ text-shadow: none; }
	100%{ text-shadow: 0 0 16px rgba(255,255,255,0.12); }
}

.subtitle strong{
	animation-name: subtitlePop;
}

.subtitle.revealed strong{ /* if needed for JS control */
	animation-play-state: running;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}

/* Per-character wave animation */
.subtitle .char{
	display:inline-block;
	transform: translateY(0);
	/* stagger using --i set from JS */
	animation: waveFloat 1800ms ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.06s);
	animation-play-state: paused; /* start paused, enabled when wave-on is added */
}

.subtitle.wave-on .char{
	animation-play-state: running;
}

@keyframes waveFloat{
	0%{ transform: translateY(0); }
	20%{ transform: translateY(-6px) rotate(-1deg); }
	40%{ transform: translateY(0) rotate(0); }
	60%{ transform: translateY(4px) rotate(1deg); }
	80%{ transform: translateY(0) rotate(0); }
	100%{ transform: translateY(0); }
}
}

/* SUBTEXT */

 .subtitle{
  margin-top:6px;
	/* responsive subtitle */
	font-size: clamp(16px, 2.6vw, 28px);
	color: #ffffff;
	font-weight:800;
	letter-spacing:0.6px;
	animation:fadeUp 2.2s ease;
}

.subtitle strong{
	font-weight:700;
}

.launch{
	margin-top:6px; /* tightened under subtitle */
	font-size: clamp(11px, 1.6vw, 16px);
	color: rgba(255,255,255,0.95);
	opacity:0.98;
	animation:fadeUp 2.4s ease;
}

.countdown{
	display:flex;
	gap:12px;
	justify-content:center;
	align-items:center;
	margin-top:18px;
	flex-wrap:wrap;
}

.countdown .time{
	/* glassmorphism base for timer tiles */
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.06);
	backdrop-filter: blur(6px) saturate(120%);
	-webkit-backdrop-filter: blur(6px) saturate(120%);
	padding:8px 10px;
	border-radius:10px;
	min-width:56px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.35);
	transition: transform 180ms ease, box-shadow 180ms ease, background 160ms ease;
}

/* Subtle hover/focus effects for timer tiles (gentle only) */
.countdown .time{
	cursor: pointer;
}

.countdown .time:hover{
	transform: translateY(-2px) scale(1.01);
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
	box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}

.countdown .time:focus{
	transform: translateY(-2px) scale(1.01);
	outline: 2px solid rgba(255,255,255,0.06);
	outline-offset: 3px;
}

.countdown .time:active{
	transform: translateY(-1px) scale(1.005);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
	.countdown .time{ transition: none; transform: none !important; }
	.subtitle .char{ animation: none !important; }
}

.countdown .num{
	display:block;
	font-size: clamp(14px, 2.2vw, 20px);
	font-weight:700;
	color:#fff;
	text-align:center;
}

.countdown .label{
	display:block;
	font-size:12px;
	color:rgba(255,255,255,0.85);
	text-align:center;
}

/* ANIMATION */

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

/* MOBILE */

@media (max-width:768px){

	.title{
		font-size:40px;
	}

	.subtitle{
		font-size:16px;
	}

	video{
		transform:scale(1.2);
	}

	.countdown .num{
		font-size:16px;
	}

}