/* ═══════════════════════════════════════════════
	 WEDDING WEBSITE — BLACK & GOLD LOGO THEME
═══════════════════════════════════════════════ */
:root {
	--bg: #FAF7F2;
	/* Soft light cream background */
	--bg-2: #EBE4D8;
	/* Warm cream/beige depth */
	--surface: rgba(255, 255, 255, 0.72);
	/* Translucent light card surface */
	--surface-strong: rgba(255, 255, 255, 0.92);
	/* Solid light card surface */
	--text: #2e2618;
	/* Deep espresso for premium readability */
	--muted: #71624a;
	/* Muted warm gray-brown */
	--pink: #b89030;
	/* Bright gold accent */
	--pink-soft: #c89416;
	/* Soft gold highlight */
	--rose: #FAF8F5;

	/* Very light warm white */
	--rose-deep: #a07a1b;
	/* Antique gold accent */
	--gold: #96721a;
	/* Antique gold for high contrast on light backgrounds */
	--gold-soft: #7c5c14;
	/* Champagne gold darker variant for readability */
	--gold-glow: rgba(184, 144, 48, 0.16);
	--line: rgba(184, 144, 48, 0.28);
	/* Gold line dividers */
	--shadow: 0 18px 50px rgba(130, 110, 80, 0.08);
	--shadow-strong: 0 34px 80px rgba(80, 60, 30, 0.16), 0 14px 34px rgba(184, 144, 48, 0.09);
	/* Luxury foil / ornament tokens */
	--foil: linear-gradient(120deg, #8a6a1c 0%, #d8b65a 18%, #fdf0c8 32%, #c99a35 46%, #7c5c14 60%, #f2d67e 76%, #a07a1b 100%);
	--foil-dark: linear-gradient(135deg, #1c1710 0%, #3a2f1b 45%, #1c1710 100%);
	--ring: 1px solid rgba(150, 114, 26, 0.4);
	--ring-soft: 1px solid rgba(150, 114, 26, 0.22);
	--grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
}

* {
	box-sizing: border-box;
}

html {
	/* Smooth scrolling is now handled by Lenis (see script-wedding.js) for
	   eased, weighted inertia. Native smooth-behavior is kept only as a
	   graceful fallback for the rare case Lenis fails to load. */
	scroll-behavior: auto;
}

html.lenis,
html.lenis body {
	height: auto;
}

html.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

html.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

html.lenis.lenis-stopped {
	overflow: hidden;
}



body {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	color: var(--text);
	background:
		var(--grain),
		radial-gradient(circle at top, rgba(184, 144, 48, 0.16), transparent 32%),
		radial-gradient(circle at bottom, rgba(184, 144, 48, 0.09), transparent 38%),
		linear-gradient(180deg, #FAF7F2 0%, var(--bg) 42%, #EBE4D8 100%);
	overflow-x: hidden;
}

/* Fine gold hairline seam that runs along every section edge for a bound, catalogue-like feel */
.hero,
.person-section,
.venue-section,
.gallery3d-section {
	box-shadow: inset 0 1px 0 rgba(150, 114, 26, 0.14);
}

::selection {
	background: rgba(150, 114, 26, 0.28);
	color: #201a10;
}

body.site-locked {
	overflow: hidden;
}


body.site-unlocked {
	overflow-x: clip;
	overflow-y: visible;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

.entry-screen {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 0;
	background: #FAF8F5;
	overflow: hidden;
	perspective: 1200px;
	will-change: transform, opacity;
}

.entry-door {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50.2%;
	z-index: 2;
	pointer-events: none;
	transform-style: preserve-3d;
	will-change: transform;
}

.entry-door-left {
	left: 0;
	border-right: 1.5px solid rgba(150, 114, 26, 0.4);
	box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
}

.entry-door-right {
	right: 0;
	border-left: 1.5px solid rgba(150, 114, 26, 0.4);
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
}

.entry-door-light-seam {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	background: linear-gradient(180deg, rgba(255, 235, 170, 0) 0%, rgba(255, 215, 0, 0.95) 20%, rgba(255, 245, 200, 1) 50%, rgba(255, 215, 0, 0.95) 80%, rgba(255, 235, 170, 0) 100%);
	box-shadow: 0 0 18px rgba(255, 215, 0, 0.95), 0 0 40px rgba(255, 180, 50, 0.75);
	z-index: 5;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity, width;
}

.entry-logo-ripple {
	position: absolute;
	inset: -12px;
	border-radius: 50%;
	border: 2px solid rgba(242, 213, 116, 0.9);
	box-shadow: 0 0 35px rgba(242, 213, 116, 0.85), inset 0 0 25px rgba(242, 213, 116, 0.65);
	pointer-events: none;
	opacity: 0;
	transform: scale(0.85);
	z-index: 1;
}

.entry-door-left::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 12px;
	background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8));
	box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
	z-index: 4;
}

.entry-door-right::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 12px;
	background: linear-gradient(-90deg, transparent, rgba(255, 215, 0, 0.8));
	box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
	z-index: 4;
}

.entry-center-gold-flash {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.2);
	width: 140vw;
	height: 140vh;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(255, 248, 220, 1) 0%, rgba(255, 215, 0, 0.92) 35%, rgba(255, 170, 0, 0.65) 60%, transparent 80%);
	box-shadow: 0 0 120px rgba(255, 215, 0, 0.95), inset 0 0 80px rgba(255, 255, 255, 0.9);
	pointer-events: none;
	opacity: 0;
	z-index: 8;
	will-change: transform, opacity;
}

.entry-gold-light-rays {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.3);
	width: 1200px;
	height: 1200px;
	background: conic-gradient(from 0deg, transparent 0deg 25deg, rgba(255, 215, 0, 0.4) 30deg 45deg, transparent 50deg 75deg, rgba(255, 225, 120, 0.5) 80deg 95deg, transparent 100deg 145deg, rgba(255, 215, 0, 0.4) 150deg 165deg, transparent 170deg 205deg, rgba(255, 225, 120, 0.5) 210deg 225deg, transparent 230deg 275deg, rgba(255, 215, 0, 0.4) 280deg 295deg, transparent 300deg 345deg, rgba(255, 225, 120, 0.5) 350deg 360deg);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	z-index: 7;
	will-change: transform, opacity;
}

.entry-falling-petals-container {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 6;
	overflow: hidden;
}

.entry-petal {
	position: absolute;
	top: -30px;
	font-size: 1.3rem;
	opacity: 0.8;
	animation: entryPetalFall 6s linear infinite;
	filter: drop-shadow(0 4px 8px rgba(216, 182, 90, 0.4));
}

.entry-petal.p1 { left: 12%; animation-duration: 5.5s; animation-delay: 0s; }
.entry-petal.p2 { left: 28%; animation-duration: 7s; animation-delay: 1.2s; font-size: 1.1rem; }
.entry-petal.p3 { left: 45%; animation-duration: 6.2s; animation-delay: 0.5s; }
.entry-petal.p4 { left: 62%; animation-duration: 5.8s; animation-delay: 1.8s; }
.entry-petal.p5 { left: 78%; animation-duration: 7.5s; animation-delay: 0.2s; font-size: 1.1rem; }
.entry-petal.p6 { left: 88%; animation-duration: 6s; animation-delay: 2.2s; }
.entry-petal.p7 { left: 95%; animation-duration: 8s; animation-delay: 1s; font-size: 1rem; }

@keyframes entryPetalFall {
	0% {
		transform: translateY(0) rotate(0deg) scale(0.8);
		opacity: 0;
	}
	20% {
		opacity: 0.85;
	}
	100% {
		transform: translateY(105vh) rotate(360deg) scale(1.1);
		opacity: 0;
	}
}


.entry-screen-bg {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100vw;
	background:
		radial-gradient(circle at 50% 50%, rgba(242, 213, 116, 0.15) 0%, transparent 60%),
		radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.9), transparent 45%),
		radial-gradient(circle at 90% 90%, rgba(245, 238, 225, 0.9), transparent 45%),
		linear-gradient(135deg, #FAF8F5 0%, #F5EFEB 50%, #FAF8F5 100%);
}

.entry-screen-bg-left {
	left: 0;
}

.entry-screen-bg-right {
	right: 0;
}

.entry-screen-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.6);
	filter: blur(38px) saturate(1.05) brightness(1.04);
	opacity: 0.9;
}

.entry-screen-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 45%, rgba(255, 252, 245, 0.35) 0%, rgba(250, 245, 235, 0.55) 45%, rgba(244, 234, 222, 0.82) 100%);
}

.entry-center-wrapper {
	position: relative;
	z-index: 10;
	pointer-events: auto;
}

.entry-logo-button,
.entry-logo-button * {
	position: relative;
	z-index: 1;
}

.entry-screen::before,
.entry-screen::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(2px);
	opacity: 0.7;
	z-index: 1;
}

.entry-screen::before {
	width: min(82vw, 760px);
	height: min(82vw, 760px);
	border: 1px solid rgba(242, 213, 116, 0.2);
	box-shadow: 0 0 0 24px rgba(242, 213, 116, 0.01), 0 0 50px rgba(242, 213, 116, 0.04);
}

.entry-screen::after {
	width: min(56vw, 420px);
	height: min(56vw, 420px);
	background: radial-gradient(circle, rgba(242, 213, 116, 0.08), transparent 68%);
}

.entry-screen.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.entry-logo-button {
	position: relative;
	width: min(84vw, 460px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 2.5vw, 1.6rem);
	border-radius: 50%;
	border: 0;
	background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.8) 0%, rgba(250, 245, 238, 0.5) 100%);
	box-shadow: 0 20px 50px rgba(130, 110, 80, 0.12),
		inset 0 0 0 1px rgba(242, 213, 116, 0.35),
		0 0 20px rgba(242, 213, 116, 0.08);
	color: #4a3e2c;
	cursor: pointer;
	text-align: center;
	overflow: hidden;
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.entry-logo-button:hover {
	transform: scale(1.03);
	box-shadow: 0 28px 65px rgba(130, 110, 80, 0.18),
		inset 0 0 0 1.5px rgba(242, 213, 116, 0.55),
		0 0 30px rgba(242, 213, 116, 0.15);
}

.entry-logo-image {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 92%;
	max-height: 92%;
	height: auto;
	object-fit: contain;
	border-radius: 50%;
	box-shadow: 0 15px 40px rgba(130, 110, 80, 0.1);
	filter: drop-shadow(0 0 20px rgba(242, 213, 116, 0.15));
	transform: scale(0.96);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.entry-logo-button:hover .entry-logo-image,
.entry-logo-button:focus-visible .entry-logo-image {
	transform: scale(1.02);
	filter: drop-shadow(0 0 35px rgba(242, 213, 116, 0.3));
}

/* Touch-active feedback for mobile — gives satisfying press response */
.entry-logo-button:active {
	transform: scale(0.96);
	box-shadow: 0 14px 38px rgba(130, 110, 80, 0.18),
		inset 0 0 0 2px rgba(242, 213, 116, 0.6),
		0 0 40px rgba(242, 213, 116, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.entry-logo-button:active .entry-logo-image {
	transform: scale(1.04);
	filter: drop-shadow(0 0 40px rgba(242, 213, 116, 0.45));
}

@keyframes entryPulse {

	0%,
	100% {
		transform: scale(1);
		opacity: 0.92;
	}

	50% {
		transform: scale(1.04);
		opacity: 1;
	}
}



body.site-unlocked .entry-screen {
	pointer-events: none;
}

/* Tap-to-enter hint — visible only on touch devices */
.entry-tap-hint {
	display: none;
	margin: 1.2rem 0 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(150, 114, 26, 0.7);
	text-align: center;
	animation: tapHintPulse 2s ease-in-out infinite;
}

@keyframes tapHintPulse {
	0%, 100% { opacity: 0.6; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-3px); }
}

@media (hover: none) {
	.entry-tap-hint {
		display: block;
	}
}

.cursor-glow {
	position: fixed;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background: radial-gradient(circle, rgba(255, 232, 168, 0.75) 0%, rgba(216, 107, 147, 0.36) 35%, transparent 72%);
	mix-blend-mode: screen;
	box-shadow: 0 0 35px rgba(216, 107, 147, 0.28), 0 0 55px rgba(200, 162, 74, 0.25);
	will-change: transform;
}

.petals-container {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
}

.petal {
	position: absolute;
	top: -12vh;
	opacity: 0.95;
	will-change: transform;
	animation-name: petalFall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.bokeh-orb {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 240, 200, 0.45) 0%, rgba(242, 213, 116, 0.15) 50%, rgba(242, 213, 116, 0.05) 70%, transparent 100%);
	pointer-events: none;
	will-change: transform;
	animation-name: bokehFloat;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	mix-blend-mode: screen;
}

@keyframes bokehFloat {

	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.55;
	}

	50% {
		transform: translate3d(18px, -26px, 0) scale(1.15);
		opacity: 0.85;
	}
}

