/* ==========================================================================
   Alqima Urban — Components: glass, editorial CTA, icons, language switch,
   video toggle, showreel dialog
   ========================================================================== */

/* ------------------------------------------------------------------ Icon */
.icon {
	width: 1em;
	height: 1em;
	flex: none;
}

/* Directional icons mirror in RTL (↗ becomes ↖). */
[dir="rtl"] .icon--arrow-ne,
[dir="rtl"] .icon--arrow-e {
	transform: scaleX(-1);
}

/* ----------------------------------------------------------------- Glass */
/* Restrained translucent surface. Never large, never glossy, no shadow.
   .glass         — quiet: follows the surface (small controls: play disc,
                    dialog close). Small blur.
   Tokens: tokens.css → "Glass UI system". */
.glass {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-inner);
	-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
	backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass {
		background: var(--glass-tint-solid);
	}
}

/* Users who ask for less transparency get solid surfaces. */
@media (prefers-reduced-transparency: reduce) {
	.glass,
	.site-header .site-header__glass {
		background: var(--glass-tint-solid);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.site-header.is-over-light .site-header__glass {
		background: rgb(var(--rgb-off-white) / 0.97);
	}
}

/* --------------------------------------------------------- Editorial CTA */
/* Small uppercase text + arrow, hairline underline. No fill, no shadow.
   Hover = arrow travels, label nudges, hairline sweeps. */
.cta {
	--cta-line: currentColor;
	--cta-shift: 2px;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	padding-block: 0.625rem;
	font-size: 0.75rem;
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	line-height: 1;
	color: var(--c-text);
	white-space: nowrap;
	cursor: pointer;
}

.cta__label {
	position: relative;
	display: inline-block;
	padding-block: 0.25rem 0.5rem;
	transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-soft);
}

/* resting hairline */
.cta__label::before,
.cta__label::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: var(--cta-line);
}

.cta__label::before {
	opacity: 0.32;
}

/* sweeping hairline */
.cta__label::after {
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--dur-4) var(--ease-out);
}

[dir="rtl"] .cta__label::after {
	transform-origin: left center;
}

.cta__icon {
	display: inline-grid;
	place-items: center;
	font-size: 0.9375rem;
	transition: transform var(--dur-3) var(--ease-out);
}

@media (hover: hover) {
	.cta:hover .cta__label {
		transform: translateX(var(--cta-shift));
	}

	[dir="rtl"] .cta:hover .cta__label {
		transform: translateX(calc(var(--cta-shift) * -1));
	}

	.cta:hover .cta__label::after {
		transform: scaleX(1);
		transform-origin: left center;
	}

	[dir="rtl"] .cta:hover .cta__label::after {
		transform-origin: right center;
	}

	/* Arrow movement: see interactions.css (arrow swap, Stage 08). */
}

/* Primary: the hover sweep carries the surface accent (beige on navy,
   burgundy on light surfaces). */
.cta--primary {
	--cta-line: var(--c-text);
}

.cta--primary .cta__label::after {
	background: var(--c-accent);
}

/* Quiet: no resting line (header). */
.cta--quiet .cta__label::before {
	opacity: 0;
}

/* Play / showreel: tiny glass disc + label. */
.cta--play {
	gap: 0.875rem;
}

.cta--play .cta__label::before {
	opacity: 0;
}

.cta__play {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	font-size: 0.6875rem;
	transition: border-color var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}

.cta__play .icon {
	transform: translateX(1px);
	transition: transform var(--dur-3) var(--ease-out);
}

[dir="rtl"] .cta__play .icon {
	/* play triangle keeps pointing "forward" in time — not mirrored */
	transform: translateX(1px);
}

@media (hover: hover) {
	.cta--play:hover .cta__play {
		border-color: var(--glass-border-strong);
		background: var(--glass-bg-strong);
	}

	.cta--play:hover .cta__play .icon {
		transform: translateX(2px);
	}
}

/* ---------------------------------------------------------- Video toggle */
.video-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--c-text-2);
	transition: color var(--dur-2) var(--ease-soft);
}

.video-toggle__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--glass-border);
	border-radius: 50%;
	font-size: 0.625rem;   /* icon size, not text */
}

.video-toggle__icon .icon {
	grid-area: 1 / 1;
}

.video-toggle .icon-play,
.video-toggle[data-paused="true"] .icon-pause {
	display: none;
}

.video-toggle[data-paused="true"] .icon-play {
	display: block;
}

@media (hover: hover) {
	.video-toggle:hover {
		color: var(--c-text);
	}
}

/* -------------------------------------------------------- Showreel dialog */
.showreel {
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: clamp(1rem, 4vw, 4rem);
	border: 0;
	background: transparent;
	color: var(--c-text);
	overflow: hidden;
}

.showreel[open] {
	display: grid;
	place-items: center;
}

.showreel::backdrop {
	background: rgb(var(--rgb-ink) / 0.86);
	-webkit-backdrop-filter: blur(24px) saturate(120%);
	backdrop-filter: blur(24px) saturate(120%);
}

.showreel__frame {
	position: relative;
	width: min(100%, calc((100dvh - 8rem) * 16 / 9), 96rem);
	aspect-ratio: 16 / 9;
	background: var(--c-canvas);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.showreel__player,
.showreel__player > video,
.showreel__player > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
	background: rgb(var(--rgb-ink));
}

.showreel__close {
	position: fixed;
	inset-block-start: clamp(1rem, 2.5vw, 2rem);
	inset-inline-end: clamp(1rem, 2.5vw, 2rem);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	font-size: 0.875rem;
	transition: background-color var(--dur-2) var(--ease-soft);
}

@media (hover: hover) {
	.showreel__close:hover {
		background: var(--glass-bg-strong);
	}
}

/* Dialog motion */
@media (prefers-reduced-motion: no-preference) {
	.showreel[open] .showreel__frame {
		animation: showreel-in 0.9s var(--ease-out) both;
	}

	.showreel[open]::backdrop {
		animation: fade-in 0.5s var(--ease-soft) both;
	}
}

@keyframes showreel-in {
	from { opacity: 0; transform: translateY(24px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}