/* =========================================================================
   K M V L N AND CO — Marketing /demo page
   Pure CSS keyframe animations for the 5-step CRM walkthrough,
   plus contact-card + form styles. Loads AFTER marketing.css and inherits
   its --mk-* tokens.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Layout — intro + section spacing trims so the walkthrough feels like
   the page's centerpiece.
   ------------------------------------------------------------------------- */
.mk-demo-intro { padding-top: 64px; padding-bottom: 24px; }
.mk-demo-intro .mk-section-head { margin-bottom: 24px; }

/* -------------------------------------------------------------------------
   Walkthrough — header (steplist + play/pause)
   ------------------------------------------------------------------------- */
.mk-walkthrough { padding-top: 32px; padding-bottom: 96px; }

.mk-wt-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.mk-wt-steplist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
}

.mk-wt-step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-3);
    font-family: var(--ff-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
    overflow: hidden;
}
.mk-wt-step:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.mk-wt-step.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--mk-primary), var(--mk-accent));
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(47, 2, 120, .28);
}

.mk-wt-step-num {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--text-4);
    transition: color .15s ease;
}
.mk-wt-step.is-active .mk-wt-step-num { color: rgba(255, 255, 255, .85); }

.mk-wt-step-progress {
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 0;
    background: rgba(255, 255, 255, .55);
    transition: width 0s linear;
}
.mk-wt-step.is-active .mk-wt-step-progress {
    /* Drives the per-step progress bar; matches the JS-driven step cycle. */
    animation: mkWtProgress 5s linear forwards;
}
[data-mk-walkthrough][data-playing="false"] .mk-wt-step.is-active .mk-wt-step-progress {
    animation-play-state: paused;
}
@keyframes mkWtProgress { from { width: 0; } to { width: 100%; } }

.mk-wt-controls { flex: none; }
.mk-wt-toggle {
    min-width: 110px;
    justify-content: center;
}
.mk-wt-toggle .mk-wt-icon-play { display: none; }
[data-mk-walkthrough][data-playing="false"] .mk-wt-toggle .mk-wt-icon-pause { display: none; }
[data-mk-walkthrough][data-playing="false"] .mk-wt-toggle .mk-wt-icon-play  { display: inline; }

@media (max-width: 767.98px) {
    .mk-wt-step-label { display: none; }
    .mk-wt-step { padding: 10px 14px; }
}

/* -------------------------------------------------------------------------
   Stage — stacked scenes, each absolutely positioned, only the active one
   is visible. The wrapper height adapts to the SVG aspect ratio.
   ------------------------------------------------------------------------- */
.mk-wt-stage {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 16px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    /* Aspect ratio = 800 / 480 plus caption + padding. */
    min-height: 540px;
}

.mk-wt-scene {
    position: absolute;
    inset: 16px;
    margin: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mk-wt-scene.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mk-wt-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
    background: #ffffff;
    border: 1px solid var(--border);
}

