/**
 * Luxury motion & golden light for Minh Phát Hotel.
 * Loaded after refinements.css — additive only.
 */

/* --------------------------------------------------------------------------
   Atmosphere — soft gold radiance
   -------------------------------------------------------------------------- */

body.mph-theme {
	background-image:
		radial-gradient(ellipse 90% 55% at 8% -5%, rgba(242, 189, 62, 0.1), transparent 52%),
		radial-gradient(ellipse 70% 45% at 95% 12%, rgba(212, 166, 42, 0.08), transparent 48%),
		radial-gradient(ellipse 50% 35% at 50% 100%, rgba(7, 59, 45, 0.05), transparent 55%);
}

.mph-section--about,
.mph-section--rooms,
.mph-section--social-proof,
.mph-section--offer {
	position: relative;
	isolation: isolate;
}

.mph-section--about::before,
.mph-section--rooms::before {
	content: "";
	position: absolute;
	inset: 8% auto auto 50%;
	width: min(720px, 90vw);
	height: 280px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(242, 189, 62, 0.09), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.mph-section--about > *,
.mph-section--rooms > * {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Reveal on scroll — richer motion
   -------------------------------------------------------------------------- */

.mph-reveal {
	opacity: 0;
	transform: translateY(32px) scale(0.985);
	filter: blur(2px);
	transition:
		opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.95s ease;
	will-change: opacity, transform, filter;
}

.mph-reveal.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
}

.mph-hero .mph-reveal {
	opacity: 0;
	transform: translateY(24px);
	filter: none;
}

.mph-hero .mph-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.mph-hero .mph-reveal:nth-child(1) { transition-delay: 0.05s; }
.mph-hero .mph-reveal:nth-child(2) { transition-delay: 0.18s; }
.mph-hero .mph-reveal:nth-child(3) { transition-delay: 0.3s; }
.mph-hero .mph-reveal:nth-child(4) { transition-delay: 0.42s; }
.mph-hero .mph-reveal:nth-child(5) { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
	.mph-reveal,
	.mph-hero .mph-reveal {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Hero — ken burns + gold aura + particles
   -------------------------------------------------------------------------- */

.mph-hero {
	position: relative;
	overflow: hidden;
}

.mph-hero__overlay {
	opacity: 1;
	background:
		radial-gradient(ellipse 50% 65% at 22% 42%, rgba(242, 189, 62, 0.16), transparent 62%),
		radial-gradient(ellipse 35% 45% at 72% 68%, rgba(212, 166, 42, 0.1), transparent 58%),
		linear-gradient(
			90deg,
			rgba(3, 42, 32, 0.96) 0%,
			rgba(3, 42, 32, 0.82) 32%,
			rgba(3, 42, 32, calc(0.28 + var(--mph-hero-overlay, 0.45) * 0.25)) 62%,
			rgba(3, 42, 32, 0.08) 100%
		);
}

.mph-hero__image {
	transform: scale(1.06);
	animation: mph-kenburns 22s ease-in-out infinite alternate;
}

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

.mph-hero__gold-aura {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	mix-blend-mode: screen;
}

.mph-hero__gold-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(28px);
	opacity: 0.55;
	animation: mph-orb-drift 14s ease-in-out infinite alternate;
}

.mph-hero__gold-orb--1 {
	width: 280px;
	height: 280px;
	left: -40px;
	top: 18%;
	background: radial-gradient(circle, rgba(242, 189, 62, 0.55), rgba(212, 166, 42, 0.05) 65%, transparent 75%);
}

.mph-hero__gold-orb--2 {
	width: 200px;
	height: 200px;
	right: 8%;
	bottom: 22%;
	background: radial-gradient(circle, rgba(255, 220, 140, 0.4), transparent 70%);
	animation-delay: -4s;
	animation-duration: 18s;
}

.mph-hero__gold-orb--3 {
	width: 160px;
	height: 160px;
	left: 42%;
	top: 8%;
	background: radial-gradient(circle, rgba(242, 189, 62, 0.28), transparent 70%);
	animation-delay: -8s;
	animation-duration: 16s;
}

@keyframes mph-orb-drift {
	from { transform: translate(0, 0) scale(1); opacity: 0.4; }
	to   { transform: translate(18px, -22px) scale(1.12); opacity: 0.7; }
}

.mph-hero__spark {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #ffe9a8;
	box-shadow:
		0 0 6px 2px rgba(242, 189, 62, 0.85),
		0 0 16px 4px rgba(212, 166, 42, 0.35);
	animation: mph-sparkle 5.5s ease-in-out infinite;
	opacity: 0;
}

.mph-hero__spark:nth-child(4)  { left: 12%; top: 28%; animation-delay: 0s; }
.mph-hero__spark:nth-child(5)  { left: 28%; top: 62%; animation-delay: 0.8s; }
.mph-hero__spark:nth-child(6)  { left: 48%; top: 22%; animation-delay: 1.6s; }
.mph-hero__spark:nth-child(7)  { left: 66%; top: 48%; animation-delay: 2.2s; }
.mph-hero__spark:nth-child(8)  { left: 78%; top: 30%; animation-delay: 3s; }
.mph-hero__spark:nth-child(9)  { left: 88%; top: 58%; animation-delay: 3.8s; }
.mph-hero__spark:nth-child(10) { left: 38%; top: 78%; animation-delay: 1.2s; }
.mph-hero__spark:nth-child(11) { left: 58%; top: 70%; animation-delay: 2.8s; }

@keyframes mph-sparkle {
	0%,
	100% {
		opacity: 0;
		transform: scale(0.4) translateY(0);
	}
	20% {
		opacity: 1;
		transform: scale(1.2) translateY(-6px);
	}
	55% {
		opacity: 0.65;
		transform: scale(0.9) translateY(-14px);
	}
	80% {
		opacity: 0;
		transform: scale(0.3) translateY(-22px);
	}
}

.mph-hero__title-line--accent {
	background: linear-gradient(
		105deg,
		#c9941a 0%,
		#f2bd3e 28%,
		#fff1c2 48%,
		#f2bd3e 68%,
		#d4a62a 100%
	);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	animation: mph-gold-shimmer 5.5s ease-in-out infinite;
	filter: drop-shadow(0 0 18px rgba(242, 189, 62, 0.35));
}

@keyframes mph-gold-shimmer {
	0%,
	100% { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
}

.mph-hero__star {
	display: inline-block;
	color: #f2bd3e;
	text-shadow:
		0 0 8px rgba(242, 189, 62, 0.75),
		0 0 18px rgba(212, 166, 42, 0.45);
	animation: mph-star-twinkle 2.8s ease-in-out infinite;
}

.mph-hero__star:nth-child(2) { animation-delay: 0.35s; }
.mph-hero__star:nth-child(3) { animation-delay: 0.7s; }
.mph-hero__star:nth-child(4) { animation-delay: 1.05s; }
.mph-hero__star:nth-child(5) { animation-delay: 1.4s; }

@keyframes mph-star-twinkle {
	0%, 100% { opacity: 0.72; transform: scale(1); filter: brightness(1); }
	50%      { opacity: 1; transform: scale(1.18); filter: brightness(1.25); }
}

.mph-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 2;
	pointer-events: none;
}

.mph-hero__scroll-line {
	display: block;
	width: 1px;
	height: 42px;
	background: linear-gradient(180deg, rgba(242, 189, 62, 0), rgba(242, 189, 62, 0.95));
	box-shadow: 0 0 12px rgba(242, 189, 62, 0.55);
	animation: mph-scroll-cue 2s ease-in-out infinite;
}

@keyframes mph-scroll-cue {
	0%   { opacity: 0; transform: scaleY(0.4); transform-origin: top; }
	40%  { opacity: 1; }
	100% { opacity: 0; transform: scaleY(1); transform-origin: top; }
}

/* --------------------------------------------------------------------------
   Buttons — gold shimmer + ambient glow
   -------------------------------------------------------------------------- */

.mph-btn--glow {
	position: relative;
	overflow: hidden;
	box-shadow:
		0 8px 24px rgba(212, 166, 42, 0.32),
		0 0 0 1px rgba(255, 232, 170, 0.25) inset;
	animation: mph-btn-breathe 3.6s ease-in-out infinite;
}

@keyframes mph-btn-breathe {
	0%,
	100% {
		box-shadow:
			0 8px 24px rgba(212, 166, 42, 0.28),
			0 0 0 1px rgba(255, 232, 170, 0.2) inset;
	}
	50% {
		box-shadow:
			0 10px 32px rgba(242, 189, 62, 0.48),
			0 0 28px rgba(242, 189, 62, 0.22),
			0 0 0 1px rgba(255, 244, 200, 0.4) inset;
	}
}

.mph-btn--glow::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 35%,
		rgba(255, 255, 255, 0.42) 50%,
		transparent 65%
	);
	transform: translateX(-130%);
	transition: transform 0.75s ease;
}

