/* ============================================================
   HOMEPAGE PROCESS - 3D STAGE  (adp_home_process_stage(),
   includes/home-process.php; the only variant since 2026-10-13)

   D1 (Markus, 2026-10-10): the 3D stage on the dark navy band. Three tilted cards on a perspective floor carry the
   information of the network cards in a calmer, reduced form, and an
   agent stands in front of each: Scout (01), Mira (02), Parker (03).

   Structure: .pstage__slot is the grid item and the positioning box.
   The 3D tilt sits on .pstage__card only, so the actors (siblings in
   the slot) stay upright on the floor. .reveal is on the slot, which is
   why the perspective lives on the slot and not on the grid.

   Colours: scheme tokens only (styles3.css section 1 + 30). The band is
   navy, so only on-dark tokens are used; inner tiles stay low-contrast
   (white at 4-9 %) and only the animated state picks up the accent.
   Number tiles use the button fill (--btn-*).
   ============================================================ */



/* ---------- section band: hero navy, as .process--network ---------- */
.process--stage {
    --color-accent: var(--color-accent-on-dark);
    --color-accent-rgb: var(--color-glow-rgb);
    overflow: hidden;
    background: var(--gradient-navy);
}

.process--stage .section__title { color: #fff; }
.process--stage .section__title .text-accent { color: var(--color-accent-bright); }


.process-stage {
    --ps-ink:     #fff;
    --ps-text:    rgba(255, 255, 255, 0.86);
    --ps-muted:   rgba(255, 255, 255, 0.62);
    --ps-accent:  var(--color-accent-bright);
    --ps-ice:     var(--color-accent-soft);
    --ps-card:    color-mix(in srgb, var(--scheme-navy), #fff 7%);
    --ps-card-2:  color-mix(in srgb, var(--scheme-navy), #fff 3%);
    --ps-tile:    color-mix(in srgb, var(--scheme-navy), #fff 10%);   /* opaque: rails run behind */
    --ps-tile-bd: rgba(255, 255, 255, 0.08);
    --ps-ico-bg:  rgba(255, 255, 255, 0.06);
    --ps-ico:     rgba(255, 255, 255, 0.7);
    --ps-green:   #22c55e;
    --ps-tilt:    13deg;
    --ps-gap:     40px;
    position: relative;
    padding-bottom: 56px;           /* room for the floor + actors below the cards */
    font-family: var(--font-primary);
}

/* ---------- the floor: glow + perspective grid ---------- */
.process-stage::before {
    content: '';
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -40px;
    height: 300px;
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-accent-soft) 11%, transparent) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg,  color-mix(in srgb, var(--color-accent-soft) 11%, transparent) 0 1px, transparent 1px 64px),
        radial-gradient(ellipse 60% 70% at 50% 100%, rgba(var(--color-glow-rgb), 0.22), transparent 70%);
    transform: perspective(520px) rotateX(64deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 100%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 50% 70% at 50% 100%, #000 20%, transparent 75%);
    pointer-events: none;
}

.pstage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--ps-gap);
    align-items: stretch;
    max-width: 1180px;
    margin: 0 auto;
}

/* ---------- slot + tilted card ---------- */
.pstage__slot {
    position: relative;
    display: flex;
    perspective: 1500px;
}

/* one vanishing point for all three: the middle of the stage */
.pstage__slot--scan    { perspective-origin: 160% 35%; }
.pstage__slot--connect { perspective-origin: -60% 35%; }

.pstage__card {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 440px;
    padding: 26px 24px 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--ps-card) 0%, var(--ps-card-2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 34px 60px -30px rgba(0, 0, 0, 0.7),
        0 10px 22px -14px rgba(0, 0, 0, 0.45);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s;
}

/* concave triptych: outer edges forward, inner edges back */
.pstage__slot--scan .pstage__card    { transform: rotateY(var(--ps-tilt));  transform-origin: 100% 50%; }
.pstage__slot--connect .pstage__card { transform: rotateY(calc(var(--ps-tilt) * -1)); transform-origin: 0 50%; }
.pstage__slot--auto .pstage__card    { transform: translateZ(-10px); }

.pstage__slot:hover .pstage__card {
    transform: none;
    border-color: rgba(255, 255, 255, 0.2);
}

/* ---------- card head (copy of the network card head) ---------- */
.pstage__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ps-ice);
}

.pstage__eyebrow b {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--btn-to), var(--btn-from));
    color: var(--btn-fg);
    font-size: 10.5px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
}

