/* ============================================================
   SAVE THE DATE — LUXURY ASSET-BASED WEDDING INVITATION
   Pure Cinematic Layout with Dynamic Progressive Wipe & Aesthetic Opening
   ============================================================ */

:root {
    --color-navy: #0e233a;
    --color-green: #152c22;
    --color-gold: #c5a059;
    --color-gold-light: #f3e6cf;
    --color-gold-dark: #8c6d31;
    --color-charcoal: #161a17;
    --color-text-subtle: #2b302c;
    --color-cream: #faf7f2;
    --font-serif-roman: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --font-serif-classic: 'Cormorant Garamond', Georgia, serif;
    --font-serif-italic: 'Cormorant Garamond', Georgia, serif;
    --font-script: 'Great Vibes', cursive;
    --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #e7dcc9;
    font-family: var(--font-serif-classic);
    color: var(--color-charcoal);
    user-select: none;
    -webkit-user-select: none;
}

/* Follow the visible viewport as mobile browser chrome expands/collapses. */
body { height: 100vh; height: 100dvh; }

/* ================= AMBIENT DESKTOP BACKDROP ================= */
.ambient-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ambient-bg-image {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url('assets/handmade-paper-v1.webp');
    background-size: cover;
    background-position: center;
    filter: blur(12px) brightness(.94);
    transform: scale(1.1);
}
@media (min-width: 700px) {
    .ambient-bg-image {
        inset: 0;
        width: 100%;
        height: 100%;
        background-image: url('assets/handmade-surround-v1.webp');
        filter: none;
        transform: none;
    }
}

/* Pocketful-style watercolor blooms stay behind the paper objects and text. */
.heart-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    contain: layout paint;
    pointer-events: none !important;
    user-select: none;
}
.heart-field * { pointer-events: none !important; }
.heart-field--opening { transition: opacity .65s ease; }
.heart-wash {
    position: absolute;
    top: var(--heart-y);
    left: var(--heart-x);
    width: clamp(100px, 36cqi, 270px);
    aspect-ratio: 1;
    opacity: 0;
    transform-origin: 50% 65%;
    animation: handmade-heart-bloom var(--heart-time) var(--heart-delay) ease-in-out infinite both;
}
.heart-field--surround .heart-wash { width: clamp(140px, 16vw, 300px); }
.heart-wash img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: saturate(.56) sepia(.1);
    user-select: none;
    -webkit-user-drag: none;
}
@keyframes handmade-heart-bloom {
    0%, 8% { opacity: 0; transform: translate3d(-50%, calc(-50% + 12px), 0) rotate(var(--heart-angle)) scale(calc(var(--heart-scale) * .76)); }
    29%, 54% { opacity: var(--heart-opacity); transform: translate3d(calc(-50% + var(--heart-drift)), -50%, 0) rotate(calc(var(--heart-angle) + 4deg)) scale(var(--heart-scale)); }
    82%, 100% { opacity: 0; transform: translate3d(calc(-50% + var(--heart-drift)), calc(-50% - 27px), 0) rotate(calc(var(--heart-angle) + 8deg)) scale(calc(var(--heart-scale) * 1.09)); }
}
.heart-field.is-document-hidden .heart-wash { animation-play-state: paused; }
.is-unsealing .heart-field--opening { opacity: 0; }
.is-unsealing .heart-field--opening .heart-wash { animation-play-state: paused; }
@media (max-width: 699px) {
    .heart-field--surround { display: none; }
    .heart-field--surround .heart-wash { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
    .heart-field { display: none; }
    .heart-wash { animation: none !important; }
}

/* ================= INVITATION MAIN CONTAINER ================= */
.invitation-container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Artwork reaches the screen edges; interactive controls own safe insets. */
    padding: 0;
}

/* Fill tall phones vertically. Wide screens retain a portrait composition and
   the linen surround; foreground artwork keeps its own intrinsic proportions. */
.stage-viewport {
    position: relative;
    --scene-height: 100vh;
    width: min(100%, calc(var(--scene-height) * 9 / 16));
    height: 100%;
    flex: none;
    container-type: inline-size;
    overflow: hidden;
    background-color: #e3d6be;
    perspective: 1400px;
}
@supports (height: 100dvh) {
    .stage-viewport { --scene-height: 100dvh; }
}
.stage-viewport:not(.is-open) { border-radius: 0; }

