/*!
 * Helderkruin Doodle Journal — frontend stylesheet
 *
 * Two kinds of elements both driven by a --p custom property (0..1):
 *   1. Words (HTML <div>)       — revealed left-to-right via clip-path inset
 *   2. Doodles (SVG <path>)     — drawn via stroke-dashoffset animation
 */

/* =========================================================================
   ROOT TOKENS — populated by inline style from PHP settings
   ========================================================================= */
:root {
    --hkdj-opacity:  0.32;
    --hkdj-color-1:  #15204D;
    --hkdj-color-2:  #7096C8;
    --hkdj-color-3:  #E71615;
}

/* =========================================================================
   WALLPAPER CONTAINER — fixed, full viewport, behind everything
   ========================================================================= */
.hkdj-wallpaper {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    opacity: var(--hkdj-opacity);
    user-select: none;
    -webkit-user-select: none;
    contain: strict;
}

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

/* =========================================================================
   ELEMENT BASE — per-element --p defaults to 0 (not yet revealed)
   ========================================================================= */
.hkdj-element {
    --p: 0;
}

/* =========================================================================
   DOODLES — SVG paths animated by stroke-dashoffset
   JS measures each path's length via getTotalLength() and writes --len.
   Fallback --len of 1500 is plenty for any doodle in our library.
   ========================================================================= */
.hkdj-doodle {
    fill: none;
    stroke: var(--c, var(--hkdj-color-1));
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--len, 1500);
    stroke-dashoffset: calc(var(--len, 1500) * (1 - var(--p, 0)));
    transition: stroke-dashoffset 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: stroke-dashoffset;
}

/* =========================================================================
   WORDS — HTML divs revealed left-to-right via clip-path inset
   The inset values: top, right, bottom, left. Negative = outset (no clip).
   We use -15% top/bottom so ascenders/descenders aren't clipped.
   Right value slides from 100% (hidden) to 0% (fully visible) with --p.
   ========================================================================= */
.hkdj-word {
    position: absolute;
    line-height: 1;
    white-space: nowrap;
    transform-origin: 50% 50%;
    clip-path: inset(-15% calc((1 - var(--p, 0)) * 100%) -15% -2%);
    -webkit-clip-path: inset(-15% calc((1 - var(--p, 0)) * 100%) -15% -2%);
    transition: clip-path 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-clip-path 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: clip-path;
    /* Prevent words falling outside the viewport from causing body scroll */
    max-width: 60vw;
}

/* =========================================================================
   MOBILE — tighter font scaling (words can overflow on narrow viewports)
   ========================================================================= */
@media (max-width: 768px) {
    .hkdj-wallpaper {
        opacity: calc(var(--hkdj-opacity) * 0.9);
    }
    .hkdj-word {
        font-size: 0.75em;  /* actual font-size is inline; em multiplier unfortunately not ideal */
    }
}

/* On very small viewports, prevent any extremely wide phrase from pushing
   layout. The parent already has overflow:hidden, but also clamp text. */
@media (max-width: 480px) {
    .hkdj-word {
        max-width: 85vw;
    }
}

/* =========================================================================
   ACCESSIBILITY — reduced motion shows the finished composition statically
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .hkdj-element {
        --p: 1 !important;
    }
    .hkdj-doodle {
        transition: none !important;
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }
    .hkdj-word {
        transition: none !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
}

/* =========================================================================
   PRINT — never show the wallpaper on printed pages
   ========================================================================= */
@media print {
    .hkdj-wallpaper { display: none !important; }
}