/* ==========================================================================
   Aamari Odisha — opening sequence
   The wheel assembles, the map appears, the mark resolves, the curtain lifts.
   ========================================================================== */

.ao-intro {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: #0B0906;
	overflow: hidden;
	--intro-ease: cubic-bezier(.16, 1, .3, 1);
}

body.ao-intro-active { overflow: hidden; }

/* Warm light behind the mark, breathing slightly */
.ao-intro__glow {
	position: absolute;
	width: 140vmin; height: 140vmin;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255,140,20,.30) 0%,
		rgba(255,107,0,.14) 32%,
		rgba(120,45,0,.06) 55%,
		transparent 72%);
	opacity: 0;
	transform: scale(.4);
	filter: blur(10px);
}

/* The strike: a gold ring that expands once and dies */
.ao-intro__strike {
	position: absolute;
	width: 24px; height: 24px;
	border-radius: 50%;
	border: 1.5px solid rgba(253,184,19,.9);
	opacity: 0;
}

.ao-intro__stage {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 4vw, 3rem);
	padding: 2rem;
	will-change: transform, opacity;
}
@media (max-width: 720px) {
	.ao-intro__stage { flex-direction: column; gap: 1.5rem; }
}

.ao-intro__mark {
	width: clamp(180px, 34vmin, 300px);
	aspect-ratio: 1;
	flex: none;
}
.ao-intro__svg { width: 100%; height: 100%; overflow: visible; }

/* --- The orange disc, revealed last so the mark resolves into the logo --- */
.ao-disc {
	transform-origin: 510px 512px;
	transform: scale(0);
	opacity: 0;
}

/* --- Odisha --- */
.ao-map-line {
	fill: none;
	stroke: #FFC978;
	stroke-width: 5;
	stroke-linejoin: round;
	opacity: 0;
}
.ao-map-fill {
	fill: url(#aoMapGrad);
	opacity: 0;
	transform-origin: 470px 490px;
	transform: scale(1.05);
}

/* --- The wheel --- */
.ao-wheel { transform-origin: 0 0; }
.ao-wheel-part { opacity: 0; }

.ao-spoke-major, .ao-spoke-minor {
	fill: #FFB259;
	transform-origin: 0 0;
}
.ao-boss { fill: #FFB259; }
.ao-boss-dot { fill: #C24A00; }

.ao-bead { fill: #FFC978; opacity: 0; transform-origin: 0 0; }

.ao-ring {
	fill: none;
	stroke: #FFB259;
	stroke-linecap: round;
}
.ao-hub-fill { fill: #FFB259; opacity: 0; transform-origin: 0 0; }

/* Once the disc is out, the wheel re-colours to sit on orange */
.ao-intro.is-resolved .ao-spoke-major,
.ao-intro.is-resolved .ao-spoke-minor,
.ao-intro.is-resolved .ao-boss,
.ao-intro.is-resolved .ao-hub-fill { fill: #E85D04; transition: fill .5s ease; }
.ao-intro.is-resolved .ao-ring { stroke: #E85D04; transition: stroke .5s ease; }
.ao-intro.is-resolved .ao-bead { fill: #F97316; transition: fill .5s ease; }
.ao-intro.is-resolved .ao-boss-dot { fill: #FFD9A8; transition: fill .5s ease; }
.ao-intro.is-resolved .ao-map-line { stroke: #C2410C; transition: stroke .5s ease; }

/* --- Wordmark --- */
.ao-intro__word {
	display: flex;
	flex-direction: column;
	line-height: .95;
}
@media (max-width: 720px) { .ao-intro__word { align-items: center; text-align: center; } }

.ao-word-line { overflow: hidden; display: block; }
.ao-word-line > span {
	display: block;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(2.4rem, 8vmin, 4.6rem);
	letter-spacing: -.035em;
	color: #FFF3E4;
	transform: translateY(105%);
	will-change: transform;
}
.ao-word-tag {
	margin-top: clamp(.6rem, 1.6vmin, 1rem);
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(.62rem, 1.5vmin, .8rem);
	text-transform: uppercase;
	color: #FDB813;
	letter-spacing: .7em;
	opacity: 0;
	white-space: nowrap;
}

/* Hairline that draws under the wordmark */
.ao-word-rule {
	height: 1px;
	margin-top: clamp(.7rem, 2vmin, 1.1rem);
	background: linear-gradient(90deg, #FF6B00, #FDB813, transparent);
	transform: scaleX(0);
	transform-origin: left;
}
@media (max-width: 720px) { .ao-word-rule { transform-origin: center; } }

/* --- Skip --- */
.ao-intro__skip {
	position: absolute;
	right: clamp(1rem, 4vw, 2.5rem);
	bottom: clamp(1rem, 4vw, 2.5rem);
	padding: .5rem 1.1rem;
	border-radius: 999px;
	border: 1px solid rgba(255,220,180,.22);
	background: transparent;
	color: rgba(255,230,205,.6);
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transition: opacity .4s ease, color .2s ease, border-color .2s ease;
}
.ao-intro__skip:hover { color: #FDB813; border-color: rgba(253,184,19,.5); }
.ao-intro.is-skippable .ao-intro__skip { opacity: 1; }

/* --- Curtain lift --- */
.ao-intro.is-leaving {
	clip-path: inset(0 0 0 0);
	animation: ao-curtain 1s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes ao-curtain {
	to { clip-path: inset(0 0 100% 0); }
}

/* The header logo catches the handoff */
@keyframes ao-logo-catch {
	0%   { transform: scale(.4) rotate(-90deg); opacity: 0; }
	60%  { transform: scale(1.14) rotate(6deg); opacity: 1; }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}
.brand img.is-catching { animation: ao-logo-catch .8s var(--intro-ease) both; }

/* Nothing moves for people who asked for that */
@media (prefers-reduced-motion: reduce) {
	.ao-intro { animation: none; transition: opacity .3s ease; }
	.ao-intro.is-leaving { animation: none; opacity: 0; pointer-events: none; }
	.ao-intro * { animation: none !important; transition: none !important; }
}
