@import url('colori.css');

/* ── Share page layout ────────────────────────────────────────────────────
   The page has two stacked layers that the user scrolls between:
     1. .share-preview — fixed under the header, fills the remaining viewport.
        Hosts the before/after wipe comparison.
     2. .share-panel   — normal-flow content with a blur backdrop that starts
        below the fold and scrolls up over the preview as the user scrolls.
   The header is already position:fixed via .site-header in colori.css. */

:root {
    --share-header-height: 55px;
    --share-preview-gap: 40px;
    /* Visible portion of the panel at scroll=0 — sized to reveal the title
       and full thumbnail row without scrolling, with breathing room. */
    --share-panel-peek: 220px;
}

.share-body {
    /* Document scroll drives the panel-over-preview interaction. */
    overflow-x: hidden;
}

/* ── Fixed preview pane ───────────────────────────────────────────────── */

.share-preview {
    /* Background layer for the preview area. Extends all the way down so the
       panel's backdrop-filter has something to blur as it scrolls up. */
    position: fixed;
    top: var(--share-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: var(--bg-color);
}

.share-preview__viewport {
    /* The active image area — ends exactly at the panel's resting top edge
       so the wipe's contain-fit has equal --share-preview-gap above and
       below the image at scroll = 0. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--share-panel-peek);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--share-preview-gap);
}

.share-preview__wipe {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    /* JS sets explicit width/height in px once the without-image loads, so
       the slider edges align with the image. aspect-ratio is the pre-load
       fallback (children are position:absolute and contribute no size). */
    aspect-ratio: 16 / 9;
    width: min(100%, calc((100vh - var(--share-header-height) - var(--share-panel-peek) - var(--share-preview-gap) * 2) * 16 / 9));
    /* svh: see .share-heading. */
    width: min(100%, calc((100svh - var(--share-header-height) - var(--share-panel-peek) - var(--share-preview-gap) * 2) * 16 / 9));
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    overflow: hidden;
    border-radius: 16px;

    @supports (corner-shape: squircle) {
        border-radius: 28px;
        corner-shape: squircle;
    }

    box-shadow: 0 0 24px rgba(128, 128, 128, 0.2);
}

.share-preview__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Both halves are masked at the wipe boundary so neither image is drawn
   beneath the other — the seam is a single shared edge, avoiding the
   subpixel mismatch that comes from overlaying one image on top of the
   full other. clip-path values are updated inline by JS as the slider
   moves; the pre-JS defaults put the seam at 50% (left=without, right=with). */
.share-preview__img--without {
    clip-path: inset(0 50% 0 0);
}

.share-preview__img--with {
    clip-path: inset(0 0 0 50%);
}

/* While a new with-image src is decoding, hide it so the previous image
   doesn't linger underneath. Cleared on the img's load/error event. */
.share-preview__img--loading {
    visibility: hidden;
}

.share-preview__label {
    position: absolute;
    top: 12px;
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;
    transition: opacity 0.15s ease;
    background-color: rgba(from var(--bg-color) r g b / 0.85);
    padding: 3px 8px 4px 8px;
    border-radius: 8px;
    backdrop-filter: blur(16px);
    /* Hidden when the wipe slider has crossed past the label's bounds. */
}

.share-preview__label--left {
    left: 12px;
}

.share-preview__label--right {
    right: 12px;
}

.share-preview__label--hidden {
    opacity: 0;
}

.share-preview__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
    transform: translateX(-50%);
    pointer-events: none;
}

.share-preview__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    cursor: ew-resize;
    transform: translate(-50%, -50%);
    box-shadow: 0 0px 16px rgba(0, 0, 0, 0.25);
    padding: 0;
}

.share-preview__handle::before,
.share-preview__handle::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transform: translateY(-50%);
}

.share-preview__handle::before {
    left: 10px;
    border-right: 7px solid #1a1a1a;
}

.share-preview__handle::after {
    right: 10px;
    border-left: 7px solid #1a1a1a;
}

/* ── Scrollable blur panel ────────────────────────────────────────────── */

