/* ==========================================================================
   Maroc Horizons — sections and destinations
   A cinematic opening from the section's own photographs, the place on the
   map for destinations, in-page filters and stories that arrive as you read.
   ========================================================================== */

.mhx-hero {
	--mhx-ease: cubic-bezier(.2, .75, .15, 1);
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: min(70vh, 40rem);
	overflow: hidden;
	color: #fff;
	background: var(--mhr-night);
}
.mhx-hero--plain {
	min-height: 0;
	background:
		radial-gradient(ellipse at 80% 20%, rgba(58, 92, 230, .55), transparent 60%),
		var(--mhr-majorelle-deep);
}
.mhx-hero__stage { position: absolute; inset: -6% 0 0; z-index: -3; transform: translate3d(0, var(--mhx-py, 0), 0); }
.mhx-hero__frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.mhx-hero__frame.is-active { opacity: 1; }
.mhx-hero__frame img, .mhx-hero__frame .mhr-thumb-missing {
	width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto;
	transform: scale(1.12); transition: transform 10s linear;
}
.mhx-hero__frame.is-active img { transform: scale(1.02); }
.mhx-hero__shade {
	position: absolute; inset: 0; z-index: -2;
	background:
		linear-gradient(to top, rgba(15, 20, 48, .96) 0%, rgba(15, 20, 48, .78) 38%, rgba(15, 20, 48, .3) 72%, rgba(15, 20, 48, .45) 100%),
		radial-gradient(ellipse at 0% 100%, rgba(15, 20, 48, .7), transparent 60%);
}
.mhx-hero__star {
	position: absolute; z-index: -1; top: 50%; right: -8vw;
	width: min(56vw, 40rem); height: auto; translate: 0 -50%;
	fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1; opacity: .5;
	animation: mhx-spin 180s linear infinite;
}
.mhx-hero__star * { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mhr-js .mhx-hero__star * { animation: mhx-draw 2.4s var(--mhx-ease) both; }
.mhx-hero__star :nth-child(2) { animation-delay: .15s; }
.mhx-hero__star :nth-child(3) { animation-delay: .3s; stroke: rgba(212, 149, 42, .9); }
.mhx-hero__star :nth-child(4) { animation-delay: .45s; }
.mhx-hero__star :nth-child(5) { animation-delay: .6s; }
@keyframes mhx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mhx-spin { to { rotate: 360deg; } }

.mhx-hero__inner {
	align-self: end;
	display: grid;
	gap: 2rem;
	width: 100%;
	max-width: var(--mhr-wide);
	margin: 0 auto;
	padding: 5.5rem var(--mhr-gutter) 3.25rem;
}
@media (min-width: 900px) {
	.mhx-hero__inner { grid-template-columns: minmax(0, 1fr) 15rem; align-items: end; gap: 4rem; }
}
.mhx-hero .mhr-crumbs, .mhx-hero .mhr-crumbs a { color: rgba(255, 255, 255, .72); }
.mhx-hero .mhr-crumbs a:hover { color: #fff; }
.mhx-hero__label {
	margin-top: .4rem;
	font-family: var(--mhr-sans);
	font-size: .9rem;
	font-weight: 600;
	color: #f2c46b;
}
.mhx-hero__title {
	max-width: 16ch;
	margin-top: .35rem;
	font-size: clamp(2.8rem, 1.4rem + 5.5vw, 6.4rem);
	font-weight: 500;
	line-height: .98;
	letter-spacing: -.03em;
	color: #fff;
	text-wrap: balance;
}
.mhx-w { display: inline-block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: bottom; }
.mhx-w > span { display: inline-block; transition: transform 1.05s var(--mhx-ease); transition-delay: calc(var(--w) * 70ms + .15s); }
.mhr-js .mhx-hero:not(.is-ready) .mhx-w > span { transform: translateY(108%); }
.mhx-hero__desc {
	max-width: 40rem;
	margin-top: 1.2rem;
	font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .86);
}
.mhx-hero__facts {
	display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
	margin: 1.5rem 0 0; padding: 0; list-style: none;
	font-family: var(--mhr-sans); font-size: .88rem; color: rgba(255, 255, 255, .72);
}
.mhx-hero__facts b { font-family: var(--mhr-serif); font-size: 1.6rem; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.mhx-hero__desc, .mhx-hero__facts { transition: opacity .9s ease .6s, translate .9s var(--mhx-ease) .6s; }
.mhr-js .mhx-hero:not(.is-ready) :is(.mhx-hero__desc, .mhx-hero__facts) { opacity: 0; translate: 0 .8rem; }

/* Where the destination is. */
.mhx-locator { margin: 0; justify-self: start; width: 10rem; }
@media (min-width: 900px) { .mhx-locator { justify-self: end; width: 13rem; } }
.mhx-locator svg { display: block; width: 100%; height: auto; overflow: visible; }
.mhx-locator__land {
	fill: rgba(255, 255, 255, .1);
	stroke: rgba(255, 255, 255, .85);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
.mhr-js .mhx-locator__land { transition: stroke-dashoffset 2.8s cubic-bezier(.5, 0, .2, 1) .4s, fill 1s ease 1.8s; }
.mhr-js .mhx-hero:not(.is-ready) .mhx-locator__land { stroke-dashoffset: 1; fill: rgba(255, 255, 255, 0); }
.mhx-locator__dot { fill: var(--mhr-saffron); stroke: #fff; stroke-width: 4; }
.mhx-locator__ring { fill: none; stroke: var(--mhr-saffron); stroke-width: 3; transform-box: fill-box; transform-origin: center; opacity: 0; animation: mhx-pulse 2.6s ease-out infinite 2.4s; }
.mhx-locator__ring--2 { animation-delay: 3.7s; }
@keyframes mhx-pulse { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(4.2); opacity: 0; } }
.mhr-js .mhx-locator g { transition: opacity .5s ease 2.2s, scale .7s cubic-bezier(.3, 1.6, .5, 1) 2.2s; transform-box: fill-box; }
.mhr-js .mhx-hero:not(.is-ready) .mhx-locator g { opacity: 0; scale: .2; }
.mhx-locator figcaption { margin-top: .6rem; font-family: var(--mhr-sans); font-size: .8rem; color: rgba(255, 255, 255, .7); }

/* ---------- Filters ---------- */

.mhx-archive { padding-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.mhx-filters {
	display: flex; flex-wrap: wrap; gap: .5rem;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--mhr-line);
}
.mhx-chip {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .5rem 1rem;
	border: 1px solid var(--mhr-line);
	border-radius: 999px;
	background: #fff;
	color: var(--mhr-ink);
	font: 500 .88rem/1.2 var(--mhr-sans);
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.mhx-chip span { font-size: .75rem; color: var(--mhr-muted); }
.mhx-chip:hover { border-color: var(--mhr-majorelle); color: var(--mhr-majorelle); transform: translateY(-1px); }
.mhx-chip.is-active { background: var(--mhr-majorelle); border-color: var(--mhr-majorelle); color: #fff; }
.mhx-chip.is-active span { color: rgba(255, 255, 255, .78); }
.mhx-chip:focus-visible { outline: 2px solid var(--mhr-majorelle); outline-offset: 2px; }
.mhx-none { margin-top: 1rem; color: var(--mhr-muted); font-family: var(--mhr-sans); }

.mhx-item, .mhx-feature { transition: opacity .45s ease, scale .45s ease; }
.mhx-item.is-out, .mhx-feature.is-out { opacity: 0; scale: .96; }
.mhx-item.is-gone, .mhx-feature.is-gone { display: none; }

/* ---------- Stories arrive as you read ---------- */

.mhr-js [data-mhx-reveal] { transition: opacity .9s ease, translate 1s var(--mhx-ease, cubic-bezier(.2, .75, .15, 1)); transition-delay: calc(var(--i, 0) * 110ms); }
.mhr-js [data-mhx-reveal]:not(.is-in) { opacity: 0; translate: 0 2rem; }
.mhr-js [data-mhx-reveal] .mhr-card__media img {
	transition: clip-path 1.2s cubic-bezier(.2, .75, .15, 1), scale 1.4s cubic-bezier(.2, .75, .15, 1), transform .8s ease;
	transition-delay: calc(var(--i, 0) * 110ms);
}
.mhr-js [data-mhx-reveal]:not(.is-in) .mhr-card__media img { clip-path: inset(14% 10% 14% 10%); scale: 1.18; }
.mhx-archive .mhr-card:hover .mhr-card__media img { transform: scale(1.045); }
.mhx-archive .mhr-card__media img { transition: transform .8s cubic-bezier(.2, .75, .15, 1); }

/* ---------- Onward routes ---------- */

.mhx-onward { margin-top: clamp(3.5rem, 7vw, 5.5rem); background: var(--mhr-plaster); }
.mhx-onward__inner { max-width: var(--mhr-wide); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--mhr-gutter); }
.mhx-onward__title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 520; letter-spacing: -.02em; }
.mhx-onward__list { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.mhx-onward__list a {
	display: inline-flex; align-items: baseline; gap: .55rem;
	padding: .65rem 1.15rem;
	border: 1px solid var(--mhr-line);
	border-radius: 999px;
	background: #fff;
	font-family: var(--mhr-serif);
	font-size: 1.12rem;
	color: var(--mhr-ink);
	text-decoration: none;
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.mhx-onward__list small { font-family: var(--mhr-sans); font-size: .75rem; color: var(--mhr-muted); }
.mhx-onward__list a:hover { background: var(--mhr-ink); border-color: var(--mhr-ink); color: #fff; transform: translateY(-2px); }
.mhx-onward__list a:hover small { color: rgba(255, 255, 255, .7); }
.mhx-onward + .mhr-footer, .mhx-onward ~ .mhr-footer { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.mhx-hero__star, .mhx-locator__ring { animation: none !important; }
	.mhx-hero__stage { transform: none; }
	.mhx-hero__frame img { transform: none !important; transition: none; }
	.mhr-js [data-mhx-reveal]:not(.is-in) { opacity: 1; translate: none; }
	.mhr-js [data-mhx-reveal]:not(.is-in) .mhr-card__media img { clip-path: none; scale: none; }
}
.mhr-main:has(.mhx-onward) { padding-bottom: 0; }
.mhx-hero__facts { align-items: baseline; }
@media (max-width: 899px) {
	.mhx-locator { position: absolute; top: 1.25rem; right: var(--mhr-gutter); width: 5.75rem; }
	.mhx-locator figcaption { display: none; }
	.mhx-hero__star { display: none; }
}