/* =====================================================================
   Device Frames (Desktop + Phone) — minimal, brand-agnostic
   - Movement modes: slide | fade
   - Popup overlay (optional, via JS)
   ===================================================================== */

/* ---------------- Vars ---------------- */
:root {
    /* Desktop */
    --desktop-width: 960px;
    --desktop-scale: 1;
    --desktop-radius-outer: 12px;
    --desktop-radius-inner: 8px;
    --desktop-padding: 12px;
    --desktop-line: #d1d5db;
    --desktop-line-w: 1px;

    /* Phone */
    --phone-width: 320px;
    --phone-scale: 1;
    --phone-radius-outer: 26px;
    --phone-radius-inner: 20px;
    --phone-padding: 10px;
    --phone-line: #d1d5db;
    --phone-line-w: 1px;

    /* Carousel / dots */
    --carousel-auto-ms: 4000;
    --carousel-ease: cubic-bezier(.22,.61,.36,1);
    --carousel-slide-ms: 600ms; /* slide transition duration */
    --fade-ms: 280ms; /* fade transition duration */

    --dot-size: 8px;
    --dot-gap: 2px;
    --dot-border: 1px;
    --dot-base: #e5e7eb;
    --dot-active: #999;
    --pill-w: 24px;

    /* Desktop chrome bar */
    --chrome-height: 36px;
    --chrome-bg: #f9fafb;
    --chrome-line: #e5e7eb;
    --chrome-text: #6b7280;
    --chrome-icon-size: 20px;
    --chrome-left-pad: 10px;
    --chrome-right-pad: 10px;
    --chrome-gap: 8px;
    --chrome-url-gap: 8px;
    --chrome-content-gap: 8px;

    /* Popup fixed height */
    --desktop-fixed-h: 560px;
    --phone-fixed-h: 600px;

    --popup-overlay: rgba(0,0,0,.45); /* scrim strength (already supported) */
}

/* Width presets */
.desktop-xs {
    --desktop-width: 720px;
}

.desktop-sm {
    --desktop-width: 840px;
}

.desktop-md {
    --desktop-width: 960px;
}

.desktop-lg {
    --desktop-width: 1080px;
}

.desktop-xl {
    --desktop-width: 1280px;
}

.phone-xs {
    --phone-width: 240px;
}

.phone-sm {
    --phone-width: 280px;
}

.phone-md {
    --phone-width: 320px;
}

.phone-lg {
    --phone-width: 380px;
}

.phone-xl {
    --phone-width: 420px;
}

/* ---------------- Frames ---------------- */
desktop {
    display: block;
    width: min(calc(var(--desktop-width)*var(--desktop-scale,1)),100%);
    margin: 24px auto;
    padding: var(--desktop-padding);
    border: var(--desktop-line-w) solid var(--desktop-line);
    border-radius: var(--desktop-radius-outer);
    background: transparent;
    position: relative;
    overflow: visible;
}

phone {
    display: block;
    width: min(calc(var(--phone-width)*var(--phone-scale,1)),92vw);
    margin: 24px auto;
    padding: var(--phone-padding);
    border: var(--phone-line-w) solid var(--phone-line);
    border-radius: var(--phone-radius-outer);
    background: transparent;
    position: relative;
    overflow: visible;
}

/* Viewport/track/slide shared rules */
:is(phone,desktop) :is(.phone-viewport,.desktop-viewport) {
    position: relative;
    overflow: hidden;
    border-radius: var(--phone-radius-inner, var(--desktop-radius-inner));
}

:is(phone,desktop) :is(.phone-track,.desktop-track) {
    display: flex;
    will-change: transform;
    transition: transform var(--carousel-slide-ms) var(--carousel-ease);
}

:is(phone,desktop) :is(.phone-slide,.desktop-slide) {
    flex: 0 0 100%;
}

/* Figures & media */
:is(phone,desktop) figure {
    margin: 0;
}