@keyframes petalFall {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}

	100% {
		transform: translate3d(30px, 120vh, 0) rotate(360deg);
	}
}

.hero,
.person-section,
.venue-section {
	position: relative;
	isolation: isolate;
}

.section-pre,
.hero-pre,
.hero-date,
.hero-cta,
.scroll-indicator,
.hero-divider,
.hero-names {
	opacity: 0;
}

.hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 1.5rem 5rem;
	text-align: center;
	color: var(--text);
}

.hero-bg,
.venue-bg,
.person-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero-bg-img,
.venue-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.08);
}

.hero-overlay,
.venue-overlay,
.timeline-bg-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(250, 247, 242, 0.82) 0%, rgba(242, 236, 226, 0.76) 50%, rgba(235, 228, 216, 0.88) 100%),
		radial-gradient(circle at top, rgba(184, 144, 48, 0.16), transparent 44%);
}

.hero-content {
	position: relative;
	z-index: 3;
	width: min(900px, 100%);
	padding: 4.25rem 1.5rem 4.5rem;
	border: var(--ring);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.74);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 30px 80px rgba(130, 110, 80, 0.14), inset 0 0 0 6px rgba(255, 255, 255, 0.55), inset 0 0 0 7px rgba(150, 114, 26, 0.22);
}

.hero-content::before {
	content: '';
	position: absolute;
	inset: 1rem;
	background: url('images/logo.png') center/contain no-repeat;
	opacity: 0.05;
	pointer-events: none;
	filter: grayscale(1) brightness(0.6);
}

/* Ornamental corner flourishes — a quiet, engraved-invitation touch */
.hero-content::after,
.person-card::before,
.venue-info-card::before,
.venue-schedule-card::before,
.venue-map-card::before {
	content: '';
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(150, 114, 26, 0.28);
	pointer-events: none;
	z-index: 1;
}



.hero-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 auto 1.4rem;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	border: 1px solid rgba(150, 114, 26, 0.55);
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6), 0 0 0 6px rgba(150, 114, 26, 0.22), 0 12px 30px rgba(130, 110, 80, 0.14);
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.55rem;
	font-weight: 600;
	background: var(--foil);
	background-size: 240% 240%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: foilDrift 9s ease-in-out infinite;
}

.hero-monogram-amp {
	font-family: 'Great Vibes', cursive;
	font-size: 1rem;
}

.hero-pre {
	margin: 0 0 1rem;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.3rem, 2vw, 1.8rem);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #6c4e12;
	font-weight: 600;
	transform: translateY(24px);
}

.hero-names {
	margin: 0;
	transform: none;
	transform-origin: center;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(2.7rem, 7.5vw, 4rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.15;
	color: var(--text);
	text-shadow: none;
}

.hero-name-groom,
.hero-name-bride {
	display: inline-block;
}

.hero-name-letter {
	display: inline-block;
	will-change: transform, opacity;
	background: var(--foil);
	background-size: 240% 240%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: foilDrift 9s ease-in-out infinite;
}

@keyframes foilDrift {

	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

.hero-name-space {
	display: inline-block;
	width: 0.3em;
}

.hero-ampersand {
	display: inline-block;
	margin: 0 0.22em;
	color: var(--gold-soft);
	font-family: 'Great Vibes', cursive;
	font-size: 0.85em;
	vertical-align: middle;
}

.hero-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	margin: 1.4rem auto 1.2rem;
	width: min(320px, 72vw);
	transform: translateY(14px);
}

.divider-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(240, 217, 138, 0.9), transparent);
}

.divider-icon {
	color: var(--gold-soft);
	font-size: 1.15rem;
	text-shadow: 0 0 16px rgba(240, 217, 138, 0.5);
}

.hero-date {
	margin: 0;
	font-size: clamp(0.98rem, 2vw, 1.15rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #f6ead3;
	transform: translateY(18px);
}

/* ═══════════════════════════════════════════════
   SCRATCH CARD STYLES
═══════════════════════════════════════════════ */
.scratch-card-container {
	margin: 1.5rem auto;
	transform: translateY(18px);
}

.scratch-card-label {
	text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: #6c4e12;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.scratch-card-frame {
	width: min(420px, 88vw);
	margin: 0 auto;
	padding: 0.65rem;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(242, 213, 116, 0.16));
	border: var(--ring);
	box-shadow: var(--shadow-strong), 0 0 0 5px #fff, 0 0 0 6px rgba(150, 114, 26, 0.22);
}

#fireworks {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
}

.scratch-card {
	position: relative;
	width: 100%;
	height: 240px;
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	touch-action: none;
	box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(150, 114, 26, 0.3);
}

#scratchCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	cursor: pointer;
	display: block;
	z-index: 10;
	touch-action: none;
}

#scratchCanvas,
.scratch-card-reveal {
	border-radius: inherit;
}

.scratch-card.is-revealed #scratchCanvas {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.scratch-card-reveal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #FAF8F5, #EFEBE4);
	z-index: 5;
	pointer-events: none;
	opacity: 0;
}

.scratch-reveal-icon {
	color: var(--gold);
	font-size: 1.3rem;
	margin-bottom: 0.3rem;
	text-shadow: 0 0 16px rgba(150, 114, 26, 0.3);
}

.scratch-card.is-revealed .scratch-card-reveal {
	animation: revealFade 0.6s ease-out forwards;
}

@keyframes revealFade {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.scratch-date {
	margin: 0;
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--gold-soft);
	letter-spacing: 0.06em;
	font-family: 'Cormorant Garamond', serif;
}

.scratch-day {
	margin: 0.2rem 0 0 0;
	font-size: 0.95rem;
	color: var(--text);
	letter-spacing: 0.08em;
	font-family: 'Cormorant Garamond', serif;
}

/* Dynamic Marriage Countdown styling — elegant gold-rimmed panels with a
   soft ambient glow, interactive hover sways, metallic sheen, and a heartbeat pulse. */
.scratch-countdown-container {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	justify-content: center;
	align-items: center;
	z-index: 6;
	filter: drop-shadow(0 0 14px rgba(240, 217, 138, 0.35));
}

.countdown-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(135deg, #fffaf0 0%, #fbf0d4 35%, #ffffff 50%, #fbf0d4 65%, #f5e3ae 100%);
	background-size: 240% 240%;
	background-position: 0% 0%;
	border: 1px solid rgba(184, 144, 48, 0.55);
	border-radius: 12px;
	padding: 10px 8px 8px;
	min-width: 64px;
	box-shadow:
		0 3px 10px rgba(130, 100, 20, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px rgba(184, 144, 48, 0.15);
	transition: background-position 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	animation: floatLocket 4.5s ease-in-out infinite;
}

.countdown-item:nth-child(1) {
	animation-delay: 0s;
}

.countdown-item:nth-child(2) {
	animation-delay: 0.9s;
}

.countdown-item:nth-child(3) {
	animation-delay: 1.8s;
}

.countdown-item:nth-child(4) {
	animation-delay: 2.7s;
}

@keyframes floatLocket {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-4px);
	}

	100% {
		transform: translateY(0);
	}
}

.countdown-item::after {
	content: '';
	position: absolute;
	inset: 3px;
	border: 1px solid rgba(184, 144, 48, 0.3);
	border-radius: 9px;
	pointer-events: none;
}

.countdown-item:hover {
	animation-play-state: paused;
	transform: translateY(-8px) scale(1.06);
	background-position: 100% 100%;
	border-color: rgba(184, 144, 48, 0.95);
	box-shadow:
		0 8px 22px rgba(130, 100, 20, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 0 14px rgba(240, 217, 138, 0.45);
}

.countdown-num {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.6rem, 5vw, 2.2rem);
	font-weight: 700;
	color: #7a4d0a;
	line-height: 1.15;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
	font-variant-numeric: tabular-nums;
	transition: transform 0.25s ease;
}

.countdown-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #8a6a2a;
	margin-top: 3px;
}

/* Ornamental colon-style separators between the panels, like a locket clock */
.countdown-item:not(:last-child)::before {
	content: '♦';
	position: absolute;
	right: -12px;
	top: 45%;
	transform: translateY(-50%);
	font-size: 0.6rem;
	color: rgba(184, 144, 48, 0.55);
	z-index: 1;
}

/* Each digit now animates in perfect sync with the JS tick — including
   seconds, which used to run its own decoupled, unsynced CSS loop. */

