/* Default template: "Classic Envelope". */

/* Sage green palette, matching the couple's invitation. */
:root {
	--mw-paper: #f7f8f4;
	--mw-paper-alt: #eef2ea;
	--mw-backdrop: #d3dac9;
	--mw-envelope: #f3f4ee;
	--mw-envelope-inner: #dfe4d6;
	--mw-flap: #eef0e7;
	--mw-flap-dark: #dfe3d4;
	--mw-liner: #e2bfb6;
	--mw-seal: #5f7a55;
	--mw-ink: #3f5638;
	--mw-text: #414d3d;
	--mw-muted: #5c6955;
	--mw-accent: #7f9870;
	--mw-ornament: #9fae94;
	--mw-line: #d5ddcd;
	--mw-petal: #d9a5a0;
	--mw-font-serif: "Cormorant Garamond", Georgia, serif;
	--mw-font-script: "Great Vibes", cursive;
}

/* Per-set accents. */
.mw-ornaments-botanical {
	--mw-petal: #a7b394;
	--mw-liner: #bcc6ab;
}

.mw-ornaments-minimal {
	--mw-petal: var(--mw-accent);
	--mw-liner: #d8c39a;
}

body.mw-template-default {
	background: var(--mw-paper);
	color: var(--mw-ink);
	font-family: var(--mw-font-serif);
	font-size: 21px;
	font-variant-numeric: lining-nums; /* Even-height numbers for dates and phone. */
	font-weight: 500;
}

.mw-svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--mw-ornament);
	overflow: visible;
}

/* ------------------------------------------------------------------ */
/* Loader                                                             */
/* ------------------------------------------------------------------ */

.mw-loader {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 12px;
	background: var(--mw-paper);
	/* Failsafe: never block the page for more than 8s, even if JS fails. */
	animation: mw-loader-failsafe 0.4s 8s forwards;
}

.no-js .mw-loader,
.mw-loader[hidden] {
	display: none;
}

.mw-loader__art {
	width: 96px;
}

.mw-loader__art .mw-svg {
	color: var(--mw-accent);
}

.mw-loader__ring,
.mw-loader__gem {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: mw-loader-draw 2.4s ease-in-out infinite;
}

.mw-loader__ring + .mw-loader__ring {
	animation-delay: 0.25s;
}

.mw-loader__gem {
	animation-delay: 0.5s;
}

.mw-loader__initials {
	font-family: var(--mw-font-script);
	font-size: 28px;
	color: var(--mw-ink);
	opacity: 0.8;
}

@keyframes mw-loader-draw {
	0% {
		stroke-dashoffset: 1;
	}
	45%,
	60% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: -1;
	}
}

@keyframes mw-loader-failsafe {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* ------------------------------------------------------------------ */
/* Envelope                                                           */
/* ------------------------------------------------------------------ */

/* Closed, the envelope covers the screen; this only shows at the edges while it settles. */
.mw-envelope {
	position: fixed;
	inset: 0;
	z-index: 100;
	height: 100vh;
	height: 100dvh;
	background: var(--mw-flap);
	cursor: pointer;
	overflow: hidden;
	overscroll-behavior: none;
	touch-action: none; /* No scrolling/bounce behind it on iOS; taps still work. */
	outline: none;
}

.no-js .mw-envelope {
	display: none;
}

/* The "table" the envelope sits on; fades in (opacity only) when it settles on open. */
.mw-envelope__table {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 45%, #eef1e8, var(--mw-backdrop));
	opacity: 0;
	will-change: opacity;
}

/* The envelope itself; its background is the inside back panel. */
/* Full screen until JS sets the settled size and cover scale (see template.js). */
.mw-envelope__body {
	position: absolute;
	inset: 0;
	border-radius: 6px;
	background: var(--mw-envelope-inner);
	perspective: 1600px;
}

/* Drop shadow on its own element so it can fade in on open (hidden while closed, so no line at the top edge). */
.mw-envelope__shadow {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 30px 70px rgba(47, 62, 42, 0.28);
	opacity: 0;
	will-change: opacity;
}

/* Hidden until GSAP plays the intro, so they don't flash first. */
.js .mw-envelope__seal,
.js .mw-envelope__label {
	visibility: hidden;
}

.mw-no-gsap .mw-envelope__seal,
.mw-no-gsap .mw-envelope__label {
	visibility: visible;
}

/* Invitation card, tucked inside until the flap opens. */
.mw-envelope__card {
	position: absolute;
	top: 6%;
	left: 6%;
	right: 6%;
	height: 64%;
	z-index: 2;
	display: grid;
	place-items: center;
	background: var(--mw-paper);
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(47, 62, 42, 0.14);
	container-type: size;
}

.mw-envelope__card-inner {
	position: absolute;
	inset: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3cqh;
	padding: 4cqh 8px;
	border: 1px solid color-mix(in srgb, var(--mw-ornament) 45%, transparent);
	text-align: center;
}

.mw-envelope__card-wreath {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(60px, 18vmin, 200px);
	width: min(44cqh, 40cqw);
}

.mw-envelope__card-wreath span {
	position: absolute;
	font-family: var(--mw-font-script);
	font-size: clamp(16px, 5vmin, 48px);
	font-size: min(12cqh, 11cqw);
	color: var(--mw-ink);
}

.mw-envelope__card-names {
	font-family: var(--mw-font-script);
	font-size: clamp(20px, 6vmin, 52px);
	font-size: min(15cqh, 12cqw);
	line-height: 1.1;
	color: var(--mw-ink);
}

.mw-envelope__card-names span {
	color: var(--mw-accent);
}

.mw-envelope__card-date {
	font-size: 11px;
	font-size: max(9px, min(6cqh, 4.2cqw));
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mw-muted);
}

