/* Hiệu ứng "Mở thiệp" — màn phủ đỏ/vàng tách đôi khi chạm, dùng chung cho cả 5 mẫu thiệp cưới */

body.has-envelope-cover { overflow: hidden; height: 100vh; }

.envelope-cover {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 512px; /* Khớp với max-width nội dung của RED/GOLD/MODERN/GARDEN. */
	height: 100%;
	z-index: 9999;
	display: flex;
	overflow: hidden;
	/* background: #9c1c26; */
}
.envelope-cover[hidden] { display: none; }

/* Cổ Điển dùng max-width 560px cho nội dung (.cd-page) — khớp lại cho đúng. */
body.cd-body .envelope-cover { max-width: 560px; }

.envelope-panel {
	position: relative;
	width: 50%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	transition: transform 1s cubic-bezier(.65,0,.35,1);
}
.envelope-panel-left {
	left: 0;
	background-image: url('../images/curtain-panel-left.webp');
	background-position: right center;
	transform: translateX(0);
}
.envelope-panel-right {
	right: 0;
	background-image: url('../images/curtain-panel-right.webp');
	background-position: left center;
	transform: translateX(0);
}

.envelope-cover.is-opening .envelope-panel-left { transform: translateX(-100%); }
.envelope-cover.is-opening .envelope-panel-right { transform: translateX(100%); }

.envelope-seal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10000;
	width: 148px;
	height: auto;
	transform: translate(-50%, -50%);
	transition: opacity 1s ease, transform 1s ease;
}

.envelope-cover.is-opening .envelope-seal { opacity: 0; transform: translate(-50%, -50%) scale(.8); }

@media (min-width: 600px) {
	.envelope-seal { width: 180px; }
}

/* ==========================================================================
   Các kiểu mở thiệp có phong bì (inc/envelope-intro.php) — chờ khách chạm mới mở.
   Màu lấy từ --env-* (skin tự đặt), mặc định đỏ/vàng.
   ========================================================================== */
body.sk-body .envelope-cover { max-width: 500px; }

