/* styles/flywheel.css */
:root {
    --bg-main: #061114;
    --card-bg: #0A1B20;
    --card-border: #143F36;
    --text-primary: #FFFFFF;
    --text-secondary: #8EAFA6;
    --dot-color: rgba(35, 95, 76, 0.4);

    /* Exact colors mapped from your Figma file */
    --fig-base-inactive: #034235;
    --fig-stroke-inactive: #179078;
    --fig-base-active: #EBB838;
    --fig-stroke-active: #0C7661;
    --fig-text-inactive: #179078;
    --fig-text-active: #085D4C;
    --fig-center-circle: #15282D;
}

/* Layout wrapper is now handled by Webflow */

/* Flywheel SVG Container */
.flywheel-wrapper {
    width: 250px;
    height: 250px;
}

#flywheel-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* SVG Elements */
.segment {
    cursor: pointer;
    transition: all 0.3s ease;
}

.segment:hover {
    filter: brightness(1.2);
}

.segment-bg {
    fill: var(--fig-base-inactive);
    stroke: var(--fig-stroke-inactive);
    stroke-width: 1.45px;
    transition: all 0.4s ease;
}

.segment.active .segment-bg {
    fill: var(--fig-base-active);
    stroke: var(--fig-stroke-active);
    stroke-width: 2px;
}

.segment.past .segment-bg {
    fill: #0C7661;
}

.segment.past .segment-text {
    fill: #C2EAE2;
}

/* A subtle drop shadow matching the glowing effect from Figma's 'Inner stroke' feel */
.segment.active {
    filter: brightness(1.05) drop-shadow(0 0 10px rgba(252, 169, 55, 0.4));
}

.segment-text {
    font-family: 'Azeret Mono', monospace;
    font-size: 26px;
    font-weight: 500;
    fill: var(--fig-text-inactive);
    user-select: none;
    transition: fill 0.4s ease;
    /* Optical correction since vectors differ from text slightly */
    transform: translateY(2px);
}

.segment.active .segment-text {
    fill: var(--fig-text-active);
}

.inner-circle {
    fill: var(--fig-center-circle);
    stroke: var(--fig-stroke-inactive);
    stroke-width: 1.45px;
}



/* Helper class for javascript toggle */
.is-hidden {
    display: none !important;
}

@keyframes greenBoxPulse {
    from {
        background-color: rgba(3, 66, 53, 0.5);
        box-shadow: 0 0 24px rgba(149, 217, 203, 0);
    }

    to {
        background-color: rgba(3, 66, 53, 0.9);
        box-shadow: 0 0 24px rgba(149, 217, 203, 0.2);
    }
}

/* Parent container height transition */
.green-box {
    transition: height 0.4s ease-out;
    overflow: hidden;
}

.green-box.pulse-active {
    animation: greenBoxPulse 0.6s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
}