/*
 * Aura Gradien (Pernikahan) — a soft colour aura drifting slowly behind everything (--inv-aura1..3), frosted glass
 * cards with round corners, photos with soft corners and a coloured glow; Outfit for text, the client's heading
 * font for names and titles. Phones: one column. ≥ 900px: two columns of cards, the wide ones across.
 */

:root {
    --inv-primary: #2b2440;
    --inv-accent: #8a6fd1;
    --inv-background: #fbf6f4;
    --inv-text: #2b2440;
    --inv-aura1: #ffc4a8;
    --inv-aura2: #d6c2ff;
    --inv-aura3: #b9e0ff;
    --inv-radius: 18px;
    --ag-serif: var(--inv-font-heading, 'Marcellus'), Georgia, serif;
    --ag-sans: 'Outfit', system-ui, sans-serif;
    --ag-soft: color-mix(in srgb, var(--inv-text) 70%, transparent);
    --ag-glass: color-mix(in srgb, var(--inv-background) 52%, transparent);
    --ag-edge: color-mix(in srgb, #fff 55%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ag-body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--inv-background); color: var(--inv-text); font: 300 1rem/1.7 var(--ag-sans); -webkit-font-smoothing: antialiased; }
p, h1, h2, h3, blockquote { margin: 0; }
.ag-preview { position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding: .35rem 1rem; text-align: center; background: rgb(0 0 0 / .65); color: #fff; font-size: .72rem; }

/* ---------- the aura: three blurred colour fields drifting ---------- */
.ag-aura { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--inv-background); }
.ag-aura i { position: absolute; width: 75vmax; height: 75vmax; border-radius: 50%; filter: blur(70px); opacity: .85; }
.ag-aura i:nth-child(1) { background: var(--inv-aura1); left: -30vmax; top: -25vmax; }
.ag-aura i:nth-child(2) { background: var(--inv-aura2); right: -32vmax; top: 15vh; }
.ag-aura i:nth-child(3) { background: var(--inv-aura3); left: -10vmax; bottom: -40vmax; }
html.inv-anim .ag-aura i:nth-child(1) { animation: ag-drift-a 22s ease-in-out infinite alternate; }
html.inv-anim .ag-aura i:nth-child(2) { animation: ag-drift-b 26s ease-in-out infinite alternate; }
html.inv-anim .ag-aura i:nth-child(3) { animation: ag-drift-c 30s ease-in-out infinite alternate; }
@keyframes ag-drift-a { to { transform: translate(18vmax, 22vmax) scale(1.15); } }
@keyframes ag-drift-b { to { transform: translate(-20vmax, 18vmax) scale(.9); } }
@keyframes ag-drift-c { to { transform: translate(22vmax, -16vmax) scale(1.1); } }
/* a fine grain keeps the colour from looking flat */
.ag-aura::after { content: ''; position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- type and small parts ---------- */
.ag-small { font: 500 .66rem/1.5 var(--ag-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--inv-accent); }
.ag-title { font: 400 clamp(1.6rem, 7vw, 2rem)/1.2 var(--ag-serif); }
.ag-names { font: 400 clamp(2.4rem, 11vw, 3.2rem)/1.1 var(--ag-serif); }
.ag-amp { color: var(--inv-accent); font-style: italic; }
.ag-text { color: var(--ag-soft); font-size: .93rem; }
.ag-arabic { font: 400 1.5rem/1.9 'Amiri', serif; color: var(--inv-accent); }
.ag-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .95rem; border-radius: 999px; background: var(--inv-text); color: var(--inv-background); font: 500 .74rem/1.3 var(--ag-sans); letter-spacing: .04em; text-decoration: none; }
.ag-pill--soft { background: color-mix(in srgb, var(--inv-accent) 16%, transparent); color: var(--inv-text); }
.ag-pill--glass { background: var(--ag-glass); color: var(--inv-text); box-shadow: inset 0 0 0 1px var(--ag-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ag-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.ag-quote { padding: 1.1rem 1.2rem; border-radius: 18px; background: color-mix(in srgb, var(--inv-accent) 10%, transparent); }
.ag-quote p { font: italic 400 1.02rem/1.65 var(--ag-serif); }
.ag-quote cite { display: block; margin-top: .6rem; font: 500 .62rem/1.5 var(--ag-sans); letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--inv-accent); }

/* buttons: solid round, the shared ones too */
.ag-button, .ag-body .inv-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--inv-text); color: var(--inv-background); font: 500 .85rem/1.2 var(--ag-sans); letter-spacing: .03em; text-decoration: none;
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--inv-accent) 80%, transparent);
}
.ag-body .inv-button--outline { background: var(--ag-glass); color: var(--inv-text); box-shadow: inset 0 0 0 1px var(--ag-edge); }

