/* mod_folio_effects 1.0.1 */

/* Onzichtbare Joomla-modulemarkering */
.folio-effects-marker {
    display: none !important;
}

/* =========================================================
   RODE SCROLLLIJN
   ========================================================= */

.folio-storyline {
    position: absolute;
    z-index: 12;
    top: 0;
    left: 0;
    width: 100%;
    overflow: visible;
    pointer-events: none;
}

.folio-storyline__base,
.folio-storyline__progress {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.folio-storyline__base {
    stroke: color-mix(in srgb,
            var(--folio-effect-color) 18%,
            transparent);
    stroke-width: 1;
}

.folio-storyline__progress {
    stroke: var(--folio-effect-color);
    stroke-width: var(--folio-effect-line-width);
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px color-mix(in srgb,
                var(--folio-effect-color) 28%,
                transparent));
}

/* Knooppunten op de rode lijn */
.folio-storyline__node circle {
    fill: var(--folio-effect-surface, #f5f3ec);
    stroke: color-mix(in srgb,
            var(--folio-effect-color) 38%,
            transparent);
    stroke-width: 1;
    transition:
        fill .25s ease,
        stroke .25s ease,
        transform .25s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.folio-storyline__node text {
    fill: var(--folio-effect-color);
    font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-anchor: middle;
    dominant-baseline: central;
}

.folio-storyline__node.is-active circle {
    fill: var(--folio-effect-color);
    stroke: var(--folio-effect-color);
    transform: scale(1.12);
}

.folio-storyline__node.is-active text {
    fill: #fff;
}

/* =========================================================
   INTERACTIEVE SPOTLIGHT
   ========================================================= */

.folio-spotlight-target {
    --folio-spotlight-x: 50%;
    --folio-spotlight-y: 50%;

    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.folio-spotlight-layer {
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;

    background:
        radial-gradient(circle 64px at var(--folio-spotlight-x) var(--folio-spotlight-y),
            rgb(255 255 255 / 42%),
            transparent 100%),
        radial-gradient(circle 280px at var(--folio-spotlight-x) var(--folio-spotlight-y),
            color-mix(in srgb,
                var(--folio-effect-color) 78%,
                transparent),
            transparent 72%);

    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    will-change: opacity, background-position;
}

.folio-spotlight-target.is-spotlight-active>.folio-spotlight-layer {
    opacity: clamp(.42,
            calc(var(--folio-spotlight-strength) + .24),
            .84);
}

/* Spotlight boven de headerafbeelding */
.header-design>.folio-spotlight-layer {
    z-index: 0;
}

/* Headertekst altijd boven de spotlight */
.header-design>.header-design__container {
    position: relative;
    z-index: 1;
}

/* Spotlight boven de overige afbeeldingen */
.project-showcase__media>.folio-spotlight-layer,
.about-design__frame>.folio-spotlight-layer,
.current-design__media>.folio-spotlight-layer {
    z-index: 3;
}

/* =========================================================
   TABLET EN MOBIEL
   ========================================================= */

@media (max-width: 900px) {
    .folio-storyline {
        opacity: .72;
    }

    .folio-storyline__node circle {
        r: 9px;
    }
}

/*
 * Op apparaten zonder muis wordt de spotlight verborgen.
 * De rode scrolllijn blijft wel zichtbaar.
 */
@media (hover: none),
(pointer: coarse) {
    .folio-spotlight-layer {
        display: none;
    }
}

/* =========================================================
   TOEGANKELIJKHEID
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .folio-storyline__progress {
        stroke-dashoffset: 0 !important;
    }

    /*
     * De spotlight blijft zichtbaar, maar krijgt geen
     * vloeiende overgang.
     */
    .folio-spotlight-layer {
        transition: none;
    }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {

    .folio-storyline,
    .folio-spotlight-layer {
        display: none !important;
    }
}