/* ==========================================================
   Rebecca's 30th Birthday Party - RSVP site
   Palette + type follow the printed invite
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500;1,600&family=Poppins:wght@300;400;500;600;700;800&family=Carattere&display=swap');

@font-face {
    font-family: 'Caviar Dreams';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/CaviarDreams.woff') format('woff');
}
@font-face {
    font-family: 'Caviar Dreams';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/CaviarDreamsItalic.woff') format('woff');
}
@font-face {
    font-family: 'Caviar Dreams';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/CaviarDreams_Bold.woff') format('woff');
}
@font-face {
    font-family: 'Caviar Dreams';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/CaviarDreams_BoldItalic.woff') format('woff');
}

:root {

    --plum: #600F87;        /* brand purple - headings, buttons, sidebar */
    --plum-dark: #45106b;   /* darker purple - hover/focus */
    --lilac: #f4accd;       /* brand pink accent */
    --lilac-panel: #fbe6ef; /* pale pink hover / highlight */
    --silver: #cbb7d6;      /* purple-tinted neutral - borders */
    --silver-light: #e9dcee;
    --cream: #fbf7fc;       /* soft lilac-white page background */
    --text: #3a1750;        /* dark purple ink - matches the invite pages' --invite-ink */
    --accent-line: #a9739c;
    --muted: #8a6f96;       /* muted helper/label text */
    --stamp-grey: #b6b3ba;  /* rough "stamp" panel background (legacy, unused) */
    --stamp-text: #3a3640;
}

* { box-sizing: border-box; }

body {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    color: var(--text);
    background-color: var(--cream);
    margin: 0;
    color-scheme: light;
}

.font-script {
    font-family: 'Caveat', cursive;
    line-height: 1.1;
}

.font-serif {
    font-family: 'Cormorant Garamond', serif;
}

.small-caps {
    font-variant: small-caps;
    letter-spacing: .12em;
}

.page-bg {
    position: relative;
    min-height: 100vh;
    background: var(--cream);
}

.site-content {
    position: relative;
    z-index: 1;
}


.hand-drawn-frame {
    position: relative;
}
.doodle-frame-svg {
    position: absolute;
    inset: -14px;
    width: calc(100% + 28px);
    height: calc(100% + 28px);
    color: var(--plum);
    opacity: .85;
    pointer-events: none;
    z-index: -1; /* sits behind the card's own text/content, above its white background */
}

/* ---- Hero / landing page ---- */
.hero-card {
    position: relative;
    max-width: 640px;
    margin: 7vh auto 6vh;
    background: #fff;
    border-radius: 18px;
    padding: 2.75rem 2.25rem 2.25rem;
    text-align: center;
    box-shadow: 0 16px 46px rgba(60, 55, 65, .12);
    z-index: 1;
}

.hero-eyebrow {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    letter-spacing: .08em;
    color: var(--accent-line);
    font-size: 1.05rem;
    margin-bottom: -.5rem;
}

/* "30" + hand-written "thirty" lockup, echoing the invite's big
   lilac numeral with a charcoal script crossing over it. */
.thirty-lockup {
    position: relative;
    display: inline-block;
    margin: .25rem auto 1.25rem;
}
.big-30 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 10rem;
    line-height: 1;
    color: var(--lilac);
    letter-spacing: -.03em;
    display: block;
}
.script-thirty {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 3.6rem;
    color: var(--plum);
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%) rotate(-4deg);
    white-space: nowrap;
    z-index: 1;
}
.script-thirty::before,
.script-thirty::after {
    content: "";
    position: absolute;
    top: 46%;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--plum);
    opacity: .75;
}
.script-thirty::before { left: -14px; }
.script-thirty::after { right: -14px; }

.balloons-deco {
    width: 92px;
    color: var(--text);
    margin: -1.75rem auto 0 3.5rem;
    position: relative;
    z-index: 1;
}
.balloons-deco svg { width: 100%; height: auto; display: block; }

