/*
 * The entrance «من الجذور» (components/entrance/, front page, D-105).
 *
 * Everything here is hidden unless <html data-gb-intro="play"> — set in
 * <head> by the intro gate before the first paint, so the visitor never sees
 * the page flash before the entrance. While it plays the page does not
 * scroll. assets/js/components/entrance.js draws it and ends it by setting
 * data-gb-intro="done".
 *
 * Safety net: if the script never runs (blocked, an error), the CSS hides
 * the entrance by itself after 4.6 s (gb-entrance-away) — the page can
 * never stay covered.
 */

.gb-entrance,
.gb-entrance-front,
.gb-entrance-skip {
	display: none;
}

:root[data-gb-intro="play"] {
	overflow: hidden;
}

:root[data-gb-intro="play"] .gb-entrance,
:root[data-gb-intro="play"] .gb-entrance-front {
	display: block;
	animation: gb-entrance-away 0.01s linear 4.6s forwards;
}

@keyframes gb-entrance-away {
	to {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}
}

/* ---------- The ground and the sky ---------- */

/*
 * Until the canvas draws its first frame, the same picture in CSS: a band of
 * sky (30 % of the screen) over the soil, in the colours of the time of day
 * (data-gb-daypart, set by the gate from the Riyadh clock).
 */
.gb-entrance {
	--gb-ent-top: rgb(3 9 26);
	--gb-ent-low: rgb(14 38 76);
	--gb-ent-soil: rgb(10 24 50);
	--gb-ent-deep: rgb(2 6 16);

	position: fixed;
	inset: 0;
	z-index: 10001;
	overflow: hidden;
	background: linear-gradient(to bottom, var(--gb-ent-top) 0%, var(--gb-ent-low) 30%, var(--gb-ent-soil) 30%, var(--gb-ent-deep) 100%);
}

:root[data-gb-daypart="dawn"] .gb-entrance {
	--gb-ent-top: rgb(16 20 58);
	--gb-ent-low: rgb(150 100 140);
	--gb-ent-soil: rgb(22 20 48);
	--gb-ent-deep: rgb(5 5 16);
}

:root[data-gb-daypart="afternoon"] .gb-entrance {
	--gb-ent-top: rgb(14 24 48);
	--gb-ent-low: rgb(150 112 92);
	--gb-ent-soil: rgb(30 26 36);
	--gb-ent-deep: rgb(8 7 12);
}

.gb-entrance__world {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* Darker edges, like a lens. */
.gb-entrance__vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 75% at 50% 42%, transparent 55%, rgb(0 0 0 / 0.45) 100%);
	pointer-events: none;
}

/* ---------- The logo, the name, the line ---------- */

.gb-entrance-front {
	position: fixed;
	inset: 0;
	z-index: 10002;
	pointer-events: none;
}

/* Centred on the screen whatever the page's direction (the logo is never mirrored). */
.gb-entrance-front__stage {
	position: absolute;
	left: 50%;
	top: 40%;
	display: grid;
	justify-items: center;
	translate: -50% -50%;
}

.gb-entrance-front__seat {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: clamp(160px, 24vmin, 240px);
	aspect-ratio: 1;
}

.gb-entrance-front__mark {
	position: relative;
	inline-size: 76%;
	block-size: 76%;
	overflow: visible;
	opacity: 0;
}

.gb-entrance-front__band,
.gb-entrance-front__grow {
	fill: none;
	stroke: var(--gb-mark-stroke, #00CABE);
	stroke-width: 19.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gb-entrance-front__band {
	opacity: 0;
}

/* pathLength="1", a dash of 1 and a gap of 2: the script moves the offset from 1 (nothing) to 0 (all). */
.gb-entrance-front__grow {
	stroke-dasharray: 1 2;
	stroke-dashoffset: 1;
	opacity: 0;
}

.gb-entrance-front__head {
	fill: var(--gb-mark-stroke, #00CABE);
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transform: scale(0);
}

.gb-entrance-front__dash {
	fill: var(--gb-mark-dash, #004888);
	transform-box: fill-box;
	transform-origin: 0% 50%;
	transform: scaleX(0);
}

.gb-entrance-front__seed {
	fill: var(--gb-mark-point, #00A3C4);
	opacity: 0;
}

.gb-entrance-front__ring {
	fill: none;
	stroke: var(--gb-mark-point, #00A3C4);
	stroke-width: 1.5;
	opacity: 0;
}

.gb-entrance-front__name {
	margin: clamp(1.2rem, 3.5vh, 2rem) 0 0;
	font-family: var(--gb-font-display);
	font-size: clamp(2.6rem, 8vmin, 4.4rem);
	font-weight: var(--gb-weight-bold, 700);
	line-height: 1.1;
	color: #FFFFFF;
	white-space: nowrap;
	opacity: 0;
	/* No letter-spacing: Arabic letters must stay joined. */
}

/*
 * The name in the logo's lettering (inc/brand-name.php): the two lines of the
 * stacked official logo, as wide as the drawn mark above them (the mark is
 * 76 % of the seat, its drawing 90 % of its box), white like the rest here.
 */
.gb-entrance-front__name .gb-wordmark__art {
	inline-size: calc(clamp(160px, 24vmin, 240px) * 0.68);
	block-size: auto;
}

.gb-entrance-front__greet {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0.7rem 0 0;
	font-size: clamp(0.82rem, 2vmin, 0.98rem);
	color: rgb(255 255 255 / 0.7);
	white-space: nowrap;
	opacity: 0;
}

.gb-entrance-front__greet::before,
.gb-entrance-front__greet::after {
	content: "";
	inline-size: clamp(1.6rem, 5vmin, 3rem);
	block-size: 1px;
	background: rgb(255 255 255 / 0.35);
	scale: var(--gb-hair, 0) 1;
}

.gb-entrance-front__greet::before {
	transform-origin: left;
}

.gb-entrance-front__greet::after {
	transform-origin: right;
}

/* ---------- Skip ---------- */

:root[data-gb-intro="play"] .gb-entrance-skip:not([hidden]) {
	display: inline-flex;
}

.gb-entrance-skip {
	position: fixed;
	z-index: 10003;
	inset-block-start: clamp(1rem, 3.5vh, 2rem);
	inset-inline-end: clamp(1rem, 4vw, 2.5rem);
	align-items: center;
	min-block-size: 2.75rem;
	padding: 0.45rem 1.1rem;
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: var(--gb-radius-pill, 999px);
	background: rgb(6 14 30 / 0.28);
	color: #FFFFFF;
	font: inherit;
	font-size: var(--gb-step--1, 0.875rem);
	cursor: pointer;
	backdrop-filter: blur(8px);
}

.gb-entrance-skip:hover {
	border-color: rgb(255 255 255 / 0.6);
}

.gb-entrance-skip:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}