/*
 * Base styles of the shared x-inv components. Every template may override them.
 * Colors come from the template's color variant as CSS variables (set by <x-inv.head>):
 *   --inv-primary, --inv-accent, --inv-background, --inv-text (+ any other color names)
 */

:root {
    --inv-primary: #7d8f69;
    --inv-accent: #c9a96e;
    --inv-background: #ffffff;
    --inv-text: #333333;
    --inv-radius: 12px;
}

[x-cloak] { display: none !important; }

/* Before "Buka undangan" is pressed the page does not scroll */
html:not(.inv-opened) body.inv-locked { overflow: hidden; }

.inv-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .75rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--inv-primary); color: #fff; font: inherit; text-decoration: none;
}
.inv-button--outline { background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1px var(--inv-primary); }
.inv-button:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 2px; }

/* countdown */
.inv-countdown { display: flex; justify-content: center; gap: .75rem; }
.inv-countdown__item { min-width: 4rem; padding: .75rem .5rem; border-radius: var(--inv-radius); background: color-mix(in srgb, var(--inv-primary) 12%, transparent); text-align: center; }
.inv-countdown__value { display: block; font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.inv-countdown__label { display: block; font-size: .75rem; opacity: .75; }
.inv-countdown__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }

/* maps */
.inv-maps__frame { width: 100%; height: 220px; border: 0; border-radius: var(--inv-radius); margin-top: .75rem; }