/* Blend the portrait's outer linen into the surround only where side gutters
   exist. Keep the deckled paper and the 3D envelope on their original layers. */
@media (min-aspect-ratio: 9/16) {
    .stage-viewport { background-color: transparent; }
    .envelope-surface, .heart-field--opening {
        --opening-edge: clamp(0px, calc((100vw - 100cqi) / 2), min(4.5cqi, 32px));
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--opening-edge), #000 calc(100% - var(--opening-edge)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--opening-edge), #000 calc(100% - var(--opening-edge)), transparent);
    }
}

/* The same painted letter is extracted from the envelope, then fills the scene. */
.invitation-letter {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: #d3b694;
    transform-origin: top center;
    /* Keep the folded letter inside the width-proportioned envelope on tall phones. */
    transform: translateY(calc(39% + 5.333333cqi)) scale(.78);
    clip-path: inset(0 0 calc(100% - 74.666667cqi) 0);
    opacity: 0;
    box-shadow: 0 9px 24px rgba(26, 30, 20, .22);
}
.is-unsealing .invitation-letter { opacity: 1; transition: opacity .35s .85s; will-change: transform, clip-path, opacity; }
.is-extracting .invitation-letter {
    transform: translateY(0) scale(1);
    clip-path: inset(0);
    transition: transform 2.3s cubic-bezier(.4, 0, .2, 1), clip-path 2.3s cubic-bezier(.4, 0, .2, 1), opacity .35s;
}
.is-open .invitation-letter { box-shadow: none; will-change: auto; }
.invitation-letter .top-nav-bar { opacity: 0; pointer-events: none; transition: opacity .4s; }
.is-open .invitation-letter .top-nav-bar { opacity: 1; pointer-events: auto; }

/* ================= STAGE LAYERS ================= */
.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Layer 1: Road & Landscape Asset */
.road-layer {
    z-index: 1;
}

.road-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Layer 2: "Save The Date" Script along the road (Synchronized dynamic wipe) */
.script-layer {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: inset(0% 0 0 0);
    will-change: clip-path;
}

.save-the-date-script-img {
    width: 22%;
    max-width: 110px;
    height: auto;
    object-fit: contain;
    margin-top: 5%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
    opacity: 0.98;
}

/* Layer 3: Vintage Car with Couple Asset */
.car-layer {
    z-index: 3;
    transform: translateY(-45%);
}

.car-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 31%;
    top: 0; /* The entire car layer moves along the road. */
    filter: drop-shadow(0 24px 20px rgba(0, 0, 0, 0.46))
            drop-shadow(0 8px 10px rgba(0, 0, 0, 0.28));
    pointer-events: none;
}

.vintage-car-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
.car-wrapper.driving, .car-wrapper.parked { animation: none; }

/* Layer 4: Interactive Falling Rose Petals Canvas */
.petals-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    cursor: default;
}

