/*
 * Template "Tiket Terbang" (Save the Date): one first-class ticket on a deep sky backdrop.
 * Colors from the chosen variant: --inv-primary (ticket ink, band), --inv-accent (gold foil),
 * --inv-background (ivory ticket), --inv-text, --inv-sky (backdrop), --inv-mark (rubber stamp).
 * Fonts: Fraunces (names, date, codes), Barlow Condensed (labels), DM Mono (ticket data).
 */

:root {
    --inv-primary: #0d4a52; --inv-accent: #d6a94a; --inv-background: #fbf5e9; --inv-text: #16292b;
    --inv-sky: #06323a; --inv-mark: #b4472e;
    --tt-serif: 'Fraunces', Georgia, serif;
    --tt-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --tt-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
    --tt-foil: linear-gradient(105deg,
        color-mix(in srgb, var(--inv-accent) 70%, #5a3c00) 0%,
        var(--inv-accent) 28%,
        color-mix(in srgb, var(--inv-accent) 45%, #fff6dc) 48%,
        var(--inv-accent) 66%,
        color-mix(in srgb, var(--inv-accent) 75%, #5a3c00) 100%);
    --tt-notch: 14px;
}

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

html { background: var(--inv-sky); overflow-x: clip; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(42rem 26rem at 50% -6rem, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 85%, #8fc7c9) 0%, var(--inv-primary) 38%, var(--inv-sky) 100%);
    background-color: var(--inv-sky);
    color: var(--inv-text);
    font-family: var(--tt-mono);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* a faint guilloche rosette behind the ticket, like security print */
body::before {
    content: ''; position: fixed; z-index: 0; pointer-events: none;
    width: 46rem; height: 46rem; left: 50%; top: 4rem; translate: -50% 0;
    background: var(--inv-accent); opacity: .1;
    -webkit-mask: var(--tt-guilloche) center / contain no-repeat; mask: var(--tt-guilloche) center / contain no-repeat;
}

.tt-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-family: system-ui, sans-serif; font-size: .8125rem;
}

.tt {
    position: relative; z-index: 1;
    max-width: 27rem; margin: 0 auto; padding: 1rem 1rem 0;
}

/* shared small label */
.tt-label {
    display: block;
    font-family: var(--tt-cond); font-weight: 600; font-size: .7rem; line-height: 1.2;
    letter-spacing: .22em; text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-primary) 78%, var(--inv-text));
}
.tt-label--center { text-align: center; }

/* ---------- the ticket ---------- */
.tt-ticket { filter: drop-shadow(0 22px 30px rgb(0 0 0 / .35)) drop-shadow(0 2px 3px rgb(0 0 0 / .18)); }

.tt-main, .tt-stub { position: relative; background: var(--inv-background); }

/* round notches at both ends of the tear line */
.tt-main {
    border-radius: 22px 22px 0 0; padding-bottom: 1.1rem;
    -webkit-mask:
        radial-gradient(circle var(--tt-notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--tt-notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--tt-notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--tt-notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.tt-stub {
    border-radius: 0 0 22px 22px; padding: 1.35rem 1.25rem 1.15rem;
    -webkit-mask:
        radial-gradient(circle var(--tt-notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--tt-notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--tt-notch) at 0 0, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--tt-notch) at 100% 0, #0000 98%, #000) right / 51% 100% no-repeat;
}
/* a guilloche watermark in the stub */
.tt-stub::before {
    content: ''; position: absolute; right: -4.5rem; bottom: -3rem; width: 15rem; height: 15rem; pointer-events: none;
    background: var(--inv-primary); opacity: .07;
    -webkit-mask: var(--tt-guilloche) center / contain no-repeat; mask: var(--tt-guilloche) center / contain no-repeat;
}
.tt-stub > * { position: relative; }

/* perforation */
.tt-tear {
    position: absolute; left: calc(var(--tt-notch) + 6px); right: calc(var(--tt-notch) + 6px); top: -1px; height: 2px;
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 45%, transparent) 1.1px, transparent 1.6px) 0 50% / 8px 2px repeat-x;
}

/* header band: dark ink with gold foil lettering */
.tt-head {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1.25rem .65rem;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 82%, #000), var(--inv-primary) 55%, color-mix(in srgb, var(--inv-primary) 82%, #000));
    border-radius: 22px 22px 0 0;
}
.tt-head::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--inv-accent); opacity: .16;
    -webkit-mask: var(--tt-guilloche) 85% 50% / 9rem auto no-repeat; mask: var(--tt-guilloche) 85% 50% / 9rem auto no-repeat;
}
.tt-head__title, .tt-head__class {
    position: relative;
    background: var(--tt-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tt-head__title { font-family: var(--tt-serif); font-style: italic; font-weight: 500; font-size: 1.22rem; line-height: 1.2; }
.tt-head__class { flex: none; font-family: var(--tt-cond); font-weight: 600; font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; }

/* destination photo */
.tt-photo {
    position: relative; overflow: hidden;
    height: clamp(12.5rem, 41vh, 25rem);
    margin: .75rem .75rem 0; border-radius: 14px;
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--inv-accent) 40%, transparent), transparent 60%),
        linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 70%, #8fc7c9), var(--inv-primary) 60%, var(--inv-sky));
}
.tt-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* a thin gold hairline just inside the photo edge */
.tt-photo::after {
    content: ''; position: absolute; inset: 7px; border-radius: 9px; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-accent) 70%, #fff 10%); opacity: .75;
}
.tt-photo--empty { display: grid; place-items: center; }
.tt-photo__rosette {
    position: absolute; inset: -6%; background: var(--inv-accent); opacity: .3;
    -webkit-mask: var(--tt-guilloche) center / contain no-repeat; mask: var(--tt-guilloche) center / contain no-repeat;
}
.tt-photo__initials {
    position: relative;
    font-family: var(--tt-serif); font-weight: 600; font-size: 4.2rem; line-height: 1; letter-spacing: .02em;
    background: var(--tt-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tt-photo__initials em { font-style: italic; font-weight: 400; font-size: .55em; margin: 0 .12em; }

/* passengers */
.tt-pax { padding: 1rem 1.25rem 0; }
.tt-names {
    margin: .3rem 0 0;
    font-family: var(--tt-serif); font-weight: 600; font-optical-sizing: auto;
    font-size: clamp(2.05rem, 9.6vw, 2.75rem); line-height: 1.02; letter-spacing: -.01em;
    color: var(--inv-primary); overflow-wrap: anywhere;
}
.tt-amp { font-style: italic; font-weight: 400; color: color-mix(in srgb, var(--inv-accent) 70%, #6b4a10); }

/* date */
.tt-date { margin: .85rem 1.25rem 0; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--inv-primary) 16%, transparent); }
.tt-date__big {
    margin: .2rem 0 0;
    font-family: var(--tt-serif); font-weight: 600; font-size: clamp(1.9rem, 8.6vw, 2.4rem); line-height: 1.05;
    color: var(--inv-primary); font-variant-numeric: lining-nums;
}
.tt-date__big i { font-style: normal; margin: 0 .22em; color: color-mix(in srgb, var(--inv-accent) 80%, #6b4a10); }
.tt-date__long {
    margin: .3rem 0 0; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-text) 80%, transparent);
}

/* guest */
.tt-guest { margin: .8rem 1.25rem 0; padding: .55rem .8rem; border-radius: 10px; background: color-mix(in srgb, var(--inv-primary) 7%, transparent); }
.tt-guest__name { display: block; margin-top: .15rem; font-size: .9rem; font-weight: 500; line-height: 1.35; color: var(--inv-text); }

/* route: the couple's initials → the city code */
.tt-route {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
    margin: 1rem 1.25rem 0;
}
.tt-route__end strong {
    display: block; margin-top: .15rem;
    font-family: var(--tt-serif); font-weight: 600; font-size: 2rem; line-height: 1; letter-spacing: .05em; color: var(--inv-primary);
}
.tt-route__end small { display: block; margin-top: .25rem; font-size: .7rem; letter-spacing: .06em; color: color-mix(in srgb, var(--inv-text) 80%, transparent); }
.tt-route__end--to { text-align: right; }
.tt-route__end--to small { text-transform: uppercase; }
.tt-route__line {
    position: relative; height: 1.4rem; margin-top: .9rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 85%, #6b4a10) 50%, transparent 0) 0 50% / 7px 1.5px repeat-x;
}
.tt-route__line svg {
    position: absolute; left: 50%; top: 50%; width: 1.4rem; height: 1.4rem; translate: -50% -50%; rotate: 90deg;
    fill: var(--inv-primary); background: var(--inv-background); border-radius: 50%; padding: .1rem;
}

/* data row */
.tt-data {
    display: grid; grid-template-columns: 1.35fr 1fr .95fr; gap: .6rem;
    margin: 1rem 1.25rem 0; padding-top: .75rem;
    border-top: 1px solid color-mix(in srgb, var(--inv-primary) 16%, transparent);
}
.tt-data div { min-width: 0; }
.tt-data dd { margin: .2rem 0 0; font-size: .8rem; font-weight: 500; line-height: 1.3; text-transform: uppercase; color: var(--inv-text); overflow-wrap: anywhere; }

/* ---------- stub ---------- */
.tt-countdown .inv-countdown-wrap { margin-top: .6rem; }
.tt-countdown .inv-countdown { gap: .45rem; }
.tt-countdown .inv-countdown__item { flex: 1; min-width: 0; padding: 0; background: none; border-radius: 0; }
/* split-flap tiles */
.tt-countdown .inv-countdown__value {
    position: relative; overflow: hidden;
    padding: .55rem 0 .5rem; border-radius: 7px;
    font-family: var(--tt-mono); font-weight: 500; font-size: 1.65rem; line-height: 1.1;
    color: var(--inv-background);
    background:
        linear-gradient(180deg, rgb(255 255 255 / .08) 0 50%, rgb(0 0 0 / .14) 50% 100%),
        var(--inv-primary);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 4px 10px -5px rgb(0 0 0 / .5);
}
.tt-countdown .inv-countdown__value::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .45);
}
.tt-countdown .inv-countdown__label {
    margin-top: .35rem; font-family: var(--tt-cond); font-weight: 600; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
    opacity: 1; color: color-mix(in srgb, var(--inv-primary) 78%, var(--inv-text));
}
.tt-countdown .inv-countdown__done { margin: .6rem 0 0; text-align: center; font-size: .82rem; }
.tt-countdown .inv-countdown__actions { gap: .45rem; margin-top: .85rem; }
.tt-countdown .inv-button {
    padding: .5rem .8rem; border-radius: 999px;
    font-family: var(--tt-cond); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
.tt-countdown .inv-button--outline { color: var(--inv-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 55%, transparent); }

/* printed remark with a rubber stamp */
.tt-remark {
    margin-top: 1.2rem; padding-top: .9rem; min-height: 6.4rem;
    border-top: 1px dashed color-mix(in srgb, var(--inv-primary) 28%, transparent);
}
.tt-remark p {
    margin: .3rem 0 0; max-width: calc(100% - 6.2rem);
    font-size: .84rem; line-height: 1.55; color: var(--inv-text);
}
.tt-stamp {
    position: absolute; right: .1rem; top: .9rem;
    display: grid; place-content: center; text-align: center;
    width: 5.6rem; height: 5.6rem; border-radius: 50%;
    border: 2px solid var(--inv-mark); box-shadow: inset 0 0 0 3px var(--inv-background), inset 0 0 0 4px var(--inv-mark);
    color: var(--inv-mark); rotate: -14deg; opacity: .88;
    font-family: var(--tt-cond); font-weight: 600; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1.25;
}
.tt-stamp b { font-family: var(--tt-serif); font-style: italic; font-weight: 600; font-size: 1.3rem; letter-spacing: 0; text-transform: none; line-height: 1; }

/* decorative barcode */
.tt-barcode { margin-top: 1.1rem; text-align: center; }
.tt-barcode svg { display: block; width: 100%; height: 2.6rem; fill: var(--inv-text); }
.tt-barcode span { display: block; margin-top: .35rem; font-size: .66rem; letter-spacing: .3em; color: color-mix(in srgb, var(--inv-text) 75%, transparent); }

/* ---------- closing on the backdrop ---------- */
.tt-closing { padding: 2.6rem 1rem 2.4rem; text-align: center; color: var(--inv-background); }
.tt-closing__rule { display: block; width: 3.5rem; height: 1px; margin: 0 auto 1.3rem; background: var(--tt-foil); }
.tt-closing__text { margin: 0 auto; max-width: 22rem; font-family: var(--tt-serif); font-style: italic; font-size: 1.12rem; line-height: 1.55; }
.tt-closing__names {
    margin: 1rem 0 0;
    font-family: var(--tt-serif); font-weight: 600; font-size: 1.7rem; line-height: 1.1;
    background: var(--tt-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tt-closing__names span { font-style: italic; font-weight: 400; }

/* ---------- sleeve (entrance only) ---------- */
.tt-sleeve { display: none; }

@media (min-width: 640px) {
    .tt { padding-top: 2.5rem; }
    .tt-photo { height: clamp(14rem, 40vh, 22rem); }
}
@media (max-height: 600px) {
    .tt { padding-top: .6rem; }
    .tt-photo { height: clamp(11rem, 39vh, 22rem); }
    .tt-pax { padding-top: .75rem; }
}

/*
 * Motion (only with html.inv-anim; see _shared/inv.css): the ticket slides up out of its
 * paper sleeve once, then the foil glints once. Scroll reveals for the stub and closing.
 */
html.inv-anim .tt-sleeve {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
    max-width: 28rem; height: 46vh; pointer-events: none; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 88%, #000), var(--inv-sky));
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 40px rgb(0 0 0 / .4);
    animation: tt-sleeve-out .9s cubic-bezier(.55, 0, .75, .3) 1.05s both;
}
/* gold hairline frame + guilloche on the sleeve */
html.inv-anim .tt-sleeve::before {
    content: ''; position: absolute; inset: 10px 10px 0; border: 1px solid color-mix(in srgb, var(--inv-accent) 55%, transparent);
    border-bottom: 0; border-radius: 14px 14px 0 0;
}
html.inv-anim .tt-sleeve::after {
    content: ''; position: absolute; inset: 0; background: var(--inv-accent); opacity: .14;
    -webkit-mask: var(--tt-guilloche) center / 22rem auto no-repeat; mask: var(--tt-guilloche) center / 22rem auto no-repeat;
}
html.inv-anim .tt-sleeve > * { position: relative; z-index: 1; }
html.inv-anim .tt-sleeve__seal {
    display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
    font-family: var(--tt-serif); font-weight: 600; font-size: 1.3rem; color: var(--inv-sky);
    background: var(--tt-foil);
}
.tt-sleeve__seal i { font-style: italic; font-weight: 400; font-size: .8em; }
html.inv-anim .tt-sleeve__seal { display: flex; align-items: center; justify-content: center; }
html.inv-anim .tt-sleeve__text {
    font-family: var(--tt-cond); font-weight: 600; font-size: .78rem; letter-spacing: .4em; text-transform: uppercase;
    background: var(--tt-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes tt-sleeve-out { to { transform: translateY(110%); visibility: hidden; } }

@keyframes tt-rise {
    from { transform: translateY(34vh) rotate(-2deg); }
    to { transform: none; }
}
html.inv-anim .tt-ticket { animation: tt-rise 1.6s cubic-bezier(.22, .9, .25, 1) .2s both; }

/* one glint across the header band when the ticket is out */
html.inv-anim .tt-head::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgb(255 240 200 / .35), transparent);
    animation: tt-glint 1s ease-out 1.5s both;
}
@keyframes tt-glint { from { transform: translateX(0); } to { transform: translateX(520%); } }

/* the stamp lands when the remark scrolls in */
html.inv-anim .tt-remark .tt-stamp { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .35s, opacity .4s ease .35s; }
html.inv-anim .tt-remark:not(.is-revealed) .tt-stamp { transform: scale(1.6); opacity: 0; }