/* --- process.css : Parallax BPMN Background --- */

.bpmn-background-container {
    position: fixed; 
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -2;
    opacity: 0.15; /* Pidetään testikirkkaus */
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#bpmn-runtime-bg {
    width: 100%;
    max-width: 1200px; /* Täsmää HTML .container leveyteen! */
    height: auto; 
    will-change: transform;
}

/* --- Perusnoodit ja viivat --- */
.bpmn-node {
    fill: var(--core-navy, #0A192F);
    stroke: var(--graphite-grey, #3F4E66);
    stroke-width: 4;
    transition: stroke 0.4s ease, fill 0.4s ease, filter 0.4s ease;
}

.bpmn-path {
    fill: none;
    stroke: var(--graphite-grey, #3F4E66);
    stroke-width: 3;
    stroke-dasharray: 6, 6;
    transition: stroke 0.4s ease;
}

.bpmn-inactive {
    opacity: 0.2;
    stroke-dasharray: 4, 10;
}

.end-event { stroke-width: 6; }
.end-event-inner { stroke-width: 2; fill: none; stroke: var(--graphite-grey); }

/* --- Aktiiviset tilat (Hehku) --- */
.bpmn-node.is-active {
    stroke: var(--electric-mint, #00F5D4);
    fill: rgba(0, 245, 212, 0.05);
    filter: url(#glow);
}

.bpmn-path.is-active {
    stroke: var(--electric-mint, #00F5D4);
    stroke-dasharray: none;
    filter: url(#glow);
}

.bpmn-event.is-active, .end-event-inner.is-active {
    stroke: var(--electric-mint);
    fill: rgba(0, 245, 212, 0.1);
}

/* --- TOKEN MORPHING LOGIC (Dot <-> Logo) --- */
#bpmn-token {
    will-change: transform;
}

.t-dot {
    fill: var(--electric-mint, #00F5D4);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.t-line {
    stroke: var(--electric-mint, #00F5D4);
    stroke-width: 4;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    stroke-dasharray: 30;
}

/* TILA: DOT (Juoksee viivoilla / Start / End) */
.state-dot .s1, .state-dot .s2 {
    transform: translate(22px, 0px) scale(0.1); 
    opacity: 0;
}
.state-dot .t-line {
    stroke-dashoffset: 30;
    opacity: 0;
}
.state-dot .main-dot {
    transform: scale(1.3);
}

/* TILA: LOGO (Avautuu Taskin sisällä) */
.state-logo .s1 {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
}
.state-logo .s2 {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
}
.state-logo .t-line {
    stroke-dashoffset: 0;
    opacity: 1;
}
.state-logo .main-dot {
    transform: scale(1);
}