/*
 * Maison Invitations — public front-end styling.
 * FILE: assets/css/maison-invitations.css
 *
 * Palette and type scale intentionally match the main Maison site
 * (see the theme's own BASE_STYLE) so the invitation ritual reads as
 * one continuous experience rather than a bolted-on plugin.
 */

:root{
	--void:#170508;
	--oxblood-deep:#3a0c15;
	--oxblood:#5c1220;
	--oxblood-light:#7a1c2a;
	--gold:#c9a44c;
	--gold-bright:#e8cd8a;
	--gold-dim:#8a7038;
	--ivory:#f4ecdd;
	--ivory-dim:#e7dcc6;
	--ink:#2a1114;
	--ink-soft:#5a3a3f;
	--rule:rgba(201,164,76,0.35);
	--serif:'Cormorant Garamond', 'Times New Roman', serif;
	--caps:'Cinzel', 'Cormorant Garamond', serif;
	--sans:'Jost', 'Helvetica Neue', Arial, sans-serif;

	--mi-wax:#6b1420;
	--mi-wax-dark:#3d0a12;
	--mi-paper:#f2e9d8;
	--mi-paper-edge:#e3d5b8;
	--mi-silver:#b9bdc2;
}

.mi-root{
	box-sizing:border-box;
	min-height:100vh;
	background:
		radial-gradient(ellipse 90% 60% at 50% 0%, rgba(122,28,42,0.28), transparent 60%),
		var(--void);
	color:var(--ivory);
	font-family:var(--serif);
	-webkit-font-smoothing:antialiased;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:8vh 6vw;
	overflow-x:hidden;
}
.mi-root *{box-sizing:border-box;}
.mi-root a{color:inherit;}
.mi-root [hidden]{display:none !important;}

.mi-scene{max-width:640px; width:100%; text-align:center;}
.mi-scene--seal{max-width:960px;}

.mi-mark{
	font-family:var(--caps); letter-spacing:0.32em; font-size:14px;
	color:var(--gold-bright); margin:0 0 28px; font-weight:500;
}
.mi-mark--small{font-size:12px; margin-bottom:0;}

.mi-eyebrow{
	font-family:var(--caps); font-size:11px; letter-spacing:0.28em;
	text-transform:uppercase; color:var(--gold); margin:0 0 22px; font-weight:500;
}
.mi-eyebrow--fade{animation:mi-pulse 1.8s ease-in-out infinite;}
@keyframes mi-pulse{0%,100%{opacity:.45;}50%{opacity:1;}}

.mi-serif-h1{
	font-family:var(--caps); font-weight:500;
	font-size:clamp(28px, 5vw, 44px); line-height:1.15; letter-spacing:0.02em;
	color:var(--gold-bright); margin:0 0 26px;
}
.mi-serif-h2{
	font-family:var(--caps); font-weight:500;
	font-size:clamp(22px, 3.4vw, 30px); letter-spacing:0.02em;
	color:var(--gold-bright); margin:0 0 14px;
}
.mi-serif-h3{
	font-family:var(--serif); font-style:italic; font-weight:500;
	font-size:clamp(20px, 3vw, 26px); letter-spacing:0.01em;
	color:var(--gold-bright); margin:0 0 12px; line-height:1.3;
}

.mi-lede{
	font-size:17px; line-height:1.7; color:var(--ivory-dim);
	max-width:480px; margin:0 auto 16px;
}
.mi-lede--soft{color:#c9b8bb; font-size:15px;}

.mi-btn{
	display:inline-block; font-family:var(--caps); letter-spacing:0.2em;
	font-size:11px; text-decoration:none; text-transform:uppercase;
	padding:15px 38px; border-radius:1px; border:1px solid transparent;
	cursor:pointer; transition:background .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
}
.mi-btn:active{transform:translateY(1px);}
.mi-btn--gold{background:var(--gold); color:var(--void);}
.mi-btn--gold:hover{background:var(--gold-bright);}
.mi-btn--oxblood{background:var(--oxblood); color:var(--ivory); border-color:var(--oxblood);}
.mi-btn--oxblood:hover{background:var(--oxblood-light);}
.mi-btn--ghost{background:transparent; color:var(--gold-bright); border-color:var(--gold-dim);}
.mi-btn--ghost:hover{border-color:var(--gold-bright); color:var(--gold-bright); background:rgba(201,164,76,0.08);}

.mi-root :focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}