/* gallery */
.inv-gallery { display: grid; grid-template-columns: repeat(var(--inv-gallery-columns, 2), 1fr); gap: .5rem; }
.inv-gallery__item { padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--inv-radius) / 2); }
.inv-gallery__item { position: relative; }
.inv-gallery__item img, .inv-gallery__item video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* x-inv.gallery variant="slider": thumbnails with ‹ › on top, one large photo below (cross-fade) */
.inv-gallery-slider { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.inv-gallery-slider__strip { display: flex; align-items: center; gap: .35rem; }
.inv-gallery-slider__thumbs { display: flex; gap: .45rem; flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: .25rem .1rem; }
.inv-gallery-slider__thumbs::-webkit-scrollbar { display: none; }
.inv-gallery-slider__thumb {
    flex: 0 0 auto; width: 4.2rem; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: .5rem; overflow: hidden;
    background: none; cursor: pointer; opacity: .55; scroll-snap-align: center; transition: opacity .3s ease, border-color .3s ease, transform .18s ease;
}
.inv-gallery-slider__thumb.is-active { opacity: 1; border-color: var(--inv-primary); }
.inv-gallery-slider__thumb img, .inv-gallery-slider__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-gallery-slider__arrow {
    flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0 0 .15rem; border: 0; border-radius: 999px; cursor: pointer;
    background: color-mix(in srgb, var(--inv-primary) 85%, transparent); color: #fff; font-size: 1.3rem; line-height: 1;
}
.inv-gallery-slider__stage { position: relative; display: grid; aspect-ratio: 4 / 5; border-radius: calc(var(--inv-radius) / 1.5); overflow: hidden; box-shadow: 0 18px 40px -22px rgb(0 0 0 / .45); }
.inv-gallery-slider__slide {
    grid-area: 1 / 1; padding: 0; border: 0; background: none; cursor: zoom-in; opacity: 0; visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s, transform 1.2s cubic-bezier(.2, .7, .2, 1); transform: scale(1.04);
}
.inv-gallery-slider__slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.inv-gallery-slider__slide img, .inv-gallery-slider__slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-gallery-slider__count {
    position: absolute; right: .6rem; bottom: .6rem; margin: 0; padding: .15rem .55rem; border-radius: 999px;
    background: rgb(0 0 0 / .45); color: #fff; font: 600 .7rem/1.6 system-ui, sans-serif; letter-spacing: .05em; pointer-events: none;
}
.inv-gallery__play {
    position: absolute; inset: 50% auto auto 50%; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
    display: grid; place-items: center; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-size: 1rem;
}
/* page behind the lightbox does not scroll (iOS included) */
html.inv-no-scroll, html.inv-no-scroll body { overflow: hidden; }
/* lightbox: teleported to <body>, always above everything (menu, music, cover) and always full screen */
html body .inv-lightbox {
    position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
    padding: calc(3.75rem + env(safe-area-inset-top)) .5rem calc(3.75rem + env(safe-area-inset-bottom));
    background: rgb(0 0 0 / .92); overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
}
.inv-lightbox img, .inv-lightbox video {
    display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    border-radius: 4px; box-shadow: 0 10px 40px rgb(0 0 0 / .5);
}
/* round dark buttons: visible on light and dark photos alike */
.inv-lightbox__button {
    position: absolute; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
    border: 1px solid rgb(255 255 255 / .25); border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff;
    font: 400 1.6rem/1 system-ui, sans-serif; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.inv-lightbox__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.inv-lightbox__close { top: calc(.6rem + env(safe-area-inset-top)); right: .6rem; font-size: 1.15rem; }
.inv-lightbox__counter {
    position: absolute; top: calc(1.35rem + env(safe-area-inset-top)); left: 1rem; margin: 0; padding: .3rem .6rem; border-radius: 999px;
    background: rgb(0 0 0 / .45); color: #fff; font: 500 .8rem/1 system-ui, sans-serif; letter-spacing: .08em;
}
.inv-lightbox__prev, .inv-lightbox__next { top: 50%; transform: translateY(-50%); }
.inv-lightbox__prev { left: .5rem; }
.inv-lightbox__next { right: .5rem; }

/* forms (rsvp, wishes) */
.inv-form { display: grid; gap: .75rem; text-align: left; }
.inv-form label { display: grid; gap: .25rem; font-size: .875rem; }
.inv-form input:not([type=radio]):not([type=checkbox]), .inv-form select, .inv-form textarea {
    width: 100%; padding: .625rem .75rem; border: 1px solid color-mix(in srgb, var(--inv-text) 25%, transparent);
    border-radius: calc(var(--inv-radius) / 2); background: #fff; color: #222; font: inherit; box-sizing: border-box;
}
.inv-form input[type=radio], .inv-form input[type=checkbox] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--inv-primary); }
.inv-form__choices { border: 0; padding: 0; margin: 0; }
.inv-form__choices legend { margin-bottom: .375rem; font-size: .875rem; }
.inv-form__choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.inv-form__choices label { display: inline-flex; align-items: center; gap: .375rem; }
.inv-form__notice { padding: .75rem; border-radius: calc(var(--inv-radius) / 2); background: color-mix(in srgb, var(--inv-accent) 18%, transparent); font-size: .875rem; }
.inv-form__error { padding: .75rem; border-radius: calc(var(--inv-radius) / 2); background: #fdecea; color: #a12a1f; font-size: .875rem; }
.inv-form__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inv-button:disabled { opacity: .6; cursor: wait; }

/* wishes */
.inv-wishes__list { display: grid; gap: .6rem; margin-top: 1rem; text-align: left; }
/* about three wishes in view, the rest scrolls inside the box (newest first) */
.inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    max-height: var(--inv-wishes-height, 21rem); overflow-y: auto; overscroll-behavior: contain; padding-right: .25rem;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--inv-primary) 45%, transparent) transparent;
}
.inv-wishes__pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .75rem; }
.inv-wishes__page-button {
    width: 2.1rem; height: 2.1rem; border-radius: 999px; cursor: pointer; font-size: 1.1rem; line-height: 1;
    border: 1px solid color-mix(in srgb, var(--inv-primary) 40%, transparent); background: transparent; color: var(--inv-primary);
}
.inv-wishes__page-button:disabled { opacity: .35; cursor: default; }
.inv-wishes__page { min-width: 3.5rem; text-align: center; font-size: .8rem; opacity: .8; }
.inv-wishes__empty { opacity: .7; font-size: .875rem; }
.inv-wish { padding: .7rem .85rem; border-radius: var(--inv-radius); background: color-mix(in srgb, var(--inv-primary) 8%, transparent); font-size: .9rem; line-height: 1.45; }
.inv-wish__name { margin: 0; font-weight: 600; font-size: .92rem; }
.inv-wish__message { margin: .2rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.inv-wish__time { margin: .3rem 0 0; font-size: .7rem; opacity: .65; }
.inv-wishes__more { justify-self: center; }
.inv-wish__reply { margin-top: .6rem; padding: .55rem .75rem; border-left: 2px solid var(--inv-accent); border-radius: 0 calc(var(--inv-radius) / 2) calc(var(--inv-radius) / 2) 0; background: color-mix(in srgb, var(--inv-accent) 12%, transparent); }
.inv-wish__reply-label { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .04em; opacity: .75; }
.inv-wish__reply-text { margin: .15rem 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: .9rem; }

/* gift */
/* the accounts' box changes nothing unless a template makes it a grid (e.g. two cards per row) */
.inv-gift__accounts { display: contents; }
.inv-gift__account { padding: 1rem; border-radius: var(--inv-radius); background: color-mix(in srgb, var(--inv-primary) 8%, transparent); }
.inv-gift__account + .inv-gift__account { margin-top: .75rem; }
.inv-gift__number { font-size: 1.25rem; font-weight: 600; letter-spacing: .05em; }
.inv-gift__logo { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; padding: .3rem .65rem; border-radius: .5rem; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .06); vertical-align: middle; }
.inv-gift__logo img { display: block; height: 100%; width: auto; max-width: 7rem; object-fit: contain; }
.inv-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* music player */
.inv-music { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
/* music and auto scroll start after "Buka undangan", so they stay out of the cover until then */
html:not(.inv-opened) body.inv-locked .inv-music { visibility: hidden; }
/* at the very end of the page the pill fades out, so it never covers the closing lines */
.inv-autoscroll--away { opacity: 0; pointer-events: none; transform: translateY(6px); }
.inv-music .inv-autoscroll { transition: opacity .3s ease, transform .3s ease; }
.inv-autoscroll {
    display: inline-flex; align-items: center; gap: .3rem; height: 1.9rem; padding: 0 .7rem; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--inv-primary) 35%, transparent); border-radius: 999px;
    background: color-mix(in srgb, #fff 88%, transparent); color: var(--inv-primary);
    font: 600 .7rem/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .02em;
    box-shadow: 0 3px 10px rgb(0 0 0 / .15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.inv-autoscroll--running { background: var(--inv-primary); color: #fff; border-color: transparent; }
.inv-music__button {
    width: 3rem; height: 3rem; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--inv-primary); color: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / .2);
}
.inv-music__button { display: grid; place-items: center; }
.inv-music__icon { display: block; }
/* playing: three bars moving like an equalizer */
.inv-music__bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.inv-music__bars i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: inv-eq .9s ease-in-out infinite; }
.inv-music__bars i:nth-child(2) { animation-delay: -.3s; }
.inv-music__bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes inv-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .inv-music__bars i { animation: none; transform: scaleY(.7); } }