.countdown-item:last-child {
	border-color: rgba(184, 144, 48, 0.75);
	box-shadow:
		0 3px 12px rgba(130, 100, 20, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px rgba(184, 144, 48, 0.2),
		0 0 12px rgba(240, 217, 138, 0.4);
}

.countdown-item:last-child:hover {
	box-shadow:
		0 8px 24px rgba(130, 100, 20, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px rgba(184, 144, 48, 0.2),
		0 0 18px rgba(240, 217, 138, 0.65);
}

/* Digit change animation — a quick mechanical "flip" tick rather than a
   flat scale bump, closer to a real flip-clock */
@keyframes digitPop {
	0% {
		transform: perspective(200px) rotateX(0deg) translateY(0);
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
		color: #7a4d0a;
	}

	35% {
		transform: perspective(200px) rotateX(-50deg) translateY(-4px);
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 10px rgba(184, 144, 48, 0.65);
		color: #b89030;
	}

	65% {
		transform: perspective(200px) rotateX(20deg) translateY(1px);
	}

	100% {
		transform: perspective(200px) rotateX(0deg) translateY(0);
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
		color: #7a4d0a;
	}
}

.countdown-num {
	display: inline-block;
	transform-origin: 50% 65%;
}

.digit-pop {
	animation: digitPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* A soft glowing ring around the seconds panel that breathes with each
   flip, so the fastest-moving number reads as the "pulse" of the clock */
.countdown-item:last-child {
	animation: floatLocket 4.5s ease-in-out infinite, secsGlow 1s ease-in-out infinite;
}

@keyframes secsGlow {

	0%,
	100% {
		box-shadow: 0 3px 12px rgba(130, 100, 20, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(184, 144, 48, 0.2), 0 0 12px rgba(240, 217, 138, 0.4);
	}

	50% {
		box-shadow: 0 3px 12px rgba(130, 100, 20, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(184, 144, 48, 0.2), 0 0 20px rgba(240, 217, 138, 0.7);
	}
}

/* Once the wedding date arrives, the panels settle into a warm, steady
   gold glow instead of continuing to "tick" */
.countdown-complete .countdown-item {
	animation: none !important;
	border-color: rgba(184, 144, 48, 0.95);
	box-shadow:
		0 8px 22px rgba(130, 100, 20, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 0 18px rgba(240, 217, 138, 0.55);
}

/* Hero Quote styling - elegant serif typography */
.hero-quote-style {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.35rem, 3.5vw, 1.75rem);
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: none;
	color: #6c4e12;
	line-height: 1.55;
	margin: 3.5rem auto 1.5rem;
	max-width: 650px;
	text-align: center;
	text-shadow: none;
	transform: translateY(24px);
}

:lang(ta) .hero-quote-style {
	font-family: 'Cormorant Garamond', 'Noto Sans Tamil', serif;
	font-size: clamp(1.15rem, 3.2vw, 1.45rem);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.6;
}



.hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2rem;
	padding: 0.95rem 1.8rem;
	border-radius: 999px;
	border: 1px solid rgba(184, 144, 48, 0.45);
	background: linear-gradient(135deg, #FAF8F5, #EFEBE4);
	color: var(--text);
	font-weight: 600;
	letter-spacing: 0.04em;
	box-shadow: 0 18px 32px rgba(130, 110, 80, 0.12), 0 0 0 1px rgba(184, 144, 48, 0.08) inset;
	transform: translateY(18px);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cta:hover {
	transform: translateY(-2px) scale(1.02);
	background: linear-gradient(135deg, #b89030, #a07a1b);
	color: #fff;
	box-shadow: 0 22px 40px rgba(130, 110, 80, 0.18), 0 0 24px rgba(184, 144, 48, 0.12);
}

.hero-cta,
.directions-btn,
.calendar-btn {
	position: relative;
	overflow: hidden;
}

.hero-cta::before,
.directions-btn::before,
.calendar-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-18deg);
	transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.hero-cta:hover::before,
.directions-btn:hover::before,
.calendar-btn:hover::before {
	left: 130%;
}

.scroll-indicator {
	position: absolute;
	left: 50%;
	bottom: 1.8rem;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	color: #f4e6c6;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

.scroll-arrow {
	width: 32px;
	height: 52px;
	border-radius: 999px;
	border: 1px solid rgba(242, 213, 116, 0.45);
	display: grid;
	place-items: center;
}

.scroll-arrow-inner {
	width: 6px;
	height: 6px;
	border-right: 2px solid var(--gold-soft);
	border-bottom: 2px solid var(--gold-soft);
	transform: rotate(45deg);
}

.person-section {
	padding: 6rem 1.5rem;
}

.groom-section,
.bride-section {
	overflow: hidden;
}

.groom-section {
	background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.bride-section {
	background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}

.person-bg {
	z-index: -1;
	background:
		radial-gradient(circle at 20% 20%, rgba(184, 144, 48, 0.08), transparent 30%),
		radial-gradient(circle at 80% 30%, rgba(184, 144, 48, 0.08), transparent 25%);
}

.person-container {
	width: min(1200px, 100%);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: center;
}



.person-photo-col,
.person-details-col {
	opacity: 0;
}

.person-photo-col {
	display: grid;
	justify-items: center;
	gap: 1.2rem;
}

.person-photo-frame {
	position: relative;
	width: min(100%, 420px);
	padding: 1.1rem;
	border-radius: 6px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(242, 213, 116, 0.14));
	border: var(--ring);
	box-shadow: var(--shadow-strong), 0 0 0 6px #fff, 0 0 0 7px rgba(150, 114, 26, 0.25);
}

.person-photo-frame::before {
	content: '';
	position: absolute;
	inset: 0.75rem;
	border-radius: 2px;
	border: 1px solid rgba(150, 114, 26, 0.3);
	pointer-events: none;
}

.person-photo {
	width: 100%;
	aspect-ratio: 0.6;
	object-fit: contain;
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(245, 236, 222, 0.85));
	padding: 0.8rem;
	z-index: 2;
}

.photo-ornament {
	position: absolute;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--gold);
	border-radius: 0;
	pointer-events: none;
	opacity: 0.8;
}

.photo-ornament-tl {
	top: 0.5rem;
	left: 0.5rem;
	border-right: none;
	border-bottom: none;
}

.photo-ornament-br {
	right: 0.5rem;
	bottom: 0.5rem;
	border-left: none;
	border-top: none;
}







.venue-content {
	width: min(1200px, 100%);
	margin: 0 auto;
}

.venue-header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.section-title {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(2.6rem, 5vw, 4.4rem);
	line-height: 1;
}

.section-pre {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
}

.section-pre::before,
.section-pre::after {
	content: '';
	width: 26px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold-soft));
}

.section-pre::after {
	background: linear-gradient(90deg, var(--gold-soft), transparent);
}

.venue-header .section-pre {
	margin: 0 0 0.35rem;
	color: var(--gold-soft);
	opacity: 1;
}

.venue-header .section-title {
	color: var(--text);
}

.section-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	margin-top: 1rem;
}



.venue-section {
	padding: 6rem 1.5rem 4rem;
	color: var(--text);
	background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.venue-content {
	position: relative;
	z-index: 1;
}

.venue-header .section-pre {
	opacity: 1;
}

.venue-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.venue-grid-split {
	grid-template-columns: 1fr 1.2fr;
	gap: 2.5rem;
	align-items: start;
}

.venue-section .venue-bg {
	background: linear-gradient(180deg, rgba(250, 247, 242, 0.98) 0%, rgba(235, 228, 216, 0.96) 100%) !important;
	opacity: 1 !important;
}

.venue-section-bordered {
	border-top: 1px solid var(--line);
}

.venue-info-card,
.venue-schedule-card,
.venue-map-card {
	padding: 1.75rem;
	border-radius: 10px;
	background: var(--surface-strong);
	border: var(--ring-soft);
	color: var(--text);
	position: relative;
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--shadow-strong);
	backdrop-filter: blur(16px);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.venue-info-card:hover,
.venue-schedule-card:hover,
.venue-map-card:hover {
	transform: translateY(-6px);
	border-color: rgba(242, 213, 116, 0.6);
	box-shadow: 0 28px 65px rgba(130, 110, 80, 0.16), 0 0 35px rgba(242, 213, 116, 0.2);
}

.venue-schedule-card {
	max-width: 680px;
	margin: 0 auto;
	padding: 2.5rem 2rem;
}

.venue-info-card-spaced {
	padding: 2rem;
}

.venue-map-card-spaced {
	padding: 1.5rem;
}

.venue-card-title {
	margin: 0 0 1rem;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.5rem, 2vw, 1.9rem);
	color: var(--gold-soft);
}

.venue-card-title-center {
	text-align: center;
	margin-bottom: 1.5rem;
}

.venue-name-accent {
	color: var(--gold);
	font-size: 1.4rem;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	margin: 0.2rem 0 0.8rem 0;
}

.venue-address-compact {
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0;
}

.venue-contact-separated {
	margin-top: 1.5rem;
	border-top: 1px dashed var(--line);
	padding-top: 1.5rem;
	display: grid;
	gap: 0.35rem;
}

.directions-btn-spaced {
	margin-top: 1.5rem;
	display: inline-flex;
}

.venue-name {
	margin: 0 0 0.55rem;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--text);
}

.venue-address,
.venue-contact,
.schedule-event,
.closing-note {
	color: var(--muted);
	line-height: 1.8;
}

.venue-contact {
	margin-top: 1rem;
	display: grid;
	gap: 0.35rem;
}



.map-wrapper {
	overflow: hidden;
	border-radius: 18px;
	border: 1px solid rgba(242, 213, 116, 0.18);
}

.map-wrapper-venue {
	border-radius: 20px;
	overflow: hidden;
	border: 2px solid var(--gold);
	box-shadow: 0 10px 25px rgba(130, 110, 80, 0.08);
}

.map-wrapper iframe {
	display: block;
	width: 100%;
	min-height: 300px;
	border: 0;
}

.venue-closing {
	margin: 3rem auto 0;
	width: min(760px, 100%);
	text-align: center;
	padding: 3rem 1.5rem;
	border-top: var(--ring-soft);
	position: relative;
}

.venue-closing::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 50%;
	width: 90px;
	height: 2px;
	transform: translateX(-50%);
	background: var(--gold);
}

.closing-script {
	margin: 0;
	font-family: 'Great Vibes', cursive;
	font-size: clamp(2.1rem, 4vw, 3.2rem);
	color: var(--gold-soft);
}

.closing-names {
	margin: 0.25rem 0 0.4rem;
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(2.3rem, 4.5vw, 3.8rem);
	color: var(--text);
}

.closing-note {
	margin: 0 auto;
	max-width: 680px;
}

.closing-hearts {
	display: flex;
	justify-content: center;
	gap: 0.65rem;
	margin-top: 1rem;
	color: var(--gold-soft);
	font-size: 1.15rem;
}

.site-footer {
	padding: 1.35rem 1rem 1.8rem;
	text-align: center;
	color: var(--muted);
	background: linear-gradient(180deg, rgba(250, 247, 242, 0.4), rgba(235, 228, 216, 0.95));
	border-top: 1px solid var(--line);
}

.site-footer p {
	margin: 0;
}

.footer-heart {
	color: var(--gold-soft);
}

.footer-author-glow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.28rem 0.9rem;
	margin: 0 0.25rem;
	border-radius: 50px;
	background: linear-gradient(135deg, #d8b65a, #c99a35);
	border: 1px solid #fdf0c8;
	color: #1a0f12 !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow:
		0 0 12px rgba(216, 182, 90, 0.6),
		0 4px 15px rgba(216, 182, 90, 0.35);
	vertical-align: middle;
	animation: authorGlowPulse 2s ease-in-out infinite alternate;
}

.footer-author-glow:hover {
	background: rgba(216, 182, 90, 0.12);
	color: #d8b65a !important;
	border-color: #d8b65a;
	box-shadow: 0 0 10px rgba(216, 182, 90, 0.3);
	transform: translateY(-2px) scale(1.04);
}

@keyframes authorGlowPulse {
	0% {
		box-shadow:
			0 0 8px rgba(216, 182, 90, 0.4),
			0 4px 12px rgba(216, 182, 90, 0.25);
		border-color: rgba(253, 240, 200, 0.6);
	}

	100% {
		box-shadow:
			0 0 18px rgba(253, 240, 200, 0.8),
			0 0 25px rgba(216, 182, 90, 0.5);
		border-color: #ffffff;
	}
}

/* ═══════════════════════════════════════════════
	 NEW STYLES: CARICATURES, SAVE THE DATE, FAMILY & DIRECTIONS
═══════════════════════════════════════════════ */

/* Save the Date Placeholder Frame */
.save-the-date-container {
	margin: 2rem auto;
	width: min(90vw, 520px);
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: scale(0.95);
}

.save-the-date-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 0.665;
	border-radius: 18px;
	background: url('images/couple_bg.png') no-repeat center center;
	background-size: cover;
	border: 1px solid rgba(184, 144, 48, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gold-soft);
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	overflow: hidden;
}

.save-the-date-placeholder-img {
	max-width: 85%;
	max-height: 85%;
	object-fit: contain;
	z-index: 2;
	height: 100%;
	opacity: 0.95;
	mix-blend-mode: multiply;
	animation: floatAnimation 4s ease-in-out infinite;
}

.save-the-date-overlay {
	position: absolute;
	bottom: 10px;
	background: rgba(10, 8, 8, 0.88);
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 0.75rem;
	border: 1px solid var(--gold);
	color: var(--gold-soft);
	font-weight: 600;
	letter-spacing: 0.1em;
	z-index: 3;
}

@keyframes floatAnimation {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}



/* Luxury Action Buttons (Get Directions & Add to Calendar) */
.directions-btn,
.calendar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.5rem;
	padding: 0.75rem 1.6rem;
	border-radius: 99px;
	border: 1px solid var(--gold);
	background: #ffffff;
	color: #8c6b12;
	/* Darker gold for better contrast on white background */
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 12px rgba(80, 60, 30, 0.08);
	cursor: pointer;
}

.directions-btn:hover,
.calendar-btn:hover {
	transform: translateY(-4px) scale(1.03);
	background: #1a1410;
	/* Black/dark background */
	color: #f3d994;
	/* Light gold text */
	border-color: #1a1410;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.directions-btn:active,
.calendar-btn:active {
	transform: translateY(-1px) scale(0.98);
}

/* Accessibility Focus States */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 4px;
}

/* ═══════════════════════════════════════════════
	 GLITTER & GOLD SPARKLE STYLES
═══════════════════════════════════════════════ */

