/* Bellora Hero — layout and chrome. All colour/type reads design tokens. */

.bellora-hero {
	--bellora-hero-height: 100vh;
	--bellora-hero-ink: #ffffff;
	position: relative;
	height: var(--bellora-hero-height);
	min-height: 420px;
	overflow: hidden;
	color: var(--bellora-hero-ink);
	background: var(--bellora-color-surface-invert);
}

/* ------------------------------------------------ entrance
 *
 * Armed by the motion layer's html class; the slider's is-ready flag (set on
 * boot) plays the sequence: the image settles from a slow overscale while the
 * kicker, the title block and the control bar arrive one after another. The
 * engine animates individual titles per frame, so only their container is
 * staged here.
 * ------------------------------------------------ */

.bellora-motion .bellora-hero__viewport {
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 1.2s var(--bellora-motion-easing), transform 2s var(--bellora-motion-easing);
}

.bellora-motion .bellora-hero.is-ready .bellora-hero__viewport {
	opacity: 1;
	transform: none;
}

.bellora-motion .bellora-hero__kicker,
.bellora-motion .bellora-hero__bar,
.bellora-motion .bellora-hero__side {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.9s var(--bellora-motion-easing), transform 0.9s var(--bellora-motion-easing);
}

.bellora-motion .bellora-hero__side {
	transform: translateY(-50%) translateX(0.75rem);
}

.bellora-motion .bellora-hero__kicker {
	transition-delay: 0.55s;
}

.bellora-motion .bellora-hero__bar,
.bellora-motion .bellora-hero__side {
	transition-delay: 0.95s;
}

.bellora-motion .bellora-hero__ring {
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 1.4s var(--bellora-motion-easing) 0.2s, transform 1.4s var(--bellora-motion-easing) 0.2s;
}

/* The intro wipes the title in from its top edge. The side insets stay
   slightly negative so italic overhangs are not shaved off. */
.bellora-motion .bellora-hero__titles {
	clip-path: inset(0 -0.15em 100% -0.15em);
	transition: clip-path 1.2s var(--bellora-motion-easing) 0.65s;
}

.bellora-motion .bellora-hero.is-ready .bellora-hero__kicker,
.bellora-motion .bellora-hero.is-ready .bellora-hero__bar {
	opacity: 1;
	transform: none;
}

.bellora-motion .bellora-hero.is-ready .bellora-hero__side {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

.bellora-motion .bellora-hero.is-ready .bellora-hero__ring {
	opacity: 1;
	transform: scale(1);
}

/* Settled state must not clip below the line: the per-slide CTA sits under
   the title inside this same box, and a tight bottom inset would swallow it. */
.bellora-motion .bellora-hero.is-ready .bellora-hero__titles {
	clip-path: inset(-0.2em -50% -200% -50%);
}

/* ------------------------------------------------ slides */

.bellora-hero__viewport {
	position: absolute;
	inset: 0;
	touch-action: pan-y;
}

.bellora-hero.is-draggable .bellora-hero__viewport {
	cursor: grab;
}

.bellora-hero.is-dragging .bellora-hero__viewport {
	cursor: grabbing;
}

.bellora-hero__slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	will-change: transform;
}

.bellora-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

/* A single wash over the whole stage, above whichever layer is painting. */
.bellora-hero__shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--bellora-hero-overlay-color, #101010);
	opacity: var(--bellora-hero-overlay-opacity, 0.2);
	pointer-events: none;
}

.bellora-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

/* The DOM slides stay visible until the shader actually paints. */
.bellora-hero.is-webgl-painted .bellora-hero__canvas {
	opacity: 1;
}

.bellora-hero.is-webgl-painted .bellora-hero__slide img {
	visibility: hidden;
}


/* ------------------------------------------------ decorative ring
 *
 * A thin circle centred behind the title — pure ornament, sized off the
 * smaller viewport dimension so it stays proportionate at any width.
 * ------------------------------------------------ */

.bellora-hero__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: min(64vh, 74vw, 760px);
	height: min(64vh, 74vw, 760px);
	transform: translate(-50%, -50%);
	border: 1px solid color-mix(in srgb, var(--bellora-hero-ink) 22%, transparent);
	border-radius: 50%;
	pointer-events: none;
}

/* ------------------------------------------------ content
 *
 * Centred over the frame, per-slide titles stacked and cross-faded by the
 * engine (renderTitles in hero.js) — this block only sets where the whole
 * stack sits, never the per-slide transform.
 * ------------------------------------------------ */

.bellora-hero__content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-inline: var(--bellora-layout-edge);
	text-align: center;
	pointer-events: none;
	/* A soft centred pool of shadow — the title now sits mid-frame rather
	   than on the bottom edge, so legibility comes from here rather than
	   from the top/bottom band scrims alone. */
	background: radial-gradient(
		circle,
		rgba(10, 10, 10, var(--bellora-hero-scrim-center, 0.32)) 0%,
		rgba(10, 10, 10, calc(var(--bellora-hero-scrim-center, 0.32) * 0.4)) 38%,
		transparent 62%
	);
}

