/*
 * Template "Story Kita" (Pernikahan): Instagram-style stories.
 * Colors from the variant (x-inv.head): --inv-primary, --inv-second (gradients),
 * --inv-accent (stickers), --inv-background, --inv-text.
 * html.sk-js = JavaScript on: slides become a horizontal story strip; otherwise they stack.
 */

:root {
    --inv-second: var(--inv-accent);
    --inv-radius: 18px;
    --sk-col: min(100vw, 440px);
    --sk-head: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
    --sk-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sk-hand: 'Caveat', 'Segoe Print', cursive;
    --sk-glass: color-mix(in srgb, #fff 14%, transparent);
    --sk-glass-line: color-mix(in srgb, #fff 26%, transparent);
    --sk-shade: linear-gradient(180deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / .78) 100%);
}

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

html, body { margin: 0; }
body.sk-body {
    min-height: 100vh;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--sk-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, figure, blockquote { margin: 0; }
a { color: inherit; }

/* ---------- wide screens: a phone-sized column on the blurred photo ---------- */
.sk-backdrop { display: none; }
@media (min-width: 600px) {
    .sk-backdrop {
        display: block; position: fixed; inset: -40px; z-index: 0;
        background: var(--sk-photo, linear-gradient(135deg, var(--inv-primary), var(--inv-second))) center / cover;
        filter: blur(28px) brightness(.55) saturate(1.2);
    }
}

.sk-preview {
    position: fixed; top: 0; left: 50%; z-index: 60; transform: translateX(-50%);
    padding: .3rem .9rem; border-radius: 0 0 10px 10px;
    background: var(--inv-accent); color: #111; font-size: .72rem; font-weight: 600;
}

/* ---------- shared pieces ---------- */
.sk-kicker { font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.sk-title { font-family: var(--sk-head); font-weight: 800; font-size: 2.1rem; line-height: 1.05; letter-spacing: -.02em; }
.sk-big { font-family: var(--sk-head); font-weight: 500; font-size: 1.3rem; line-height: 1.35; letter-spacing: -.01em; }
.sk-muted { font-size: .9rem; opacity: .78; }
.sk-hint { font-size: .78rem; opacity: .7; text-align: center; }

/* stickers: rounded labels on a slight tilt, like Instagram text stickers */
.sk-sticker {
    align-self: flex-start; display: inline-block; max-width: 100%;
    padding: .3rem .85rem .35rem; border-radius: 10px;
    font-family: var(--sk-hand); font-size: 1.45rem; font-weight: 600; line-height: 1.15;
    box-shadow: 0 6px 18px rgb(0 0 0 / .22);
}
.sk-sticker--accent { background: var(--inv-accent); color: #141414; }
.sk-sticker--light { background: #fff; color: var(--inv-primary); }
.sk-sticker--tilt { transform: rotate(-4deg); }
.sk-sticker--tilt-left { transform: rotate(3deg); }

.sk-card {
    padding: 1rem 1.1rem; border-radius: var(--inv-radius);
    background: var(--sk-glass); border: 1px solid var(--sk-glass-line);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

.sk-chip {
    align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem; border: 1px solid var(--sk-glass-line); border-radius: 999px;
    background: var(--sk-glass); color: inherit; font: 600 .85rem/1 var(--sk-body); text-decoration: none; cursor: pointer;
}

.sk-button, .inv-button {
    padding: .85rem 1.4rem; background: var(--inv-accent); color: #141414; font-weight: 700;
    box-shadow: 0 8px 22px rgb(0 0 0 / .25);
}
.inv-button--outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }

.sk-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.9rem; line-height: 1.6; text-align: center; }

/* ---------- the account row and progress bars ---------- */
.sk-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 6;
    padding: calc(.55rem + env(safe-area-inset-top)) .75rem 1.4rem;
    background: linear-gradient(180deg, rgb(0 0 0 / .4), transparent);
    color: #fff; pointer-events: none;
}
.sk-bars { display: flex; gap: 4px; }
.sk-bar { flex: 1; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .35); overflow: hidden; }
.sk-bar i { display: block; width: 0; height: 100%; background: #fff; border-radius: inherit; }
.sk-bar.is-done i { width: 100%; }
.sk-bar.is-active i, .sk-bar--cover i { animation: sk-fill 5s linear forwards; }
@keyframes sk-fill { from { width: 0; } to { width: 100%; } }

.sk-account { display: flex; align-items: center; gap: .55rem; margin-top: .6rem; font-size: .85rem; }
.sk-avatar {
    display: inline-grid; grid-auto-flow: column; place-content: center; gap: 1px;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--inv-primary), var(--inv-second));
    box-shadow: 0 0 0 2px var(--inv-background), 0 0 0 4px var(--inv-accent);
    font: 800 .8rem/1 var(--sk-head);
}
.sk-account__name { font-weight: 700; }
.sk-account__meta { opacity: .8; }

/* ---------- cover: the first story ---------- */
.sk-cover {
    position: fixed; top: 0; bottom: 0; left: 50%; z-index: 30;
    width: var(--sk-col); transform: translateX(-50%);
    display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden; background: var(--inv-background); color: #fff;
}
.sk-cover__photo, .sk-slide__photo {
    position: absolute; inset: 0;
    background: var(--sk-photo, linear-gradient(160deg, var(--inv-primary), var(--inv-second))) center / cover no-repeat;
}
.sk-cover__photo::after, .sk-slide__photo::after { content: ''; position: absolute; inset: 0; background: var(--sk-shade); }
.sk-cover__photo { animation: sk-zoom 14s ease-out both; }
@keyframes sk-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }

