/* ==========================================================================
   XL Monitor Slider - Frontend
   ========================================================================== */

/* Prevent the 100vw full-bleed below from ever adding a horizontal scrollbar. */
html {
    overflow-x: clip;
}

.xlms-wrapper {
    position: relative;
    /* Full-bleed: break out of the theme's content column so the background
       (applied inline on this element) spans the ENTIRE viewport width.
       The inner .xlms-stage keeps its 1100px cap and stays centered. */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 20px 20px 60px;
    box-sizing: border-box;
    overflow: hidden;
}

/* `overflow:hidden` above is only there to stop the 100vw full-bleed from
   producing a horizontal scrollbar — but it also clips vertically, and the
   3-D transitions grow taller than the stage as they swing, so the top of the
   monitor was being shaved off mid-flip. Clip the horizontal axis only. */
@supports (overflow: clip) {
    .xlms-wrapper {
        overflow: visible;
        overflow-x: clip;
    }
}

.xlms-wrapper * {
    box-sizing: border-box;
}

/* Hard reset for any <button> the theme might otherwise restyle. */
.xlms-wrapper button.xlms-arrow,
.xlms-wrapper button.xlms-dot {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    box-shadow: none;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    font-family: inherit;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    background-image: none !important;
    outline: none;
}

.xlms-wrapper button.xlms-arrow:focus,
.xlms-wrapper button.xlms-dot:focus,
.xlms-wrapper button.xlms-arrow:hover,
.xlms-wrapper button.xlms-dot:hover,
.xlms-wrapper button.xlms-arrow:active,
.xlms-wrapper button.xlms-dot:active {
    outline: none;
    text-decoration: none !important;
    background-image: none !important;
}

/* Stage holds arrows + monitor in one row. */
.xlms-wrapper .xlms-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------- Arrows ---------- */
.xlms-wrapper button.xlms-arrow {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: color .2s ease !important;
    height: 26px !important;
    width: auto !important;
    margin-top: -15% !important;
}

.xlms-wrapper button.xlms-prev {
    color: #778AA9 !important;
}

.xlms-wrapper button.xlms-next {
    color: #778AA9 !important;
}

.xlms-wrapper button.xlms-arrow:hover,
.xlms-wrapper button.xlms-arrow:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
}

.xlms-wrapper button.xlms-prev:hover,
.xlms-wrapper button.xlms-prev:focus-visible {
    color: #191919 !important;
}

.xlms-wrapper button.xlms-next:hover,
.xlms-wrapper button.xlms-next:focus-visible {
    color: #191919 !important;
}

.xlms-wrapper .xlms-arrow-svg {
    flex: 0 0 auto;
    display: block;
}

/* Higher specificity (0,3,1) beats the theme's bare `span` (0,0,1) even with !important */
.xlms-wrapper button.xlms-arrow .xlms-arrow-text {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    font-style: normal !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
}


/* ---------- Stage / Slide Area ---------- */
.xlms-stage-area {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: 610px;
    aspect-ratio: 6 / 5;   /* default: full iMac monitor incl. stand; overridden per-slider via inline style */
    background: transparent;
    overflow: hidden;
}

/* ---------- Monitor Frame Overlay ---------- */
.xlms-monitor-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 10;
    pointer-events: none;
    display: block;
}

