/* ============================================================
   "Why teams bring in Askpilot" — three reason cards, each with a
   small animation on top. Looping vignettes gated by an
   IntersectionObserver (js/why-askpilot.js); reduced motion shows
   the resolved end-state. Palette + card language match the rest
   of the site (brand blues, green "done", soft card shadow).
   ============================================================ */
#why-askpilot {
    --wy-accent: #4c6cff;
    --wy-accent-2: #6583FF;
    --wy-ok: #10b981;
    --wy-ok-deep: #047857;
    --wy-ink: #0f172a;
    --wy-muted: #6b7280;
    --wy-border: #e5e7eb;
    --wy-soft: #eef1ff;
}

.wy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 860px) {
    .wy-grid { grid-template-columns: repeat(3, 1fr); }
}

.wy-card {
    background: #fff;
    border: 1px solid var(--wy-border);
    border-radius: 22px;
    box-shadow: 0 25px 50px -12px rgba(17, 24, 39, 0.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wy-stage {
    height: 188px;
    background: linear-gradient(180deg, #f4faf7, #ecf6f1);
    border-bottom: 1px solid #e3efe9;
    position: relative;
    overflow: hidden;
}
.wy-body { padding: 26px 26px 30px; }
.wy-card-title { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--wy-ink); margin: 0 0 10px; }
.wy-card-desc { font-size: 16px; font-weight: 300; line-height: 1.625; color: #4b5563; margin: 0; }
@media (min-width: 640px) {
    .wy-card-title { font-size: 26px; }
    .wy-card-desc { font-size: 18px; }
}

/* ---------- Card 1 — nothing slips: events drop in, get caught ---------- */
.wy5 { display: flex; flex-direction: column; justify-content: center; gap: 9px; height: 100%; padding: 18px 30px; }
.wy5-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 11px;
    background: #fff; border: 1px solid #e3e7f3; border-radius: 11px;
    box-shadow: 0 6px 16px -10px rgba(17, 24, 39, 0.25);
    opacity: 0; transform: translateY(-8px);
}
.wy5-ico {
    width: 26px; height: 26px; flex: none; border-radius: 8px;
    background: var(--wy-soft); color: var(--wy-accent);
    display: flex; align-items: center; justify-content: center;
}
.wy5-ico svg { width: 13px; height: 13px; }
.wy5-txt { display: flex; flex-direction: column; min-width: 0; }
.wy5-txt b { font-size: 11.5px; font-weight: 600; color: var(--wy-ink); white-space: nowrap; }
.wy5-txt i { font-style: normal; font-size: 9.5px; color: var(--wy-muted); }
.wy5-st {
    margin-left: auto; width: 18px; height: 18px; flex: none; border-radius: 50%;
    background: var(--wy-ok); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transform: scale(0);
}
.wy5-st svg { width: 9px; height: 9px; }
.wy-on .wy5-row:nth-child(1) { animation: wy5r1 7s ease-in-out infinite; }
.wy-on .wy5-row:nth-child(2) { animation: wy5r2 7s ease-in-out infinite; }
.wy-on .wy5-row:nth-child(3) { animation: wy5r3 7s ease-in-out infinite; }
.wy-on .wy5-row:nth-child(1) .wy5-st { animation: wy5c1 7s cubic-bezier(0.2, 0.9, 0.3, 1.4) infinite; }
.wy-on .wy5-row:nth-child(2) .wy5-st { animation: wy5c2 7s cubic-bezier(0.2, 0.9, 0.3, 1.4) infinite; }
.wy-on .wy5-row:nth-child(3) .wy5-st { animation: wy5c3 7s cubic-bezier(0.2, 0.9, 0.3, 1.4) infinite; }
@keyframes wy5r1 { 0%, 3% { opacity: 0; transform: translateY(-8px); } 8%, 91% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes wy5r2 { 0%, 21% { opacity: 0; transform: translateY(-8px); } 26%, 91% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes wy5r3 { 0%, 39% { opacity: 0; transform: translateY(-8px); } 44%, 91% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes wy5c1 { 0%, 13% { transform: scale(0); } 17%, 93% { transform: scale(1); } 98%, 100% { transform: scale(0); } }
@keyframes wy5c2 { 0%, 31% { transform: scale(0); } 35%, 93% { transform: scale(1); } 98%, 100% { transform: scale(0); } }
@keyframes wy5c3 { 0%, 49% { transform: scale(0); } 53%, 93% { transform: scale(1); } 98%, 100% { transform: scale(0); } }

/* ---------- eyebrow + shimmer headline (ported from the old value band) ---------- */
.wy-eyebrow {
    margin: 0 0 14px;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: #6583FF; text-align: center;
}
/* Shimmer-light effect on "Save hours every week." —
                       brand-blue → pale-blue → magenta arc sliding across
                       the letterforms once every ~6 seconds. The real text
                       always renders in its normal heading colour; a
                       ::before pseudo-element duplicates it and paints the
                       moving gradient, clipped to the glyphs. */
                    .value-headline-shimmer {
                        position: relative;
                        display: inline-block;
                    }
                    .value-headline-shimmer::before {
                        content: attr(data-text);
                        position: absolute;
                        inset: 0;
                        pointer-events: none;
                        background-image: linear-gradient(
                            110deg,
                            transparent 0%,
                            transparent 40%,
                            #6583FF 45%,
                            #a5b8ff 50%,
                            #FF5CFF 55%,
                            #6583FF 60%,
                            transparent 65%,
                            transparent 100%
                        );
                        background-size: 250% 100%;
                        background-repeat: no-repeat;
                        background-position: 150% 0;
                        -webkit-background-clip: text;
                        background-clip: text;
                        color: transparent;
                        -webkit-text-fill-color: transparent;
                        /* 4s of motion + 2s static = 6s cycle. */
                        animation: value-headline-shimmer-sweep 6s linear infinite;
                    }
                    @keyframes value-headline-shimmer-sweep {
                        0%   { background-position: 150% 0; }
                        67%  { background-position: -150% 0; }
                        100% { background-position: -150% 0; }
                    }
                    @media (prefers-reduced-motion: reduce) {
                        .value-headline-shimmer::before { display: none; }
                    }

/* ---------- Card 2 — your process doc: steps / rules / tools assemble ---------- */
.wy7 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; height: 100%; padding: 16px; }
.wy7-doc {
    width: 200px; background: #fff; border: 1px solid #e3e7f3; border-radius: 12px;
    box-shadow: 0 8px 20px -12px rgba(17, 24, 39, 0.3); overflow: hidden;
}
.wy7-dochead {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 11px; border-bottom: 1px solid #eef0f5; background: #fbfcfe;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px; color: #6b7280;
}
.wy7-dot { width: 6px; height: 6px; border-radius: 50%; background: #6583FF; flex: none; }
.wy7-line {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; color: #1f2937;
    opacity: 0; transform: translateX(-6px);
}
.wy7-line + .wy7-line { border-top: 1px solid #f4f5f9; }
.wy7-key { color: #4c6cff; font-weight: 700; }
.wy7-chk {
    margin-left: auto; width: 13px; height: 13px; flex: none; border-radius: 50%;
    background: var(--wy-ok); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transform: scale(0);
}
.wy7-chk svg { width: 7px; height: 7px; }
.wy-on .wy7-line:nth-of-type(1) { animation: wy7l1 7s ease-in-out infinite; }
.wy-on .wy7-line:nth-of-type(2) { animation: wy7l2 7s ease-in-out infinite; }
.wy-on .wy7-line:nth-of-type(3) { animation: wy7l3 7s ease-in-out infinite; }
.wy-on .wy7-line:nth-of-type(1) .wy7-chk { animation: wy7c1 7s cubic-bezier(0.2, 0.9, 0.3, 1.4) infinite; }
.wy-on .wy7-line:nth-of-type(2) .wy7-chk { animation: wy7c2 7s cubic-bezier(0.2, 0.9, 0.3, 1.4) infinite; }
.wy-on .wy7-line:nth-of-type(3) .wy7-chk { animation: wy7c3 7s cubic-bezier(0.2, 0.9, 0.3, 1.4) infinite; }
@keyframes wy7l1 { 0%, 5%  { opacity: 0; transform: translateX(-6px); } 10%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes wy7l2 { 0%, 15% { opacity: 0; transform: translateX(-6px); } 20%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes wy7l3 { 0%, 25% { opacity: 0; transform: translateX(-6px); } 30%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes wy7c1 { 0%, 12% { transform: scale(0); } 16%, 93% { transform: scale(1); } 99%, 100% { transform: scale(0); } }
@keyframes wy7c2 { 0%, 22% { transform: scale(0); } 26%, 93% { transform: scale(1); } 99%, 100% { transform: scale(0); } }
@keyframes wy7c3 { 0%, 32% { transform: scale(0); } 36%, 93% { transform: scale(1); } 99%, 100% { transform: scale(0); } }
.wy7-stamp {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 600; color: var(--wy-ok-deep);
    opacity: 0; transform: translateY(4px);
}
.wy7-stamp svg { width: 10px; height: 10px; }
.wy-on .wy7-stamp { animation: wy7stamp 7s ease-in-out infinite; }
@keyframes wy7stamp { 0%, 42% { opacity: 0; transform: translateY(4px); } 49%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* ---------- Card 3 — control: mini approval popup, Approve -> Sent ---------- */
.wy8 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; height: 100%; padding: 16px; }
.wy8-pop {
    width: 210px; background: #fff; border: 1px solid #e3e7f3; border-radius: 13px;
    box-shadow: 0 10px 24px -12px rgba(17, 24, 39, 0.35);
    padding: 11px 12px 12px;
    opacity: 0; transform: translateY(10px) scale(0.97);
}
.wy-on .wy8-pop { animation: wy8pop 7.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
@keyframes wy8pop { 0%, 4% { opacity: 0; transform: translateY(10px) scale(0.97); } 9%, 93% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.wy8-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; color: #0f172a;
    margin-bottom: 7px;
}
.wy8-head img { width: 13px; height: 13px; }
.wy8-msg {
    padding: 8px 9px; border: 1px solid #eef0f5; border-radius: 8px; background: #f8fafc;
    font-size: 10.5px; line-height: 1.45; color: #374151;
}
.wy8-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 9px; }
.wy8-edit {
    padding: 4px 10px; border: 1px solid #e3e7f3; border-radius: 7px;
    font-size: 10px; font-weight: 600; color: #374151;
}
.wy8-approve {
    position: relative; display: inline-flex; border-radius: 7px; overflow: hidden;
}
.wy-on .wy8-approve { animation: wy8press 7.5s ease infinite; }
@keyframes wy8press { 0%, 29.5% { transform: none; } 31% { transform: scale(0.92); } 32.5%, 100% { transform: none; } }
.wy8-face {
    display: inline-flex; align-items: center; gap: 4px; justify-content: center;
    padding: 4px 11px; font-size: 10px; font-weight: 600;
}
.wy8-face svg { width: 9px; height: 9px; }
.wy8-face-a { background: #0a0a0a; color: #fff; }
.wy8-face-b {
    position: absolute; inset: 0;
    background: #ecfdf5; color: var(--wy-ok-deep);
    box-shadow: inset 0 0 0 1px #a7f3d0;
    opacity: 0;
}
.wy-on .wy8-face-b { animation: wy8sent 7.5s ease infinite; }
@keyframes wy8sent { 0%, 32% { opacity: 0; } 34%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
.wy8-logged {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 600; color: var(--wy-ok-deep);
    opacity: 0; transform: translateY(4px);
}
.wy8-logged svg { width: 10px; height: 10px; }
.wy-on .wy8-logged { animation: wy8logged 7.5s ease-in-out infinite; }
@keyframes wy8logged { 0%, 44% { opacity: 0; transform: translateY(4px); } 51%, 93% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

/* ---------- reduced motion: resolved static state ---------- */
@media (prefers-reduced-motion: reduce) {
    .wy5-row, .wy7-line, .wy8-pop { opacity: 1; transform: none; }
    .wy5-st, .wy7-chk { transform: scale(1); }
    .wy7-stamp, .wy8-logged, .wy8-face-b { opacity: 1; transform: none; }
    .wy-on .wy5-row, .wy-on .wy5-st,
    .wy-on .wy7-line, .wy-on .wy7-chk, .wy-on .wy7-stamp,
    .wy-on .wy8-pop, .wy-on .wy8-approve, .wy-on .wy8-face-b, .wy-on .wy8-logged { animation: none; }
}