/* Front of the envelope: side and bottom folds. */
.mw-envelope__pocket {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--mw-envelope);
	clip-path: polygon(0 0, 50% 37%, 100% 0, 100% 100%, 0 100%);
}

.mw-envelope__corner {
	position: absolute;
	z-index: 1;
	bottom: calc(12px + env(safe-area-inset-bottom));
	width: clamp(96px, 26vw, 200px);
	pointer-events: none;
}

.mw-envelope__corner--bl {
	left: 12px;
	transform: rotate(-90deg);
}

.mw-envelope__corner--br {
	right: 12px;
	transform: rotate(180deg);
}

/* Top flap: a 3D card with a front and a patterned inner liner. */
.mw-envelope__flap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100%;
	height: 42%;
	transform-origin: 50% 0;
	transform-style: preserve-3d;
}

.mw-envelope__flap-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.mw-envelope__flap-face--front {
	background: linear-gradient(180deg, var(--mw-flap), var(--mw-flap-dark));
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Mirrored triangle + flipped, so it lines up with the front face. */
.mw-envelope__flap-face--back {
	background:
		radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.45) 1.2px, transparent 1.8px) 0 0 / 14px 14px,
		var(--mw-liner);
	clip-path: polygon(0 100%, 100% 100%, 50% 0);
	transform: rotateX(180deg);
}

.mw-envelope__liner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--mw-ornament);
	opacity: 0.45;
}

/*
 * Wax seal at the tip of the flap. The closed envelope is the settled envelope
 * scaled up to cover the screen; JS gives this wrap the inverse scale so the seal
 * stays the same size on screen. The seal, its cracked halves and the ripple
 * animate inside it.
 */
.mw-envelope__seal-wrap {
	position: absolute;
	top: 42%;
	left: 50%;
	z-index: 6;
	width: clamp(88px, 26vw, 128px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%); /* JS adds the inverse scale. */
}

.mw-envelope__seal {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #f1f4ea;
	font-family: var(--mw-font-script);
	font-size: clamp(26px, 7vw, 36px);
	filter: drop-shadow(0 6px 10px rgba(40, 58, 35, 0.35));
}

.mw-envelope__seal .mw-svg {
	position: absolute;
	inset: 0;
	color: var(--mw-seal);
}

.mw-envelope__seal span {
	position: relative;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* Light glint sweeping across the wax: a band moved with transform (GPU-only). */
.mw-envelope__glint {
	position: absolute;
	inset: 12%;
	overflow: hidden;
	border-radius: 50%;
	pointer-events: none;
}

.mw-envelope__glint::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transform: translateX(-120%) rotate(20deg);
	animation: mw-glint 4.5s ease-in-out 1.5s infinite;
}

/* Cracked halves made by JS when the seal breaks. */
.mw-envelope__seal--left {
	clip-path: polygon(0 0, 52% 0, 46% 28%, 55% 52%, 46% 76%, 52% 100%, 0 100%);
}

