/* Onboarding Widget — floating HUD, bottom-left of the editor. */

.onboarding-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 50;
    color: var(--text-color);
    font-family: inherit;
    pointer-events: none;
}

.onboarding-widget--hidden { display: none; }

.onboarding-widget__expanded,
.onboarding-widget__pill {
    display: none;
    pointer-events: auto;
    background-color: transparent !important;
    /* background: hsl(from var(--modal-background-color) h s l / 0.72); */
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    border: 1px solid hsl(from var(--text-color) h s l / 0.08);
    border-radius: 14px;
    /* box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.1) inset; */
    color: var(--text-color);
}

.onboarding-widget--expanded .onboarding-widget__expanded,
.onboarding-widget--minimized .onboarding-widget__pill {
    display: flex;
}

/* ── Expanded ────────────────────────────────────────────────────────── */

.onboarding-widget__expanded {
    flex-direction: column;
    width: 480px;
    max-width: calc(100vw - 40px);
    padding: 21px 22px 23px;
    gap: 12px;
}

.onboarding-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.onboarding-widget__title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: hsl(from var(--text-color) h s calc(l - 10));
}

.onboarding-widget__header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.onboarding-widget__icon-btn,
.onboarding-widget__dev-btn {
    appearance: none;
    background: transparent;
    border: 1px solid hsl(from var(--text-color) h s l / 0.14);
    color: var(--text-color);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    padding: 2px 8px;
    line-height: 1;
}

.onboarding-widget__icon-btn { padding: 2px 8px; font-size: 14px; }
.onboarding-widget__dismiss-btn { font-size: 12px; }
.onboarding-widget__dev-btn  { font-size: 11px; opacity: 0.6; }
.onboarding-widget__dev-btn:hover,
.onboarding-widget__icon-btn:hover { background: hsl(from var(--text-color) h s l / 0.08); }

.onboarding-widget__body {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 14px;
    align-items: stretch;
}

/* Stepper */

.onboarding-widget__stepper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.onboarding-widget__stepper::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: hsl(from var(--text-color) h s l / 0.12);
}

.onboarding-widget__step {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    position: relative;
    padding: 8px 10px;
    opacity: 0.55;
    transition: opacity 160ms ease;
}

.onboarding-widget__step--done   { opacity: 0.9; }
.onboarding-widget__step--active { opacity: 1; }
.onboarding-widget__step--hovered {
    opacity: 1;
    outline: 1px solid hsl(from var(--text-color) h s l / 0.18);
    border-radius: 8px;
    cursor: pointer;
}

/* Brief gradient shine when a step newly completes */
.onboarding-widget__step--just-done::after {
    content: '';
    position: absolute;
    inset: -5px -8px;
    border-radius: 8px;
    padding: 1.5px;
    background: linear-gradient(110deg,
        transparent 20%,
        hsl(from var(--accent-color) h s l / 0.9) 45%,
        hsl(from var(--text-color) h s calc(l + 30) / 0.9) 55%,
        transparent 80%);
    background-size: 250% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    animation: onboarding-step-shine 1s ease-out forwards;
}

@keyframes onboarding-step-shine {
    0%   { opacity: 0; background-position: 120% 0; }
    25%  { opacity: 1; }
    100% { opacity: 0; background-position: -120% 0; }
}

.onboarding-widget__step-dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    margin-top: 7px;
    margin-left: 1px;
    border: 2px solid hsl(from var(--text-color) h s l / 0.28);
    background: var(--editor-background-color);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--modal-background-color);
    transition: border-color 160ms ease, background 160ms ease;
}

.onboarding-widget__step-dot svg {
    display: block;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 160ms ease, transform 160ms ease;
}

.onboarding-widget__step--active .onboarding-widget__step-dot {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px hsl(from var(--accent-color) h s l / 0.18);
}

.onboarding-widget__step--done .onboarding-widget__step-dot {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.onboarding-widget__step--done .onboarding-widget__step-dot svg {
    opacity: 1;
    transform: scale(1);
}

.onboarding-widget__step-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(from var(--text-color) h s l / 0.55);
    line-height: 1.2;
}

.onboarding-widget__step-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
}

/* Preview */

