/* ==========================================================================
Fonts
========================================================================== */

@font-face {
	font-family: "Annabelle";
	src: url("../fonts/annabelle.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/inter-tight-light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/inter-tight-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-semibold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
Base
========================================================================== */

:root {
	--color-bg: #fffaf4;
	--color-accent: #bd3e2f;
	--font-script: "Annabelle", cursive;
	--font-serif: "Playfair Display", Georgia, serif;
	--font-base: "Inter Tight", Arial, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--color-bg);
	font-family: var(--font-base);
	color: var(--color-accent);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px;
	background-color: var(--color-bg);
}

.hero__scene {
	position: relative;
	/* width follows viewport height (aspect 420/596), slightly overfilling the first screen */
	width: min(96vw, 71svh);
	aspect-ratio: 420 / 596;
	container-type: inline-size;
}

.hero__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: hero-fade-in 1.5s ease both;
}

.hero__date,
.hero__day,
.hero__content {
	position: absolute;
	font-family: var(--font-script);
	font-weight: 400;
	color: var(--color-accent);
	animation: hero-zoom-in 1.5s ease 0.2s both;
}

.hero__date {
	top: 16.5%;
	right: 13%;
	font-size: 5.6cqw;
	line-height: 1.55;
}

.hero__day {
	top: 22.5%;
	left: 65%;
	transform: translateX(-50%);
	font-size: 5.6cqw;
	line-height: 1.55;
}

.hero__content {
	top: 36.5%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 92%;
	text-align: center;
}

.hero__lead {
	font-size: 6.4cqw;
	line-height: 1.15;
	margin-bottom: 7cqw;
}

.hero__names {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: 400;
	letter-spacing: 0.03em;
}

.hero__name {
	font-size: 13.3cqw;
	line-height: 1.25;
	white-space: nowrap;
}

.hero__name--groom {
	font-size: 10cqw;
}

.hero__amp {
	font-size: 6.4cqw;
	line-height: 1.4;
	margin: 1.5cqw 0;
}

/* ==========================================================================
   Intro
   ========================================================================== */

.intro {
	padding: 32px 20px 48px;
	background-color: var(--color-bg);
}

.intro__inner {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
}

.intro__text {
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.35;
	color: var(--color-accent);
}

.intro__text + .intro__text {
	margin-top: 1.35em;
}

@media (max-width: 479px) {
	.intro__text {
		font-size: 16px;
	}
}

/* ==========================================================================
   Venues
   ========================================================================== */

.venues {
	padding: 48px 20px 0;
	background-color: var(--color-bg);
	text-align: center;
	overflow: hidden;
}

.venues__header {
	margin-bottom: 56px;
}

.venues__title {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: clamp(54px, 8vw, 72px);
	line-height: 1.2;
	color: var(--color-accent);
}

.venues__bow {
	width: 68px;
	margin-top: 16px;
}

.venues__item {
	max-width: 560px;
	margin: 0 auto;
}

.venues__icon {
	height: 64px;
	margin-bottom: 22px;
}

.venues__icon--tall {
	height: 84px;
}

.venues__name {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: clamp(42px, 6vw, 54px);
	line-height: 1.3;
	color: var(--color-accent);
	margin-bottom: 12px;
}

.venues__note {
	font-family: var(--font-serif);
	font-size: clamp(20px, 3vw, 22px);
	line-height: 1.35;
	color: var(--color-accent);
	margin-bottom: 10px;
}

.venues__place {
	font-family: var(--font-serif);
	font-size: clamp(27px, 4vw, 32px);
	line-height: 1.3;
	color: var(--color-accent);
}

.venues__place-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.venues__divider {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 400px;
	margin: 52px auto;
}

.venues__divider::before,
.venues__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--color-accent);
	opacity: 0.5;
}

.venues__divider-heart {
	width: 22px;
}

.venues__illustration {
	display: block;
	width: min(700px, 100%);
	margin: 48px auto 0;
}

/* ==========================================================================
   Schedule
   ========================================================================== */

.schedule {
	padding: 72px 0 0;
	background-color: var(--color-bg);
	text-align: center;
	overflow: hidden;
}

.schedule__title {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: clamp(48px, 7vw, 64px);
	line-height: 1.2;
	color: var(--color-accent);
}

.schedule__ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 300px;
	margin: 18px auto 0;
}

.schedule__ornament::before,
.schedule__ornament::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--color-accent);
	opacity: 0.5;
}

.schedule__ornament-bow {
	width: 44px;
}

.schedule__ornament-heart {
	width: 15px;
}

.schedule__timeline {
	position: relative;
	width: min(660px, 100%);
	margin: 24px auto 0;
	aspect-ratio: 600 / 900;
	container-type: inline-size;
}