/* ---- Rough-edged "stamp" panel for event details ---- */
.event-stamp {
    background: var(--stamp-grey);
    color: var(--stamp-text);
    text-align: left;
    padding: 1.6rem 1.75rem 1.5rem;
    margin: 0 auto 1.5rem;
    max-width: 480px;
    clip-path: polygon(
        2% 6%, 9% 2%, 19% 4%, 31% 1%, 44% 3%, 58% 0%, 73% 3%, 87% 1%, 96% 5%, 99% 12%,
        97% 24%, 100% 38%, 97% 52%, 99% 66%, 96% 80%, 99% 92%, 91% 96%, 79% 99%, 66% 96%,
        53% 99%, 40% 97%, 27% 100%, 14% 97%, 4% 95%, 1% 84%, 4% 70%, 0% 56%, 3% 43%, 1% 30%, 4% 17%
    );
}
.stamp-eyebrow {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    margin-bottom: .1rem;
}
.stamp-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-variant: small-caps;
    letter-spacing: .1em;
    font-size: 1.4rem;
    margin-bottom: .9rem;
}
.stamp-datetime {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    border-left: 2px solid var(--stamp-text);
    padding-left: .9rem;
    margin-bottom: .9rem;
}
.stamp-daynum {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
    margin-left: -1rem;
    padding-right: .3rem;
}
.stamp-datetime .stamp-when {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant: small-caps;
    font-size: 1.15rem;
    line-height: 1.3;
}
.stamp-venue {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.4;
    margin: 0;
}

.divider-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: .5rem 0 1.25rem;
}
.divider-line::before,
.divider-line::after {
    content: "";
    height: 1px;
    width: 60px;
    background: var(--accent-line);
    opacity: .5;
}

.btn-plum {
    background: var(--plum);
    border-color: var(--plum);
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .75rem 2.25rem;
    border-radius: 999px;
    font-size: 1.05rem;
}
.btn-plum:hover, .btn-plum:focus {
    background: var(--plum-dark);
    border-color: var(--plum-dark);
    color: #fff;
}

.btn-outline-plum {
    border: 1px solid var(--plum);
    color: var(--plum);
    border-radius: 999px;
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: .08em;
    padding: .6rem 1.75rem;
}
.btn-outline-plum:hover {
    background: var(--plum);
    color: #fff;
}

.form-card {
    position: relative;
    max-width: 640px;
    margin: 5vh auto;
    background: #fff;
    border-radius: 16px;
    padding: 2.25rem 2rem;
    box-shadow: 0 14px 42px rgba(60,55,65,.1);
    z-index: 1;
}

.form-card h1, .form-card h2 { color: var(--plum); }

.guest-block {
    border: 1px solid var(--silver-light);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background: #fff;
}
.guest-block h5 {
    color: var(--plum);
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.invitee-pick {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--silver-light);
    border-radius: 10px;
    padding: .9rem 1.1rem;
    margin-bottom: .75rem;
    background: #fff;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    /* Reset the native mobile button chrome (iOS/Android give a plain
       <button> its own platform appearance unless told not to) so the
       colours above are what actually renders, on every device. */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s, background .15s;
}
.invitee-pick:hover { border-color: var(--plum); background: var(--lilac-panel); }
.invitee-pick strong { color: inherit; }

.footer-note {
    text-align: center;
    font-size: .85rem;
    color: var(--muted);
    margin-top: 2rem;
    padding-bottom: 2rem;
}

a { color: var(--plum); }