.bellora-hero__kicker {
	margin: 0 0 clamp(1rem, 2.4vh, 1.75rem);
	font-family: var(--bellora-font-ui);
	font-size: var(--bellora-size-xs);
	font-weight: var(--bellora-weight-medium);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	opacity: 0.85;
}

.bellora-hero__titles {
	position: relative;
	width: 100%;
	min-height: 1.1em;
	font-size: clamp(2.75rem, 7.4vw, 6.5rem);
}

.bellora-hero__title {
	position: absolute;
	inset-inline: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	font-family: var(--bellora-font-display);
	font-size: inherit;
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: inherit;
	will-change: transform, opacity;
}

.bellora-hero__title a {
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
}

/* The optional per-slide button, faded in step with its title since it
   lives inside the same absolutely-positioned element. */
.bellora-hero__cta {
	display: inline-flex;
	align-items: center;
	margin-top: clamp(1.75rem, 3.4vw, 2.5rem);
	padding: 0.875rem 2rem;
	border: 1px solid color-mix(in srgb, var(--bellora-hero-ink) 55%, transparent);
	border-radius: var(--bellora-radius-full);
	font-family: var(--bellora-font-ui);
	font-size: 12px;
	font-weight: var(--bellora-weight-medium);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	pointer-events: auto;
	transition: background var(--bellora-motion-base) var(--bellora-motion-easing),
		color var(--bellora-motion-base) var(--bellora-motion-easing),
		border-color var(--bellora-motion-base) var(--bellora-motion-easing);
}

.bellora-hero__cta:hover,
.bellora-hero__cta:focus-visible {
	background: var(--bellora-hero-ink);
	border-color: var(--bellora-hero-ink);
	color: var(--bellora-color-surface-invert);
}

/* ------------------------------------------------ side arrows
 *
 * Vertically centred on the edges — same .bellora-hero__arrow(--prev/--next)
 * classes the engine binds its click handlers to, only repositioned.
 * ------------------------------------------------ */

.bellora-hero__side {
	position: absolute;
	top: 50%;
	z-index: 4;
	transform: translateY(-50%);
}

.bellora-hero__side--prev {
	left: clamp(1rem, 3vw, 2.5rem);
}

.bellora-hero__side--next {
	right: clamp(1rem, 3vw, 2.5rem);
}

.bellora-hero__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--bellora-hero-ink) 36%, transparent);
	border-radius: var(--bellora-radius-full);
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background var(--bellora-motion-base) var(--bellora-motion-easing),
		color var(--bellora-motion-base) var(--bellora-motion-easing),
		border-color var(--bellora-motion-base) var(--bellora-motion-easing);
}

.bellora-hero__arrow:hover,
.bellora-hero__arrow:focus-visible {
	background: var(--bellora-hero-ink);
	border-color: var(--bellora-hero-ink);
	color: var(--bellora-color-surface-invert);
}

.bellora-hero__arrow svg {
	width: 1.375rem;
	height: 0.6875rem;
}

/* ------------------------------------------------ bottom bar
 *
 * Three zones: hint + meta link on the left, dot pagination centred, the
 * Roman-numeral index on the right.
 * ------------------------------------------------ */

.bellora-hero__bar {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3.4vh, 2.25rem) var(--bellora-layout-edge);
	font-family: var(--bellora-font-ui);
}

.bellora-hero__bar-start,
.bellora-hero__bar-end {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.bellora-hero__bar-end {
	justify-content: flex-end;
}

/* The hint rolls rather than sits still: a one-line window over a label that
   is repeated underneath by a pseudo-element, so travelling up exactly one
   line lands on an identical copy and the loop has no seam. */
.bellora-hero__hint {
	display: inline-block;
	height: 1.7em;
	overflow: hidden;
	font-size: 12px;
	font-weight: var(--bellora-weight-medium);
	line-height: 1.7;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	opacity: 0.8;
	vertical-align: top;
}

.bellora-hero__hint-roll {
	display: block;
	animation: bellora-hero-hint-roll 3.6s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.bellora-hero__hint-roll::after {
	content: attr(data-text);
	display: block;
}

/* Rests for most of the cycle, then travels the line in the last quarter. */
@keyframes bellora-hero-hint-roll {
	0%,
	72% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bellora-hero__hint-roll {
		animation: none;
	}
}

/* Dots: the active one earns a ring that quietly counts down the autoplay
   interval — a CSS animation re-armed each time .is-active lands on a new
   dot, so it never has to touch the JS-owned page-fill transform. */
.bellora-hero__pagination {
	display: flex;
	align-items: center;
	gap: clamp(0.875rem, 2vw, 1.375rem);
}

.bellora-hero__page {
	position: relative;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.bellora-hero__page-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--bellora-hero-ink) 55%, transparent);
	transition: background var(--bellora-motion-base) var(--bellora-motion-easing),
		transform var(--bellora-motion-base) var(--bellora-motion-easing);
}

.bellora-hero__page::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--bellora-hero-ink);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.3s var(--bellora-motion-easing), transform 0.3s var(--bellora-motion-easing);
}

