/**
 * Majra, front end.
 *
 * Two rules govern this file:
 *
 *   1. Not one colour, radius, font, shadow or measure is written here. Every
 *      one of them is a custom property set by the identity layer on
 *      .majra-page. If you find yourself typing a hex, the token is missing.
 *
 *   2. Logical properties only: inline-start, block-end, padding-inline. The
 *      pages this draws are Arabic first and English sometimes, and an RTL
 *      override section is a bug waiting to be written.
 *
 * Everything is scoped under .majra-page. The standalone document and the
 * shortcode share this file, and the shortcode version has to be a good guest
 * inside somebody else's layout.
 */

/* ── The surface ─────────────────────────────────────────── */

.majra-page {
	box-sizing: border-box;
	background: var(--majra-surface);
	background-attachment: var(--majra-bg-attach);
	color: var(--majra-ink);
	font-family: var(--majra-font);
	font-size: calc(16px * var(--majra-scale));
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.majra-page *,
.majra-page *::before,
.majra-page *::after {
	box-sizing: border-box;
}

/* The standalone document fills the viewport; the embedded one takes only the
   height it needs, because it is sitting inside a page that owns the rest. */
.majra-doc .majra-page {
	min-block-size: 100dvh;
}

.majra-doc--bar .majra-page {
	min-block-size: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	.majra-doc--bar .majra-page {
		min-block-size: calc(100dvh - 46px);
	}
}

.majra-stack {
	inline-size: 100%;
	max-inline-size: var(--majra-width);
	margin-inline: auto;
	padding-inline: var(--majra-pad);
	padding-block: calc(var(--majra-gap) * 2) calc(var(--majra-gap) * 3);
}

/* ── Rhythm ──────────────────────────────────────────────── */

/* The gap belongs to the block below it, so the first block never carries a
   margin it has nothing to be separated from. The space option therefore
   describes the space *before* its own block, and the selectors keep the
   adjacent-sibling requirement so that stays true at both ends. */
.majra-block + .majra-block {
	margin-block-start: var(--majra-gap);
}

.majra-block + .majra-block.majra-space--tight {
	margin-block-start: calc(var(--majra-gap) * .4);
}

.majra-block + .majra-block.majra-space--loose {
	margin-block-start: calc(var(--majra-gap) * 2.25);
}

/* ── Shared type ─────────────────────────────────────────── */

.majra-page a {
	color: inherit;
	text-decoration: none;
}

.majra-page img {
	max-inline-size: 100%;
	block-size: auto;
	display: block;
}

.majra-page p {
	margin-block: 0 .75em;
}

.majra-page p:last-child {
	margin-block-end: 0;
}

.majra-page :focus-visible {
	outline: 2px solid var(--majra-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Header ──────────────────────────────────────────────── */

.majra-header {
	text-align: center;
}

.majra-header__markwrap {
	inline-size: var(--majra-mark, 180px);
	margin-inline: auto;
	margin-block-end: .75rem;
}

.majra-header__mark {
	inline-size: 100%;
	block-size: auto;
}

.majra-header--round .majra-header__markwrap {
	block-size: var(--majra-mark, 180px);
	border-radius: 50%;
	overflow: hidden;
}

.majra-header--square .majra-header__markwrap {
	block-size: var(--majra-mark, 180px);
	border-radius: var(--majra-radius);
	overflow: hidden;
}

.majra-header--round .majra-header__mark,
.majra-header--square .majra-header__mark {
	block-size: 100%;
	object-fit: cover;
}

.majra-header__name {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35em;
	margin: 0;
	color: var(--majra-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.majra-verified {
	display: inline-flex;
	color: var(--majra-accent);
}

.majra-verified svg {
	inline-size: 1em;
	block-size: 1em;
}

.majra-header__bio {
	margin-block-start: .4rem;
	color: var(--majra-muted);
	font-size: .95rem;
}

/* ── Language switch ─────────────────────────────────────── */

.majra-lang {
	display: flex;
	justify-content: center;
	gap: .15rem;
	margin-block-start: .7rem;
}

.majra-lang__item {
	padding-inline: .55rem;
	padding-block: .12rem;
	border-radius: 999px;
	color: var(--majra-muted);
	font-size: .74rem;
	font-weight: 500;
	line-height: 1.8;
}

.majra-lang__item.is-current {
	background: color-mix(in srgb, var(--majra-ink) 8%, transparent);
	color: var(--majra-ink);
}

/* ── Hero ────────────────────────────────────────────────── */

.majra-hero {
	position: relative;
	border-radius: var(--majra-radius);
	overflow: hidden;
	box-shadow: var(--majra-shadow);
}

.majra-hero img {
	inline-size: 100%;
}

.majra-hero--square .majra-slides { aspect-ratio: 1 / 1; }
.majra-hero--wide   .majra-slides { aspect-ratio: 16 / 9; }
.majra-hero--photo  .majra-slides { aspect-ratio: 4 / 3; }
.majra-hero--tall   .majra-slides { aspect-ratio: 4 / 5; }

.majra-hero:not(.majra-hero--auto) .majra-slide,
.majra-hero:not(.majra-hero--auto) .majra-slide a,
.majra-hero:not(.majra-hero--auto) img {
	block-size: 100%;
	object-fit: cover;
}

/* ── Slider ──────────────────────────────────────────────── */

.majra-slider {
	--majra-slide-speed: 600ms;
}

.majra-slider .majra-slides {
	position: relative;
}

.majra-slider .majra-slide a {
	display: block;
}

/* Stacked: the first slide keeps the flow and therefore sets the height, the
   rest are layered over it. */
.majra-slider[data-mode="stack"] .majra-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	will-change: opacity, transform, filter;
	transition:
		opacity var(--majra-slide-speed) ease,
		transform var(--majra-slide-speed) ease,
		filter var(--majra-slide-speed) ease;
}

.majra-slider[data-mode="stack"] .majra-slide:first-child {
	position: relative;
}

.majra-slider[data-mode="stack"] .majra-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

.majra-slider[data-mode="stack"] .majra-slide.is-leaving {
	z-index: 1;
}

.majra-slider[data-mode="stack"] .majra-slide:not(:first-child) img {
	block-size: 100%;
	object-fit: cover;
}

/* Track: a horizontal slide. The maths is left-to-right even on an RTL page,
   which is why the track states its own direction rather than inheriting. */
.majra-slider[data-mode="track"] .majra-slides {
	display: flex;
	direction: ltr;
	transition: transform var(--majra-slide-speed) ease;
	will-change: transform;
}

.majra-slider[data-mode="track"] .majra-slide {
	flex: 0 0 100%;
	min-inline-size: 100%;
}

.majra-slider[data-effect="zoom"] .majra-slide { transform: scale(1.12); }
.majra-slider[data-effect="zoom"] .majra-slide.is-active { transform: scale(1); }

.majra-slider[data-effect="blur"] .majra-slide { filter: blur(14px); transform: scale(1.06); }
.majra-slider[data-effect="blur"] .majra-slide.is-active { filter: blur(0); transform: scale(1); }

.majra-slider[data-effect="flip"] .majra-slides { perspective: 1200px; }
.majra-slider[data-effect="flip"] .majra-slide { transform: rotateY(90deg); backface-visibility: hidden; }
.majra-slider[data-effect="flip"] .majra-slide.is-active { transform: rotateY(0); }
.majra-slider[data-effect="flip"] .majra-slide.is-leaving { transform: rotateY(-90deg); }

.majra-slider[data-effect="slide-up"] .majra-slide { opacity: 1; transform: translateY(100%); }
.majra-slider[data-effect="slide-up"] .majra-slide.is-active { transform: translateY(0); }
.majra-slider[data-effect="slide-up"] .majra-slide.is-leaving { opacity: 1; transform: translateY(-100%); }

.majra-slider[data-effect="kenburns"] .majra-slide.is-active img {
	animation: majra-kenburns 9s ease-out forwards;
}

@keyframes majra-kenburns {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

.majra-slider[data-effect="none"] .majra-slide { transition: none; }

/* ── Link ────────────────────────────────────────────────── */

.majra-link {
	display: flex;
	align-items: center;
	gap: .75rem;
	min-block-size: var(--majra-btn-h);
	padding-inline: 1rem;
	padding-block: .65rem;
	border-radius: var(--majra-btn-radius);
	font-weight: var(--majra-btn-weight);
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.majra-link__thumb {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: calc(var(--majra-btn-radius) * .6);
	overflow: hidden;
}

.majra-link__thumb svg {
	inline-size: 1.4rem;
	block-size: 1.4rem;
}

.majra-link__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.majra-link__body {
	flex: 1 1 auto;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .15rem;
	text-align: center;
}

/* A thumbnail turns the row into a real row: the text stops pretending to be
   centred in a space it no longer owns. */
.majra-link:has(.majra-link__thumb) .majra-link__body {
	align-items: flex-start;
	text-align: start;
}

.majra-link__title {
	inline-size: 100%;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.majra-link__sub {
	inline-size: 100%;
	color: var(--majra-muted);
	font-size: .82em;
	font-weight: 400;
	line-height: 1.4;
}

.majra-link--card .majra-link__thumb {
	inline-size: 3.25rem;
	block-size: 3.25rem;
}

.majra-link--feature {
	position: relative;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.majra-link--feature .majra-link__thumb {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 9;
	border-radius: 0;
}

.majra-link--feature .majra-link__body {
	align-items: center;
	text-align: center;
	padding-inline: 1rem;
	padding-block: .9rem;
}

/* ── Chips ───────────────────────────────────────────────── */

.majra-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-block-start: .1rem;
}

.majra-chip {
	display: inline-flex;
	align-items: center;
	padding-inline: .5rem;
	padding-block: .12rem;
	border-radius: 999px;
	font-size: .72em;
	font-weight: 500;
	line-height: 1.7;
	white-space: nowrap;
}

.majra-chip--neutral {
	background: color-mix(in srgb, var(--majra-ink) 8%, transparent);
	color: var(--majra-ink);
}

.majra-chip--quiet {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--majra-ink) 18%, transparent);
	color: var(--majra-muted);
}

.majra-chip--accent {
	background: var(--majra-accent);
	color: var(--majra-on-accent);
}

.majra-chip--warn {
	background: color-mix(in srgb, var(--majra-accent) 14%, transparent);
	color: var(--majra-accent);
}

/* ── Social ──────────────────────────────────────────────── */

.majra-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .6rem;
}

.majra-social__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--majra-social-size, 2.75rem);
	block-size: var(--majra-social-size, 2.75rem);
	color: var(--majra-ink);
	transition: transform .16s ease, background-color .16s ease, color .16s ease;
}

.majra-social--sm { --majra-social-size: 2.25rem; }
.majra-social--md { --majra-social-size: 2.75rem; }
.majra-social--lg { --majra-social-size: 3.25rem; }

.majra-social__item svg {
	inline-size: 55%;
	block-size: 55%;
}

.majra-social--bare .majra-social__item svg {
	inline-size: 68%;
	block-size: 68%;
}

.majra-social--circle .majra-social__item,
.majra-social--square .majra-social__item {
	background: var(--majra-card-bg);
	border: var(--majra-card-bw) solid var(--majra-card-border);
	box-shadow: var(--majra-shadow);
}

.majra-social--circle .majra-social__item { border-radius: 50%; }
.majra-social--square .majra-social__item { border-radius: var(--majra-btn-radius); }

.majra-social__item img {
	inline-size: 62%;
	block-size: 62%;
	object-fit: contain;
}

/* ── Grid ────────────────────────────────────────────────── */

.majra-grid {
	display: grid;
	grid-template-columns: repeat(var(--majra-cols, 3), minmax(0, 1fr));
	gap: var(--majra-gap);
}

.majra-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	padding: .6rem;
	background: var(--majra-card-bg);
	border: var(--majra-card-bw) solid var(--majra-card-border);
	border-radius: var(--majra-radius);
	box-shadow: var(--majra-shadow);
	transition: transform .16s ease, box-shadow .16s ease;
}

.majra-tile__media {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	overflow: hidden;
	border-radius: calc(var(--majra-radius) * .6);
}

.majra-grid--square .majra-tile__media { aspect-ratio: 1 / 1; }
.majra-grid--wide   .majra-tile__media { aspect-ratio: 16 / 10; }

.majra-grid--square .majra-tile__media img,
.majra-grid--wide .majra-tile__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.majra-tile__media svg {
	inline-size: 42%;
	block-size: 42%;
	color: var(--majra-accent);
}

.majra-tile__label {
	font-size: .78em;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	overflow-wrap: anywhere;
}

/* ── Apps ────────────────────────────────────────────────── */

.majra-apps {
	padding: 1rem;
	background: var(--majra-card-bg);
	border: var(--majra-card-bw) solid var(--majra-card-border);
	border-radius: var(--majra-radius);
	box-shadow: var(--majra-shadow);
}

.majra-apps__title {
	margin-block-end: .85rem;
	color: var(--majra-heading);
	font-size: 1.05rem;
	font-weight: 600;
	text-align: center;
}

.majra-apps__row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.majra-badge {
	flex: 1 1 8rem;
	display: flex;
	align-items: center;
	gap: .55rem;
	padding-inline: .8rem;
	padding-block: .5rem;
	border: 1px solid color-mix(in srgb, var(--majra-ink) 20%, transparent);
	border-radius: calc(var(--majra-btn-radius) * .8);
	transition: transform .16s ease, background-color .16s ease;
}

.majra-badge__icon {
	display: flex;
}

.majra-badge__icon svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.majra-badge__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-inline-size: 0;
}