/* Shimmer Gold Text Effect */
.glitter-text {
	background: linear-gradient(90deg, var(--gold) 0%, #fff6d8 25%, var(--gold-soft) 50%, #fff6d8 75%, var(--gold) 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: goldShine 5s linear infinite;
	text-shadow: 0 0 12px rgba(242, 213, 116, 0.28);
}

@keyframes goldShine {
	0% {
		background-position: 0% center;
	}

	100% {
		background-position: 200% center;
	}
}

/* Twinkling Gold Sparkles Background Elements */
.sparkle-particle {
	position: absolute;
	width: 5px;
	height: 5px;
	background: radial-gradient(circle, #fff 20%, var(--gold-soft) 80%, transparent 100%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	opacity: 0.8;
	filter: drop-shadow(0 0 4px var(--gold-soft));
	animation: sparkleDrift 8s infinite linear;
}

@keyframes sparkleDrift {
	0% {
		transform: translate(0, 0) scale(0.3) rotate(0deg);
		opacity: 0;
	}

	10% {
		opacity: 0.9;
	}

	90% {
		opacity: 0.9;
	}

	100% {
		transform: translate(30px, 100vh) scale(1.2) rotate(360deg);
		opacity: 0;
	}
}



/* Card Glitter Borders & Glowing Effects */
.person-card,
.venue-info-card,
.venue-schedule-card,
.venue-map-card {
	position: relative;
	border: 1px solid rgba(242, 213, 116, 0.22);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 15px rgba(242, 213, 116, 0.12);
	overflow: hidden;
}

.person-card::after,
.venue-info-card::after,
.venue-schedule-card::after,
.venue-map-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1.5px solid transparent;
	background: linear-gradient(135deg, rgba(242, 213, 116, 0.18), rgba(255, 255, 255, 0.5), rgba(242, 213, 116, 0.18)) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	pointer-events: none;
	animation: borderShimmer 6s infinite linear;
	background-size: 200% 200%;
}

@keyframes borderShimmer {
	0% {
		background-position: 0% 0%;
	}

	50% {
		background-position: 100% 100%;
	}

	100% {
		background-position: 0% 0%;
	}
}



/* Glitter overlay for Hero and Venue BG */
.glitter-overlay {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 20px 30px, #fff, rgba(0, 0, 0, 0)),
		radial-gradient(1.5px 1.5px at 40px 70px, var(--gold-soft), rgba(0, 0, 0, 0)),
		radial-gradient(2px 2px at 50px 160px, #fff, rgba(0, 0, 0, 0)),
		radial-gradient(1.5px 1.5px at 90px 40px, var(--gold-soft), rgba(0, 0, 0, 0)),
		radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0)),
		radial-gradient(1.5px 1.5px at 160px 120px, var(--gold-soft), rgba(0, 0, 0, 0));
	background-repeat: repeat;
	background-size: 200px 200px;
	opacity: 0.45;
	pointer-events: none;
	z-index: 1;
	animation: starsPulse 4s infinite alternate ease-in-out;
}

@keyframes starsPulse {
	0% {
		opacity: 0.3;
	}

	100% {
		opacity: 0.6;
	}
}



/* ══════════════════════════════════════════════════════════════════════════
	 3D CAROUSEL GALLERY STYLES
══════════════════════════════════════════════════════════════════════════ */
.gallery3d-section {
	padding: 6rem 1.5rem 8rem;
	background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
	text-align: center;
	overflow: hidden;
	position: relative;
}



/* ══════════════════════════════════════════════════════════════════════════
	 FLOATING MUSIC PLAYER WIDGET
══════════════════════════════════════════════════════════════════════════ */
.music-player-widget {
	position: fixed;
	bottom: 2rem;
	left: 2rem;
	z-index: 9999;
	display: flex;
	gap: 0.6rem;
	align-items: center;
	padding: 6px;
	border-radius: 40px;
	background: rgba(255, 255, 255, 0.42);
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	border: 1px solid rgba(184, 144, 48, 0.22);
	box-shadow: 0 15px 35px rgba(130, 110, 80, 0.15), inset 0 0 15px rgba(255, 255, 255, 0.6);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.music-player-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.85);
	color: var(--gold-soft);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(130, 110, 80, 0.08);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.music-player-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: 1.5px;
	background: var(--foil);
	-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;
	pointer-events: none;
	opacity: 0.55;
	transition: opacity 0.3s ease;
}

.music-player-btn:hover {
	transform: scale(1.08) translateY(-2px);
	background: #ffffff;
	box-shadow: 0 8px 22px rgba(184, 144, 48, 0.28);
}

.music-player-btn:hover::before {
	opacity: 1;
}

.music-player-btn:active {
	transform: scale(0.96) translateY(0);
}

.music-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.music-player-btn.is-playing .music-icon {
	animation: spinDisc 6s linear infinite;
	transform: translateY(-4px);
}

@keyframes spinDisc {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.music-eq {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 12px;
	position: absolute;
	bottom: 8px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.music-player-btn.is-playing .music-eq {
	opacity: 1;
}

.music-eq span {
	width: 2px;
	background: var(--gold);
	border-radius: 1px;
	animation: bounceEq 0.8s ease-in-out infinite alternate;
}

.music-eq span:nth-child(1) {
	height: 60%;
	animation-delay: 0.1s;
}

.music-eq span:nth-child(2) {
	height: 100%;
	animation-delay: 0.3s;
}

.music-eq span:nth-child(3) {
	height: 40%;
	animation-delay: 0s;
}

.music-eq span:nth-child(4) {
	height: 80%;
	animation-delay: 0.2s;
}

@keyframes bounceEq {
	0% {
		transform: scaleY(0.2);
	}

	100% {
		transform: scaleY(1);
	}
}

/* ── VERTICAL SCHEDULE LAYOUT ── */
.venue-schedule-grid {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 3rem;
	margin-top: 2.5rem;
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}

.schedule-date-tag {
	text-align: center;
	color: var(--gold);
	font-weight: 600;
	letter-spacing: 0.05em;
	font-size: 0.92rem;
	margin: -0.5rem 0 1.5rem;
	font-family: 'Montserrat', sans-serif;
	opacity: 0.9;
}



/* New Couple Photo Section Styles */
.couple-photo-section {
	padding: 5rem 1.5rem 6rem;
}

.couple-photo-container {
	margin: 2rem auto;
	width: min(90vw, 550px);
	padding: 0.8rem;
	border-radius: 28px;
	border: 1px solid rgba(184, 144, 48, 0.28);
	background: rgba(255, 255, 255, 0.6);
	box-shadow: 0 12px 40px rgba(130, 110, 80, 0.08), inset 0 0 20px rgba(184, 144, 48, 0.04);
}

.couple-photo-frame-new {
	position: relative;
	width: 100%;
	border-radius: 20px;
	border: 1px solid rgba(184, 144, 48, 0.35);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	box-shadow: var(--shadow-strong);
}

.couple-photo-new {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.couple-photo-frame-new:hover .couple-photo-new {
	transform: scale(1.03);
}

.profession-logo {
	height: 20px;
	width: auto;
	margin-top: 0.5rem;
	display: block;
	object-fit: contain;
	opacity: 0.95;
	filter: drop-shadow(0 2px 4px rgba(130, 110, 80, 0.08));
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.detail-item:hover .profession-logo {
	transform: scale(1.05);
	filter: drop-shadow(0 4px 8px rgba(130, 110, 80, 0.12));
}

.detail-item-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	min-height: 140px;
}

.company-logo-large {
	max-height: 80px;
	width: auto;
	max-width: 95%;
	object-fit: contain;
	filter: drop-shadow(0 6px 15px rgba(130, 110, 80, 0.12));
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
}

.detail-item-logo:hover .company-logo-large {
	transform: scale(1.12);
	filter: drop-shadow(0 12px 28px rgba(184, 144, 48, 0.25));
}

/* ══════════════════════════════════════════════════════════════════════════
   LOVE DESTINY — FLAMES GAME
══════════════════════════════════════════════════════════════════════════ */

.flames-section {
	overflow: hidden;
}

.flames-subtitle {
	margin: 0.9rem auto 0;
	max-width: 560px;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--muted);
	text-align: center;
}

.flames-card {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto 3rem;
	padding: 2.75rem 2.25rem;
	border-radius: 20px;
	text-align: center;
	background: var(--surface-strong);
	border: var(--ring-soft);
	box-shadow: var(--shadow-strong);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.flames-card:hover {
	transform: translateY(-4px);
	border-color: rgba(242, 213, 116, 0.6);
	box-shadow: 0 28px 65px rgba(130, 110, 80, 0.16), 0 0 35px rgba(242, 213, 116, 0.18);
}

.flames-names-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	flex-wrap: wrap;
	margin-bottom: 2.2rem;
}

.flames-name-block {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.flames-name-label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold-soft);
}

.flames-name-value {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	color: var(--text);
}

.flames-heart {
	color: var(--gold);
	font-size: 1.7rem;
	filter: drop-shadow(0 0 8px var(--gold-glow));
	animation: flamesHeartBeat 1.7s ease-in-out infinite;
}

@keyframes flamesHeartBeat {

	0%,
	100% {
		transform: scale(1);
	}

	25% {
		transform: scale(1.2);
	}

	40% {
		transform: scale(0.94);
	}
}

.flames-letters-grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.6rem;
}

.flames-letters-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}

.flames-row-label {
	min-width: 54px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: right;
}

.flames-letters {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	justify-content: center;
}

.flames-letter {
	position: relative;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	border: 1px solid var(--line);
	background: var(--rose);
	color: var(--text);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
}

.flames-letter.is-canceled {
	color: rgba(46, 38, 24, 0.32);
	border-color: rgba(184, 144, 48, 0.22);
}

.flames-letter.is-canceled::after {
	content: '';
	position: absolute;
	left: 10%;
	right: 10%;
	top: 50%;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left center;
	animation: flamesStrike 0.4s ease forwards;
}

@keyframes flamesStrike {
	to {
		transform: scaleX(1);
	}
}

.flames-hint {
	margin: 0 0 1.5rem;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--muted);
	transition: opacity 0.3s ease;
}

.flames-reveal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 2.3rem;
	border-radius: 99px;
	border: 1px solid var(--gold);
	background: linear-gradient(135deg, rgba(30, 25, 21, 0.94) 0%, rgba(15, 13, 12, 0.98) 100%);
	color: var(--gold-soft);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22), inset 0 0 10px rgba(242, 213, 116, 0.05);
}