/* Letterpress-like type, arranged in the quiet upper stretch of road. */
.text-reveal-layer {
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: max(21cqi, calc(env(safe-area-inset-top, 0px) + 38px + 5.6cqi)) 20cqi 0;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
.text-reveal-layer.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.text-content-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
}
.romantic-quote {
    font-family: var(--font-serif-classic);
    font-size: clamp(12px, 4.2cqi, 23px);
    font-style: italic;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: pretty;
    color: #20291f;
    max-width: 57cqi;
    margin-bottom: 5cqi;
}
.date-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5cqi;
    cursor: pointer;
    pointer-events: auto;
}
.date-part {
    font-family: var(--font-serif-classic);
    font-weight: 600;
    color: var(--color-navy);
    line-height: .95;
    text-shadow: none;
    transition: color .3s ease;
}
.date-day { font-size: clamp(43px, 17.3cqi, 104px); letter-spacing: -.035em; }
.date-ordinal { font-size: .34em; font-style: italic; vertical-align: super; margin-left: .06em; letter-spacing: 0; }
.date-month { font-size: clamp(27px, 10cqi, 60px); font-weight: 400; font-style: italic; margin-top: .5cqi; }
.date-year { font-size: clamp(16px, 5.9cqi, 35px); letter-spacing: .15em; margin: 2.2cqi 0 0 .15em; }
.couple-names {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 2.3cqi;
    row-gap: 0;
    width: 100%;
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(25px, 9.5cqi, 57px);
    line-height: 1.25;
    color: #102b20;
    text-shadow: none;
    -webkit-text-stroke: .2px currentColor;
    cursor: pointer;
    pointer-events: auto;
}
.name-part { max-width: 100%; overflow-wrap: anywhere; }
.name-sep { font-family: var(--font-serif-classic); font-style: italic; font-size: .6em; font-weight: 600; color: #273326; }
.formal-footer {
    font-family: var(--font-serif-classic);
    font-size: clamp(11px, 3.9cqi, 23px);
    font-weight: 600;
    font-style: italic;
    line-height: 1.4;
    color: #29291d;
    margin-top: 4.5cqi;
    max-width: 65cqi;
    text-wrap: pretty;
}
.romantic-quote, .date-container, .couple-names, .formal-footer {
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .9s ease, transform 1.1s ease;
}
.date-container { transition-delay: .12s; }
.couple-names { transition-delay: .24s; }
.formal-footer { transition-delay: .36s; }
.text-reveal-layer.visible .text-content-card > * { opacity: 1; transform: none; }
/* Short landscape windows retain the whole scene instead of cropping it. */
@media (max-height: 480px) {
    .romantic-quote { font-size: 4.2cqi; }
    .date-day { font-size: 17.3cqi; }
    .date-month { font-size: 10cqi; }
    .date-year { font-size: 5.9cqi; }
    .couple-names { font-size: 9.5cqi; }
    .formal-footer { font-size: 3.9cqi; }
}

/* ================= TOP NAVIGATION BAR ================= */
.top-nav-bar {
    position: absolute;
    top: max(2.6cqi, env(safe-area-inset-top));
    left: 3cqi;
    right: 3cqi;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}

.nav-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-navy);
    transition: all 0.25s ease;
}

.nav-icon-btn svg {
    width: 17px;
    height: 17px;
}

.nav-icon-btn:hover {
    background: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.nav-icon-btn:active {
    transform: scale(0.95);
}

/* Sound Wave Bars */
.sound-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 14px;
}

.sound-wave span {
    width: 2.5px;
    height: 100%;
    background-color: var(--color-navy);
    border-radius: 2px;
    animation: soundWaveAnim 1.2s ease-in-out infinite alternate;
}

.sound-wave span:nth-child(1) { animation-delay: 0.1s; height: 40%; }
.sound-wave span:nth-child(2) { animation-delay: 0.3s; height: 100%; }
.sound-wave span:nth-child(3) { animation-delay: 0.2s; height: 70%; }
.sound-wave span:nth-child(4) { animation-delay: 0.4s; height: 50%; }

@keyframes soundWaveAnim {
    0% { height: 25%; }
    100% { height: 100%; }
}

.audio-btn.muted .sound-wave {
    display: none;
}

.audio-btn.muted .audio-muted-icon {
    display: block;
}

.audio-muted-icon {
    display: none;
}

/* ================= HANDMADE ENVELOPE ARTWORK ================= */
.opening-curtain { position: absolute; inset: 0; pointer-events: none; }
.envelope-surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #eee1cb url('assets/handmade-paper-v1.webp') center / cover no-repeat;
}
.envelope-heading {
    position: absolute;
    top: 16%;
    left: 10%;
    right: 10%;
    z-index: 6;
    color: #4a3b2c;
    font-family: var(--font-serif-classic);
    font-size: 8.6cqi;
    font-weight: 500;
    font-style: italic;
    line-height: 1.15;
    text-align: center;
    transition: opacity .55s ease, transform .55s ease;
}
.envelope-recipient {
    position: absolute;
    inset: 23% 11% auto;
    height: 12%;
    z-index: 6;
    text-align: center;
    color: #3b4932;
    transition: opacity .55s ease, transform .55s ease;
}
.envelope-recipient-copy { transform-origin: top center; }
#sealCardCouple { font-family: var(--font-script); font-size: 11.5cqi; font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; }
/* All layers share the photographed asset's 4:3 geometry. The masks split its
   original folds; they don't stretch independent artwork across breakpoints. */
