* {
	box-sizing: border-box;
}

@font-face {
	font-family: "Mynerve";
	src: url("font/Mynerve/Mynerve-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	min-height: 100vh;
	background: #f7f7f7 url("img/background.png") center center / cover no-repeat;
	font-family: "Mynerve", "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive;
	overflow-x: hidden;
}

.app {
	position: relative;
}

.scene-1 {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.invitation-scene {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 20px;
}

.scene-date {
	margin: 0;
	color: #d03a2f;
	font-size: clamp(48px, 4.2vw, 68px);
	line-height: 1;
	letter-spacing: 0.03em;
}

/* envelope */
.envelope {
	position: relative;
	width: clamp(260px, 36vw, 520px);
	aspect-ratio: 3 / 2;
	background: #d73a2f;
	box-shadow: 0 20px 60px rgba(57, 28, 27, 0.22);
	border-radius: 4px;
}

.envelope-flap {
	position: absolute;
	inset: 0;
}

.envelope-flap-top {
	background: linear-gradient(to bottom, rgba(223, 76, 64, 0.5), rgba(214, 58, 47, 0.05));
	clip-path: polygon(0 0, 100% 0, 50% 48%);
	z-index: 4;
}

.envelope-flap-left {
	background: linear-gradient(to right, rgba(201, 42, 44, 0.2) 0%, rgba(163, 33, 44, 0.9) 70%, rgba(219, 67, 57, 0.15) 100%);
	clip-path: polygon(0 0, 52% 50%, 0 100%);
	filter: drop-shadow(0 0 16px rgba(117, 18, 30, 0.45));
	z-index: 3;
}

.envelope-flap-right {
	background: linear-gradient(to left, rgba(201, 42, 44, 0.2) 0%, rgba(163, 33, 44, 0.9) 70%, rgba(219, 67, 57, 0.15) 100%);
	clip-path: polygon(100% 0, 48% 50%, 100% 100%);
	filter: drop-shadow(0 0 16px rgba(117, 18, 30, 0.45));
	z-index: 3;
}

.envelope-flap-bottom {
	background: #d53a31;
	clip-path: polygon(0 100%, 50% 50%, 100% 100%);
	z-index: 2;
}

.envelope-cherry {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(80px, 10vw, 140px);
	z-index: 5;
	transition: transform 220ms ease;
}

.envelope-cherry:hover {
	transform: translate(-50%, -50%) scale(1.08);
}

.scene-cta {
	margin: 0;
	color: #d03a2f;
	font-size: clamp(18px, 2.2vw, 30px);
	letter-spacing: 0.12em;
	user-select: none;
	animation: bounce-hint 2.2s ease-in-out infinite;
}

/* shared scattered-cherry style — used in scene-2-hero */
.bg-cherry {
	position: absolute;
	left: var(--cx);
	top: var(--cy);
	width: clamp(90px, 10vw, 155px);
	transform: translate(-50%, -50%) scale(var(--cs, 1));
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
	animation: bg-cherry-float var(--cd, 6s) ease-in-out infinite;
	animation-delay: var(--co, 0s);
}

.bg-cherry:nth-child(1)  { --cd: 6.2s; --co: 0s; }
.bg-cherry:nth-child(2)  { --cd: 5.8s; --co: -1.4s; }
.bg-cherry:nth-child(3)  { --cd: 6.6s; --co: -2.8s; }
.bg-cherry:nth-child(4)  { --cd: 5.5s; --co: -0.7s; }
.bg-cherry:nth-child(5)  { --cd: 6.9s; --co: -3.5s; }
.bg-cherry:nth-child(6)  { --cd: 5.3s; --co: -1.9s; }
.bg-cherry:nth-child(7)  { --cd: 7.0s; --co: -4.2s; }
.bg-cherry:nth-child(8)  { --cd: 6.1s; --co: -0.4s; }
.bg-cherry:nth-child(9)  { --cd: 5.7s; --co: -2.1s; }
.bg-cherry:nth-child(10) { --cd: 6.4s; --co: -3.0s; }
.bg-cherry:nth-child(11) { --cd: 5.9s; --co: -1.1s; }

@keyframes bg-cherry-float {
	0%, 100% { transform: translate(-50%, -50%) scale(var(--cs, 1)) rotate(-3deg); }
	50%       { transform: translate(-50%, calc(-50% - 8px)) scale(var(--cs, 1)) rotate(3deg); }
}

.open-trigger {
	cursor: pointer;
	transition: transform 180ms ease;
}

.open-trigger:hover,
.open-trigger:focus-visible {
	outline: none;
}

body.is-opening {
	overflow: hidden;
}

body.is-opening .scene-1 {
	animation: scene1-out 650ms ease forwards;
}

@keyframes scene1-out {
	0%   { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.04); }
}

.scene-2 {
	position: fixed;
	inset: 0;
	overflow-y: auto;
	opacity: 0;
	pointer-events: none;
	transform: translateY(60px);
	transition: opacity 550ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
	background: #f7f7f7 url("img/background.png") center center / cover no-repeat;
	padding: 0 0 80px;
	z-index: 20;
}

body.show-scene-2 .scene-2 {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	overflow-x: hidden;
}

/* first 100vh of scene 2 — matches main.png */
.scene-2-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	flex-shrink: 0;
}

