/*
 * rivora/alignment — the nine grahas fall into line, the bottles rise in.
 * Default (no JS / reduced motion / editor): the finished composition, static.
 * Motion: CSS scroll-driven animations (transform/opacity only) inside @supports,
 * or the --p progress variable set by view.js where scroll timelines are missing.
 */
.rv-align {
	--rv-night: #120410;
	--rv-oy: 1cqh; /* vertical unit of the orrery: viewport height on wide screens */
	--rv-od: 1cqh; /* unit of the orrery's drop below the line (24 units) */
	position: relative;
	isolation: isolate;
	margin-block: 0;
	background: var(--rv-night);
	color: var(--rv-cream);
	font-family: var(--rv-sans);
}
.rv-align__stage {
	position: relative;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
	box-sizing: border-box;
	padding-block: calc(var(--rv-header-h, 72px) + clamp(16px, 4svh, 40px)) clamp(24px, 4svh, 48px);
	overflow: clip;
}

/* ---------- Sky: layered nebula haze, dust, grain ---------- */
.rv-align__sky {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 48% at 74% 30%, rgb(100 17 100 / .55), transparent 72%),
		radial-gradient(40% 38% at 14% 76%, rgb(43 111 168 / .2), transparent 70%),
		radial-gradient(70% 45% at 50% 108%, rgb(217 178 95 / .12), transparent 72%),
		linear-gradient(180deg, #120410 0%, #1c0618 55%, #120410 100%);
	transform-origin: 60% 40%;
}
.rv-align__haze,
.rv-align__dust,
.rv-align__sky::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.rv-align__haze {
	inset: -6%;
	background: var(--rv-tex-nebula, none) 70% 30% / cover no-repeat;
	opacity: .5;
	mix-blend-mode: screen;
}
/* Sparse gold dust, a few static CSS dots (not a starfield). */
.rv-align__dust {
	opacity: .7;
	background:
		radial-gradient(1px 1px at 17% 23%, #f3e9dc 50%, transparent 51%),
		radial-gradient(1px 1px at 83% 12%, #d9b25f 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 64% 71%, #f3e9dc 50%, transparent 51%),
		radial-gradient(1px 1px at 31% 84%, #d9b25f 50%, transparent 51%),
		radial-gradient(1px 1px at 92% 58%, #f3e9dc 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 8% 47%, #d9b25f 50%, transparent 51%),
		radial-gradient(1px 1px at 47% 9%, #f3e9dc 50%, transparent 51%),
		radial-gradient(1px 1px at 56% 38%, #d9b25f 50%, transparent 51%);
}
.rv-align__sky::after {
	background: var(--rv-tex-grain, none) 0 0 / 256px 256px repeat;
	opacity: .09;
	mix-blend-mode: overlay;
}

/* ---------- Heading (inner blocks) ---------- */
.rv-align__head {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2.5cqw, 32px);
	align-items: end;
	padding-inline: 6cqw;
}
.rv-align__head > * { grid-column: 9 / span 4; margin: 0; }
.rv-align__head > :first-child {
	grid-column: 1 / span 7;
	font-family: var(--rv-display);
	font-size: clamp(2.4rem, 4.6cqw, 4.75rem);
	font-weight: 300;
	line-height: .98;
	letter-spacing: -.01em;
	text-transform: none;
	text-wrap: balance;
	color: inherit;
}
.rv-align__head > :first-child em { font-style: italic; color: var(--rv-gold); }
.rv-align__head > p:not(:first-child) {
	max-width: 30rem;
	font-size: 1.0625rem;
	font-weight: 300;
	line-height: 1.6;
	color: color-mix(in srgb, var(--rv-cream) 78%, transparent);
	text-wrap: pretty;
}

/* ---------- The line of nine ---------- */
.rv-align__line {
	--orb-row: 52px;
	--lab-top: 0px;
	position: relative;
	z-index: 1;
	margin: clamp(28px, 5svh, 64px) 6cqw 0;
}
.rv-align__orbits {
	position: absolute;
	left: 50%;
	top: calc(var(--lab-top) + var(--orb-row) / 2);
	width: 100cqw;
	height: 100svh;
	transform: translate(-50%, -50%);
	fill: none;
	stroke: rgb(217 178 95 / .9);
	stroke-width: 1;
	opacity: .14;
	pointer-events: none;
	overflow: visible;
}
.rv-align__rule {
	position: absolute;
	left: -6cqw;
	right: -6cqw;
	top: calc(var(--lab-top) + var(--orb-row) / 2);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgb(217 178 95 / .7) 14%, rgb(217 178 95 / .7) 86%, transparent);
	transform-origin: 50% 50%;
}
.rv-align__grahas {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.rv-align__graha {
	display: grid;
	grid-template-rows: var(--orb-row) auto;
	justify-items: center;
	align-items: center;
	row-gap: 14px;
	margin: 0;
	transition: opacity .4s ease;
}
.rv-align__orb {
	position: relative;
	display: block;
	width: var(--d);
	height: var(--d);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .9) 0, var(--c) 24%, color-mix(in srgb, var(--c) 52%, #120410) 64%, #0a0208 100%);
	box-shadow:
		0 0 calc(var(--d) * .9) color-mix(in srgb, var(--c) 42%, transparent),
		inset -2px -3px 6px rgb(0 0 0 / .45);
	transition: scale .4s cubic-bezier(.2, .7, .2, 1);
}
.rv-g--surya .rv-align__orb {
	background: radial-gradient(circle at 40% 36%, #fffaf0 0, #ffe7a6 30%, #ffc75a 62%, #e08a2c 100%);
	box-shadow: 0 0 36px rgb(255 205 110 / .65), 0 0 110px rgb(255 170 70 / .28);
}
.rv-g--shani .rv-align__orb::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 210%;
	height: 52%;
	border: 1px solid rgb(232 205 150 / .75);
	border-radius: 50%;
	transform: translate(-50%, -50%) rotate(-16deg);
}
.rv-g--rahu .rv-align__orb,
.rv-g--ketu .rv-align__orb {
	background: radial-gradient(circle, #0d020b 60%, color-mix(in srgb, var(--c) 60%, #fff) 66%, transparent 72%);
	box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent);
}
.rv-align__label { display: grid; justify-items: center; gap: 2px; text-align: center; }
.rv-align__gname {
	font-family: var(--rv-display);
	font-size: clamp(1rem, 1.5cqw, 1.375rem);
	font-weight: 400;
	line-height: 1.05;
}
.rv-align__gen { font-size: .75rem; font-weight: 400; color: color-mix(in srgb, var(--rv-cream) 62%, transparent); }

/* ---------- Bottles ---------- */
.rv-align__bottles {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr));
	gap: 4cqw;
	align-items: end;
	margin: clamp(16px, 3svh, 40px) 6cqw 0;
	padding: 0;
	list-style: none;
}
.rv-align__bottle {
	display: grid;
	justify-items: center;
	margin: 0;
	text-align: center;
}
.rv-align__bottle:nth-child(2) { translate: 0 -3.5svh; }
.rv-align__fig {
	position: relative;
	width: min(100%, 15rem, 24svh);
	aspect-ratio: 4 / 5;
	margin: 0;
}
.rv-align__arch,
.rv-align__img.is-photo {
	position: absolute;
	left: 9%;
	top: 16%;
	width: 82%;
	height: 84%;
}
.rv-align__arch {
	fill: color-mix(in srgb, var(--deep, #3d0a3f) 34%, transparent);
	stroke: rgb(217 178 95 / .85);
	stroke-width: 1;
}
.rv-align__halo {
	position: absolute;
	left: 5%;
	bottom: 6%;
	width: 90%;
	aspect-ratio: 1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, #d9b25f) 42%, transparent), transparent);
	pointer-events: none;
}
.rv-align__fig::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: -4px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(0 0 0 / .6), transparent);
}
.rv-align__img {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 100%;
	filter: drop-shadow(0 24px 22px rgb(0 0 0 / .5));
}
/* A product photo (not a cut-out) is framed in the arch instead (mask in shared.css). */
.rv-align__img.is-photo { object-fit: cover; filter: none; }
.rv-align__fig .rv-bottle { position: absolute; left: 50%; bottom: 8%; margin: 0; transform: translateX(-50%); }
.rv-align__bname {
	margin: 18px 0 0;
	font-family: var(--rv-display);
	font-size: clamp(1.5rem, 2.5cqw, 2.5rem);
	font-weight: 300;
	line-height: 1;
}
.rv-align__bname a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: text-decoration-color .3s ease;
}
.rv-align__bname a:hover,
.rv-align__bname a:focus-visible { text-decoration-color: var(--rv-gold); }
.rv-align__bname a:focus-visible { outline: 2px solid var(--rv-gold); outline-offset: 4px; }
.rv-align__bname a::after { content: ""; position: absolute; inset: 0; } /* whole bottle is the link target */
.rv-align__bottle { position: relative; }
.rv-align__ruled {
	display: grid;
	justify-items: center;
	gap: 8px;
	margin: 10px 0 0;
	font-size: .8125rem;
	line-height: 1.45;
	color: color-mix(in srgb, var(--rv-cream) 66%, transparent);
}
.rv-align__glyphs { display: flex; gap: 4px; color: var(--rv-gold); }
.rv-align__glyphs .rv-glyph { width: 24px; height: 24px; stroke-width: 1.6; }

/* Pointing at a bottle lights the grahas that rule it. */
.rv-align:has(.rv-align__bottle:is(:hover, :focus-within)) .rv-align__graha { opacity: .32; }
.rv-align:has(.rv-align__bottle[data-g~="surya"]:is(:hover, :focus-within)) .rv-g--surya,
.rv-align:has(.rv-align__bottle[data-g~="chandra"]:is(:hover, :focus-within)) .rv-g--chandra,
.rv-align:has(.rv-align__bottle[data-g~="mangal"]:is(:hover, :focus-within)) .rv-g--mangal,
.rv-align:has(.rv-align__bottle[data-g~="budh"]:is(:hover, :focus-within)) .rv-g--budh,
.rv-align:has(.rv-align__bottle[data-g~="guru"]:is(:hover, :focus-within)) .rv-g--guru,
.rv-align:has(.rv-align__bottle[data-g~="shukra"]:is(:hover, :focus-within)) .rv-g--shukra,
.rv-align:has(.rv-align__bottle[data-g~="shani"]:is(:hover, :focus-within)) .rv-g--shani,
.rv-align:has(.rv-align__bottle[data-g~="rahu"]:is(:hover, :focus-within)) .rv-g--rahu,
.rv-align:has(.rv-align__bottle[data-g~="ketu"]:is(:hover, :focus-within)) .rv-g--ketu { opacity: 1; }

/* ---------- Small screens ---------- */
@media (max-width: 700px) {
	/* Portrait: size the orrery by width, so the rings stay wide, tilted ellipses. */
	.rv-align { --rv-oy: 1cqw; --rv-od: .55cqh; }
	.rv-align__orbits { height: 100cqw; }
	.rv-align__head { display: block; }
	.rv-align__head > :first-child { font-size: clamp(2.1rem, 9.5cqw, 2.75rem); margin-bottom: .45em; }
	.rv-align__head > p:not(:first-child) { font-size: .9375rem; line-height: 1.5; }
	.rv-align__line { --orb-row: 40px; margin-inline: 3cqw; margin-top: 28px; }
	.rv-align__rule { left: -3cqw; right: -3cqw; }
	.rv-align__orb { width: calc(var(--d) * .72); height: calc(var(--d) * .72); }
	.rv-align__graha { row-gap: 6px; }
	.rv-align__gen { display: none; }
	.rv-align__gname { font-size: .875rem; }
	/* Labels alternate above and below the line so nine names fit. */
	.rv-align__line { --lab-top: 20px; }
	.rv-align__graha { grid-template-rows: var(--lab-top) var(--orb-row) var(--lab-top); }
	.rv-align__orb { grid-row: 2; }
	.rv-align__label { grid-row: 3; }
	.rv-align__graha:nth-child(even) .rv-align__label { grid-row: 1; }
	.rv-align__bottles { gap: 3cqw; margin-inline: 4cqw; }
	.rv-align__fig { width: min(100%, 22svh); }
	.rv-align__bname { margin-top: 12px; font-size: 1.375rem; }
	.rv-align__ruled > span:last-child {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
	}
	.rv-align__glyphs { flex-wrap: wrap; justify-content: center; gap: 2px; }
	.rv-align__glyphs .rv-glyph { width: 18px; height: 18px; }
}

/* ---------- Motion: CSS scroll-driven ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.rv-align__track { height: 280svh; view-timeline: --rv-align block; }
		.rv-align__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
		.rv-align__sky,
		.rv-align__graha,
		.rv-align__label,
		.rv-align__rule,
		.rv-align__orbits,
		.rv-align__bottle {
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: --rv-align;
		}
		.rv-align__sky { animation-name: rv-align-sky; animation-range: contain 0% contain 100%; }
		.rv-align__graha { animation-name: rv-align-drift; animation-range: contain 0% contain 52%; }
		.rv-align__label { animation-name: rv-align-fade; animation-range: contain 42% contain 58%; }
		.rv-align__rule { animation-name: rv-align-rule; animation-range: contain 36% contain 56%; }
		.rv-align__orbits { animation-name: rv-align-orbits; animation-range: contain 0% contain 52%; }
		.rv-align__bottle { animation-name: rv-align-rise; animation-range: contain 54% contain 80%; }
		.rv-align__bottle:nth-child(2) { animation-range: contain 60% contain 86%; }
		.rv-align__bottle:nth-child(3) { animation-range: contain 66% contain 92%; }
		.rv-align__bottle:nth-child(4) { animation-range: contain 70% contain 96%; }
	}
}
@keyframes rv-align-sky { from { transform: scale(1.12) translateY(2%); } }
@keyframes rv-align-drift {
	0% { transform: translate(var(--dx), var(--dy)) scale(.72); animation-timing-function: ease-in-out; }
	50% { transform: translate(var(--mx), var(--my)) scale(.86); animation-timing-function: ease-out; }
	100% { transform: none; }
}
@keyframes rv-align-fade { from { opacity: 0; } }
@keyframes rv-align-rule { from { opacity: 0; transform: scaleX(0); } }
@keyframes rv-align-orbits { from { opacity: .55; transform: translate(-50%, calc(-50% + 24 * var(--rv-od))) scale(1.04); } to { opacity: .14; transform: translate(-50%, -50%); } }
@keyframes rv-align-rise { from { opacity: 0; transform: translateY(16svh) scale(.94); } }

/* ---------- Motion: progress-variable fallback (view.js sets .is-js and --p) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.rv-align.is-js .rv-align__track { height: 280svh; }
	.rv-align.is-js .rv-align__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
	.rv-align.is-js .rv-align__graha {
		--t: clamp(0, var(--p, 0) / .52, 1);
		--e: calc(1 - var(--t) * var(--t) * (3 - 2 * var(--t)));
		transform: translate(calc(var(--dx) * var(--e)), calc(var(--dy) * var(--e))) scale(calc(1 - .28 * var(--e)));
	}
	.rv-align.is-js .rv-align__label { opacity: clamp(0, (var(--p, 0) - .42) / .16, 1); }
	.rv-align.is-js .rv-align__rule { transform: scaleX(clamp(0, (var(--p, 0) - .36) / .2, 1)); }
	.rv-align.is-js .rv-align__orbits {
		--o: clamp(0, var(--p, 0) / .52, 1);
		opacity: calc(.55 - .41 * var(--o));
		transform: translate(-50%, calc(-50% + 24 * var(--rv-od) * (1 - var(--o))));
	}
	.rv-align.is-js .rv-align__bottle {
		--b: clamp(0, (var(--p, 0) - .54 - var(--k, 0) * .06) / .26, 1);
		opacity: var(--b);
		transform: translateY(calc((1 - var(--b)) * 16svh));
	}
}

/* ---------- Editor preview: always the finished composition ---------- */
.rv-editor-ssr .rv-align *,
.rv-editor-ssr .rv-align { animation: none !important; }
.rv-editor-ssr .rv-align__track { height: auto !important; }
.rv-editor-ssr .rv-align__stage { position: relative !important; height: auto !important; min-height: 720px; }
.rv-editor-ssr .rv-align__orbits { height: 720px; }