/* ======================================================
   Website Builder showcase — animated product walkthrough
   Markup: @core/resources/views/builder/partials/showcase.blade.php
   Driver: assets/frontend/js/wb-showcase.js (scene clock only)
   Every animated element's BASE style is its final state, so
   reduced-motion (animation: none) shows each scene completed.
   Scene lengths here must match SCENES in the JS file.
   ====================================================== */

.wbs {
    --wbs-bg: var(--wb-ink, #16181d);
    --wbs-accent: var(--wb-accent, #e74c3c);
    --wbs-line: rgba(255, 255, 255, .18);
    --wbs-bar: clamp(26px, 3.1cqw, 40px);
    background: var(--wbs-bg);
    color: #fff;
    padding: 88px 0 72px;
    overflow: hidden;
}

.wbs ol,
.wbs li { list-style: none; margin: 0; padding: 0; }
.wbs li::marker { content: none; }
.wbs li::before,
.wbs li::after { content: none; }
.wbs-head { text-align: center; margin-bottom: 44px; }
.wbs-title {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 14px;
}
.wbs-lead {
    max-width: 60ch;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .72);
}

/* ── Frame ───────────────────────────────────────────── */
.wbs-player { max-width: 1000px; margin: 0 auto; }
.wbs-frame {
    container-type: inline-size;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
}
.wbs-player[data-scene="0"] .wbs-frame { animation: wbs-open .9s cubic-bezier(.2, .7, .2, 1) both; }
.wbs-stack {
    position: relative;
    height: calc(62.5cqw + var(--wbs-bar));
}
.wbs-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}
.wbs-scene.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s ease;
}

.wbs-bar {
    position: relative;
    height: var(--wbs-bar);
    background: #f1f3f6;
    border-bottom: 1px solid #e3e6eb;
}
.wbs-dots {
    position: absolute;
    left: 2cqw;
    top: 50%;
    display: flex;
    gap: .6cqw;
    transform: translateY(-50%);
}
.wbs-dots i {
    width: clamp(6px, .85cqw, 10px);
    height: clamp(6px, .85cqw, 10px);
    border-radius: 50%;
    background: #cfd4dc;
}
.wbs-url {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 62%;
    padding: .45cqw 1.6cqw;
    border-radius: 99px;
    background: #fff;
    color: #565d68;
    font-size: clamp(9px, 1.15cqw, 13px);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wbs-view {
    position: absolute;
    top: var(--wbs-bar);
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #fff;
}
.wbs-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    display: block;
}
.wbs-tall {
    display: block;
    width: 100%;
    height: auto;
    transform: translateY(-54.2%);
}