/* photos: soft corners and a glow of the aura */
.ag-photo { position: relative; width: 100%; }
.ag-photo::before { content: ''; position: absolute; inset: 8% 6% -6%; border-radius: 30px; background: linear-gradient(135deg, var(--inv-aura1), var(--inv-aura2), var(--inv-aura3)); filter: blur(22px); opacity: .9; z-index: 0; }
.ag-photo img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; }
.ag-photo--wide img { aspect-ratio: 16 / 10; }

/* ---------- the glass cards ---------- */
.ag-main { position: relative; z-index: 1; display: grid; gap: 1.1rem; max-width: 30rem; margin: 0 auto; padding: 1.4rem 1rem 7rem; }
.ag-card, .ag-glass {
    position: relative; display: grid; justify-items: center; gap: .7rem; padding: 2rem 1.4rem; border-radius: 30px; text-align: center;
    background: var(--ag-glass); box-shadow: inset 0 0 0 1px var(--ag-edge), 0 24px 50px -34px color-mix(in srgb, var(--inv-text) 55%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
.ag-pair, .ag-events { display: grid; gap: 1.1rem; }
.ag-person .ag-photo { width: 78%; margin-bottom: .6rem; }
.ag-person__name { font: 400 1.5rem/1.25 var(--ag-serif); }
.ag-bubble {
    justify-self: center; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: -2.2rem 0; z-index: 2; border-radius: 50%;
    background: var(--inv-text); color: var(--inv-background); font: italic 400 1.6rem/1 var(--ag-serif); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--inv-accent) 80%, transparent);
}
.ag-countdown__date { font: 400 clamp(1.9rem, 9vw, 2.4rem)/1.2 var(--ag-serif); }
.ag-body .inv-countdown { margin-top: .6rem; gap: .45rem; }
.ag-body .inv-countdown__item { flex: 1; min-width: 0; max-width: 4.6rem; padding: .75rem .2rem; border-radius: 20px; background: color-mix(in srgb, var(--inv-background) 70%, transparent); box-shadow: inset 0 0 0 1px var(--ag-edge); }
.ag-body .inv-countdown__value { font: 500 1.6rem/1.1 var(--ag-sans); }
.ag-body .inv-countdown__label { font-size: .62rem; color: var(--ag-soft); }
.ag-body .inv-countdown__actions { margin-top: 1rem; display: grid; gap: .5rem; justify-items: center; }
.ag-event .ag-photo { margin-bottom: .4rem; }
.ag-event__venue { font: 500 1.05rem/1.4 var(--ag-sans); }
.ag-body .inv-maps__frame { width: 100%; height: 11rem; border: 0; border-radius: 20px; margin-top: .4rem; }
.ag-moments { display: grid; gap: 1.4rem; width: 100%; margin-top: .6rem; text-align: left; }
.ag-moment { display: grid; gap: .8rem; }
.ag-moment .ag-photo img { aspect-ratio: 16 / 10; }
.ag-moment__text { display: grid; gap: .35rem; justify-items: start; }
.ag-moment__title { font: 400 1.3rem/1.3 var(--ag-serif); }
.ag-body .ag-gallery .inv-gallery { --inv-gallery-columns: 3; gap: .45rem; width: 100%; }
.ag-body .ag-gallery .inv-gallery__item { border-radius: 16px; }

