/* =========================================
   Shared SVG Animation Keyframes
   drawContour: used by logo stroke animation (style.css)
                and handwrite engine (.hw-char)
   ========================================= */
@keyframes drawContour {
    to {
        stroke-dashoffset: 0;
    }
}

/* =========================================
   Dynamic Handwrite Engine Classes
   ========================================= */
.handwrite-svg {
    overflow: visible;
}

.hw-char {
    fill: transparent;
    stroke: var(--hw-color, var(--primary));
    stroke-width: 0.8px;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    --delay: calc(var(--char-idx) * var(--hw-speed, 0.08s));
    animation:
        drawContour 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards,
        hwFillColor 0.6s ease-out forwards;
    animation-delay: var(--delay), calc(var(--delay) + 0.5s);
}

/* Waiting state: invisible, no animation until activated by JS */
.hw-waiting {
    fill: transparent;
    stroke: transparent;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

@keyframes hwFillColor {
    to {
        fill: var(--hw-color, var(--primary));
        stroke-width: 0;
    }
}

/* =========================================
   Preloader — barre de progression discrète
   ========================================= */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-main), #d4b8d8);
    z-index: 9999;
    border-radius: 0 2px 2px 0;
    transition: none;
    pointer-events: none;
}

#preloader.loading {
    width: 72%;
    transition: width 2s cubic-bezier(0.1, 0.4, 0.4, 1);
}

#preloader.complete {
    width: 100%;
    transition: width 0.12s ease, opacity 0.3s ease 0.12s;
    opacity: 0;
}

/* Subtle Floating Animation */
@keyframes float-subtle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.animate-float {
    animation: float-subtle 4s ease-in-out infinite;
}

.animate-float.delay-1 {
    animation-delay: 0s;
}

.animate-float.delay-2 {
    animation-delay: 1.5s;
}

.animate-float.delay-3 {
    animation-delay: 0.7s;
}