.envelope-shape, .envelope-flap {
    position: absolute;
    left: 5%;
    top: 39%;
    width: 90%;
    height: auto;
    aspect-ratio: 4 / 3;
}
.envelope-contact-shadow {
    z-index: 1;
    background: url('assets/handmade-envelope-v1.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(.35cqi .65cqi .35cqi #55392430) drop-shadow(.8cqi 1.9cqi 1.4cqi #4f35262b);
}
.envelope-back {
    z-index: 1;
    background: #d9c6a5 url('assets/handmade-paper-v1.webp') center / 200% 200%;
    mask: url('assets/handmade-envelope-v1.webp') center / 100% 100% no-repeat;
    -webkit-mask: url('assets/handmade-envelope-v1.webp') center / 100% 100% no-repeat;
    filter: brightness(.92);
}
.envelope-pocket {
    z-index: 4;
    background: url('assets/handmade-envelope-v1.webp') center / 100% 100% no-repeat;
    clip-path: polygon(0 16%, 46% 69.5%, 50% 71%, 54% 69.5%, 100% 16%, 100% 100%, 0 100%);
}
.envelope-flap {
    z-index: 5;
    transform-origin: 50% 4.3%;
    transform-style: preserve-3d;
    transform: translateY(0%) rotateX(0deg);
    transition: transform 1.08s cubic-bezier(.4, 0, .2, 1) .12s;
}
.envelope-flap-face, .envelope-flap-lining {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.envelope-flap-face {
    clip-path: polygon(0 0, 100% 0, 100% 16%, 54% 69.5%, 50% 71%, 46% 69.5%, 0 16%);
    background: url('assets/handmade-envelope-v1.webp') center / 100% 100% no-repeat;
}
/* Keep masking off the rotating back face: it flattens the 3D face in WebKit
   and Chromium. The paper artwork is clipped on its child instead. */
.envelope-flap-lining { transform: rotateY(180deg); }
.envelope-flap-lining::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 100% 16%, 54% 69.5%, 50% 71%, 46% 69.5%, 0 16%);
    background: #e8d7b7 url('assets/handmade-paper-v1.webp') center / 220% 220%;
    filter: brightness(.87);
    mask: url('assets/handmade-envelope-v1.webp') center / 100% 100% no-repeat;
    -webkit-mask: url('assets/handmade-envelope-v1.webp') center / 100% 100% no-repeat;
}
.envelope-seal {
    position: absolute;
    top: 39%;
    left: 5%;
    z-index: 7;
    width: 90%;
    height: auto;
    aspect-ratio: 4 / 3;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    transition: opacity .48s ease;
}
.seal-medallion {
    position: absolute;
    left: calc(50% - 11cqi);
    top: calc(67.95% - 11cqi);
    width: 22cqi;
    height: 22cqi;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transform: translateY(-.6cqi) rotate(-4deg);
    translate: 0 0;
    scale: 1;
    transition: translate .22s ease, scale .16s ease;
    animation: waxTapResponse 4.8s ease-in-out infinite;
}
.seal-wax-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(.2cqi .45cqi .18cqi #4d281d65) drop-shadow(.6cqi 1.2cqi .9cqi #542b213b);
}
.seal-monogram {
    position: relative;
    font-family: var(--font-serif-classic);
    font-size: 5.6cqi;
    font-weight: 500;
    color: #753c32;
    text-shadow: 0 -.12cqi .07cqi #49221d8c, 0 .16cqi .1cqi #efb9a6b3;
}
.seal-monogram span { font-style: italic; font-weight: 400; font-size: .7em; margin: 0 .12em; }
.envelope-seal:focus-visible { outline: none; }
.envelope-seal:focus-visible .seal-medallion { outline: 2px solid #745144; outline-offset: 5px; }
.seal-hand-gesture {
    position: absolute;
    top: calc(67.95% + .2cqi);
    left: calc(50% + 3cqi);
    width: 14.5cqi;
    height: auto;
    pointer-events: auto;
    transform-origin: 50% 15%;
    transform: translate(-2.5cqi, -2cqi) rotate(-8deg);
    filter: drop-shadow(.2cqi .3cqi .2cqi #71513738);
    animation: envelopeHandTap 4.8s ease-in-out infinite;
}
/* Two deliberate fingertip contacts, then a quiet pause. The cue remains
   discoverable until opened, instead of ending after four cycles. */
@keyframes envelopeHandTap {
    0%, 12%, 72%, 100% { transform: translate(1cqi, 2cqi) rotate(7deg); opacity: .88; }
    27%, 40% { transform: translate(-2.5cqi, -2cqi) rotate(-8deg); opacity: 1; }
    32%, 46% { transform: translate(-2.5cqi, -.9cqi) rotate(-8deg); opacity: 1; }
    55% { transform: translate(-2.5cqi, -2cqi) rotate(-8deg); opacity: 1; }
}
@keyframes waxTapResponse {
    0%, 27%, 40%, 55%, 100% { transform: translateY(-.6cqi) rotate(-4deg) scale(1); }
    32%, 46% { transform: translateY(.15cqi) rotate(-4deg) scale(.96); }
}
@media (hover: hover) and (pointer: fine) {
    .envelope-seal:hover .seal-medallion { translate: 0 -.55cqi; }
}
.envelope-seal:active .seal-medallion {
    animation-play-state: paused;
    translate: 0 .3cqi;
    scale: .94;
}
.is-backgrounded .seal-medallion, .is-backgrounded .seal-hand-gesture { animation-play-state: paused; }
.is-unsealing .envelope-heading, .is-unsealing .envelope-recipient { opacity: 0; transform: translateY(-8px); }
.is-unsealing .envelope-seal { opacity: 0; pointer-events: none; }
.is-unsealing .seal-hand-gesture { animation: none; }
.is-unsealing .envelope-flap { transform: translateY(0%) rotateX(-178deg); }
/* A single translation keeps the hinge attached to its pocket. Preserve the
   stacking order and 3D wrapper; fade the artwork instead of flattening it. */
.is-unsealing .envelope-shape, .is-unsealing .envelope-flap { will-change: transform; }
.is-extracting .envelope-flap { transform: translateY(135%) rotateX(-178deg); transition: transform 2.1s cubic-bezier(.4, 0, .2, 1); }
.is-extracting .envelope-flap-face, .is-extracting .envelope-flap-lining::before { opacity: 0; transition: opacity .75s .15s; }
.is-extracting .envelope-contact-shadow, .is-extracting .envelope-back, .is-extracting .envelope-pocket { transform: translateY(135%); opacity: 0; transition: transform 2.1s cubic-bezier(.4, 0, .2, 1), opacity .6s 1.5s; }
.is-extracting .envelope-surface { opacity: 0; transition: opacity 1.8s .2s; }
.is-open .envelope-shape, .is-open .envelope-flap { will-change: auto; }
.is-open .opening-curtain { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .sound-wave span { height: 7px; }
}
/* ================= MODALS & POPUPS ================= */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: rgba(8, 14, 11, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.modal-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    text-align: center;
    transform: scale(0.92) translateY(10px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.open .modal-card {
    transform: scale(1) translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #777;
    cursor: pointer;
}

.modal-title {
    font-family: var(--font-serif-roman);
    font-size: 20px;
    color: var(--color-navy);
    margin-bottom: 6px;
}

.modal-desc {
    font-family: var(--font-sans);
    font-size: 12px;
    color: #666;
    margin-bottom: 22px;
}

.calendar-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cal-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    background: #fdfdfd;
    color: #222;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cal-link-btn:hover {
    background: #f0f4f9;
    border-color: #b5c7e0;
    color: var(--color-navy);
}

/* Polaroid Card */
.polaroid-card {
    padding: 16px 16px 22px;
    background: #ffffff;
    max-width: 320px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.polaroid-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.polaroid-photo {
    width: 100%;
    height: 280px;
    object-fit: contain;
    background: #efe4d3;
    border-radius: 6px;
    margin-bottom: 14px;
}

.polaroid-caption {
    font-family: var(--font-serif-classic);
    font-size: 17px;
    font-style: italic;
    color: #444;
}


/* Modal containment keeps keyboard users inside the active guest action. */
[hidden] { display: none !important; }
.modal-card { max-height: calc(100svh - 40px); overflow-y: auto; }
.modal-close-btn { min-width: 44px; min-height: 44px; }
.date-container:focus-visible, .couple-names:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 4px; }
.save-date-error { max-width: 34rem; margin: 20vh auto; padding: 2rem; text-align: center; }
html.save-date-static *, html.save-date-static *::before, html.save-date-static *::after { animation: none !important; transition: none !important; }
html.save-date-static .heart-field { display: none; }
.stage-viewport.is-resetting * { transition: none !important; }