.flames-reveal-btn:hover {
	transform: translateY(-4px) scale(1.03);
	background: linear-gradient(135deg, var(--gold) 0%, #b89030 100%);
	color: #1a1410;
	border-color: transparent;
	box-shadow: 0 12px 28px rgba(184, 144, 48, 0.4), 0 0 15px rgba(242, 213, 116, 0.2);
}

.flames-reveal-btn:active {
	transform: translateY(-1px) scale(0.98);
}

.flames-reveal-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.flames-result {
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.6s ease, opacity 0.6s ease, margin-top 0.6s ease;
}

.flames-result.is-visible {
	margin-top: 2rem;
	max-height: 700px;
	opacity: 1;
}

.flames-word-row {
	display: flex;
	gap: 0.55rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1.6rem;
}

.flames-word-letter {
	position: relative;
	width: 40px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	border: 1px solid var(--gold);
	background: var(--surface);
	color: var(--gold-soft);
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.4rem;
	font-weight: 700;
	transition: opacity 0.5s ease, transform 0.5s ease, background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

.flames-word-letter.is-out {
	opacity: 0.22;
	transform: scale(0.78) rotate(-8deg);
	border-color: rgba(184, 144, 48, 0.18);
}

.flames-word-letter.is-winner {
	background: linear-gradient(135deg, var(--gold) 0%, #f2d574 100%);
	color: #1a1410;
	transform: scale(1.18);
	box-shadow: 0 10px 26px rgba(184, 144, 48, 0.4);
}

.flames-result-says {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--muted);
}

.flames-result-word {
	margin: 0;
	font-family: 'Great Vibes', cursive;
	font-size: clamp(2.6rem, 6vw, 4rem);
	color: var(--gold);
	text-shadow: 0 0 20px var(--gold-glow);
}

.flames-result-desc {
	margin: 0.7rem auto 0;
	max-width: 460px;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.7;
}

.flames-or {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 420px;
	margin: 0 auto 2.5rem;
	color: var(--gold-soft);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.flames-or .divider-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.flames-user-intro {
	margin: 0 0 1.6rem;
	color: var(--muted);
}

.flames-user-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}

.flames-user-input {
	width: 100%;
	max-width: 360px;
	padding: 0.85rem 1.3rem;
	border-radius: 99px;
	border: 1px solid var(--line);
	background: var(--rose);
	color: var(--text);
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	text-align: center;
	outline: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.flames-user-input::placeholder {
	color: rgba(46, 38, 24, 0.4);
}

.flames-user-input:focus {
	border-color: var(--gold);
	box-shadow: 0 0 0 4px var(--gold-glow);
}

.flames-user-inputs-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
}

.flames-heart-small {
	color: var(--gold);
	font-size: 1.5rem;
	animation: flamesHeartBeat 1.7s ease-in-out infinite;
}

.flames-user-error {
	min-height: 1.3rem;
	margin: 0.7rem 0 0;
	color: #a13a3a;
	font-size: 0.85rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESTINY BLAST — full-screen love-themed celebration fired when a FLAMES
   result (couple's "Reveal Destiny" or the personal calculator) is revealed
══════════════════════════════════════════════════════════════════════════ */
.destiny-blast-flash {
	position: fixed;
	inset: 0;
	z-index: 10010;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: screen;
	background: radial-gradient(circle at 50% 42%,
			rgba(255, 246, 220, 0.95) 0%,
			rgba(253, 231, 178, 0.55) 22%,
			rgba(232, 143, 163, 0.30) 45%,
			rgba(232, 143, 163, 0) 72%);
}

.destiny-blast-flash.is-active {
	animation: destinyFlashFade 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes destinyFlashFade {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* 3D Floating SVG Hearts for Destiny Blast celebration */
.destiny-heart-layer {
	position: fixed;
	inset: 0;
	z-index: 10008;
	pointer-events: none;
	overflow: hidden;
}

.destiny-heart-wrapper {
	position: absolute;
	bottom: -15vh;
	will-change: transform, opacity;
	animation-name: destinyHeartRise;
	animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
	animation-fill-mode: forwards;
}

.destiny-svg-heart {
	width: 100%;
	height: 100%;
	display: block;
	animation: heartSway 3s ease-in-out infinite alternate;
}

@keyframes destinyHeartRise {
	0% {
		transform: translate(0, 0) rotate(0deg) scale(0.4);
		opacity: 0;
	}

	15% {
		opacity: 1;
	}

	80% {
		opacity: 0.95;
	}

	100% {
		transform: translate(var(--drift), -130vh) rotate(var(--rotate)) scale(1.15);
		opacity: 0;
	}
}

@keyframes heartSway {
	0% {
		transform: rotate(-12deg) scale(0.92);
	}

	100% {
		transform: rotate(12deg) scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {

	.destiny-blast-flash,
	.destiny-heart {
		animation: none !important;
	}

	.card-top-icon,
	.card-top-icon svg,
	.temple-toran circle,
	.invitation-card .corner-ornament,
	.invitation-card .card-title-divider-line,
	.invitation-card .card-shine,
	.invitation-card .card-sparkle {
		animation: none !important;
	}

	.invitation-card:hover {
		transform: translateY(-8px) !important;
	}

	.countdown-item,
	.countdown-item:last-child,
	.digit-pop {
		animation: none !important;
	}
}

/* ── Vector Ornate Card Decorations (Image 1 & 2 styles) ── */
.reception-decorations,
.wedding-decorations {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

/* Make sure all text content sits above the decorations */
.invitation-card .card-main-title,
.invitation-card .card-title-divider,
.invitation-card .card-connector,
.invitation-card .card-date-tag,
.invitation-card .card-time-tag,
.invitation-card .card-venue-section,
.invitation-card .card-actions,
.invitation-card .card-map-wrapper {
	position: relative;
	z-index: 2;
}

/* Reception Card (Pink Arch) Frame — sized and positioned to sit inside
   the card's own padding, framing the content like the pavilion-arch
   reference, instead of overlapping the title / date / venue text. */
.reception-arch {
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	width: calc(100% - 8px);
	height: 92px;
	z-index: 1;
	opacity: 0.9;
}

.reception-pillar {
	position: absolute;
	top: 4px;
	height: calc(100% - 8px);
	width: 22px;
	z-index: 1;
	opacity: 0.9;
}

.reception-pillar.left {
	left: 4px;
}

.reception-pillar.right {
	right: 4px;
}

/* A slim gradient thread runs the full height of the card — being a
   straight line, it stretches to any height with zero distortion. */
.reception-pillar .pillar-line {
	position: absolute;
	left: 50%;
	top: 10px;
	bottom: 10px;
	width: 2px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, transparent, #b57a80 10%, #b57a80 90%, transparent);
}

/* Caps and flourishes stay a fixed pixel size no matter how tall the
   pillar stretches, so they always render crisp — never warped. */
.reception-pillar .pillar-cap {
	position: absolute;
	left: 50%;
	width: 13px;
	height: 13px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0%, #fae2dc 40%, #e5939a 85%);
	border: 1px solid rgba(181, 122, 128, 0.55);
	box-shadow: 0 1px 3px rgba(181, 122, 128, 0.3);
	z-index: 1;
}

.pillar-cap-top {
	top: 0;
}

.pillar-cap-bottom {
	bottom: 0;
}

.reception-pillar .pillar-ornament {
	position: absolute;
	left: 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, #ff8a9a 0%, #d81b60 100%);
	box-shadow: 0 0 4px rgba(216, 27, 96, 0.4);
	z-index: 1;
}

.reception-pillar .pillar-ornament::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1px solid rgba(181, 122, 128, 0.4);
}

/* Hanging strands sit inside the arch's own crown, well clear of the
   chandelier icon and title that follow in normal flow beneath it. */
.reception-garland-strings {
	position: absolute;
	top: 14px;
	left: 56px;
	right: 56px;
	height: 90px;
	/* Increased length to center & align */
	display: flex;
	justify-content: space-around;
	z-index: 1;
}

.garland-string {
	width: 8px;
	height: 100%;
	overflow: visible;
	transform-origin: top center;
	animation: stringSway 3.2s ease-in-out infinite alternate;
}

.garland-string.string-1 {
	animation-delay: 0s;
}

.garland-string.string-2 {
	animation-delay: 0.5s;
	animation-duration: 3.8s;
}

.garland-string.string-3 {
	animation-delay: 1.1s;
	animation-duration: 2.8s;
}

.garland-string.string-4 {
	animation-delay: 0.3s;
	animation-duration: 3s;
}

.garland-string.string-5 {
	animation-delay: 0.8s;
	animation-duration: 3.5s;
}

.garland-string.string-6 {
	animation-delay: 1.3s;
	animation-duration: 3.1s;
}

@keyframes stringSway {
	0% {
		transform: rotate(-2.5deg);
	}

	100% {
		transform: rotate(2.5deg);
	}
}

.reception-leaves {
	position: absolute;
	bottom: 4px;
	width: 56px;
	height: 52px;
	z-index: 1;
	opacity: 0.9;
}

.left-leaves {
	left: 4px;
}

.right-leaves {
	right: 4px;
}

/* Wedding Card (Temple Gopuram) Frame */
.wedding-gopuram-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(300px, 85%);
	height: min(520px, 85%);
	z-index: 0;
	opacity: 0.65;
}

/* Diyas hang from the very top edge only, inside the card's header band,
   so they never reach the icon / title that starts in normal flow below. */
.wedding-hanging-diyas {
	position: absolute;
	top: 4px;
	left: 20px;
	right: 20px;
	height: 210px;
	z-index: 1;
}

.hanging-diya {
	position: absolute;
	top: 0;
	width: 32px;
	height: 200px;
	transform-origin: top center;
	animation: diyaSway 4.2s ease-in-out infinite alternate, diyaGlowPulse 2.4s ease-in-out infinite;
	filter: drop-shadow(0 4px 10px rgba(255, 167, 38, 0.55)) drop-shadow(0 0 6px rgba(255, 200, 80, 0.4));
}

.diya-left-1 {
	left: 0;
}

.diya-left-2 {
	left: 36px;
	height: 140px;
	animation-delay: 0.6s;
	animation-duration: 3.5s;
}

.diya-right-1 {
	right: 0;
	animation-delay: 0.3s;
	animation-duration: 4.5s;
}

.diya-right-2 {
	right: 36px;
	height: 140px;
	animation-delay: 0.9s;
	animation-duration: 3.8s;
}

@keyframes diyaSway {
	0% {
		transform: rotate(-1.5deg);
	}

	100% {
		transform: rotate(1.5deg);
	}
}

.diya-flame {
	animation: flameFlicker 0.15s ease-in-out infinite alternate;
	transform-origin: bottom center;
}

@keyframes flameFlicker {
	0% {
		transform: scale(0.92) rotate(-2deg) scaleX(0.88);
		opacity: 0.8;
	}
	50% {
		transform: scale(1.08) rotate(0deg) scaleX(1.1);
		opacity: 1;
	}
	100% {
		transform: scale(0.96) rotate(2deg) scaleX(0.92);
		opacity: 0.9;
	}
}

@keyframes diyaGlowPulse {
	0%, 100% {
		filter: drop-shadow(0 4px 10px rgba(255, 167, 38, 0.55)) drop-shadow(0 0 6px rgba(255, 200, 80, 0.4));
	}
	50% {
		filter: drop-shadow(0 6px 18px rgba(255, 140, 0, 0.85)) drop-shadow(0 0 14px rgba(255, 220, 80, 0.7));
	}
}

.corner-lotus {
	position: absolute;
	bottom: 4px;
	width: 54px;
	height: 44px;
	z-index: 1;
	opacity: 0.9;
	filter: drop-shadow(0 2px 4px rgba(130, 80, 80, 0.12));
}

.left-lotus {
	left: 4px;
}

.right-lotus {
	right: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM — single source of truth, mobile-first ordering.
   Breakpoints run largest → smallest so the cascade always resolves the
   way it reads on the page: each smaller block only overrides what needs
   to change further, nothing fights an earlier rule.
══════════════════════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll globally */
html,
body {
	max-width: 100vw;
	overflow-x: hidden;
}

/* Make all media assets responsive */
img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* Ensure form controls and buttons have optimized touch targets */
button,
input[type="text"],
.hero-cta,
.calendar-btn,
.directions-btn {
	min-height: 44px;
	box-sizing: border-box;
}

/* Use dynamic viewport height where supported so mobile browser address
   bars don't clip or misplace the hero / entry screen. Falls back to the
   100vh already set earlier if unsupported. */
@supports (height: 100dvh) {
	.hero {
		min-height: 100dvh;
	}
}

/* ── Laptop / small desktop (≤1439px) ── */
@media (max-width: 1439px) {
	.venue-content {
		width: min(1000px, 92%);
		margin-inline: auto;
	}

	.venue-schedule-grid {
		width: 100%;
		gap: 2rem;
	}

	.venue-grid-split {
		gap: 2rem;
	}
}

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
	.hero-content {
		width: min(720px, 92%);
		padding: 3.5rem 1.5rem;
	}

	.venue-schedule-grid {
		flex-direction: column;
		align-items: center;
		max-width: 450px;
		margin-inline: auto;
		gap: 2.5rem;
	}

	.venue-grid-split {
		grid-template-columns: 1fr;
		max-width: 580px;
		margin-inline: auto;
		gap: 2rem;
	}

	.venue-info-card,
	.venue-map-card {
		width: 100%;
	}

	.map-wrapper iframe {
		min-height: 280px;
	}
}

/* ── Large phone / small tablet (≤768px) ── */
@media (max-width: 768px) {

	.hero,
	.venue-section,
	.gallery3d-section {
		padding-inline: 1.25rem;
	}

	.hero {
		padding-block: 5rem 3.5rem;
	}

	.hero-content {
		padding: 3rem 1.5rem;
		border-radius: 14px;
	}

	.hero-content::after {
		inset: 10px;
	}

	.section-title {
		font-size: clamp(2rem, 6.5vw, 2.8rem);
	}

	.venue-info-card,
	.venue-schedule-card,
	.venue-map-card {
		padding: 1.5rem;
	}

	.invitation-card {
		max-width: 420px;
		min-height: auto;
		padding: 2.75rem 1.75rem 2rem;
	}

	/* Scale the ornamental card frames down with the card so nothing
	   spills into the padding/text zone at tablet widths. */
	.reception-arch {
		height: 78px;
	}

	.reception-pillar {
		width: 18px;
	}

	.reception-pillar .pillar-cap {
		width: 11px;
		height: 11px;
	}

	.reception-pillar .pillar-ornament {
		width: 7px;
		height: 7px;
	}

	.reception-garland-strings {
		top: 12px;
		left: 42px;
		right: 42px;
		height: 60px;
	}

	.reception-leaves {
		width: 52px;
		height: 48px;
	}

	.wedding-hanging-diyas {
		left: 20px;
		right: 20px;
		height: 160px;
	}

	.hanging-diya {
		width: 26px;
		height: 150px;
	}

	.diya-left-2,
	.diya-right-2 {
		height: 105px;
	}

	.corner-lotus {
		width: 44px;
		height: 36px;
	}

	.flames-card {
		padding: 2.2rem 1.5rem;
	}

	.couple-photo-section {
		padding: 4rem 1.25rem 5rem;
	}

	.venue-closing {
		padding: 2.5rem 1rem;
	}
}

/* ── Standard mobile / iPhone portrait (≤600px) ──
   This is where most of the real "structure" fixes live — everything
   that was fighting for space at phone widths gets a single clean layout. */
@media (max-width: 600px) {

	/* Entry screen */
	.entry-logo-button {
		width: min(80vw, 320px);
	}

	/* Hero */
	.hero {
		padding: 4.5rem 1rem 3.5rem;
	}

	.hero-content {
		width: 100%;
		padding: 2.5rem 1.1rem 2.75rem;
		border-radius: 12px;
	}

	.hero-monogram {
		width: 60px;
		height: 60px;
		font-size: 1.25rem;
		margin-bottom: 1.1rem;
	}

	.hero-pre {
		font-size: 0.95rem;
		letter-spacing: 0.14em;
	}

	.hero-names {
		font-size: clamp(1.9rem, 8.5vw, 2.6rem);
		line-height: 1.2;
	}

	.hero-date {
		font-size: 0.95rem;
	}

	.hero-divider {
		width: min(240px, 68vw);
		margin: 1.1rem auto 1rem;
	}

	.save-the-date-container {
		width: min(84vw, 340px);
		margin: 1.5rem auto;
	}

	.scratch-card-container {
		margin: 1.25rem auto;
	}

	.scratch-card-frame {
		width: min(86vw, 380px);
		padding: 0.55rem;
	}

	.scratch-card {
		height: 210px;
	}

	.hero-quote-style {
		font-size: clamp(1.15rem, 3.8vw, 1.45rem);
		line-height: 1.45;
		margin-top: 2.5rem;
	}

	.hero-cta {
		margin-top: 1.5rem;
		padding: 0.85rem 1.5rem;
		font-size: 0.9rem;
	}

	.scroll-indicator {
		bottom: 1rem;
	}

	/* Couple photo / save-the-date section */
	.couple-photo-container {
		width: min(92vw, 420px);
		margin: 1.5rem auto;
		padding: 0.6rem;
	}

	/* Wedding schedule cards */
	.venue-schedule-card {
		padding: 2rem 1.25rem;
	}

	/* Reception / Wedding invitation cards */
	.venue-schedule-grid {
		gap: 2.5rem;
	}

	.invitation-card {
		max-width: 100%;
		min-height: auto;
		padding: 2.5rem 1.25rem 1.75rem;
		border-radius: 20px;
	}

	/* Ornamental frames scaled to the narrow phone card so the arch,
	   pillars, garlands and diyas read as a border, not clutter. */
	.reception-arch {
		height: 64px;
	}

	.reception-pillar {
		width: 14px;
	}

	.reception-pillar .pillar-cap {
		width: 9px;
		height: 9px;
	}

	.reception-pillar .pillar-ornament {
		width: 6px;
		height: 6px;
	}

	.reception-garland-strings {
		top: 10px;
		left: 30px;
		right: 30px;
		height: 55px;
	}

	.reception-leaves {
		width: 46px;
		height: 42px;
	}

	.wedding-hanging-diyas {
		left: 14px;
		right: 14px;
		height: 145px;
	}

	.hanging-diya {
		width: 24px;
		height: 136px;
	}

	.diya-left-2 {
		left: 32px;
		height: 96px;
	}

	.diya-right-2 {
		right: 32px;
		height: 96px;
	}

	.corner-lotus {
		width: 46px;
		height: 38px;
	}

	.invitation-card::after {
		inset: 6px;
		border-radius: 15px;
	}

	.card-top-icon {
		width: 76px;
		height: 76px;
		margin: 0.5rem auto 0.75rem;
	}

	.card-top-icon svg {
		width: 50px;
		height: 50px;
	}

	.invitation-card .card-invite-line {
		font-size: 1.1rem;
	}

	.invitation-card .card-invite-sub {
		font-size: 0.65rem;
		letter-spacing: 0.26em;
	}

	.invitation-card .card-main-title {
		font-size: clamp(2.6rem, 12vw, 3.3rem);
		margin: 0.15rem 0 0.55rem;
	}

	.invitation-card .card-time-tag {
		font-size: 1.3rem;
	}

	.invitation-card .card-venue-name {
		font-size: 1.3rem;
	}

	.invitation-card .card-map-wrapper {
		height: 170px;
	}

	/* Venue info + map */
	.venue-info-card-spaced {
		padding: 1.5rem;
	}

	.venue-map-card-spaced {
		padding: 0.9rem;
	}

	.map-wrapper iframe {
		min-height: 240px;
	}

	.venue-address-compact {
		font-size: 0.98rem;
	}

	.directions-btn-spaced {
		width: 100%;
	}

	.directions-btn {
		width: 100%;
	}

	/* Closing message */
	.closing-script {
		font-size: clamp(1.8rem, 8vw, 2.4rem);
	}

	.closing-names {
		font-size: clamp(1.9rem, 8vw, 2.6rem);
	}

	.closing-note {
		font-size: 0.92rem;
	}

	/* FLAMES section — stack everything vertically, it reads much better */
	.flames-card {
		padding: 1.75rem 1.1rem;
	}

	.flames-names-row {
		gap: 0.7rem;
		flex-direction: column;
		margin-bottom: 1.5rem;
	}

	.flames-name-block {
		width: 100%;
	}

	.flames-name-label {
		font-size: 0.78rem;
	}

	.flames-name-value {
		font-size: 1.25rem;
	}

	.flames-heart {
		font-size: 1.4rem;
		margin: 0.2rem 0;
	}

	.flames-letters-row {
		flex-direction: column;
		gap: 0.5rem;
	}

	.flames-row-label {
		width: 100%;
		min-width: auto;
		text-align: center;
	}

	.flames-letter {
		width: 30px;
		height: 30px;
		font-size: 0.85rem;
	}

	.flames-word-letter {
		width: 32px;
		height: 40px;
		font-size: 1.1rem;
	}

	.flames-user-inputs-row {
		flex-direction: column;
		gap: 0.7rem;
	}

	.flames-heart-small {
		transform: rotate(90deg);
		margin: 0.1rem 0;
	}

	.flames-user-input {
		max-width: 280px;
	}

	/* Footer + floating music/translate widget */
	.site-footer {
		padding: 1.1rem 1rem 1.5rem;
		font-size: 0.85rem;
	}

	.music-player-widget {
		bottom: 1rem;
		left: 1rem;
		gap: 0.4rem;
	}

	.music-player-btn {
		width: 42px;
		height: 42px;
	}
}

/* ── Small mobile (≤420px) ── */
@media (max-width: 420px) {
	.hero-names {
		font-size: clamp(1.7rem, 9vw, 2.2rem);
	}

	.hero-pre {
		font-size: 0.85rem;
		letter-spacing: 0.1em;
	}

	.scratch-card-frame {
		width: 100%;
		max-width: 300px;
	}

	.scratch-card {
		height: 180px;
	}

	.scratch-countdown-container {
		gap: 6px;
		margin-top: 8px;
	}

	.countdown-item {
		padding: 5px 8px;
		min-width: 60px;
	}

	.countdown-num {
		font-size: 1.4rem;
	}

	.countdown-label {
		font-size: 0.6rem;
		margin-top: 2px;
	}

	.scratch-date {
		font-size: 1.7rem;
	}

	.flames-result-word {
		font-size: 2.2rem;
	}

	.flames-result-desc {
		font-size: 0.88rem;
	}

	.venue-schedule-card,
	.flames-card {
		padding: 1.5rem 1rem;
	}

	.invitation-card {
		padding: 2.25rem 1rem 1.5rem;
	}

	.invitation-card .card-main-title {
		font-size: clamp(2.3rem, 13vw, 2.9rem);
	}

	.invitation-card .card-venue-address {
		font-size: 0.82rem;
	}

	.invitation-card .card-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.invitation-card .card-actions .calendar-btn,
	.invitation-card .card-actions .directions-btn {
		width: 100%;
	}
}

/* ── Very small mobile (≤359px) ── */
@media (max-width: 359px) {
	.entry-logo-button {
		width: min(86vw, 260px);
	}

	.hero-names {
		font-size: 1.7rem;
	}

	.hero-content {
		padding: 2.1rem 0.9rem 2.4rem;
	}

	.flames-letter {
		width: 25px;
		height: 25px;
		font-size: 0.72rem;
	}

	.flames-word-letter {
		width: 24px;
		height: 30px;
		font-size: 0.88rem;
	}

	.flames-result-word {
		font-size: 1.7rem;
	}

	.music-player-widget {
		bottom: 0.8rem;
		left: 0.8rem;
		padding: 4px;
	}

	.music-player-btn {
		width: 38px;
		height: 38px;
	}
}

/* ── Landscape mobile orientation ── */
@media (max-height: 520px) and (orientation: landscape) {
	.hero {
		min-height: auto;
		padding: 3.5rem 1rem;
	}

	.entry-logo-button {
		width: min(70vh, 300px);
	}

	.save-the-date-container,
	.scratch-card-container {
		margin: 1rem auto;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM INVITATION CARDS — styled after a classic engraved wedding card:
   soft atmospheric wash, a glowing centerpiece, script title, and a
   deliberate reading rhythm (invite line → title → date → venue → actions).
══════════════════════════════════════════════════════════════════════════ */
.invitation-card {
	width: 100%;
	max-width: 450px;
	min-height: 700px;
	padding: 3rem 2.2rem 2.5rem;
	border-radius: 26px;
	box-shadow: var(--shadow-strong), 0 20px 55px rgba(80, 60, 30, 0.12);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 2px solid #b89030;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	color: #2e2618;
}

/* Fine engraved double-border, matching the rest of the site's card language */
.invitation-card::after {
	content: '';
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(184, 144, 48, 0.4);
	pointer-events: none;
	border-radius: 19px;
	z-index: 1;
}

.invitation-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 38px 90px rgba(80, 60, 30, 0.18), 0 0 40px rgba(242, 213, 116, 0.16);
}

/* Soft corner colour-wash — a quiet stand-in for the curtain / foliage
   framing in a printed invitation, without needing photographic assets */
.invitation-card::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* Reception Card — dusk blush sky with subtle rose watermark pattern (Image 2 style) */
.reception-card-box {
	background:
		radial-gradient(circle at 50% 40%, rgba(254, 241, 237, 0.7) 0%, rgba(250, 213, 206, 0.95) 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' fill='none' stroke='%23b57a80' stroke-width='0.5' stroke-opacity='0.04'/%3E%3C/svg%3E"),
		linear-gradient(180deg, #fff4f1 0%, #fae2dc 40%, #fad4cb 80%, #f7c3b8 100%) !important;
	border-color: #e5939a !important;
}

.reception-card-box::before {
	background:
		radial-gradient(ellipse 55% 38% at 2% 0%, rgba(216, 107, 147, 0.22), transparent 72%),
		radial-gradient(ellipse 55% 38% at 98% 0%, rgba(216, 107, 147, 0.22), transparent 72%);
}

/* Wedding Card — warm ivory/cream with subtle gold watermark pattern (Image 1 style) */
.wedding-card-box {
	background:
		radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.92) 0%, rgba(253, 248, 235, 0.95) 75%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' fill='none' stroke='%23b89030' stroke-width='0.5' stroke-opacity='0.04'/%3E%3C/svg%3E"),
		linear-gradient(180deg, #ffffff 0%, #fdf7e7 60%, #faecc5 100%) !important;
	border-color: #dcb35c !important;
}

.wedding-card-box::before {
	background:
		radial-gradient(ellipse 55% 38% at 2% 0%, rgba(184, 144, 48, 0.08), transparent 72%),
		radial-gradient(ellipse 55% 38% at 98% 0%, rgba(184, 144, 48, 0.08), transparent 72%);
}

/* Corner Ornaments */
.invitation-card .corner-ornament {
	position: absolute;
	width: 28px;
	height: 28px;
	color: #b89030;
	pointer-events: none;
	opacity: 0.85;
	filter: drop-shadow(0 0 3px rgba(184, 144, 48, 0.35));
	z-index: 2;
}

.invitation-card .corner-tl {
	top: 14px;
	left: 14px;
}

.invitation-card .corner-tr {
	top: 14px;
	right: 14px;
	transform: scaleX(-1);
}

.invitation-card .corner-bl {
	bottom: 14px;
	left: 14px;
	transform: scaleY(-1);
}

.invitation-card .corner-br {
	bottom: 14px;
	right: 14px;
	transform: scale(-1);
}

/* Centerpiece Top Icons — set in a soft glowing halo, like candlelight */
.card-top-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 92px;
	height: 92px;
	margin: 0.75rem auto 0.9rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.22) 58%, transparent 76%);
	box-shadow: 0 0 0 1px rgba(184, 144, 48, 0.25), 0 10px 26px rgba(130, 110, 80, 0.14);
	filter: drop-shadow(0 2px 6px rgba(130, 110, 80, 0.14));
	z-index: 2;
}

.card-top-icon svg {
	width: 62px;
	height: 62px;
	filter: drop-shadow(0 0 6px rgba(184, 144, 48, 0.3));
}

/* Garland Torans */
.temple-toran {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	height: 20px;
	z-index: 2;
	overflow: hidden;
	opacity: 0.95;
}

.temple-toran svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* "You're Invited / to our" overline — the quiet lead-in before the title */
.invitation-card .card-invite-line {
	margin: 0 0 0.15rem;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(1.25rem, 3.2vw, 1.55rem);
	letter-spacing: 0.03em;
	color: var(--gold-soft);
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
	z-index: 2;
}

.invitation-card .card-invite-sub {
	margin: 0 0 0.4rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--muted);
	z-index: 2;
}

/* Invitation Card Typography */
.invitation-card .card-main-title {
	font-family: 'Great Vibes', cursive;
	font-size: clamp(3.2rem, 8vw, 4rem);
	line-height: 1.1;
	margin: 0.2rem 0 0.7rem;
	font-weight: 400;
	z-index: 2;
}

.reception-card-box .card-main-title {
	color: #7c1a2e;
	/* Crimson maroon */
	text-shadow: 0 2px 10px rgba(232, 143, 163, 0.35), 0 2px 4px rgba(255, 255, 255, 0.7);
}

.wedding-card-box .card-main-title {
	color: #6a1a08;
	/* Deep brown-red */
	text-shadow: 0 2px 10px rgba(255, 183, 94, 0.4), 0 2px 4px rgba(255, 255, 255, 0.7);
}

/* Ornamental divider under the title, echoing the site's section dividers */
.invitation-card .card-title-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: min(190px, 62%);
	margin: 0 auto 1rem;
	z-index: 2;
}

.invitation-card .card-title-divider-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(184, 144, 48, 0.65), transparent);
}

.invitation-card .card-title-divider-icon {
	color: var(--gold);
	font-size: 0.85rem;
	text-shadow: 0 0 10px rgba(240, 217, 138, 0.5);
}

.invitation-card .card-connector {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.25rem;
	font-style: italic;
	margin: 0.4rem 0;
	color: #5a4e3e;
	z-index: 2;
}

.invitation-card .card-date-tag {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #2e2618;
	margin: 0.4rem 0;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
	z-index: 2;
}

.invitation-card .card-time-tag {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.5rem;
	font-weight: 600;
	color: #b89030;
	margin: 0.4rem 0 1.3rem;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
	z-index: 2;
}

.wedding-card-box .card-time-tag {
	color: #925807;
	/* Brighter gold/brown */
}

.invitation-card .card-venue-section {
	margin: 0 0 1.2rem;
	padding-top: 1.1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: 1px dashed rgba(184, 144, 48, 0.35);
	width: min(320px, 100%);
	z-index: 2;
}

.invitation-card .card-venue-label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: #71624a;
	margin-bottom: 0.5rem;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

.invitation-card .card-venue-name {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #2e2618;
	margin-bottom: 0.35rem;
	line-height: 1.3;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

.invitation-card .card-venue-address {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.88rem;
	line-height: 1.55;
	color: #554838;
	margin-bottom: 0;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}

/* Actions styling inside invitation cards */
.invitation-card .card-actions {
	display: flex;
	gap: 0.8rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: auto;
	/* Push actions and map wrapper to the bottom */
	margin-bottom: 1.3rem;
	width: 100%;
	z-index: 5;
}

.invitation-card .card-actions .calendar-btn,
.invitation-card .card-actions .directions-btn {
	margin: 0;
	min-height: 40px;
	padding: 0.5rem 1.2rem;
	font-size: 0.85rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* Map wrapper inside invitation cards */
.invitation-card .card-map-wrapper {
	width: 100%;
	height: 200px;
	border-radius: 16px;
	overflow: hidden;
	border: 2px solid rgba(184, 144, 48, 0.4);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), inset 0 0 0 4px rgba(255, 255, 255, 0.5);
	margin-top: 0;
	z-index: 5;
}

.invitation-card .card-map-wrapper iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   INVITATION CARD ANIMATIONS — small, continuous movement so the cards feel
   alive (candlelight, twinkling garland, catching light) plus a proper
   staggered entrance handled from script-wedding.js.
══════════════════════════════════════════════════════════════════════════ */

/* Perspective for the subtle hover tilt */
.venue-schedule-grid {
	perspective: 1400px;
}

.invitation-card {
	transform-style: preserve-3d;
}

.invitation-card:hover {
	transform: translateY(-8px);
}

/* Chandelier / gopuram icon — gentle sway + breathing glow, like candlelight */
.card-top-icon {
	animation: cardIconFloat 4.5s ease-in-out infinite;
}

@keyframes cardIconFloat {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-4px) rotate(-2deg);
	}
}

.card-top-icon svg {
	animation: cardIconGlow 3.2s ease-in-out infinite;
}

@keyframes cardIconGlow {

	0%,
	100% {
		filter: drop-shadow(0 0 6px rgba(184, 144, 48, 0.32));
	}

	50% {
		filter: drop-shadow(0 0 15px rgba(184, 144, 48, 0.6));
	}
}

/* Garland — the little flowers/bells twinkle like fairy lights */
.temple-toran circle {
	animation: toranTwinkle 2.6s ease-in-out infinite;
	transform-origin: center;
	transform-box: fill-box;
}

.temple-toran circle:nth-of-type(3n) {
	animation-delay: 0.35s;
}

.temple-toran circle:nth-of-type(3n+1) {
	animation-delay: 0.7s;
}

.temple-toran circle:nth-of-type(3n+2) {
	animation-delay: 1.05s;
}

@keyframes toranTwinkle {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.45;
		transform: scale(0.85);
	}
}

/* Corner ornaments — a slow confident pulse */
.invitation-card .corner-ornament {
	animation: cornerPulse 3.4s ease-in-out infinite;
}

.invitation-card .corner-tr {
	animation-delay: 0.3s;
}

.invitation-card .corner-bl {
	animation-delay: 0.6s;
}

.invitation-card .corner-br {
	animation-delay: 0.9s;
}

@keyframes cornerPulse {

	0%,
	100% {
		opacity: 0.55;
	}

	50% {
		opacity: 1;
	}
}

/* Title divider — a thread of light travels along the line */
.invitation-card .card-title-divider-line {
	background-size: 200% 100%;
	animation: dividerShimmer 3.2s linear infinite;
}

@keyframes dividerShimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* Foil shine — a soft diagonal light sweep crosses the card every few seconds */
.invitation-card .card-shine {
	position: absolute;
	top: 0;
	left: -160%;
	width: 55%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	z-index: 3;
	pointer-events: none;
	animation: cardShineSweep 7s ease-in-out infinite;
}

@keyframes cardShineSweep {
	0% {
		left: -160%;
	}

	28% {
		left: 160%;
	}

	100% {
		left: 160%;
	}
}

/* Sparkle particles drifting gently inside the card */
.invitation-card .card-sparkle {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 20%, var(--gold-soft) 80%, transparent 100%);
	filter: drop-shadow(0 0 3px var(--gold-soft));
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	animation: cardSparkleDrift 5s ease-in-out infinite;
}

