/* --- GET STARTED BUTTON STYLING (FIXED SELECTORS) --- */
a.btn-get-started,
a.btn-get-started:visited {
    margin-top: 15px;
    padding: 10px 22px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff !important;           /* Forces text to remain white */
    background: #FF5200;                /* Matches your primary theme orange */
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none !important;    /* Completely strips the blue underline */
    z-index: 5;
    cursor: pointer;
    display: inline-block;               /* Crucial for padding & alignment inside flexbox */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 82, 0, 0.3);
}

/* Hover Interaction Strategy */
a.btn-get-started:hover {
    background: transparent;
    color: #FF5200 !important;
    border-color: #FF5200;
    box-shadow: 0 0 20px rgba(255, 82, 0, 0.6);
    transform: translateY(-2px);
    text-decoration: none !important;
}

/* Click / Active Press Effect */
a.btn-get-started:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(255, 82, 0, 0.4);
}



/* --- ANIMATION LAYOUT WRAPPER --- */
.animation-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1000px;
    height: 480px;
    position: relative;
    margin: 40px auto;
}

.pipeline-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.pipeline-section h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #4b5563;
    margin-bottom: 20px;
}

/* --- FILE CARD DESIGN STYLE --- */
.file-card {
    background: #14110f;
    border: 1px solid rgba(255, 82, 0, 0.3);
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.6);
}

.file-icon {
    font-size: 1.3rem;
}

.file-name {
    font-size: 0.85rem;
    font-weight: 500;
}

/* --- LEFT SIDE: DWG INPUT ANIMATION --- */
.dwg-input {
    animation: enterMachine 8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes enterMachine {
    0% { transform: translateX(-100px); opacity: 0; }
    10% { transform: translateX(0); opacity: 1; }
    25% { transform: translateX(250px); opacity: 1; }
    30%, 100% { transform: translateX(250px); opacity: 0; }
}

/* --- CENTER: QUDRAW MACHINE STYLING --- */
.machine-core {
    position: relative;
    width: 260px;
    height: 200px;
    flex-shrink: 0;
}

.machine-box {
    width: 100%;
    height: 100%;
    background: #111;
    border: 2px solid #FF5200;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(255, 82, 0, 0.2);
}

.logo-text {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.logo-text span {
    color: #FF5200;
}

.machine-status {
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: #FF5200;
    font-weight: 700;
    animation: statusPulse 1.5s infinite alternate;
}

@keyframes statusPulse {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Laser Scan Overlay */
.machine-laser {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #FF5200;
    box-shadow: 0 0 15px #FF5200, 0 0 30px #FF5200;
    left: 0;
    top: 0;
    animation: laserScan 8s infinite linear;
    opacity: 0;
}

@keyframes laserScan {
    0%, 25% { top: 0; opacity: 0; }
    26%, 44% { opacity: 1; }
    26% { top: 0%; }
    35% { top: 100%; }
    44% { top: 0%; opacity: 0; }
    45%, 100% { opacity: 0; }
}

/* Background Machine Glow */
.machine-glow {
    position: absolute;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 82, 0, 0.15) 0%, transparent 70%);
    animation: ambientGlow 8s infinite ease-in-out;
}

@keyframes ambientGlow {
    0%, 25%, 46%, 100% { transform: scale(1); opacity: 0.5; }
    35% { transform: scale(1.2); opacity: 1; }
}

/* Conveyor Tracks Linkages */
.track {
    position: absolute;
    height: 4px;
    background: repeating-linear-gradient(90deg, #222, #222 8px, #333 8px, #333 16px);
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    width: 180px;
}
.track-left { right: 100%; }
.track-right { left: 100%; }

/* --- RIGHT SIDE: ONE-BY-ONE UPWARD STACKING --- */
.output-stack {
    /*display: flex;*/
    flex-direction: column-reverse;
    align-items: center;
    position: relative;
    height: 250px;
    justify-content: center;
}

.output-stack .file-card {
    position: relative;
    animation: exitOneByOne 8s infinite cubic-bezier(0.19, 1, 0.22, 1);
    margin-bottom: -32px; 
}

/* Wide delay gaps so they emerge strictly one after the other */
.out-excel { z-index: 1; animation-delay: 0.0s; }
.out-bill  { z-index: 2; animation-delay: 0.6s; }
.out-pdf   { z-index: 3; animation-delay: 1.2s; }
.out-dwg   { z-index: 4; animation-delay: 1.8s; }

@keyframes exitOneByOne {
    0%, 46% { 
        transform: translateX(var(--slide-in-x, -260px)) translateY(var(--slide-in-y, 0px)) scale(0.7); 
        opacity: 0; 
    }
    56% { 
        transform: translateX(0) translateY(var(--slide-in-y, 0px)) scale(1); 
        opacity: 1; 
    }
    66%, 92% { 
        transform: translateX(0) translateY(var(--stack-y, 0px)) scale(1);
        opacity: 1; 
    }
    100% { 
        transform: translateX(var(--slide-out-x, 150px)) translateY(var(--stack-y, 0px)); 
        opacity: 0; 
    }
}

/* Desktop vertical alignment layout steps */
.out-excel { --stack-y: 0px; }
.out-bill  { --stack-y: -20px; }
.out-pdf   { --stack-y: -40px; }
.out-dwg   { --stack-y: -90px;}


/* --- RESPONSIVE MOBILE FIXES --- */
@media (max-width: 768px) {
    .animation-wrapper {
        flex-direction: column;
        height: auto;
        gap: 60px;
        padding: 20px 0;
        margin: 20px auto;
    }

    .track {
        display: none;
    }

    .output-stack {
        height: 280px;
        margin-top: 20px;
    }

    /* Redefining variables for clean mobile vertical stacking flow layout templates */
    .out-excel { --slide-in-x: 0px; --slide-in-y: -180px; --stack-y: 0px;    --slide-out-x: 0px; }
    .out-bill  { --slide-in-x: 0px; --slide-in-y: -180px; --stack-y: -35px;  --slide-out-x: 0px; }
    .out-pdf   { --slide-in-x: 0px; --slide-in-y: -180px; --stack-y: -70px;  --slide-out-x: 0px; }
    .out-dwg   { --slide-in-x: 0px; --slide-in-y: -180px; --stack-y: -105px; --slide-out-x: 0px; }
    
    @keyframes exitOneByOne {
        0%, 46% { 
            transform: translateY(var(--slide-in-y)) scale(0.7); 
            opacity: 0; 
        }
        56% { 
            transform: translateY(40px) scale(1); 
            opacity: 1; 
        }
        66%, 92% { 
            transform: translateY(var(--stack-y)) scale(1);
            opacity: 1; 
        }
        100% { 
            transform: translateY(calc(var(--stack-y) + 80px)); 
            opacity: 0; 
        }
    }
}