/* PCC Invitation Popup 1.2.0
   Colors arrive as custom properties on #pccinv-root from the settings screen.
   So does --pccinv-speed, the animation duration multiplier: every timing in
   the opening choreography is written as calc(<base> * var(--pccinv-speed)),
   so one number from the settings screen stretches or tightens the whole
   sequence. Hover and focus feedback is deliberately left unscaled.
   Everything below is scoped to .pccinv so it cannot leak into the theme. */

.pccinv {
	--pccinv-envelope: #26344b;
	--pccinv-flap: #31425e;
	--pccinv-card: #fbf7ef;
	--pccinv-ink: #1c2637;
	--pccinv-foil: #b08a46;
	--pccinv-seal: #7a2e2e;
	--pccinv-display: "Cormorant Garamond", "Didot", "Hoefler Text", Georgia, "Times New Roman", serif;
	--pccinv-utility: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pccinv-ease: cubic-bezier(0.22, 0.68, 0.28, 1);
	--pccinv-speed: 1;

	position: fixed;
	inset: 0;
	z-index: 99990;
	display: none;
}

.pccinv[hidden] {
	display: none;
}

.pccinv--visible {
	display: block;
}

html.pccinv-locked,
html.pccinv-locked body {
	overflow: hidden;
}

/* Backdrop ------------------------------------------------------------- */

.pccinv__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 15, 24, 0.8);
	opacity: 0;
	transition: opacity calc(400ms * var(--pccinv-speed)) ease;
}

.pccinv--visible .pccinv__backdrop {
	opacity: 1;
}

.pccinv--closing .pccinv__backdrop {
	opacity: 0;
}

/* Stage and envelope --------------------------------------------------- */

.pccinv__stage {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	perspective: 1400px;
}

.pccinv__envelope {
	position: relative;
	width: min(92vw, 560px);
	aspect-ratio: 1.55 / 1;
	transform-style: preserve-3d;
	opacity: 0;
	transform: translateY(18px) scale(0.98);
	transition:
		opacity calc(450ms * var(--pccinv-speed)) ease,
		transform calc(550ms * var(--pccinv-speed)) var(--pccinv-ease);
}

.pccinv--visible .pccinv__envelope {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.pccinv--closing .pccinv__envelope {
	opacity: 0;
	transform: translateY(14px) scale(0.98);
}

.pccinv__back {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 4px;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 46%),
		var(--pccinv-envelope);
	box-shadow: 0 26px 60px rgba(8, 12, 20, 0.45);
}

/* The front panel of the envelope, notched so the flap sits in the V. */
.pccinv__pocket {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 4px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.14)),
		var(--pccinv-envelope);
	clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 50% 50%);
	transform: translateZ(2px);
}

.pccinv__flap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 54%;
	z-index: 4;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)),
		var(--pccinv-flap);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform-origin: top center;
	/* translateZ keeps the flap in front while closed and drops it behind the
	   card once open: inside a preserve-3d context the depth wins over z-index. */
	transform: translateZ(3px) rotateX(0deg);
	backface-visibility: hidden;
	transition:
		transform calc(750ms * var(--pccinv-speed)) var(--pccinv-ease),
		z-index 0ms calc(340ms * var(--pccinv-speed));
}

.pccinv--opening .pccinv__flap,
.pccinv--open .pccinv__flap {
	transform: translateZ(-3px) rotateX(180deg);
	z-index: 1;
}

/* Wax seal -------------------------------------------------------------- */

.pccinv__seal {
	position: absolute;
	top: 46%;
	left: 50%;
	z-index: 6;
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 58%),
		var(--pccinv-seal);
	box-shadow: 0 6px 14px rgba(8, 12, 20, 0.4), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
	color: #f3e3c8;
	cursor: default;
	transform: translateZ(4px);
	transition:
		transform calc(320ms * var(--pccinv-speed)) var(--pccinv-ease),
		opacity calc(320ms * var(--pccinv-speed)) ease;
}

button.pccinv__seal {
	cursor: pointer;
}

button.pccinv__seal:hover,
button.pccinv__seal:focus-visible {
	transform: translateZ(4px) scale(1.06);
}