.env-cover {
	--e-a: var(--env-a, #b0231a);
	--e-b: var(--env-b, #e8bf6a);
	--e-paper: var(--env-paper, #fff3d6);
	--e-ink: var(--env-ink, #7e150f);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--e-a) 70%, #000), color-mix(in srgb, var(--e-a) 35%, #000));
	cursor: pointer;
	perspective: 1000px;
	transition: opacity .7s ease .9s;
	-webkit-tap-highlight-color: transparent;
}
.env-cover:focus-visible { outline: 2px solid var(--e-b); outline-offset: -6px; }
.env-cover.is-opening { opacity: 0; pointer-events: none; }
.env-stage { position: relative; display: grid; justify-items: center; gap: 22px; }
.env-hint { margin: 0; color: var(--e-b); font: 13px var(--f-env-body, Georgia, serif); letter-spacing: .24em; text-transform: uppercase; animation: env-blink 1.6s ease-in-out infinite; }
.env-cover.is-opening .env-hint { opacity: 0; }

.env-card { display: grid; gap: 4px; justify-items: center; padding: 0 16px; color: var(--e-ink); text-align: center; font-family: var(--f-env-body, Georgia, serif); }
.env-to { margin: 0; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; opacity: .75; }
.env-guest { margin: 0; font-family: var(--f-env-name, cursive); font-size: 34px; line-height: 1.2; }
.env-couple { margin: 6px 0 0; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }

/* --- Sáp niêm phong --- */
.env-envelope { position: relative; width: min(82vw, 380px); aspect-ratio: 5 / 4; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.65, 0, .35, 1) .55s; }
.env-pocket { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 7%; border-radius: 6px; background: linear-gradient(160deg, var(--e-paper), color-mix(in srgb, var(--e-paper) 85%, var(--e-b))); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.env-flap { position: absolute; inset: 0 0 auto; height: 50%; background: color-mix(in srgb, var(--e-paper) 88%, var(--e-b)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .7s ease; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .12)); }
.env-seal { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; color: color-mix(in srgb, var(--e-a) 40%, #fff); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--e-a) 80%, #fff), var(--e-a) 60%, color-mix(in srgb, var(--e-a) 70%, #000)); box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 4px rgba(0, 0, 0, .12); font: 700 15px var(--f-env-body, Georgia, serif); transform: translate(-50%, -50%); transition: transform .4s ease, opacity .4s ease; }
.env-style-wax .env-card { padding-bottom: 10px; }
.env-style-wax .env-guest { font-size: 28px; }
.env-style-wax .env-couple { margin-top: 2px; font-size: 12px; }
.env-style-wax.is-opening .env-seal { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
.env-style-wax.is-opening .env-flap { transform: rotateX(180deg); }
.env-style-wax.is-opening .env-envelope { transform: translateY(120vh); }

/* --- Bao lì xì --- */
.env-lixi { position: relative; display: grid; justify-items: center; align-content: center; gap: 22px; width: min(66vw, 280px); aspect-ratio: 2 / 3; padding: 24px 12px; border-radius: 14px; background: linear-gradient(170deg, color-mix(in srgb, var(--e-a) 85%, #fff), var(--e-a) 45%, color-mix(in srgb, var(--e-a) 75%, #000)); box-shadow: 0 18px 40px rgba(0, 0, 0, .4), inset 0 0 0 6px var(--e-a), inset 0 0 0 8px var(--e-b); transition: transform 1s cubic-bezier(.65, 0, .35, 1); }
.env-lixi::before { content: ''; position: absolute; inset: 0 0 auto; height: 32%; border-radius: 14px 14px 50% 50% / 14px 14px 30% 30%; background: rgba(0, 0, 0, .12); border-bottom: 2px solid var(--e-b); }
.env-lixi-medal { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin-top: -10px; border: 3px double var(--e-b); border-radius: 50%; color: var(--e-b); background: var(--e-a); font-size: 42px; line-height: 1; }
.env-lixi .env-card { color: var(--e-b); }
.env-lixi .env-guest { font-size: 30px; }
.env-cover.env-style-lixi.is-opening .env-lixi { transform: translateY(-120vh) rotate(-8deg); }

/* --- Cuộn thư --- */
.env-scroll { display: grid; justify-items: center; width: min(80vw, 360px); transition: transform 1s cubic-bezier(.65, 0, .35, 1) .2s, opacity .6s ease .6s; }
.env-rod { display: block; width: 108%; height: 18px; border-radius: 9px; background: linear-gradient(180deg, color-mix(in srgb, var(--e-b) 70%, #fff), var(--e-b) 50%, color-mix(in srgb, var(--e-b) 55%, #000)); box-shadow: 0 4px 8px rgba(0, 0, 0, .35); position: relative; z-index: 1; }
.env-paper { width: 100%; padding: 38px 10px; background: repeating-linear-gradient(0deg, transparent 0 28px, rgba(0, 0, 0, .03) 28px 29px), var(--e-paper); box-shadow: inset 0 10px 12px -8px rgba(0, 0, 0, .3), inset 0 -10px 12px -8px rgba(0, 0, 0, .3); transform-origin: top; transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.env-scroll .env-card::before { content: ''; width: 60px; height: 1px; margin-bottom: 10px; background: var(--e-a); }
.env-cover.env-style-scroll.is-opening .env-paper { transform: scaleY(0); }
.env-cover.env-style-scroll.is-opening .env-scroll { transform: translateY(-40vh); opacity: 0; }

/* --- Thiệp gập hai cánh --- */
.env-gate { position: relative; width: min(70vw, 320px); aspect-ratio: 3 / 4; perspective: 1400px; }
.env-gate-inner { position: absolute; inset: 0; border-radius: 6px; background: var(--e-paper); }
.env-door { position: absolute; top: 0; bottom: 0; z-index: 1; width: 50%; background: linear-gradient(160deg, color-mix(in srgb, var(--e-a) 85%, #fff), var(--e-a)); box-shadow: inset 0 0 0 8px var(--e-a), inset 0 0 0 9px var(--e-b); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.env-door-left { left: 0; border-radius: 6px 0 0 6px; transform-origin: left; }
.env-door-right { right: 0; border-radius: 0 6px 6px 0; transform-origin: right; }
.env-medal { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 88px; height: 88px; border: 2px solid var(--e-b); border-radius: 50%; color: var(--e-b); background: var(--e-a); box-shadow: 0 0 0 6px var(--e-a), 0 0 0 7px var(--e-b); font: 600 20px var(--f-env-body, Georgia, serif); transform: translate(-50%, -50%); transition: opacity .4s ease; }
.env-cover.env-style-gatefold:not(.is-opening) .env-gate::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; z-index: 1; width: 1px; background: var(--e-b); }
.env-style-gatefold.is-opening .env-medal { opacity: 0; }
.env-style-gatefold.is-opening .env-door-left { transform: rotateY(-110deg); }
.env-style-gatefold.is-opening .env-door-right { transform: rotateY(110deg); }

/* --- Đèn lồng --- */
.env-lantern-wrap { display: grid; justify-items: center; transform-origin: top center; animation: env-swing 3s ease-in-out infinite; transition: transform 1.2s ease-in; }
.env-lantern-string { width: 2px; height: 60px; background: var(--e-b); }
.env-lantern { position: relative; display: grid; place-items: center; width: 150px; height: 170px; border-radius: 50% / 46%; color: var(--e-b); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--e-a) 55%, #ffd27a), var(--e-a) 60%, color-mix(in srgb, var(--e-a) 70%, #000)); box-shadow: 0 0 60px color-mix(in srgb, #ffb84d 55%, transparent); font-size: 56px; }
.env-lantern::before, .env-lantern::after { content: ''; position: absolute; left: 50%; width: 70px; height: 14px; border-radius: 4px; background: var(--e-b); transform: translateX(-50%); }
.env-lantern::before { top: -6px; }
.env-lantern::after { bottom: -6px; }
.env-lantern-tassel { width: 10px; height: 46px; background: repeating-linear-gradient(90deg, var(--e-b) 0 2px, transparent 2px 3px); }
.env-cover.env-style-lantern .env-card, .env-cover.env-style-gatefold .env-card { color: var(--e-b); }
.env-cover.env-style-gatefold.is-opening .env-card { opacity: 0; transition: opacity .5s ease; }
.env-cover.env-style-lantern.is-opening .env-lantern-wrap { transform: translateY(-120vh); animation: none; }
.env-cover.env-style-lantern.is-opening .env-card { opacity: 0; transition: opacity .5s ease; }

@keyframes env-blink { 50% { opacity: .35; } }
@keyframes env-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

@media (prefers-reduced-motion: reduce) {
	.env-hint, .env-lantern-wrap { animation: none; }
}

/* Dòng ghi công nhạc nền CC BY (inc/wedding-music.php) — nạp chung trên mọi trang thiệp cưới */
.wedding-music-credit { max-width: 500px; margin: 0 auto; padding: 10px 16px 76px; color: #8a8178; background: transparent; font: 11px/1.5 Arial, sans-serif; text-align: center; }