/* ═══════════════════════════════════════════════════════════
   INTERACTIVE DEMOS  —  core-features block visual

   A three step guided tour running inside the browser mock: the
   highlight travels between real targets, the tooltip follows it,
   the cursor arrives and clicks, and the step counter advances.

   The highlight is placed from each target's measured rect by
   assets/js/interactive-visual.js rather than from hardcoded
   coordinates, so it stays on the target at any width and does
   not drift if the mock's layout changes.

   All selectors are .idp-f- prefixed. That namespace is used only
   by this block; interactive-demos.html uses .idp- without the -f.
   ═══════════════════════════════════════════════════════════ */

/* the only feature visual that was missing a background, which is
   why the mock looked unanchored next to its siblings */
.interactive-visual {
    background: linear-gradient(145deg, #E9E6FF 0%, #E2EDFF 52%, #F5ECFF 100%);
}

/* ── the travelling highlight ───────────────────────────────── */
.idp-f-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--idp-w, 40px);
    height: var(--idp-h, 20px);
    transform: translate(var(--idp-x, 0px), var(--idp-y, 0px));
    border-radius: 9px;
    border: 2px solid rgba(64, 67, 255, 0.95);
    box-shadow: 0 0 0 4px rgba(64, 67, 255, 0.13);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition:
        transform 0.72s cubic-bezier(0.66, 0, 0.24, 1),
        width     0.72s cubic-bezier(0.66, 0, 0.24, 1),
        height    0.72s cubic-bezier(0.66, 0, 0.24, 1),
        opacity   0.3s ease,
        box-shadow 0.3s ease;
}
.idp-f-stage.is-live .idp-f-ring { opacity: 1; }

/* the beat when the cursor lands on the target */
.idp-f-stage.is-clicking .idp-f-ring {
    box-shadow: 0 0 0 9px rgba(64, 67, 255, 0.2);
}

/* ── the tooltip, following the highlight ───────────────────── */
.idp-f-tip {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(var(--idp-tip-x, 0px), var(--idp-tip-y, 0px));
    background: #1c1c1c;
    color: #fff;
    white-space: nowrap;
    font-family: "Instrument Sans", sans-serif;
    font-size: 10px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition:
        transform 0.72s cubic-bezier(0.66, 0, 0.24, 1),
        opacity 0.26s ease;
}
.idp-f-stage.is-live .idp-f-tip { opacity: 1; }
/* hide the label while it is travelling, so the text does not
   appear to slide across the screen mid sentence */
.idp-f-stage.is-moving .idp-f-tip { opacity: 0; }

.idp-f-tip::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 14px;
    width: 7px;
    height: 7px;
    background: #1c1c1c;
    transform: rotate(45deg);
    border-radius: 1px;
}
/* flipped above its target when there is no room below it */
.idp-f-tip.is-above::after {
    top: auto;
    bottom: -3px;
}

/* ── the cursor ─────────────────────────────────────────────── */
.idp-f-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 20px;
    transform: translate(var(--idp-cur-x, 0px), var(--idp-cur-y, 0px)) scale(1);
    opacity: 0;
    pointer-events: none;
    z-index: 6;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition:
        transform 0.72s cubic-bezier(0.5, 0.02, 0.28, 1),
        opacity 0.3s ease;
}
.idp-f-stage.is-live .idp-f-cursor { opacity: 1; }
.idp-f-stage.is-clicking .idp-f-cursor {
    transform: translate(var(--idp-cur-x, 0px), var(--idp-cur-y, 0px)) scale(0.82);
    transition: transform 0.14s ease;
}

/* the ripple the click leaves behind */
.idp-f-cursor::after {
    content: '';
    position: absolute;
    left: -7px;
    top: -7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(64, 67, 255, 0.8);
    opacity: 0;
    transform: scale(0.4);
}
.idp-f-stage.is-clicking .idp-f-cursor::after {
    animation: idp-f-ripple 0.55s ease-out;
}
@keyframes idp-f-ripple {
      0% { opacity: 0.9; transform: scale(0.4); }
    100% { opacity: 0;   transform: scale(2.1); }
}

/* ── the step rail ──────────────────────────────────────────── */
.idp-f-steps {
    position: absolute;
    left: 62px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 5;
}
.idp-f-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(28, 28, 28, 0.16);
    transition: background 0.3s ease, transform 0.3s ease;
}
.idp-f-dot.done { background: rgb(64, 67, 255); }
.idp-f-dot.current {
    background: rgb(64, 67, 255);
    transform: scale(1.35);
}
.idp-f-count {
    font-family: "Instrument Sans", sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: rgba(28, 28, 28, 0.42);
    margin-left: 6px;
}

/* ── reduced motion: show step one, hold it, no travel ──────── */
@media (prefers-reduced-motion: reduce) {
    .idp-f-ring,
    .idp-f-tip,
    .idp-f-cursor {
        transition: none;
    }
    .idp-f-cursor::after { animation: none; }
    .idp-f-stage.is-moving .idp-f-tip { opacity: 1; }
}