/**
 * MHB Travel — "Passport found!" easter egg.
 *
 * A subtle animated passport tucked against an edge of one chosen trip page.
 * It peeks in with a gentle idle nudge; on hover or keyboard focus it slides
 * fully into view and the cover swings open to reveal the inner pages,
 * inviting a click through to the contact form.
 *
 * Which edge it peeks from is set under Tools → MHB Trips and applied via a
 * modifier class: .mhb-passport--right | --bottom | --left.
 *
 * Motion is fully disabled under prefers-reduced-motion — there the passport
 * simply sits visible at the edge and stays clickable.
 */

.mhb-passport {
	position: fixed;
	z-index: 60;
	display: block;
	width: 120px;
	height: 160px;
	text-decoration: none;
	-webkit-perspective: 900px;
	perspective: 900px;
	will-change: transform;
	transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.mhb-passport__book {
	position: absolute;
	inset: 0;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.mhb-passport__pages,
.mhb-passport__cover {
	position: absolute;
	inset: 0;
}

.mhb-passport__pages svg,
.mhb-passport__cover svg {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 12px 18px rgba(31, 42, 68, 0.28));
}

.mhb-passport__cover {
	z-index: 2;
	-webkit-transform-origin: right center;
	transform-origin: right center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* Instant snap back to cover on mouse-out so pages never show while closing. */
	transition: transform 0s;
}

.mhb-passport__pages {
	z-index: 1;
}

/* Cover swings open on reveal (shared across all positions). */
.mhb-passport:hover .mhb-passport__cover,
.mhb-passport:focus-visible .mhb-passport__cover {
	transform: rotateY(-152deg);
	/* Slow swing only on the way in. */
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.mhb-passport:hover,
.mhb-passport:focus-visible {
	animation: none;
	outline: none;
}

/* Subtle focus ring for keyboard users (drawn around the revealed booklet). */
.mhb-passport:focus-visible .mhb-passport__book {
	border-radius: 10px;
	box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.9);
}

/* ---- Right edge ---- */
.mhb-passport--right {
	right: -78px;
	top: calc(50% - 80px);
	animation: mhb-passport-peek-right 3.4s ease-in-out infinite;
}
.mhb-passport--right .mhb-passport__pages svg,
.mhb-passport--right .mhb-passport__cover svg {
	filter: drop-shadow(-8px 10px 18px rgba(31, 42, 68, 0.28));
}
.mhb-passport--right:hover,
.mhb-passport--right:focus-visible {
	transform: translateX(-94px) rotate(-3deg);
}
@keyframes mhb-passport-peek-right {
	0%, 100% { transform: translateX(0) rotate(2deg); }
	50% { transform: translateX(-9px) rotate(2deg); }
}

/* ---- Left edge ---- */
.mhb-passport--left {
	left: -78px;
	top: calc(50% - 80px);
	animation: mhb-passport-peek-left 3.4s ease-in-out infinite;
}
.mhb-passport--left .mhb-passport__pages svg,
.mhb-passport--left .mhb-passport__cover svg {
	filter: drop-shadow(8px 10px 18px rgba(31, 42, 68, 0.28));
}
.mhb-passport--left:hover,
.mhb-passport--left:focus-visible {
	transform: translateX(94px) rotate(3deg);
}
@keyframes mhb-passport-peek-left {
	0%, 100% { transform: translateX(0) rotate(-2deg); }
	50% { transform: translateX(9px) rotate(-2deg); }
}

/* ---- Bottom-left corner ---- */
.mhb-passport--bottom {
	left: clamp(12px, 4vw, 40px);
	bottom: -98px;
	animation: mhb-passport-peek-bottom 3.4s ease-in-out infinite;
}
.mhb-passport--bottom:hover,
.mhb-passport--bottom:focus-visible {
	transform: translateY(-106px) rotate(-3deg);
}
@keyframes mhb-passport-peek-bottom {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-9px) rotate(-2deg); }
}

/* Tuck it away on small screens — no hover affordance, limited room. */
@media (max-width: 600px) {
	.mhb-passport {
		width: 92px;
		height: 123px;
	}
	.mhb-passport--right {
		right: -60px;
		top: calc(50% - 61px);
	}
	.mhb-passport--right:hover,
	.mhb-passport--right:focus-visible {
		transform: translateX(-76px) rotate(-3deg);
	}
	.mhb-passport--left {
		left: -60px;
		top: calc(50% - 61px);
	}
	.mhb-passport--left:hover,
	.mhb-passport--left:focus-visible {
		transform: translateX(76px) rotate(3deg);
	}
	.mhb-passport--bottom {
		left: 10px;
		bottom: -78px;
	}
	.mhb-passport--bottom:hover,
	.mhb-passport--bottom:focus-visible {
		transform: translateY(-84px) rotate(-3deg);
	}
}

/* Respect reduced-motion: no nudge, no swing — just a visible, clickable booklet. */
@media (prefers-reduced-motion: reduce) {
	.mhb-passport--right,
	.mhb-passport--left,
	.mhb-passport--bottom {
		animation: none;
		transition: none;
	}
	.mhb-passport--right { right: 16px; }
	.mhb-passport--left { left: 16px; }
	.mhb-passport--bottom { bottom: 18px; }
	.mhb-passport:hover,
	.mhb-passport:focus-visible {
		transform: none;
	}
	.mhb-passport__cover,
	.mhb-passport:hover .mhb-passport__cover,
	.mhb-passport:focus-visible .mhb-passport__cover {
		transition: none;
		transform: none;
	}
}