.sk-cover__body {
    position: relative; z-index: 2; display: flex; flex-direction: column; gap: .9rem;
    padding: 0 1.5rem calc(2rem + env(safe-area-inset-bottom));
}
.sk-cover__names {
    display: flex; flex-direction: column; margin: 0;
    font-family: var(--sk-head); font-weight: 800; font-size: clamp(3.1rem, 15vw, 4.4rem); line-height: .92; letter-spacing: -.04em;
    text-shadow: 0 6px 30px rgb(0 0 0 / .35);
}
.sk-cover__amp { font-family: var(--sk-hand); font-weight: 600; font-size: .6em; color: var(--inv-accent); line-height: 1; margin: .05em 0 -.05em .1em; }
.sk-cover__quote { font-size: .95rem; line-height: 1.5; opacity: .9; }
.sk-cover__guest { padding: .7rem 1rem; border-radius: 14px; background: var(--sk-glass); border: 1px solid var(--sk-glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sk-cover__guest p { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.sk-cover__guest-name { display: block; margin-top: .1rem; font: 700 1.25rem/1.25 var(--sk-head); }
.sk-open { align-self: stretch; gap: .35rem; font-size: 1rem; }

.sk-cover--leave { transition: transform .55s cubic-bezier(.6, 0, .4, 1), opacity .55s ease; }
.sk-cover--gone { transform: translateX(-50%) translateY(-100%); opacity: 0; }

/* ---------- the stories ---------- */
.sk-viewer { position: relative; z-index: 1; }
.sk-viewer > .sk-top, .sk-nav { display: none; }

.sk-slide { position: relative; color: #fff; }
.sk-slide__inner {
    position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 1rem;
    min-height: 100svh; padding: 5.25rem 1.4rem 6.5rem;
}
.sk-slide__inner--bottom { justify-content: flex-end; }
.sk-slide__inner--scroll { justify-content: flex-start; }

.sk-slide--photo { background: #111; }
.sk-slide--color {
    background:
        radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 60%),
        radial-gradient(110% 70% at 100% 100%, color-mix(in srgb, var(--inv-second) 80%, transparent), transparent 60%),
        var(--inv-background);
}
.sk-slide--color:nth-of-type(even) {
    background:
        radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--inv-second) 85%, transparent), transparent 60%),
        radial-gradient(110% 70% at 0% 100%, color-mix(in srgb, var(--inv-primary) 80%, transparent), transparent 60%),
        var(--inv-background);
}

/* without JavaScript: a normal page of stacked slides in the column */
.sk-stories { width: var(--sk-col); margin: 0 auto; }

/* with JavaScript: one fixed story at a time, swipe = native horizontal scroll-snap */
html.sk-js .sk-viewer {
    position: fixed; top: 0; bottom: 0; left: 50%; width: var(--sk-col); transform: translateX(-50%);
    overflow: hidden; background: var(--inv-background);
}
html.sk-js .sk-viewer > .sk-top { display: block; }
html.sk-js .sk-stories {
    display: flex; width: 100%; height: 100%;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
}
html.sk-js .sk-stories::-webkit-scrollbar { display: none; }
html.sk-js .sk-slide {
    flex: 0 0 100%; height: 100%;
    overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none;
    scroll-snap-align: start; scroll-snap-stop: always;
}
html.sk-js .sk-slide::-webkit-scrollbar { display: none; }
html.sk-js .sk-slide__inner { min-height: 100%; }

/* bottom bar: previous, platform credit, next */
html.sk-js .sk-nav {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: 1.25rem .9rem calc(.8rem + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgb(0 0 0 / .45), transparent);
    color: #fff; pointer-events: none;
}
.sk-nav__button {
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0;
    border: 1px solid var(--sk-glass-line); border-radius: 50%;
    background: var(--sk-glass); color: #fff; cursor: pointer; pointer-events: auto;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sk-nav__button:active { transform: scale(.94); }
.sk-nav__credit { flex: 1; padding: 0; font-size: .7rem; text-align: center; pointer-events: auto; }
/* music button above the bottom bar, inside the column */
.sk-body .inv-music { right: max(1rem, calc(50vw - 220px + 1rem)); bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
html:not(.sk-js) .sk-body .inv-music { bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* on photos the glass is darker, so text stays readable on bright pictures */
.sk-slide--photo .sk-card { background: rgb(12 10 18 / .45); border-color: rgb(255 255 255 / .18); }

/* ---------- opening ---------- */
.sk-quote blockquote { font-size: .95rem; line-height: 1.6; }
.sk-quote figcaption { margin-top: .6rem; font-weight: 700; font-size: .85rem; color: var(--inv-accent); }

/* ---------- couple ---------- */
.sk-person__nick { font-family: var(--sk-head); font-weight: 800; font-size: clamp(3rem, 16vw, 4.2rem); line-height: .9; letter-spacing: -.04em; }
.sk-person__name { font: 600 1.1rem/1.3 var(--sk-body); }
.sk-person__parents { font-size: .9rem; opacity: .9; }
.sk-person__parents strong { display: block; font-weight: 600; }

/* ---------- countdown ---------- */
.sk-bigdate { display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--sk-head); }
.sk-bigdate__day { font-weight: 800; font-size: 7.5rem; line-height: .85; letter-spacing: -.05em; }
.sk-bigdate__month { font-weight: 700; font-size: 1.5rem; }
.sk-bigdate__weekday { font-size: .9rem; letter-spacing: .25em; text-transform: uppercase; opacity: .8; }
.sk-countdown .sk-sticker { align-self: center; }
.inv-countdown__item { min-width: 4.2rem; background: var(--sk-glass); border: 1px solid var(--sk-glass-line); border-radius: 16px; }
.inv-countdown__value { font-family: var(--sk-head); font-weight: 800; font-size: 2rem; }

/* ---------- events ---------- */
.sk-event__card { display: grid; gap: .4rem; }
.sk-event__date { font-weight: 600; font-size: .9rem; opacity: .9; }
.sk-event__time { font: 800 2.1rem/1 var(--sk-head); letter-spacing: -.02em; }
.sk-event__time span { font: 500 .95rem var(--sk-body); opacity: .85; }
.sk-event__venue { font-weight: 700; font-size: 1.05rem; }
.sk-event__dress { font-size: .9rem; }
.inv-maps .inv-button { margin-top: .35rem; color: #141414; }
.inv-maps__frame { border-radius: 14px; }

/* ---------- love story ---------- */
.sk-story__text { font-size: .95rem; }

/* ---------- gallery: photo dump ---------- */
.inv-gallery { gap: 4px; border-radius: 14px; overflow: hidden; }
.inv-gallery__item { border-radius: 0; }

/* ---------- live ---------- */
.sk-live__badge {
    align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .7rem; border-radius: 6px; background: #ff2d55; font: 800 .8rem/1.2 var(--sk-head); letter-spacing: .12em;
}
.sk-live__badge span { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; animation: sk-blink 1.2s ease-in-out infinite; }
@keyframes sk-blink { 50% { opacity: .2; } }

/* ---------- gift: compact glass cards, two per row (odd last one across); the address stays full width ---------- */
.sk-gift__list { display: grid; gap: .6rem; }
.inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inv-gift__account + .inv-gift__account { margin-top: 0; }
.inv-gift__account {
    display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
    padding: .8rem; border-radius: 16px; background: var(--sk-glass); border: 1px solid var(--sk-glass-line);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.inv-gift__bank { max-width: 100%; margin: 0 0 .4rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; overflow-wrap: anywhere; }
.inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: .4rem; }
.inv-gift__logo img { max-width: 5rem; }
.inv-gift__number {
    max-width: 100%; margin: 0; font: 700 1rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .02em; overflow-wrap: anywhere;
}
.inv-gift__holder { max-width: 100%; margin: .2rem 0 .6rem; font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; overflow-wrap: anywhere; }
/* the copy button sits on the bottom edge so cards side by side line up */
.inv-gift__account .inv-button { margin-top: auto; padding: .35rem .7rem; font-size: .65rem; box-shadow: inset 0 0 0 1.5px currentColor; }
.inv-gift__address p { margin: 0; }
.inv-gift__address .inv-gift__bank { font-size: .72rem; }
.inv-gift__address .inv-gift__holder { margin: 0 0 .2rem; font-size: .7rem; }
.inv-gift__address p:not(.inv-gift__bank):not(.inv-gift__holder) { margin-bottom: .6rem; font-size: .88rem; line-height: 1.45; }

/* ---------- rsvp & wishes: forms on glass ---------- */
.sk-form { color: #fff; }
.sk-form .inv-form input:not([type=radio]):not([type=checkbox]), .sk-form .inv-form select, .sk-form .inv-form textarea {
    border: 1px solid var(--sk-glass-line); border-radius: 12px; background: rgb(255 255 255 / .92); color: #1a1a1a;
}
.sk-form .inv-form input[type=radio], .sk-form .inv-form input[type=checkbox] { accent-color: var(--inv-accent); }
.sk-form .inv-form__notice { background: color-mix(in srgb, var(--inv-accent) 30%, transparent); }
.inv-wish { padding: .65rem .8rem; background: rgb(255 255 255 / .12); border-radius: 16px 16px 16px 4px; }
.inv-wish__name { font-size: .92rem; }
.inv-wish__message { font-size: .88rem; line-height: 1.45; }
.inv-wish__time { font-size: .7rem; }
/* about three replies in view; the box scrolls inside the story slide */
.sk-form .inv-wishes { --inv-wishes-height: 19rem; }
.sk-form .inv-wishes__list { padding-top: .75rem; border-top: 1px solid var(--sk-glass-line); }
.inv-wish__reply { border-left-color: var(--inv-accent); background: rgb(255 255 255 / .1); }

/* ---------- closing ---------- */
.sk-closing__names { font-family: var(--sk-head); font-weight: 800; font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: .95; letter-spacing: -.03em; }
.sk-closing__signature { font-family: var(--sk-hand); font-size: 1.6rem; color: var(--inv-accent); }
html:not(.sk-js) .sk-restart { display: none; }

/* ---------- check-in QR story ---------- */
.sk-checkin .inv-checkin { color: #1a1a1a; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sk-cover__photo, .sk-bar.is-active i, .sk-bar--cover i, .sk-live__badge span { animation: none; }
    .sk-bar.is-active i, .sk-bar--cover i { width: 100%; }
    html.sk-js .sk-stories { scroll-behavior: auto; }
}

/* stories move sideways: the shared auto scroll (downwards) has nothing to do here */
.sk-body .inv-autoscroll { display: none; }