/* ==========================================================================
   Nikama logo - draw-on-scroll animation
   ========================================================================== */

/**
 * Animates each <path> / <line> in the .nikama-logo SVG using
 * stroke-dasharray / stroke-dashoffset so the logo appears to be drawn by
 * hand when it scrolls into view.
 *
 * Flow:
 *   1. Without .js: SVG renders normally (no-js fallback).
 *   2. With .js: paths are hidden via dashoffset until .is-drawing fires.
 *   3. JS sets --length per path (path.getTotalLength) and --delay for stagger.
 *   4. JS adds .is-drawing once when the logo enters the viewport (only once).
 *
 * Color: stroke uses currentColor; container sets color via --nikama-logo-clr
 * (defined in css/colors.css).
 */

/* Tweak these to change feel without touching JS. */
:root {
    --nikama-logo-draw-duration: 1.6s;
    --nikama-logo-draw-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --nikama-logo-stroke-width: 0.4px;
}

.nikama-logo {
    color: var(--nikama-logo-clr);
    display: inline-block;
    height: auto;
    max-width: 100%;
    z-index:2;
    margin-left:
}
.site-footer .nikama-logo{
    --nikama-logo-draw-duration: 0.8s;
    --nikama-logo-stroke-width: 1px;
    transform: rotate(90deg);
    transform-origin: center center;
}
.nikama-logo path,
.nikama-logo line {
    stroke: currentColor;
    stroke-width: var(--nikama-logo-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/**
 * No-JS fallback: SVG renders normally (no dashoffset = visible).
 * With JS: hide via dashoffset until .is-drawing is applied.
 *
 * --length is set per path by JS using path.getTotalLength().
 * The 1000 fallback covers the tiny window before JS runs, keeping
 * the logo invisible until JS has measured the actual lengths.
 */
.js .nikama-logo path,
.js .nikama-logo line {
    stroke-dasharray: var(--length, 1000);
    stroke-dashoffset: var(--length, 1000);
}

/**
 * Drawing animation triggered when .is-drawing is added by JS.
 * Each path animates with its own --delay (set by JS) for the stagger effect.
 * forwards keeps the final drawn state after the animation ends.
 */
.js .nikama-logo.is-drawing path,
.js .nikama-logo.is-drawing line {
    animation: nikama-draw var(--nikama-logo-draw-duration)
               var(--nikama-logo-draw-easing) var(--delay, 0s) forwards;
}

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

/* Respect user motion preferences: show the static logo immediately. */
@media (prefers-reduced-motion: reduce) {
    .js .nikama-logo path,
    .js .nikama-logo line {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        animation: none;
    }
}