.hero-date {
	position: absolute;
	right:0;
	top: 48%;
	transform: translate(-50%, -50%);
	margin: 0;
	color: #c0392b;
	font-size: clamp(70px, 9vw, 130px);
	line-height: 1;
	letter-spacing: 0.03em;
	user-select: none;
	pointer-events: none;
}

.scene-2-inner {
	position: relative;
	width: 100%;
	min-height: 100%;
}

.floating-cherries {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.floating-cherries img {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: clamp(70px, 8vw, 120px);
	transform: translateX(-50%);
	opacity: 1;
}

.invite-paper {
	position: relative;
	z-index: 2;
    width: min(100vw, 1200px);
	margin: 0 auto;
	text-align: center;
	padding: 0 50px;
}

.detail-date {
	margin: 56px 0 8px;
	color: #cf3931;
	font-size: clamp(52px, 6vw, 78px);
	line-height: 1;
}

.cherry-deco {
	margin: 0 auto 12px;
	display: flex;
	justify-content: center;
}

.cherry-deco img {
	width: clamp(90px, 10vw, 140px);
}

.detail-intro {
	margin: 0 0 35px;
    font-size: clamp(22px, 7vw, 30px);
	color: #333;
}

.detail-main {
	margin: 0 0 35px;
	font-size: clamp(25px, 2.6vw, 40px);
	color: #d33a33;
	line-height: 1.3;
}

.family-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.family-grid p {
	margin: 4px 0;
	font-size: clamp(18px, 2.8vw, 28px);
	color: #222;
}

.family-grid .family-label {
	color: #d03a2f;
	font-size: clamp(20px, 3vw, 30px);
	margin: 0 0 6px;
}

.section-label {
	color: #d03a2f;
	font-size: clamp(26px, 2.6vw, 40px);
	margin: 0 0 16px;
	line-height: 1;
}

.heart-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 60px 0;
}

.heart-divider img {
	width: clamp(100px, 15vw, 220px);
}

.divider-line {
	width: clamp(100px, 20vw, 360px);
	height: 1.5px;
	background: linear-gradient(to right, transparent 0%, rgba(210, 58, 50, 0.7) 40%, transparent 100%);
}

.countdown-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 0 14px;
	width: 100%;
}

.countdown-cherry {
	width: clamp(60px, 8vw, 110px);
	flex-shrink: 0;
}

.soft-card {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 50px 10px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.44);
	box-shadow: 0 7px 14px rgba(57, 28, 27, 0.18);
	backdrop-filter: blur(2px);
}

.countdown-card p {
	margin: 0;
	font-size: clamp(36px, 7vw, 90px);
	color: #ce352f;
	line-height: 1.1;
	white-space: nowrap;
}

.chip-button {
	display: inline-block;
	margin: 8px 0;
	padding: 7px 20px;
	border-radius: 999px;
	text-decoration: none;
	font-family: "Mynerve", "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive;
	font-size: clamp(18px, 1.6vw, 22px);
	color: #d03a2f;
	background: rgba(255, 255, 255, 0.62);
	box-shadow: 0 4px 8px rgba(57, 28, 27, 0.16);
	border: none;
	cursor: pointer;
}

.chip-button-inline {
	margin: 0;
	width: fit-content;
	align-self: flex-end;
}

.location-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	margin: 0 0 50px;
}

.location-text {
	text-align: center;
}

.location-text p {
	margin: 0 0 6px;
	font-size: clamp(20px, 2.5vw, 30px);
	color: #222;
	line-height: 1.3;
}

.location-time {
	color: #d03a2f !important;
	font-size: clamp(22px, 2.7vw, 40px) !important;
}

.church-illustration {
	width: clamp(200px, 38vw, 500px);
	height: auto;
	display: block;
}

.location-details {
	margin: 0 auto 10px;
	font-size: clamp(20px, 2.5vw, 30px);
	line-height: 1.35;
	color: #222;
	text-align: center;
}

.soft-input {
	display: block;
	width: min(80%, 420px);
	height: 44px;
	margin: 10px auto;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 5px 12px rgba(57, 28, 27, 0.14);
	border: none;
	outline: none;
	padding: 0 14px;
	font-family: "Mynerve", "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive;
	font-size: clamp(14px, 1.6vw, 20px);
	color: #333;
}

.rsvp-wrapper {
	padding: 40px 32px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.44);
	box-shadow: 0 7px 14px rgba(57, 28, 27, 0.18);
	backdrop-filter: blur(2px);
	text-align: center;
}

.rsvp-wrapper h2 {
	font-weight: 400;
	margin: 0 0 8px;
}