.pstage__head h3 {
    margin: 12px 0 6px;
    font-size: 21px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    color: var(--ps-ink);
}

.pstage__head p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ps-muted);
}

.pstage__vis { position: relative; min-width: 0; }

.pstage ul,
.pstage ol { margin: 0; padding: 0; list-style: none; }

/* shared row tile: icon + one or two lines of text */
.pstage__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--ps-ico-bg);
    color: var(--ps-ico);
}

.pstage__ico .pnet-ico { width: 15px; height: 15px; }

.pstage__txt {
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    color: var(--ps-text);
}

.pstage__txt small {
    display: block;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    color: var(--ps-muted);
}

/* ---------- 01 scan: 4 engines + the claim, 4 channel tiles ---------- */
.pstage__slot--scan .pstage__card { padding-bottom: 112px; }   /* Scout's spot */

.pstage__engines {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pstage__engine {
    padding: 4px 11px;
    border-radius: var(--radius-full);
    background: var(--ps-tile);
    border: 1px solid var(--ps-tile-bd);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--ps-text);
    animation: pstage-ping 5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.5s);
}

.pstage__engine--more {
    background: color-mix(in srgb, var(--color-accent-bright) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-bright) 32%, transparent);
    color: var(--ps-accent);
}

/* Scout "finds" each engine in turn */
@keyframes pstage-ping {
    0%, 16%, 100% { box-shadow: 0 0 0 0 transparent; }
    6%            { box-shadow: 0 0 0 3px rgba(var(--color-glow-rgb), 0.35); }
}

.pstage__vis .pstage__channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 14px;
}

.pstage__channels li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    border-radius: 10px;
    background: var(--ps-tile);
    border: 1px solid var(--ps-tile-bd);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    color: var(--ps-text);
}

.pstage__channels .pstage__ico {
    width: 26px;
    height: 26px;
    animation: pstage-chan 8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 2s);
}

/* one channel tile at a time gets a quiet accent: data coming in */
@keyframes pstage-chan {
    0%, 22%, 100% { color: var(--ps-ico); background: var(--ps-ico-bg); }
    8%, 14%       { color: var(--ps-accent); background: color-mix(in srgb, var(--color-accent-bright) 14%, transparent); }
}

/* ---------- 02 automation: the 4-step pipeline lights up in turn ---------- */
.pstage__slot--auto .pstage__vis { max-width: calc(100% - 92px); }    /* Mira + hologram */

.pstage__auto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ps-text);
}

/* little "on" switch */
.pstage__auto i {
    position: relative;
    width: 26px;
    height: 15px;
    border-radius: var(--radius-full);
    background: var(--ps-green);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.pstage__auto i::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
}

@property --on { syntax: '<number>'; inherits: true; initial-value: 0; }

.pstage__steps {
    position: relative;
    display: grid;
    gap: 8px;
}

/* rail behind the icons + its fill (x = step padding + half the icon) */
.pstage__steps::before,
.pstage__steps::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 22px;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.1);
}

.pstage__steps::before { bottom: 22px; }

.pstage__steps::after {
    height: 0;
    max-height: calc(100% - 44px);
    background: linear-gradient(to bottom, var(--ps-accent), var(--btn-to));
    animation: pstage-rail 8s linear infinite;
}

@keyframes pstage-rail {
    0%, 8%    { height: 0; opacity: 1; }
    28%       { height: 33.33%; }
    48%       { height: 66.67%; }
    68%, 92%  { height: 100%; opacity: 1; }
    96%       { height: 100%; opacity: 0; }
    97%, 100% { height: 0; opacity: 0; }
}

.pstage__step {
    --on: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 10px 6px 6px;
    border-radius: 12px;
    background: var(--ps-tile);
    border: 1px solid var(--ps-tile-bd);
    animation: pstage-step-1 8s linear infinite;
}

.pstage__step--2 { animation-name: pstage-step-2; }
.pstage__step--3 { animation-name: pstage-step-3; }
.pstage__step--4 { animation-name: pstage-step-4; }

/* lit outline, faded in by --on (calmer than the network card's full glow) */
.pstage__step::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--color-accent-bright) 38%, transparent);
    opacity: var(--on);
    pointer-events: none;
}

.pstage__step .pstage__ico {
    background: color-mix(in srgb, var(--color-accent-bright) calc(var(--on) * 16%), rgba(255, 255, 255, 0.06));
    color: color-mix(in srgb, var(--ps-accent) calc(var(--on) * 100%), var(--ps-ico));
}