.mw-envelope__seal--right {
	clip-path: polygon(52% 0, 100% 0, 100% 100%, 52% 100%, 46% 76%, 55% 52%, 46% 28%);
}

.mw-envelope__seal--left .mw-envelope__glint,
.mw-envelope__seal--right .mw-envelope__glint {
	display: none;
}

.mw-ripple {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120px;
	height: 120px;
	translate: -50% -50%;
	border: 2px solid var(--mw-seal);
	border-radius: 50%;
	pointer-events: none;
}

.mw-envelope__label {
	position: absolute;
	left: 16px;
	right: 16px;
	z-index: 1;
	top: 53%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.mw-envelope__to {
	font-family: var(--mw-font-script);
	font-size: clamp(40px, 11.5vw, 60px);
	color: var(--mw-ink);
}

.mw-envelope__divider {
	width: min(200px, 55vw);
	margin: 2px 0 6px;
}

.mw-envelope__hint {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mw-ink);
	animation: mw-pulse 1.8s ease-in-out infinite;
}

.mw-envelope:focus-visible .mw-envelope__seal {
	outline: 2px solid var(--mw-accent);
	outline-offset: 6px;
	border-radius: 50%;
}

@keyframes mw-pulse {
	50% {
		opacity: 0.6;
	}
}

@keyframes mw-glint {
	0%,
	60% {
		transform: translateX(-120%) rotate(20deg);
	}
	100% {
		transform: translateX(320%) rotate(20deg);
	}
}

/* Plain paper sheet that does the big zoom into the card (see zoomIntoCard). */
.mw-zoom-sheet {
	position: fixed;
	z-index: 105;
	background: var(--mw-paper);
	border-radius: 4px;
	pointer-events: none;
	will-change: transform;
}

/* ------------------------------------------------------------------ */
/* Petal shower                                                       */
/* ------------------------------------------------------------------ */

.mw-petal-layer {
	position: fixed;
	inset: 0;
	z-index: 110;
	overflow: hidden;
	pointer-events: none;
	perspective: 600px;
}

.mw-petal {
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: auto;
	color: var(--mw-petal);
	opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Homepage                                                           */
/* ------------------------------------------------------------------ */

.mw-hero {
	--mw-frame: 12px; /* Distance of the printed frame from the screen edge. */
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Content sits together in the middle (not spread to the screen edges), so tall phones do not look stretched. */
	justify-content: center;
	gap: clamp(22px, 4vh, 36px);
	padding: calc(84px + env(safe-area-inset-top)) 28px calc(80px + env(safe-area-inset-bottom));
	text-align: center;
}

/*
 * Soft misty sky, like the invitation. On its own compositor layer so the
 * big gradients are painted once, not on every animation frame above them.
 */
.mw-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 45% at 30% 18%, rgba(255, 255, 255, 0.9), transparent 70%),
		radial-gradient(ellipse 70% 40% at 80% 35%, rgba(255, 255, 255, 0.7), transparent 70%),
		linear-gradient(180deg, #e9f0f3 0%, #f3f6f2 45%, var(--mw-paper) 100%);
	transform: translateZ(0);
	pointer-events: none;
}

/* Optional photo (hero_image setting), heavily faded like the invitation. */
.mw-hero__bg {
	position: absolute;
	inset: 0;
	transform: translateZ(0); /* Own GPU layer: painted once, not again under every ornament stroke. */
}

.mw-hero__bg picture {
	display: block;
	height: 100%;
}

.mw-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
}

/*
 * A soft pool of light behind the text (instead of glows on every letter), plus
 * a gentle wash at the edges: reads cleanly, like the misty centre of the invite.
 */
.mw-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 78% 46% at 50% 50%, rgba(247, 248, 244, 0.82), rgba(247, 248, 244, 0.5) 70%, rgba(247, 248, 244, 0.35)),
		linear-gradient(180deg, rgba(247, 248, 244, 0.45), transparent 22%, transparent 78%, rgba(247, 248, 244, 0.45));
}

.mw-hero > :not(.mw-hero__corner):not(.mw-sparkles):not(.mw-hero__bg):not(.mw-hero__scroll):not(.mw-hero__frame) {
	position: relative;
	z-index: 1;
}