:is(phone,desktop) figure > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--phone-radius-inner, var(--desktop-radius-inner));
}

:is(phone,desktop) figure > figcaption {
    margin: 0;
    padding: 5px;
    font-size: 1.3rem;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
}

/* ---------------- Desktop: Chrome bar (CSS-only) ---------------- */
desktop.chrome {
    position: relative;
}

desktop.chrome .desktop-viewport {
    padding-top: calc(var(--chrome-height) + var(--chrome-content-gap));
}

desktop.chrome::before {
    content: "";
    z-index: 2;
    position: absolute;
    left: var(--desktop-padding);
    right: var(--desktop-padding);
    top: var(--desktop-padding);
    height: var(--chrome-height);
    border-top-left-radius: var(--desktop-radius-inner);
    border-top-right-radius: var(--desktop-radius-inner);
    background-repeat: no-repeat,no-repeat,no-repeat;
    background-size: var(--chrome-icon-size) var(--chrome-icon-size), var(--chrome-icon-size) var(--chrome-icon-size), var(--chrome-icon-size) var(--chrome-icon-size);
    background-position: left calc(var(--chrome-left-pad)) center, left calc(var(--chrome-left-pad) + var(--chrome-icon-size) + var(--chrome-gap)) center, right calc(var(--chrome-right-pad)) center;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='14,6 8,12 14,18' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='10,6 16,12 10,18' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><line x1='7' y1='7' x2='17' y2='17' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round'/><line x1='17' y1='7' x2='7' y2='17' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round'/></svg>");
}

desktop.chrome::after {
    content: attr(data-title);
    position: absolute;
    z-index: 3;
    top: calc(var(--desktop-padding) + (var(--chrome-height) - 22px)/2);
    left: calc(var(--desktop-padding) + var(--chrome-left-pad) + (2*var(--chrome-icon-size)) + var(--chrome-gap) + var(--chrome-url-gap));
    right: calc(var(--desktop-padding) + var(--chrome-right-pad) + var(--chrome-icon-size) + var(--chrome-url-gap));
    height: 22px;
    padding: 0 10px;
    border: 1px solid var(--chrome-line);
    border-radius: 11px;
    background: #fff;
    color: var(--chrome-text);
    font: 500 12px/22px ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* ---------------- Phone: iPhone header (Dynamic Island outline only) ---------------- */
phone.iPhone {
    --status-color: rgba(0,0,0,.9);
    --status-top: 10px;
    --status-gap: 10px;
    --island-width: clamp(120px,36%,220px);
    --island-height: 18px;
    --island-line-w: 1.25px;
    --_status-center: calc(var(--phone-padding) + var(--status-top) - 6px + 10px/2);
    position: relative;
}

phone.iPhone .phone-viewport {
    position: relative;
}

phone.iPhone .phone-track {
    position: relative;
}

phone.iPhone .phone-viewport::before {
    content: "";
    position: absolute;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--_status-center) - var(--island-height)/2);
    width: var(--island-width);
    height: var(--island-height);
    border: var(--island-line-w) solid var(--phone-line);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

/* ---------------- Carousel dots (phone + desktop) ---------------- */
:is(phone,desktop) :is(.phone-dots,.desktop-dots) {
    display: flex;
    justify-content: center;
    gap: var(--dot-gap);
    z-index: 3;
}

:is(phone,desktop) :is(.phone-dot,.desktop-dot) {
    width: var(--pill-w);
    height: var(--dot-size);
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
}

:is(phone,desktop) :is(.phone-dot,.desktop-dot)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 999px;
    background: var(--dot-base);
    border: var(--dot-border) solid #cbd5e1;
    transition: width 220ms var(--carousel-ease), border-radius 220ms var(--carousel-ease);
}

:is(phone,desktop) :is(.phone-dot.is-active,.phone-dot[aria-current="true"],.desktop-dot.is-active,.desktop-dot[aria-current="true"])::before {
    width: var(--pill-w);
    height: var(--dot-size);
    border-radius: var(--dot-size);
}