.pstage__step .pstage__txt { flex: 1; }

.pstage__step .pstage__txt small {
    margin-bottom: 1px;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.pstage__check {
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ps-green);
    color: #fff;
    opacity: var(--on);
    transform: scale(calc(0.5 + var(--on) * 0.5));
}

.pstage__check .pnet-ico { width: 11px; height: 11px; stroke-width: 3; }

@keyframes pstage-step-1 { 0%, 4%  { --on: 0; } 8%, 92%  { --on: 1; } 96%, 100% { --on: 0; } }
@keyframes pstage-step-2 { 0%, 24% { --on: 0; } 28%, 92% { --on: 1; } 96%, 100% { --on: 0; } }
@keyframes pstage-step-3 { 0%, 44% { --on: 0; } 48%, 92% { --on: 1; } 96%, 100% { --on: 0; } }
@keyframes pstage-step-4 { 0%, 64% { --on: 0; } 68%, 92% { --on: 1; } 96%, 100% { --on: 0; } }

/* ---------- 03 connectors: wires run out toward Parker's hand ---------- */
.pstage__slot--connect .pstage__vis { max-width: calc(100% - 104px); }

.pstage__links { display: grid; gap: 6px; }

.pstage__links li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 5px 6px;
    border-radius: 12px;
    background: var(--ps-tile);
    border: 1px solid var(--ps-tile-bd);
}

/* dashed wire from each tile to the right edge of the column, a dot travels it */
.pstage__wire {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 18px;
    height: 0;
    border-top: 1.5px dashed color-mix(in srgb, var(--color-accent-soft) 32%, transparent);
}

.pstage__wire::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ps-ice);
    box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-soft) 70%, transparent);
    animation: pstage-wire 2.4s linear infinite;
    animation-delay: calc(var(--i) * -0.6s);
}

@keyframes pstage-wire {
    0%   { transform: translateX(0);    opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(14px); opacity: 0; }
}

/* ---------- actors: stand on the floor in front of the cards ----------
   One scale for all three: Mira and Parker are ~260 px tall on desktop,
   Scout's head-to-paw height is ~36 % of that (a dog next to people;
   made ~20 % smaller on 2026-10-12, Markus: he looked too big). */
.pstage__actor {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.pstage__actor img {
    display: block;
    width: 100%;
    height: auto;
}

/* The cards are pictures, not text to select: no I-beam over the copy (Markus, 2026-10-12). */
.pstage__card { cursor: default; }

/* soft contact shadow on the floor */
.pstage__actor::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 14%;
    right: 14%;
    bottom: -4px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent);
}

/* Scout: front-right of card 1, nose down, sniffing toward the left */
.pstage__actor--scout {
    right: 2%;
    bottom: -34px;
    width: 136px;
}

.pstage__actor--scout::after { left: 8%; right: 4%; }

.pstage__dog {
    position: relative;
    display: block;
    transform-origin: 78% 100%;            /* pivots on the hind paws */
    animation: pstage-sniff 3.6s ease-in-out infinite;
}

/* nose dips twice, then a pause: a sniff, not a bounce */
@keyframes pstage-sniff {
    0%, 52%, 100% { transform: rotate(0); }
    12%           { transform: rotate(-1.6deg) translateY(1px); }
    22%           { transform: rotate(-0.3deg); }
    32%           { transform: rotate(-1.6deg) translateY(1px); }
    44%           { transform: rotate(0); }
}

/* scent particles on the floor, drawn in toward the nose */
.pstage__trail {
    position: absolute;
    left: -46%;
    bottom: 4%;
    width: 50%;
    height: 26%;
    --ps-scent-x: 78px;
}

.pstage__trail i {
    position: absolute;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ps-ice);
    box-shadow: 0 0 8px 1px color-mix(in srgb, var(--color-accent-soft) 55%, transparent);
    opacity: 0;
    animation: pstage-scent 2.8s ease-in infinite;
}

.pstage__trail i:nth-child(1) { top: 70%; animation-delay: 0s; }
.pstage__trail i:nth-child(2) { top: 40%; animation-delay: -0.5s; width: 4px; height: 4px; }
.pstage__trail i:nth-child(3) { top: 85%; animation-delay: -1s; }
.pstage__trail i:nth-child(4) { top: 55%; animation-delay: -1.5s; width: 3px; height: 3px; }
.pstage__trail i:nth-child(5) { top: 20%; animation-delay: -2s; width: 4px; height: 4px; }
.pstage__trail i:nth-child(6) { top: 62%; animation-delay: -2.4s; width: 3px; height: 3px; }

