/* ==========================================================================
   Bloom invitation — The Bloom Invites look
   Stage is a fixed 9:16 canvas; all text sizes use container units (cqw)
   so the layout matches the footage on every screen.
   ========================================================================== */

.hsn-bloom,
.hsn-bloom * { box-sizing: border-box; }

.hsn-bloom {
	--bloom-bg: #d8bcbc;
	--bloom-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
	--bloom-script: 'Great Vibes', 'Brush Script MT', cursive;
	position: relative;
	width: 100%;
	min-height: 100svh;
	background: var(--bloom-bg);
	color: var(--bloom-text, #6b3a3a);
	font-family: var(--bloom-serif);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-font-smoothing: antialiased;
}

/* soft vignette around the stage on wide screens */
.hsn-bloom::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(255,255,255,.18), rgba(0,0,0,.12));
	pointer-events: none;
}

/* ---------- Stage (9:16) ---------- */
.hsn-bloom-stage {
	position: relative;
	height: 100svh;
	width: min(100vw, calc(100svh * 9 / 16));
	container-type: inline-size;
	overflow: hidden;
	box-shadow: 0 0 60px rgba(0,0,0,.18);
}

.hsn-bloom-video,
.hsn-bloom-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Petals ---------- */
.hsn-bloom-petals {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 20;
	overflow: hidden;
}

.hsn-bloom-petal {
	position: absolute;
	top: -20px;
	width: 10px;
	height: 14px;
	border-radius: 100% 0 100% 0;
	background: #efb9c0;
	opacity: 0;
	animation: hsn-bloom-fall var(--dur, 11s) linear var(--delay, 0s) infinite;
}

@keyframes hsn-bloom-fall {
	0%   { transform: translate3d(0, -5vh, 0) rotate(0deg); opacity: 0; }
	10%  { opacity: var(--op, .7); }
	100% { transform: translate3d(var(--sway, 30px), 105vh, 0) rotate(360deg); opacity: 0; }
}

/* ---------- Intro ---------- */
.hsn-bloom-intro {
	position: absolute;
	inset: 0;
	z-index: 10;
	transition: opacity 1.2s ease;
}

.hsn-bloom-intro.is-done {
	opacity: 0;
	pointer-events: none;
}

.hsn-bloom-tap {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 7%;
	-webkit-tap-highlight-color: transparent;
}

.hsn-bloom-tap.is-hidden { opacity: 0; pointer-events: none; transition: opacity .4s; }

.hsn-bloom-hint {
	font-family: var(--bloom-serif);
	font-size: 4cqw;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #5a3535;
	background: rgba(255, 246, 246, .72);
	padding: 2.2cqw 5cqw;
	border-radius: 999px;
	backdrop-filter: blur(4px);
	animation: hsn-bloom-pulse 2.2s ease-in-out infinite;
}

@keyframes hsn-bloom-pulse {
	0%, 100% { opacity: .75; transform: translateY(0); }
	50%      { opacity: 1;  transform: translateY(-3px); }
}

