/* =========================================
PROGRESS MODULE
========================================= */

.progress-module {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; 
}

.fill-disc {
    position: absolute;
    width: 168px; 
    height: 168px;
    background: var(--gold-primary);
    border-radius: 50%;
    transform: scale(0); 
    transition: 1.5s ease all; 
    z-index: 0;
}

/* When the module is complete, scale it up */
.progress-module.complete .fill-disc {
    transform: scale(1);
}

/* =========================================
RING
========================================= */

.progress-ring{

    position:absolute;

    width:170px;
    height:170px;

    transform:rotate(-90deg);
}

.ring-track{

    fill:none;

    stroke:#1d1d1d;

    stroke-width:4;
}

.ring-bar{

    fill:none;

    stroke:var(--gold-primary);

    stroke-width:4;

    stroke-linecap:round;

    stroke-dasharray:440;
    stroke-dashoffset:440;

    transition:
        stroke-dashoffset .9s cubic-bezier(.4,0,.2,1);
}

/* =========================================
HOUSE
========================================= */

.house-wrapper{

    position:relative;

    width:140px;
    height:140px;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.house-wrapper.hidden{

    opacity:0;

    transform:scale(.92);
}

.draw{

    fill:none;

    stroke:var(--gold-primary);

    stroke-width:2.5;

    stroke-linecap:round;
    stroke-linejoin:round;

    stroke-dasharray:220;
    stroke-dashoffset:220;

    animation:drawLine 1.6s ease forwards;
}

.roof{
    animation-delay:.2s;
}

.body{
    animation-delay:.7s;
}

.door{
    animation-delay:1.1s;
}

/* Add/Update this in your House lines section */
.draw {
    /* ... existing styles ... */
    transition: stroke 0.8s ease; /* Allows the gold to turn black smoothly */
}

/* Add/Update this in your Ring Bar section */
.ring-bar {
    /* ... existing styles ... */
    transition: 
        stroke-dashoffset .9s cubic-bezier(.4,0,.2,1),
        stroke 0.8s ease; /* Allows the gold to brighten/change at the end */
}

@keyframes drawLine{

    to{
        stroke-dashoffset:0;
    }
}

.progress-ring.step-pulse{

    animation:
        ringPulse .9s ease;
}

@keyframes ringPulse{

    0%{
        transform:rotate(-90deg) scale(1);
    }

    50%{
        transform:rotate(-90deg) scale(1.03);
    }

    100%{
        transform:rotate(-90deg) scale(1);
    }
}

@keyframes fadeBlueprint{

    to{
        opacity:1;
    }
}

/* =========================================
STATUS
========================================= */

.status-wrapper{

    position:relative;

    height:40px;

    overflow:hidden;

    margin-bottom:32px;
}

.status-step{

    position:absolute;

    left:50%;

    transform:
        translateX(-50%)
        translateY(12px);

    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    opacity:0;

    width:max-content;

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.status-step.active{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);
}

.status-step.exit{

    opacity:0;

    transform:
        translateX(-50%)
        translateY(-12px);
}

.status-icon{

    width:18px;
    height:18px;

    color:rgba(198,166,103,.92);

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.status-icon svg{

    filter:
        drop-shadow(0 0 4px rgba(198,166,103,.15));
}

.status-text{

    color:#d3d3d3;

    font-size:14px;

    letter-spacing:.3px;
}

/* =========================================
FINAL STATE
========================================= */

.status-step.complete .status-text{

    color:var(--gold-primary);

    font-family:var(--title-font);

    letter-spacing:2px;

    font-size:16px;
}

.status-step.complete .status-icon{

    color:var(--gold-light);
}

/* =========================================
COMPLETION FLASH
========================================= */

.progress-module::after{

    content:'';

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(198,166,103,.22) 0%,
            transparent 72%
        );

    opacity:0;

    pointer-events:none;
}

.progress-module.complete::after{

    animation:completionFlash 1.4s ease forwards;
}

@keyframes completionFlash{

    0%{
        opacity:0;
        transform:scale(.7);
    }

    40%{
        opacity:1;
    }

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