/* branding */
.inv-branding { padding: 1.5rem 1rem; text-align: center; font-size: .75rem; opacity: .7; }
/* room at the bottom so the fixed music button never covers the last line */
.inv-music__space { height: calc(4.5rem + env(safe-area-inset-bottom)); }
.inv-branding a { color: inherit; }

/* bottom menu (x-inv.nav): a floating pill; templates restyle it with the variables */
.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-background) 88%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 70%, transparent);
    --inv-nav-active: var(--inv-primary);
    position: fixed; left: 50%; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 35;
    display: flex; gap: .15rem; max-width: calc(100vw - 1.5rem); padding: .35rem;
    transform: translateX(-50%); border-radius: 999px;
    background: var(--inv-nav-bg); color: var(--inv-nav-text);
    border: 1px solid color-mix(in srgb, var(--inv-text) 10%, transparent);
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / .35);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.inv-nav__item {
    display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 2.9rem;
    padding: .4rem .45rem .3rem; border-radius: 999px; color: inherit; text-decoration: none;
    font-size: .62rem; line-height: 1; transition: background .25s ease, color .25s ease;
}
.inv-nav__icon { width: 1.25rem; height: 1.25rem; }
.inv-nav__item.is-active { background: var(--inv-nav-active); color: #fff; }
.inv-nav--enter { transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.inv-nav--from { transform: translate(-50%, 150%); opacity: 0; }
@media (max-width: 359px) { .inv-nav__label { display: none; } .inv-nav__item { min-width: 2.5rem; padding: .55rem; } }
/* icons only: a white bar, the active icon in a dark square that rises a little */
.inv-nav--icons { gap: .35rem; padding: .45rem .6rem; border-radius: 1.1rem; overflow: visible; }
.inv-nav--icons .inv-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inv-nav--icons .inv-nav__item { min-width: 2.75rem; padding: .6rem; border-radius: .85rem; transition: transform .3s ease, background .25s ease, color .25s ease; }
.inv-nav--icons .inv-nav__icon { width: 1.35rem; height: 1.35rem; }
.inv-nav--icons .inv-nav__item.is-active { transform: translateY(-.45rem); box-shadow: 0 8px 18px -6px rgb(0 0 0 / .45); }

/* x-inv.checkin-qr variant="tab": a tab on the right edge + a sheet with the QR */
.inv-qr-tab {
    position: fixed; right: 0; top: 55%; z-index: 36; display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: .75rem .45rem; border: 1px solid color-mix(in srgb, var(--inv-text) 12%, transparent); border-right: 0;
    border-radius: .75rem 0 0 .75rem; background: color-mix(in srgb, #fff 94%, transparent); color: var(--inv-text);
    box-shadow: -4px 6px 18px -8px rgb(0 0 0 / .35); cursor: pointer; font: 600 .68rem/1 system-ui, sans-serif; letter-spacing: .14em;
}
.inv-qr-tab span { writing-mode: vertical-rl; }
.inv-qr-sheet { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / .55); }
.inv-qr-sheet__card { position: relative; margin: 0; width: min(20rem, 100%); }
.inv-qr-sheet__close { position: absolute; top: .5rem; right: .5rem; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: rgb(0 0 0 / .06); cursor: pointer; }

/* x-inv.to-top */
.inv-to-top {
    position: fixed; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 36; display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem; border: 0; border-radius: .8rem; cursor: pointer;
    background: color-mix(in srgb, var(--inv-text) 18%, var(--inv-background)); color: var(--inv-text); box-shadow: 0 4px 12px rgb(0 0 0 / .18);
}
body:has(.inv-nav) .inv-to-top { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
/* with a menu the music buttons sit above it, and the page ends above it */
body:has(.inv-nav) .inv-music { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
body:has(.inv-nav) .inv-branding { padding-bottom: 6rem; }

/* free trial ribbon (x-inv.branding): always on top, cannot be hidden by a template */
.inv-trial {
    position: fixed !important; z-index: 2147483000 !important; inset: 0 0 auto 0 !important;
    display: block !important; visibility: visible !important; opacity: 1 !important;
    padding: .4rem .75rem; text-align: center;
    font: 600 .72rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em;
    color: #fff; background: rgba(43, 91, 224, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.inv-trial a { color: inherit; text-decoration: underline; }

/*
 * Motion (only with html.inv-anim, set by <x-inv.head> when "reduce motion" is off).
 * Scroll reveal: data-reveal / data-reveal-children / data-reveal-sections, see invitation.js.
 * Entrance on load: class "inv-enter" with --enter-delay (e.g. on the cover text).
 */
html.inv-anim [data-reveal] {
    opacity: 0;
    transition:
        opacity .9s cubic-bezier(.2, .7, .2, 1),
        transform 1s cubic-bezier(.2, .7, .2, 1),
        clip-path 1.1s cubic-bezier(.65, 0, .35, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
html.inv-anim [data-reveal="up"], html.inv-anim [data-reveal=""] { transform: translateY(26px); }
html.inv-anim [data-reveal="zoom"] { transform: scale(.92); }
html.inv-anim [data-reveal="left"] { transform: translateX(-32px); }
html.inv-anim [data-reveal="right"] { transform: translateX(32px); }
html.inv-anim [data-reveal="draw"] { opacity: 1; transform: scaleX(0); }
/* clipped effects never start fully hidden: Chrome does not report a fully clipped element as visible, so it would never reveal */
html.inv-anim [data-reveal="wipe"] { opacity: 1; clip-path: inset(92% 0 0 0); }
html.inv-anim [data-reveal].is-revealed { opacity: 1; transform: none; }
/* the end state reaches far outside the box, so ornaments that stick out are not cut off */
html.inv-anim [data-reveal="wipe"].is-revealed { clip-path: inset(-100vh -100vw -100vh -100vw); }
/* elements sliding in from the side must never make the page scroll sideways on a phone */
html.inv-anim body { overflow-x: clip; }
/* more styles, so templates do not all move alike (pick one with <main data-reveal-sections="…">) */
html.inv-anim [data-reveal="blur"] { filter: blur(10px); transform: translateY(14px) scale(.985); transition-property: opacity, transform, filter; }
html.inv-anim [data-reveal="blur"].is-revealed { filter: none; }
html.inv-anim [data-reveal="rise"] { transform: translateY(64px) scale(.96); transition-duration: 1.15s, 1.3s; transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
html.inv-anim [data-reveal="tilt"] { transform: perspective(900px) rotateX(16deg) translateY(30px); transform-origin: 50% 100%; }
html.inv-anim [data-reveal="flip"] { transform: perspective(900px) rotateY(-24deg) translateX(-12px); transform-origin: 0 50%; }
html.inv-anim [data-reveal="pop"] { transform: scale(.82); transition-timing-function: ease-out, cubic-bezier(.34, 1.56, .64, 1); }
html.inv-anim [data-reveal="curtain"] { opacity: 1; clip-path: inset(0 42% 0 42%); }
html.inv-anim [data-reveal="curtain"].is-revealed { clip-path: inset(-100vh -100vw -100vh -100vw); }

/* data-parallax: drifts a little slower than the page while it passes (browsers with scroll-driven animations) */
@supports (animation-timeline: view()) {
    html.inv-anim [data-parallax] { animation: inv-parallax linear both; animation-timeline: view(); }
    @keyframes inv-parallax { from { transform: translateY(var(--inv-parallax, 40px)); } to { transform: translateY(calc(var(--inv-parallax, 40px) * -1)); } }
}

/* tap feedback on buttons and photos: a small press, so the page feels alive */
html.inv-anim .inv-button, html.inv-anim .inv-gallery__item, html.inv-anim .inv-gallery-slider__thumb { transition: transform .18s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; }
html.inv-anim .inv-button:active, html.inv-anim .inv-gallery__item:active, html.inv-anim .inv-gallery-slider__thumb:active { transform: scale(.96); }

@keyframes inv-enter {
    from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
}
html.inv-anim .inv-enter { animation: inv-enter 1.1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--enter-delay, 0s); }

/* "Buka undangan": a soft glow that breathes, so guests know where to tap */
@keyframes inv-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--inv-accent) 55%, transparent); }
    70% { box-shadow: 0 0 0 14px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
html.inv-anim .inv-open-button { animation: inv-pulse 2.4s ease-out 1.6s infinite; }
/* both: appear first, then breathe */
html.inv-anim .inv-open-button.inv-enter {
    animation:
        inv-enter 1.1s cubic-bezier(.2, .7, .2, 1) var(--enter-delay, 0s) both,
        inv-pulse 2.4s ease-out calc(var(--enter-delay, 0s) + 1.4s) infinite;
}
.inv-button { transition: transform .2s ease, filter .2s ease, background-color .2s ease; }
.inv-button:hover { filter: brightness(1.06); }
.inv-button:active { transform: scale(.97); }

/* gallery: photos zoom gently on hover; the grid fills in one by one */
.inv-gallery__item img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.inv-gallery__item:hover img { transform: scale(1.06); }

/* countdown boxes lift a little */
.inv-countdown__item { transition: transform .3s ease; }
.inv-countdown__item:hover { transform: translateY(-3px); }

/* guest check-in QR (<x-inv.checkin-qr>) */
.inv-checkin { max-width: 20rem; margin: 2rem auto; padding: 1.5rem; border-radius: var(--inv-radius); background: #fff; text-align: center; box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--inv-primary) 50%, transparent); }
.inv-checkin__title { margin: 0; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; color: var(--inv-primary); }
.inv-checkin__text { margin: .35rem 0 1rem; font-size: .85rem; opacity: .8; }
.inv-checkin__code { display: grid; place-items: center; width: 13rem; height: 13rem; margin: 0 auto; padding: .5rem; border-radius: .75rem; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 20%, transparent); }
.inv-checkin__code svg { width: 100%; height: 100%; }
.inv-checkin__loading { font-size: .75rem; opacity: .6; }
.inv-checkin__name { margin: .9rem 0 0; font-weight: 600; }

/* x-inv.calendar: the wedding month with the day circled */
.inv-cal {
    --inv-cal-bg: color-mix(in srgb, #fff 82%, var(--inv-background));
    --inv-cal-text: var(--inv-text);
    --inv-cal-mark: var(--inv-accent);
    width: min(100%, 22rem); margin: 0 auto; padding: 1.2rem 1.1rem 1rem; border-radius: calc(var(--inv-radius) / 1.5);
    background: var(--inv-cal-bg); color: var(--inv-cal-text); box-shadow: 0 16px 36px -24px rgb(0 0 0 / .45);
}
.inv-cal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid color-mix(in srgb, var(--inv-cal-text) 18%, transparent); }
.inv-cal__month { margin: 0; font-family: var(--inv-font-display, inherit); font-size: 1.6rem; line-height: 1.1; }
.inv-cal__year { margin: 0; font-weight: 700; letter-spacing: .14em; font-size: .8rem; opacity: .8; }
.inv-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem .1rem; margin-top: .75rem; text-align: center; font-variant-numeric: tabular-nums; }
.inv-cal__dow { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.inv-cal__dow:first-child, .inv-cal__grid > :nth-child(7n + 1) { color: var(--inv-cal-mark); }
.inv-cal__day { position: relative; display: grid; place-items: center; height: 2rem; font-size: .95rem; }
.inv-cal__day--mark { color: var(--inv-cal-mark); font-weight: 700; }
.inv-cal__circle { position: absolute; inset: -.15rem -.05rem; width: calc(100% + .1rem); height: calc(100% + .3rem); color: var(--inv-cal-mark); }
html.inv-anim .inv-cal__circle path { stroke-dasharray: 130; stroke-dashoffset: 130; }
html.inv-anim .inv-cal.is-revealed .inv-cal__circle path { animation: inv-cal-draw 1.2s .5s ease-out forwards; }
@keyframes inv-cal-draw { to { stroke-dashoffset: 0; } }
.inv-cal__note { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px dashed color-mix(in srgb, var(--inv-cal-text) 22%, transparent); text-align: center; font-size: .9rem; }

/* x-inv.photo-marquee: gallery photos sliding sideways */
.inv-marquee { --inv-marquee-height: 9rem; overflow: hidden; width: 100%; }
.inv-marquee__track { display: flex; gap: .6rem; width: max-content; }
.inv-marquee__track img { height: var(--inv-marquee-height); width: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .5rem; flex: 0 0 auto; }
html.inv-anim .inv-marquee__track { animation: inv-marquee calc(var(--inv-marquee-count, 6) * 6s) linear infinite; }
html.inv-anim .inv-marquee--reverse .inv-marquee__track { animation-direction: reverse; }
@keyframes inv-marquee { to { transform: translateX(calc(-50% - .3rem)); } }

/* x-inv.ambient: drifting particles above the page, never catching taps */
.inv-ambient {
    --inv-ambient-1: var(--inv-accent);
    --inv-ambient-2: var(--inv-primary);
    position: fixed; inset: 0; width: 100%; height: 100%; z-index: 35; pointer-events: none; display: none;
}
html.inv-anim .inv-ambient { display: block; }