:root {
    --solriz-blauw: #1F3668;
    --solriz-cyaan: #5BB9E1;
    --solriz-licht-cyaan: #99D3D9;
    --wit: #FFFFFF;
    
    --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    
    --animate: 0;
    --side: 1;
    --windowWidthScalar: 1;
    --windowHeightScalar: 1;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    height: 100dvh; /* dvh follows the actual viewport (mobile URL-bar collapse) */
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

body {
    position: fixed;
    inset: 0;
}

body {
    font-family: var(--font-body);
    /* Using background.jpg as requested */
    background: url('images/background.jpg') center center / cover no-repeat fixed;
    color: var(--solriz-blauw);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .tagline {
    font-family: var(--font-heading);
}

.container {
    padding: 0 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header — logo + tagline, pinned in the top-left corner */
.site-header {
    position: fixed;
    top: 1rem;
    left: 1.5rem;
    z-index: 100;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content; /* shrink to the logo's rendered width so the tagline can match */
}

.main-logo {
    max-height: 56px;
    width: auto;
    display: block;
}

.tagline {
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--solriz-blauw);
    margin: 0;
    /* Stretch the tagline to span the full width of the logo above */
    width: 100%;
    text-align: justify;
    text-align-last: justify;
}

/* Puzzle control — visible slider that drives the assembly */
.puzzle-control {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: min(440px, 86vw);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(153, 211, 217, 0.6);
    border-radius: 30px;
    box-shadow: 0 4px 14px rgba(31, 54, 104, 0.12);
    z-index: 100;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.puzzle-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    /* Sweet spot lives in the middle — track is highlighted around 50% */
    background: linear-gradient(
        to right,
        var(--solriz-licht-cyaan) 0%,
        var(--solriz-licht-cyaan) 45%,
        var(--solriz-cyaan)       45%,
        var(--solriz-cyaan)       55%,
        var(--solriz-licht-cyaan) 55%,
        var(--solriz-licht-cyaan) 100%
    );
    outline: none;
    cursor: pointer;
    touch-action: none;
    margin: 0;
}

.puzzle-slider:focus-visible {
    box-shadow: 0 0 0 3px rgba(91, 185, 225, 0.35);
    border-radius: 6px;
}

.puzzle-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--solriz-blauw);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(31, 54, 104, 0.3);
    cursor: grab;
    transition: transform 0.15s ease;
}
.puzzle-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }

.puzzle-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--solriz-blauw);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(31, 54, 104, 0.3);
    cursor: grab;
    transition: transform 0.15s ease;
}
.puzzle-slider:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.15); }

.puzzle-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

