/* =========================================================
   PROCESS PAGES — Acentelik & Partnerlik
   An intentionally bolder pass: a drifting metal-filings
   canvas behind the page, a spine that fills with your
   scroll position, cards that tilt toward the cursor, and
   markers that breathe. This lives in its own file because
   it is louder than the rest of the site on purpose.
   ========================================================= */

.process-stage {
    position: relative;
    overflow: hidden;
}

#processCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.55;
}

.process {
    --fill: 0%;
}

    .process::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 6px;
        bottom: 6px;
        width: 2px;
        transform: translateX(-50%);
        background: var(--hairline-strong);
    }

    .process::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 6px;
        height: var(--fill);
        width: 2px;
        transform: translateX(-50%);
        background: linear-gradient( to bottom, var(--m-aluminum), var(--m-brass), var(--m-copper), var(--m-zinc), var(--m-lead) );
        box-shadow: 0 0 14px 1px rgba(201,161,90,0.55);
        transition: height .12s linear;
    }

@media (max-width:760px) {
    .process::before, .process::after {
        left: 25px;
    }
}

.process-marker {
    position: relative;
    animation: markerBreathe 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .25s);
    cursor: default;
}

    .process-marker::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        border: 1px solid var(--accent, var(--m-copper));
        opacity: 0;
        animation: markerRing 3.6s ease-out infinite;
        animation-delay: calc(var(--i, 0) * .25s);
    }

@keyframes markerBreathe {
    0%,100% {
        box-shadow: 0 0 0 6px var(--graphite-950), 0 0 0px 0 var(--accent, var(--m-copper));
    }

    50% {
        box-shadow: 0 0 0 6px var(--graphite-950), 0 0 18px 2px var(--accent, var(--m-copper));
    }
}

@keyframes markerRing {
    0% {
        transform: scale(0.85);
        opacity: 0.55;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.process-step:hover .process-marker {
    animation-play-state: paused;
    transform: rotate(8deg) scale(1.08);
    transition: transform .35s var(--ease);
}

.process-card {
    --rx: 0deg;
    --ry: 0deg;
    --mx: 50%;
    --my: 50%;
    transform-style: preserve-3d;
    perspective: 800px;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .35s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
    position: relative;
    isolation: isolate;
}

    .process-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0;
        background: radial-gradient(220px circle at var(--mx) var(--my), rgba(201,161,90,0.16), transparent 65%);
        transition: opacity .3s var(--ease);
    }

    .process-card:hover {
        box-shadow: 0 22px 40px -18px rgba(0,0,0,0.55);
        border-color: var(--accent, var(--m-copper));
    }

        .process-card:hover::before {
            opacity: 1;
        }

.process-step {
    opacity: 0;
    transition: opacity .7s var(--ease), transform .7s cubic-bezier(.2,1.4,.4,1);
}

    .process-step:nth-child(odd) {
        transform: translateX(-46px) rotate(-3deg);
    }

    .process-step:nth-child(even) {
        transform: translateX(46px) rotate(3deg);
    }

    .process-step.is-visible {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
        transition-delay: calc(var(--i, 0) * .09s);
    }

@media (max-width:760px) {
    .process-step:nth-child(odd), .process-step:nth-child(even) {
        transform: translateY(28px);
    }
}

.process-marker {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity .5s var(--ease) .15s, transform .5s cubic-bezier(.2,1.6,.4,1) .15s;
}

.process-step.is-visible .process-marker {
    opacity: 1;
    transform: scale(1);
    transition-delay: calc(var(--i, 0) * .09s + .15s);
}

@media (prefers-reduced-motion: reduce) {
    .process-marker, .process-marker::before, .process-step {
        animation: none !important;
    }

    .process-step {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .process-marker {
        opacity: 1;
        transform: none;
    }

    .process-card {
        transform: none !important;
    }
}

.process-gauge {
    position: absolute;
    top: -52px;
    right: var(--gutter);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper-500);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

    .process-gauge strong {
        font-family: var(--f-display);
        color: var(--m-brass);
        font-size: 15px;
    }

@media (max-width:760px) {
    .process-gauge {
        display: none;
    }
}