/* -------------------------------------------------------------- */
/* THE ENVELOPE + WAX SEAL                                        */
/* Photographed envelope + wax seal (Media Library images, see    */
/* Maison_Shortcodes::media_url_by_title()) crossfading from rest */
/* to broken-seal on click, over a restrained silver-plate motif. */
/* -------------------------------------------------------------- */

.mi-envelope-wrap{
	position:relative;
	margin-top:56px; display:inline-flex; flex-direction:column; align-items:center; gap:22px;
}

.mi-envelope{
	position:relative;
	width:min(360px, 80vw);
	aspect-ratio:1334 / 790; /* the photographed envelope's own ratio */
	background:var(--mi-paper);
	border:none; border-radius:3px; padding:0; margin:0;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
	filter:drop-shadow(0 26px 46px rgba(5,1,2,0.55));
}

.mi-envelope-photo{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:contain;
	z-index:1;
}
.mi-envelope-photo--closed{
	opacity:1;
	transition:opacity .5s ease .18s;
}
.mi-envelope-photo--broken{
	opacity:0;
	transition:opacity .55s ease .16s;
}
.mi-envelope.is-breaking .mi-envelope-photo--broken,
.mi-envelope.is-open .mi-envelope-photo--broken{
	opacity:1;
}
.mi-envelope.is-breaking .mi-envelope-photo--closed{
	transition-delay:0s;
}

@keyframes mi-envelope-tremor{
	0%{transform:scale(1) rotate(0deg);}
	22%{transform:scale(0.982) rotate(-0.5deg);}
	55%{transform:scale(0.994) rotate(0.4deg);}
	100%{transform:scale(1) rotate(0deg);}
}
.mi-envelope.is-breaking{animation:mi-envelope-tremor .5s ease;}

.mi-break-label{
	position:relative; z-index:1;
	font-family:var(--caps); font-size:11px; letter-spacing:0.3em;
	text-transform:uppercase; color:var(--gold-dim); margin:0;
	text-shadow:0 1px 3px rgba(5,1,2,0.8);
	transition:opacity .4s ease;
}
.mi-envelope.is-open ~ .mi-break-label,
.mi-envelope-wrap:has(.mi-envelope.is-open) .mi-break-label{opacity:0;}

.mi-seal-stage, .mi-reveal, .mi-reveal-error{transition:opacity .6s ease, transform .6s ease;}
.mi-seal-stage.mi-fade-out{opacity:0; transform:translateY(-10px); pointer-events:none;}
.mi-reveal, .mi-reveal-error{opacity:0; transform:translateY(10px);}
.mi-reveal.mi-fade-in, .mi-reveal-error.mi-fade-in{opacity:1; transform:translateY(0);}

/* The reveal: a photographed letter (Media Library, see
   Maison_Shortcodes::media_url_by_title( 'LetterMaison' )) standing in
   for the old text panel, with Continue overlaid on its blank lower
   envelope — the ritual's final, quietest beat. */
.mi-letter{
	position:relative;
	display:block;
	width:min(840px, 92vw);
	margin:0 auto;
}
.mi-letter-photo{
	display:block;
	width:100%;
	height:auto;
	border-radius:2px;
	filter:drop-shadow(0 26px 46px rgba(5,1,2,0.5));
}
.mi-letter-continue{
	position:absolute;
	left:50%;
	bottom:20%;
	transform:translateX(-50%);
	box-shadow:0 10px 26px rgba(5,1,2,0.5);
}

