/* ============================================================================
   The OBS tour — stage two's waiting illustration: a looping miniature of
   the real workflow. One shared 14s loop; every element's keyframes are
   percentages of it, so the beats stay in sync.

   Timeline map:
     0-2      beat A (Sources panel) fades in
     4-12     cursor travels to +          click @13
     14-16    beat B (menu) pops
     18-30    cursor to "Browser"          highlight @29-36, click @33
     35-37    menu out, 38-40 beat C (name dialog) in, A dims behind it
     43-53    the name types itself        caret blinks 43-56
     52-58    cursor to OK                 click @59
     60-63    C out, 62-64 beat D (properties) in, A fully gone
     64-70    cursor to URL field          click/paste @70, url text @71
     74-84    cursor grazes Width/Height   values land @79 / @83 with flashes
     86-89    cursor to OK                 click @90
     93-97    everything fades, loop restarts
   ============================================================================ */

.bst-tour {
    display: block;
    width: 100%;
    max-width: 22.5rem;
    margin: 0 auto 1rem;
}

/* ---- the depicted OBS window: fixed dark, both themes (it's a screenshot
   of another app, not one of our surfaces) ---- */

.bst-window   { fill: hsl(0 0% 12%); stroke: hsl(0 0% 26%); stroke-width: 1.5; }
.bst-dot      { fill: hsl(0 0% 30%); }
.bst-titlebar { stroke: hsl(0 0% 19%); stroke-width: 1; }
.bst-panel    { fill: none; stroke: hsl(0 0% 21%); stroke-width: 1; }
.bst-divider  { stroke: hsl(0 0% 21%); stroke-width: 1; }
.bst-menu     { fill: hsl(0 0% 16%); stroke: hsl(0 0% 28%); stroke-width: 1; }
.bst-dialog   { fill: hsl(0 0% 15%); stroke: hsl(0 0% 28%); stroke-width: 1; }
.bst-field    { fill: hsl(0 0% 9%); stroke: hsl(0 0% 27%); stroke-width: 1; }
.bst-btn      { fill: hsl(0 0% 22%); }
.bst-plus     { stroke: hsl(0 0% 85%); stroke-width: 1.5; stroke-linecap: round; }
.bst-radio    { fill: none; stroke: hsl(0 0% 45%); stroke-width: 1.5; }
.bst-radio-dot { fill: var(--accent); }
.bst-hl       { fill: color-mix(in srgb, var(--accent) 24%, transparent); }

