/*!
 * Themeasy — Device Showcase
 *
 * Pure-CSS device mockups (browser window, laptop, phone) around a screenshot
 * or an ambient video, with an optional companion phone overlapping the corner.
 * The whole structure is static CSS and complete without JavaScript: GSAP only
 * layers the scroll-linked float and the glare sweep on top (the glare band
 * rests translated off-screen, so it is invisible with no JS, in the editor,
 * and under reduced motion). The companion phone reserves its overhang as stage
 * padding, so the composition never overflows the page horizontally.
 *
 * Hardware finishes (frame, bar, dots, screen) are widget-scoped custom
 * properties: the Frame Theme control picks the dark/light preset and the
 * style controls override individual tokens. Phone corners are functional
 * hardware radii and stay round on sharp themes (the pill precedent); the
 * browser/laptop shells ride the theme radius tokens.
 *
 * Tokens consumed: --tms-radius-md, --tms-shadow-lg, --tms-primary-color
 * (public --tms-* design API).
 *
 * @author Themeasy
 * @link https://themeasy.co
 * @since 1.0.0
 */
.tms-device-showcase{--tms-device-showcase-frame-bg:#171921;--tms-device-showcase-frame-border:#ffffff1f;--tms-device-showcase-bar-bg:#ffffff0a;--tms-device-showcase-address-bg:#ffffff12;--tms-device-showcase-address-color:#fff9;--tms-device-showcase-screen-bg:#0d0e13;--tms-device-showcase-glare-color:#ffffffd9;--tms-device-showcase-glare-opacity:.35;--tms-device-showcase-companion-size:30%;--tms-device-showcase-companion-offset-x:8%;--tms-device-showcase-companion-offset-y:6%;width:100%;position:relative}.tms-device-showcase--light{--tms-device-showcase-frame-bg:#eef0f4;--tms-device-showcase-frame-border:#0f12191a;--tms-device-showcase-bar-bg:#0f121908;--tms-device-showcase-address-bg:#0f12190f;--tms-device-showcase-address-color:#0f12198c;--tms-device-showcase-screen-bg:#fff}.tms-device-showcase__stage{width:100%;margin-left:auto;margin-right:auto;position:relative}.tms-device-showcase--has-companion.tms-device-showcase--companion-right .tms-device-showcase__stage{padding-right:var(--tms-device-showcase-companion-offset-x,8%);padding-bottom:var(--tms-device-showcase-companion-offset-y,6%)}.tms-device-showcase--has-companion.tms-device-showcase--companion-left .tms-device-showcase__stage{padding-bottom:var(--tms-device-showcase-companion-offset-y,6%);padding-left:var(--tms-device-showcase-companion-offset-x,8%)}.tms-device-showcase--phone .tms-device-showcase__stage{max-width:380px}.tms-device-showcase__device--main{z-index:1;position:relative}.tms-device-showcase__device--companion{z-index:2;width:var(--tms-device-showcase-companion-size,30%);position:absolute;bottom:0}.tms-device-showcase--companion-right .tms-device-showcase__device--companion{right:0}.tms-device-showcase--companion-left .tms-device-showcase__device--companion{left:0}.tms-device-showcase:not(.tms-device-showcase--static)[data-float] .tms-device-showcase__device--main,.tms-device-showcase:not(.tms-device-showcase--static)[data-float] .tms-device-showcase__device--companion{will-change:transform}.tms-device-showcase__frame{background:var(--tms-device-showcase-frame-bg,#171921);border:1px solid var(--tms-device-showcase-frame-border,#ffffff1f);box-shadow:var(--tms-shadow-lg,0 40px 80px -32px #0a0c1873);position:relative;overflow:hidden}.tms-device-showcase__frame--browser{border-radius:var(--tms-radius-md,12px)}.tms-device-showcase__bar{background:var(--tms-device-showcase-bar-bg,#ffffff0a);border-bottom:1px solid var(--tms-device-showcase-frame-border,#ffffff1f);grid-template-columns:1fr minmax(0,58%) 1fr;align-items:center;padding:11px 14px;display:grid}.tms-device-showcase__dots{grid-column:1;justify-self:start;gap:7px;display:flex}.tms-device-showcase__dot{border-radius:50%;width:10px;height:10px}.tms-device-showcase__dot:first-child{background:var(--tms-device-showcase-dot-color,#ff5f57)}.tms-device-showcase__dot:nth-child(2){background:var(--tms-device-showcase-dot-color,#febc2e)}.tms-device-showcase__dot:nth-child(3){background:var(--tms-device-showcase-dot-color,#28c840)}.tms-device-showcase__address{letter-spacing:.01em;max-width:100%;color:var(--tms-device-showcase-address-color,#fff9);text-overflow:ellipsis;white-space:nowrap;background:var(--tms-device-showcase-address-bg,#ffffff12);border-radius:999px;grid-column:2;justify-self:center;padding:5px 16px;font-size:11px;line-height:1.2;overflow:hidden}.tms-device-showcase__frame--laptop{border-radius:var(--tms-radius-md,12px) var(--tms-radius-md,12px) 0 0;border-bottom:0;padding:10px 10px 12px}.tms-device-showcase__frame--laptop .tms-device-showcase__screen{border-radius:6px}.tms-device-showcase__base{background:var(--tms-device-showcase-frame-bg,#171921);background:linear-gradient(to bottom, color-mix(in srgb, var(--tms-device-showcase-frame-bg,#171921) 82%, #fff), var(--tms-device-showcase-frame-bg,#171921));border:1px solid var(--tms-device-showcase-frame-border,#ffffff1f);border-radius:0 0 14px 14px;width:112%;height:15px;margin-left:-6%;position:relative;box-shadow:0 14px 28px -18px #00000073}.tms-device-showcase__latch{background:#00000038;border-radius:0 0 8px 8px;width:13%;height:6px;position:absolute;top:0;left:50%;transform:translate(-50%)}.tms-device-showcase__frame--phone{border-radius:44px;padding:12px}.tms-device-showcase__frame--phone .tms-device-showcase__screen{aspect-ratio:9/19;border-radius:33px}.tms-device-showcase__notch{z-index:3;aspect-ratio:3.4;background:#0b0c10;border-radius:999px;width:30%;position:absolute;top:2.8%;left:50%;transform:translate(-50%)}.tms-device-showcase__home{z-index:3;opacity:.85;mix-blend-mode:difference;background:#fff;border-radius:999px;width:36%;height:4px;position:absolute;bottom:2.2%;left:50%;transform:translate(-50%)}.tms-device-showcase__screen{background:var(--tms-device-showcase-screen-bg,#0d0e13);position:relative;overflow:hidden}.tms-device-showcase__frame--browser .tms-device-showcase__screen,.tms-device-showcase__frame--laptop .tms-device-showcase__screen{aspect-ratio:16/10}.tms-device-showcase__media{object-fit:cover;object-position:top center;width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.tms-device-showcase--natural .tms-device-showcase__device--main .tms-device-showcase__screen{aspect-ratio:auto}.tms-device-showcase--natural .tms-device-showcase__device--main .tms-device-showcase__media{height:auto;position:static}.tms-device-showcase__link{z-index:2;border-radius:inherit;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.tms-device-showcase__link:focus-visible{outline:2px solid var(--tms-primary-color,#5b6cff);outline-offset:-3px}.tms-device-showcase--natural .tms-device-showcase__device--main .tms-device-showcase__link{position:static}.tms-device-showcase__glare{z-index:4;pointer-events:none;background:linear-gradient(105deg, transparent 40%, var(--tms-device-showcase-glare-color,#ffffffd9) 50%, transparent 60%);opacity:var(--tms-device-showcase-glare-opacity,.35);position:absolute;top:0;bottom:0;left:0;right:0;transform:translate(-160%)}.tms-device-showcase:not(.tms-device-showcase--static) .tms-device-showcase__glare{will-change:transform}.tms-device-showcase__device--companion .tms-device-showcase__frame{background:var(--tms-device-showcase-companion-frame-bg,var(--tms-device-showcase-frame-bg,#171921));border-radius:26px;padding:7px}.tms-device-showcase__device--companion .tms-device-showcase__screen{border-radius:20px}.tms-device-showcase__device--companion .tms-device-showcase__notch{width:34%}.tms-device-showcase__device--companion .tms-device-showcase__home{height:3px}@media (max-width:767px){.tms-device-showcase__bar{padding:8px 10px}.tms-device-showcase__dots{gap:5px}.tms-device-showcase__dot{width:8px;height:8px}.tms-device-showcase__address{padding:4px 12px;font-size:10px}.tms-device-showcase__frame--laptop{padding:7px 7px 9px}.tms-device-showcase__base{height:11px}.tms-device-showcase__frame--phone{border-radius:34px;padding:8px}.tms-device-showcase__frame--phone .tms-device-showcase__screen{border-radius:26px}.tms-device-showcase--phone .tms-device-showcase__stage{max-width:320px}}@media (prefers-reduced-motion:reduce){.tms-device-showcase__glare{display:none}.tms-device-showcase__device--main,.tms-device-showcase__device--companion{will-change:auto}}