/* ---------- Slides ---------- */
.xlms-slides {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Promote the clip container to its own layer so it composites together
       with the slides (which use will-change/transform). Without this the
       overflow:hidden clip rounds at the fractional %-positions and shaves a
       thin sliver off the top-left of the image mid-transition. */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* When monitor frame is set, constrain slides to the screen area only */
.xlms-stage-area.has-monitor-frame .xlms-slides {
    top:    var(--xlms-screen-top,    3%);
    left:   var(--xlms-screen-left,   4%);
    right:  var(--xlms-screen-right,  4%);
    bottom: var(--xlms-screen-bottom, 28%);
    inset:  unset;
}

/* ---------- Don't clip the monitor mid-transition ----------
   Two separate cuts were coming from this clip:
   - flip / zoom / rotate swing the slide through 3-D space, and with
     perspective applied the edge nearest the viewer projects WIDER than the
     slide's own box, so the monitor's near edge was sliced off by a hard line
     for the length of the transition;
   - even on a plain fade, an `overflow:hidden` box that lands on a fractional
     device pixel shaves a hairline sliver off the top-left of the image while
     the composited slides cross-fade.
   Sliders without a monitor frame have no screen cut-out to respect, so they
   simply don't need the mask — only the four slide-* animations do, since they
   rely on it to hide the incoming image until it has travelled in. Selecting by
   "not a slide-* animation" also fixes a stale-name bug: the old list said
   `.xlms-anim-zoom`, but the real classes are `.xlms-anim-zoom-in` /
   `.xlms-anim-zoom-out`, so zoom sliders never actually got the exemption.
   A framed slider always keeps the mask — its picture must stay in the screen. */
.xlms-wrapper:not(:is(.xlms-anim-slide-left, .xlms-anim-slide-right, .xlms-anim-slide-up, .xlms-anim-slide-down)) .xlms-stage-area:not(.has-monitor-frame),
.xlms-wrapper:not(:is(.xlms-anim-slide-left, .xlms-anim-slide-right, .xlms-anim-slide-up, .xlms-anim-slide-down)) .xlms-stage-area:not(.has-monitor-frame) .xlms-slides {
    overflow: visible;
}

.xlms-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: opacity, transform;
}

.xlms-slide a,
.xlms-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.xlms-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ---------- Mobile slide: center in the FULL stage ----------
   Per-slide "Mobile image" toggle. A phone/mobile mockup ignores the monitor
   screen-area inset and is centered (both axes) in the whole stage. */
.xlms-slide--mobile {
    align-items: center;
    justify-content: center;
}
.xlms-slide--mobile img {
    object-fit: contain;
    object-position: center center;
    /* Optical centring. Phone mockups are exported with the handsets sitting
       off to one side of their canvas (empty space + soft shadow on the other),
       so `object-fit: contain` centres the FILE and the devices still read as
       off-centre next to the monitor slides. frontend.js measures where the
       solid artwork actually sits and fills these in; with JS off they stay 0
       and nothing moves. */
    transform: translate(var(--xlms-art-dx, 0px), var(--xlms-art-dy, 0px));
}
/* When a monitor frame confines the slides to the screen region, expand the
   slides layer to the full stage while a mobile slide is showing (and hide the
   monitor frame), so the mobile image sits centered in the whole stage instead
   of inside the small screen area. No effect on frame-less sliders. */
.xlms-stage-area.has-monitor-frame .xlms-slides:has(.xlms-slide--mobile.is-active) {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    inset: 0;
}
.xlms-stage-area.has-monitor-frame:has(.xlms-slide--mobile.is-active) .xlms-monitor-frame {
    opacity: 0;
    visibility: hidden;
}

/* ---------- Animations ---------- */
/* Fade (default) — handled by base styles. */

/* Slide Left */
.xlms-anim-slide-left .xlms-slide                  { transform: translateX( 100%); }
.xlms-anim-slide-left .xlms-slide.is-active        { transform: translateX(0); }
.xlms-anim-slide-left .xlms-slide.is-leaving       { transform: translateX(-100%); opacity: 1; visibility: visible; }

/* Slide Right */
.xlms-anim-slide-right .xlms-slide                 { transform: translateX(-100%); }
.xlms-anim-slide-right .xlms-slide.is-active       { transform: translateX(0); }
.xlms-anim-slide-right .xlms-slide.is-leaving      { transform: translateX( 100%); opacity: 1; visibility: visible; }

/* Slide Up */
.xlms-anim-slide-up .xlms-slide                    { transform: translateY( 100%); }
.xlms-anim-slide-up .xlms-slide.is-active          { transform: translateY(0); }
.xlms-anim-slide-up .xlms-slide.is-leaving         { transform: translateY(-100%); opacity: 1; visibility: visible; }