.bst-tour text { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
.bst-label     { font-size: 9px;  fill: hsl(0 0% 58%); letter-spacing: 0.04em; }
.bst-row       { font-size: 10px; fill: hsl(0 0% 80%); }
.bst-item      { font-size: 10px; fill: hsl(0 0% 78%); }
.bst-item-hot  { fill: hsl(0 0% 95%); }
.bst-btn-label { font-size: 9.5px; fill: hsl(0 0% 88%); }
.bst-typed     { font-size: 10px; fill: hsl(0 0% 90%); }
.bst-mono      { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9.5px; fill: hsl(0 0% 85%); }

/* ==========================================================================
   Streamlabs connection tour. The 12.5s loop follows the actual Desktop UI:
   Settings -> Mobile -> enable third-party access -> copy the API token.
   ========================================================================== */

.slt-tour {
    display: block;
    width: 100%;
    max-width: 25rem;
    margin: 0 auto 0.35rem;
}

.slt-tour text { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
.slt-window { fill: hsl(205 34% 10%); stroke: hsl(201 17% 30%); stroke-width: 1.5; }
.slt-titlebar,
.slt-titlebar-mask { fill: hsl(205 35% 7%); }
.slt-dot { stroke: hsl(0 0% 100% / 0.12); stroke-width: 0.75; }
.slt-dot-red { fill: hsl(0 82% 64%); }
.slt-dot-yellow { fill: hsl(42 92% 61%); }
.slt-dot-green { fill: hsl(137 48% 55%); }
.slt-window-title { fill: hsl(200 8% 65%); font-size: 9px; font-weight: 650; }
.slt-sidebar { fill: hsl(204 29% 15%); }
.slt-editor-surface { fill: hsl(202 34% 8%); }
.slt-preview { fill: hsl(201 40% 5%); stroke: hsl(200 18% 20%); stroke-width: 1; }
.slt-nav { fill: hsl(202 8% 74%); font-size: 9px; font-weight: 550; }
.slt-nav-active { fill: hsl(161 68% 75%); }
.slt-sidebar-rule { stroke: hsl(200 16% 23%); stroke-width: 1; }
.slt-settings-hot { fill: hsl(161 36% 24%); }
.slt-settings-label { fill: hsl(0 0% 96%); }
.slt-panel { fill: hsl(204 24% 17%); stroke: hsl(201 15% 24%); stroke-width: 1; }

.slt-settings-window { fill: hsl(204 29% 13%); stroke: hsl(201 17% 30%); stroke-width: 1.2; }
.slt-settings-nav,
.slt-settings-nav-mask { fill: hsl(204 28% 16%); }
.slt-search { fill: hsl(204 26% 12%); stroke: hsl(202 15% 35%); stroke-width: 1; }
.slt-search-label { fill: hsl(201 7% 58%); font-size: 8px; }
.slt-general-hot { fill: hsl(201 18% 23%); }
.slt-mobile-hot { fill: hsl(164 24% 32%); }
.slt-settings-item { fill: hsl(201 8% 72%); font-size: 8.5px; font-weight: 550; }
.slt-mobile-label { fill: hsl(0 0% 98%); }
.slt-heading { fill: hsl(0 0% 96%); font-size: 10px; font-weight: 650; }
.slt-content-card { fill: hsl(204 39% 8%); }
.slt-content-line { fill: hsl(202 12% 30%); }
.slt-content-line-short { opacity: 0.72; }
.slt-copy { fill: hsl(201 8% 83%); font-size: 8.5px; font-weight: 550; }
.slt-copy-muted { fill: hsl(201 7% 63%); font-size: 7.5px; }
.slt-toggle-track { fill: hsl(202 11% 32%); }
.slt-toggle-knob { fill: hsl(202 24% 11%); }
.slt-token-field { fill: hsl(204 36% 7%); stroke: hsl(201 15% 36%); stroke-width: 1; }
.slt-token { fill: hsl(201 8% 79%); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 7.5px; }

.slt-editor-beat { animation: slt-editor-beat 12.5s linear infinite; }
@keyframes slt-editor-beat {
    0%, 18% { opacity: 1; transform: translateY(0); }
    23%, 100% { opacity: 0; transform: translateY(-3px); }
}

.slt-settings-beat { animation: slt-settings-beat 12.5s linear infinite; }
@keyframes slt-settings-beat {
    0%, 18% { opacity: 0; transform: translateY(5px) scale(0.99); }
    23%, 96% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-3px) scale(0.995); }
}

.slt-general-hot,
.slt-general-content { animation: slt-general-beat 12.5s linear infinite; }
@keyframes slt-general-beat {
    0%, 19% { opacity: 0; }
    23%, 28% { opacity: 1; }
    33%, 100% { opacity: 0; }
}

.slt-mobile-hot,
.slt-mobile-content { animation: slt-mobile-beat 12.5s linear infinite; }
@keyframes slt-mobile-beat {
    0%, 27% { opacity: 0; }
    32%, 96% { opacity: 1; }
    100% { opacity: 0; }
}

.slt-toggle-track { animation: slt-toggle-track 12.5s linear infinite; }
@keyframes slt-toggle-track {
    0%, 49% { fill: hsl(202 11% 32%); }
    54%, 96% { fill: hsl(161 68% 72%); }
    100% { fill: hsl(202 11% 32%); }
}