.schedule__curve {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.schedule__item {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.4cqw;
	width: 56cqw;
}

.schedule__item--1 { top: 2%; left: -2%; }
.schedule__item--2 { top: 27.5%; right: -3%; }
.schedule__item--3 { top: 52%; left: -11%; }
.schedule__item--4 { top: 77%; right: -6%; }

.schedule__time {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 9.8cqw;
	line-height: 1.1;
	color: var(--color-accent);
}

.schedule__icon {
	height: 13cqw;
}

.schedule__label {
	font-family: var(--font-serif);
	font-size: 4.1cqw;
	line-height: 1.4;
	color: var(--color-accent);
}

.schedule__end {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: 300px;
	margin: 40px auto 0;
}

.schedule__end::before,
.schedule__end::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--color-accent);
	opacity: 0.5;
}

.schedule__end-heart {
	width: 16px;
}

/* ==========================================================================
   Attire
   ========================================================================== */

.attire {
	padding: 72px 20px 24px;
	background-color: var(--color-bg);
	text-align: center;
}

.attire__title {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: clamp(54px, 8vw, 72px);
	line-height: 1.2;
	color: var(--color-accent);
}

.attire__ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 320px;
	margin: 18px auto 0;
}

.attire__ornament::before,
.attire__ornament::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--color-accent);
	opacity: 0.5;
}

.attire__ornament-bow {
	width: 48px;
}

.attire__ornament-heart {
	width: 16px;
}

.attire__text {
	max-width: 520px;
	margin: 36px auto 0;
}

.attire__paragraph {
	font-family: var(--font-serif);
	font-size: clamp(20px, 3vw, 22px);
	line-height: 1.5;
	color: var(--color-accent);
}

.attire__paragraph + .attire__paragraph {
	margin-top: 1.4em;
}

.attire__board {
	position: relative;
	max-width: 600px;
	margin: 56px auto 0;
	padding: 0 clamp(20px, 5vw, 44px) clamp(32px, 6vw, 48px);
	border-left: 1.5px solid var(--color-accent);
	border-right: 1.5px solid var(--color-accent);
	border-bottom: 1.5px solid var(--color-accent);
}

.attire__corner {
	position: absolute;
	width: clamp(40px, 8vw, 52px);
	z-index: 1;
}

.attire__corner--tl { top: 0; left: 0; transform: translate(-50%, -40%) rotate(-45deg); }
.attire__corner--tr { top: 0; right: 0; transform: translate(50%, -40%) rotate(45deg); }
.attire__corner--bl { bottom: 0; left: 0; transform: translate(-50%, 40%) rotate(-135deg); }
.attire__corner--br { bottom: 0; right: 0; transform: translate(50%, 40%) rotate(135deg); }

.attire__group-title {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: clamp(34px, 5vw, 42px);
	line-height: 1.2;
	color: var(--color-accent);
}

/* заголовок «Doamne» лежит на верхней кромке рамки — линии по бокам замыкают контур */
.attire__group-title--top {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 calc(-1 * clamp(20px, 5vw, 44px));
	transform: translateY(-50%);
}

.attire__group-title--top::before,
.attire__group-title--top::after {
	content: '';
	flex: 1;
	height: 1.5px;
	background-color: var(--color-accent);
}

.attire__palette {
	display: grid;
	gap: clamp(12px, 3vw, 20px);
	margin-top: 28px;
	list-style: none;
}

.attire__swatch {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--swatch);
}

.attire__palette--doamne {
	grid-template-columns: repeat(5, 1fr);
	max-width: 440px;
	margin-left: auto;
	margin-right: auto;
}

.attire__palette--domni {
	grid-template-columns: repeat(6, 1fr);
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.attire__divider {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 300px;
	margin: 36px auto;
}

.attire__divider::before,
.attire__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--color-accent);
	opacity: 0.5;
}

.attire__divider-heart {
	width: 16px;
}

/* ==========================================================================
   RSVP
   ========================================================================== */

.rsvp {
	padding: 80px 20px 96px;
	background-color: var(--color-bg);
	text-align: center;
}

.rsvp__board {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(40px, 8vw, 64px) clamp(24px, 6vw, 56px);
	border: 1.5px solid var(--color-accent);
}

.rsvp__corner {
	position: absolute;
	width: clamp(40px, 8vw, 52px);
	z-index: 1;
}

.rsvp__corner--tl { top: 0; left: 0; transform: translate(-50%, -40%) rotate(-45deg); }
.rsvp__corner--tr { top: 0; right: 0; transform: translate(50%, -40%) rotate(45deg); }
.rsvp__corner--bl { bottom: 0; left: 0; transform: translate(-50%, 40%) rotate(-135deg); }
.rsvp__corner--br { bottom: 0; right: 0; transform: translate(50%, 40%) rotate(135deg); }

.rsvp__title {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: clamp(64px, 10vw, 88px);
	line-height: 1.15;
	color: var(--color-accent);
}

.rsvp__ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 260px;
	margin: 10px auto 0;
}

.rsvp__ornament::before,
.rsvp__ornament::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--color-accent);
	opacity: 0.5;
}

.rsvp__ornament-bow {
	width: 46px;
}

.rsvp__ornament-heart {
	width: 15px;
	margin-top: 6px;
}

.rsvp__text {
	max-width: 400px;
	margin: 24px auto 0;
	font-family: var(--font-serif);
	font-size: clamp(20px, 3vw, 22px);
	line-height: 1.5;
	color: var(--color-accent);
}