.pccinv__seal-mark {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

.pccinv__seal-text {
	font-family: var(--pccinv-display);
	font-size: 22px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pccinv--opening .pccinv__seal,
.pccinv--open .pccinv__seal {
	opacity: 0;
	transform: translateZ(4px) scale(1.35);
	pointer-events: none;
}

/* Card ------------------------------------------------------------------ */

/* Closed, the card sits below the pocket's V so no sliver of it can show
   through the antialiased clip-path edges. Its height while tucked away is
   fixed, which keeps the slide-out distance predictable; the presented height
   is measured and set in JS so it can animate to the content's real size. */
.pccinv__card {
	position: absolute;
	top: 51%;
	left: 5%;
	width: 90%;
	height: 45%;
	z-index: 2;
	overflow: hidden;
	border-radius: 2px;
	background: var(--pccinv-card);
	color: var(--pccinv-ink);
	box-shadow: 0 14px 34px rgba(8, 12, 20, 0.3);
	transform: translateZ(1px) translateY(0);
	transition: transform calc(800ms * var(--pccinv-speed)) var(--pccinv-ease) calc(360ms * var(--pccinv-speed));
}

.pccinv--opening .pccinv__card {
	transform: translateZ(1px) translateY(-125%);
}

.pccinv--open .pccinv__card {
	top: 50%;
	transform: translateZ(5px) translateY(-50%);
	overflow: auto;
	overscroll-behavior: contain;
	transition:
		transform calc(550ms * var(--pccinv-speed)) var(--pccinv-ease),
		top calc(550ms * var(--pccinv-speed)) var(--pccinv-ease),
		height calc(550ms * var(--pccinv-speed)) var(--pccinv-ease);
}

/* Once the card is out, the envelope is theatre we no longer need. */
.pccinv--open .pccinv__back,
.pccinv--open .pccinv__pocket,
.pccinv--open .pccinv__flap {
	opacity: 0;
	pointer-events: none;
	transition: opacity calc(450ms * var(--pccinv-speed)) ease calc(60ms * var(--pccinv-speed));
}

.pccinv__card-inner {
	padding: clamp(22px, 5vw, 40px);
	text-align: center;
	border: 1px solid rgba(176, 138, 70, 0.35);
	margin: 10px;
}

.pccinv__eyebrow {
	margin: 0 0 10px;
	font-family: var(--pccinv-utility);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pccinv-foil);
}

.pccinv__headline {
	margin: 0 0 14px;
	font-family: var(--pccinv-display);
	font-size: clamp(28px, 5.4vw, 44px);
	font-weight: 500;
	line-height: 1.08;
	color: var(--pccinv-ink);
}

.pccinv__meta {
	margin: 0 0 16px;
	padding: 12px 0;
	border-top: 1px solid rgba(176, 138, 70, 0.4);
	border-bottom: 1px solid rgba(176, 138, 70, 0.4);
	font-family: var(--pccinv-utility);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.7;
}

.pccinv__meta span {
	display: block;
}

.pccinv__body {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.65;
}

.pccinv__body p:last-child {
	margin-bottom: 0;
}

.pccinv__actions {
	margin: 0 0 12px;
}

.pccinv__cta {
	display: inline-block;
	padding: 14px 30px;
	background: var(--pccinv-ink);
	color: var(--pccinv-card);
	font-family: var(--pccinv-utility);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
	transition: background 200ms ease, transform 200ms ease;
}

.pccinv__cta:hover,
.pccinv__cta:focus-visible {
	background: var(--pccinv-seal);
	color: var(--pccinv-card);
	transform: translateY(-1px);
}

.pccinv__secondary {
	margin: 0;
	font-family: var(--pccinv-utility);
	font-size: 13px;
}

.pccinv__secondary a {
	color: var(--pccinv-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pccinv__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pccinv-ink);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 300ms ease;
}

.pccinv--open .pccinv__close {
	opacity: 0.65;
}

.pccinv__close:hover,
.pccinv__close:focus-visible {
	opacity: 1;
}

.pccinv :focus-visible {
	outline: 2px solid var(--pccinv-foil);
	outline-offset: 3px;
}

.pccinv .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Theme isolation ------------------------------------------------------- */
/* The host theme (Sage/shem) styles headings, spans and paragraphs globally.
   Reset anything that can leak into the card so it looks the same on every
   site: no grey label backgrounds, no theme padding, no runaway images. */

.pccinv .pccinv__eyebrow,
.pccinv .pccinv__headline,
.pccinv .pccinv__meta,
.pccinv .pccinv__meta span,
.pccinv .pccinv__date,
.pccinv .pccinv__venue,
.pccinv .pccinv__body,
.pccinv .pccinv__body p,
.pccinv .pccinv__secondary {
	background: none;
	box-shadow: none;
	text-shadow: none;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	display: block;
	width: auto;
	max-width: 100%;
	float: none;
}

.pccinv .pccinv__eyebrow,
.pccinv .pccinv__headline {
	padding: 0;
}

.pccinv .pccinv__body {
	overflow-wrap: anywhere;
}

.pccinv .pccinv__body img,
.pccinv .pccinv__body video,
.pccinv .pccinv__body iframe,
.pccinv .pccinv__body svg {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto 16px;
}

.pccinv .pccinv__body img:last-child {
	margin-bottom: 0;
}

.pccinv .pccinv__body figure {
	margin: 0 0 16px;
}

/* Small screens --------------------------------------------------------- */

@media (max-width: 480px) {
	.pccinv__stage {
		padding: 16px;
	}

	.pccinv__seal {
		width: 54px;
		height: 54px;
		margin: -27px 0 0 -27px;
	}

	.pccinv__card-inner {
		margin: 6px;
	}
}

/* Reduced motion: no envelope, no theatre, just the invitation. ---------- */

@media (prefers-reduced-motion: reduce) {
	.pccinv * {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}

.pccinv--instant .pccinv__back,
.pccinv--instant .pccinv__pocket,
.pccinv--instant .pccinv__flap,
.pccinv--instant .pccinv__seal {
	display: none;
}

.pccinv--instant .pccinv__card {
	top: 50%;
	height: auto;
	max-height: 86dvh;
	transform: translateY(-50%);
	overflow: auto;
	transition: none;
}

.pccinv--instant .pccinv__close {
	opacity: 0.65;
}


/* =======================================================================
   Photo mode: the card IS the invitation image.
   Set a front image (and optionally a back one) and everything below takes
   over. The card is sized in JS from the image's own aspect ratio, so any
   shape of artwork lands centered and uncropped.
   ======================================================================= */

.pccinv--photo .pccinv__card {
	background: transparent;
	overflow: visible;
	border-radius: 3px;
	box-shadow: 0 18px 44px rgba(8, 12, 20, 0.5);
}

/* Order matters: the rising-out state is declared first so the presented
   state below can override it once both classes are on the root. */
.pccinv--photo.pccinv--opening .pccinv__card {
	transform: translateZ(1px) translateY(-125%);
}

.pccinv--photo.pccinv--open .pccinv__card {
	/* left/top/width/height are set in JS from the artwork's own proportions. */
	overflow: visible;
	transform: translateZ(5px);
	transition:
		width calc(550ms * var(--pccinv-speed)) var(--pccinv-ease),
		height calc(550ms * var(--pccinv-speed)) var(--pccinv-ease),
		top calc(550ms * var(--pccinv-speed)) var(--pccinv-ease),
		left calc(550ms * var(--pccinv-speed)) var(--pccinv-ease),
		transform calc(550ms * var(--pccinv-speed)) var(--pccinv-ease);
}

/* Both sides live in a 3D card that turns over. */
.pccinv__faces {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform calc(700ms * var(--pccinv-speed)) var(--pccinv-ease);
}

.pccinv--flipped .pccinv__faces {
	transform: rotateY(180deg);
}

.pccinv__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	border-radius: 3px;
	overflow: hidden;
	background: var(--pccinv-card);
}

.pccinv__face--back {
	transform: rotateY(180deg);
}

.pccinv__face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 3px;
}