/* The heading sits OUTSIDE the blurred panel so its background is the
   preview's bg-color (not blurred section-bg). It's positioned in flow
   above the panel and scrolls with it. */
.share-heading {
    position: relative;
    z-index: 2;
    /* Push below the fold so the preview is fully visible at scroll = 0. */
    max-width: 1280px;
    margin-top: calc(100vh - var(--share-panel-peek));
    /* svh = viewport height with mobile browser toolbars showing. Plain vh
       on iOS Safari is the toolbars-hidden height, which pushes the panel
       below the visible screen at scroll = 0. vh above is the fallback. */
    margin-top: calc(100svh - var(--share-panel-peek));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--text-color);
    mask: radial-gradient(ellipse at 50% 100%, black 45%, transparent 70%);
    backdrop-filter: blur(24px);
}

.share-heading__title {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin: 0;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0px 0px 32px var(--bg-color), 0px 0px 32px var(--bg-color);
}

.share-heading__effect {
    font-weight: bold;
}

.share-heading__expand {
    /* Inherits the primary .btn fill; this just shapes it as an icon button. */
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    flex: 0 0 auto;
}

.share-heading__expand-icon {
    display: inline-flex;
    font-size: 22px;
    /* Preserve the original 300 wght (previously locked by the font URL)
       now that the URL exposes a 300..700 range. */
    font-weight: 300;
    transition: transform 0.25s ease;
}

.share-heading__expand:hover .share-heading__expand-icon,
.share-heading__expand:focus-visible .share-heading__expand-icon {
    transform: rotate(90deg);
}

/* Reactive: fades out whenever the page has been scrolled, fades back in
   at scrollY = 0. The .btn opacity transition (0.3s) drives the fade. */
.share-heading__expand--hidden {
    opacity: 0;
    pointer-events: none;
}

/* Sticky: once the user has scrolled at all, lock the arrow pointing
   down. Higher specificity than the :hover rule above so the rotation
   wins when the user happens to hover/focus the button after scrolling. */
.share-heading__expand.share-heading__expand--scrolled .share-heading__expand-icon {
    transform: rotate(90deg);
}

.share-panel {
    position: relative;
    z-index: 2;
    /* Sits directly under .share-heading; the heading carries the margin
       that pushes both below the fold. */
    min-height: calc(100vh - 200px);
    min-height: calc(100svh - 200px);
    background-color: rgba(from var(--bg-color) r g b / 0.85);
    backdrop-filter: blur(32px) saturate(140%);
    -webkit-backdrop-filter: blur(32px) saturate(140%);
}

/* ── Thumbnail row ────────────────────────────────────────────────────── */

.share-thumbs-wrap {
    /* Positioned parent for the overlay nav buttons. */
    position: relative;
}

.share-thumbs {
    /* Full page width so the centered track has room for the hover scale
       to spill outside the leftmost/rightmost thumb without being clipped.
       Native scrollbar hidden — navigation is via the overlay buttons. */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.share-thumbs::-webkit-scrollbar {
    display: none;
}

.share-thumbs__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    background-color: var(--scroll-btn-bg);
    /*color: #fff;*/
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hidden by default; combined hover + scrollability gate them visible. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, background-color 0.15s ease;
    z-index: 3;
}

.share-thumbs__nav:hover {
    background-color: var(--scroll-btn-bg-hover);
}

