/* ------------------------------------------------------------------ */
/* Motion: "Lisbon metro" (assets/js/motion.js)                       */
/* Departure-board headings, train-door photo reveals, line lights.    */
/* Everything except the page doors waits for html.mh-motion, which    */
/* inc/setup.php sets only when motion is allowed.                     */
/* ------------------------------------------------------------------ */

:root {
	--mh-metro-red: #e03a3e;
	--mh-metro-yellow: #f2b705;
	--mh-metro-green: #12a150;
	--mh-metro-blue: #2f6fbf;
	--mh-door-ease: cubic-bezier(0.77, 0, 0.18, 1);
}

/* ---------- Page doors (every page; CSS only, so they work without motion.js) ---------- */

html.mh-doors-in::before,
html.mh-doors-in::after,
html.mh-doors-out::before,
html.mh-doors-out::after {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 100000;
	width: 50.5vw;
	pointer-events: none;
}

html.mh-doors-in::before,
html.mh-doors-out::before {
	left: 0;
	background: var(--mh-c-blue, #1f4e8c);
	box-shadow: inset -3px 0 0 var(--mh-metro-yellow);
}

html.mh-doors-in::after,
html.mh-doors-out::after {
	right: 0;
	background: var(--mh-c-ink, #171c29);
	box-shadow: inset 3px 0 0 var(--mh-metro-yellow);
}

html.mh-doors-in::before {
	animation: mh-door-open-l 0.55s var(--mh-door-ease) 0.05s both;
}

html.mh-doors-in::after {
	animation: mh-door-open-r 0.55s var(--mh-door-ease) 0.05s both;
}

html.mh-doors-out::before {
	animation: mh-door-close-l 0.3s var(--mh-door-ease) both;
}

html.mh-doors-out::after {
	animation: mh-door-close-r 0.3s var(--mh-door-ease) both;
}

@keyframes mh-door-open-l {
	from { transform: translateX(0); }
	to { transform: translateX(-101%); }
}

@keyframes mh-door-open-r {
	from { transform: translateX(0); }
	to { transform: translateX(101%); }
}

@keyframes mh-door-close-l {
	from { transform: translateX(-101%); }
	to { transform: translateX(0); }
}

@keyframes mh-door-close-r {
	from { transform: translateX(101%); }
	to { transform: translateX(0); }
}

/* ---------- Hidden until their intro runs (top of the page) ---------- */

.mh-motion .mh-hero__media,
.mh-motion .mh-hero__copy,
.mh-motion .mh-hero__bar,
.mh-motion .mh-hero__credit-wrap,
.mh-motion .mh-section-title,
.mh-motion .mh-inquiry__photo,
.mh-motion .mh-inquiry__main {
	visibility: hidden;
}

/* ---------- Departure-board letters ---------- */

.mh-flap-char {
	backface-visibility: hidden;
}

/* ---------- Train doors and slats over photos ---------- */

.mh-door,
.mh-slat {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
}

.mh-door--l {
	left: 0;
	width: 50.5%;
}

.mh-door--r {
	right: 0;
	width: 50.5%;
}

.mh-door--l::after,
.mh-door--r::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--mh-metro-yellow);
}

.mh-door--l::after {
	right: 0;
}

.mh-door--r::after {
	left: 0;
}

/* Hero: a warm light that follows the pointer. */
.mh-hero__glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at var(--mh-gx, 50%) var(--mh-gy, 50%), rgba(255, 190, 120, 0.55), rgba(255, 150, 90, 0.18) 22%, transparent 45%);
	mix-blend-mode: soft-light;
	transition: opacity 0.4s ease;
}

.mh-hero:hover .mh-hero__glow {
	opacity: 1;
}

/* Buttons: a sheen that sweeps across (--mh-sheen runs from -30 to 130). */
.mh-motion .mh-sheen {
	background-image: linear-gradient(110deg, transparent calc(var(--mh-sheen, -30) * 1% - 18%), rgba(255, 255, 255, 0.45) calc(var(--mh-sheen, -30) * 1%), transparent calc(var(--mh-sheen, -30) * 1% + 18%));
}

/* Apartment cards: tilt glare. */
.mh-glare {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at var(--mh-gx, 50%) var(--mh-gy, 50%), rgba(255, 255, 255, 0.5), transparent 55%);
	transition: opacity 0.3s ease;
}

.mh-apartment-card:hover .mh-glare {
	opacity: 1;
}

/* ---------- Commute map ---------- */

.mh-commute__map svg {
	display: block;
	width: 100%;
	height: auto;
}

.mh-commute__train {
	stroke: #fff;
	stroke-width: 2;
}

.mh-commute__ring {
	fill: none;
	stroke-width: 2.5;
	pointer-events: none;
}

.mh-commute__table tbody tr {
	transition: background-color 0.25s ease;
}

.mh-commute__table tbody tr.is-active {
	background-color: rgba(31, 78, 140, 0.07);
}

