/*
 * The big-screen slideshow. Spec 7.5, drawn exactly as in the concept: the
 * photo stage takes 72% of the width and a quiet paper rail holds the event
 * name, a live count, a rotating guestbook quote, and a QR card.
 *
 * Every size is in cqw, so the whole screen scales from a 13 inch laptop to a
 * 75 inch TV without a single media query. The container is the slideshow
 * root itself.
 *
 * Spec section 11 item 1 left the rail's theming open with "default: theme
 * it". Nobody said otherwise, so the rail takes its accent from the event
 * theme while the stage stays dark, which is what makes a photo look right.
 *//*
 * Self-hosted. Nothing here points at a CDN, which Envato requires and which
 * also means a guest page keeps working when Google Fonts is blocked.
 *
 * Every file is a variable font covering the latin range only. A browser
 * downloads a file only when something on the page actually renders in it, so
 * a theme that never uses italic Fraunces never pays for it, and the three
 * fonts only the Custom theme offers (spec 7.28) cost nothing on any other
 * event.
 */

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('./fraunces-latin-DihXLNYH.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('./fraunces-latin-italic-lSdLDfvT.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('./inter-latin-Dx4kXJAl.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The Custom theme's extra title fonts. Spec 7.28. */

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('./playfair-display-latin-BOwq7MWX.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('./playfair-display-latin-italic-DmbndNpe.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('./dancing-script-latin-CyISZbeS.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('./montserrat-latin-l_AIctKy.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Event themes. Spec 7.11.
 *
 * A theme is a complete stationery set, not a color swap: display face, body
 * face, whether the title is italic, how heavy it is, how round the buttons
 * are, whether the little rule-and-diamond ornament appears, and the cover
 * artwork. Switching a theme is one `data-theme` attribute on the wrapper.
 *
 * Every guest-facing rule reads these custom properties and never hard-codes
 * a color, so a new theme is a block in this file and nothing else.
 */

[data-theme] {
    /* Wedding Classic, the Keepsake default. */
    --t-bg: #faf7f2;
    --t-surface: #ffffff;
    --t-ink: #241c35;
    --t-muted: #756e85;
    --t-line: #eae3d9;
    --t-accent: #c9573a;
    --t-soft: #f9e8e1;
    --t-font: 'Fraunces', Georgia, serif;
    --t-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --t-style: italic;
    --t-weight: 500;
    --t-radius: 999px;
    --t-card-radius: 12px;
    --t-orn: flex;
    --t-cover:
        radial-gradient(120% 80% at 20% 10%, #ffd9a8 0, transparent 55%),
        radial-gradient(90% 90% at 85% 90%, #b3475a 0, transparent 60%),
        linear-gradient(160deg, #f2a97c, #7a3b52);
}

[data-theme='wedding-garden'] {
    --t-bg: #f6f8f3;
    --t-ink: #22321f;
    --t-muted: #6b7a66;
    --t-line: #dfe7d8;
    --t-accent: #5e7f4f;
    --t-soft: #e7f0e0;
    --t-style: italic;
    --t-weight: 400;
    --t-radius: 999px;
    --t-card-radius: 14px;
    --t-orn: flex;
    --t-cover:
        radial-gradient(80% 60% at 70% 15%, #f2f7dd 0, transparent 60%),
        radial-gradient(60% 70% at 15% 85%, #a8c99a 0, transparent 65%),
        linear-gradient(165deg, #8fb47e, #2f4a2c);
}

[data-theme='birthday'] {
    --t-bg: #fff8ec;
    --t-ink: #2a1f4d;
    --t-muted: #7a7191;
    --t-line: #f1e2c8;
    --t-accent: #d83a72;
    --t-soft: #ffe3ee;
    --t-style: normal;
    --t-weight: 700;
    --t-radius: 16px;
    --t-card-radius: 16px;
    --t-orn: none;
    --t-cover:
        radial-gradient(8% 6% at 22% 30%, #fff 0, transparent 100%),
        radial-gradient(6% 5% at 72% 22%, #ffe27a 0, transparent 100%),
        radial-gradient(7% 5% at 58% 58%, #8ee3ff 0, transparent 100%),
        linear-gradient(150deg, #ff8fb1, #7b4ae2);
}

[data-theme='baby-shower'] {
    --t-bg: #fbf7fb;
    --t-ink: #33294a;
    --t-muted: #7c7191;
    --t-line: #ede3ef;
    --t-accent: #8aa9c4;
    --t-soft: #e6eff6;
    --t-style: normal;
    --t-weight: 400;
    --t-radius: 20px;
    --t-card-radius: 20px;
    --t-orn: flex;
    --t-cover:
        radial-gradient(55% 45% at 25% 25%, #ffe6f2 0, transparent 65%),
        radial-gradient(50% 45% at 78% 70%, #d9f0ec 0, transparent 65%),
        linear-gradient(160deg, #cfe3f2, #9d92c4);
}

[data-theme='corporate'] {
    --t-bg: #f5f7fa;
    --t-ink: #14213d;
    --t-muted: #5b6479;
    --t-line: #dde3ec;
    --t-accent: #1f5fd1;
    --t-soft: #e4edfc;
    --t-font: 'Inter', system-ui, sans-serif;
    --t-style: normal;
    --t-weight: 700;
    --t-radius: 10px;
    --t-card-radius: 10px;
    --t-orn: none;
    --t-cover:
        radial-gradient(70% 60% at 80% 10%, #6aa5ff 0, transparent 60%),
        linear-gradient(160deg, #274b8f, #0e1b36);
}

[data-theme='graduation'] {
    --t-bg: #f8f6f1;
    --t-ink: #14203d;
    --t-muted: #6b6980;
    --t-line: #e5e1d8;
    --t-accent: #b08327;
    --t-soft: #f6edd9;
    --t-style: normal;
    --t-weight: 600;
    --t-radius: 8px;
    --t-card-radius: 8px;
    --t-orn: flex;
    --t-cover:
        radial-gradient(65% 55% at 75% 20%, #e8c471 0, transparent 60%),
        linear-gradient(155deg, #253a6b, #0d1428);
}

[data-theme='anniversary'] {
    --t-bg: #fbf6f4;
    --t-ink: #2e1b24;
    --t-muted: #7a6670;
    --t-line: #eee0dc;
    --t-accent: #8e2f45;
    --t-soft: #f6e4e7;
    --t-style: italic;
    --t-weight: 500;
    --t-radius: 999px;
    --t-card-radius: 14px;
    --t-orn: flex;
    --t-cover:
        radial-gradient(70% 55% at 30% 20%, #f3c9b4 0, transparent 60%),
        radial-gradient(60% 60% at 85% 85%, #6b1f33 0, transparent 65%),
        linear-gradient(150deg, #c9738a, #3d1522);
}

[data-theme='holiday-party'] {
    --t-bg: #f4f6f5;
    --t-ink: #14261f;
    --t-muted: #64756c;
    --t-line: #dde6e0;
    --t-accent: #1f6b4a;
    --t-soft: #e2f0e8;
    --t-style: normal;
    --t-weight: 600;
    --t-radius: 12px;
    --t-card-radius: 12px;
    --t-orn: flex;
    --t-cover:
        radial-gradient(5% 4% at 20% 25%, #ffe9a8 0, transparent 100%),
        radial-gradient(4% 3% at 68% 18%, #fff3cc 0, transparent 100%),
        radial-gradient(5% 4% at 80% 62%, #ffe9a8 0, transparent 100%),
        linear-gradient(160deg, #1d5a41, #08201a);
}

* {
    box-sizing: border-box;
    margin: 0;
}

html,
body {
    height: 100%;
    overflow: hidden;
    background: #17110f;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* The icon sprite (partials/icon-sprite.blade.php) uses this Tailwind class
   name. This file has no Tailwind, so it defines the one rule itself. */
.absolute {
    position: absolute;
}

.kp-show {
    display: flex;
    width: 100vw;
    height: 100vh;
    background: #17110f;
    color: #f4ece2;
    container-type: inline-size;
    /* The rail's accent. Filled in from the event theme. */
    --glow: var(--t-accent, #e79273);
}

/* ------------------------------------------------------------------ stage */
.show-stage {
    position: relative;
    flex: 0 0 72%;
    overflow: hidden;
    background: #100c0b;
}

/*
 * A portrait photo on a 16:9 screen would otherwise sit in two black bars.
 * Instead the photo floats on a blurred, darkened copy of itself, so the
 * whole screen is filled and the photo still reads as a print.
 */
.show-fill {
    position: absolute;
    inset: -10%;
    background-size: cover;
    background-position: center;
    filter: blur(2.8cqw) brightness(0.5) saturate(0.85);
    transition: opacity 0.5s;
}

.show-photo {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 60cqw;
    height: 40cqw;
    border: 1cqw solid #fbf8f2;
    box-shadow: 0 1.8cqw 4.4cqw rgba(0, 0, 0, 0.55);
    transition: opacity 0.5s;
    object-fit: cover;
    background: #100c0b;
}

.show-photo.tall {
    width: 30.5cqw;
    height: 45.5cqw;
}

.show-fade {
    opacity: 0;
}

.show-by {
    position: absolute;
    left: 2cqw;
    bottom: 2cqw;
    display: flex;
    align-items: center;
    gap: 0.8cqw;
    padding: 0.5cqw 1.3cqw 0.5cqw 0.5cqw;
    border-radius: 99cqw;
    background: rgba(251, 248, 242, 0.94);
    color: #241c35;
    font-size: 1.15cqw;
    font-weight: 600;
    transition: opacity 0.5s;
}

/* The guest's caption, just above who shared the photo. */
.show-cap {
    position: absolute;
    left: 2cqw;
    bottom: 5.4cqw;
    max-width: 60%;
    padding: 0.7cqw 1.3cqw;
    border-radius: 1cqw;
    background: rgba(251, 248, 242, 0.94);
    color: #241c35;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 1.45cqw;
    line-height: 1.35;
    overflow-wrap: anywhere;
    transition: opacity 0.5s;
}

/* A sponsor's card, over a dimmed photo, every few slides. */
.show-sponsor {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(20, 12, 30, 0.72);
    transition: opacity 0.5s;
    z-index: 3;
}

.show-sponsor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2cqw;
    max-width: 46cqw;
    padding: 3cqw 4cqw;
    border-radius: 1.6cqw;
    background: #fbf8f2;
    color: #241c35;
    text-align: center;
}

.show-sponsor-eye {
    font-size: 1.1cqw;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a8197;
}

.show-sponsor-card img {
    max-width: 26cqw;
    max-height: 12cqw;
    object-fit: contain;
}

.show-sponsor-card b {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2.6cqw;
    font-weight: 500;
    line-height: 1.15;
}

.show-sponsor-card p {
    margin: 0;
    font-size: 1.4cqw;
    line-height: 1.4;
    color: #4a4058;
}

.show-sponsor-card p:empty {
    display: none;
}

.show-by i {
    width: 2.2cqw;
    height: 2.2cqw;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--glow);
    color: #fff;
    font-style: normal;
    font-weight: 700;
    font-size: 1cqw;
}

.show-prog {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.35cqw;
    background: rgba(244, 236, 226, 0.1);
}

.show-prog i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--glow);
}

.show-prog i.run {
    animation: show-grow linear forwards;
}

/* ------------------------------------------------------------------- rail */
.show-rail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 2.6cqw 2.2cqw 2.4cqw;
    border-left: 1px solid rgba(244, 236, 226, 0.1);
}

.show-ev b {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-style: var(--t-style, italic);
    font-weight: var(--t-weight, 500);
    font-size: 2.5cqw;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.show-ev span {
    display: block;
    font-size: 1.05cqw;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a8998c;
    margin-top: 0.7cqw;
}

.show-orn {
    display: var(--t-orn, flex);
    align-items: center;
    gap: 0.8cqw;
    margin-top: 1.3cqw;
    font-size: 0.9cqw;
    color: var(--glow);
}

.show-orn i {
    width: 3cqw;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
    display: block;
}

.show-live {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.7cqw;
    margin-top: 1.3cqw;
    padding: 0.4cqw 1.1cqw;
    border-radius: 99cqw;
    border: 1px solid rgba(244, 236, 226, 0.18);
    font-size: 1.1cqw;
    font-weight: 600;
}

.show-live::before {
    content: '';
    width: 0.7cqw;
    height: 0.7cqw;
    border-radius: 50%;
    background: var(--glow);
    animation: show-pulse 2s infinite;
}

.show-q {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1cqw 0;
    transition: opacity 0.5s;
}

.show-q-m {
    font: italic 500 4.4cqw/0.7 'Fraunces', Georgia, serif;
    color: var(--glow);
    height: 1.9cqw;
}

.show-q p {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.55cqw;
    line-height: 1.45;
    color: #f0e6da;
}

.show-q span {
    display: block;
    font-size: 1.05cqw;
    color: #a8998c;
    margin-top: 0.9cqw;
}

.show-qr {
    text-align: center;
}

.show-qr-card {
    display: block;
    width: fit-content;
    margin: 0 auto;
    background: #fff;
    color: #241c35;
    border-radius: 1cqw;
    padding: 1.1cqw;
}

.show-qr-card svg,
.show-qr-card img {
    display: block;
    width: 15cqw;
    height: auto;
}

.show-qr b {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 1.5cqw;
    line-height: 1.2;
    margin-top: 1.2cqw;
}

.show-qr-url {
    display: block;
    font-size: 1.05cqw;
    color: #a8998c;
    margin-top: 0.35cqw;
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- controls */
/*
 * The controls hide themselves. A slideshow running at a wedding should show
 * photos and nothing else, so they appear on mouse movement and fade again.
 */
.show-ctl {
    position: absolute;
    top: 1.2cqw;
    right: 1.2cqw;
    display: flex;
    gap: 0.6cqw;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 3;
}

.kp-show.awake .show-ctl {
    opacity: 1;
}

.show-ctl button {
    width: 2.8cqw;
    height: 2.8cqw;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(244, 236, 226, 0.16);
    color: #f4ece2;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.show-ctl button:hover {
    background: rgba(244, 236, 226, 0.28);
}

.show-ctl .i {
    width: 1.3cqw;
    height: 1.3cqw;
    min-width: 16px;
    min-height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * If the network drops, the slideshow keeps cycling what it already has and
 * shows this dot. Failing quietly at a wedding beats a white screen.
 */
.show-net {
    position: absolute;
    left: 2cqw;
    top: 2cqw;
    display: none;
    align-items: center;
    gap: 0.6cqw;
    font-size: 1cqw;
    color: #f0e6da;
    background: rgba(20, 12, 30, 0.5);
    padding: 0.4cqw 1cqw;
    border-radius: 99cqw;
    z-index: 3;
}

.show-net.on {
    display: flex;
}

.show-net::before {
    content: '';
    width: 0.6cqw;
    height: 0.6cqw;
    min-width: 7px;
    min-height: 7px;
    border-radius: 50%;
    background: #c9a24b;
    animation: show-pulse 1.4s infinite;
}

.show-waiting {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 4cqw;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 2cqw;
    color: #a8998c;
}

/*
 * Two small utilities that only this screen needs.
 *
 * `hidden` has to win over the display rules above, because the waiting
 * state, the caption, and the video element are switched on and off with it.
 *
 * And a mouse pointer left sitting in the middle of a photo is a pointer on
 * the TV all evening, so it leaves with the controls. The `ready` class is
 * added by the script, so a screen whose JavaScript never ran keeps its
 * pointer.
 */
[hidden] {
    display: none !important;
}

.kp-show.ready:not(.awake) {
    cursor: none;
}

@keyframes show-grow {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes show-pulse {
    50% {
        opacity: 0.3;
    }
}

/*
 * A phone held up to check the screen, or a small laptop. The rail drops
 * below the stage rather than squeezing to nothing.
 */
@media (max-aspect-ratio: 1 / 1) {
    .kp-show {
        flex-direction: column;
    }

    .show-stage {
        flex: 1 1 auto;
    }

    /* The stage is now the full width, so the sizes above come out a third
     * as big as on a TV. These make them readable again. */
    .show-by {
        left: 3cqw;
        bottom: 3cqw;
        gap: 2cqw;
        padding: 1cqw 2.6cqw 1cqw 1cqw;
        font-size: 3cqw;
    }

    .show-by i {
        width: 5.4cqw;
        height: 5.4cqw;
        font-size: 2.4cqw;
    }

    .show-cap {
        left: 3cqw;
        bottom: 12cqw;
        max-width: 84%;
        padding: 1.6cqw 2.8cqw;
        border-radius: 2.2cqw;
        font-size: 3.6cqw;
    }

    .show-sponsor-card {
        gap: 2.4cqw;
        max-width: 82cqw;
        padding: 6cqw 7cqw;
        border-radius: 3cqw;
    }

    .show-sponsor-eye {
        font-size: 2.6cqw;
    }

    .show-sponsor-card img {
        max-width: 52cqw;
        max-height: 24cqw;
    }

    .show-sponsor-card b {
        font-size: 6cqw;
    }

    .show-sponsor-card p {
        font-size: 3.6cqw;
    }

    .show-rail {
        flex: 0 0 auto;
        border-left: 0;
        border-top: 1px solid rgba(244, 236, 226, 0.1);
        flex-direction: row;
        align-items: center;
        gap: 3cqw;
        padding: 3cqw;
    }

    .show-q,
    .show-orn {
        display: none;
    }

    .show-ev b {
        font-size: 4cqw;
    }

    .show-ev span,
    .show-live,
    .show-qr-url {
        font-size: 2cqw;
    }

    .show-qr-card svg,
    .show-qr-card img {
        width: 18cqw;
    }

    .show-qr b {
        font-size: 2.4cqw;
    }
}

/*
 * Spec 7.5. "Photos only", set per event in Settings: the stage fills the
 * whole screen, and the side panel and the "Shared by" line are hidden. The
 * panel stays in the page, hidden, so the script needs no second code path.
 */
.kp-show.photos-only .show-stage {
    flex: 1 1 100%;
}

.kp-show.photos-only .show-rail,
.kp-show.photos-only .show-by {
    display: none !important;
}

.kp-show.photos-only .show-cap {
    bottom: 2cqw;
}

/* The stage is now the whole width, so the print grows into the space the
 * panel left. 76 by 50.6 keeps the 3:2 print and, with its border, still
 * fits the height of a 16:9 screen. */
.kp-show.photos-only .show-photo {
    top: 50%;
    width: 76cqw;
    height: 50.6cqw;
}

.kp-show.photos-only .show-photo.tall {
    width: 33.7cqw;
    height: 50.6cqw;
}