:is(phone,desktop) :is(.phone-dot,.desktop-dot)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scaleX(0);
    transform-origin: left center;
    width: var(--pill-w);
    height: var(--dot-size);
    border-radius: var(--dot-size);
    background: var(--dot-active);
}

:is(phone,desktop) :is(.phone-dot.is-active,.phone-dot[aria-current="true"],.desktop-dot.is-active,.desktop-dot[aria-current="true"])::after {
    animation: dotFill calc(var(--carousel-auto-ms) * 1ms) linear forwards;
}

@keyframes dotFill {
    from {
        transform: translate(-50%,-50%) scaleX(0);
    }

    to {
        transform: translate(-50%,-50%) scaleX(1);
    }
}

:is(phone,desktop):hover :is(.phone-dot.is-active,.desktop-dot.is-active)::after,
:is(phone,desktop):focus-within :is(.phone-dot.is-active,.desktop-dot.is-active)::after {
    animation-play-state: paused;
}

/* ---------------- Movement Modes ---------------- */

/* SLIDE: (default). Index math handled in JS; no direction concept */
.mode-slide :is(.phone-track,.desktop-track) {
    transition: transform var(--carousel-slide-ms) var(--carousel-ease);
}

/* FADE: stack slides; JS toggles aria-hidden + syncs height */
.mode-fade :is(.phone-track,.desktop-track) {
    position: relative;
    display: block;
    transform: none !important;
    transition: none;
}

.mode-fade :is(.phone-slide,.desktop-slide) {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fade-ms) ease;
}

.mode-fade :is(.phone-slide[aria-hidden="false"],.desktop-slide[aria-hidden="false"]) {
    opacity: 1;
    pointer-events: auto;
}

.mode-fade :is(.phone-viewport,.desktop-viewport) {
    min-height: 120px;
}
/* safety before JS sync */

/* ---------------- Popup Overlay ---------------- */
/* Popup anchored to the device viewport area */
:is(phone,desktop) :is(.phone-viewport,.desktop-viewport) .carousel-popup {
    position: absolute;
    inset: 0; /* exactly matches the viewport box */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50; /* above slides, below island outline if any */
    pointer-events: auto;
    border-radius: inherit; /* match viewport's inner rounding */
    overflow: hidden; /* clip scrim to rounded corners */
}

:is(phone,desktop) .carousel-popup.is-active {
    display: flex;
}

/* Scrim fills the same rounded box */
:is(phone,desktop) :is(.phone-viewport,.desktop-viewport) .carousel-popup__scrim {
    position: absolute;
    inset: 0;
    background: var(--popup-overlay, rgba(0,0,0,.45));
    opacity: 1;
    transition: opacity var(--fade-ms) ease;
    pointer-events: none; /* don’t block clicks */
    z-index: 0;
}

/* Activate */
:is(phone,desktop) .carousel-popup.is-active {
    display: flex;
}

/* Optional: if you need to keep clear of dots or top UI, use insets */
:is(phone,desktop) :is(.phone-viewport,.desktop-viewport) {
    /* safe-area + UI helpers; adjust as needed */
    --_safe-top: env(safe-area-inset-top, 0px);
    --_safe-bottom: env(safe-area-inset-bottom, 0px);
    --popup-top-gap: 20px;
    --popup-bottom-gap: 12px;
    --_dots-h: calc(var(--dot-size) + (var(--dot-border)*2) + 6px);
    --popup-inset-top: max(var(--_safe-top), var(--popup-top-gap));
    --popup-inset-bottom: max(var(--_safe-bottom), var(--_dots-h), var(--popup-bottom-gap));
}