/* forms and lists on glass */
.ag-rsvp, .ag-wishes { justify-items: stretch; }
.ag-rsvp > .ag-small, .ag-rsvp > .ag-title, .ag-wishes > .ag-small, .ag-wishes > .ag-title { justify-self: center; }
.ag-body .inv-form input:not([type=radio]):not([type=checkbox]), .ag-body .inv-form select, .ag-body .inv-form textarea {
    border-radius: 16px; border: 1px solid var(--ag-edge); background: color-mix(in srgb, var(--inv-background) 75%, transparent); color: var(--inv-text); font: 300 1rem/1.4 var(--ag-sans);
}
.ag-body .inv-form select option { color: #222; }
.ag-body .inv-form label, .ag-body .inv-form__choices legend { font-size: .82rem; color: var(--ag-soft); }
.ag-body .inv-form input[type=radio], .ag-body .inv-form input[type=checkbox] { accent-color: var(--inv-accent); }
.ag-body .inv-form .inv-button { width: 100%; }
.ag-body .inv-wish { border-radius: 18px; background: color-mix(in srgb, var(--inv-background) 60%, transparent); box-shadow: inset 0 0 0 1px var(--ag-edge); }
.ag-body .inv-gift__account { width: 100%; border-radius: 22px; background: color-mix(in srgb, var(--inv-background) 60%, transparent); box-shadow: inset 0 0 0 1px var(--ag-edge); }
.ag-body .inv-gift__number { font: 500 1.35rem/1.3 var(--ag-sans); letter-spacing: .06em; }
.ag-body .inv-gift__account .inv-button { margin-top: .6rem; padding: .55rem 1.1rem; }
.ag-closing .ag-names { font-size: clamp(2rem, 9vw, 2.6rem); }

/* ---------- cover ---------- */
.ag-cover { position: fixed; inset: 0; z-index: 30; display: flex; overflow: hidden; }
.ag-cover__inner {
    position: relative; z-index: 1; width: 100%; min-height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .75rem; text-align: center;
    padding: calc(1.6rem + env(safe-area-inset-top)) 1.6rem calc(1.8rem + env(safe-area-inset-bottom));
}
.ag-cover__photo { width: min(60vw, 17rem, 34svh); margin-bottom: .4rem; }
.ag-cover__photo img { aspect-ratio: 4 / 5; border-radius: 34px; }
.ag-cover__quote { max-width: 21rem; font: italic 400 .95rem/1.5 var(--ag-serif); color: var(--ag-soft); }
.ag-guest { width: min(100%, 19rem); padding: .9rem 1.2rem; gap: .1rem; border-radius: 22px; }
.ag-guest__name { font: 500 1.15rem/1.3 var(--ag-sans); overflow-wrap: anywhere; }
.ag-cover--leave { transition: opacity .9s ease, transform 1s cubic-bezier(.6, 0, .3, 1); }
.ag-cover--gone { opacity: 0; transform: scale(1.06); }
@media (max-height: 740px) {
    .ag-cover__inner { gap: .55rem; }
    .ag-cover__photo { width: min(52vw, 15rem, 30svh); }
    .ag-names { font-size: clamp(2.1rem, 10vw, 2.8rem); }
    .ag-cover__quote { font-size: .88rem; line-height: 1.4; }
}
@media (max-height: 640px) {
    .ag-cover__photo { width: min(44vw, 13rem, 26svh); }
    .ag-guest { padding: .6rem 1rem; }
}

/* ---------- shared floating UI in glass ---------- */
.ag-body .inv-nav {
    --inv-nav-bg: var(--ag-glass);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 70%, transparent);
    --inv-nav-active: var(--inv-text);
    border-color: var(--ag-edge); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--inv-text) 60%, transparent);
}
.ag-body .inv-nav--icons .inv-nav__item { border-radius: 50%; }
.ag-body .inv-nav--icons .inv-nav__item.is-active { color: var(--inv-background); }
.ag-body .inv-music__button, .ag-body .inv-scroller__toggle, .ag-body .inv-pb-button, .ag-body .inv-to-top {
    background: var(--ag-glass); color: var(--inv-text); border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--ag-edge), 0 10px 22px -12px color-mix(in srgb, var(--inv-text) 60%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ag-body .inv-scroller.is-running .inv-scroller__toggle { background: var(--inv-text); color: var(--inv-background); }
.ag-body .inv-music__space { background: transparent; }
.ag-body .inv-branding { position: relative; z-index: 1; }

/* ---------- wide screens: two columns of cards ---------- */
@media (min-width: 900px) {
    .ag-main { max-width: 62rem; grid-template-columns: 1fr 1fr; gap: 1.4rem; padding-top: 3rem; align-items: start; }
    .ag-card--wide, .ag-pair, .ag-events { grid-column: 1 / -1; }
    .ag-pair { grid-template-columns: 1fr auto 1fr; align-items: center; }
    .ag-bubble { margin: 0 -1.6rem; }
    .ag-events { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
    .ag-moments { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
    .ag-opening, .ag-closing { padding: 3rem 4rem; }
    .ag-cover__photo { width: min(28vw, 20rem, 40vh); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.inv-anim .ag-aura i { animation: none; }
    .ag-cover--gone { transform: none; }
}

/* ---------- gift: the accounts as bank cards (two per row, an odd last one across), the address on its own card ---------- */
.ag-body .ag-gift .inv-gift { max-width: 27rem; margin: 0 auto; }
.ag-body .ag-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ag-body .ag-gift .inv-gift__accounts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.ag-body .ag-gift .inv-gift__account:not(.inv-gift__address) {
    position: relative; overflow: hidden; isolation: isolate; width: auto; max-width: none; margin: 0; border: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-height: 9.6rem; padding: .85rem .9rem .9rem;
    border-radius: 18px; text-align: left; color: var(--inv-primary); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--inv-aura1) 85%, transparent), transparent 60%), radial-gradient(120% 100% at 100% 100%, color-mix(in srgb, var(--inv-aura3) 85%, transparent), transparent 60%), linear-gradient(135deg, var(--inv-aura2), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-aura2))); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), 0 18px 34px -20px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.ag-body .ag-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.ag-body .ag-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; order: 1; display: block; width: 2rem; height: 1.45rem; margin: .35rem 0 .15rem; border-radius: 5px;
    background:
        linear-gradient(90deg, transparent 32%, rgb(0 0 0 / .22) 32% 35%, transparent 35% 65%, rgb(0 0 0 / .22) 65% 68%, transparent 68%),
        linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .2) 45% 52%, transparent 52%),
        linear-gradient(135deg, #f3dfa2, #c9a14f 55%, #ecd28c);
}
.ag-body .ag-gift .inv-gift__account:not(.inv-gift__address)::after {
    content: ''; position: absolute; z-index: -1; right: .8rem; top: .9rem; width: 1.9rem; height: 1.2rem; opacity: .7;
    background: radial-gradient(circle at 30% 50%, rgb(255 255 255 / .55) 0 .58rem, transparent .62rem), radial-gradient(circle at 70% 50%, rgb(255 255 255 / .3) 0 .58rem, transparent .62rem);
}
.ag-body .ag-gift .inv-gift__account:not(.inv-gift__address) > * { order: 2; }
.ag-body .ag-gift .inv-gift__account:not(.inv-gift__address) > .inv-gift__bank { order: 0; min-height: 1.6rem; display: flex; align-items: center; font-size: .82rem; font-weight: 600; letter-spacing: .06em; color: var(--inv-primary); }
.ag-body .ag-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .35rem; }
.ag-body .ag-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__number { margin-top: auto; font: 600 1.02rem/1.2 var(--ag-sans); letter-spacing: .08em; color: var(--inv-primary); overflow-wrap: anywhere; }
.ag-body .ag-gift .inv-gift__account:not(.inv-gift__address) .inv-gift__holder { font-size: .58rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-primary) 72%, transparent); }
.ag-body .ag-gift .inv-gift__account:not(.inv-gift__address) .inv-button {
    margin-top: .45rem; min-height: 0; padding: .38rem .7rem; font-size: .58rem; letter-spacing: .12em;
    background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 55%, transparent); border: 0;
}
.ag-body .ag-gift .inv-gift__address {
    position: relative; width: auto; max-width: none; margin: .8rem 0 0; padding: 1.3rem 1.1rem 1.2rem; border-radius: 18px; text-align: center;
    background: color-mix(in srgb, var(--inv-background) 75%, #fff); color: var(--inv-primary); box-shadow: 0 16px 30px -22px rgb(0 0 0 / .45); border: 0;
}
.ag-body .ag-gift .inv-gift__address::before { content: ''; position: absolute; inset: 6px; border-radius: inherit; border: 1px solid var(--ag-edge); pointer-events: none; }
.ag-body .ag-gift .inv-gift__address .inv-gift__bank { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; opacity: .75; }
.ag-body .ag-gift .inv-gift__address .inv-gift__holder { margin-top: .3rem; font: 500 1.15rem/1.3 var(--ag-serif); }
.ag-body .ag-gift .inv-gift__address p { font-size: .9rem; line-height: 1.5; }
.ag-body .ag-gift .inv-gift__address .inv-button { margin-top: .8rem; }
@media (max-width: 340px) {
    .ag-body .ag-gift .inv-gift__accounts { grid-template-columns: minmax(0, 1fr); }
}