/* Magnetic "click" pulse when the puzzle locks into place */
@keyframes snap-pulse {
    0%   { transform: translate(-50%, -50%) scale(1); }
    45%  { transform: translate(-50%, -50%) scale(1.035); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
.jigsaw-svg.snapped {
    animation: snap-pulse 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Jigsaw SVG Layout */
.jigsaw-svg {
    position: fixed;
    width: 80vmin;
    max-width: 700px; /* restrict max size */
    height: 80vmin;
    max-height: 700px;
    top: 55%; /* Offset it slightly below the fixed header */
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
    z-index: 10;
    filter: drop-shadow(0 15px 30px rgba(31, 54, 104, 0.15));
}

/* Clickable logo overlay — inactive until the puzzle finishes assembling */
.click-overlay {
    pointer-events: none;
}
.click-overlay.active {
    pointer-events: auto;
}
.click-overlay a {
    cursor: pointer;
}

path.piece {
    fill: url(#puzzle);

    /* Pieces scatter within the viewport — sized to keep all pieces visible on landscape laptops */
    --startX: calc(var(--pieceX) * 28vw);
    --startY: calc(var(--pieceY) * 22vh);

    --endX: 0px;
    --endY: 0px;
    --endRotate: 0deg;

    /* --side flips to -1 past the midpoint so the second-half scatter mirrors the first */
    --signedStartX: calc(var(--startX) * var(--side));
    --signedStartY: calc(var(--startY) * var(--side));
    --signedStartRotate: calc(var(--startRotate) * var(--side));

    /* Linear interpolation via --animate (0 = scattered, 1 = assembled at midpoint) */
    --x: calc(var(--signedStartX) * (1 - var(--animate)) + var(--endX) * var(--animate));
    --y: calc(var(--signedStartY) * (1 - var(--animate)) + var(--endY) * var(--animate));
    --rotate: calc(var(--signedStartRotate) * (1 - var(--animate)) + var(--endRotate) * var(--animate));

    transform-origin: calc(50% + 50% * var(--pieceX)) calc(50% + 50% * var(--pieceY));
    transform: translate(var(--x), var(--y)) rotate(var(--rotate)); 
    
    /* Subtle stroke around pieces to look like a real puzzle cut */
    stroke-width: 4px;
    stroke: rgba(153, 211, 217, 0.5); /* solriz-licht-cyaan tinted */
}

/* Manual mapping of the 16 pieces to grid coords (Col 1..4, Row 1..4) */

/* Column 1 */
path.piece:nth-of-type(1) { --pieceX: -0.75; --pieceY: -0.75; --startRotate: -34deg; }
path.piece:nth-of-type(2) { --pieceX: -0.75; --pieceY: -0.25; --startRotate: 120deg; }
path.piece:nth-of-type(3) { --pieceX: -0.75; --pieceY:  0.25; --startRotate: -75deg; }
path.piece:nth-of-type(4) { --pieceX: -0.75; --pieceY:  0.75; --startRotate: 55deg; }

/* Column 2 */
path.piece:nth-of-type(5) { --pieceX: -0.25; --pieceY: -0.75; --startRotate: 88deg; }
path.piece:nth-of-type(6) { --pieceX: -0.25; --pieceY: -0.25; --startRotate: -110deg; }
path.piece:nth-of-type(7) { --pieceX: -0.25; --pieceY:  0.25; --startRotate: 15deg; }
path.piece:nth-of-type(8) { --pieceX: -0.25; --pieceY:  0.75; --startRotate: -140deg; }

/* Column 3 */
path.piece:nth-of-type(9) { --pieceX:  0.25; --pieceY: -0.75; --startRotate: -45deg; }
path.piece:nth-of-type(10) {--pieceX:  0.25; --pieceY: -0.25; --startRotate: 65deg; }
path.piece:nth-of-type(11) {--pieceX:  0.25; --pieceY:  0.25; --startRotate: -125deg; }
path.piece:nth-of-type(12) {--pieceX:  0.25; --pieceY:  0.75; --startRotate: 90deg; }

/* Column 4 */
path.piece:nth-of-type(13) {--pieceX:  0.75; --pieceY: -0.75; --startRotate: 160deg; }
path.piece:nth-of-type(14) {--pieceX:  0.75; --pieceY: -0.25; --startRotate: -25deg; }
path.piece:nth-of-type(15) {--pieceX:  0.75; --pieceY:  0.25; --startRotate: 105deg; }
path.piece:nth-of-type(16) {--pieceX:  0.75; --pieceY:  0.75; --startRotate: -60deg; }

@media (max-width: 600px) {
    .jigsaw-svg {
        width: 92vmin;
        height: 92vmin;
        top: 48%;
    }
    .site-header {
        top: 0.75rem;
        left: 1rem;
    }
    .main-logo {
        max-height: 42px;
    }
    path.piece {
        /* Tighter scatter so all pieces stay within the narrow viewport */
        --startX: calc(var(--pieceX) * 22vw);
        --startY: calc(var(--pieceY) * 22vh);
    }
    .puzzle-control {
        bottom: 60px;
        gap: 10px;
        padding: 9px 14px;
    }
    .puzzle-control-label {
        font-size: 0.65rem;
    }
}