.share-thumbs__nav .material-symbols-rounded {
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    /* Pin the icon to its EM-square and flex-center the glyph inside so
       the visual chevron is centered on the button regardless of the
       font's line-box metrics. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}

/* Per-chevron optical adjustments — the rounded chevron glyphs have a
   sub-pixel asymmetry; nudge each by 1px so they sit visually centered. */
.share-thumbs__nav--left .material-symbols-rounded {
    transform: translate(-1px, 1px);
}

.share-thumbs__nav--right .material-symbols-rounded {
    transform: translate(1px, 1px);
}

.share-thumbs__nav--left {
    left: 16px;
}

.share-thumbs__nav--right {
    right: 16px;
}

/* Two gates: scrolling in that direction must actually be possible
   (--available, set by JS) AND the user must be over the thumbnail
   strip. Both required for the button to fade in and accept clicks. */
        .share-thumbs-wrap:hover .share-thumbs__nav--available,
        .share-thumbs-wrap:focus-within .share-thumbs__nav--available,
        .share-thumbs-wrap--scrolled .share-thumbs__nav--available {
            opacity: 1;
            pointer-events: auto;
        }

        .share-thumbs__track {
            display: flex;
            /* max-content keeps the track the size of its thumbs; auto margins then
       center it when it's narrower than the parent and collapse to 0 when
       it overflows so horizontal scrolling reaches the leftmost thumb. */
            width: max-content;
            margin: 0 auto;
            /* Vertical padding leaves room for the 1.2x hover scale (~10px overshoot
       on a 100px-tall thumb). Horizontal padding leaves the same room when
       the track overflows and the leftmost thumb sits at the parent's edge. */
            /*padding: 16px;*/
            box-sizing: border-box;
            overflow-y: hidden;
        }

        .share-thumb {
            position: relative;
            flex: 0 0 auto;
            width: 224px;
            height: 126px;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            /* Clips the inner image's hover-scale so the thumb's own bounds stay
       fixed during hover. */
            overflow: hidden;
            scroll-snap-align: start;
        }

        .share-thumb--selected {
            cursor: default;
        }

        .share-thumb__img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
            -webkit-user-drag: none;
            /* Hover zoom — scaling the image (not the button) keeps the thumb's
       layout box unchanged and clips the overshoot against the button. */
            transition: transform 0.15s ease;
        }

        .share-thumb:not(.share-thumb--selected):hover .share-thumb__img,
        .share-thumb:not(.share-thumb--selected):focus-visible .share-thumb__img {
            transform: scale(1.2);
        }

        .share-thumb__label {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            /*font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;*/
            font-size: 14px;
            font-weight: 600;
            /*letter-spacing: 0.4px;*/
            /*text-transform: uppercase;*/
            background-color: rgba(0, 0, 0, 0.6);
            text-shadow: 0 0 14px rgba(0, 0, 0, 1), 0 0 24px rgba(0, 0, 0, 1), 0 0 24px rgba(0, 0, 0, 1);
            pointer-events: none;
        }

        .share-thumb--selected .share-thumb__label {
            display: flex;
        }
        /* ── Share form ────────────────────────────────────────────────────────── */

        .share-form {
            max-width: 640px;
            margin: 48px auto 0;
            padding: 0 32px 64px 32px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .share-form__input {
            box-sizing: border-box;
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--input-border);
            border-radius: 12px;
            background-color: var(--input-bg);
            color: var(--text-color);
            font-family: inherit;
            font-size: 15px;
            outline: none;
            transition: border-color 0.15s ease;
        }

            .share-form__input::placeholder {
                color: var(--text-muted);
            }

            .share-form__input:focus {
                border-color: var(--input-border-focus);
            }

        .share-form__input--multiline {
            min-height: 110px;
            resize: vertical;
            line-height: 1.45;
        }

        .share-form__input:disabled {
            color: var(--text-muted);
            cursor: not-allowed;
            opacity: 0.55;
            resize: none;
            background-color: rgba(128, 128, 128, 0.25);
        }

        .share-form__field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .share-form__label {
            font-size: 13px;
            font-weight: 600;
            /* text-transform: uppercase; */
            /* letter-spacing: 0.5px; */
            /* color: var(--text-muted); */
            padding-left: 8px;
        }

        .share-form__prompt {
            margin: 0;
            padding: 0 8px;
            color: var(--text-muted);
            font-size: 15px;
            line-height: 1.45;
            min-height: 40px;
            padding-bottom: 30px;
            /* Preserve any line breaks / whitespace in the prompt string. */
            white-space: pre-wrap;
        }

        .share-form__submit {
            /* Inherits primary .btn styling; just align it to its own row. */
            align-self: center;
            margin-top: 12px;
            min-width: 160px;
        }