.bellora-hero__page:hover .bellora-hero__page-dot {
	background: var(--bellora-hero-ink);
}

.bellora-hero__page.is-active .bellora-hero__page-dot {
	background: var(--bellora-hero-ink);
	transform: scale(1.15);
}

.bellora-hero__page.is-active::before {
	opacity: 0.28;
	transform: scale(1);
}

/* The engine writes a 0→1 progress value for the active dot into
   --bellora-hero-page-progress every frame during autoplay; a conic-gradient
   ring traces it clockwise, masked down to a thin stroke around the dot. */
.bellora-hero__page-fill {
	--bellora-hero-page-progress: 0;
	position: absolute;
	inset: 0;
	border-radius: 50%;
	opacity: 0;
	background: conic-gradient(
		var(--bellora-hero-ink) calc(var(--bellora-hero-page-progress) * 360deg),
		transparent 0
	);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
	transition: opacity 0.25s var(--bellora-motion-easing);
}

.bellora-hero__page.is-active .bellora-hero__page-fill {
	opacity: 1;
}

/* Roman-numeral index: an oversized fraction — the current numeral set high
   and left, a long hairline descending across the middle, the total tucked
   small under its lower end. */
.bellora-hero__index {
	position: relative;
	display: inline-block;
	width: 4.25rem;
	height: 4rem;
	font-family: var(--bellora-font-display);
	letter-spacing: 0.02em;
}

.bellora-hero__index-current {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	overflow: hidden;
	min-width: 1.5em;
	height: 1.15em;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 300;
	line-height: 1.15;
}

/* Roman numeral rolls up and out while its replacement rolls up into place,
   instead of snapping to the new value on slide change. */
.bellora-hero__count-current {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	transform: translate3d(0, 0, 0);
	opacity: 1;
	transition: transform 0.6s var(--bellora-motion-easing), opacity 0.6s var(--bellora-motion-easing);
	will-change: transform, opacity;
}

.bellora-hero__count-current.is-entering {
	transform: translate3d(0, 100%, 0);
	opacity: 0;
}

.bellora-hero__count-current.is-leaving {
	transform: translate3d(0, -100%, 0);
	opacity: 0;
}

/* A vertical hairline rotated clockwise reads as a long, shallow "/": its
   top end swings right toward the total, its foot left under the numeral. */
.bellora-hero__index-slash {
	position: absolute;
	top: 0.85rem;
	inset-inline-start: 2.1rem;
	width: 1px;
	height: 2.7rem;
	background: color-mix(in srgb, var(--bellora-hero-ink) 38%, transparent);
	transform: rotate(40deg);
	transform-origin: center;
}

.bellora-hero__index-total {
	position: absolute;
	bottom: 0.25rem;
	inset-inline-end: 0;
	font-size: var(--bellora-size-sm);
	font-weight: 300;
	line-height: 1;
	opacity: 0.5;
}

/* ------------------------------------------------ small screens */

@media (max-width: 767px) {
	.bellora-hero__bar-start {
		display: none;
	}

	.bellora-hero__side {
		width: 2.25rem;
		height: 2.25rem;
	}

	.bellora-hero__side--prev {
		left: 0.75rem;
	}

	.bellora-hero__side--next {
		right: 0.75rem;
	}

	.bellora-hero__ring {
		width: min(78vh, 92vw, 560px);
		height: min(78vh, 92vw, 560px);
	}
}

/* ------------------------------------------------ readability scrims
 *
 * Bright frames — fog, white dresses, blown-out skies — swallow the white UI.
 * A flat overlay would fix that by flattening the whole picture, so instead two
 * directional gradients darken only the bands the interface actually occupies:
 * the top strip under the header, and the bottom third under the kicker, the
 * title and the control bar. The middle of the image stays untouched.
 *
 * Both are tunable per instance via the two custom properties below.
 * ------------------------------------------------ */

.bellora-hero {
	--bellora-hero-scrim-top: 0.3;
	--bellora-hero-scrim-bottom: 0.62;
}

.bellora-hero::before,
.bellora-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	z-index: 2;
	pointer-events: none;
}

.bellora-hero::before {
	top: 0;
	height: 28vh;
	background: linear-gradient(
		to bottom,
		rgba(12, 12, 12, var(--bellora-hero-scrim-top)) 0%,
		rgba(12, 12, 12, calc(var(--bellora-hero-scrim-top) * 0.4)) 50%,
		transparent 100%
	);
}

.bellora-hero::after {
	bottom: 0;
	height: 64vh;
	background: linear-gradient(
		to top,
		rgba(12, 12, 12, var(--bellora-hero-scrim-bottom)) 0%,
		rgba(12, 12, 12, calc(var(--bellora-hero-scrim-bottom) * 0.5)) 30%,
		transparent 100%
	);
}

/* A whisper of shadow catches the few pixels the gradients cannot. */
.bellora-hero__kicker,
.bellora-hero__titles,
.bellora-hero__bar {
	text-shadow: 0 1px 28px rgba(0, 0, 0, 0.35);
}