.invitation-card .card-sparkle:nth-of-type(1) {
	top: 22%;
	left: 12%;
	animation-delay: 0s;
}

.invitation-card .card-sparkle:nth-of-type(2) {
	top: 38%;
	left: 85%;
	animation-delay: 0.9s;
}

.invitation-card .card-sparkle:nth-of-type(3) {
	top: 60%;
	left: 8%;
	animation-delay: 1.8s;
}

.invitation-card .card-sparkle:nth-of-type(4) {
	top: 15%;
	left: 70%;
	animation-delay: 2.6s;
}

.invitation-card .card-sparkle:nth-of-type(5) {
	top: 72%;
	left: 90%;
	animation-delay: 3.3s;
}

.invitation-card .card-sparkle:nth-of-type(6) {
	top: 48%;
	left: 50%;
	animation-delay: 4.1s;
}

@keyframes cardSparkleDrift {
	0% {
		opacity: 0;
		transform: translate(0, 6px) scale(0.6);
	}

	15% {
		opacity: 0.95;
	}

	50% {
		opacity: 0.7;
		transform: translate(6px, -10px) scale(1);
	}

	85% {
		opacity: 0.3;
	}

	100% {
		opacity: 0;
		transform: translate(-4px, -20px) scale(0.6);
	}
}