.mk-wt-caption {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 4px 6px 0;
}
.mk-wt-caption-num {
    flex: none;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--mk-primary), var(--mk-accent));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 4px 10px rgba(47, 2, 120, .28);
}
.mk-wt-caption-text { display: flex; flex-direction: column; gap: 4px; }
.mk-wt-caption-text strong {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.mk-wt-caption-text span {
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   SCENE 1 — Form auto-fill
   Each typed-line group fades in with a left wipe to mimic typing.
   ------------------------------------------------------------------------- */
.mk-wt-typed { opacity: 0; }
.mk-wt-scene[data-mk-wt-scene="0"].is-active .mk-wt-typed-1 { animation: mkWtType .9s ease-out 0.2s forwards; }
.mk-wt-scene[data-mk-wt-scene="0"].is-active .mk-wt-typed-2 { animation: mkWtType .9s ease-out 1.0s forwards; }
.mk-wt-scene[data-mk-wt-scene="0"].is-active .mk-wt-typed-3 { animation: mkWtType .9s ease-out 1.6s forwards; }
.mk-wt-scene[data-mk-wt-scene="0"].is-active .mk-wt-typed-4 { animation: mkWtType .9s ease-out 2.2s forwards; }
.mk-wt-scene[data-mk-wt-scene="0"].is-active .mk-wt-typed-5 { animation: mkWtType .9s ease-out 2.9s forwards; }
.mk-wt-scene[data-mk-wt-scene="0"].is-active .mk-wt-cta-1   { animation: mkWtPop .5s ease-out 3.6s forwards; opacity: 0; transform-origin: 684px 416px; }

@keyframes mkWtType {
    0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
    100% { opacity: 1; clip-path: inset(0 0    0 0); }
}
@keyframes mkWtPop {
    0%   { opacity: 0; transform: scale(.92); }
    60%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

/* -------------------------------------------------------------------------
   SCENE 2 — Filing rows materialise
   ------------------------------------------------------------------------- */
.mk-wt-row { opacity: 0; transform: translateY(12px); }
.mk-wt-scene[data-mk-wt-scene="1"].is-active .mk-wt-row-1 { animation: mkWtRowIn .5s cubic-bezier(.2,.8,.2,1) 0.3s forwards; }
.mk-wt-scene[data-mk-wt-scene="1"].is-active .mk-wt-row-2 { animation: mkWtRowIn .5s cubic-bezier(.2,.8,.2,1) 0.7s forwards; }
.mk-wt-scene[data-mk-wt-scene="1"].is-active .mk-wt-row-3 { animation: mkWtRowIn .5s cubic-bezier(.2,.8,.2,1) 1.1s forwards; }
.mk-wt-scene[data-mk-wt-scene="1"].is-active .mk-wt-row-4 { animation: mkWtRowIn .5s cubic-bezier(.2,.8,.2,1) 1.5s forwards; }
.mk-wt-scene[data-mk-wt-scene="1"].is-active .mk-wt-row-5 { animation: mkWtRowIn .5s cubic-bezier(.2,.8,.2,1) 1.9s forwards; }

@keyframes mkWtRowIn {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
   SCENE 3 — Calendar dots + today pulse
   ------------------------------------------------------------------------- */
.mk-wt-dot { opacity: 0; transform: scale(.5); transform-origin: center; transform-box: fill-box; }
.mk-wt-scene[data-mk-wt-scene="2"].is-active .mk-wt-dot-1 { animation: mkWtDotIn .35s ease-out 0.4s forwards; }
.mk-wt-scene[data-mk-wt-scene="2"].is-active .mk-wt-dot-2 { animation: mkWtDotIn .35s ease-out 0.7s forwards; }
.mk-wt-scene[data-mk-wt-scene="2"].is-active .mk-wt-dot-3 { animation: mkWtDotIn .35s ease-out 1.0s forwards; }
.mk-wt-scene[data-mk-wt-scene="2"].is-active .mk-wt-dot-4 { animation: mkWtDotIn .35s ease-out 1.3s forwards; }
.mk-wt-scene[data-mk-wt-scene="2"].is-active .mk-wt-dot-5 { animation: mkWtDotIn .35s ease-out 1.6s forwards; }
.mk-wt-scene[data-mk-wt-scene="2"].is-active .mk-wt-dot-6 { animation: mkWtDotIn .35s ease-out 1.9s forwards; }
.mk-wt-scene[data-mk-wt-scene="2"].is-active .mk-wt-dot-7 { animation: mkWtDotIn .35s ease-out 2.2s forwards; }
.mk-wt-scene[data-mk-wt-scene="2"].is-active .mk-wt-today {
    transform-origin: center;
    transform-box: fill-box;
    animation: mkWtPulseToday 2.4s ease-out 2.5s infinite;
}

@keyframes mkWtDotIn {
    0%   { opacity: 0; transform: scale(.4); }
    60%  { opacity: 1; transform: scale(1.25); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes mkWtPulseToday {
    0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(47,2,120,.6)); }
    50%  { transform: scale(1.6); filter: drop-shadow(0 0 6px rgba(47,2,120,.6)); }
    100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(47,2,120,0)); }
}

/* -------------------------------------------------------------------------
   SCENE 4 — Payroll button state machine
   3 button states stacked in the same coordinate; cross-fade between them.
   ------------------------------------------------------------------------- */
.mk-wt-payroll-btn-loading,
.mk-wt-payroll-btn-done,
.mk-wt-payslip-sent { opacity: 0; }

.mk-wt-scene[data-mk-wt-scene="3"].is-active .mk-wt-payroll-btn-idle    { animation: mkWtFade 1s ease-out 0s forwards; }
.mk-wt-scene[data-mk-wt-scene="3"].is-active .mk-wt-payroll-btn-loading { animation: mkWtFadeBetween 1.6s ease-out 1s forwards; }
.mk-wt-scene[data-mk-wt-scene="3"].is-active .mk-wt-payroll-btn-done    { animation: mkWtFade 1s ease-out 2.6s forwards; }

.mk-wt-scene[data-mk-wt-scene="3"].is-active .mk-wt-payslip-sent { animation: mkWtFadeUp .5s ease-out 3.0s forwards; }
.mk-wt-scene[data-mk-wt-scene="3"].is-active .mk-wt-spinner {
    transform-origin: 660px 106px;
    transform-box: view-box;
    animation: mkWtSpin 1s linear infinite;
}

@keyframes mkWtFade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes mkWtFadeBetween {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes mkWtFadeUp {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes mkWtSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* The idle button is the only one visible at t=0 — keep the loading/done
   variants stacked in the same coordinates and let the fade keyframes flip
   their opacity. Stage them off when the scene is inactive so they don't
   leak into the next loop. */
.mk-wt-payroll-btn-idle    { opacity: 1; }

/* When loading takes over, hide idle. When done takes over, hide loading. */
.mk-wt-scene[data-mk-wt-scene="3"].is-active .mk-wt-payroll-btn-idle    { animation: mkWtFadeOutAt 1s ease-out 1s forwards; }
@keyframes mkWtFadeOutAt {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* -------------------------------------------------------------------------
   SCENE 5 — Bell shake + toast slide-in
   ------------------------------------------------------------------------- */
.mk-wt-bell { transform-origin: 736px 28px; transform-box: view-box; }
.mk-wt-scene[data-mk-wt-scene="4"].is-active .mk-wt-bell {
    animation: mkWtBellShake .9s ease-in-out 0.4s 2;
}
.mk-wt-scene[data-mk-wt-scene="4"].is-active .mk-wt-bell-badge {
    transform-origin: center;
    transform-box: fill-box;
    animation: mkWtBadgePulse 1.6s ease-out 0.4s 3;
}
.mk-wt-toast {
    /* default off-screen right; svg coord origin already at (800, 78) */
    transform: translate(800px, 78px);
}
.mk-wt-scene[data-mk-wt-scene="4"].is-active .mk-wt-toast {
    animation: mkWtToastIn .55s cubic-bezier(.2,.8,.2,1) 1.4s forwards;
}
@keyframes mkWtBellShake {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-15deg); }
    40%      { transform: rotate(12deg); }
    60%      { transform: rotate(-8deg); }
    80%      { transform: rotate(4deg); }
}
@keyframes mkWtBadgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.4); }
}
@keyframes mkWtToastIn {
    0%   { transform: translate(800px, 78px); }
    100% { transform: translate(500px, 78px); }
}