.rsvp__divider {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 340px;
	margin: 36px auto;
}

.rsvp__divider--small {
	max-width: 220px;
	margin: 20px auto;
}

.rsvp__divider::before,
.rsvp__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--color-accent);
	opacity: 0.5;
}

.rsvp__divider-heart {
	width: 16px;
}

.rsvp__divider-bow {
	width: 44px;
}

.rsvp__field {
	text-align: left;
}

.rsvp__label {
	display: block;
	font-family: var(--font-script);
	font-weight: 400;
	font-size: clamp(30px, 5vw, 38px);
	line-height: 1.3;
	color: var(--color-accent);
	text-align: center;
	margin-bottom: 4px;
}

.rsvp__label--serif {
	font-family: var(--font-serif);
	font-size: clamp(21px, 3.2vw, 24px);
	line-height: 1.4;
	text-align: left;
	margin: 40px 0 0;
}

.rsvp__input {
	width: 100%;
	border: none;
	border-bottom: 1.5px solid var(--color-accent);
	background: transparent;
	padding: 10px 4px;
	font-family: var(--font-serif);
	font-size: 20px;
	color: var(--color-accent);
	border-radius: 0;
	outline: none;
}

.rsvp__input:focus {
	border-bottom-width: 2px;
}

.rsvp__fieldset {
	border: none;
}

.rsvp__legend {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: clamp(34px, 5.5vw, 44px);
	line-height: 1.3;
	color: var(--color-accent);
	margin: 0 auto 24px;
}

.rsvp__legend--serif {
	font-family: var(--font-serif);
	font-size: clamp(21px, 3.2vw, 24px);
	line-height: 1.4;
	text-align: left;
	margin-bottom: 20px;
}

.rsvp__choices {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rsvp__choice {
	display: flex;
	align-items: center;
	gap: 18px;
	text-align: left;
	cursor: pointer;
	justify-content: flex-start;
}

.rsvp__choice-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.rsvp__choice-mark {
	flex: none;
	width: 30px;
	height: 30px;
	border: 2px solid var(--color-accent);
	position: relative;
}

.rsvp__choice-mark--radio {
	border-radius: 50%;
}

.rsvp__choice-input:checked + .rsvp__choice-mark::after {
	content: '';
	position: absolute;
	inset: 5px;
	background-color: var(--color-accent);
}

.rsvp__choice-mark--radio::after {
	border-radius: 50%;
}

.rsvp__choice-input:focus-visible + .rsvp__choice-mark {
	outline: 2px dashed var(--color-accent);
	outline-offset: 3px;
}

.rsvp__choice-text {
	font-family: var(--font-serif);
	font-size: clamp(20px, 3vw, 23px);
	line-height: 1.35;
	color: var(--color-accent);
}

.rsvp__submit {
	display: block;
	margin: 44px auto 0;
	padding: 18px 64px;
	border: none;
	background-color: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-serif);
	font-size: 22px;
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.rsvp__submit:hover {
	opacity: 0.85;
}

.rsvp__submit:disabled {
	opacity: 0.55;
	cursor: default;
}

/* ==========================================================================
   Outro
   ========================================================================== */

.outro {
	padding: 48px 20px 0;
	background-color: var(--color-bg);
	text-align: center;
	overflow: hidden;
}

.outro__title {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: clamp(56px, 9vw, 80px);
	line-height: 1.2;
	color: var(--color-accent);
}

.outro__illustration {
	display: block;
	width: min(620px, 94%);
	margin: 36px auto 0;
	/* иллюстрация обрезана по нижнему краю секции, как у донора */
	margin-bottom: -3%;
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translate(-50%, 16px);
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	max-width: min(420px, calc(100vw - 40px));
	padding: 16px 24px;
	background-color: var(--color-bg);
	border: 1.5px solid var(--color-accent);
	box-shadow: 0 6px 24px rgba(189, 62, 47, 0.18);
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
	z-index: 100;
}

.toast.is-shown {
	opacity: 1;
	transform: translate(-50%, 0);
}

.toast--error {
	background-color: var(--color-accent);
}

.toast__heart {
	flex: none;
	width: 20px;
}

.toast--error .toast__heart {
	filter: brightness(0) invert(1);
}

.toast__message {
	font-family: var(--font-serif);
	font-size: 17px;
	line-height: 1.4;
	color: var(--color-accent);
	text-align: left;
}

.toast--error .toast__message {
	color: var(--color-bg);
}

/* Scroll reveal
   ========================================================================== */

[data-animate] {
	opacity: 0;
	transform: scale(0.95);
	transition:
		opacity 1.2s ease,
		transform 1.2s ease;
}

[data-animate].is-visible {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	[data-animate] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Animations
   ========================================================================== */

@keyframes hero-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes hero-zoom-in {
	from {
		opacity: 0;
		transform: translateX(-50%) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}
}

@keyframes hero-zoom-in-static {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.hero__date {
	animation-name: hero-zoom-in-static;
}