/* Use computed insets if you must avoid overlaying top/bottom UI */
:is(phone,desktop) :is(.phone-viewport,.desktop-viewport) .carousel-popup,
:is(phone,desktop) :is(.phone-viewport,.desktop-viewport) .carousel-popup__scrim {
    inset: var(--popup-inset-top) 0 var(--popup-inset-bottom);
}


/*:is(phone,desktop) .carousel-popup.is-active .carousel-popup__scrim { opacity: 1; }
:is(phone,desktop) .carousel-popup.is-active.exit .carousel-popup__scrim { opacity: 0; }*/

.carousel-popup__inner {
    position: relative;
    max-width: 95%;
    max-height: 95%;
    background: rgba(255,255,255,0.98);
    border-radius: var(--phone-radius-outer);
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    overflow: hidden;
    animation: popup-in 220ms ease;
}

@keyframes popup-in {
    from {
        transform: scale(.96);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

:is(phone,desktop) .carousel-popup__wm {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font: 800 var(--wm-size, clamp(24px, 10vw, 120px))/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: rgba(0,0,0,1);
    opacity: var(--wm-opacity, .12);
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(-24deg);
    mix-blend-mode: multiply;
    user-select: none;
    white-space: nowrap;
}

/* Optional corner style */
:is(phone,desktop) .carousel-popup__wm.wm-corner {
    inset: auto;
    right: 12px;
    bottom: 10px;
    transform: none;
    font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    opacity: .35;
    letter-spacing: .04em;
}

/* ---------------- Utilities ---------------- */
phone.flat {
    --phone-padding: 0;
    --phone-radius-inner: var(--phone-radius-outer);
}

@supports (transform:scale(.5)) {
    phone.hairline {
        border: 0;
    }

    phone.hairline::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid var(--phone-line);
        border-radius: var(--phone-radius-outer);
        transform: scale(.5);
        transform-origin: 0 0;
        pointer-events: none;
    }
}

/* Shadows */
:is(phone,desktop).shadow {
    box-shadow: 0 12px 30px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
}

:is(phone,desktop).shadow-sm {
    box-shadow: 0 6px 16px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.06);
}

:is(phone,desktop).shadow-lg {
    box-shadow: 0 20px 50px rgba(0,0,0,.24), 0 6px 18px rgba(0,0,0,.12);
}

:is(phone,desktop).shadow-none {
    box-shadow: none;
}

:is(phone,desktop).shadow-inset :is(.phone-viewport,.desktop-viewport) {
    box-shadow: inset 0 -40px 40px rgba(0,0,0,.04);
}

/* ---------------- Prefer dark / forced-colors ---------------- */
@media (prefers-color-scheme:dark) {
    phone {
        --phone-line: #3f3f46;
    }

    :is(phone,desktop) figure > figcaption {
        color: #a1a1aa;
    }

    desktop.chrome::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='14,6 8,12 14,18' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='10,6 16,12 10,18' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><line x1='7' y1='7' x2='17' y2='17' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round'/><line x1='17' y1='7' x2='7' y2='17' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round'/></svg>");
    }
}

@media (forced-colors:active) {
    phone {
        border-color: CanvasText;
    }

    :is(phone,desktop) :is(.phone-viewport,.desktop-viewport) {
        border-color: CanvasText;
    }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce) {
    :is(phone,desktop) :is(.phone-track,.desktop-track) {
        transition: none;
    }

    :is(phone,desktop) :is(.phone-dot.is-active,.desktop-dot.is-active)::after {
        animation: none;
    }

    .mode-fade :is(.phone-slide,.desktop-slide) {
        transition: none;
    }

    :is(phone,desktop) .carousel-popup__inner {
        animation: none;
    }
}


/* Popup exit animation */
@keyframes popup-out {
    from { transform: scale(1);   opacity: 1; }
    to   { transform: scale(.96); opacity: 0; }
}
:is(phone,desktop) .carousel-popup.is-active.exit .carousel-popup__inner {
    animation: popup-out var(--fade-ms) ease forwards;
}