@media (prefers-reduced-motion: reduce){
	.mi-envelope-photo, .mi-seal-stage, .mi-reveal, .mi-reveal-error{transition-duration:.35s !important;}
	.mi-envelope.is-breaking{animation:none !important;}
}

@media (max-width:520px){
	.mi-root{padding:9vh 7vw;}
	.mi-envelope{width:min(300px, 84vw);}
	.mi-letter{width:min(640px, 92vw);}
	.mi-letter-continue{padding:13px 30px; font-size:10px;}
}
/* -------------------------------------------------------------- */
/* PROFILE FORM                                                    */
/* -------------------------------------------------------------- */

.mi-profile-root{align-items:flex-start; padding-top:9vh; padding-bottom:9vh;}
.mi-profile-wrap{max-width:560px; width:100%; margin:0 auto; text-align:left;}
.mi-profile-header{text-align:center; margin-bottom:44px;}

.mi-stepper{
	display:flex; align-items:center; justify-content:center; gap:0;
	list-style:none; margin:26px 0 0; padding:0;
}
.mi-step{display:flex; align-items:center;}
.mi-step:not(:last-child)::after{
	content:""; width:34px; height:1px; background:var(--rule); margin:0 8px;
}
.mi-step-dot{
	display:flex; align-items:center; justify-content:center;
	width:28px; height:28px; border-radius:50%;
	border:1px solid var(--gold-dim); color:var(--gold-dim);
	font-family:var(--caps); font-size:11px; letter-spacing:0.05em;
	transition:all .3s ease;
}
.mi-step.is-current .mi-step-dot{background:var(--gold-bright); border-color:var(--gold-bright); color:var(--void);}
.mi-step.is-done .mi-step-dot{border-color:var(--gold-bright); color:var(--gold-bright);}

.mi-fstep{margin-top:8px;}
.mi-fstep .mi-serif-h2, .mi-fstep .mi-lede{text-align:center;}
.mi-fstep .mi-lede--soft{margin-bottom:36px;}

.mi-field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 24px;}

.mi-field{margin-bottom:26px;}
.mi-field label{
	display:block; font-family:var(--sans); font-size:11px; letter-spacing:0.14em;
	text-transform:uppercase; color:var(--ivory-dim); margin-bottom:8px;
}
.mi-field-hint{text-transform:none; letter-spacing:0; opacity:.7;}
.mi-field input, .mi-field select, .mi-field textarea{
	width:100%; font-family:var(--serif); font-size:17px; color:var(--ivory);
	background:transparent; border:none; border-bottom:1px solid rgba(201,164,76,0.3);
	padding:8px 2px; outline:none; transition:border-color .3s ease;
}
.mi-field select{
	appearance:none; -webkit-appearance:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23c9a44c'><path d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
	background-repeat:no-repeat; background-position:right 2px center; background-size:16px;
}
.mi-field select option{color:#111;}
.mi-field input:focus, .mi-field select:focus, .mi-field textarea:focus{border-color:var(--gold);}
.mi-field textarea{resize:vertical; min-height:64px; font-family:var(--sans); font-size:15px; line-height:1.6;}

.mi-fstep-actions{display:flex; justify-content:space-between; align-items:center; margin-top:36px; gap:16px;}
.mi-fstep-actions .mi-btn{flex:0 0 auto;}
.mi-fstep-actions .mi-step-next, .mi-fstep-actions button[type="submit"]{margin-left:auto;}

.mi-photo-upload{margin:20px 0 8px;}
.mi-photo-dropzone{
	display:flex; align-items:center; justify-content:center;
	height:220px; border:1px dashed var(--gold-dim); border-radius:2px;
	cursor:pointer; color:var(--gold-dim); font-family:var(--sans); font-size:13px;
	letter-spacing:0.04em; text-align:center; overflow:hidden;
	transition:border-color .3s ease, color .3s ease;
}
.mi-photo-dropzone:hover{border-color:var(--gold-bright); color:var(--gold-bright);}
.mi-photo-dropzone img{width:100%; height:100%; object-fit:cover;}

.mi-review{margin:20px 0 8px;}
.mi-review div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(201,164,76,0.18); font-family:var(--sans); font-size:14px;}
.mi-review dt{color:var(--ivory-dim); text-transform:uppercase; letter-spacing:0.08em; font-size:11px;}
.mi-review dd{margin:0; color:var(--ivory); text-align:right; max-width:60%;}

