/* New Workflow Wrapper */
.workflow-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Scroll Track */
.scroll-track {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; z-index: 100;
    -ms-overflow-style: none; scrollbar-width: none;
}
.scroll-track::-webkit-scrollbar { display: none; }

.scroll-section {
    height: 100vh;
}

/* Fixed Header */
.workflow-header-fixed {
    position: absolute;
    top: 2rem;
    left: 0;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    z-index: 10;
}

/* Fixed Timeline - Establish the 3D space */
.stepper-timeline-fixed {
    position: absolute;
    width: 80%;
    max-width: 750px;
    height: 380px;
    top: 55%; /* Pushed upward */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    perspective: 1200px;
}

/* Rectangular frame */
.stepper-steps {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* SVG for the timeline track and progress */
.timeline-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    overflow: visible;
}

.timeline-track, .timeline-progress {
    fill: none;
    stroke-width: 4;
}

.timeline-track {
    stroke: #ddd;
}

.timeline-progress {
    stroke: #BF0A30;
    stroke-dasharray: 1; 
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s ease-in-out, filter 0.8s ease-out, stroke 0.4s ease-out;
}

.timeline-progress.is-flashing {
    filter: drop-shadow(0 0 35px #BF0A30);
}

.timeline-progress.is-resetting {
    stroke: transparent;
}

/* The node's container */
.step {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 12;
    cursor: pointer;
    transform: translate(-50%, -50%); /* Center the node on its coordinates */
}

/* The glowing node */
.step-icon {
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    background-color: #BF0A30; 
    box-shadow: 0 0 15px #BF0A30;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    transform: translateZ(20px);
}

.step-label {
    position: absolute;
    color: #BF0A30; 
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    white-space: nowrap;
}

/* --- Positioning and 3D Depth Logic --- */

/* Base positioning is handled by JS */
.step.active .step-icon, .step:hover .step-icon { 
    transform: translateZ(50px) scale(1.5); 
    box-shadow: 0 0 25px #BF0A30;
}


.step.active .step-label { 
    color: #002868; 
}

.step[data-step="0"] .step-label { bottom: 160%; left: 50%; transform: translateX(-50%); }
.step[data-step="1"] .step-label { left: 160%; top: 50%; transform: translateY(-50%); }
.step[data-step="2"] .step-label { top: 160%; left: 50%; transform: translateX(-50%); }
.step[data-step="3"] .step-label { right: 160%; top: 50%; transform: translateY(-50%); }

/* Looking Glass Container */
.looking-glass-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(80px); 
    width: 80%; 
    height: 280px;
    z-index: 5;
    overflow: hidden;
    border: 2px solid #BF0A30;
    border-radius: 10px;
    background: rgba(0, 40, 104, 0.85);
    backdrop-filter: blur(5px);
    transition: box-shadow 0.8s ease-out;
}

.looking-glass-container.is-flashing {
    box-shadow: 0 0 40px #BF0A30;
}

.text-scroll-canvas {
    position: absolute; top: 0; left: 0; width: 100%;
}
.step-content {
    display: flex; flex-direction: column; justify-content: center; align-items: center; height: 280px; padding: 2rem; box-sizing: border-box; color: #ffffff; text-align: center;
}
.step-content h3 {
    font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; color: #ffffff; margin-bottom: 1.5rem; text-shadow: 1px 1px 3px rgba(191, 10, 48,.7); margin-top: 0;
}
.step-content p {
    font-family: 'Oswald', sans-serif; font-size: 1.2rem; font-weight: 300; line-height: 1.5; max-width: 80%;
}

.scroll-indicator {
    bottom: 12px; /* Pushed downward */
}

/* --- Intro Animation --- */

@keyframes draw-circuit {
    to { stroke-dashoffset: 0; }
}

@keyframes reveal-node {
    to { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1); /* Combine transforms */
    }
}

.workflow-wrapper.intro-animation .timeline-progress {
    animation: draw-circuit 2s ease-in-out forwards;
}

.workflow-wrapper.intro-animation .step {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5); /* Combine transforms */
    animation: reveal-node 0.4s ease-out forwards;
}

.workflow-wrapper.intro-animation .step[data-step="0"] { animation-delay: 0s; }
.workflow-wrapper.intro-animation .step[data-step="1"] { animation-delay: 0.5s; }
.workflow-wrapper.intro-animation .step[data-step="2"] { animation-delay: 1s; }
.workflow-wrapper.intro-animation .step[data-step="3"] { animation-delay: 1.5s; }