/* Cover Screen — full-viewport welcome overlay shown on page load. */

.weddy-cover {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: #1B3A2B;
	transition-property: opacity, transform;
	transition-timing-function: ease;
	transition-duration: 700ms; /* overridden inline by cover.js from data-duration */
}

.weddy-cover.is-hidden {
	display: none !important;
}

/* Closing transitions — which one applies is picked by data-transition,
   the class toggled by JS is always just "is-closing". */
.weddy-cover[data-transition="fade"].is-closing {
	opacity: 0;
}

.weddy-cover[data-transition="scale"].is-closing {
	opacity: 0;
	transform: scale(1.08);
}

.weddy-cover[data-transition="up"].is-closing {
	transform: translateY(-100%);
}

/* ─── Decorations ────────────────────────────────────────────────────── */

.weddy-cover__decorations {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.weddy-cover__deco {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: rgba(255, 255, 255, 0.12);
	font-size: 48px;
	line-height: 1;
	opacity: var(--wcd-op, 1);
	transform: rotate(var(--wcd-rot, 0deg)) scale(var(--wcd-scale, 1));
}

/* Every animation style shares the same timing knobs (duration/delay come
   from each decoration's own preset, see class-widget.php) — only
   animation-name (and, where the keyframes aren't naturally symmetric,
   animation-direction) differs per style. */
.weddy-cover__deco--anim-float,
.weddy-cover__deco--anim-drift,
.weddy-cover__deco--anim-sway,
.weddy-cover__deco--anim-pulse,
.weddy-cover__deco--anim-twinkle {
	animation-duration: var(--wcd-dur, 6s);
	animation-delay: var(--wcd-delay, 0s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.weddy-cover__deco--anim-float   { animation-name: weddy-cover-deco-float; }
.weddy-cover__deco--anim-sway    { animation-name: weddy-cover-deco-sway; }
.weddy-cover__deco--anim-pulse   { animation-name: weddy-cover-deco-pulse; }

/* Drift and twinkle already return to their own starting point inside the
   keyframes (0% and 100% match), so they loop cleanly forward instead of
   ping-ponging — "alternate" would just be a slower, redundant way of
   doing the same loop for these two. */
.weddy-cover__deco--anim-drift,
.weddy-cover__deco--anim-twinkle {
	animation-direction: normal;
}
.weddy-cover__deco--anim-drift   { animation-name: weddy-cover-deco-drift; }
.weddy-cover__deco--anim-twinkle { animation-name: weddy-cover-deco-twinkle; }

/* Bay lên / Rơi xuống travel the whole overlay height rather than
   bobbing in place, so they get their own, longer-duration group
   (class-widget.php multiplies their base duration ×2.5) and a linear
   timing function — an ease-in-out "breath" reads as bobbing, a steady
   linear drift reads as actually rising/falling, like petals or
   floating lanterns. */
.weddy-cover__deco--anim-rise,
.weddy-cover__deco--anim-fall {
	animation-duration: var(--wcd-dur, 15s);
	animation-delay: var(--wcd-delay, 0s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
.weddy-cover__deco--anim-rise { animation-name: weddy-cover-deco-rise; }
.weddy-cover__deco--anim-fall { animation-name: weddy-cover-deco-fall; }

/* Trôi nổi — floats up/down and rotates slightly further each way. */
@keyframes weddy-cover-deco-float {
	from {
		transform: translateY(0) rotate(var(--wcd-rot, 0deg)) scale(var(--wcd-scale, 1));
	}
	to {
		transform: translateY(-16px) rotate(calc(var(--wcd-rot, 0deg) + 6deg)) scale(var(--wcd-scale, 1));
	}
}

/* Trôi dạt — a gentle wandering loop in both x and y, back to origin. */
@keyframes weddy-cover-deco-drift {
	0% {
		transform: translate(0, 0) rotate(var(--wcd-rot, 0deg)) scale(var(--wcd-scale, 1));
	}
	50% {
		transform: translate(10px, -8px) rotate(var(--wcd-rot, 0deg)) scale(var(--wcd-scale, 1));
	}
	100% {
		transform: translate(0, 0) rotate(var(--wcd-rot, 0deg)) scale(var(--wcd-scale, 1));
	}
}

/* Đung đưa — rocks side to side around its own preset rotation. */
@keyframes weddy-cover-deco-sway {
	from {
		transform: rotate(calc(var(--wcd-rot, 0deg) - 12deg)) scale(var(--wcd-scale, 1));
	}
	to {
		transform: rotate(calc(var(--wcd-rot, 0deg) + 12deg)) scale(var(--wcd-scale, 1));
	}
}

/* Nhấp nhô — breathes in and out in both size and opacity. */
@keyframes weddy-cover-deco-pulse {
	from {
		transform: rotate(var(--wcd-rot, 0deg)) scale(calc(var(--wcd-scale, 1) * 0.85));
		opacity: calc(var(--wcd-op, 1) * 0.7);
	}
	to {
		transform: rotate(var(--wcd-rot, 0deg)) scale(calc(var(--wcd-scale, 1) * 1.1));
		opacity: var(--wcd-op, 1);
	}
}

/* Lấp lánh — just a soft opacity glint, no movement at all. */
@keyframes weddy-cover-deco-twinkle {
	0%, 100% {
		opacity: calc(var(--wcd-op, 1) * 0.3);
	}
	50% {
		opacity: var(--wcd-op, 1);
	}
}

/* Bay lên — rises from below its own position and fades out near the
   top, looping back in below again while invisible. */
@keyframes weddy-cover-deco-rise {
	0% {
		transform: translateY(20vh) rotate(var(--wcd-rot, 0deg)) scale(var(--wcd-scale, 1));
		opacity: 0;
	}
	10% {
		opacity: var(--wcd-op, 1);
	}
	90% {
		opacity: var(--wcd-op, 1);
	}
	100% {
		transform: translateY(-70vh) rotate(calc(var(--wcd-rot, 0deg) + 10deg)) scale(var(--wcd-scale, 1));
		opacity: 0;
	}
}

/* Rơi xuống — the same loop, mirrored top-to-bottom. */
@keyframes weddy-cover-deco-fall {
	0% {
		transform: translateY(-20vh) rotate(var(--wcd-rot, 0deg)) scale(var(--wcd-scale, 1));
		opacity: 0;
	}
	10% {
		opacity: var(--wcd-op, 1);
	}
	90% {
		opacity: var(--wcd-op, 1);
	}
	100% {
		transform: translateY(70vh) rotate(calc(var(--wcd-rot, 0deg) - 10deg)) scale(var(--wcd-scale, 1));
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.weddy-cover__deco--anim-float,
	.weddy-cover__deco--anim-drift,
	.weddy-cover__deco--anim-sway,
	.weddy-cover__deco--anim-pulse,
	.weddy-cover__deco--anim-twinkle,
	.weddy-cover__deco--anim-rise,
	.weddy-cover__deco--anim-fall {
		animation: none;
	}
}

.weddy-cover__deco i,
.weddy-cover__deco svg {
	width: 100%;
	height: 100%;
	font-size: inherit;
}

/* Without this, the Decoration Color control has no effect on an SVG
   icon: the icon's own <path> renders in whatever fill Elementor's icon
   markup carries, and only inherits the parent's `color` if something
   explicitly tells it to via `fill: currentColor` — Elementor's own
   built-in icon widgets get this for free from their own `.elementor-
   icon` class, which this custom widget doesn't use, so it needs its
   own copy of the same rule. */
.weddy-cover__deco svg {
	fill: currentColor;
}

.weddy-cover__deco img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ─── Card ───────────────────────────────────────────────────────────── */

.weddy-cover__card {
	position: relative;
	z-index: 0; /* establishes a stacking context so ::before's negative
	               z-index below stays scoped to just this card, not the
	               whole page */
	width: 90%;
	max-width: 420px;
	box-sizing: border-box;
	padding: 48px 32px;
	border-radius: 12px;
	text-align: center;
	background-color: #28492F;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: weddy-cover-card-in 0.9s ease both;
}

/* Overlay Color (Style → Card) — sits behind the text but on top of
   whatever Background is configured (color/gradient/image), so it can
   dim a busy background image without also dimming the text on top. */
.weddy-cover__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-color: var(--wcc-overlay, transparent);
	pointer-events: none;
}

@keyframes weddy-cover-card-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.weddy-cover__emblem {
	margin-bottom: 16px;
	color: #28492F;
	font-size: 36px;
	line-height: 1;
}

.weddy-cover__emblem svg {
	width: 1em;
	height: 1em;
	fill: currentColor; /* see the comment on .weddy-cover__deco svg above */
}

.weddy-cover__emblem img {
	width: 1em;
	height: 1em;
	object-fit: contain;
}

.weddy-cover__names {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 20px;
	color: #ffffff;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 30px;
	line-height: 1.2;
}

.weddy-cover__amp {
	font-style: italic;
	opacity: 0.75;
}

.weddy-cover__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 auto 20px;
	max-width: 220px;
	color: rgba(255, 255, 255, 0.5);
}

.weddy-cover__divider span {
	flex: 1 1 auto;
	height: 1px;
	background: currentColor;
}

.weddy-cover__divider-icon {
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
}

.weddy-cover__divider-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor; /* see the comment on .weddy-cover__deco svg above */
}

.weddy-cover__divider-icon img {
	width: 1em;
	height: 1em;
	object-fit: contain;
}

.weddy-cover__date {
	margin-bottom: 6px;
	color: #ffffff;
	font-size: 16px;
	letter-spacing: 0.03em;
}

.weddy-cover__greeting {
	margin-bottom: 6px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.weddy-cover__guest-name {
	margin-bottom: 0;
	color: #ffffff;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 19px;
	font-weight: 700;
}

.weddy-cover__button {
	display: inline-block;
	margin-top: 24px;
	padding: 12px 36px;
	border: none;
	border-radius: 999px;
	background-color: #F5F0E6;
	color: #28492F;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.weddy-cover__button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

@media (max-width: 480px) {
	.weddy-cover__card {
		padding: 36px 24px;
	}
	.weddy-cover__names {
		font-size: 24px;
	}
	/* Forces "&" onto its own centered line on phones instead of an
	   unpredictable wrap that can leave it stranded at the end of the
	   groom's name — flex-basis:100% on just this one item makes it
	   claim a full row, so it can never fit beside either name and the
	   flex-wrap algorithm bumps it (and the item after it) down. */
	.weddy-cover__amp {
		flex-basis: 100%;
		text-align: center;
	}
}