@keyframes pstage-scent {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    20%  { opacity: 0.9; }
    100% { transform: translate(var(--ps-scent-x), -14px) scale(1); opacity: 0; }
}

/* Mira: bottom-right of card 2, her hologram toward the steps */
.pstage__actor--mira {
    right: -7%;
    bottom: -32px;
    width: 136px;
}

.pstage__actor--mira::after { left: 34%; right: 6%; }

/* Parker: bottom-right of card 3, pointing at the connectors */
.pstage__actor--parker {
    right: -12%;
    bottom: -32px;
    width: 168px;
}

.pstage__actor--parker::after { left: 20%; right: 22%; }

/* ---------- smaller desktops: same stage, a touch tighter ---------- */
@media (max-width: 1279px) {
    .process-stage { --ps-gap: 30px; --ps-tilt: 11deg; }
    .pstage__card { padding: 24px 20px 22px; }
    .pstage__slot--scan .pstage__card { padding-bottom: 104px; }
    .pstage__head h3 { font-size: 20px; }
    .pstage__actor--scout  { width: 126px; }
    .pstage__actor--mira   { width: 126px; }
    .pstage__actor--parker { right: -10%; width: 156px; }
    .pstage__slot--auto .pstage__vis    { max-width: calc(100% - 82px); }
    .pstage__slot--connect .pstage__vis { max-width: calc(100% - 92px); }
}

/* ---------- tablet: one card per row, no tilt, actor on the right ---------- */
@media (max-width: 1099px) {
    .pstage {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 56px;
        max-width: 720px;
    }

    .pstage__slot { perspective: none; }

    .pstage__slot .pstage__card,
    .pstage__slot:hover .pstage__card { transform: none; }

    .pstage__card,
    .pstage__slot--scan .pstage__card {
        min-height: 0;
        padding: 26px 28px;
        padding-right: 30%;                 /* the actor's column */
    }

    .pstage__slot--auto .pstage__vis,
    .pstage__slot--connect .pstage__vis { max-width: none; }

    .pstage__actor--scout  { right: 3%; bottom: -26px; width: 120px; }
    .pstage__actor--mira   { right: 7%; bottom: -28px; width: 124px; }
    .pstage__actor--parker { right: 2%; bottom: -28px; width: 150px; }

    .pstage__slot--auto .pstage__card { padding-right: calc(7% + 124px + 8px); }
}

/* ---------- phones: stacked, the agents stand on / peek over the card top ---------- */
@media (max-width: 719px) {
    .process-stage { padding-bottom: 0; }
    .process-stage::before { display: none; }

    .pstage { row-gap: 22px; max-width: 440px; }

    /* room above each card for its agent (Scout stands on the edge, the others peek) */
    .pstage__slot { padding-top: 82px; }

    .pstage__card,
    .pstage__slot--scan .pstage__card,
    .pstage__slot--auto .pstage__card {
        padding: 22px 18px 20px;
    }

    .pstage__actor::after { display: none; }

    .pstage__actor--mira,
    .pstage__actor--parker {
        z-index: 0;                         /* behind the card, looking over its edge */
        top: 0;
        bottom: auto;
    }
    .pstage__actor--mira   { right: 18px; width: 68px; }
    .pstage__actor--parker { right: 12px; width: 84px; }

    .pstage__actor--scout {
        bottom: auto;
        right: 16px;
        width: 84px;
        /* paws on the card's top edge: slot padding minus the image height */
        top: calc(82px - 84px * 293 / 360 + 4px);
    }

    .pstage__trail { left: -60%; width: 64%; bottom: 2%; --ps-scent-x: 64px; }

    .pstage__head h3 { font-size: 20px; }
    .pstage__wire { display: none; }
}

/* ---------- reduced motion: a still, finished picture ---------- */
@media (prefers-reduced-motion: reduce) {
    .pstage__dog,
    .pstage__engine,
    .pstage__channels .pstage__ico,
    .pstage__step,
    .pstage__steps::after { animation: none; }

    .pstage__trail,
    .pstage__wire::after { display: none; }

    .pstage__step { --on: 1; }
    .pstage__steps::after { height: 100%; }
    .pstage__card { transition: none; }
}