/**
 * Logo Draw Animation Styles
 * SVG stroke animation with letter reveal
 */

/* Inner pages - logo already complete (no animation) */
body:not(.home) #logo-draw .mark-primary {
    fill: #6D7270 !important;
    stroke: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}

body:not(.home) #logo-draw .mark-secondary {
    fill: #A7A9A8 !important;
    stroke: none !important;
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
}

body:not(.home) #logo-type .letter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Homepage - animated logo */
#logo-draw path {
    fill: transparent;
    stroke-width: 2;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: draw 1.4s ease-out forwards;
    opacity: 0.9;
}

#logo-draw .mark-primary {
    stroke: #6D7270;
}

#logo-draw .mark-secondary {
    stroke: #A7A9A8;
}

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

/* Filled state - after stroke animation */
#logo-draw path.filled {
    stroke: none;
    opacity: 1;
    transition:
        fill 1.2s ease-in-out,
        opacity 1.2s ease-in-out;
    transition-delay: -0.4s;
}

#logo-draw .mark-primary.filled {
    fill: #6D7270;
}

#logo-draw .mark-secondary.filled {
    fill: #A7A9A8;
}

/* Letters - start hidden */
#logo-type .letter {
    fill: #6D7270;
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity 0.4s ease-out,
        transform 0.4s ease-out;
}

/* Letters - visible state */
#logo-type .letter.visible {
    opacity: 1;
    transform: scale(1);
}