.invitation-card .card-sparkle:nth-of-type(2n) {
	animation-name: cardSparkleDriftAlt;
}

@keyframes cardSparkleDriftAlt {
	0% {
		opacity: 0;
		transform: translate(0, 6px) scale(0.6);
	}

	15% {
		opacity: 0.95;
	}

	50% {
		opacity: 0.7;
		transform: translate(-8px, -10px) scale(1);
	}

	85% {
		opacity: 0.3;
	}

	100% {
		opacity: 0;
		transform: translate(6px, -20px) scale(0.6);
	}
}

/* Ornate Floating Golden Leaves for Wedding Box */
.wedding-card-box .gold-leaf {
	position: absolute;
	width: 18px;
	height: 24px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transform-style: preserve-3d;
	animation: goldLeafFall 8s linear infinite, goldLeafGlowPulse 2.8s ease-in-out infinite alternate;
}

.wedding-card-box .gold-leaf:nth-of-type(1) {
	left: 10%;
	animation-delay: 0s;
	animation-duration: 7s;
}

.wedding-card-box .gold-leaf:nth-of-type(2) {
	left: 28%;
	animation-delay: 1.6s;
	animation-duration: 8.5s;
}

.wedding-card-box .gold-leaf:nth-of-type(3) {
	left: 48%;
	animation-delay: 3.2s;
	animation-duration: 7.2s;
}

.wedding-card-box .gold-leaf:nth-of-type(4) {
	left: 68%;
	animation-delay: 4.8s;
	animation-duration: 8s;
}