/* Slide Down */
.xlms-anim-slide-down .xlms-slide                  { transform: translateY(-100%); }
.xlms-anim-slide-down .xlms-slide.is-active        { transform: translateY(0); }
.xlms-anim-slide-down .xlms-slide.is-leaving       { transform: translateY( 100%); opacity: 1; visibility: visible; }

/* Zoom In */
.xlms-anim-zoom-in .xlms-slide                     { transform: scale(.6); }
.xlms-anim-zoom-in .xlms-slide.is-active           { transform: scale(1); }
.xlms-anim-zoom-in .xlms-slide.is-leaving          { transform: scale(1.4); opacity: 0; visibility: visible; }

/* Zoom Out */
.xlms-anim-zoom-out .xlms-slide                    { transform: scale(1.4); }
.xlms-anim-zoom-out .xlms-slide.is-active          { transform: scale(1); }
.xlms-anim-zoom-out .xlms-slide.is-leaving         { transform: scale(.6); opacity: 0; visibility: visible; }

/* Flip */
.xlms-anim-flip .xlms-slides                       { perspective: 1000px; }
.xlms-anim-flip .xlms-slide                        { transform: rotateY(90deg); }
.xlms-anim-flip .xlms-slide.is-active              { transform: rotateY(0); }
.xlms-anim-flip .xlms-slide.is-leaving             { transform: rotateY(-90deg); opacity: 0; visibility: visible; }

/* Rotate */
.xlms-anim-rotate .xlms-slide                      { transform: rotate(90deg) scale(.4); }
.xlms-anim-rotate .xlms-slide.is-active            { transform: rotate(0) scale(1); }
.xlms-anim-rotate .xlms-slide.is-leaving           { transform: rotate(-90deg) scale(.4); opacity: 0; visibility: visible; }


/* ---------- Pagination ---------- */
.xlms-wrapper .xlms-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    /* Sits directly under the monitor. -30px used to jam it against the stand
       and 24px opened too wide a gap, so the row now hangs off the stage box
       itself — the only air left is the transparent margin inside the mockup. */
    margin-top: 0;
    padding: 0 10px;
    /* Wrap instead of overflowing: with 10+ slides the number row is wider than
       a phone, and `.xlms-wrapper { overflow:hidden }` used to clip the last
       dots clean off. Wrapping pushes the extras onto a second centred line, so
       every number stays reachable on every screen size. */
    flex-wrap: wrap;
    row-gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.xlms-wrapper .xlms-pagination-line {
    display: block;
    /* Zero flex-basis + grow: the wrap algorithm measures a flex item by its
       BASE size, so an 80px basis would push a dot (or the rule itself) onto a
       second row even though the rule is only decorative. At basis 0 it never
       causes a break — it just absorbs whatever slack the row has left, up to
       its 80px design length. */
    flex: 1 1 0;
    width: auto;
    max-width: 80px;
    min-width: 0;
    height: 0;
    border: none;
    border-top: 1px solid #778AA9;
    pointer-events: none;
}

/* Balanced wrap. Plain flex wrapping fills row 1 to the brim and strands the
   leftovers ("…10 11" / "12"), so when the numbers genuinely don't fit on one
   line, frontend.js switches the row to an evenly-columned grid and sets the
   column count — a 12-slide slider then reads as [— 01…06] / [07…12 —], with
   the two decorative rules bookending the block exactly as on desktop. */
.xlms-wrapper .xlms-pagination.is-wrapped {
    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: center;
}
.xlms-wrapper .xlms-pagination.is-wrapped .xlms-pagination-line {
    justify-self: stretch;
    max-width: none;
}

.xlms-wrapper button.xlms-dot {
    position: relative !important;
    z-index: 1 !important;
    width: auto !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 5px !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: #778AA9 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease !important;
    box-shadow: none !important;
    flex: 0 0 auto !important;
}