.mph-btn--glow:hover::after {
	transform: translateX(130%);
}

.mph-btn--glow:hover {
	animation: none;
	box-shadow:
		0 12px 36px rgba(242, 189, 62, 0.55),
		0 0 40px rgba(212, 166, 42, 0.28);
	transform: translateY(-2px);
}

.mph-btn--secondary {
	transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.mph-btn--secondary:hover {
	box-shadow: 0 10px 28px rgba(7, 59, 45, 0.28), 0 0 20px rgba(212, 166, 42, 0.15);
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Cards & mosaic — lift / gold rim
   -------------------------------------------------------------------------- */

.mph-room-card {
	position: relative;
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.5s ease;
}

.mph-room-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		135deg,
		rgba(242, 189, 62, 0),
		rgba(242, 189, 62, 0.55),
		rgba(242, 189, 62, 0)
	);
	background-size: 200% 200%;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
	z-index: 2;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: mph-rim-sweep 4s linear infinite;
}

@keyframes mph-rim-sweep {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

.mph-room-card:hover {
	transform: translateY(-10px);
	box-shadow:
		0 22px 48px rgba(3, 40, 31, 0.16),
		0 0 32px rgba(212, 166, 42, 0.18);
}

.mph-room-card:hover::before {
	opacity: 1;
}

.mph-room-card__media img {
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mph-room-card:hover .mph-room-card__media img {
	transform: scale(1.06);
}

.mph-gallery-mosaic__item {
	position: relative;
	overflow: hidden;
}

.mph-gallery-mosaic__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 20%, rgba(242, 189, 62, 0.25), transparent 45%),
		linear-gradient(180deg, transparent 45%, rgba(3, 40, 31, 0.45));
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.mph-gallery-mosaic__item:hover::after {
	opacity: 1;
}

.mph-gallery-mosaic__item img,
.mph-gallery-page__item img {
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.mph-gallery-mosaic__item:hover img,
.mph-gallery-page__item:hover img {
	transform: scale(1.05);
	filter: brightness(1.06) saturate(1.05);
}

/* --------------------------------------------------------------------------
   About collage — soft gold frame glow
   -------------------------------------------------------------------------- */

.mph-about-gallery figure {
	position: relative;
	box-shadow: 0 12px 28px rgba(3, 40, 31, 0.1);
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
}

.mph-about-gallery figure::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(242, 189, 62, 0.22);
	pointer-events: none;
	opacity: 0.65;
	transition: box-shadow 0.4s ease, opacity 0.4s ease;
}

.mph-about-gallery figure:hover {
	transform: translateY(-4px);
	box-shadow:
		0 18px 40px rgba(3, 40, 31, 0.16),
		0 0 28px rgba(212, 166, 42, 0.22);
}

.mph-about-gallery figure:hover::after {
	opacity: 1;
	box-shadow:
		inset 0 0 0 1px rgba(242, 189, 62, 0.55),
		inset 0 0 24px rgba(242, 189, 62, 0.12);
}

.mph-about-gallery img {
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mph-about-gallery figure:hover img {
	transform: scale(1.04);
}

.mph-about__badge {
	animation: mph-badge-float 4.5s ease-in-out infinite;
	box-shadow:
		0 12px 32px rgba(3, 40, 31, 0.28),
		0 0 24px rgba(242, 189, 62, 0.25);
}

.mph-about__badge-number {
	text-shadow: 0 0 16px rgba(242, 189, 62, 0.55);
}

@keyframes mph-badge-float {
	0%,
	100% {
		transform: translate(-50%, 50%);
	}

	50% {
		transform: translate(-50%, calc(50% - 6px));
	}
}

.mph-amenities-bar__item:hover {
	transform: translateY(-4px);
	color: var(--mph-color-secondary);
	text-shadow: 0 0 18px rgba(242, 189, 62, 0.28);
}

.mph-amenities-bar__icon,
.mph-amenities-bar__item svg {
	filter: drop-shadow(0 0 0 transparent);
	transition: filter 0.35s ease, transform 0.35s ease;
}

.mph-amenities-bar__item:hover .mph-amenities-bar__icon,
.mph-amenities-bar__item:hover svg {
	filter: drop-shadow(0 0 8px rgba(242, 189, 62, 0.55));
	transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   Testimonial fade
   -------------------------------------------------------------------------- */

.mph-slider__slide {
	display: block;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	inset: 0;
	transition: opacity 0.55s ease, visibility 0.55s ease;
	pointer-events: none;
}

.mph-slider__track {
	position: relative;
	min-height: 160px;
}

.mph-slider__slide.is-active {
	display: flex;
	flex-direction: column;
	opacity: 1;
	visibility: visible;
	position: relative;
	pointer-events: auto;
}

.mph-testimonial-card .mph-slider__track {
	flex: 1;
	min-height: 0;
}

.mph-testimonial-card {
	position: relative;
	box-shadow:
		0 16px 40px rgba(3, 40, 31, 0.08),
		0 0 0 1px rgba(212, 166, 42, 0.12);
}

.mph-testimonial-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 12%;
	right: 12%;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(242, 189, 62, 0.75), transparent);
	opacity: 0.85;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Offer banner — gold aurora border
   -------------------------------------------------------------------------- */

.mph-offer-banner {
	position: relative;
	overflow: hidden;
}

.mph-offer-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(242, 189, 62, 0.4);
	pointer-events: none;
	z-index: 2;
}

.mph-offer-banner::after {
	content: "";
	position: absolute;
	width: 55%;
	height: 140%;
	top: -20%;
	left: -20%;
	background: radial-gradient(circle, rgba(242, 189, 62, 0.28), transparent 68%);
	pointer-events: none;
	z-index: 1;
	animation: mph-aurora 10s ease-in-out infinite alternate;
}

@keyframes mph-aurora {
	from { transform: translate(0, 0); opacity: 0.55; }
	to   { transform: translate(35%, 12%); opacity: 0.9; }
}

.mph-offer-banner > * {
	position: relative;
	z-index: 3;
}

/* --------------------------------------------------------------------------
   Section eyebrow — gold underline grow + shimmer
   -------------------------------------------------------------------------- */

.mph-section__eyebrow {
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
	letter-spacing: 0.16em;
}

.mph-section__eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 2px;
	background: linear-gradient(90deg, #f2bd3e, rgba(212, 166, 42, 0.15));
	box-shadow: 0 0 10px rgba(242, 189, 62, 0.55);
	transform-origin: left center;
	animation: mph-line-breathe 3.2s ease-in-out infinite;
}

.mph-section__eyebrow--light::after {
	background: linear-gradient(90deg, #ffe9a8, rgba(242, 189, 62, 0.2));
}

@keyframes mph-line-breathe {
	0%,
	100% { width: 28px; opacity: 0.75; }
	50%  { width: 48px; opacity: 1; }
}

.mph-heading--section {
	position: relative;
}

.mph-reveal.is-visible .mph-heading--section {
	animation: mph-heading-settle 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mph-heading-settle {
	from {
		letter-spacing: 0.02em;
	}
	to {
		letter-spacing: normal;
	}
}

/* --------------------------------------------------------------------------
   Booking bar — soft gold accent pulse
   -------------------------------------------------------------------------- */

.mph-booking-bar {
	position: relative;
}

.mph-booking-bar::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(242, 189, 62, 0.7), transparent);
	box-shadow: 0 0 16px rgba(242, 189, 62, 0.35);
	animation: mph-line-breathe 4s ease-in-out infinite;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Footer soft gold wash
   -------------------------------------------------------------------------- */

.mph-site-footer {
	position: relative;
}

.mph-site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 120px;
	background: radial-gradient(ellipse at 50% 0%, rgba(242, 189, 62, 0.1), transparent 70%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mph-hero__image,
	.mph-hero__star,
	.mph-hero__scroll-line,
	.mph-hero__gold-orb,
	.mph-hero__spark,
	.mph-hero__title-line--accent,
	.mph-about__badge,
	.mph-btn--glow,
	.mph-room-card::before,
	.mph-offer-banner::after,
	.mph-section__eyebrow::after,
	.mph-booking-bar::before {
		animation: none !important;
	}

	.mph-btn--glow:hover,
	.mph-room-card:hover,
	.mph-about-gallery figure:hover {
		transform: none;
	}

	.mph-hero__gold-aura {
		display: none;
	}
}