.wedding-card-box .gold-leaf:nth-of-type(5) {
	left: 84%;
	animation-delay: 2.2s;
	animation-duration: 9s;
}

.wedding-card-box .gold-leaf:nth-of-type(6) {
	left: 40%;
	animation-delay: 6s;
	animation-duration: 7.8s;
}

@keyframes goldLeafFall {
	0% {
		transform: translateY(-30px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0);
		opacity: 0;
	}

	10% {
		opacity: 0.95;
	}

	90% {
		opacity: 0.95;
	}

	100% {
		transform: translateY(740px) rotateX(360deg) rotateY(180deg) rotateZ(320deg) translateX(38px);
		opacity: 0;
	}
}

@keyframes goldLeafGlowPulse {
	0%, 100% {
		filter: drop-shadow(0 2px 5px rgba(255, 215, 0, 0.75)) drop-shadow(0 0 6px rgba(255, 170, 0, 0.5));
	}
	50% {
		filter: drop-shadow(0 3px 12px rgba(255, 223, 0, 1)) drop-shadow(0 0 18px rgba(255, 190, 80, 0.9));
	}
}

.reception-card-box .petal {
	fill: #ff8a9a;
	animation: petalFallRose 7.5s linear infinite;
}

@keyframes petalFallRose {
	0% {
		transform: translateY(-25px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0);
		opacity: 0;
	}

	10% {
		opacity: 0.85;
	}

	90% {
		opacity: 0.85;
	}

	100% {
		transform: translateY(730px) rotateX(360deg) rotateY(180deg) rotateZ(270deg) translateX(35px);
		opacity: 0;
	}
}

/* Ornate Floating Black Leaves for Reception Box */
.reception-card-box .black-leaf {
	position: absolute;
	width: 18px;
	height: 24px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transform-style: preserve-3d;
	animation: blackLeafFall 8s linear infinite;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.reception-card-box .black-leaf:nth-of-type(1) {
	left: 10%;
	animation-delay: 0s;
	animation-duration: 7s;
}

.reception-card-box .black-leaf:nth-of-type(2) {
	left: 28%;
	animation-delay: 1.6s;
	animation-duration: 8.5s;
}

.reception-card-box .black-leaf:nth-of-type(3) {
	left: 48%;
	animation-delay: 3.2s;
	animation-duration: 7.2s;
}

.reception-card-box .black-leaf:nth-of-type(4) {
	left: 68%;
	animation-delay: 4.8s;
	animation-duration: 8s;
}

.reception-card-box .black-leaf:nth-of-type(5) {
	left: 84%;
	animation-delay: 2.2s;
	animation-duration: 9s;
}

.reception-card-box .black-leaf:nth-of-type(6) {
	left: 40%;
	animation-delay: 6s;
	animation-duration: 7.8s;
}

@keyframes blackLeafFall {
	0% {
		transform: translateY(-30px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0);
		opacity: 0;
	}

	10% {
		opacity: 0.95;
	}

	90% {
		opacity: 0.95;
	}

	100% {
		transform: translateY(740px) rotateX(360deg) rotateY(180deg) rotateZ(320deg) translateX(38px);
		opacity: 0;
	}
}

/* Lock floating music/translate widget at the closing section line */
.venue-closing {
	position: relative;
}

.music-player-widget.at-closing-section {
	position: absolute !important;
	bottom: auto !important;
	top: -65px !important;
	left: 1.5rem !important;
}

/* Translate Icon Button (Circular style like Music button with அ / A indicator) */
.translate-icon-btn {
	background: rgba(255, 255, 255, 0.92) !important;
}

.translate-lang-icon {
	font-family: 'Cormorant Garamond', 'Montserrat', serif, sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	color: #b89030;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
	transition: color 0.3s ease, transform 0.3s ease;
}

.translate-icon-btn:hover .translate-lang-icon {
	color: #1a0f12;
	transform: scale(1.12);
}



/* ── Disable hover transformations on touch devices ── */
@media (hover: none) {

	.entry-logo-button:hover,
	.hero-cta:hover,
	.directions-btn:hover,
	.calendar-btn:hover,
	.music-player-btn:hover,
	.flames-reveal-btn:hover,
	.venue-info-card:hover,
	.venue-schedule-card:hover,
	.venue-map-card:hover,
	.invitation-card:hover,
	.flames-card:hover {
		transform: none !important;
	}

	.reception-card-box:hover,
	.wedding-card-box:hover {
		box-shadow: var(--shadow-strong) !important;
	}

	.couple-photo-frame-new:hover .couple-photo-new {
		transform: none !important;
	}

	.detail-item-logo:hover .company-logo-large {
		transform: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   ENHANCED WEDDING BOX EFFECTS
══════════════════════════════════════════════════════════════════════════ */

/* Radiant golden aura that breathes behind the wedding card */
.wedding-card-box::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 28px;
	background: linear-gradient(135deg,
		rgba(220, 179, 92, 0.55) 0%,
		rgba(255, 215, 0, 0.2) 25%,
		rgba(253, 248, 235, 0) 50%,
		rgba(255, 215, 0, 0.2) 75%,
		rgba(220, 179, 92, 0.55) 100%);
	background-size: 300% 300%;
	animation: weddingAuraSpin 6s linear infinite, weddingAuraBreathe 3.5s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	border: 3px solid transparent;
}

@keyframes weddingAuraSpin {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes weddingAuraBreathe {
	0%, 100% { opacity: 0.6; }
	50%       { opacity: 1; }
}

/* Gopuram watermark — slow drift + glow pulse */
.wedding-gopuram-watermark {
	animation: gopuramFloat 8s ease-in-out infinite, gopuramGlow 4s ease-in-out infinite;
}

@keyframes gopuramFloat {
	0%, 100% { transform: translate(-50%, -50%) scale(1) translateY(0px); }
	50%       { transform: translate(-50%, -50%) scale(1.03) translateY(-6px); }
}

@keyframes gopuramGlow {
	0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 0px rgba(220, 179, 92, 0)); }
	50%       { opacity: 0.85; filter: drop-shadow(0 0 18px rgba(220, 179, 92, 0.45)); }
}

/* Corner lotus — bloom pulse */
.corner-lotus {
	animation: lotusBloom 4s ease-in-out infinite;
}

.left-lotus  { animation-delay: 0s; }
.right-lotus { animation-delay: 2s; }

@keyframes lotusBloom {
	0%, 100% { transform: scale(1);    opacity: 0.88; filter: drop-shadow(0 2px 4px rgba(130, 80, 80, 0.12)); }
	50%       { transform: scale(1.12); opacity: 1;    filter: drop-shadow(0 4px 12px rgba(233, 30, 99, 0.35)); }
}

/* Toran rope: golden shimmer sweep along the green vine */
.wedding-toran path:first-child {
	animation: toranRopeShimmer 4s linear infinite;
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
}

@keyframes toranRopeShimmer {
	0%   { stroke-dashoffset: 200; stroke: #2E7D32; }
	50%  { stroke-dashoffset: 0;   stroke: #c9a227; }
	100% { stroke-dashoffset: -200; stroke: #2E7D32; }
}

/* Warm golden ambient inner glow on wedding card */
.wedding-card-box {
	box-shadow:
		var(--shadow-strong),
		0 20px 55px rgba(80, 60, 30, 0.12),
		0 0 40px rgba(220, 179, 92, 0.15),
		inset 0 0 60px rgba(255, 235, 140, 0.08);
	animation: weddingCardBreath 5s ease-in-out infinite;
}

@keyframes weddingCardBreath {
	0%, 100% { box-shadow: var(--shadow-strong), 0 20px 55px rgba(80, 60, 30, 0.12), 0 0 30px rgba(220, 179, 92, 0.12), inset 0 0 40px rgba(255, 235, 140, 0.06); }
	50%       { box-shadow: var(--shadow-strong), 0 28px 72px rgba(80, 60, 30, 0.18), 0 0 65px rgba(220, 179, 92, 0.32), inset 0 0 80px rgba(255, 235, 140, 0.14); }
}


/* ══════════════════════════════════════════════════════════════════════════
   ENHANCED COUNTDOWN EFFECTS
══════════════════════════════════════════════════════════════════════════ */

/* Metallic foil shimmer sweep across each countdown panel */
.countdown-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: -80%;
	width: 55%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), rgba(255, 240, 170, 0.45), transparent);
	transform: skewX(-18deg);
	border-radius: inherit;
	pointer-events: none;
	z-index: 2;
	animation: panelShimmer 3.5s ease-in-out infinite;
}

.countdown-item:nth-child(2)::before { animation-delay: 0.85s; }
.countdown-item:nth-child(3)::before { animation-delay: 1.7s; }
.countdown-item:nth-child(4)::before { animation-delay: 2.55s; }

@keyframes panelShimmer {
	0%   { left: -80%; }
	35%  { left: 140%; }
	100% { left: 140%; }
}

/* Enhanced number flip animation — golden bloom + depth */
@keyframes digitPop {
	0% {
		transform: perspective(220px) rotateX(0deg) translateY(0) scale(1);
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
		color: #7a4d0a;
	}
	30% {
		transform: perspective(220px) rotateX(-55deg) translateY(-5px) scale(1.06);
		text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7), 0 0 18px rgba(220, 179, 92, 0.9), 0 0 35px rgba(255, 200, 80, 0.5);
		color: #dcb35c;
	}
	62% {
		transform: perspective(220px) rotateX(22deg) translateY(2px) scale(0.97);
	}
	100% {
		transform: perspective(220px) rotateX(0deg) translateY(0) scale(1);
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
		color: #7a4d0a;
	}
}

/* Sparkle dots floating above countdown */
.scratch-countdown-container {
	position: relative;
}

.scratch-countdown-container::before,
.scratch-countdown-container::after {
	content: '✦';
	position: absolute;
	top: -18px;
	font-size: 0.55rem;
	color: rgba(220, 179, 92, 0.9);
	pointer-events: none;
	animation: countdownSparkFloat 3s ease-in-out infinite;
}

.scratch-countdown-container::before {
	left: 15%;
	animation-delay: 0s;
}

.scratch-countdown-container::after {
	right: 15%;
	animation-delay: 1.5s;
}

@keyframes countdownSparkFloat {
	0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.5; }
	50%       { transform: translateY(-10px) scale(1.2); opacity: 1; }
}

/* Countdown container glow ring */
.scratch-countdown-container {
	border-radius: 16px;
	padding: 4px 2px;
	background: radial-gradient(ellipse 90% 60% at 50% 100%, rgba(220, 179, 92, 0.1), transparent);
	animation: countdownContainerGlow 2s ease-in-out infinite;
}

@keyframes countdownContainerGlow {
	0%, 100% { filter: drop-shadow(0 0 6px rgba(220, 179, 92, 0.2)); }
	50%       { filter: drop-shadow(0 0 18px rgba(220, 179, 92, 0.55)); }
}

/* Seconds panel — extra vivid pulse to feel like a heartbeat */
.countdown-item:last-child {
	animation: floatLocket 4.5s ease-in-out infinite, secsGlow 1s ease-in-out infinite, secondsPulse 1s ease-in-out infinite;
}

@keyframes secondsPulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.04); }
}

/* Panel number label shimmer */
.countdown-label {
	background: linear-gradient(90deg, #96721a, #dcb35c, #fdf0c8, #dcb35c, #96721a);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: labelShimmer 3s linear infinite;
}

@keyframes labelShimmer {
	0%   { background-position: 0% center; }
	100% { background-position: 200% center; }
}

/* ==========================
   Closing Love Story
   ========================== */

.closing-note {
    line-height: 1.8;
}

.closing-note em {
    display: block;
    font-style: italic;
    line-height: 2;
    color: #6b5a45;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

.closing-hearts {
    margin-top: 25px;
}

.closing-hearts span {
    margin: 0 6px;
}

.closing-note strong {
    display: inline-block;
    font-family: "Great Vibes", cursive;
    font-size: 1.8rem;
    color: #9a6b12;
    font-weight: normal;
    margin-bottom: 10px;
}