.slt-toggle-knob { animation: slt-toggle-knob 12.5s linear infinite; }
@keyframes slt-toggle-knob {
    0%, 49% { transform: translateX(0); }
    54%, 96% { transform: translateX(17px); }
    100% { transform: translateX(0); }
}

.slt-token-beat { animation: slt-token-beat 12.5s linear infinite; }
@keyframes slt-token-beat {
    0%, 54% { opacity: 0; transform: translateY(4px); }
    59%, 96% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-2px); }
}

.slt-token-field { animation: slt-token-field 12.5s linear infinite; }
@keyframes slt-token-field {
    0%, 72% { stroke: hsl(201 15% 36%); fill: hsl(204 36% 7%); }
    77%, 82% { stroke: hsl(161 68% 72%); fill: hsl(161 35% 13%); }
    87%, 100% { stroke: hsl(161 40% 43%); fill: hsl(204 36% 7%); }
}

.slt-cursor {
    fill: hsl(0 0% 98%);
    stroke: hsl(0 0% 14%);
    stroke-width: 1;
    filter: drop-shadow(0 1px 1px hsl(0 0% 0% / 0.45));
    animation: slt-cursor 12.5s linear infinite;
}
@keyframes slt-cursor {
    0% { opacity: 0; transform: translate(360px, 212px); }
    3% { opacity: 1; transform: translate(360px, 212px); animation-timing-function: var(--ease-standard); }
    7%, 12% { transform: translate(55px, 197px); animation-timing-function: var(--ease-standard); }
    21%, 28% { transform: translate(69px, 137px); animation-timing-function: var(--ease-standard); }
    45%, 54% { transform: translate(174px, 125px); animation-timing-function: var(--ease-standard); }
    69%, 80% { opacity: 1; transform: translate(252px, 173px); }
    94%, 100% { opacity: 0; transform: translate(348px, 211px); }
}

.slt-click {
    fill: none;
    stroke: hsl(161 68% 72%);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: slt-click 12.5s linear infinite;
}
@keyframes slt-click {
    0% { opacity: 0.72; transform: scale(0.25); }
    2.5% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}
.slt-click-settings { animation-delay: 0.875s; }
.slt-click-mobile { animation-delay: 3.25s; }
.slt-click-toggle { animation-delay: 6.625s; }
.slt-click-token { animation-delay: 9.5s; }

/* ==========================================================================
   OBS WebSocket connection tour. This uses the same miniature-app visual
   language as the Browser Source tour, but its 13s narrative is purposefully
   shorter: Tools → WebSocket settings → enable → connect info → copy.
   ========================================================================== */

.owt-tour {
    display: block;
    width: 100%;
    max-width: 25rem;
    margin: 0 auto 0.35rem;
}