/* Printed-invitation frame: a fine double rule inset from the edges. */
.mw-hero__frame {
	position: absolute;
	inset: calc(var(--mw-frame) + env(safe-area-inset-top)) var(--mw-frame) calc(var(--mw-frame) + env(safe-area-inset-bottom));
	border: 1px solid rgba(95, 122, 85, 0.45);
	pointer-events: none;
}

.mw-hero__frame::after {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid rgba(95, 122, 85, 0.22);
}

.mw-hero__corner,
.mw-hero__divider {
	/* Own GPU layers, so the draw-on animation repaints only the ornament, not the photo beneath. */
	will-change: transform;
}

/* Ornaments tucked into each corner of the frame. */
.mw-hero__corner {
	position: absolute;
	width: clamp(92px, 26vw, 200px);
	pointer-events: none;
}

.mw-hero__corner--tl,
.mw-hero__corner--tr {
	top: calc(var(--mw-frame) + 6px + env(safe-area-inset-top));
}

.mw-hero__corner--bl,
.mw-hero__corner--br {
	bottom: calc(var(--mw-frame) + 6px + env(safe-area-inset-bottom));
}

.mw-hero__corner--tl,
.mw-hero__corner--bl {
	left: calc(var(--mw-frame) + 6px);
}

.mw-hero__corner--tr,
.mw-hero__corner--br {
	right: calc(var(--mw-frame) + 6px);
}

.mw-hero__corner--tr {
	transform: scaleX(-1);
}

.mw-hero__corner--bl {
	transform: scaleY(-1);
}

.mw-hero__corner--br {
	transform: scale(-1, -1);
}

/* Only the faintest lift off the photo; the pool of light does the real work. */
.mw-hero__verse,
.mw-hero__kicker,
.mw-hero__date,
.mw-hero__tagline,
.mw-hero__footer {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.mw-hero__verse {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: min(100%, 330px);
	font-family: var(--mw-font-script);
	font-size: clamp(28px, 8vw, 40px);
	line-height: 1.2;
	color: var(--mw-text);
}

.mw-hero__verse span:first-child {
	align-self: flex-start;
}

.mw-hero__verse span:last-child {
	align-self: flex-end;
}

.mw-hero__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* Light, widely spaced capitals: the classic engraved-invitation look. */
.mw-hero__kicker {
	display: inline-flex;
	align-items: flex-start;
	gap: 4px;
	font-size: clamp(27px, 7.8vw, 44px);
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--mw-ink);
	/* Balance the trailing letter-spacing so the words sit truly centred. */
	margin-right: -0.2em;
}

.mw-hero__rings {
	width: clamp(24px, 6.5vw, 36px);
	margin-top: -0.4em;
}

.mw-hero__rings .mw-svg {
	color: var(--mw-muted);
}

.mw-hero__rings .mw-loader__ring,
.mw-hero__rings .mw-loader__gem {
	animation: none;
	stroke-dashoffset: 0;
}

/* Date on one line; framed by fine rules on either side where there is room. */
.mw-hero__date {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mw-muted);
}

@media (min-width: 430px) {
	.mw-hero__date::before,
	.mw-hero__date::after {
		content: "";
		flex: 0 0 28px;
		height: 1px;
		background: currentColor;
		opacity: 0.6;
	}
}

.mw-hero__names {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.12em;
	margin-top: 4px;
	font-family: var(--mw-font-script);
	font-weight: 400;
	font-size: clamp(70px, 21vw, 132px);
	line-height: 1.1;
	color: var(--mw-ink);
	text-shadow: 0 2px 6px rgba(47, 62, 42, 0.18);
}

/* Italic serif "and" for contrast with the script names. */
.mw-hero__and {
	font-family: var(--mw-font-serif);
	font-style: italic;
	font-size: 0.3em;
	color: var(--mw-accent);
}

.mw-hero__divider {
	width: min(220px, 60vw);
}

.mw-hero__tagline {
	max-width: 32ch;
	font-size: clamp(18px, 5vw, 23px);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.6;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--mw-text);
}

/* Venue and RSVP: italic church name, small-capital address, RSVP under a fine rule. */
.mw-hero__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: min(100%, 520px);
	color: var(--mw-muted);
}

.mw-hero__footer a {
	color: inherit;
	text-decoration: none;
}