/* ---------- Truncated number range ----------
   Only a window of numbers around the active slide is shown, with the first and
   last always present and an ellipsis standing in for each hidden run
   (01 … 08 [09] 10 … 12). frontend.js decides which buttons carry
   `.xlms-dot--hidden` and where the ellipses sit; every number stays in the DOM
   (and reachable via arrows/keyboard/swipe), it just isn't painted. */
.xlms-wrapper button.xlms-dot--hidden {
    display: none !important;
}

.xlms-wrapper .xlms-ellipsis {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 34px;
    padding: 0 2px;
    color: #778AA9;
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    user-select: none;
    pointer-events: none;
}

.xlms-wrapper button.xlms-dot:hover {
    color: #778AA9 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.xlms-wrapper button.xlms-dot.is-active {
    width: 47px !important;
    height: 47px !important;
    border-radius: 50% !important;
    background: #E2F4FF !important;
    background-color: #E2F4FF !important;
    border: 2px solid #35B6FF !important;
    color: #35B6FF !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transform: none !important;
}

.xlms-wrapper button.xlms-dot:focus { outline: none !important; }
.xlms-wrapper button.xlms-dot:focus-visible {
    border-color: #35B6FF !important;
    box-shadow: 0 0 0 3px rgba(53,182,255,.25) !important;
}

/* ==========================================================================
   Scroll Reveal — "Light Scan" (premium, slow, unique)
   The monitor floats up into place, then the screen image is painted in from
   left to right behind a bright glowing scan-edge that sweeps across it — like
   a scanner laying down the picture — before the arrows and pagination fade up.
   Gated behind a reduced-motion guard so users who opt out just see the
   slider fully rendered.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

    /* --- Pre-reveal state (in effect from first paint, before scroll) --- */
    .xlms-wrapper .xlms-stage-area {
        opacity: 0;
        transform: translateY(30px) scale(.975);
        transition:
            opacity   .9s  ease,
            transform 1.3s cubic-bezier(.16, 1, .3, 1);
    }

    /* Screen hidden, revealed by a left-to-right wipe. */
    .xlms-wrapper .xlms-slides {
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1.5s cubic-bezier(.16, 1, .3, 1) .4s;
    }

    /* Bright vertical scan edge that rides the wipe front. */
    .xlms-wrapper .xlms-slides::before {
        content: "";
        position: absolute;
        top: -5%;
        left: 0;
        width: 14px;
        height: 110%;
        z-index: 6;
        pointer-events: none;
        opacity: 0;
        transform: translateX(-50%);
        background: linear-gradient(90deg,
            rgba(255, 255, 255, 0)  0%,
            rgba(255, 255, 255, .9) 50%,
            rgba(255, 255, 255, 0)  100%);
        box-shadow: 0 0 24px 7px rgba(255, 255, 255, .7);
    }

    .xlms-wrapper button.xlms-arrow {
        opacity: 0;
        transition:
            opacity 1s  ease 1.35s,
            color   .2s ease !important;
    }

    .xlms-wrapper button.xlms-dot,
    .xlms-wrapper .xlms-pagination-line {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity   .8s ease,
            transform .8s cubic-bezier(.16, 1, .3, 1),
            color     .25s ease !important;
    }

    /* The ellipses join the same cascade. Their delay is baked in here rather
       than set from JS like the numbers', because they are inserted and moved
       as the active slide changes. */
    .xlms-wrapper .xlms-ellipsis {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity   .8s ease 1.4s,
            transform .8s cubic-bezier(.16, 1, .3, 1) 1.4s;
    }

    /* --- Revealed state --- */
    .xlms-wrapper.is-revealed .xlms-stage-area {
        opacity: 1;
        transform: none;
    }
    .xlms-wrapper.is-revealed .xlms-slides {
        clip-path: inset(0 0 0 0);
    }
    /* The wipe's end state is a clip rectangle exactly the size of the slide
       box, and a clip-path keeps clipping long after the entrance is over — so
       it chopped the flip's near edge, and on a fade it left the same hairline
       cut at the top-left that overflow did (a clip edge on a fractional device
       pixel). Land the wipe on a rectangle larger than the box so it stops
       masking altogether once the reveal has played out. Same scope as the
       overflow rule above: every frameless slider except the slide-* ones,
       which still need the mask to hide the incoming image. */
    .xlms-wrapper.is-revealed:not(:is(.xlms-anim-slide-left, .xlms-anim-slide-right, .xlms-anim-slide-up, .xlms-anim-slide-down))
    .xlms-stage-area:not(.has-monitor-frame) .xlms-slides {
        clip-path: inset(-50% -50% -50% -50%);
    }
    .xlms-wrapper.is-revealed .xlms-slides::before {
        animation: xlms-scan 1.5s cubic-bezier(.16, 1, .3, 1) .4s 1 both;
    }
    .xlms-wrapper.is-revealed button.xlms-arrow { opacity: 1; }
    .xlms-wrapper.is-revealed button.xlms-dot,
    .xlms-wrapper.is-revealed .xlms-ellipsis,
    .xlms-wrapper.is-revealed .xlms-pagination-line {
        opacity: 1;
        transform: translateY(0);
    }

    @keyframes xlms-scan {
        0%   { opacity: 0; left: 0%; }
        12%  { opacity: 1; }
        88%  { opacity: 1; }
        100% { opacity: 0; left: 100%; }
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .xlms-wrapper { padding: 40px 12px 60px; }
    .xlms-wrapper .xlms-stage { gap: 12px; }
    .xlms-wrapper .xlms-stage-area { max-width: 480px; }
    .xlms-wrapper .xlms-arrow-text { display: none !important; }
    .xlms-wrapper button.xlms-arrow { padding: 10px 4px !important; }
}