.mi-form-error{
	margin-top:20px; padding:14px 18px; border:1px solid rgba(232,89,89,0.4);
	background:rgba(232,89,89,0.08); color:#f0b8b8; font-family:var(--sans); font-size:13px;
	border-radius:1px;
}

.mi-profile-done{text-align:center; padding-top:6vh;}
.mi-profile-guard{text-align:center;}

/* -------------------------------------------------------------- */
/* INTRODUCTIONS — ALIAS / MUTUAL / REVEALED CARDS                 */
/* -------------------------------------------------------------- */

.mi-intro-root{align-items:flex-start; padding-top:9vh; padding-bottom:9vh;}
.mi-intro-wrap{max-width:920px; width:100%; margin:0 auto;}
.mi-intro-header{text-align:center; margin-bottom:48px;}
.mi-intro-empty{text-align:center; padding:6vh 0;}

.mi-intro-grid{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
	gap:24px;
}

.mi-alias-card, .mi-mutual-card, .mi-revealed-card{
	background:linear-gradient(180deg, rgba(58,12,21,0.55), rgba(23,5,8,0.9));
	border:1px solid var(--rule); border-radius:2px; padding:30px 26px;
	text-align:center; position:relative;
}

.mi-alias-card-head{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px;}
.mi-alias-card-label{font-family:var(--caps); font-size:10px; letter-spacing:0.24em; color:var(--gold-dim); text-transform:uppercase;}
.mi-icon-lock{width:14px; height:14px; fill:var(--gold-dim);}

.mi-alias-card-alias{font-family:var(--caps); font-size:15px; letter-spacing:0.14em; color:var(--gold-bright);}
.mi-alias-card-concealed{font-family:var(--sans); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#9c7f84; margin:4px 0 22px;}

.mi-alias-card-initials, .mi-revealed-photo{
	width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
	border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center;
	font-family:var(--caps); font-size:18px; color:var(--gold-bright);
	background:rgba(201,164,76,0.06);
}
.mi-revealed-photo{background-size:cover; background-position:center; font-size:0;}

.mi-alias-card-locale{font-family:var(--sans); font-size:13px; color:#c9b8bb; margin:0 0 22px;}
.mi-dot{color:var(--gold-dim); margin:0 4px;}

.mi-alias-card-stats{
	display:grid; grid-template-columns:1fr 1fr; gap:14px 10px;
	border-top:1px solid rgba(201,164,76,0.18); padding-top:18px; margin:0 0 24px;
}
.mi-alias-card-stats dt{font-family:var(--sans); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#9c7f84; margin:0 0 4px;}
.mi-alias-card-stats dd{margin:0; font-family:var(--serif); font-size:15px; color:var(--ivory);}

.mi-interest-btn[aria-pressed="true"]{background:var(--gold); color:var(--void); border-color:var(--gold);}

.mi-mutual-card{background:linear-gradient(180deg, rgba(122,28,42,0.35), rgba(23,5,8,0.9));}
.mi-mutual-marks{display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.mi-mutual-marks span{
	width:44px; height:44px; border-radius:50%; border:1px solid var(--gold);
	display:flex; align-items:center; justify-content:center;
	font-family:var(--caps); font-size:15px; color:var(--gold-bright);
	background:rgba(23,5,8,0.6);
}
.mi-mutual-marks span:last-child{margin-left:-12px;}

.mi-revealed-about{font-family:var(--sans); font-size:13px; line-height:1.7; color:#c9b8bb; margin:0 0 24px;}

@media (max-width:600px){
	.mi-intro-grid{grid-template-columns:1fr;}
	.mi-field-row{grid-template-columns:1fr;}
}