.owt-tour text { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; }
.owt-window { fill: hsl(225 16% 10%); stroke: hsl(0 0% 30%); stroke-width: 1.5; }
.owt-toolbar { fill: hsl(20 6% 13%); }
.owt-toolbar-mask { fill: hsl(20 6% 13%); }
.owt-dot { stroke: hsl(0 0% 100% / 0.12); stroke-width: 0.75; }
.owt-dot-red { fill: hsl(0 80% 63%); }
.owt-dot-yellow { fill: hsl(43 92% 60%); }
.owt-dot-green { fill: hsl(137 48% 55%); }
.owt-app-title { fill: hsl(0 0% 78%); font-size: 10px; font-weight: 650; }
.owt-toolbar-item { fill: hsl(0 0% 88%); font-size: 9px; }
.owt-tools-pill { fill: hsl(325 10% 28%); }
.owt-tools-text { fill: hsl(0 0% 98%); }
.owt-preview { fill: hsl(225 19% 8%); stroke: hsl(0 0% 19%); stroke-width: 1; }
.owt-panel { fill: hsl(225 13% 14%); stroke: hsl(0 0% 22%); stroke-width: 1; }
.owt-menu { fill: hsl(225 10% 13%); stroke: hsl(0 0% 34%); stroke-width: 1; }
.owt-divider { stroke: hsl(0 0% 30%); stroke-width: 1; }
.owt-menu-highlight { fill: color-mix(in srgb, var(--accent) 22%, hsl(225 10% 13%)); }
.owt-menu-item { fill: hsl(0 0% 81%); font-size: 8.5px; }
.owt-menu-hot { fill: hsl(0 0% 98%); }
.owt-dialog { fill: hsl(225 13% 13%); stroke: hsl(0 0% 37%); stroke-width: 1.2; }
.owt-dialog-titlebar,
.owt-dialog-titlebar-mask { fill: hsl(20 5% 15%); }
.owt-dialog-title { fill: hsl(0 0% 70%); font-size: 10px; font-weight: 650; }
.owt-section { fill: hsl(225 12% 18%); }
.owt-section-title { fill: hsl(0 0% 94%); font-size: 9px; font-weight: 650; }
.owt-checkbox { fill: hsl(225 10% 17%); stroke: hsl(0 0% 65%); stroke-width: 1.2; }
.owt-check { fill: none; stroke: hsl(0 0% 92%); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.owt-row,
.owt-info-label { fill: hsl(0 0% 91%); font-size: 9px; }
.owt-secondary-btn,
.owt-copy-btn { fill: hsl(225 12% 28%); stroke: hsl(0 0% 100% / 0.06); stroke-width: 1; }
.owt-btn-label { fill: hsl(0 0% 94%); font-size: 8.5px; }
.owt-field { fill: hsl(225 13% 12%); stroke: hsl(225 14% 28%); stroke-width: 1; }
.owt-mono { fill: hsl(0 0% 92%); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8.5px; }
.owt-password-field { stroke: color-mix(in srgb, var(--accent) 68%, hsl(225 14% 28%)); }
.owt-success-check { fill: none; stroke: var(--success); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.owt-workspace { animation: owt-workspace 13s linear infinite; }
@keyframes owt-workspace {
    0%, 22% { opacity: 1; }
    27%, 100% { opacity: 0.22; }
}

.owt-menu-beat {
    transform-box: fill-box;
    transform-origin: 20% 0%;
    animation: owt-menu-beat 13s linear infinite;
}
@keyframes owt-menu-beat {
    0%, 5% { opacity: 0; transform: translateY(-3px) scale(0.98); }
    8%, 22% { opacity: 1; transform: translateY(0) scale(1); }
    26%, 100% { opacity: 0; transform: translateY(-2px) scale(0.99); }
}

.owt-settings-beat { animation: owt-settings-beat 13s linear infinite; }
@keyframes owt-settings-beat {
    0%, 24% { opacity: 0; transform: translateY(5px); }
    28%, 58% { opacity: 1; transform: translateY(0); }
    62%, 100% { opacity: 0; transform: translateY(-4px); }
}

.owt-check { animation: owt-enable-check 13s linear infinite; }
@keyframes owt-enable-check {
    0%, 37% { opacity: 0; stroke-dasharray: 13; stroke-dashoffset: 13; }
    41%, 100% { opacity: 1; stroke-dasharray: 13; stroke-dashoffset: 0; }
}

.owt-info-beat { animation: owt-info-beat 13s linear infinite; }
@keyframes owt-info-beat {
    0%, 58% { opacity: 0; transform: translateY(5px); }
    62%, 94% { opacity: 1; transform: translateY(0); }
    98%, 100% { opacity: 0; transform: translateY(-3px); }
}

.owt-password-copy { animation: owt-copy-emphasis 13s linear infinite; }
@keyframes owt-copy-emphasis {
    0%, 73% { fill: hsl(225 12% 28%); }
    76%, 81% { fill: color-mix(in srgb, var(--accent) 46%, hsl(225 12% 28%)); }
    85%, 96% { fill: color-mix(in srgb, var(--success) 32%, hsl(225 12% 28%)); }
    100% { fill: hsl(225 12% 28%); }
}

.owt-password-copy-label { animation: owt-copy-label 13s linear infinite; }
@keyframes owt-copy-label {
    0%, 82% { opacity: 1; }
    85%, 100% { opacity: 0; }
}

.owt-success-check { animation: owt-success-check 13s linear infinite; }
@keyframes owt-success-check {
    0%, 82% { opacity: 0; stroke-dasharray: 22; stroke-dashoffset: 22; }
    86%, 96% { opacity: 1; stroke-dasharray: 22; stroke-dashoffset: 0; }
    100% { opacity: 0; stroke-dasharray: 22; stroke-dashoffset: 0; }
}

.owt-cursor {
    fill: hsl(0 0% 98%);
    stroke: hsl(0 0% 14%);
    stroke-width: 1;
    filter: drop-shadow(0 1px 1px hsl(0 0% 0% / 0.45));
    animation: owt-cursor 13s linear infinite;
}
@keyframes owt-cursor {
    0% { opacity: 0; transform: translate(370px, 195px); }
    3% { opacity: 1; transform: translate(370px, 195px); animation-timing-function: var(--ease-standard); }
    7%, 10% { transform: translate(235px, 23px); animation-timing-function: var(--ease-standard); }
    20%, 24% { transform: translate(288px, 140px); animation-timing-function: var(--ease-standard); }
    36%, 42% { transform: translate(107px, 113px); animation-timing-function: var(--ease-standard); }
    50%, 57% { transform: translate(200px, 157px); animation-timing-function: var(--ease-standard); }
    72%, 86% { opacity: 1; transform: translate(306px, 159px); }
    94%, 100% { opacity: 0; transform: translate(330px, 190px); }
}

.owt-click {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: owt-click 13s linear infinite;
}
@keyframes owt-click {
    0% { opacity: 0.72; transform: scale(0.25); }
    2.4% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}
.owt-click-tools { animation-delay: 0.91s; }
.owt-click-settings { animation-delay: 2.6s; }
.owt-click-enable { animation-delay: 4.81s; }
.owt-click-info { animation-delay: 6.76s; }
.owt-click-copy { animation-delay: 9.75s; }

/* ---- beat visibility ---- */

.bst-a { animation: bst-beat-a 14s linear infinite; }
@keyframes bst-beat-a {
    0%       { opacity: 0; }
    2%, 40%  { opacity: 1; }
    42%, 60% { opacity: 0.3; }
    63%, 100% { opacity: 0; }
}

.bst-b {
    transform-box: fill-box;
    transform-origin: 15% 95%;
    animation: bst-beat-b 14s linear infinite;
}
@keyframes bst-beat-b {
    0%, 14%  { opacity: 0; transform: scale(0.95); }
    16%, 34% { opacity: 1; transform: scale(1); }
    37%, 100% { opacity: 0; transform: scale(1); }
}

.bst-hl { animation: bst-highlight 14s linear infinite; }
@keyframes bst-highlight {
    0%, 29%  { opacity: 0; }
    31%, 34% { opacity: 1; }
    36%, 100% { opacity: 0; }
}

.bst-c { animation: bst-beat-c 14s linear infinite; }
@keyframes bst-beat-c {
    0%, 38%  { opacity: 0; }
    40%, 60% { opacity: 1; }
    63%, 100% { opacity: 0; }
}

.bst-typed { animation: bst-typing 14s linear infinite; }
@keyframes bst-typing {
    0%, 43% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(12, end); }
    53%, 100% { clip-path: inset(0 -2% 0 0); }
}

.bst-caret { fill: hsl(0 0% 90%); animation: bst-caret 14s linear infinite; }
@keyframes bst-caret {
    0%, 42.9% { opacity: 0; }
    43%, 44.9% { opacity: 1; }
    45%, 46.9% { opacity: 0; }
    47%, 48.9% { opacity: 1; }
    49%, 50.9% { opacity: 0; }
    51%, 52.9% { opacity: 1; }
    53%, 54.9% { opacity: 0; }
    55%, 55.9% { opacity: 1; }
    56%, 100% { opacity: 0; }
}

.bst-d { animation: bst-beat-d 14s linear infinite; }
@keyframes bst-beat-d {
    0%, 62%  { opacity: 0; }
    64%, 93% { opacity: 1; }
    96%, 100% { opacity: 0; }
}

/* ---- beat D interior: paste and dimension landings ---- */

.bst-url-text { animation: bst-url-in 14s linear infinite; }
@keyframes bst-url-in {
    0%, 70.5% { opacity: 0; }
    71%, 100% { opacity: 1; }
}

.bst-w-text { animation: bst-w-in 14s linear infinite; }
@keyframes bst-w-in {
    0%, 78.5% { opacity: 0; }
    79%, 100% { opacity: 1; }
}

.bst-h-text { animation: bst-h-in 14s linear infinite; }
@keyframes bst-h-in {
    0%, 82.5% { opacity: 0; }
    83%, 100% { opacity: 1; }
}

.bst-field-url { animation: bst-url-flash 14s linear infinite; }
@keyframes bst-url-flash {
    0%, 69%   { stroke: hsl(0 0% 27%); }
    70%, 72%  { stroke: var(--accent); }
    75%, 100% { stroke: hsl(0 0% 27%); }
}

.bst-field-w { animation: bst-w-flash 14s linear infinite; }
@keyframes bst-w-flash {
    0%, 78%   { fill: hsl(0 0% 9%); }
    79%, 81%  { fill: color-mix(in srgb, var(--accent) 14%, hsl(0 0% 9%)); }
    84%, 100% { fill: hsl(0 0% 9%); }
}

.bst-field-h { animation: bst-h-flash 14s linear infinite; }
@keyframes bst-h-flash {
    0%, 82%   { fill: hsl(0 0% 9%); }
    83%, 85%  { fill: color-mix(in srgb, var(--accent) 14%, hsl(0 0% 9%)); }
    88%, 100% { fill: hsl(0 0% 9%); }
}

/* The name field reads focused the whole beat. */
.bst-field-focused { stroke: color-mix(in srgb, var(--accent) 60%, hsl(0 0% 27%)); }

/* ---- the cursor: one master path through all four beats ---- */

.bst-cursor {
    fill: hsl(0 0% 96%);
    stroke: hsl(0 0% 15%);
    stroke-width: 1;
    animation: bst-cursor 14s linear infinite;
}
@keyframes bst-cursor {
    0%        { opacity: 0; transform: translate(300px, 150px); }
    3%        { opacity: 1; transform: translate(300px, 150px); animation-timing-function: var(--ease-standard); }
    12%, 16%  { transform: translate(50px, 163px); animation-timing-function: var(--ease-standard); }
    30%, 36%  { transform: translate(120px, 68px); animation-timing-function: var(--ease-standard); }
    44%       { transform: translate(170px, 100px); animation-timing-function: var(--ease-standard); }
    58%, 61%  { transform: translate(226px, 120px); animation-timing-function: var(--ease-standard); }
    70%, 73%  { transform: translate(140px, 58px); animation-timing-function: var(--ease-standard); }
    78%, 81%  { transform: translate(110px, 88px); animation-timing-function: var(--ease-standard); }
    84%, 86%  { transform: translate(260px, 88px); animation-timing-function: var(--ease-standard); }
    89%, 93%  { opacity: 1; transform: translate(300px, 158px); }
    96%, 100% { opacity: 0; transform: translate(300px, 150px); }
}

/* ---- click ripples: one keyframe, staggered by delay (percent × 14s) ---- */

.bst-click {
    stroke: var(--accent);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: bst-click 14s linear infinite;
}
@keyframes bst-click {
    0%   { opacity: 0.7; transform: scale(0.25); }
    2.2% { opacity: 0;   transform: scale(1); }
    100% { opacity: 0;   transform: scale(1); }
}
.bst-click-1 { animation-delay: 1.82s; }  /* + button       @13% */
.bst-click-2 { animation-delay: 4.62s; }  /* Browser item   @33% */
.bst-click-3 { animation-delay: 8.26s; }  /* name OK        @59% */
.bst-click-4 { animation-delay: 9.8s; }   /* URL paste      @70% */
.bst-click-5 { animation-delay: 12.6s; }  /* properties OK  @90% */

/* ---- connected: the sim replays the card's own gesture internally. The
   loop freezes and vanishes under the green flood (t≈300-420ms, covered),
   then the transparent circle emanates from the same spot (t≈520-1000ms)
   and the finished frame it reveals draws itself in. ---- */

.bst-loop {
    transition: opacity 160ms linear 300ms;
}

.bst-tour[data-connected="true"] .bst-loop {
    opacity: 0;
}

.bst-tour[data-connected="true"] .bst-loop * {
    animation-play-state: paused;
}

.bst-done-burst {
    fill: var(--success);
    r: 0;
}

/* Same two-phase recipe as the card burst: r grows from the window center
   to cover (the clipPath keeps it internal), then the registered --bsd-hole
   opens a transparent circle from the same spot. The hole's black edge sits
   AT var(--bsd-hole) so 0% is fully opaque. */
.bst-tour[data-connected="true"] .bst-done-burst {
    --bsd-hole: 0%;
    mask-image: radial-gradient(circle, transparent calc(var(--bsd-hole) - 1.5%), black var(--bsd-hole));
    -webkit-mask-image: radial-gradient(circle, transparent calc(var(--bsd-hole) - 1.5%), black var(--bsd-hole));
    animation:
        bst-done-cover 420ms cubic-bezier(0.25, 1, 0.5, 1) forwards,
        bst-done-reveal 480ms var(--ease-out-expo) 520ms forwards;
}

@keyframes bst-done-cover {
    to { r: 190px; }
}

@keyframes bst-done-reveal {
    to { --bsd-hole: 76%; }
}

/* The green frame retraces the window's own outline (perimeter ≈ 980),
   turning the whole mock window into the connected object. */
.bst-done-frame {
    stroke: var(--success);
    stroke-width: 2.5;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

/* The preview canvas: a success-tinted dark pane, the overlay's new home. */
.bst-done-preview {
    fill: color-mix(in srgb, var(--success) 10%, hsl(0 0% 10%));
    opacity: 0;
}

.bst-done-check {
    stroke: var(--success);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

/* The sources bar: quiet gray chrome so the green stays the story. */
.bst-done-bar {
    opacity: 0;
}

.bst-done-bar-frame {
    fill: hsl(0 0% 11%);
    stroke: hsl(0 0% 24%);
    stroke-width: 1;
}

.bst-done-bar-text {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    fill: hsl(0 0% 72%);
}

.bst-done-plus-btn {
    fill: hsl(0 0% 16%);
    stroke: hsl(0 0% 40%);
    stroke-width: 1;
}

.bst-done-plus {
    stroke: hsl(0 0% 82%);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.bst-done-ripple {
    stroke: var(--success);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

/* The window sheds its chrome under the flood (fully covered by ~420ms),
   so what the reveal uncovers is already the bare green object. */
.bst-tour[data-connected="true"] .bst-window {
    stroke-opacity: 0;
    transition: stroke-opacity 0ms linear 420ms;
}

.bst-tour[data-connected="true"] .bst-dot,
.bst-tour[data-connected="true"] .bst-titlebar {
    opacity: 0;
    transition: opacity 0ms linear 420ms;
}

/* Delays sit inside the reveal window (cover ends ~520ms): the frame
   sweeps its perimeter as the hole opens, the interior settles in top to
   bottom (preview, sources bar), then the check lands and ripples. */
.bst-tour[data-connected="true"] .bst-done-frame {
    animation: bsd-draw 700ms var(--ease-out-expo) 560ms forwards;
}

.bst-tour[data-connected="true"] .bst-done-preview {
    animation: bsd-fade-in 400ms ease-out 760ms forwards;
}

.bst-tour[data-connected="true"] .bst-done-bar {
    animation: bsd-fade-in 400ms ease-out 920ms forwards;
}

.bst-tour[data-connected="true"] .bst-done-check {
    animation: bsd-draw 380ms var(--ease-out-expo) 1120ms forwards;
}

.bst-tour[data-connected="true"] .bst-done-ripple {
    animation: bsd-ripple 700ms var(--ease-out-expo) 1340ms forwards;
}

@media (prefers-reduced-motion: reduce) {
    .bst-loop {
        transition: none;
    }
    .bst-loop *,
    .bst-tour[data-connected="true"] .bst-done-burst,
    .bst-tour[data-connected="true"] .bst-done-frame,
    .bst-tour[data-connected="true"] .bst-done-preview,
    .bst-tour[data-connected="true"] .bst-done-bar,
    .bst-tour[data-connected="true"] .bst-done-check,
    .bst-tour[data-connected="true"] .bst-done-ripple {
        animation: none;
    }
    .bst-tour[data-connected="true"] .bst-done-preview,
    .bst-tour[data-connected="true"] .bst-done-bar {
        opacity: 1;
    }
    .bst-tour[data-connected="true"] .bst-window,
    .bst-tour[data-connected="true"] .bst-dot,
    .bst-tour[data-connected="true"] .bst-titlebar {
        transition: none;
    }
    .bst-tour[data-connected="true"] .bst-done-frame,
    .bst-tour[data-connected="true"] .bst-done-check {
        stroke-dashoffset: 0;
    }
    .bst-tour[data-connected="true"] .bst-done-ripple {
        opacity: 0;
    }
    .bst-a,
    .bst-b,
    .bst-c,
    .bst-cursor,
    .bst-click,
    .bst-caret {
        opacity: 0;
    }
    .bst-d,
    .bst-url-text,
    .bst-w-text,
    .bst-h-text {
        opacity: 1;
    }
    .bst-typed {
        clip-path: none;
    }
    .bst-tour[data-connected="true"] .bst-d {
        opacity: 0;
    }
    .owt-workspace,
    .owt-menu-beat,
    .owt-settings-beat,
    .owt-info-beat,
    .owt-check,
    .owt-password-copy,
    .owt-password-copy-label,
    .owt-success-check,
    .owt-cursor,
    .owt-click {
        animation: none;
    }
    .owt-workspace,
    .owt-menu-beat,
    .owt-settings-beat,
    .owt-cursor,
    .owt-click {
        opacity: 0;
    }
    .owt-info-beat,
    .owt-success-check {
        opacity: 1;
        transform: none;
    }
    .owt-success-check {
        stroke-dasharray: 22;
        stroke-dashoffset: 0;
    }
    .owt-password-copy {
        fill: color-mix(in srgb, var(--success) 32%, hsl(225 12% 28%));
    }
    .owt-password-copy-label {
        opacity: 0;
    }
    .slt-editor-beat,
    .slt-settings-beat,
    .slt-general-hot,
    .slt-general-content,
    .slt-mobile-hot,
    .slt-mobile-content,
    .slt-toggle-track,
    .slt-toggle-knob,
    .slt-token-beat,
    .slt-token-field,
    .slt-cursor,
    .slt-click {
        animation: none;
    }
    .slt-editor-beat,
    .slt-general-hot,
    .slt-general-content,
    .slt-cursor,
    .slt-click {
        opacity: 0;
    }
    .slt-settings-beat,
    .slt-mobile-hot,
    .slt-mobile-content,
    .slt-token-beat {
        opacity: 1;
        transform: none;
    }
    .slt-toggle-track {
        fill: hsl(161 68% 72%);
    }
    .slt-toggle-knob {
        transform: translateX(17px);
    }
    .slt-token-field {
        stroke: hsl(161 40% 43%);
        fill: hsl(204 36% 7%);
    }
}