/* The old "crowded sliders (10+ slides)" block that shrank the numbers between
   601px and 900px is gone: the range is truncated now, so a 12-slide slider
   renders the same handful of numbers as a 5-slide one and there is nothing left
   to compensate for. Every slider keeps the full-size numbers at every width. */

@media (max-width: 600px) {
    .xlms-wrapper { padding: 30px 8px 50px; }
    .xlms-wrapper .xlms-stage {
        position: relative;
        gap: 12px;
    }

    /* Keep arrows as flex items with a visible touch target */
    .xlms-wrapper button.xlms-arrow {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        background: transparent !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        width: auto !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 8px !important;
        justify-content: center !important;
        backdrop-filter: none !important;
        flex-shrink: 0 !important;
    }
    .xlms-wrapper button.xlms-prev { color: #778AA9 !important; }
    .xlms-wrapper button.xlms-next { color: #778AA9 !important; }

    .xlms-wrapper .xlms-pagination { gap: 8px; row-gap: 8px; margin-top: 8px; padding: 0 8px; }
    .xlms-wrapper .xlms-pagination-line { flex: 1 1 0; width: auto; max-width: 40px; }
    .xlms-wrapper button.xlms-dot {
        width: auto !important;
        min-width: 26px !important;
        height: 26px !important;
        padding: 0 3px !important;
        font-size: 17px !important;
    }
    .xlms-wrapper button.xlms-dot.is-active {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 17px !important;
    }
    .xlms-wrapper .xlms-ellipsis {
        min-width: 18px;
        height: 26px;
        font-size: 17px;
    }
}

@media (max-width: 400px) {
    .xlms-wrapper .xlms-pagination { gap: 5px; row-gap: 8px; padding: 0 4px; }
    .xlms-wrapper .xlms-pagination-line { flex: 1 1 0; width: auto; max-width: 24px; }
    .xlms-wrapper button.xlms-dot {
        width: auto !important;
        min-width: 22px !important;
        height: 22px !important;
        padding: 0 2px !important;
        font-size: 14px !important;
    }
    .xlms-wrapper button.xlms-dot.is-active {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 14px !important;
    }
    .xlms-wrapper .xlms-ellipsis {
        min-width: 14px;
        height: 22px;
        font-size: 14px;
    }
}