/* -------------------------------------------------------------------------
   Reduced-motion fallback — show every scene stacked, no animations.
   ------------------------------------------------------------------------- */
.mk-wt-fallback { display: none; }

@media (prefers-reduced-motion: reduce) {
    .mk-wt-stage { display: none; }
    .mk-wt-step-progress, .mk-wt-controls { display: none; }
    .mk-wt-fallback {
        display: block;
        margin-top: 16px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 28px 28px 8px;
        box-shadow: var(--shadow-sm);
    }
    .mk-wt-fallback-h {
        font-family: var(--ff-display);
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 14px;
        color: var(--text);
    }
    .mk-wt-fallback-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .mk-wt-fallback-list li {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        font-size: 14px;
        color: var(--text-2);
        line-height: 1.55;
    }
    .mk-wt-fallback-num {
        flex: none;
        width: 28px; height: 28px;
        border-radius: 8px;
        background: var(--mk-primary-100);
        color: var(--mk-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--ff-display);
        font-weight: 800;
        font-size: 12px;
    }
    /* Disable EVERY walkthrough animation as a belt-and-braces measure. */
    .mk-wt-typed, .mk-wt-row, .mk-wt-dot, .mk-wt-today,
    .mk-wt-payroll-btn-idle, .mk-wt-payroll-btn-loading, .mk-wt-payroll-btn-done,
    .mk-wt-payslip-sent, .mk-wt-spinner, .mk-wt-bell, .mk-wt-bell-badge,
    .mk-wt-toast, .mk-wt-step-progress, .mk-wt-cta-1 {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* -------------------------------------------------------------------------
   Contact section — address card + form
   ------------------------------------------------------------------------- */
.mk-demo-contact { padding-top: 96px; padding-bottom: 96px; }

.mk-contact-card {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}
.mk-contact-card-h {
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}
.mk-contact-address {
    font-style: normal;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 24px;
}
.mk-contact-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mk-contact-list li {
    display: flex;
    align-items: center;
    gap: 14px;
}
.mk-contact-ico {
    width: 38px; height: 38px;
    flex: none;
    border-radius: 10px;
    background: var(--mk-primary-100);
    color: var(--mk-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.mk-contact-text { display: flex; flex-direction: column; line-height: 1.3; }
.mk-contact-lbl  { font-size: 11px; font-weight: 700; color: var(--text-4); letter-spacing: .05em; text-transform: uppercase; }
.mk-contact-val  { font-size: 15px; color: var(--text); font-weight: 600; }
a.mk-contact-val { color: var(--mk-primary); text-decoration: none; }
a.mk-contact-val:hover { color: var(--mk-primary-700); }

.mk-contact-note {
    margin: 0;
    padding-top: 18px;
    border-top: 1px dashed var(--border);
    font-size: 13px;
    color: var(--text-3);
}

/* Form */
.mk-contact-form-wrap {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}
.mk-contact-success,
.mk-contact-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 18px;
}
.mk-contact-success { background: var(--mk-primary-100); color: var(--mk-primary-700); border: 1px solid rgba(47, 2, 120, .25); }
.mk-contact-error   { background: #fef2f2;               color: #b91c1c;               border: 1px solid #fecaca; }

.mk-contact-form { display: flex; flex-direction: column; gap: 18px; }

.mk-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 575.98px) {
    .mk-form-row { grid-template-columns: 1fr; }
}

.mk-form-field { display: flex; flex-direction: column; gap: 6px; }
.mk-form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: .02em;
}
.mk-form-label span { color: #ef4444; }

.mk-form-input {
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-family: var(--ff-body);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}
.mk-form-input::placeholder { color: var(--text-4); }
.mk-form-input:focus {
    outline: none;
    border-color: var(--mk-primary);
    box-shadow: 0 0 0 3px rgba(47, 2, 120, .15);
}
.mk-form-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }

.mk-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.mk-form-hint { font-size: 12px; color: var(--text-3); }