.majra-badge__kicker {
	color: var(--majra-muted);
	font-size: .62rem;
	font-weight: 400;
}

.majra-badge__name {
	font-size: .95rem;
	font-weight: 600;
	white-space: nowrap;
}

.majra-badge--image {
	padding: 0;
	border: 0;
}

.majra-badge--image img {
	inline-size: 100%;
	block-size: auto;
}

/* ── Video ───────────────────────────────────────────────── */

.majra-video {
	border-radius: var(--majra-radius);
	overflow: hidden;
	box-shadow: var(--majra-shadow);
}

.majra-video__play {
	appearance: none;
	position: relative;
	display: block;
	inline-size: 100%;
	padding: 0;
	border: 0;
	background: color-mix(in srgb, var(--majra-ink) 8%, transparent);
	cursor: pointer;
}

.majra-video--wide   .majra-video__play,
.majra-video--wide   iframe { aspect-ratio: 16 / 9; }
.majra-video--square .majra-video__play,
.majra-video--square iframe { aspect-ratio: 1 / 1; }
.majra-video--tall   .majra-video__play,
.majra-video--tall   iframe { aspect-ratio: 9 / 16; }

.majra-video__play img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.majra-video__mark {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	inline-size: 3.4rem;
	block-size: 3.4rem;
	border-radius: 50%;
	background: var(--majra-card-bg);
	color: var(--majra-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	transition: scale .16s ease;
}

.majra-video__play:hover .majra-video__mark {
	scale: 1.06;
}

.majra-video__mark svg {
	inline-size: 1.8rem;
	block-size: 1.8rem;
}

.majra-video iframe {
	display: block;
	inline-size: 100%;
	border: 0;
}

.majra-video__title {
	margin-block: .45rem 0;
	color: var(--majra-muted);
	font-size: .82rem;
	text-align: center;
}

/* ── Embed ───────────────────────────────────────────────── */

.majra-embed {
	border-radius: var(--majra-radius);
	overflow: hidden;
	box-shadow: var(--majra-shadow);
}

.majra-embed iframe,
.majra-embed embed,
.majra-embed object {
	display: block;
	inline-size: 100%;
	block-size: var(--majra-embed-h, 300px);
	border: 0;
}

/* ── FAQ ─────────────────────────────────────────────────── */

.majra-faq {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.majra-faq__item {
	background: var(--majra-card-bg);
	border: var(--majra-card-bw) solid var(--majra-card-border);
	border-radius: var(--majra-radius);
	box-shadow: var(--majra-shadow);
	overflow: hidden;
}

.majra-faq__item > summary {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .8rem 1rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.majra-faq__item > summary::-webkit-details-marker {
	display: none;
}

.majra-faq__item > summary::after {
	content: "";
	flex: 0 0 auto;
	margin-inline-start: auto;
	inline-size: .5rem;
	block-size: .5rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	rotate: 45deg;
	opacity: .5;
	transition: rotate .16s ease;
}

.majra-faq__item[open] > summary::after {
	rotate: 225deg;
}

.majra-faq__a {
	padding: 0 1rem .85rem;
	color: var(--majra-muted);
	font-size: .9rem;
}

/* ── Locations ───────────────────────────────────────────── */

.majra-places {
	display: flex;
	flex-direction: column;
	gap: var(--majra-gap);
}

.majra-place {
	padding: .85rem 1rem;
	background: var(--majra-card-bg);
	border: var(--majra-card-bw) solid var(--majra-card-border);
	border-radius: var(--majra-radius);
	box-shadow: var(--majra-shadow);
}

.majra-place__head {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-wrap: wrap;
}

.majra-place__name {
	font-weight: 600;
}

.majra-place__line {
	margin-block: .25rem 0;
	color: var(--majra-muted);
	font-size: .85rem;
}

.majra-place__line--quiet {
	font-size: .78rem;
	opacity: .85;
}

.majra-place__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-block-start: .65rem;
}

.majra-place__action {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding-inline: .6rem;
	padding-block: .3rem;
	border: 1px solid color-mix(in srgb, var(--majra-ink) 18%, transparent);
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 500;
}

.majra-place__action svg {
	inline-size: .95rem;
	block-size: .95rem;
	color: var(--majra-accent);
}

/* ── Form ────────────────────────────────────────────────── */

.majra-form__title {
	margin-block-end: .6rem;
	color: var(--majra-heading);
	font-size: 1.05rem;
	font-weight: 600;
	text-align: center;
}

/* ── Text, image, divider, footer ────────────────────────── */

.majra-text--sm { font-size: .85rem; }
.majra-text--lg { font-size: 1.15rem; }

.majra-text a {
	text-decoration: underline;
	text-underline-offset: .2em;
	color: var(--majra-accent);
}

.majra-image {
	margin: 0;
}

.majra-image img {
	inline-size: 100%;
	border-radius: var(--majra-radius);
	box-shadow: var(--majra-shadow);
}

.majra-image--bleed {
	/* Out to the edges of the stack's padding, never to the edges of the
	   viewport: 100vw includes the scrollbar and would overflow the page. */
	margin-inline: calc(var(--majra-pad) * -1);
}

.majra-image--bleed img {
	border-radius: 0;
}

.majra-image figcaption {
	margin-block-start: .4rem;
	color: var(--majra-muted);
	font-size: .8rem;
	text-align: center;
}

.majra-divider--space {
	block-size: var(--majra-divider, 24px);
}

.majra-divider--line {
	block-size: 0;
	margin-block: calc(var(--majra-divider, 24px) / 2);
	border: 0;
	border-block-start: 1px solid color-mix(in srgb, var(--majra-ink) 14%, transparent);
}

.majra-divider--label {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: var(--majra-muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.majra-divider--label::before,
.majra-divider--label::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background: color-mix(in srgb, var(--majra-ink) 14%, transparent);
}

.majra-footer {
	text-align: center;
	color: var(--majra-muted);
	font-size: .82rem;
}

.majra-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem 1rem;
	margin-block: .6rem;
}

.majra-footer__links a {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.majra-footer__copy {
	margin-block: .6rem 0;
	font-size: .75rem;
}

/* ── Button style, chosen once for the whole page ────────── */

.majra-btn--card .majra-link {
	background: var(--majra-card-bg);
	border: var(--majra-card-bw) solid var(--majra-card-border);
	box-shadow: var(--majra-shadow);
}

.majra-btn--card .majra-link__thumb {
	background: color-mix(in srgb, var(--majra-accent) 10%, transparent);
	color: var(--majra-accent);
}

.majra-btn--solid .majra-link {
	background: var(--majra-accent);
	color: var(--majra-on-accent);
	border: 0;
}

.majra-btn--solid .majra-link__sub {
	color: color-mix(in srgb, var(--majra-on-accent) 75%, transparent);
}

.majra-btn--solid .majra-link__thumb {
	background: color-mix(in srgb, var(--majra-on-accent) 16%, transparent);
	color: var(--majra-on-accent);
}

.majra-btn--outline .majra-link {
	background: transparent;
	border: 1.5px solid var(--majra-accent);
	color: var(--majra-accent);
}

.majra-btn--outline .majra-link__sub {
	color: color-mix(in srgb, var(--majra-accent) 70%, transparent);
}

.majra-btn--soft .majra-link {
	background: color-mix(in srgb, var(--majra-accent) 12%, transparent);
	border: 0;
	color: var(--majra-accent);
}

.majra-btn--soft .majra-link__sub {
	color: color-mix(in srgb, var(--majra-accent) 72%, transparent);
}

/* ── Highlight ───────────────────────────────────────────── */

.majra-link.is-highlighted {
	position: relative;
	overflow: hidden;
}

.majra-link.is-highlighted::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -60%;
	inline-size: 40%;
	background: linear-gradient(
		100deg,
		transparent,
		color-mix(in srgb, var(--majra-ink) 9%, transparent),
		transparent
	);
	animation: majra-shine 3.6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes majra-shine {
	0%, 55% { transform: translateX(0); }
	100%    { transform: translateX(400%); }
}

/* ── Motion ──────────────────────────────────────────────── */

.majra-in--fade .majra-block,
.majra-in--rise .majra-block {
	animation: majra-in .45s cubic-bezier(.2, .7, .3, 1) backwards;
}

.majra-in--rise .majra-block {
	animation-name: majra-rise;
}

/* A short stagger down the first several blocks. Past that everything is below
   the fold anyway and a growing delay would read as the page hanging. */
.majra-stack > .majra-block:nth-child(1) { animation-delay: 0ms; }
.majra-stack > .majra-block:nth-child(2) { animation-delay: 45ms; }
.majra-stack > .majra-block:nth-child(3) { animation-delay: 90ms; }
.majra-stack > .majra-block:nth-child(4) { animation-delay: 135ms; }
.majra-stack > .majra-block:nth-child(5) { animation-delay: 180ms; }
.majra-stack > .majra-block:nth-child(n+6) { animation-delay: 215ms; }

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

@keyframes majra-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.majra-press--sink .majra-link:active,
.majra-press--sink .majra-tile:active,
.majra-press--sink .majra-badge:active,
.majra-press--sink .majra-social__item:active {
	transform: scale(.977);
}

.majra-press--lift .majra-link:active,
.majra-press--lift .majra-tile:active,
.majra-press--lift .majra-badge:active,
.majra-press--lift .majra-social__item:active {
	transform: translateY(-2px);
}

@media (hover: hover) {
	.majra-press--lift .majra-link:hover,
	.majra-press--lift .majra-tile:hover {
		transform: translateY(-2px);
	}
}

/* The studio sets this on the wrapper after a live-preview swap. Replaying the
   entrance on every keystroke is noise, and the first paint of the frame has
   already shown what the entrance looks like. Nothing else sets it. */
.majra-page[data-motion="off"] .majra-block {
	animation: none;
}

/* Motion is decoration here, never information. Everything above can go. */
@media (prefers-reduced-motion: reduce) {
	.majra-page *,
	.majra-page *::before,
	.majra-page *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}

	.majra-link.is-highlighted::after {
		display: none;
	}
}

/* ── Empty state, editors only ───────────────────────────── */

.majra-empty {
	padding: 3rem 1rem;
	border: 1px dashed color-mix(in srgb, var(--majra-ink) 25%, transparent);
	border-radius: var(--majra-radius);
	color: var(--majra-muted);
	text-align: center;
}

.majra-empty a {
	color: var(--majra-accent);
	text-decoration: underline;
	text-underline-offset: .2em;
}