.onboarding-widget__preview {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.onboarding-widget__preview-stage {
    flex: 1;
    min-height: 110px;
    border-radius: 10px;
    background:
        linear-gradient(180deg,
            hsl(from var(--text-color) h s l / 0.04),
            hsl(from var(--text-color) h s l / 0.02));
    border: 1px solid hsl(from var(--text-color) h s l / 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Reusable editor grid (dots) — toggled per step via modifier class. */
.onboarding-widget__preview-stage--grid::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(
        circle at center,
        hsl(from var(--text-color) h s l / 0.22) 0,
        hsl(from var(--text-color) h s l / 0.22) 1.5px,
        transparent 1.5px
    );
    background-size: 18px 18px;
    background-position: 50% 50%;
    opacity: 0.45;
    pointer-events: none;
}

.onboarding-widget__preview-placeholder {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(from var(--text-color) h s l / 0.4);
}

.onboarding-widget__preview-caption {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: hsl(from var(--text-color) h s l / 0.8);
}

/* ── Step 2 animation — right-click node → panel → tweak slider ────── */

/*
 * Timeline (~5s loop):
 *   0–0.6s   cursor + mouse icon enter from top-left
 *   0.6–1.2s cursor arrives at node; node pulses
 *   1.2–1.6s right-click (mouse-icon right button fills)
 *   1.6–2.2s panel slides in, tracks fade in
 *   2.6–3.6s cursor moves to slider track; handle appears; cursor drags down
 *   3.6–4.2s hold
 *   4.2–5.0s everything fades out
 */

.onboarding-widget__anim {
    width: 100%;
    height: 100%;
    display: block;
}

/* Shift the entire "Add a Node" SVG to the right */
.onboarding-widget__anim--step3 {
    transform: translateX(30px);
}

/* ── Mouse icon (reusable) ── */
.onboarding-widget__mouse-icon { color: var(--text-color); }

/* ── Node ── */
.onboarding-widget__anim-node {
    fill: var(--node-fill-color);
    stroke: hsl(from var(--text-color) h s l / 0.5);
    stroke-width: 1.2;
    animation: onb2-node 5s ease-in-out infinite;
}

/* ── Panel ── */
.onboarding-widget__anim-panel {
    fill: var(--modal-background-color);
    stroke: hsl(from var(--text-color) h s l / 0.2);
    stroke-width: 1;
    opacity: 0;
    transform: scale(0.92);
    transform-origin: 56px 34px;
    animation: onb2-panel 5s ease-in-out infinite;
}

/* ── Slider tracks (vertical) ── */
.onboarding-widget__anim-track {
    fill: hsl(from var(--text-color) h s l / 0.2);
    opacity: 0;
    animation: onb2-track 5s ease-in-out infinite;
}

/* ── Slider handle (green dot) ── */
.onboarding-widget__anim-handle {
    fill: var(--accent-color);
    opacity: 0;
    animation: onb2-handle 5s ease-in-out infinite;
}

/* ── Cursor ── */


/* Reusable press squish — tip stays fixed, body compresses inward */

.onboarding-widget__anim-cursor {
    fill: var(--text-color);
    stroke: var(--editor-background-color);
    stroke-width: 1.2;
    transform-origin: 0 0;
    animation: onb2-cursor 5s ease-in-out infinite;
}

/* ── Mouse icon wrapper (follows cursor with offset) ── */
.onboarding-widget__anim-mouse-wrap {
    animation: onb2-mouse-pos 5s ease-in-out infinite;
    opacity: 0;
}

.onboarding-widget__anim-mouse-wrap .onboarding-widget__mouse-r {
    animation: onb2-right-click 5s ease-in-out infinite;
}

/* ── Keyframes ── */

/* Cursor: enter from bottom-right → node → slider track → drag down → fade */
@keyframes onb2-cursor {
    0%       { transform: translate(125px, 70px); opacity: 0; }
    6%       { opacity: 1; }
    22%      { transform: translate(62px, 24px); }                                          /* at node */
    26%      { transform: translate(62px, 24px) scale(0.82) skewX(4deg) skewY(4deg); }     /* press */
    30%      { transform: translate(62px, 24px) scale(1.04) skewX(-1deg) skewY(-1deg); }   /* snap back */
    32%      { transform: translate(62px, 24px); }                                          /* settled */
    52%      { transform: translate(102px, 65px); }                                         /* move to slider */
    56%      { transform: translate(102px, 65px) scale(0.82) skewX(4deg) skewY(4deg); }    /* press */
    60%      { transform: translate(102px, 65px) scale(1.04) skewX(-1deg) skewY(-1deg); }  /* snap back */
    62%      { transform: translate(102px, 65px); }                                         /* settled */
    74%      { transform: translate(102px, 81px); }                                         /* drag down */
    82%      { transform: translate(102px, 81px); }                                         /* hold */
    92%      { opacity: 1; }
    100%     { transform: translate(102px, 81px); opacity: 0; }
}

/* Mouse icon follows cursor (offset to bottom-right of tip) */
@keyframes onb2-mouse-pos {
    0%       { transform: translate(131px, 84px); opacity: 0; }
    6%       { opacity: 0.85; }
    22%      { transform: translate(70px, 38px); }
    32%      { transform: translate(70px, 38px); }
    52%      { transform: translate(112px, 81px); }
    62%      { transform: translate(112px, 81px); }
    74%      { transform: translate(112px, 94px); }
    82%      { transform: translate(112px, 94px); }
    92%      { opacity: 0.85; }
    100%     { transform: translate(112px, 94px); opacity: 0; }
}

/* Right button fills on right-click */
@keyframes onb2-right-click {
    0%, 24%   { opacity: 0; }
    28%       { opacity: 1; }
    44%       { opacity: 0.2; }
    50%       { opacity: 0; }
    100%      { opacity: 0; }
}

/* Left button fills during slider drag */
.onboarding-widget__anim-mouse-wrap .onboarding-widget__mouse-l {
    animation: onb2-left-click 5s ease-in-out infinite;
}

@keyframes onb2-left-click {
    0%, 56%   { opacity: 0; }
    60%       { opacity: 0.9; }
    82%       { opacity: 0; }
    88%       { opacity: 0; }
    100%      { opacity: 0; }
}

/* Node pulses on hover/click */
@keyframes onb2-node {
    0%, 18%  { transform: scale(1.0); stroke: hsl(from var(--text-color) h s l / 0.5); filter: none; }
    30%, 90% { transform: scale(0.97); stroke: var(--accent-color); filter: drop-shadow(0 0 6px hsl(from var(--accent-color) h s l / 0.2)); }
    100%     { transform: scale(1.0); stroke: hsl(from var(--text-color) h s l / 0.5); filter: none; }
}

/* Panel slides in after click */
@keyframes onb2-panel {
    0%, 32%  { opacity: 0; transform: scale(0.87); }
    40%, 88% { opacity: 1; transform: scale(1); }
    96%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Tracks appear with panel and disappear together */
@keyframes onb2-track {
    0%, 34%  { opacity: 0; }
    40%, 88% { opacity: 1; }
    96%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Handle appears, then slides down with cursor drag */
@keyframes onb2-handle {
    0%, 34%  { opacity: 0; cy: 65px; }
    40%, 60%  { opacity: 0.6; cy: 65px; }
    75% { opacity: 1; cy: 80px; }
    100%     { opacity: 0; cy: 80px; }
}

/* ── Step 3 animation — right-click canvas → node library → pick node ─ */

/*
 * Timeline (~5s loop):
 *   0–0.6s   cursor + mouse enter from bottom-right toward canvas center
 *   0.6–1.2s cursor arrives at canvas center
 *   1.2–1.6s right-click (mouse right button fills)
 *   1.6–2.2s library menu scales in, icon grid fades in
 *   2.6–3.2s cursor moves to a specific icon
 *   3.2–3.6s left-click (mouse left button fills), highlight ring appears
 *   3.6–4.2s hold
 *   4.2–5.0s everything fades out
 */

/* ── Spinning locator arcs ── */
.onboarding-widget__anim-locator {
    opacity: 0;
    animation: onb3-locator 6s ease-in-out infinite;
}

.onboarding-widget__anim-locator-outer {
    fill: none;
    stroke: hsl(from var(--text-color) h s l / 0.35);
    stroke-width: 1.5;
    stroke-dasharray: 55 33;
    stroke-linecap: round;
    transform-origin: 45px 29px;
    animation: onb3-spin-cw 3s linear infinite;
}

.onboarding-widget__anim-locator-inner {
    fill: none;
    stroke: hsl(from var(--text-color) h s l / 0.22);
    stroke-width: 1.5;
    stroke-dasharray: 70 43;
    stroke-linecap: round;
    transform-origin: 45px 29px;
    animation: onb3-spin-ccw 4.5s linear infinite;
}

@keyframes onb3-spin-cw  { to { transform: rotate(360deg); } }
@keyframes onb3-spin-ccw { to { transform: rotate(-360deg); } }

/* Locator visible while menu is open, hidden when new node appears */
@keyframes onb3-locator {
    0%, 30%  { opacity: 0; }
    36%, 68% { opacity: 1; }
    76%      { opacity: 0; }
    100%     { opacity: 0; }
}

.onboarding-widget__anim-lib {
    fill: var(--modal-background-color);
    stroke: hsl(from var(--text-color) h s l / 0.2);
    stroke-width: 1;
    opacity: 0;
    transform: scale(0.87);
    transform-origin: 50px 34px;
    animation: onb3-lib 6s ease-in-out infinite;
}

.onboarding-widget__anim-lib-icon {
    transform: translateX(5px);
    fill: hsl(from var(--text-color) h s l / 0.25);
    opacity: 0;
    animation: onb3-icon 6s ease-in-out infinite;
}

.onboarding-widget__anim-lib-select {
    transform: translateX(5px);
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 1.5;
    opacity: 0;
    animation: onb3-select 6s ease-in-out infinite;
}

.onboarding-widget__anim-newnode {
    fill: var(--node-fill-color);
    stroke: var(--accent-color);
    stroke-width: 1.2;
    opacity: 0;
    transform: scale(0.6);
    transform-origin: 45px 29px;
    animation: onb3-newnode 6s ease-in-out infinite;
    filter: drop-shadow(0 0 4px hsl(from var(--accent-color) h s l / 0.3));
}

/* Cursor — step 3 specific path */
.onboarding-widget__anim-cursor--s3 {
    animation: onb3-cursor 6s ease-in-out infinite;
}

/* Mouse wrap — step 3 specific path */
.onboarding-widget__anim-mouse-wrap--s3 {
    animation: onb3-mouse-pos 6s ease-in-out infinite;
    opacity: 0;
}

.onboarding-widget__anim-mouse-wrap--s3 .onboarding-widget__mouse-r {
    animation: onb3-right-click 6s ease-in-out infinite;
}

.onboarding-widget__anim-mouse-wrap--s3 .onboarding-widget__mouse-l {
    animation: onb3-left-click 6s ease-in-out infinite;
}

/* ── Step 3 keyframes ── */

/* Cursor: bottom-right → upper-left (right-click) → icon (left-click) → fade at end */
@keyframes onb3-cursor {
    0%       { transform: translate(145px, 85px); opacity: 0; }
    6%       { opacity: 1; }
    20%      { transform: translate(42px, 24px); }                                         /* right-click position */
    24%      { transform: translate(42px, 24px) scale(0.82) skewX(4deg) skewY(4deg); }    /* press */
    28%      { transform: translate(42px, 24px) scale(1.04) skewX(-1deg) skewY(-1deg); }  /* snap back */
    34%      { transform: translate(42px, 24px); }                                         /* settled */
    52%      { transform: translate(70px, 50px); }                                         /* move to icon */
    56%      { transform: translate(70px, 50px) scale(0.82) skewX(4deg) skewY(4deg); }    /* press */
    60%      { transform: translate(70px, 50px) scale(1.04) skewX(-1deg) skewY(-1deg); }  /* snap back */
    66%      { transform: translate(70px, 50px); }                                         /* settled */
    92%      { opacity: 1; transform: translate(70px, 50px); }
    100%     { opacity: 0; transform: translate(70px, 50px); }
}

/* Mouse follows cursor (offset below-right of tip) */
@keyframes onb3-mouse-pos {
    0%       { transform: translate(153px, 99px); opacity: 0; }
    6%       { opacity: 0.85; }
    20%      { transform: translate(51px, 38px); }
    34%      { transform: translate(51px, 38px); }
    52%      { transform: translate(80px, 64px); }
    66%      { transform: translate(80px, 64px); }
    92%      { opacity: 0.85; transform: translate(80px, 64px); }
    100%     { opacity: 0; transform: translate(80px, 64px); }
}

/* Right-click on canvas */
@keyframes onb3-right-click {
    0%, 22%   { opacity: 0; }
    26%       { opacity: 1; }
    34%       { opacity: 0.2; }
    38%       { opacity: 0; }
    100%      { opacity: 0; }
}

/* Left-click to select icon */
@keyframes onb3-left-click {
    0%, 56%   { opacity: 0; }
    60%       { opacity: 0.9; }
    68%       { opacity: 0; }
    100%      { opacity: 0; }
}

/* Library panel scales in, fades out when node reveals */
@keyframes onb3-lib {
    0%, 28%  { opacity: 0; transform: scale(0.87); }
    36%, 68% { opacity: 1; transform: scale(1); }
    70%      { opacity: 0; transform: scale(0.95); }
    100%     { opacity: 0; transform: scale(0.95); }
}

/* Icon grid fades in with menu, fades out with menu */
@keyframes onb3-icon {
    0%, 30%  { opacity: 0; }
    36%, 68% { opacity: 1; }
    70%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Selection ring on chosen icon — fade only, no scale */
@keyframes onb3-select {
    0%, 60%  { opacity: 0; }
    64%, 68% { opacity: 1; }
    70%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* New node pops in at right-click position after menu disappears */
@keyframes onb3-newnode {
    0%, 71%  { opacity: 0; transform: scale(0.4); }
    80%      { opacity: 1; transform: scale(1.15); }
    83%      { transform: scale(0.92); }
    85%      { transform: scale(1.05); }
    87%, 94% { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; transform: scale(1); }
}

/* ── Step 4 animation — drag wire from port A to port B ────────────── */

/*
 * Timeline (~6s loop):
 *   0–1.1s   cursor + mouse enter from bottom-right, land on port A
 *   1.1–1.7s press (mouse left button fills), hold at port A
 *   1.7–3.6s drag toward port B — dashed wire sags and follows the cursor
 *   3.6–4.0s hover port B — ring grows, node B highlights, release click
 *   4.0–4.3s wire snaps straight, dashed → solid, arrowhead appears
 *   4.3–5.5s hold the completed connection
 *   5.5–6.0s everything fades out
 */

.onboarding-widget__anim-s4-node {
    fill: var(--node-fill-color, none);
    stroke: hsl(from var(--text-color) h s l / 0.5);
    stroke-width: 1.2;
}

.onboarding-widget__anim-s4-node-b {
    animation: onb4-node-b 6s ease-in-out infinite;
}

.onboarding-widget__anim-s4-icon {
    fill: hsl(from var(--text-color) h s l / 0.35);
}

.onboarding-widget__anim-s4-port {
    fill: var(--accent-color);
}

.onboarding-widget__anim-s4-port-a {
    opacity: 0;
    animation: onb4-porta 6s ease-in-out infinite;
}

.onboarding-widget__anim-s4-portring {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 1.2;
    opacity: 0;
    transform-origin: 115px 47px;
    animation: onb4-ring 6s ease-in-out infinite;
}

.onboarding-widget__anim-s4-wire {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 4 3;
    opacity: 0;
    animation: onb4-wire 6s linear infinite;
}

.onboarding-widget__anim-s4-arrow {
    fill: var(--accent-color);
    opacity: 0;
    animation: onb4-arrow 6s ease-in-out infinite;
    transform: translateX(-2px);
}

.onboarding-widget__anim-s4-cursorwrap {
    animation: onb4-cursor 6s ease-in-out infinite;
    opacity: 0;
}

/* The wrap drives the transform; the cursor does press squishes at click times */
.onboarding-widget__anim-s4-cursorwrap .onboarding-widget__anim-cursor {
    animation: onb4-cursor-press 6s ease-in-out infinite;
}

/* Press at ~23% (start wire) and ~67% (complete wire) of the 6s loop */
@keyframes onb4-cursor-press {
    0%, 20%                      { transform: scale(1) skewX(0deg) skewY(0deg); }
    23%                          { transform: scale(0.82) skewX(4deg) skewY(4deg); }
    27%                          { transform: scale(1.04) skewX(-1deg) skewY(-1deg); }
    30%, 64%                     { transform: scale(1) skewX(0deg) skewY(0deg); }
    67%                          { transform: scale(0.82) skewX(4deg) skewY(4deg); }
    71%                          { transform: scale(1.04) skewX(-1deg) skewY(-1deg); }
    74%, 100%                    { transform: scale(1) skewX(0deg) skewY(0deg); }
}

.onboarding-widget__anim-mouse-wrap--s4 {
    animation: onb4-mouse-pos 6s ease-in-out infinite;
    opacity: 0;
}

.onboarding-widget__anim-mouse-wrap--s4 .onboarding-widget__mouse-l {
    animation: onb4-left-click 6s ease-in-out infinite;
}

/* Step 4 never right-clicks — block the generic step-2 animation */
.onboarding-widget__anim-mouse-wrap--s4 .onboarding-widget__mouse-r {
    animation: none;
}

/* ── Step 4 keyframes ── */

/* Cursor wrap: continuous glide — bottom-right → port A → drag → port B */
@keyframes onb4-cursor {
    0%       { transform: translate(150px, 85px); opacity: 0; }
    5%       { opacity: 1; }
    17%      { transform: translate(60px, 48px); }        /* at port A */
    24%      { transform: translate(60px, 48px); }        /* momentary click */
    60%      { transform: translate(132px, 44px); }       /* at port B */
    66%      { transform: translate(132px, 44px); }       /* momentary click */
    94%      { transform: translate(132px, 44px); opacity: 1; }
    100%     { transform: translate(132px, 44px); opacity: 0; }
}

/* Mouse follows cursor (offset below-right of tip) */
@keyframes onb4-mouse-pos {
    0%       { transform: translate(156px, 102px); opacity: 0; }
    5%       { opacity: 0.85; }
    17%      { transform: translate(70px, 65px); }
    24%      { transform: translate(70px, 65px); }
    60%      { transform: translate(143px, 60px); }
    66%      { transform: translate(143px, 60px); }
    94%      { transform: translate(143px, 60px); opacity: 0.85; }
    100%     { transform: translate(143px, 60px); opacity: 0; }
}

/* Momentary left-clicks: once to start the wire, once to complete it */
@keyframes onb4-left-click {
    0%, 20%  { opacity: 0; }
    23%      { opacity: 1; }
    29%      { opacity: 0; }
    57%      { opacity: 0; }
    60%      { opacity: 0; }
    67%      { opacity: 1; }
    70%     { opacity: 0; }
    100%     { opacity: 0; }
}

/* Port A dot appears when the cursor hovers the node */
@keyframes onb4-porta {
    0%, 14%  { opacity: 0; }
    20%      { opacity: 0.9; }
    90%      { opacity: 0.9; }
    100%     { opacity: 0; }
}

/*
 * Wire: endpoint tracks the cursor; control point sags below the line
 * while dragging, then pulls up to make the wire straight on connect.
 * Every keyframe keeps the same "M…Q…" command structure so `d` interpolates.
 */
@keyframes onb4-wire {
    0%, 26%  { opacity: 0; d: path("M59 47 Q59 47 59 47"); stroke-dasharray: 4 3; }
    30%      { opacity: 1; d: path("M59 47 Q63 54 64 52"); }
    52%      { opacity: 1; d: path("M59 47 Q76 78 100 47"); /* path("M<startX> <startY> Q<controlX> <controlY> <endX> <endY>") */ }
    60%      { opacity: 1; d: path("M59 47 Q88 78 115 47"); }
    75%      { opacity: 1; d: path("M59 47 Q87 78 115 47"); stroke-dasharray: 4 3; }
    78%      { opacity: 1; d: path("M59 47 Q87 47 115 47"); stroke-dasharray: 0 0; }
    100%     { opacity: 0; d: path("M59 47 Q87 47 115 47"); stroke-dasharray: 0 0; }
}

/* Arrowhead pops in on connect */
@keyframes onb4-arrow {
    0%, 74%  { opacity: 0; }
    75%      { opacity: 1; }
    92%      { opacity: 1; }
    100%     { opacity: 0; }
}

/* Port B ring grows while hovered */
@keyframes onb4-ring {
    0%, 54%  { opacity: 0; transform: scale(0.5); }
    60%      { opacity: 0.8; transform: scale(1); }
    66%      { opacity: 0.8; transform: scale(1); }
    74%      { opacity: 0; transform: scale(1.15); }
    100%     { opacity: 0; transform: scale(1.15); }
}

/* Node B highlights while hovered */
@keyframes onb4-node-b {
    0%, 64%  { stroke: hsl(from var(--text-color) h s l / 0.5); filter: none; }
    68%, 80% { stroke: var(--accent-color); filter: drop-shadow(0 0 5px hsl(from var(--accent-color) h s l / 0.25)); }
    80%     { stroke: hsl(from var(--text-color) h s l / 0.5); filter: none; }
    100%     { stroke: hsl(from var(--text-color) h s l / 0.5); filter: none; }
}

/* ── Step 5: Record ──────────────────────────────────────────────────── */

.onboarding-widget__anim--step5 {
    overflow: visible;
}

/* App chrome: toolbars + render view */
.onboarding-widget__anim-s5-chrome {
    fill: var(--modal-background-color);
    stroke: hsl(from var(--text-color) h s l / 0.18);
    stroke-width: 1.2;
}

.onboarding-widget__anim-s5-renderView {
    stroke: var(--modal-primary-color);
    stroke-width: 2;
}

.onb5-grad-stop0 {
    animation: onb5-grad-stop0 5s linear infinite;
}

.onb5-grad-stop1 {
    animation: onb5-grad-stop1 5s linear infinite;
}

@keyframes onb5-grad-stop0 {
    0%   { stop-color: #a855f7; }
    25%  { stop-color: #3b82f6; }
    50%  { stop-color: #06b6d4; }
    75%  { stop-color: #e03030; }
    100% { stop-color: #a855f7; }
}

@keyframes onb5-grad-stop1 {
    0%   { stop-color: #e03030; }
    25%  { stop-color: #a855f7; }
    50%  { stop-color: #3b82f6; }
    75%  { stop-color: #06b6d4; }
    100% { stop-color: #e03030; }
}

/* Record button group — slides up and fades in, pushed on click */
.onboarding-widget__anim-s5-recbtn {
    animation: onb5-recbtn 6s ease-in-out infinite;
    transform-origin: 145px 120px;
    opacity: 0;
}

.onboarding-widget__anim-s5-recpill {
    fill: hsl(from var(--editor-background-color) h s l / 0.85);
    stroke: none;
    animation: onb5-recpill-flash 6s ease-in-out infinite;
}

@keyframes onb5-recpill-flash {
    0%, 56%   { fill: hsl(from var(--editor-background-color) h s l / 0.85); }
    58%       { fill: hsl(from var(--text-color) h s l / 0.35); }
    63%       { fill: hsl(from var(--editor-background-color) h s l / 0.85); }
    100%      { fill: hsl(from var(--editor-background-color) h s l / 0.85); }
}


.onboarding-widget__anim-s5-recdot {
    fill: #e03030;
}

/* Cursor wrap: enters bottom-right → hovers render view → clicks rec button */
.onboarding-widget__anim-s5-cursorwrap {
    animation: onb5-cursor 6s ease-in-out infinite;
    opacity: 0;
}

.onboarding-widget__anim-s5-cursorwrap .onboarding-widget__anim-cursor {
    transform-origin: 0 0;
    animation: onb5-cursor-press 6s ease-in-out infinite;
}

/* Mouse icon */
.onboarding-widget__anim-mouse-wrap--s5 {
    animation: onb5-mouse-pos 6s ease-in-out infinite;
    opacity: 0;
}

.onboarding-widget__anim-mouse-wrap--s5 .onboarding-widget__mouse-l {
    animation: onb5-left-click 6s ease-in-out infinite;
}

/* Block inherited right-click */
.onboarding-widget__anim-mouse-wrap--s5 .onboarding-widget__mouse-r {
    animation: none;
}

/* ── Step 5 keyframes ── */

/* Cursor: enter bottom-right → land on render view → slide to rec button → click */
@keyframes onb5-cursor {
    0%       { transform: translate(70px, 55px); opacity: 0; }
    6%       { opacity: 1; }
    25%      { transform: translate(140px, 92px); }         /* hover render view */
    40%      { transform: translate(144px, 118px); }         /* move to rec button */
    70%      { transform: translate(148px, 122px); opacity: 1; }
    100%     { transform: translate(148px, 122px); opacity: 0; }
}

/* Baked press squish at ~68% (click rec button) */
@keyframes onb5-cursor-press {
    0%, 55%   { transform: scale(1) skewX(0deg) skewY(0deg); }
    58%       { transform: scale(0.82) skewX(4deg) skewY(4deg); }
    62%       { transform: scale(1.04) skewX(-1deg) skewY(-1deg); }
    65%, 100% { transform: scale(1) skewX(0deg) skewY(0deg); }
}

/* Mouse icon follows cursor */
@keyframes onb5-mouse-pos {
    0%       { transform: translate(168px, 109px); opacity: 0; }
    6%       { opacity: 0.85; }
    22%      { transform: translate(138px, 76px); }
    50%      { transform: translate(138px, 76px); }
    62%      { transform: translate(130px, 101px); }
    68%      { transform: translate(130px, 101px); }
    90%      { transform: translate(130px, 101px); opacity: 0.85; }
    100%     { transform: translate(130px, 101px); opacity: 0; }
}

/* Left click: momentary at 58% */
@keyframes onb5-left-click {
    0%, 56%   { fill: transparent; }
    58%, 62%  { fill: hsl(from var(--text-color) h s l / 0.5); }
    64%, 100% { fill: transparent; }
}

/* Rec button: slide up on appear, push on click, slide down on exit */
@keyframes onb5-recbtn {
    0%, 20%   { opacity: 0; transform: translateY(6px) scale(1); }
    23%       { opacity: 1; transform: translateY(0px) scale(1); }
    56%       { opacity: 1; transform: translateY(0px) scale(1); }
    66%       { opacity: 1; transform: translateY(0px) scale(1); }
    88%       { opacity: 1; transform: translateY(0px) scale(1); }
    96%, 100% { opacity: 0; transform: translateY(6px) scale(1); }
}


/* ── Minimized pill ──────────────────────────────────────────────────── */

.onboarding-widget__pill {
    appearance: none;
    cursor: pointer;
    text-align: left;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font: inherit;
    color: inherit;
    min-width: 320px;
    max-width: calc(100vw - 40px);
}

.onboarding-widget__pill:hover {
    border-color: hsl(from var(--text-color) h s l / 0.2);
}

.onboarding-widget__pill-count {
    font-size: 20px;
    font-weight: 600;
    color: hsl(from var(--text-color) h s l / 0.75);
    min-width: 36px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 6px;
    background: hsl(from var(--accent-color) h s l / 0.12);
}

.onboarding-widget__pill-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.onboarding-widget__pill-percent {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
}

.onboarding-widget__pill-label {
    font-size: 11px;
    color: hsl(from var(--text-color) h s l / 0.5);
}

.onboarding-widget__pill-bar {
    display: flex;
    gap: 3px;
    width: 110px;
    flex-shrink: 0;
}

.onboarding-widget__pill-seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: hsl(from var(--text-color) h s l / 0.14);
}

.onboarding-widget__pill-seg--done {
    background: var(--accent-color);
}

/* ── Completion overlay ──────────────────────────────────────────────── */

.onboarding-widget__done-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    background: hsl(from var(--modal-background-color) h s l / 0.75);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: onboarding-overlay-in 240ms ease-out;
    text-align: center;
    padding: 16px;
}

@keyframes onboarding-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.onboarding-widget__done-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.onboarding-widget__done-subtitle {
    font-size: 13px;
    color: hsl(from var(--text-color) h s l / 0.7);
}

.onboarding-widget__done-thumb {
    display: block;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid hsl(from var(--text-color) h s l / 0.15);
    line-height: 0;
}

.onboarding-widget__done-thumb:hover {
    border-color: hsl(from var(--text-color) h s l / 0.4);
}

.onboarding-widget__done-thumb-img {
    width: 100%;
    display: block;
    border-radius: 7px;
}

.onboarding-widget__go-btn {
    appearance: none;
    display: block;
    width: 70%;
    margin-top: 10px;
    padding: 8px 22px;
    border-radius: 8px;
    border: none;
    background: var(--accent-color);
    color: var(--dark-text-color, #fff);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.onboarding-widget__go-btn:hover { filter: brightness(1.1); }



/* ── Confetti cannon (fires from widget center) ──────────────────────── */

.onboarding-widget__confetti {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}

.onboarding-widget__confetti-piece {
    position: absolute;
    display: block;
    opacity: 0;
    animation: onboarding-confetti-blast 1.2s cubic-bezier(0.15, 0.85, 0.45, 1) forwards;
}

@keyframes onboarding-confetti-blast {
    0% {
        transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
        opacity: 0;
    }
    8%  { opacity: 1; }
    100% {
        transform: translate(
            calc(-50% + var(--dx, 0px)),
            calc(-50% + var(--dy, -60px))
        ) scale(1) rotate(var(--rot, 180deg));
        opacity: 0;
    }
}