.mw-hero__venue {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.mw-hero__footer .mw-hero__venue-name {
	display: inline-block;
	padding-top: 8px; /* Comfortable tap height. */
	font-size: clamp(21px, 5.8vw, 26px);
	font-style: italic;
	font-weight: 500;
	line-height: 1.25;
	color: var(--mw-ink);
}

.mw-hero__address {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mw-hero__rsvp {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 10px;
	padding-top: 12px;
	border-top: 1px solid rgba(95, 122, 85, 0.35);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mw-hero__footer .mw-hero__rsvp a {
	display: inline-block;
	padding: 10px 0;
	margin: -10px 0;
	color: var(--mw-ink);
	letter-spacing: 0.06em;
}

/* Tablets and desktop: the verse and invitation line get more room (fewer lines, shorter hero). */
@media (min-width: 768px) {
	.mw-hero__verse {
		width: min(100%, 560px);
	}

	.mw-hero__tagline {
		max-width: 44ch;
	}
}

/* Shorter phones (e.g. iPhone SE, smaller Androids): tighter spacing so the hero still fits one screen. */
@media (max-height: 780px) {
	.mw-hero {
		gap: 16px;
		padding-top: calc(64px + env(safe-area-inset-top));
		padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}

	.mw-hero__center {
		gap: 8px;
	}
}

/* Very short screens (iPhone SE): slightly smaller script lines and ornaments. */
@media (max-height: 700px) {
	.mw-hero {
		gap: 12px;
		padding-top: calc(56px + env(safe-area-inset-top));
		padding-bottom: calc(52px + env(safe-area-inset-bottom));
	}

	.mw-hero__verse {
		font-size: 26px;
	}

	.mw-hero__names {
		font-size: 64px;
	}

	.mw-hero__corner {
		width: 84px;
	}
}

/* Scroll cue: a small line that drips downward, pinned to the bottom, outside the centred group. */
.mw-hero__scroll {
	position: absolute;
	bottom: calc(22px + env(safe-area-inset-bottom));
	left: 50%;
	z-index: 1;
	display: block;
	width: 44px;
	height: 44px;
	translate: -50% 0;
}

.mw-hero__scroll span {
	display: block;
	width: 1px;
	height: 28px;
	margin: 8px auto 0;
	background: linear-gradient(var(--mw-accent), transparent);
	animation: mw-scroll-cue 2s ease-in-out infinite;
	transform-origin: top;
}

@keyframes mw-scroll-cue {
	0% {
		transform: scaleY(0);
		opacity: 1;
	}
	60% {
		transform: scaleY(1);
		opacity: 1;
	}
	100% {
		transform: scaleY(1);
		opacity: 0;
	}
}

/* Looping hero animations wait until the envelope has opened (less work during the opening). */
.mw-locked .mw-sparkle,
.mw-locked .mw-hero__scroll span {
	animation-play-state: paused;
}

/* Background sparkles, created by JS with random positions and timing. */
.mw-sparkles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mw-sparkle {
	position: absolute;
	width: var(--size, 8px);
	aspect-ratio: 1;
	background: var(--mw-accent);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	opacity: 0;
	animation: mw-twinkle var(--duration, 4s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes mw-twinkle {
	0%,
	100% {
		opacity: 0;
		transform: translateY(0) scale(0.4) rotate(0deg);
	}
	50% {
		opacity: 0.75;
		transform: translateY(-12px) scale(1) rotate(45deg);
	}
}

/* Fallback when GSAP fails to load: plain CSS transitions. */
.mw-no-gsap .mw-envelope {
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
}

.mw-no-gsap .mw-envelope__flap {
	transition: transform 0.6s ease;
}

.mw-no-gsap .mw-envelope.is-open {
	transform: translateX(100%);
}

.mw-no-gsap .mw-envelope.is-open .mw-envelope__flap {
	transform: rotateX(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.mw-envelope__hint,
	.mw-envelope__glint::after,
	.mw-hero__scroll span {
		animation: none;
	}

	.mw-loader__ring,
	.mw-loader__gem {
		animation: none;
		stroke-dashoffset: 0;
	}

	.mw-no-gsap .mw-envelope,
	.mw-no-gsap .mw-envelope__flap {
		transition-duration: 0.01s;
		transition-delay: 0s;
	}
}