.rsvp-wrapper h3 {
	margin: 0 0 6px;
	font-size: clamp(15px, 1.8vw, 22px);
	font-weight: 400;
	color: #555;
	font-family: "Mynerve", "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive;
}

.rsvp-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea {
	display: block;
	width: min(100%, 480px);
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 5px 12px rgba(57, 28, 27, 0.14);
	border: none;
	outline: none;
	font-family: "Mynerve", "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive;
	font-size: clamp(14px, 1.6vw, 20px);
	color: #333;
	-webkit-appearance: none;
	appearance: none;
}

.rsvp-form select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d03a2f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.rsvp-form select option[disabled] {
	color: #aaa;
}

.rsvp-form textarea {
	resize: vertical;
	min-height: 90px;
	padding-top: 10px;
}

.send-btn {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

.rsvp-message {
	margin-top: 16px;
	font-size: clamp(14px, 1.6vw, 20px);
	color: #d03a2f;
}

.download-invitation {
	margin-top: 24px;
}

.download-invitation a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 20px;
	border-radius: 999px;
	text-decoration: none;
	font-family: "Mynerve", "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive;
	font-size: clamp(14px, 1.6vw, 22px);
	color: #d03a2f;
	background: rgba(255, 255, 255, 0.62);
	box-shadow: 0 4px 8px rgba(57, 28, 27, 0.16);
}

.download-invitation img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.contact-wrapper {
	padding: 40px 32px;
	border-radius: 14px;
	text-align: center;
}

.contact-wrapper h2 {
	font-weight: 400;
	margin: 0 0 28px;
}

.contact-info {
	display: flex;
	justify-content: center;
	gap: 48px;
	flex-wrap: wrap;
}

.contact-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.contact-item span {
	font-size: clamp(18px, 2.2vw, 28px);
	color: #d03a2f;
	font-family: "Mynerve", "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive;
}

.contact-item a {
	display: inline-block;
	padding: 7px 20px;
	border-radius: 999px;
	text-decoration: none;
	font-family: "Mynerve", "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive;
	font-size: clamp(14px, 1.6vw, 22px);
	color: #d03a2f;
	background: rgba(255, 255, 255, 0.62);
	box-shadow: 0 4px 8px rgba(57, 28, 27, 0.16);
}

@media (max-width: 768px) {
	.scene-date {
		font-size: clamp(36px, 8vw, 60px);
	}

	.hero-date {
		transform:none;
		padding: 0 20px;
	}

	.bg-cherry {
		width: clamp(60px, 12vw, 110px);
	}

	.invite-paper {
		padding: 0 20px;
	}

	.family-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.location-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.location-text {
		width: 100%;
		text-align: center;
		order: 1;
	}

	.church-illustration {
		width: 100%;
		max-width: 100%;
		order: 2;
		padding-bottom: 20px;
	}

	.chip-button-inline {
		order: 3;
		align-self: center;
	}

	.countdown-cherry {
		width: clamp(44px, 10vw, 80px);
	}

	.countdown-card p {
		font-size: clamp(28px, 6vw, 52px);
	}
}
@media screen and (max-width: 400px) {
	.soft-card{
		padding: 20px 10px;
	}
}

/* ── Keyframe animations ───────────────────────────────────────── */

@keyframes cherry-bob {
	0%, 100% { transform: scale(var(--cs, 1)) rotate(-5deg); }
	50%       { transform: scale(var(--cs, 1)) rotate(5deg) translateY(-10px); }
}

@keyframes cherry-deco-float {
	0%, 100% { transform: rotate(-6deg) translateY(0px); }
	50%       { transform: rotate(6deg) translateY(-8px); }
}

@keyframes heart-beat {
	0%, 100% { transform: scale(1); }
	25%       { transform: scale(1.1); }
	50%       { transform: scale(1); }
	75%       { transform: scale(1.06); }
}

@keyframes bounce-hint {
	0%, 100% { transform: translateY(0); }
	40%       { transform: translateY(-7px); }
	60%       { transform: translateY(-3px); }
}

/* ── Parallax cherry layer ─────────────────────────────────────── */
.parallax-cherries-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	user-select: none;
	z-index: 1;
}

.p-cherry-wrap {
	position: absolute;
	width: clamp(60px, 8vw, 120px);
	will-change: transform;
}

.p-cherry-wrap img {
	width: 100%;
	display: block;
	pointer-events: none;
	-webkit-user-drag: none;
	opacity: 0.55;
	animation: cherry-bob var(--dur, 6s) ease-in-out infinite;
	animation-delay: var(--delay, 0s);
}

/* ── Element animations ────────────────────────────────────────── */
.cherry-deco img {
	display: inline-block;
	animation: cherry-deco-float 5s ease-in-out infinite;
}

.heart-divider img {
	animation: heart-beat 4s ease-in-out infinite;
}

/* ── Scroll-reveal ─────────────────────────────────────────────── */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 650ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}