/* When a link is set, the whole artwork is the link. */
.pccinv__face-link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* Close button sits just off the corner of the artwork, not on top of it. */
.pccinv--photo .pccinv__close {
	top: -14px;
	right: -14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--pccinv-ink);
	color: #fff;
	font-size: 20px;
	box-shadow: 0 4px 12px rgba(8, 12, 20, 0.45);
	transform: translateZ(6px);
}

.pccinv--photo.pccinv--open .pccinv__close {
	opacity: 0.9;
}

/* Turn over control, tucked under the card. */
.pccinv__flip {
	position: absolute;
	bottom: -46px;
	left: 50%;
	z-index: 3;
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-family: var(--pccinv-utility);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transform: translate(-50%, 6px) translateZ(6px);
	transition:
		opacity calc(300ms * var(--pccinv-speed)) ease calc(200ms * var(--pccinv-speed)),
		transform calc(300ms * var(--pccinv-speed)) ease calc(200ms * var(--pccinv-speed)),
		background 200ms ease;
}

.pccinv--open .pccinv__flip {
	opacity: 1;
	transform: translate(-50%, 0) translateZ(6px);
}

.pccinv__flip:hover,
.pccinv__flip:focus-visible {
	background: rgba(255, 255, 255, 0.2);
}

/* One label swaps for the other when the card is turned over. */
.pccinv__flip-face--alt,
.pccinv--flipped .pccinv__flip-face {
	display: none;
}

.pccinv--flipped .pccinv__flip-face--alt {
	display: inline;
}

/* Button on the artwork, for an RSVP or ticket link. */
.pccinv__cta--photo {
	position: absolute;
	bottom: 18px;
	left: 50%;
	z-index: 3;
	transform: translateX(-50%) translateZ(6px);
	opacity: 0;
	box-shadow: 0 6px 18px rgba(8, 12, 20, 0.35);
	transition:
		opacity calc(300ms * var(--pccinv-speed)) ease calc(260ms * var(--pccinv-speed)),
		background 200ms ease;
}

.pccinv--open .pccinv__cta--photo {
	opacity: 1;
}

.pccinv--flipped .pccinv__cta--photo {
	opacity: 0;
	pointer-events: none;
	transition-delay: 0ms;
}

/* If both a flip control and a button are in play, stack them clear. */
.pccinv--two-sided .pccinv__cta--photo {
	bottom: 18px;
}

@media (max-width: 480px) {
	.pccinv--photo .pccinv__close {
		top: -12px;
		right: -12px;
	}

	.pccinv__flip {
		bottom: -42px;
		padding: 7px 15px;
		font-size: 11px;
	}
}

/* Reduced motion: the card is still sized in JS, it just arrives without the
   envelope theatre. */
.pccinv--instant.pccinv--photo .pccinv__card {
	max-height: none;
}