/* ============================================================
   Por & Prem Wedding — Animations & Cinematic Home Redesign
   Mobile-first, GPU-accelerated, prefers-reduced-motion safe
   ============================================================ */

/* ============================================================
   GLOBAL ANIMATION KEYFRAMES
   ============================================================ */
@keyframes pp-fade-up {
	from { opacity: 0; transform: translateY(32px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes pp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes pp-fade-scale {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes pp-slide-left {
	from { opacity: 0; transform: translateX(-48px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes pp-slide-right {
	from { opacity: 0; transform: translateX(48px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes pp-draw-stroke {
	from { stroke-dashoffset: var(--len, 1000); }
	to   { stroke-dashoffset: 0; }
}
@keyframes pp-shimmer {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}
@keyframes pp-shimmer-gold {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}
@keyframes pp-float-y {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}
@keyframes pp-bounce-y {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50%      { transform: translateY(8px); opacity: 1; }
}
@keyframes pp-rotate-slow {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}
@keyframes pp-pulse-soft {
	0%, 100% { transform: scale(1); opacity: 0.95; }
	50%      { transform: scale(1.04); opacity: 1; }
}
@keyframes pp-pulse-ring {
	0%   { box-shadow: 0 0 0 0 rgba(252,178,169,0.55); }
	70%  { box-shadow: 0 0 0 24px rgba(252,178,169,0); }
	100% { box-shadow: 0 0 0 0 rgba(252,178,169,0); }
}
@keyframes pp-typewriter {
	from { width: 0; }
	to   { width: 100%; }
}
@keyframes pp-cursor-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}
@keyframes pp-petal-fall {
	0%   { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
	10%  { opacity: 0.85; }
	100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
@keyframes pp-heart-rise {
	0%   { transform: translateY(0) scale(0.5); opacity: 0; }
	15%  { opacity: 0.8; transform: translateY(-12vh) scale(1); }
	100% { transform: translateY(-90vh) scale(0.7); opacity: 0; }
}
@keyframes pp-card-tilt-in {
	from { opacity: 0; transform: perspective(1200px) rotateX(18deg) translateY(48px); }
	to   { opacity: 1; transform: perspective(1200px) rotateX(0) translateY(0); }
}
@keyframes pp-glow-pulse {
	0%, 100% { box-shadow: 0 12px 32px rgba(252,178,169,0.18), 0 0 0 1px rgba(252,178,169,0.15); }
	50%      { box-shadow: 0 20px 48px rgba(252,178,169,0.32), 0 0 0 1px rgba(252,178,169,0.30); }
}

/* ============================================================
   SCROLL REVEAL (GPU-friendly)
   data-pp-reveal works on every section + child
   ============================================================ */
[data-pp-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
[data-pp-reveal="left"]  { transform: translateX(-48px); }
[data-pp-reveal="right"] { transform: translateX(48px); }
[data-pp-reveal="scale"] { transform: scale(0.92); }
[data-pp-reveal="blur"]  { filter: blur(8px); transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), filter 1100ms cubic-bezier(0.22, 1, 0.36, 1), transform 1100ms cubic-bezier(0.22, 1, 0.36, 1); }

[data-pp-reveal].is-in {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-pp-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ============================================================
   1. CINEMATIC HERO
   ============================================================ */
.pp-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #1F2937;
	isolation: isolate;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(252,178,169,0.20) 0%, rgba(252,178,169,0) 60%),
		radial-gradient(ellipse 70% 50% at 50% 100%, rgba(244,194,194,0.18) 0%, rgba(244,194,194,0) 60%),
		linear-gradient(180deg, #FFFFFF 0%, #FFFFF8 100%);
}

/* Layered cinematic background — image + radial vignette + grain */
.pp-hero__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.pp-hero__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.32;
	transform: scale(1.08);
	animation: pp-fade-in 1800ms ease-out both, pp-kenburns 26s ease-in-out infinite alternate 1800ms;
	will-change: transform, opacity;
	filter: saturate(0.85) brightness(1.08);
}
@keyframes pp-kenburns {
	0%   { transform: scale(1.08) translate(0, 0); }
	100% { transform: scale(1.14) translate(-2%, -1.5%); }
}
.pp-hero__bg-gradient {
	background:
		radial-gradient(ellipse at 50% 30%, rgba(255,255,248,0.0) 0%, rgba(255,255,248,0.55) 75%),
		linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,248,0.15) 35%, rgba(255,255,248,0.65) 100%);
	z-index: 1;
}
.pp-hero__bg-grain {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	background-size: 240px 240px;
	opacity: 0.06;
	mix-blend-mode: multiply;
	z-index: 2;
}
.pp-hero__particles {
	z-index: 3;
}

/* Hero filigree corners — gold Art Deco accents */
.pp-hero__corner {
	position: absolute;
	width: clamp(70px, 14vw, 140px);
	height: clamp(70px, 14vw, 140px);
	z-index: 4;
	opacity: 0;
	animation: pp-fade-in 1400ms ease-out 800ms both;
	pointer-events: none;
}
.pp-hero__corner svg { width: 100%; height: 100%; }
.pp-hero__corner svg path,
.pp-hero__corner svg line {
	stroke: #FCB2A9;
	stroke-width: 1.2;
	fill: none;
	opacity: 0.85;
}
.pp-hero__corner--tl { top: clamp(12px, 3vw, 32px); left: clamp(12px, 3vw, 32px); }
.pp-hero__corner--tr { top: clamp(12px, 3vw, 32px); right: clamp(12px, 3vw, 32px); transform: scaleX(-1); }
.pp-hero__corner--bl { bottom: clamp(12px, 3vw, 32px); left: clamp(12px, 3vw, 32px); transform: scaleY(-1); }
.pp-hero__corner--br { bottom: clamp(12px, 3vw, 32px); right: clamp(12px, 3vw, 32px); transform: scale(-1, -1); }

/* Hero content stack */
.pp-hero__content {
	position: relative;
	z-index: 5;
	text-align: center;
	padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem);
	max-width: 880px;
	width: 100%;
}

.pp-hero__eyebrow-line {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-body-th);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	color: #FCB2A9;
	margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
	opacity: 0;
	animation: pp-fade-up 1200ms cubic-bezier(0.22, 1, 0.36, 1) 600ms both;
	/* Eyebrow label "พิธีมงคลสมรส" — must stay on one line */
	white-space: nowrap;
}
/* Latin-only eyebrow content can keep tighter caps treatment */
.pp-hero__eyebrow-line:lang(en) {
	font-family: var(--font-body);
	letter-spacing: 0.45em;
	text-transform: uppercase;
}
/* Thai text inside eyebrow must reset spacing to look natural */
body.porprem-locale-th .pp-hero__eyebrow-line {
	letter-spacing: 0.12em;
	text-transform: none;
}
.pp-hero__eyebrow-line::before,
.pp-hero__eyebrow-line::after {
	content: '';
	width: clamp(28px, 6vw, 56px);
	height: 1px;
	background: linear-gradient(90deg, transparent, #FCB2A9 50%, transparent);
}

/* Monogram block — Pinyon Script ampersand reveal */
.pp-hero__monogram {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2.5vw, 1.5rem);
	margin-bottom: clamp(1rem, 3vw, 1.75rem);
	padding-top: clamp(20px, 5vh, 60px); /* reserve space so amp SVG cannot overlap eyebrow */
	line-height: 1;
}
.pp-hero__name {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(2.6rem, 11vw, 5.5rem);
	letter-spacing: 0.04em;
	color: #1F2937;
	text-shadow: 0 1px 0 rgba(255,255,255,0.6);
	opacity: 0;
	white-space: nowrap;
}
.pp-hero__name--left {
	animation: pp-slide-left 1400ms cubic-bezier(0.22, 1, 0.36, 1) 1100ms both;
}
.pp-hero__name--right {
	animation: pp-slide-right 1400ms cubic-bezier(0.22, 1, 0.36, 1) 1100ms both;
}

.pp-hero__amp {
	font-family: 'Pinyon Script', cursive;
	font-size: clamp(3.8rem, 16vw, 8rem);
	color: #FCB2A9;
	line-height: 0.8;
	text-shadow: 0 4px 28px rgba(252,178,169,0.40);
	position: relative;
	transform: translateY(-0.08em);
}
/* SVG ampersand path-draw (sits over the visual fallback) */
.pp-hero__amp-svg {
	position: absolute;
	top: 50%; left: 50%;
	width: clamp(110px, 22vw, 200px);
	height: clamp(140px, 28vw, 260px);
	transform: translate(-50%, -55%);
	pointer-events: none;
	z-index: 1;
	color: #FCB2A9;
}
.pp-hero__amp-svg {
	color: #FCB2A9;
}
.pp-hero__amp-svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1200;
	stroke-dashoffset: 1200;
	filter: drop-shadow(0 2px 18px rgba(252,178,169,0.55));
	animation: pp-draw-stroke 2600ms cubic-bezier(0.65, 0, 0.35, 1) 400ms forwards;
}
/* When SVG version is shown, hide the text glyph */
.pp-hero[data-amp="svg"] .pp-hero__amp { color: transparent; text-shadow: none; }

/* ---------- Desktop Hero overrides — fix amp SVG overlap + empty space ---------- */
@media (min-width: 1024px) {
	.pp-hero {
		align-items: flex-start;
		min-height: clamp(640px, 90dvh, 900px);
		padding-top: clamp(60px, 12vh, 140px);
	}
	.pp-hero__amp-svg {
		/* Cap the SVG so wide viewports do not push it up into the eyebrow */
		width: clamp(110px, 14vw, 180px);
		height: clamp(120px, 14vw, 200px);
		transform: translate(-50%, -50%); /* true center — no negative vertical bias */
	}
	.pp-hero__eyebrow-line {
		margin-bottom: clamp(2rem, 4vw, 3rem);
	}
}

.pp-hero__divider {
	display: block;
	width: 1px;
	height: clamp(32px, 6vw, 56px);
	background: linear-gradient(180deg, transparent, rgba(252,178,169,0.7), transparent);
	margin: clamp(1rem, 2vw, 1.5rem) auto;
	opacity: 0;
	animation: pp-fade-in 1000ms ease-out 2200ms both;
}

.pp-hero__date-line {
	font-family: var(--font-heading-th);
	font-size: clamp(1.1rem, 2.3vw, 1.45rem);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #374151;
	margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
	opacity: 0;
	animation: pp-fade-up 1100ms cubic-bezier(0.22, 1, 0.36, 1) 2400ms both;
	/* Wedding date in Thai (e.g. "เสาร์ที่ 21 พฤศจิกายน 2569") should
	   never split — balance the wrap if it ever needs 2 lines on tiny widths. */
	text-wrap: balance;
}
/* English locale uses Cormorant + uppercase tracking */
body.porprem-locale-en .pp-hero__date-line {
	font-family: 'Cormorant Garamond', serif;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-weight: 400;
}

/* Typewriter caret line */
.pp-hero__typewriter {
	display: inline-block;
	font-family: var(--font-body-th);
	font-size: clamp(1rem, 1.9vw, 1.2rem);
	letter-spacing: 0.02em;
	color: #5D6770;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	opacity: 0;
	animation: pp-fade-in 600ms ease-out 2700ms both;
}
.pp-hero__typewriter[data-typewriter] {
	overflow: hidden;
	white-space: nowrap;
	border-right: 2px solid #FCB2A9;
	width: 0;
	max-width: 100%;
	animation: pp-fade-in 600ms ease-out 2700ms both,
	           pp-typewriter 2200ms steps(20, end) 2800ms forwards,
	           pp-cursor-blink 750ms step-end infinite 2800ms;
}

/* Countdown ring container (replaces old text countdown) */
.pp-hero__countdown {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 1rem);
	padding: 10px 22px;
	background: rgba(255,255,255,0.75);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(252,178,169,0.35);
	border-radius: 999px;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	color: #374151;
	font-family: var(--font-body-th);
	font-size: clamp(0.95rem, 1.8vw, 1.1rem);
	letter-spacing: 0;
	box-shadow: 0 6px 22px rgba(252,178,169,0.12);
	opacity: 0;
	animation: pp-fade-up 1100ms cubic-bezier(0.22, 1, 0.36, 1) 3100ms both;
	/* Countdown pill is short — "อีก 178 วัน · จนถึงวันสำคัญ" — never break.
	   max-width caps it so it doesn't stretch on wide viewports. */
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pp-hero__countdown-num {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	color: #5D6770;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}
.pp-hero__countdown-sep { opacity: 0.4; }

/* Hero CTAs with shimmer */
.pp-hero__cta {
	display: flex;
	gap: clamp(0.6rem, 2vw, 1rem);
	justify-content: center;
	flex-wrap: wrap;
	opacity: 0;
	animation: pp-fade-up 1100ms cubic-bezier(0.22, 1, 0.36, 1) 3300ms both;
}

.pp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 14px 32px;
	font-family: var(--font-body-th);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	border-radius: 999px;
	text-decoration: none;
	overflow: hidden;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 320ms ease,
	            color 320ms ease;
	will-change: transform;
	cursor: pointer;
	border: 0;
}
.pp-btn--primary {
	background: linear-gradient(110deg,
		#FCB2A9 0%,
		#F5DA9A 25%,
		#FCB2A9 50%,
		#F5DA9A 75%,
		#FCB2A9 100%);
	background-size: 250% auto;
	color: #1A1410;
	box-shadow: 0 12px 32px rgba(252,178,169,0.30),
	            inset 0 1px 0 rgba(255,255,255,0.45);
}
.pp-btn--primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-btn--primary:hover,
.pp-btn--primary:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 42px rgba(252,178,169,0.45),
	            inset 0 1px 0 rgba(255,255,255,0.5);
	background-position: 100% center;
	color: #1A1410;
}
.pp-btn--primary:hover::before,
.pp-btn--primary:focus-visible::before {
	transform: translateX(100%);
}

.pp-btn--ghost {
	background: rgba(255,255,255,0.85);
	color: #5D6770;
	border: 1px solid rgba(252,178,169,0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.pp-btn--ghost:hover,
.pp-btn--ghost:focus-visible {
	transform: translateY(-3px);
	background: rgba(252,178,169,0.12);
	border-color: #FCB2A9;
	color: #2D3748;
}

.pp-btn--dark {
	background: #1A1410;
	color: #FCB2A9;
	border: 1px solid rgba(252,178,169,0.35);
}
.pp-btn--dark:hover { background: #2A1F18; transform: translateY(-2px); color: #FCB2A9; }

.pp-btn__icon {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* Scroll indicator (vertical pulsing line + arrow) */
.pp-hero__scroll {
	position: absolute;
	bottom: clamp(1rem, 4vw, 2.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body-th);
	color: #5D6770;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	opacity: 0;
	animation: pp-fade-in 1000ms ease-out 3800ms both;
	pointer-events: none;
}
body.porprem-locale-en .pp-hero__scroll {
	font-family: var(--font-body);
	font-size: 0.65rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 400;
}
.pp-hero__scroll-line {
	width: 1px;
	height: 56px;
	background: linear-gradient(180deg, transparent, #FCB2A9);
	position: relative;
	overflow: hidden;
}
.pp-hero__scroll-line::after {
	content: '';
	position: absolute;
	top: -20px; left: 0; right: 0;
	height: 20px;
	background: linear-gradient(180deg, #FCB2A9, transparent);
	animation: pp-scroll-pulse 2400ms cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes pp-scroll-pulse {
	0%   { top: -20px; }
	100% { top: 76px; }
}
.pp-hero__scroll-arrow {
	width: 14px; height: 8px;
	border-right: 1.5px solid #FCB2A9;
	border-bottom: 1.5px solid #FCB2A9;
	transform: rotate(45deg);
	animation: pp-bounce-y 2s ease-in-out infinite;
}

/* ============================================================
   2. COUNTDOWN HERO SECTION
   ============================================================ */
.pp-cd-section {
	background: linear-gradient(180deg, #FFFFF8 0%, #FFF5E8 100%);
	padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 4vw, 2rem);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.pp-cd-section::before,
.pp-cd-section::after {
	content: '';
	position: absolute;
	left: 50%;
	width: clamp(180px, 40vw, 320px);
	height: 14px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14' width='320' height='14'><path d='M2 7 Q60 -2, 160 7 T318 7' stroke='%23D4AF37' stroke-width='0.8' fill='none' opacity='0.55'/><circle cx='160' cy='7' r='2.5' fill='%23D4AF37'/><circle cx='80' cy='7' r='1.2' fill='%23D4AF37' opacity='0.6'/><circle cx='240' cy='7' r='1.2' fill='%23D4AF37' opacity='0.6'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
	transform: translateX(-50%);
	opacity: 0.85;
}
.pp-cd-section::before { top: clamp(1.5rem, 4vw, 3rem); }
.pp-cd-section::after  { bottom: clamp(1.5rem, 4vw, 3rem); transform: translateX(-50%) scaleY(-1); }

.pp-cd-section__eyebrow {
	font-family: var(--font-body-th);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	color: #5D6770;
	margin-bottom: clamp(0.75rem, 2vw, 1rem);
}
body.porprem-locale-en .pp-cd-section__eyebrow {
	font-family: var(--font-body);
	letter-spacing: 0.45em;
	text-transform: uppercase;
	font-size: 0.7rem;
}
.pp-cd-section__label {
	font-family: var(--font-heading-th);
	font-style: italic;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 500;
	color: #5D6770;
	margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
	line-height: 1.25;
	letter-spacing: 0;
	/* "จนถึงวันที่เริ่มต้นด้วยกัน" balance — 16-char Thai phrase. */
	text-wrap: balance;
	max-width: 18ch;
	margin-inline: auto;
}
body.porprem-locale-en .pp-cd-section__label {
	font-family: 'Pinyon Script', cursive;
	font-style: normal;
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1;
}

.pp-cd-grid {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(0.4rem, 2.5vw, 1.5rem);
	margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 3vw, 1.5rem);
	flex-wrap: nowrap;
}
.pp-cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: clamp(60px, 16vw, 110px);
}
.pp-cd-unit__num {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(3rem, 12vw, 6rem);
	font-weight: 400;
	line-height: 1;
	color: #1F2937;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.02em;
	font-feature-settings: 'tnum', 'lnum';
}
.pp-cd-unit__label {
	margin-top: clamp(0.4rem, 1vw, 0.6rem);
	font-family: var(--font-body-th);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: #5D6770;
	/* "วัน/ชั่วโมง/นาที/วินาที" labels never wrap */
	white-space: nowrap;
}
body.porprem-locale-en .pp-cd-unit__label {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-weight: 400;
}
.pp-cd-sep {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(2rem, 8vw, 4rem);
	color: #FCB2A9;
	opacity: 0.45;
	line-height: 1.4;
	font-weight: 300;
}

.pp-cd-section__quote {
	max-width: 540px;
	margin: clamp(1rem, 3vw, 1.5rem) auto 0;
	font-style: italic;
	font-family: var(--font-heading-th);
	font-weight: 400;
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	line-height: 1.7;
	color: #374151;
	text-wrap: pretty;
}

/* ============================================================
   3. SAVE THE DATE CARD
   ============================================================ */
.pp-std {
	padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 4vw, 2rem);
	background: #FFFFF8;
	display: flex;
	justify-content: center;
}
.pp-std__wrap {
	width: 100%;
	max-width: 560px;
	perspective: 1500px;
}
.pp-std__card {
	position: relative;
	background: linear-gradient(150deg, #FFFFFF 0%, #FFFFF8 100%);
	border-radius: 8px;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
	box-shadow:
		0 30px 60px rgba(31,20,16,0.15),
		0 0 0 1px rgba(252,178,169,0.18),
		inset 0 0 0 6px rgba(255,255,255,0.6),
		inset 0 0 0 7px rgba(252,178,169,0.25);
	text-align: center;
	transform-style: preserve-3d;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.pp-std__card::before,
.pp-std__card::after {
	content: '';
	position: absolute;
	width: 40px; height: 40px;
	border: 1px solid #FCB2A9;
}
.pp-std__card::before { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.pp-std__card::after  { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }

.pp-std__eyebrow {
	font-family: var(--font-body-th);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: #5D6770;
	margin-bottom: 1rem;
}
body.porprem-locale-en .pp-std__eyebrow {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	font-weight: 400;
}
.pp-std__heading {
	font-family: 'Pinyon Script', cursive;
	font-size: clamp(2.5rem, 8vw, 4rem);
	background: linear-gradient(110deg, #5D6770 0%, #FCB2A9 30%, #FCB2A9 50%, #FCB2A9 70%, #5D6770 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	line-height: 1;
	margin-bottom: 1.25rem;
	animation: pp-shimmer-gold 5s ease-in-out infinite;
}
.pp-std__date {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	color: #1F2937;
	margin-bottom: 0.5rem;
	line-height: 1.2;
}
.pp-std__day {
	font-family: var(--font-body-th);
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	color: #6B7280;
	margin-bottom: 1.75rem;
}
body.porprem-locale-en .pp-std__day {
	font-family: var(--font-body);
	font-size: 0.85rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.pp-std__divider {
	display: block;
	width: 60px;
	height: 1px;
	background: #FCB2A9;
	margin: 0 auto 1.5rem;
	position: relative;
}
.pp-std__divider::before,
.pp-std__divider::after {
	content: '◆';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #FCB2A9;
	font-size: 0.55rem;
}
.pp-std__divider::before { left: -16px; }
.pp-std__divider::after  { right: -16px; }
.pp-std__sub {
	font-family: var(--font-heading-th);
	font-style: italic;
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	color: #374151;
	line-height: 1.7;
	text-wrap: pretty;
}

/* ============================================================
   4. STORY TIMELINE — Scroll-triggered horizontal/vertical
   ============================================================ */
.pp-story {
	padding: clamp(4rem, 10vw, 7rem) 0;
	background: linear-gradient(180deg, #FFFFF8 0%, #FBE5E5 50%, #FFFFF8 100%);
	position: relative;
	overflow: hidden;
}
.pp-story__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(2rem, 5vw, 3.5rem);
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.pp-story__eyebrow {
	font-family: var(--font-body-th);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: #5D6770;
	margin-bottom: 0.75rem;
}
body.porprem-locale-en .pp-story__eyebrow {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	font-weight: 400;
}
.pp-story__title {
	font-family: var(--font-heading-th);
	font-style: italic;
	font-size: clamp(2rem, 5vw, 3.2rem);
	color: #1F2937;
	font-weight: 500;
	margin-bottom: 1rem;
	line-height: 1.25;
	text-wrap: balance;
}
.pp-story__lead {
	font-family: var(--font-body-th);
	color: #374151;
	font-size: 1.05rem;
	line-height: 1.8;
	text-wrap: pretty;
}

.pp-story__rail {
	position: relative;
	max-width: 920px;
	margin: 0 auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
/* SVG connection line that draws as user scrolls */
.pp-story__line {
	position: absolute;
	top: 0; bottom: 0;
	left: clamp(20px, 5vw, 32px);
	width: 2px;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
.pp-story__line::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg,
		rgba(252,178,169,0.3) 0%,
		rgba(252,178,169,0.3) 50%,
		rgba(252,178,169,0.05) 100%);
	background-size: 2px 8px;
	background-repeat: repeat-y;
}
.pp-story__line-fill {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: var(--fill, 0%);
	background: linear-gradient(180deg, #FCB2A9, #FCB2A9);
	box-shadow: 0 0 12px rgba(252,178,169,0.5);
	transition: height 200ms linear;
}
@media (min-width: 900px) {
	.pp-story__line { left: 50%; transform: translateX(-50%); }
}

.pp-story__chapter {
	position: relative;
	padding-left: clamp(50px, 11vw, 80px);
	margin-bottom: clamp(3rem, 6vw, 4.5rem);
	z-index: 1;
}
@media (min-width: 900px) {
	.pp-story__chapter {
		padding-left: 0;
		display: grid;
		grid-template-columns: 1fr 60px 1fr;
		align-items: center;
		gap: 1.5rem;
	}
	.pp-story__chapter:nth-child(odd) .pp-story__card  { grid-column: 1; text-align: right; }
	.pp-story__chapter:nth-child(odd) .pp-story__node  { grid-column: 2; }
	.pp-story__chapter:nth-child(odd) .pp-story__media { grid-column: 3; }
	.pp-story__chapter:nth-child(even) .pp-story__media { grid-column: 1; }
	.pp-story__chapter:nth-child(even) .pp-story__node  { grid-column: 2; }
	.pp-story__chapter:nth-child(even) .pp-story__card  { grid-column: 3; text-align: left; }
}

.pp-story__node {
	position: absolute;
	left: clamp(12px, 3vw, 24px);
	top: 24px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #FFFFF8;
	border: 2px solid #FCB2A9;
	box-shadow: 0 0 0 6px rgba(252,178,169,0.15);
	z-index: 2;
}
@media (min-width: 900px) {
	.pp-story__node {
		position: static;
		justify-self: center;
		align-self: center;
		width: 22px; height: 22px;
	}
}
.pp-story__chapter.is-in .pp-story__node {
	animation: pp-pulse-ring 1800ms ease-out 200ms;
}

.pp-story__media {
	margin-bottom: 1.25rem;
}
@media (min-width: 900px) {
	.pp-story__media { margin-bottom: 0; }
}
.pp-story__img {
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 20px 48px rgba(31,20,16,0.18), 0 0 0 1px rgba(252,178,169,0.15);
	background: linear-gradient(135deg, #FBE5E5, #F4C2C2);
}
.pp-story__img-placeholder {
	width: 100%;
	aspect-ratio: 4/5;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #FBE5E5 0%, #FFFFF8 50%, #FFF7DC 100%);
	border-radius: 12px;
	box-shadow: 0 20px 48px rgba(31,20,16,0.10), 0 0 0 1px rgba(252,178,169,0.20);
	border: 1px solid rgba(252,178,169,0.25);
	overflow: hidden;
}
.pp-story__img-placeholder-logo {
	width: clamp(90px, 28%, 140px);
	height: auto;
	filter: drop-shadow(0 6px 18px rgba(252,178,169,0.30));
	opacity: 0.92;
}
.pp-venue__media-placeholder img {
	width: clamp(90px, 30%, 160px);
	height: auto;
	filter: drop-shadow(0 6px 18px rgba(252,178,169,0.30));
}

.pp-story__card {
	padding: 0;
}
.pp-story__date {
	font-family: var(--font-heading-th);
	font-style: italic;
	font-size: 1rem;
	font-weight: 500;
	color: #5D6770;
	letter-spacing: 0.02em;
	margin-bottom: 0.5rem;
}
.pp-story__chapter-title {
	font-family: var(--font-heading-th);
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	font-weight: 600;
	color: #1F2937;
	margin-bottom: 0.75rem;
	line-height: 1.3;
	text-wrap: balance;
}
.pp-story__text {
	font-family: var(--font-body-th);
	color: #374151;
	font-size: 1rem;
	line-height: 1.85;
	text-wrap: pretty;
}

/* ============================================================
   5. ELEGANT SCHEDULE
   ============================================================ */
.pp-schedule {
	padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 4vw, 2rem);
	background: linear-gradient(180deg, #FFFFF8 0%, #FFF5E8 100%);
	color: #1F2937;
	position: relative;
	overflow: hidden;
}
.pp-schedule::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 20%, rgba(252,178,169,0.14) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(244,194,194,0.18) 0%, transparent 50%);
	pointer-events: none;
}
.pp-schedule__inner {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
}
.pp-schedule__header {
	text-align: center;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.pp-schedule__eyebrow {
	font-family: var(--font-body-th);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: #5D6770;
	margin-bottom: 0.75rem;
}
body.porprem-locale-en .pp-schedule__eyebrow {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	font-weight: 400;
}
.pp-schedule__title {
	font-family: var(--font-heading-th);
	font-style: italic;
	font-size: clamp(2rem, 5vw, 3rem);
	color: #1F2937;
	font-weight: 500;
	text-wrap: balance;
}
.pp-schedule__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 2vw, 1rem);
}
.pp-schedule__item {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: clamp(0.75rem, 2.5vw, 1.5rem);
	align-items: start;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: #FFFFFF;
	border: 1px solid rgba(252,178,169,0.22);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(31,20,16,0.05), 0 0 0 1px rgba(252,178,169,0.04);
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
	            background 320ms ease,
	            border-color 320ms ease,
	            box-shadow 320ms ease;
	overflow: hidden;
}
@media (min-width: 640px) {
	/* minmax(0, 1fr) is critical — without it, long text in the right column
	   can push the column wider than its share, breaking the grid on
	   short Thai phrases that contain no break opportunities. */
	.pp-schedule__item { grid-template-columns: 96px minmax(0, 1fr); }
}
.pp-schedule__item::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #FCB2A9, #FCB2A9);
	transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-schedule__item:hover {
	transform: translateY(-3px);
	background: #FFFDF8;
	border-color: rgba(252,178,169,0.4);
	box-shadow: 0 14px 32px rgba(31,20,16,0.08), 0 0 0 1px rgba(252,178,169,0.06);
}
.pp-schedule__item:hover::after { width: 100%; }
.pp-schedule__time {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.pp-schedule__icon-wrap {
	width: 42px; height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #FFFDF5, #FFF7DC);
	color: #5D6770;
	border: 1px solid rgba(252,178,169,0.35);
}
.pp-schedule__icon-wrap svg {
	width: 22px; height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.pp-schedule__hour {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	color: #5D6770;
	font-weight: 500;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums lining-nums;
	/* Time format "08:30" must never split */
	white-space: nowrap;
}
.pp-schedule__detail h3 {
	font-family: var(--font-heading-th);
	font-size: clamp(1.2rem, 2.5vw, 1.55rem);
	font-weight: 600;
	margin: 0 0 0.4rem;
	color: #1F2937;
	line-height: 1.3;
	letter-spacing: 0;
	/* Ceremony titles (e.g. "งานเลี้ยงฉลองมงคลสมรส") balance to avoid
	   awkward 1-word last line on narrow cards. */
	text-wrap: balance;
	overflow-wrap: break-word;
}
.pp-schedule__desc {
	font-family: var(--font-body-th);
	color: #374151;
	margin: 0 0 0.5rem;
	line-height: 1.75;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-wrap: pretty;
	overflow-wrap: break-word;
}
.pp-schedule__loc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body-th);
	font-size: 0.9rem;
	color: #5D6770;
	letter-spacing: 0;
	/* Location row — keep flat, allow inner text to wrap if needed */
	flex-wrap: wrap;
	max-width: 100%;
}
.pp-schedule__loc > span {
	overflow-wrap: break-word;
	min-width: 0;
}
.pp-schedule__loc svg {
	width: 14px; height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
}
.pp-schedule__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 0.6rem;
	padding: 3px 12px;
	background: linear-gradient(110deg, #FCB2A9, #FCB2A9);
	color: #4A3A12;
	border-radius: 999px;
	font-family: var(--font-body-th);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0;
	box-shadow: 0 4px 14px rgba(252,178,169,0.30);
	/* Pill text (e.g. "อีก 2ชม 15น" / "กำลังเกิดขึ้น" / "ผ่านไปแล้ว")
	   must stay on one line — pill is a compact badge. */
	white-space: nowrap;
}
.pp-schedule__pill--live {
	background: linear-gradient(110deg, #FBE5E5, #F4C2C2);
	color: #A04040;
	animation: pp-pulse-soft 1.6s ease-in-out infinite;
}
.pp-schedule__pill--past {
	background: #F1EFEA;
	color: #9CA3AF;
	border: 1px solid #E4DDCB;
	box-shadow: none;
}

/* ============================================================
   6. VENUE
   ============================================================ */
.pp-venue {
	padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 4vw, 2rem);
	background: #FFFFF8;
}
.pp-venue__inner {
	max-width: 1000px;
	margin: 0 auto;
}
.pp-venue__header {
	text-align: center;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.pp-venue__eyebrow {
	font-family: var(--font-body-th);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: #5D6770;
	margin-bottom: 0.75rem;
}
body.porprem-locale-en .pp-venue__eyebrow {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	font-weight: 400;
}
.pp-venue__title {
	font-family: var(--font-heading-th);
	font-style: italic;
	font-size: clamp(2rem, 5vw, 3rem);
	color: #1F2937;
	font-weight: 500;
	text-wrap: balance;
}
.pp-venue__card {
	background: #FFFFFF;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(31,20,16,0.10), 0 0 0 1px rgba(252,178,169,0.18);
	display: grid;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.pp-venue__card { grid-template-columns: 1.1fr 1fr; }
}
.pp-venue__media {
	position: relative;
	background: linear-gradient(135deg, #FBE5E5 0%, #FFFFF8 100%);
	min-height: 240px;
	overflow: hidden;
}
.pp-venue__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-venue__card:hover .pp-venue__media img { transform: scale(1.05); }
.pp-venue__media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 280px;
	font-family: 'Pinyon Script', cursive;
	font-size: clamp(2.5rem, 6vw, 4rem);
	color: #FCB2A9;
}
.pp-venue__pin-anim {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 56px; height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #A04040;
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
	animation: pp-pulse-ring 2s ease-out infinite;
}
.pp-venue__pin-anim svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.pp-venue__body {
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
.pp-venue__name {
	font-family: var(--font-heading-th);
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	font-weight: 600;
	color: #1F2937;
	margin: 0 0 0.5rem;
	line-height: 1.3;
	text-wrap: balance;
	overflow-wrap: break-word;
}
.pp-venue__addr {
	font-family: var(--font-body-th);
	color: #374151;
	line-height: 1.75;
	margin-bottom: 1.25rem;
	text-wrap: pretty;
	overflow-wrap: break-word;
}
.pp-venue__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
}
.pp-venue__actions .pp-btn { padding: 12px 22px; min-height: 48px; font-size: 0.95rem; }
.pp-venue__extras {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	border-top: 1px solid rgba(252,178,169,0.25);
	padding-top: 1.25rem;
}
@media (min-width: 540px) {
	.pp-venue__extras { grid-template-columns: 1fr 1fr; }
}
.pp-venue__extra-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-heading-th);
	font-style: italic;
	font-weight: 600;
	color: #5D6770;
	font-size: 1.05rem;
	margin-bottom: 4px;
	/* "ที่จอดรถ" / "ที่พักใกล้เคียง" — label never wraps */
	white-space: nowrap;
}
.pp-venue__extra-label svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.pp-venue__extra-text {
	font-family: var(--font-body-th);
	color: #374151;
	font-size: 0.95rem;
	line-height: 1.7;
	margin: 0;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* ============================================================
   7. DRESS CODE
   ============================================================ */
.pp-dress {
	padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 4vw, 2rem);
	background: linear-gradient(180deg, #FFFFF8 0%, #FBE5E5 100%);
	position: relative;
	overflow: hidden;
}
.pp-dress__inner {
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}
.pp-dress__eyebrow {
	font-family: var(--font-body-th);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: #5D6770;
	margin-bottom: 0.75rem;
}
body.porprem-locale-en .pp-dress__eyebrow {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	font-weight: 400;
}
.pp-dress__title {
	font-family: var(--font-heading-th);
	font-style: italic;
	font-size: clamp(2rem, 5vw, 3rem);
	color: #1F2937;
	font-weight: 500;
	margin-bottom: 0.5rem;
	text-wrap: balance;
}
.pp-dress__sub {
	font-family: var(--font-body-th);
	color: #374151;
	font-size: 1.05rem;
	line-height: 1.75;
	margin-bottom: clamp(2rem, 5vw, 3rem);
	text-wrap: pretty;
	max-width: 36ch;
	margin-inline: auto;
}
.pp-dress__palette {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(0.8rem, 3vw, 2rem);
	flex-wrap: wrap;
	margin-bottom: clamp(2rem, 5vw, 3rem);
}
.pp-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}
.pp-swatch__chip {
	position: relative;
	width: clamp(80px, 18vw, 120px);
	height: clamp(80px, 18vw, 120px);
	border-radius: 50%;
	background: var(--c, #FCB2A9);
	box-shadow:
		0 16px 36px rgba(0,0,0,0.14),
		inset 0 -10px 22px rgba(0,0,0,0.08),
		inset 0 4px 12px rgba(255,255,255,0.6);
	border: 4px solid #FFFFFF;
	transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 350ms ease;
}
.pp-swatch__chip::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 1px dashed rgba(252,178,169,0.0);
	transition: border-color 320ms ease;
}
.pp-swatch:hover .pp-swatch__chip,
.pp-swatch:focus-within .pp-swatch__chip {
	transform: translateY(-6px) scale(1.05);
	box-shadow: 0 24px 48px rgba(0,0,0,0.18), inset 0 -10px 22px rgba(0,0,0,0.08), inset 0 4px 12px rgba(255,255,255,0.6);
}
.pp-swatch:hover .pp-swatch__chip::before,
.pp-swatch:focus-within .pp-swatch__chip::before {
	border-color: rgba(252,178,169,0.6);
}
.pp-swatch__name {
	font-family: var(--font-heading-th);
	font-size: 1.05rem;
	font-weight: 500;
	color: #1F2937;
	/* Color names like "Champagne Gold" / "Blush Pink" stay on one line.
	   Allow break-word so very long custom names still wrap rather than overflow. */
	text-wrap: balance;
	overflow-wrap: break-word;
	text-align: center;
}
.pp-swatch__hex {
	font-family: ui-monospace, 'SF Mono', monospace;
	font-size: 0.75rem;
	color: #6B7280;
	letter-spacing: 0.05em;
	/* Hex codes never wrap */
	white-space: nowrap;
}

.pp-dress__tip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	background: rgba(255,255,255,0.7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(252,178,169,0.3);
	border-radius: 999px;
	font-family: var(--font-body-th);
	color: #5D6770;
	font-size: 0.95rem;
	font-style: italic;
	/* Pill tip should fit the rounded shape — allow inner text to balance
	   if it ever wraps onto 2 lines on tiny viewports. */
	max-width: calc(100% - 32px);
	text-align: center;
}
.pp-dress__tip > span {
	text-wrap: balance;
}

/* ============================================================
   8. BRIDAL PARTY CAROUSEL
   ============================================================ */
.pp-bridal {
	padding: clamp(4rem, 10vw, 7rem) 0;
	background: #FFFFF8;
}
.pp-bridal__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(2rem, 5vw, 3rem);
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.pp-bridal__eyebrow {
	font-family: var(--font-body-th);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: #5D6770;
	margin-bottom: 0.75rem;
}
body.porprem-locale-en .pp-bridal__eyebrow {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	font-weight: 400;
}
.pp-bridal__title {
	font-family: var(--font-heading-th);
	font-style: italic;
	font-size: clamp(2rem, 5vw, 3rem);
	color: #1F2937;
	font-weight: 500;
	text-wrap: balance;
}
.pp-bridal__rail {
	display: flex;
	gap: clamp(0.8rem, 2vw, 1.25rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 0 clamp(1rem, 4vw, 2rem) 2rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(252,178,169,0.45) transparent;
}
.pp-bridal__rail::-webkit-scrollbar { height: 6px; }
.pp-bridal__rail::-webkit-scrollbar-track { background: transparent; }
.pp-bridal__rail::-webkit-scrollbar-thumb {
	background: rgba(252,178,169,0.45);
	border-radius: 999px;
}
.pp-bridal-card {
	flex: 0 0 220px;
	scroll-snap-align: center;
	perspective: 1000px;
	height: 320px;
	cursor: pointer;
}
@media (min-width: 540px) {
	.pp-bridal-card { flex-basis: 240px; height: 360px; }
}
.pp-bridal-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-bridal-card:hover .pp-bridal-card__inner,
.pp-bridal-card:focus-within .pp-bridal-card__inner,
.pp-bridal-card.is-flipped .pp-bridal-card__inner {
	transform: rotateY(180deg);
}
.pp-bridal-card__face {
	position: absolute;
	inset: 0;
	border-radius: 12px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	box-shadow: 0 16px 40px rgba(31,20,16,0.12), 0 0 0 1px rgba(252,178,169,0.18);
}
.pp-bridal-card__front {
	background: linear-gradient(180deg, #FBE5E5 0%, #FFFFF8 100%);
	display: flex;
	flex-direction: column;
}
.pp-bridal-card__photo {
	flex: 1;
	background-size: cover;
	background-position: center;
	background-color: #F4C2C2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pp-bridal-card__photo-init {
	font-family: 'Pinyon Script', cursive;
	font-size: 4rem;
	color: #FFFFF8;
	text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.pp-bridal-card__name {
	padding: 16px 12px;
	font-family: var(--font-heading-th);
	font-size: 1.2rem;
	font-weight: 600;
	color: #1F2937;
	text-align: center;
	background: #FFFFFF;
	/* Long names ellipsize rather than push the card taller */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pp-bridal-card__side-pill {
	position: absolute;
	top: 12px; left: 12px;
	background: rgba(255,255,248,0.95);
	color: #5D6770;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--font-body-th);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	z-index: 2;
	/* "ฝ่ายเจ้าบ่าว" / "ฝ่ายเจ้าสาว" badge — never wrap */
	white-space: nowrap;
}
.pp-bridal-card__back {
	background: linear-gradient(135deg, #FFFDF5 0%, #FFF7DC 50%, #FBE5E5 100%);
	color: #1F2937;
	transform: rotateY(180deg);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: 1px solid rgba(252,178,169,0.25);
}
.pp-bridal-card__role {
	font-family: var(--font-heading-th);
	font-style: italic;
	font-weight: 500;
	color: #5D6770;
	font-size: 1.05rem;
	margin-bottom: 0.75rem;
	letter-spacing: 0;
}
.pp-bridal-card__note {
	font-family: var(--font-body-th);
	font-size: 0.92rem;
	line-height: 1.8;
	color: #374151;
	text-wrap: pretty;
	overflow-wrap: break-word;
}
.pp-bridal-card__quote-mark {
	font-family: 'Pinyon Script', cursive;
	font-size: 3rem;
	color: #FCB2A9;
	line-height: 0.5;
	opacity: 0.6;
}

/* ============================================================
   9. RSVP CLOSING SECTION
   ============================================================ */
.pp-rsvp-cta {
	position: relative;
	padding: clamp(5rem, 12vw, 9rem) clamp(1rem, 4vw, 2rem);
	text-align: center;
	color: #1F2937;
	background:
		radial-gradient(circle at 30% 20%, rgba(252,178,169,0.30) 0%, transparent 55%),
		radial-gradient(circle at 70% 80%, rgba(244,194,194,0.30) 0%, transparent 55%),
		linear-gradient(165deg, #FFFFFF 0%, #FFFFF8 45%, #FBE5E5 100%);
	overflow: hidden;
	isolation: isolate;
}
.pp-rsvp-cta__hearts {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.pp-rsvp-cta__heart {
	position: absolute;
	bottom: -40px;
	font-size: 18px;
	color: rgba(160,64,64,0.55);
	animation: pp-heart-rise 14s linear infinite;
}
.pp-rsvp-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}
.pp-rsvp-cta__eyebrow {
	font-family: 'Pinyon Script', cursive;
	font-size: clamp(2rem, 5vw, 3rem);
	color: #5D6770;
	margin-bottom: 1rem;
	line-height: 1;
}
.pp-rsvp-cta__title {
	font-family: var(--font-heading-th);
	font-style: italic;
	font-size: clamp(2rem, 6vw, 3.5rem);
	color: #1F2937;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 1.25rem;
	/* "พร้อมร่วมเฉลิมฉลองกับเราหรือยัง?" balance to avoid orphan "หรือยัง?" */
	text-wrap: balance;
	max-width: 18ch;
	margin-inline: auto;
	margin-bottom: 1.25rem;
}
.pp-rsvp-cta__sub {
	font-family: var(--font-body-th);
	color: #374151;
	font-size: 1.1rem;
	line-height: 1.8;
	margin-bottom: 2.5rem;
	max-width: 540px;
	margin-inline: auto;
	text-wrap: pretty;
}
.pp-rsvp-cta__actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 3rem;
}
.pp-rsvp-cta__signoff {
	font-family: 'Pinyon Script', cursive;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	color: #5D6770;
	line-height: 1.2;
	margin: 0;
}

/* ============================================================
   STICKY MOBILE RSVP BAR — refined
   ============================================================ */
.pp-sticky-rsvp {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 100;
	transform: translateY(110%);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, transparent 0%, rgba(255,255,248,0.92) 60%, rgba(255,255,248,1) 100%);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.pp-sticky-rsvp.is-visible {
	transform: translateY(0);
	pointer-events: auto;
}
.pp-sticky-rsvp__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 56px;
	background: linear-gradient(110deg, #FCB2A9, #FCB2A9, #FCB2A9);
	background-size: 200% auto;
	color: #1A1410;
	font-family: var(--font-body-th);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: 999px;
	box-shadow: 0 16px 32px rgba(31,20,16,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
	transition: transform 250ms ease, background-position 600ms ease;
	/* Sticky bar text "ยืนยันร่วมงาน" never wraps */
	white-space: nowrap;
}
.pp-sticky-rsvp__btn:hover,
.pp-sticky-rsvp__btn:focus-visible {
	color: #1A1410;
	background-position: 100% center;
	transform: translateY(-2px);
}
.pp-sticky-rsvp__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (min-width: 900px) {
	.pp-sticky-rsvp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pp-sticky-rsvp { transition: none; }
}

/* ============================================================
   PARALLAX UTILITY
   ============================================================ */
[data-pp-parallax] {
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	[data-pp-parallax] { transform: none !important; }
	.pp-hero__bg-img { animation: pp-fade-in 800ms ease-out both !important; }
}

/* ============================================================
   RESPONSIVE PARTICLES — disable on small screens / reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.pp-hero__corner,
	.pp-hero__eyebrow-line,
	.pp-hero__name,
	.pp-hero__amp-svg path,
	.pp-hero__divider,
	.pp-hero__date-line,
	.pp-hero__typewriter,
	.pp-hero__countdown,
	.pp-hero__cta,
	.pp-hero__scroll {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		width: auto !important;
	}
	.pp-hero__bg-img { transform: scale(1) !important; }
}