/*!
 * Helderkruin Paper Planes — frontend stylesheet
 *
 * Two visible element classes:
 *   .hkpp-trail  — the flight path, stroked with the dash pattern. Its
 *                  stroke-dashoffset is driven by JS so only the portion
 *                  already "flown" is visible; the rest is hidden.
 *   .hkpp-plane  — the paper-plane <use> icon. JS sets a transform attribute
 *                  on the parent group to position + rotate it along the path.
 */

/* =========================================================================
   ROOT TOKENS — populated inline from PHP settings
   ========================================================================= */
:root {
    --hkpp-opacity:     0.55;
    --hkpp-plane-size:  42px;
    --hkpp-trail-width: 1.5;
    --hkpp-trail-dash:  3 6;
}

/* =========================================================================
   WALLPAPER CONTAINER — fixed, full viewport, behind everything
   NO opacity on the wrapper — the cover MUST be 100% opaque to properly
   hide the dashed trail underneath. Instead, opacity is applied per-
   element on the trail and plane only.
   ========================================================================= */
.hkpp-wrapper {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    contain: strict;
}

.hkpp-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* =========================================================================
   FLIGHT TRAIL & COVER
   The trail is a dashed <path> with a STATIC dasharray set as an SVG
   attribute in the markup — dots are fixed on the page forever.
   The cover is a plain <path> in the page background colour, drawn on
   top of the trail. JS sets its stroke-dasharray to hide the traveled
   portion and cover the untraveled portion, which is what reveals the
   dashed trail behind the plane.
   ========================================================================= */
.hkpp-trail {
    fill: none;
    opacity: var(--hkpp-opacity, 0.55);
    /* dasharray & stroke-width are set as attributes on the element */
}

.hkpp-cover {
    fill: none;
    /* MUST be 100% opaque to fully hide the dashed trail underneath it.
       Any transparency here and the trail bleeds through as a ghost and
       appears to be fully visible. */
    opacity: 1;
    will-change: stroke-dasharray;
}

.hkpp-plane {
    opacity: var(--hkpp-opacity, 0.55);
}

/* =========================================================================
   PLANE — the paper-dart icon
   The parent <g> has `transform` attr set by JS (translate + rotate). The
   CSS transition smooths between frames so scrubbing feels liquid. Keep
   the duration short so the plane can't lag visibly behind during fast
   scrolls.
   ========================================================================= */
.hkpp-plane-group {
    transition: transform 0.08s linear;
    will-change: transform;
}

/* Before JS runs, hide the planes off-screen so they don't flash in the
   top-left corner. JS sets the real transform on first frame. */
.hkpp-plane-group:not([data-hkpp-ready]) {
    transform: translate(-9999px, -9999px);
}

/* =========================================================================
   ACCESSIBILITY — reduced motion: JS positions every plane at progress=1
   so the trail is fully drawn. We just need to kill the plane transition
   so there's no animation.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .hkpp-plane-group {
        transition: none !important;
    }
}

/* =========================================================================
   PRINT — never print the wallpaper
   ========================================================================= */
@media print {
    .hkpp-wrapper { display: none !important; }
}