/* ---------- Scene ---------- */
.hsn-bloom-scene {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.hsn-bloom-scene.is-on { opacity: 1; }

.hsn-bloom-bg {
	clip-path: inset(0 0 54% 0); /* sky only — never sit under the swans */
}

/* entire lower scene (full swans) comes from one video layer — no still showing through */
.hsn-bloom-video--swans {
	clip-path: inset(46% 0 0 0);
	opacity: 0;
	transition: opacity .35s ease;
}

.hsn-bloom-video--swans.is-on { opacity: 1; }

/* ---------- Persian (/fa) typography ---------- */
.hsn-bloom--fa {
	--bloom-serif: var(--bloom-fa-font, 'Vazirmatn', Tahoma, sans-serif);
	--bloom-script: 'Gulzar', var(--bloom-fa-font, 'Vazirmatn'), serif;
}
.hsn-bloom--fa .hsn-bloom-hint,
.hsn-bloom--fa .hsn-bloom-line--header,
.hsn-bloom--fa .hsn-bloom-cd-label,
.hsn-bloom--fa .hsn-bloom-cd-cell small { letter-spacing: 0; text-transform: none; }
.hsn-bloom--fa .hsn-bloom-line,
.hsn-bloom--fa .hsn-bloom-details li,
.hsn-bloom--fa .hsn-bloom-date { letter-spacing: 0; line-height: 1.9; }
.hsn-bloom--fa .hsn-bloom-mono { font-size: 15cqw; line-height: 1.6; }
.hsn-bloom--fa .hsn-bloom-names { font-size: 11cqw; line-height: 1.7; }
.hsn-bloom--fa .hsn-bloom-line--footer { font-style: normal; }


/* ---------- Text zone (sky area) ---------- */
.hsn-bloom-textzone {
	position: absolute;
	left: 9%;
	right: 9%;
	top: 6.5%;
	height: 37%;
	z-index: 2;
	text-align: center;
	color: var(--bloom-text);
}

.hsn-bloom-step {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.2cqw;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 1s ease, transform 1s ease;
	pointer-events: none;
}

.hsn-bloom-step.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.hsn-bloom-mono {
	font-family: var(--bloom-script);
	font-size: 17cqw;
	line-height: 1;
	margin-bottom: 3cqw;
}

.hsn-bloom-date {
	font-size: 4.4cqw;
	letter-spacing: .14em;
	font-weight: 500;
}

.hsn-bloom-line {
	margin: 0;
	font-size: 4.6cqw;
	line-height: 1.6;
	letter-spacing: .04em;
	font-weight: 500;
}

.hsn-bloom-line--small {
	font-size: 3.9cqw;
	max-width: 80%;
	margin-top: 1.5cqw;
	font-style: italic;
}

.hsn-bloom-names {
	margin: 0;
	font-family: var(--bloom-script);
	font-size: 12.5cqw;
	line-height: 1.15;
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 2.4cqw;
}

.hsn-bloom-names span {
	font-size: .6em;
	opacity: .85;
}

/* Details step (matches the timeline in the footage) */
.hsn-bloom-step--details {
	justify-content: flex-start;
	padding-top: 1cqw;
	bottom: -10%; /* clear sky continues a bit below the text zone */
}

.hsn-bloom-line--header {
	font-size: 4.2cqw;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 2.6cqw;
}

.hsn-bloom-details {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3.2cqw;
	text-align: start;
}

.hsn-bloom-details::before {
	content: '';
	position: absolute;
	inset-inline-start: 3.2cqw;
	top: 4cqw;
	bottom: 4cqw;
	width: 1px;
	background: currentColor;
	opacity: .55;
}

.hsn-bloom-details li {
	display: flex;
	align-items: center;
	gap: 5cqw;
	font-size: 4.4cqw;
	letter-spacing: .06em;
	line-height: 1.3;
}

.hsn-bloom-val { display: flex; flex-direction: column; gap: .4cqw; }
.hsn-bloom-venue { font-weight: 600; }
.hsn-bloom-addr { font-size: .84em; letter-spacing: .02em; opacity: .9; line-height: 1.45; }

/* Countdown */
.hsn-bloom-cd { margin-top: 0; }
.hsn-bloom-cd-label {
	margin: 0 0 1.6cqw;
	font-size: 3.4cqw;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .85;
}
.hsn-bloom-cd-grid {
	display: flex;
	justify-content: center;
	gap: 3.4cqw;
}
.hsn-bloom-cd-cell {
	min-width: 12cqw;
	padding: 1.4cqw 1cqw;
	border-radius: 2cqw;
	background: rgba(255, 246, 246, .5);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.hsn-bloom-cd-cell b {
	display: block;
	font-size: 5.6cqw;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.hsn-bloom-cd-cell small {
	display: block;
	font-size: 2.6cqw;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .8;
	margin-top: .4cqw;
}
.hsn-bloom-cd-done { margin: 0; font-size: 4cqw; font-style: italic; }

.hsn-bloom-ico {
	position: relative;
	width: 6.4cqw;
	height: 6.4cqw;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--bloom-text);
}

.hsn-bloom-ico::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.4cqw;
	height: 1.4cqw;
	margin: -0.7cqw 0 0 -0.7cqw;
	border-radius: 50%;
	background: currentColor;
	display: none;
}

.hsn-bloom-ico svg {
	width: 100%;
	height: 100%;
	background: rgba(255, 246, 246, .55);
	border-radius: 50%;
	padding: .9cqw;
}

.hsn-bloom-line--footer {
	margin-top: 3.6cqw;
	font-size: 3.7cqw;
	font-style: italic;
	max-width: 88%;
}

.hsn-bloom-map {
	display: inline-block;
	margin-top: 2cqw;
	padding: 1.4cqw 5cqw;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	font-size: 3.4cqw;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background .3s, color .3s;
}

.hsn-bloom-map:hover {
	background: var(--bloom-text);
	color: #fff4f4;
}

/* progress dots */
.hsn-bloom-dots {
	position: absolute;
	left: 50%;
	bottom: 2.6%;
	transform: translateX(-50%);
	display: flex;
	gap: 1.6cqw;
	z-index: 3;
}

.hsn-bloom-dots i {
	width: 1.6cqw;
	height: 1.6cqw;
	border-radius: 50%;
	background: rgba(107, 58, 58, .35);
	transition: background .3s, transform .3s;
}

.hsn-bloom-dots i.is-on {
	background: var(--bloom-text);
	transform: scale(1.35);
}

/* hidden soundtrack element */
.hsn-bloom-audio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.hsn-bloom-petals { display: none; }
	.hsn-bloom-hint { animation: none; }
}