/* ---- Admin backend (kept plain/clean, lightly branded) ---- */
.admin-body { background: #f6f1f7; }
.admin-sidebar {
    background: var(--plum);
    min-height: 100vh;
    color: #fff;
}
.admin-sidebar a {
    color: #e7e3ec;
    display: block;
    padding: .6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: .15rem;
}
.admin-sidebar a:hover, .admin-sidebar a.active {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.admin-sidebar .brand {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 2rem;
    padding: 1rem 1rem .25rem;
    display: block;
    color: #fff;
}
.stat-card {
    border-radius: 12px;
    padding: 1.25rem;
    background: #fff;
    box-shadow: 0 4px 16px rgba(60,55,65,.08);
}
.stat-card .stat-num { font-size: 2.1rem; font-weight: 700; color: var(--plum); }
.stat-card .stat-label { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 576px) {
    .big-30 { font-size: 6.5rem; }
    .script-thirty { font-size: 2.4rem; }
    .script-thirty::before, .script-thirty::after { width: 16px; }
    .script-thirty::before { left: -8px; }
    .script-thirty::after { right: -8px; }
    .balloons-deco { width: 68px; margin: -1.1rem auto 0 2.4rem; }
    .event-stamp { padding: 1.3rem 1.25rem 1.2rem; }
    .stamp-name { font-size: 1.2rem; }
    .hero-card, .form-card { margin: 3vh auto; padding: 2rem 1.25rem; }
}



:root {
    --invite-purple: #600F87;    /* fallback if the bg photo fails to load */
    --invite-pink: #f4accd;      /* "20", date dividers */
    --invite-ink: #3a1750;       /* dark heading colour used inside white form cards */
    --invite-ink-soft: #5a3d72;
    --font-caviar: 'Caviar Dreams', 'Poppins', sans-serif;
    --font-carattere: 'Carattere', 'Caveat', cursive;
}

@media (prefers-reduced-motion: reduce) {
    .page-bg-invite, .page-bg-invite *, .page-bg-invite *::before, .page-bg-invite *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

.page-bg-invite {
    position: relative;
    min-height: 100vh;
    background-color: var(--invite-purple);
    background-image: url('../img/purple-gradient-bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
}
/* iOS Safari doesn't support background-attachment:fixed well on the
   body - falls back to scroll (still covers, just doesn't parallax). */
@supports (-webkit-touch-callout: none) {
    .page-bg-invite { background-attachment: scroll; }
}

.invite-topballoons {
    margin: 0;
    line-height: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.invite-topballoons img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    animation: invite-balloons-in .9s ease-out both, invite-balloons-bob 7s ease-in-out .9s infinite;
}

.invite-logo-wrap {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 1rem;
}
.invite-logo-wrap.is-large { margin: -13vw auto 0; }
.invite-logo-wrap.is-small { margin: -9vw auto 0; }
.invite-logo-wrap img {
    filter: drop-shadow(0 12px 28px rgba(20, 0, 40, .4));
    animation: invite-fade-up 1s ease-out .15s both, invite-logo-float 6s ease-in-out 1.1s infinite;
}
.invite-logo-lg { width: min(90%, 560px); }
.invite-logo-sm { width: min(55%, 260px); }

.invite-eyebrow {
    font-family: var(--font-caviar);
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-align: center;
    font-size: clamp(.95rem, 2.6vw, 1.15rem);
    line-height: 1.6;
    margin: 1.5rem auto .25rem;
    padding: 0 1rem;
    position: relative;
    z-index: 2;
    animation: invite-fade-up .9s ease-out .35s both;
}

.invite-name {
    font-family: var(--font-carattere);
    font-weight: 400;
    color: #fff;
    text-align: center;
    font-size: clamp(2.75rem, 11vw, 4.75rem);
    line-height: 1.05;
    margin: .1rem auto 1rem;
    text-shadow: 0 8px 34px rgba(20, 0, 40, .4);
    position: relative;
    z-index: 2;
    animation: invite-fade-up .9s ease-out .5s both;
}

.invite-datebar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.6rem, 2vw, 1.1rem);
    font-family: var(--font-caviar);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    margin: .5rem auto;
    position: relative;
    z-index: 2;
    animation: invite-fade-up .9s ease-out .65s both;
}
.invite-datebar .invite-accent {
    color: var(--invite-pink);
    text-shadow: 0 0 22px rgba(244, 172, 205, .55);
    animation: invite-glow 3.2s ease-in-out 2s infinite;
}
.invite-datebar .invite-divider {
    width: 2px;
    align-self: stretch;
    background: var(--invite-pink);
    border-radius: 1px;
    opacity: .9;
}

.invite-time {
    font-family: var(--font-caviar);
    font-style: italic;
    font-weight: 400;
    color: #fff;
    text-align: center;
    font-size: clamp(.9rem, 2.6vw, 1.05rem);
    opacity: .92;
    margin: 0 auto 1.6rem;
    position: relative;
    z-index: 2;
    animation: invite-fade-up .9s ease-out .75s both;
}

.invite-detail {
    font-family: var(--font-caviar);
    font-weight: 700;
    color: #fff;
    text-align: center;
    font-size: clamp(1.05rem, 3vw, 1.3rem);
    letter-spacing: .02em;
    margin: .35rem auto;
    padding: 0 1rem;
    position: relative;
    z-index: 2;
    animation: invite-fade-up .9s ease-out .85s both;
}
.invite-detail--rsvp {
    font-size: clamp(.9rem, 2.6vw, 1.1rem);
    opacity: .92;
    animation-delay: .95s;
}

.invite-extra {
    font-family: var(--font-caviar);
    color: #fff;
    opacity: .88;
    text-align: center;
    font-size: .95rem;
    letter-spacing: .02em;
    max-width: 540px;
    margin: 1.25rem auto;
    padding: 0 1.25rem;
    position: relative;
    z-index: 2;
    animation: invite-fade-up .9s ease-out 1.05s both;
}

.invite-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem;
    margin: 1.75rem auto 1rem;
    position: relative;
    z-index: 2;
    animation: invite-fade-up .9s ease-out 1.15s both;
}

/* ---- Travel information block on the landing page, sitting between
   the intro blurb and the RSVP/decline buttons. Plain-on-purple like
   the rest of the hero, rather than a card, to match the surrounding
   eyebrow/detail/extra text treatment. ---- */
.invite-travel {
    max-width: 620px;
    margin: 1.5rem auto 0;
    padding: 0 1.25rem;
    position: relative;
    z-index: 2;
    animation: invite-fade-up .9s ease-out 1.1s both;
}
.invite-travel-heading {
    font-family: var(--font-carattere);
    color: #fff;
    text-align: center;
    font-size: clamp(1.7rem, 5vw, 2.2rem);
    margin: 0 0 1.1rem;
}
.invite-travel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    text-align: left;
}
.invite-travel-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}
.invite-travel-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 172, 205, .16);
    border: 1px solid rgba(244, 172, 205, .55);
    color: var(--invite-pink);
    font-size: 1.1rem;
}
.invite-travel-item h3 {
    font-family: var(--font-caviar);
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
    letter-spacing: .02em;
    margin: .1rem 0 .3rem;
}
.invite-travel-item p {
    font-family: var(--font-caviar);
    color: rgba(255, 255, 255, .85);
    font-size: .88rem;
    line-height: 1.5;
    margin: 0;
}
.invite-travel-directions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: 1.3rem;
    font-family: var(--font-caviar);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .04em;
    color: var(--invite-pink);
    text-decoration: underline;
}
.invite-travel-directions:hover { color: #fff; }

@media (max-width: 700px) {
    .invite-travel-grid { grid-template-columns: 1fr; gap: 1.1rem; }
}

.btn-invite {
    display: inline-block;
    position: relative;
    overflow: hidden;
    font-family: var(--font-caviar);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .08em;
    font-size: 1.05rem;
    color: var(--invite-ink);
    background: linear-gradient(135deg, #ffffff, var(--invite-pink));
    border: none;
    border-radius: 999px;
    padding: .95rem 2.5rem;
    box-shadow: 0 14px 34px rgba(20, 0, 40, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-invite::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-20deg);
    animation: invite-sheen 3.4s ease-in-out .5s infinite;
}
.btn-invite:hover, .btn-invite:focus {
    color: var(--invite-ink);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 20px 46px rgba(20, 0, 40, .45);
}
.btn-invite-outline {
    display: inline-block;
    font-family: var(--font-caviar);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .08em;
    font-size: 1.05rem;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 999px;
    padding: .9rem 2.3rem;
    transition: transform .2s ease, background .2s ease;
}
.btn-invite-outline:hover, .btn-invite-outline:focus {
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,.18);
    transform: translateY(-3px);
}

.invite-footer-note {
    font-family: var(--font-caviar);
    text-align: center;
    color: #fff;
    opacity: .8;
    font-size: .85rem;
    margin: 2rem auto 2.5rem;
    padding: 0 1.25rem;
    position: relative;
    z-index: 2;
}
.invite-footer-note a { color: #fff; text-decoration: underline; }

.invite-hero { position: relative; }

/* Sparkle decoration - a handful of twinkling dots for extra glam.
   Purely decorative (aria-hidden in the markup). */
.invite-sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.invite-sparkles span {
    position: absolute;
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px 2px rgba(255,255,255,.8);
    animation: invite-twinkle 3.6s ease-in-out infinite;
}
.invite-sparkles span:nth-child(1) { top: 8%;  left: 10%; animation-delay: .2s; }
.invite-sparkles span:nth-child(2) { top: 18%; left: 85%; animation-delay: 1.1s; }
.invite-sparkles span:nth-child(3) { top: 40%; left: 6%;  animation-delay: 2s; }
.invite-sparkles span:nth-child(4) { top: 55%; left: 92%; animation-delay: .7s; }
.invite-sparkles span:nth-child(5) { top: 75%; left: 20%; animation-delay: 2.6s; }
.invite-sparkles span:nth-child(6) { top: 85%; left: 78%; animation-delay: 1.6s; }

/* ---- Frosted white "glass" card for RSVP/decline forms ----
   Full glass-on-purple works for the poster hero, but dense forms
   (guest blocks, checkboxes, selects) stay far more usable as a
   solid light card floating on the purple backdrop, so this is an
   opaque near-white card rather than a see-through one. */
.invite-card {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 2.5vh auto 6vh;
    background: rgba(255, 255, 255, .97);
    border-radius: 26px;
    padding: 2.5rem 2rem;
    box-shadow: 0 30px 80px rgba(20, 0, 40, .45);
    animation: invite-card-in .6s ease-out both;
}
.invite-card h1, .invite-card h2 {
    font-family: var(--font-carattere);
    color: var(--invite-ink);
    font-size: clamp(2rem, 6vw, 2.75rem);
}
.invite-card .invite-card-eyebrow {
    font-family: var(--font-caviar);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .85rem;
    color: var(--invite-ink-soft);
}
.invite-card p { color: #4a3a5a; }
.invite-card .guest-block { border-color: #ecdcf0; background: #fdfaff; }
.invite-card .guest-block h5 { color: var(--invite-ink); font-family: var(--font-caviar); }
.invite-card .invitee-pick { border-color: #ecdcf0; color: var(--invite-ink); }
.invite-card .invitee-pick:hover { border-color: var(--invite-pink); background: #fdf3f8; }

.btn-invite-solid {
    font-family: var(--font-caviar);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .06em;
    color: #fff;
    background: linear-gradient(135deg, var(--invite-purple), #8d2fae);
    border: none;
    border-radius: 999px;
    padding: .85rem 1.5rem;
    box-shadow: 0 12px 28px rgba(96, 15, 135, .35);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-invite-solid:hover, .btn-invite-solid:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(96, 15, 135, .45);
}

.btn-invite-outline-card {
    display: inline-block;
    font-family: var(--font-caviar);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .05em;
    color: var(--invite-ink);
    background: transparent;
    border: 2px solid var(--invite-ink-soft);
    border-radius: 999px;
    padding: .7rem 1.6rem;
    transition: transform .2s ease, background .2s ease;
}
.btn-invite-outline-card:hover, .btn-invite-outline-card:focus {
    color: var(--invite-ink);
    background: #f3e9f7;
    transform: translateY(-2px);
}

@keyframes invite-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes invite-balloons-in {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes invite-balloons-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes invite-logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@keyframes invite-glow {
    0%, 100% { text-shadow: 0 0 14px rgba(244, 172, 205, .4); }
    50%      { text-shadow: 0 0 30px rgba(244, 172, 205, .85); }
}
@keyframes invite-sheen {
    0%   { left: -60%; }
    100% { left: 130%; }
}
@keyframes invite-twinkle {
    0%, 100% { opacity: 0; transform: scale(.6); }
    50%      { opacity: .9; transform: scale(1.15); }
}
@keyframes invite-card-in {
    from { opacity: 0; transform: translateY(24px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 576px) {
    .invite-logo-wrap.is-large { margin-top: -18vw; }
    .invite-card { padding: 1.85rem 1.35rem; border-radius: 20px; margin: 3vh auto 5vh; }
}