/*
 * Template "Polaroid Kenangan" (Save the Date): one big instant photo taped to a painted wall.
 * Colors from the chosen variant: --inv-primary (the wall), --inv-accent (washi tape, accents),
 * --inv-background (the photo paper and notes), --inv-text (ink).
 * Fonts: Caveat (handwriting on the polaroid), Cormorant Garamond (serif), Jost (small labels).
 * Tilts use the individual `rotate` property, so the shared scroll reveal (transform) never undoes them.
 */

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

:root {
    --pk-ink: color-mix(in srgb, var(--inv-primary) 45%, var(--inv-text));
    --pk-accent-ink: color-mix(in srgb, var(--inv-accent) 78%, #000);
    --pk-cream: color-mix(in srgb, var(--inv-background) 92%, #fff);
    --pk-shadow:
        0 1px 1px rgb(0 0 0 / .12),
        0 3px 6px -2px rgb(0 0 0 / .25),
        0 24px 40px -14px rgb(0 0 0 / .55),
        0 46px 70px -36px rgb(0 0 0 / .5);
    /* fine paper grain and the large brush mottling of the painted wall (inline SVG noise, no image files) */
    --pk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --pk-paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --pk-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0055' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.1 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

html { background: var(--inv-primary); }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(48rem 34rem at 28% -4rem, color-mix(in srgb, var(--inv-primary) 62%, #fff6e0) 0%, transparent 72%),
        radial-gradient(60rem 46rem at 105% 115%, color-mix(in srgb, var(--inv-primary) 62%, #000) 0%, transparent 70%),
        var(--inv-primary);
    color: var(--pk-cream);
    font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* the painted wall: soft brush mottling + a fine linen weave, fixed so it feels like one surface */
body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        var(--pk-mottle) center / cover no-repeat,
        repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgb(0 0 0 / .045) 0 1px, transparent 1px 4px);
    opacity: .32;
}
body::after {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: var(--pk-grain); opacity: .16; mix-blend-mode: multiply;
}
.pk-main, .inv-branding { position: relative; z-index: 1; }
.pk-main { overflow-x: clip; }

.pk-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem;
}

/* ---------- hero: the polaroid ---------- */
.pk-hero {
    /* polaroid width: as wide as the phone allows, but always fits the first screen with the caption */
    --pw: min(86vw, 23rem, calc((100svh - 13.5rem) / 1.22));
    padding: clamp(1.4rem, 4.5svh, 2.6rem) 1rem 2.2rem;
    text-align: center;
}

.pk-eyebrow {
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    margin: 0 auto; max-width: 22rem;
    font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500;
    font-size: 1.5rem; line-height: 1.15; color: var(--pk-cream);
}
.pk-eyebrow__line { flex: 0 0 1.8rem; height: 1px; background: color-mix(in srgb, var(--inv-accent) 70%, #fff); }

.pk-polaroid {
    position: relative;
    width: var(--pw);
    margin: clamp(1.1rem, 3.4svh, 1.9rem) auto 0;
    padding: calc(var(--pw) * .058) calc(var(--pw) * .058) 0;
    background:
        linear-gradient(170deg, rgb(255 255 255 / .55), transparent 40%),
        var(--pk-paper-grain),
        var(--pk-cream);
    background-size: auto, 220px 220px, auto;
    border-radius: 2px;
    box-shadow: var(--pk-shadow);
    rotate: -2.2deg;
    color: var(--inv-text);
}

.pk-polaroid__photo {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    background: #1b1b1b;
}
.pk-polaroid__photo img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
}
/* a faint inner edge, like the print sitting in the frame */
.pk-polaroid__photo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14), inset 0 0 26px rgb(0 0 0 / .18);
}
/* without a photo: a soft painted gradient with the initials */
.pk-polaroid__photo--empty {
    display: grid; place-items: center;
    background:
        radial-gradient(70% 60% at 25% 20%, color-mix(in srgb, var(--inv-accent) 85%, #fff) 0%, transparent 70%),
        radial-gradient(80% 70% at 85% 90%, color-mix(in srgb, var(--inv-primary) 80%, #000) 0%, transparent 75%),
        linear-gradient(150deg, var(--inv-accent), var(--inv-primary));
}
.pk-polaroid__initials {
    position: relative; z-index: 1;
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
    font-size: calc(var(--pw) * .26); line-height: 1; letter-spacing: .02em;
    color: var(--pk-cream); text-shadow: 0 2px 18px rgb(0 0 0 / .25);
}
.pk-polaroid__initials em { font-family: 'Caveat', cursive; font-style: normal; font-size: .55em; margin: 0 .12em; color: color-mix(in srgb, var(--inv-accent) 35%, #fff); }

/* the milky layer of a fresh instant print; only visible while it develops */
.pk-polaroid__milk {
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 50% 45%, #f4f2ea, #e3e6df);
}

.pk-polaroid__caption {
    padding: calc(var(--pw) * .045) .4rem calc(var(--pw) * .065);
    min-height: calc(var(--pw) * .24);
    display: flex; flex-direction: column; justify-content: center;
}
.pk-names {
    margin: 0;
    font-family: 'Caveat', cursive; font-weight: 600;
    font-size: clamp(1.9rem, calc(var(--pw) * .118), 2.75rem); line-height: 1.02;
    color: var(--pk-ink);
    overflow-wrap: anywhere;
}
.pk-names__amp { color: var(--pk-accent-ink); font-weight: 500; margin: 0 .05em; }
.pk-caption-date {
    margin: .15rem 0 0;
    font-family: 'Caveat', cursive; font-weight: 500;
    font-size: clamp(1.15rem, calc(var(--pw) * .066), 1.5rem); line-height: 1.15;
    color: color-mix(in srgb, var(--inv-text) 82%, transparent);
}

/* washi tape: translucent accent paper with fine stripes and torn ends */
.pk-tape {
    position: absolute; z-index: 2; display: block;
    width: calc(var(--pw, 20rem) * .29); height: calc(var(--pw, 20rem) * .085);
    background:
        repeating-linear-gradient(90deg, rgb(255 255 255 / .2) 0 2px, transparent 2px 9px),
        linear-gradient(180deg, rgb(255 255 255 / .22), transparent 55%, rgb(0 0 0 / .08)),
        color-mix(in srgb, var(--inv-accent) 74%, transparent);
    clip-path: polygon(0 4%, 100% 0, 97% 18%, 100% 36%, 96.5% 55%, 100% 74%, 97% 90%, 99% 100%, 1% 97%, 3.5% 80%, 0 62%, 3% 44%, 0 26%);
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / .18));
}
.pk-tape--left { top: calc(var(--pw) * .0); left: calc(var(--pw) * -.075); rotate: -40deg; }
.pk-tape--right { top: calc(var(--pw) * .0); right: calc(var(--pw) * -.075); rotate: 38deg; }

.pk-guest { margin: 1.6rem auto 0; max-width: 21rem; }
.pk-guest__label {
    display: block; font-size: .68rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
    color: color-mix(in srgb, var(--pk-cream) 80%, transparent);
}
.pk-guest__name {
    display: block; margin-top: .25rem;
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.3rem; line-height: 1.25;
    color: var(--pk-cream);
}

/* ---------- the taped note ---------- */
.pk-note { padding: .6rem 1.4rem 3.6rem; }
.pk-paper {
    --pw: 20rem;
    position: relative;
    max-width: 23rem; margin: 0 auto;
    padding: 2.5rem 1.4rem 2.1rem;
    background:
        linear-gradient(165deg, rgb(255 255 255 / .5), transparent 45%),
        var(--pk-paper-grain),
        var(--pk-cream);
    background-size: auto, 220px 220px, auto;
    box-shadow: var(--pk-shadow);
    rotate: 1.4deg;
    color: var(--inv-text);
    text-align: center;
}
/* a thin printed border inside the paper */
.pk-paper::before {
    content: ''; position: absolute; inset: .55rem; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-primary) 28%, transparent);
}
.pk-tape--note { top: -.9rem; left: 50%; width: 7.8rem; height: 1.9rem; translate: -50% 0; rotate: -3deg; }

.pk-paper__kicker {
    margin: 0; font-family: 'Caveat', cursive; font-weight: 600; font-size: 1.5rem; line-height: 1.1;
    color: var(--pk-accent-ink);
}
.pk-paper__date {
    display: flex; justify-content: center; align-items: baseline; gap: .35rem; white-space: nowrap;
    margin: .35rem 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
    font-size: clamp(2.5rem, 12vw, 3.1rem); line-height: 1; letter-spacing: .02em;
    color: var(--inv-primary);
}
.pk-paper__date i { font-style: normal; color: var(--inv-accent); font-weight: 500; }
.pk-paper__city {
    margin: .9rem 0 0;
    font-size: .82rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
    color: var(--inv-text);
}
.pk-paper__in {
    font-family: 'Caveat', cursive; font-size: 1.35rem; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--pk-accent-ink); margin-right: .1rem;
}
.pk-paper__note {
    margin: 1.1rem auto 0; max-width: 18rem; padding-top: 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--inv-primary) 22%, transparent);
    font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500;
    font-size: 1.2rem; line-height: 1.45; color: var(--inv-text);
}

/* countdown (shared component, restyled as quiet numerals on the paper) */
.pk-countdown { margin-top: 1.5rem; }
.pk-countdown__title {
    margin: 0 0 .6rem; font-family: 'Caveat', cursive; font-weight: 600; font-size: 1.4rem; line-height: 1;
    color: var(--inv-primary);
}
.pk-countdown .inv-countdown { gap: 0; }
.pk-countdown .inv-countdown__item {
    min-width: 0; flex: 1 1 0; max-width: 4.4rem; padding: .25rem .2rem; border-radius: 0; background: none;
}
.pk-countdown .inv-countdown__item + .inv-countdown__item { border-left: 1px solid color-mix(in srgb, var(--inv-primary) 25%, transparent); }
.pk-countdown .inv-countdown__value {
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 2.05rem; line-height: 1;
    color: var(--inv-primary);
}
.pk-countdown .inv-countdown__label {
    margin-top: .3rem; font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: .85;
}
.pk-countdown .inv-countdown__done { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.1rem; }
.pk-countdown .inv-countdown__actions { margin-top: 1.2rem; gap: .45rem; }
.pk-countdown .inv-button--outline {
    padding: .5rem .95rem; font-size: .74rem; font-weight: 500; letter-spacing: .02em;
    color: var(--inv-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
.pk-countdown .inv-button--outline:hover { background: color-mix(in srgb, var(--inv-primary) 8%, transparent); }

/* a pressed sprig laid over the paper's corner */
.pk-sprig {
    position: absolute; right: -.8rem; bottom: -1.6rem; width: 5.4rem; height: 5.4rem;
    color: var(--inv-accent); rotate: -6deg; pointer-events: none;
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / .18));
}

/* ---------- closing: a strip of cream paper with a torn top edge ---------- */
.pk-closing { color: var(--pk-cream); }
.pk-closing__edge { display: block; width: 100%; height: 1.1rem; margin-bottom: -1px; }
.pk-closing__inner {
    padding: 1.9rem 1.5rem 3.4rem;
    background: var(--pk-paper-grain), var(--pk-cream);
    background-size: 220px 220px, auto;
    color: var(--inv-text); text-align: center;
}
.pk-closing__message {
    margin: 0 auto; max-width: 21rem;
    font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500;
    font-size: 1.3rem; line-height: 1.45;
}
.pk-closing__names {
    margin: 1rem 0 0; font-family: 'Caveat', cursive; font-weight: 600; font-size: 2.2rem; line-height: 1.05;
    color: var(--inv-primary);
}
.pk-closing__flourish { display: block; width: 8.5rem; height: 1.2rem; margin: .35rem auto 0; color: var(--inv-accent); }

/* ---------- small screens: give the polaroid room ---------- */
@media (max-height: 660px) {
    .pk-eyebrow { font-size: 1.3rem; }
    .pk-hero { --pw: min(86vw, 23rem, calc((100svh - 11.5rem) / 1.22)); }
    .pk-guest { margin-top: 1.1rem; }
    .pk-guest__name { font-size: 1.15rem; }
}
@media (max-height: 580px) {
    .pk-hero { --pw: min(80vw, 23rem, calc((100svh - 10.5rem) / 1.22)); padding-top: 1rem; }
    .pk-eyebrow { font-size: 1.15rem; }
    .pk-polaroid { margin-top: .9rem; }
    .pk-guest { margin-top: .9rem; }
    .pk-guest__label { font-size: .6rem; }
    .pk-guest__name { font-size: 1.05rem; }
}

@media (min-width: 640px) {
    .pk-hero { --pw: min(86vw, 25rem, calc((100svh - 13.5rem) / 1.22)); }
    .pk-paper { max-width: 25rem; padding-inline: 2rem; }
    .pk-closing__inner { padding-bottom: 4rem; }
}

/* desktop: the polaroid and the note hang side by side on the wall, the paper strip below */
@media (min-width: 1000px) and (min-height: 600px) {
    .pk-main {
        display: grid; align-items: center; column-gap: 3.5rem;
        grid-template-columns: 1fr minmax(0, 30rem) minmax(0, 26rem) 1fr;
    }
    .pk-hero { grid-column: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-bottom: 2.6rem; }
    .pk-note { grid-column: 3; padding: 2rem 0; }
    .pk-paper { rotate: 2.4deg; translate: 0 1.5rem; }
    .pk-closing { grid-column: 1 / -1; }
}

/*
 * Motion (only with html.inv-anim; see _shared/inv.css). One calm entrance: the polaroid settles onto
 * the wall, the tape presses on, the print develops from milky white to full colour, then the
 * handwriting appears. All done in about 2.4 s; the rest reveals on scroll.
 */
@keyframes pk-settle {
    from { opacity: 0; translate: 0 -16px; rotate: -6deg; scale: 1.035; }
    to { opacity: 1; translate: 0 0; rotate: -2.2deg; scale: 1; }
}
@keyframes pk-tape-on { from { opacity: 0; scale: 1.25; } to { opacity: 1; scale: 1; } }
@keyframes pk-milk { 0% { opacity: 1; } 25% { opacity: .92; } 100% { opacity: 0; } }
@keyframes pk-develop {
    0% { filter: saturate(.15) contrast(.6) brightness(1.25) sepia(.35); }
    100% { filter: none; }
}
@keyframes pk-ink { from { opacity: 0; filter: blur(3px); translate: 0 4px; } to { opacity: 1; filter: none; translate: 0 0; } }

html.inv-anim .pk-polaroid { animation: pk-settle .85s cubic-bezier(.2, .7, .2, 1) .15s both; }
html.inv-anim .pk-tape--left, html.inv-anim .pk-tape--right { animation: pk-tape-on .45s cubic-bezier(.2, .7, .2, 1) .75s both; }
html.inv-anim .pk-tape--right { animation-delay: .85s; }
html.inv-anim .pk-polaroid__milk { animation: pk-milk 1.9s ease-out .45s both; }
html.inv-anim .pk-polaroid__photo img,
html.inv-anim .pk-polaroid__photo--empty { animation: pk-develop 1.9s ease-out .45s both; }
html.inv-anim .pk-names { animation: pk-ink .8s ease-out 1.45s both; }
html.inv-anim .pk-caption-date { animation: pk-ink .8s ease-out 1.65s both; }