.mh-commute__table tbody tr.is-active .mh-commute__pin {
	background: var(--mh-c-blue, #1f4e8c);
	box-shadow: 0 0 0 4px rgba(31, 78, 140, 0.18);
}

.mh-commute__pin {
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* ---------- Rates: savings stamp ---------- */

.mh-rates__tier.has-stamp {
	position: relative;
}

.mh-rates__stamp {
	position: absolute;
	top: -14px;
	right: 0;
	z-index: 1;
	padding: 4px 10px;
	border: 2px solid currentColor;
	border-radius: 999px;
	color: #0b7a3e;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.02em;
	transform: rotate(-8deg);
	white-space: nowrap;
}

/* ---------- Banner: stopwatch ---------- */

.mh-banner__content.has-watch {
	position: relative;
}

.mh-banner__watch {
	position: absolute;
	top: -80px;
	left: 0;
	width: 56px;
	height: 56px;
}

.mh-banner__watch circle {
	fill: none;
	stroke-width: 4;
}

.mh-banner__watch .mh-banner__watch-track {
	stroke: rgba(255, 255, 255, 0.25);
}

.mh-banner__watch .mh-banner__watch-arc {
	stroke: var(--mh-metro-yellow);
	stroke-linecap: round;
}

/* ---------- Compare: highlighter bands and row sync ---------- */

.mh-compare__band {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 6px;
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.mh-motion .mh-compare__row {
	position: relative;
	isolation: isolate;
	transition: background-color 0.2s ease;
}

.mh-compare__row.is-sync {
	background-color: rgba(31, 78, 140, 0.07);
}

@media (hover: hover) and (min-width: 1025px) {
	.mh-motion .mh-compare__item {
		transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
	}

	.mh-motion .mh-compare__item:hover,
	.mh-motion .mh-compare__item:focus-within {
		transform: translateY(-6px);
		box-shadow: inset 0 4px 0 var(--mh-c-blue, #1f4e8c);
	}

	/* City notes: the card straightens and its photo warms up. */
	.mh-motion .mh-note-card {
		transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.mh-motion .mh-note-card:hover {
		transform: translateY(-4px) rotate(-0.6deg);
	}

	.mh-motion .mh-note-card__media img {
		transition: transform 0.4s ease, filter 0.4s ease;
	}

	.mh-motion .mh-note-card:hover .mh-note-card__media img {
		filter: saturate(1.35) contrast(1.05);
	}
}

/* ---------- Enquiry: sunset sweep, springy FAQ icon ---------- */

.mh-enquiry__sunset {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 140, 60, 0) 0%, rgba(255, 120, 70, 0.7) 35%, rgba(240, 80, 130, 0.55) 60%, rgba(255, 140, 60, 0) 100%);
	mix-blend-mode: overlay;
}

.mh-motion .mh-faq__icon {
	transition: transform 0.45s cubic-bezier(0.34, 1.8, 0.64, 1);
}

/* ---------- Plan your stay ---------- */

.mh-confetti {
	position: fixed;
	inset: 0;
	z-index: 9999;
	overflow: hidden;
	pointer-events: none;
}

.mh-confetti i {
	position: absolute;
	width: 8px;
	height: 12px;
	border-radius: 2px;
}

/* ---------- Metro line progress (desktop) ---------- */

.mh-rail {
	position: fixed;
	top: 50%;
	right: 22px;
	z-index: 90;
	width: 24px;
	height: 52vh;
	transform: translateY(-50%);
}

.mh-rail__track,
.mh-rail__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 11px;
	width: 2px;
	border-radius: 2px;
}

.mh-rail__track {
	background: var(--mh-c-line, #d4dce7);
}

.mh-rail__fill {
	background: linear-gradient(var(--mh-metro-red), var(--mh-metro-yellow), var(--mh-metro-green), var(--mh-metro-blue));
	transform: scaleY(0);
	transform-origin: 50% 0;
}

.mh-rail__stop {
	position: absolute;
	left: 4px;
	width: 16px;
	height: 16px;
	margin: -8px 0 0;
	padding: 0;
	border: 2px solid var(--mh-c-ink, #171c29);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.34, 1.8, 0.64, 1), border-color 0.3s ease, background-color 0.3s ease;
}

.mh-rail__stop.is-active {
	border-color: var(--mh-stop, var(--mh-c-blue, #1f4e8c));
	background: var(--mh-stop, var(--mh-c-blue, #1f4e8c));
	transform: scale(1.35);
}

.mh-rail__stop:focus-visible {
	outline: 2px solid var(--mh-c-blue, #1f4e8c);
	outline-offset: 3px;
}

.mh-rail__label {
	position: absolute;
	top: 50%;
	right: 26px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--mh-c-ink, #171c29);
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
	opacity: 0;
	transform: translate(6px, -50%);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.mh-rail__stop:hover .mh-rail__label,
.mh-rail__stop:focus-visible .mh-rail__label {
	opacity: 1;
	transform: translate(0, -50%);
}

@media (max-width: 1279px) {
	.mh-rail {
		display: none;
	}
}

/* ---------- Photos strip pinned horizontally on desktop ---------- */

@media (min-width: 1025px) {
	.mh-motion .mh-photos--scroll .mh-photos__strip.is-pinned {
		overflow: visible;
		scroll-snap-type: none;
	}
}