/* ── Cursor + click ripple ───────────────────────────── */
.wbs-cursor {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    width: clamp(16px, 2.1cqw, 30px);
    aspect-ratio: 1;
    margin: 0;
    transform: translate(-17%, -8%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9.2-6.4 1.6 3.9 6.9-2.9 1.6-3.9-6.9L5.5 19z' fill='%23fff' stroke='%2316181d' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
    opacity: 0;
    pointer-events: none;
}
.wbs-ripple {
    position: absolute;
    z-index: 5;
    width: 3.6cqw;
    height: 3.6cqw;
    margin: -1.8cqw 0 0 -1.8cqw;
    border-radius: 50%;
    border: 2px solid var(--wbs-accent);
    background: color-mix(in srgb, var(--wbs-accent) 18%, transparent);
    opacity: 0;
    pointer-events: none;
}
.wbs-focus {
    position: absolute;
    z-index: 4;
    left: 18.5%;
    width: 78.5%;
    border: 2px solid var(--wbs-accent);
    border-radius: .7cqw;
    opacity: 0;
    pointer-events: none;
}

/* ── Scene 1 · Discover (6s) ─────────────────────────── */
.wbs-s1 .wbs-ripple { left: 12.6%; top: 72%; }
.wbs-s1.is-active .wbs-tall { animation: wbs1-scroll 6s both, wbs-fade .9s both; }
.wbs-s1.is-active .wbs-cursor { animation: wbs1-cursor 6s cubic-bezier(.45, .05, .25, 1) both; }
.wbs-s1.is-active .wbs-ripple { animation: wbs-rip-40 6s both; }

/* ── Scene 2 · Select (8s) ───────────────────────────── */
.wbs-s2 .wbs-ripple { left: 48%; top: 62.8%; }
.wbs-url-a { opacity: 0; }
.wbs-s2.is-active .wbs-hover { animation: wbs2-hover 8s both; }
.wbs-s2.is-active .wbs-start { animation: wbs2-start 8s cubic-bezier(.3, .6, .2, 1) both; }
.wbs-s2.is-active .wbs-url-a { animation: wbs2-ua 8s both; }
.wbs-s2.is-active .wbs-url-b { animation: wbs2-ub 8s both; }
.wbs-s2.is-active .wbs-cursor { animation: wbs2-cursor 8s cubic-bezier(.45, .05, .25, 1) both; }
.wbs-s2.is-active .wbs-ripple { animation: wbs-rip-48 8s both; }

/* ── Scene 3 · Personalize (7s) ──────────────────────── */
.wbs-focus-1 { top: 18.7%; height: 4.7%; }
.wbs-focus-2 { top: 38.7%; height: 4.4%; }
.wbs-s3 .wbs-r1 { left: 57.6%; top: 21%; }
.wbs-s3 .wbs-r2 { left: 57.6%; top: 41%; }
.wbs-s3 .wbs-r3 { left: 76.2%; top: 3.2%; }
.wbs-s3.is-active .wbs-edited { animation: wbs3-edited 7s ease both; }
.wbs-s3.is-active .wbs-focus-1 { animation: wbs3-f1 7s both; }
.wbs-s3.is-active .wbs-focus-2 { animation: wbs3-f2 7s both; }
.wbs-s3.is-active .wbs-cursor { animation: wbs3-cursor 7s cubic-bezier(.45, .05, .25, 1) both; }
.wbs-s3.is-active .wbs-r1 { animation: wbs-rip-24 7s both; }
.wbs-s3.is-active .wbs-r2 { animation: wbs-rip-48 7s both; }
.wbs-s3.is-active .wbs-r3 { animation: wbs-rip-86 7s both; }

/* ── Scene 4 · Preview (7s) ──────────────────────────── */
.wbs-s4 .wbs-ripple { left: 92%; top: 92.5%; }
.wbs-mobile {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #eef1f6, #e2e7ef);
}
.wbs-phone {
    position: absolute;
    left: 50%;
    top: 53%;
    height: 88%;
    aspect-ratio: 390 / 844;
    transform: translate(-50%, -50%);
    border: .7cqw solid #16181d;
    border-radius: 3.2cqw;
    overflow: hidden;
    background: #16181d;
    box-shadow: 0 2.4cqw 5cqw -1.6cqw rgba(22, 24, 29, .45);
}
.wbs-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wbs-toggle {
    position: absolute;
    z-index: 4;
    right: 3cqw;
    bottom: 3cqw;
    display: flex;
    width: 20cqw;
    height: 3.4cqw;
    padding: .3cqw;
    box-sizing: border-box;
    border-radius: 99px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 .6cqw 2cqw rgba(22, 24, 29, .18);
}
.wbs-chip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    font-size: clamp(8px, 1.15cqw, 14px);
    font-weight: 700;
    color: #565d68;
}
.wbs-chip-m { background: var(--wbs-bg); color: #fff; }
.wbs-s4.is-active .wbs-mobile { animation: wbs4-mobile 7s ease both; }
.wbs-s4.is-active .wbs-phone { animation: wbs4-phone 7s cubic-bezier(.2, .7, .2, 1) both; }
.wbs-s4.is-active .wbs-chip-d { animation: wbs4-chip-d 7s both; }
.wbs-s4.is-active .wbs-chip-m { animation: wbs4-chip-m 7s both; }
.wbs-s4.is-active .wbs-cursor { animation: wbs4-cursor 7s cubic-bezier(.45, .05, .25, 1) both; }
.wbs-s4.is-active .wbs-ripple { animation: wbs-rip-28 7s both; }

/* ── Scene 5 · Go live (7.5s) ────────────────────────── */
.wbs-bg { filter: blur(5px) brightness(.45) saturate(.9); transform: scale(1.04); }
.wbs-checklist {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 36cqw;
    margin: 0;
    padding: 2.4cqw 2.8cqw;
    list-style: none;
    transform: translate(-50%, -50%);
    border-radius: 1.6cqw;
    background: #fff;
    box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .5);
    color: var(--wb-ink, #16181d);
    opacity: 0;
    pointer-events: none;
}
.wbs-checklist li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.3cqw;
    padding: 1.05cqw 0;
    font-size: clamp(10px, 1.55cqw, 19px);
    font-weight: 700;
    line-height: 1.3;
}
.wbs-checklist li + li { border-top: 1px solid #e9ebef; }
.wbs-checklist b {
    flex: none;
    position: relative;
    width: 2.4cqw;
    height: 2.4cqw;
    border-radius: 50%;
    background: var(--wb-green, #1e9e5a);
}
.wbs-checklist b::after {
    content: "";
    position: absolute;
    left: 36%;
    top: 20%;
    width: 24%;
    height: 48%;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(40deg);
}
.wbs-checklist .wbs-last b { background: #fff; border: 2px solid var(--wbs-accent); }
.wbs-checklist .wbs-last b::after {
    left: 28%;
    top: 28%;
    width: 44%;
    height: 44%;
    border: 0;
    border-radius: 50%;
    background: var(--wbs-accent);
    transform: none;
}
.wbs-checklist small {
    flex-basis: 100%;
    margin: .2cqw 0 0 3.7cqw;
    font-size: clamp(8px, 1.15cqw, 14px);
    font-weight: 600;
    color: #7a8290;
}
.wbs-end {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: min(84%, 64cqw);
    transform: translate(-50%, -50%);
    text-align: center;
}
.wbs-end-title {
    margin: 0 0 2.4cqw;
    font-size: clamp(16px, 3.6cqw, 46px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #fff;
}
.wbs-end-cta { display: flex; flex-wrap: wrap; gap: 1.2cqw; justify-content: center; }
.wbs-cta {
    display: inline-flex;
    align-items: center;
    padding: clamp(8px, 1.2cqw, 15px) clamp(14px, 2.6cqw, 32px);
    border-radius: 12px;
    font-size: clamp(11px, 1.5cqw, 17px);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, border-color .2s, transform .15s;
}
.wbs-cta:active { transform: translateY(1px); }
.wbs-cta-primary { background: var(--wbs-accent); color: #fff; border: 1.5px solid var(--wbs-accent); }
.wbs-cta-primary:hover { background: color-mix(in srgb, var(--wbs-accent) 86%, #000); color: #fff; text-decoration: none; }
.wbs-cta-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.wbs-cta-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.wbs-tag {
    position: absolute;
    z-index: 3;
    left: 1.6cqw;
    bottom: 1.4cqw;
    padding: .5cqw 1.2cqw;
    border-radius: 99px;
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .85);
    font-size: clamp(8px, 1cqw, 12px);
    font-weight: 600;
}
.wbs-s5.is-active .wbs-bg { animation: wbs5-bg 7.5s ease both; }
.wbs-s5.is-active .wbs-checklist { animation: wbs5-steps 7.5s ease both; }
.wbs-s5.is-active .wbs-end { animation: wbs5-end 7.5s ease both; }
.wbs-s5.is-active .wbs-checklist b { animation: wbs5-tick .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.wbs-s5.is-active .wbs-ck1 b { animation-delay: 1s; }
.wbs-s5.is-active .wbs-ck2 b { animation-delay: 1.8s; }
.wbs-s5.is-active .wbs-ck3 b { animation-delay: 2.6s; }
.wbs-s5.is-active .wbs-ck4 b { animation-delay: 3.4s; }

/* ── Keyframes ───────────────────────────────────────── */
@keyframes wbs-open { from { opacity: 0; transform: translateY(26px) scale(.965); } }
@keyframes wbs-fade { from { opacity: 0; } }

@keyframes wbs1-scroll { 0%, 52% { transform: translateY(0); } 90%, 100% { transform: translateY(-54.2%); } }
@keyframes wbs1-cursor {
    0%   { left: 80%; top: 86%; opacity: 0; }
    8%   { opacity: 1; }
    38%, 52% { left: 12.6%; top: 72%; opacity: 1; }
    88%, 100% { left: 50%; top: 48%; opacity: 1; }
}

@keyframes wbs2-hover { 0%, 28% { opacity: 0; } 36%, 100% { opacity: 1; } }
@keyframes wbs2-start { 0%, 56% { opacity: 0; transform: translateY(2%); } 68%, 100% { opacity: 1; transform: none; } }
@keyframes wbs2-ua { 0%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes wbs2-ub { 0%, 58% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes wbs2-cursor {
    0%   { left: 50%; top: 48%; opacity: 1; }
    26%  { left: 52%; top: 56%; opacity: 1; }
    36%, 56% { left: 48%; top: 62.8%; opacity: 1; }
    84%, 100% { left: 69%; top: 70%; opacity: 1; }
}

@keyframes wbs3-edited { 0%, 58% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes wbs3-f1 { 0%, 20% { opacity: 0; } 24%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes wbs3-f2 { 0%, 44% { opacity: 0; } 48%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes wbs3-cursor {
    0%   { left: 69%; top: 70%; opacity: 1; }
    22%, 36% { left: 57.6%; top: 21%; opacity: 1; }
    46%, 60% { left: 57.6%; top: 41%; opacity: 1; }
    82%, 100% { left: 76.2%; top: 3.2%; opacity: 1; }
}

@keyframes wbs4-mobile { 0%, 29% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes wbs4-phone {
    0%, 29% { transform: translate(-50%, -48%) scale(.94); }
    42%, 100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes wbs4-chip-d { 0%, 29% { background: var(--wbs-bg); color: #fff; } 34%, 100% { background: transparent; color: #565d68; } }
@keyframes wbs4-chip-m { 0%, 29% { background: transparent; color: #565d68; } 34%, 100% { background: var(--wbs-bg); color: #fff; } }
@keyframes wbs4-cursor {
    0%   { left: 76.2%; top: 3.2%; opacity: 1; }
    24%, 40% { left: 92%; top: 92.5%; opacity: 1; }
    70%, 100% { left: 72%; top: 60%; opacity: 1; }
}

@keyframes wbs5-bg { 0% { filter: none; transform: none; } 14%, 100% { filter: blur(5px) brightness(.45) saturate(.9); transform: scale(1.04); } }
@keyframes wbs5-steps {
    0%   { opacity: 0; transform: translate(-50%, -46%); }
    10%, 56% { opacity: 1; transform: translate(-50%, -50%); }
    63%, 100% { opacity: 0; transform: translate(-50%, -53%); }
}
@keyframes wbs5-end {
    0%, 60% { opacity: 0; visibility: hidden; transform: translate(-50%, -45%); }
    61% { opacity: 0; visibility: visible; }
    74%, 100% { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
}
@keyframes wbs5-tick { from { opacity: 0; transform: scale(0); } }

@keyframes wbs-rip-24 { 0%, 23% { opacity: 0; transform: scale(.2); } 25% { opacity: .9; transform: scale(.3); } 36%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wbs-rip-28 { 0%, 27% { opacity: 0; transform: scale(.2); } 29% { opacity: .9; transform: scale(.3); } 40%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wbs-rip-40 { 0%, 39% { opacity: 0; transform: scale(.2); } 41% { opacity: .9; transform: scale(.3); } 52%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wbs-rip-48 { 0%, 47% { opacity: 0; transform: scale(.2); } 49% { opacity: .9; transform: scale(.3); } 60%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wbs-rip-86 { 0%, 85% { opacity: 0; transform: scale(.2); } 87% { opacity: .9; transform: scale(.3); } 98%, 100% { opacity: 0; transform: scale(1.5); } }

/* Pause: freezes every running animation inside the player */
.wbs-player.is-paused .wbs-scene,
.wbs-player.is-paused .wbs-scene * { animation-play-state: paused !important; }

/* ── Caption + controls ──────────────────────────────── */
.wbs-caption {
    margin: 22px 0 14px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
}
.wbs-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.wbs-ctl-group { display: flex; gap: 8px; }
.wbs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--wbs-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.wbs-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.wbs-btn[hidden] { display: none; }
.wbs-player:not(.is-paused) .wbs-i-play,
.wbs-player.is-paused .wbs-i-pause { display: none; }

.wbs-steps { display: flex; flex: 1; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.wbs-step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    padding: 10px 16px;
    border: 1px solid var(--wbs-line);
    border-radius: 99px;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
.wbs-step::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: calc(var(--p, 0) * 100%);
    background: var(--wbs-accent);
}
.wbs-step.is-done { --p: 1; }
.wbs-step:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.wbs-step.is-active { color: #fff; border-color: rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .08); }
.wbs-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    font-size: 11px;
}

.wbs .wbs-player button:focus-visible,
.wbs .wbs-player a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 12px;
}
.wbs .wbs-player .wbs-btn:focus-visible,
.wbs .wbs-player .wbs-step:focus-visible { border-radius: 99px; }

/* ── Full screen ─────────────────────────────────────── */
.wbs-player:fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: none;
    padding: 20px;
    background: #0d0f13;
}
.wbs-player:fullscreen .wbs-frame { width: min(100%, calc((100vh - 180px) * 1.45)); }
.wbs-player:fullscreen .wbs-controls { width: min(100%, 1120px); }
.wbs-player:-webkit-full-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: none;
    padding: 20px;
    background: #0d0f13;
}
.wbs-player:-webkit-full-screen .wbs-frame { width: min(100%, calc((100vh - 180px) * 1.45)); }
.wbs-player:-webkit-full-screen .wbs-controls { width: min(100%, 1120px); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 767px) {
    .wbs { padding: 56px 0 48px; }
    .wbs-head { margin-bottom: 28px; }
    .wbs-lead { font-size: 15px; }
    .wbs-caption { font-size: 16px; margin-top: 16px; }
    .wbs-controls { flex-wrap: nowrap; }
    .wbs-steps { order: 3; flex-basis: 100%; flex-wrap: nowrap; }
    .wbs-controls { flex-wrap: wrap; }
    .wbs-ctl-group:first-child { margin-right: auto; }
}
@media (max-width: 900px) {
    .wbs-step { padding: 9px 11px; }
    .wbs-step:not(.is-active) .wbs-step-l { display: none; }
}

/* ── Reduced motion: completed scenes, no movement ───── */
@media (prefers-reduced-motion: reduce) {
    .wbs-frame,
    .wbs-scene,
    .wbs-scene * { animation: none !important; }
    .wbs-scene,
    .wbs-scene.is-active { transition-duration: .01ms !important; }
}