/*
 * Template "Simpel" (Save the Date) — one centered card, mobile-first.
 * Colors from the chosen variant (--inv-primary, --inv-accent, --inv-background, --inv-text).
 */

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

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(60rem 30rem at 50% -10rem, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%),
        var(--inv-background);
    color: var(--inv-text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.std-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem;
}

.std {
    max-width: 30rem; margin: 0 auto; padding: 3.5rem 1.5rem 2rem; text-align: center;
}

/* hero */
.std-eyebrow {
    margin: 0 0 1.75rem;
    font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500;
    font-size: 1.6rem; color: var(--inv-primary);
}

.std-photo {
    width: min(72vw, 15rem); aspect-ratio: 3 / 4; margin: 0 auto;
    border-radius: 999px 999px 1.25rem 1.25rem; overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--inv-primary) 55%, transparent);
    background: linear-gradient(160deg, var(--inv-primary), var(--inv-accent));
}
.std-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.std-photo--empty { display: grid; place-items: center; }
.std-photo__initials {
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 3.25rem; color: #fff; letter-spacing: .05em;
}
.std-photo__initials em { font-style: italic; font-size: .6em; margin: 0 .15em; opacity: .85; }

.std-names {
    margin: 1.75rem 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
    font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 1.05; color: var(--inv-primary);
}
.std-amp { display: block; font-style: italic; font-weight: 500; font-size: .55em; color: var(--inv-accent); margin: .2em 0; }

.std-guest { margin: 1.25rem 0 0; font-size: .875rem; opacity: .8; }
.std-guest__name { display: block; font-weight: 600; font-size: 1rem; opacity: 1; }

/* date */
.std-date { margin-top: 2.25rem; }
.std-date__row {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .9rem;
}
.std-date__side {
    padding: .45rem 0; border-block: 1px solid color-mix(in srgb, var(--inv-primary) 35%, transparent);
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
}
.std-date__day {
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
    font-size: 3.6rem; line-height: 1; color: var(--inv-primary);
}
.std-date__city { margin: .9rem 0 0; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.std-note { margin: 1.25rem auto 0; max-width: 24rem; font-size: .9rem; opacity: .85; }

/* countdown (shared component, restyled) */
.std-countdown { margin-top: 2rem; }
.std-countdown .inv-countdown__item {
    background: #fff; box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--inv-primary) 60%, transparent);
}
.std-countdown .inv-countdown__value { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--inv-primary); }

/* closing */
.std-closing { margin-top: 2.5rem; font-size: .92rem; }
.std-divider {
    display: block; width: 3rem; height: 1px; margin: 0 auto 1.25rem;
    background: var(--inv-accent);
}
.std-closing__names {
    margin-top: .75rem;
    font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.35rem; color: var(--inv-primary);
}

@media (min-width: 640px) {
    .std { padding-top: 5rem; }
}

/*
 * Motion (only with html.inv-anim; see _shared/inv.css). No cover here, so the
 * hero plays on load and the rest reveals on scroll.
 */
@keyframes std-arch-in { from { clip-path: inset(100% 0 0 0 round 999px 999px 1.25rem 1.25rem); } to { clip-path: inset(0 0 0 0 round 999px 999px 1.25rem 1.25rem); } }
@keyframes std-photo-zoom { from { transform: scale(1.2); } to { transform: none; } }
html.inv-anim .std-photo { animation: std-arch-in 1.4s cubic-bezier(.65, 0, .35, 1) .35s both; }
html.inv-anim .std-photo img, html.inv-anim .std-photo__initials { animation: std-photo-zoom 2.4s cubic-bezier(.2, .7, .2, 1) .35s both; }

/* the "&" sways a little */
@keyframes std-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
html.inv-anim .std-amp { animation: std-sway 5s ease-in-out 2.4s infinite; }

/* the lines beside the date draw outwards, the big day number pops */
html.inv-anim .std-date__side { transition: border-color 1s ease .4s; }
html.inv-anim .std-date__row:not(.is-revealed) .std-date__side { border-color: transparent; }
html.inv-anim .std-date__row .std-date__day { transition: transform .8s cubic-bezier(.2, 1.4, .4, 1) .3s; }
html.inv-anim .std-date__row:not(.is-revealed) .std-date__day { transform: scale(.6); }

/* petals: small soft shapes drifting up, very faint */
.std-petals { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.std-petals span { display: none; }
html.inv-anim .std-petals span {
    display: block; position: absolute; bottom: -2rem; left: var(--x);
    width: calc(14px * var(--s)); height: calc(18px * var(--s));
    border-radius: 80% 0 80% 0;
    background: color-mix(in srgb, var(--inv-accent) 55%, #fff);
    opacity: 0;
    animation: std-petal 14s linear var(--d) infinite;
}
@keyframes std-petal {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: .55; }
    85% { opacity: .35; }
    100% { transform: translateY(-110vh) translateX(40px) rotate(320deg); opacity: 0; }
}
.std { position: relative; z-index: 1; }