/* =====================================================================
   ScoorJeKamp — gedeelde premium-laag (UX primitives)
   Zelf gehost, geen CDN. Werkt boven op Bootstrap + de huisstijl-tokens
   uit partials/brand.blade.php. Elke publieke pagina laadt dit bestand.
   ===================================================================== */

/* ---- Basis-verfijning ------------------------------------------------ */
/* overflow-x: clip vangt transiënte horizontale overloop af (zij-onthullingen,
   afrondingen) zonder een scroll-container te maken → sticky header blijft werken. */
html { scroll-behavior: smooth; overflow-x: clip; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
::selection { background: rgba(242,86,79,.22); color: var(--sjk-diep); }

/* Nette, merk-eigen focus voor toetsenbord-gebruikers (niet bij muis) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
[tabindex]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none; box-shadow: var(--sjk-focus); border-radius: 6px;
}

/* ---- Scroll-onthulling ------------------------------------------------ */
/* Startstaat: licht naar beneden + transparant. JS zet .is-in → eindstaat. */
.reveal { opacity: 0; transform: translateY(22px); will-change: opacity, transform;
    transition: opacity .7s var(--sjk-ease-out), transform .7s var(--sjk-ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-left  { transform: translateX(-26px); }
.reveal-right { transform: translateX(26px); }
.reveal-zoom  { transform: scale(.94); }
/* Op smalle schermen alleen verticaal onthullen (geen zij-schuif → geen jiggle) */
@media (max-width: 767.98px) {
    .reveal-left, .reveal-right { transform: translateY(22px); }
}
/* Gestaffelde vertraging binnen een groep (kaarten na elkaar) */
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* ---- Glas + textuur --------------------------------------------------- */
.sjk-glass {
    background: rgba(255,255,255,.10);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border: 1px solid rgba(255,255,255,.16);
}
.sjk-noise::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--sjk-noise); background-size: 180px; opacity: .06; mix-blend-mode: overlay;
}

/* ---- Geanimeerde gradient-mesh (hero-achtergrond) --------------------- */
.sjk-mesh { position: relative; overflow: hidden; isolation: isolate; }
.sjk-mesh > .sjk-mesh-layer {
    position: absolute; inset: -20%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 44% at 18% 12%, rgba(255,107,107,.55), transparent 62%),
        radial-gradient(42% 48% at 82% 20%, rgba(84,87,229,.55), transparent 60%),
        radial-gradient(46% 52% at 60% 92%, rgba(242,86,79,.40), transparent 62%),
        radial-gradient(40% 46% at 8% 88%, rgba(84,87,229,.35), transparent 60%);
    filter: blur(46px) saturate(120%);
    animation: sjk-mesh-drift 18s var(--sjk-ease-inout) infinite alternate;
}
@keyframes sjk-mesh-drift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
}
.sjk-mesh > * { position: relative; z-index: 1; }

/* ---- Gradient-tekst (accentwoord in koppen) --------------------------- */
.sjk-grad-text {
    background: linear-gradient(100deg, var(--sjk-koraal) 0%, #ff8a5c 50%, var(--sjk-koraal-diep) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Knoppen met sheen + lift ----------------------------------------- */
.sjk-btn {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; text-decoration: none; font-weight: 700; border: 0; cursor: pointer;
    border-radius: var(--sjk-radius-btn); padding: .95rem 1.75rem; color: #fff;
    background: var(--sjk-koraal-diep); box-shadow: var(--sjk-el-koraal);
    transition: transform .18s var(--sjk-ease-spring), box-shadow .18s var(--sjk-ease-out), filter .18s;
}
.sjk-btn:hover, .sjk-btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px -8px rgba(242,86,79,.55); }
.sjk-btn:active { transform: translateY(0) scale(.99); }
/* Sheen-veeg over de knop */
.sjk-btn::before {
    content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
    transform: skewX(-18deg); transition: left .6s var(--sjk-ease-out);
}
.sjk-btn:hover::before { left: 160%; }
.sjk-btn-ghost {
    background: transparent; color: #fff; box-shadow: none;
    border: 1px solid rgba(255,255,255,.30);
}
.sjk-btn-ghost:hover, .sjk-btn-ghost:focus-visible { color: #fff; background: rgba(255,255,255,.10); box-shadow: none; }
.sjk-btn-ghost::before { display: none; }

/* Magnetische knop volgt licht de cursor (JS zet --mx/--my) */
.sjk-magnetic { transition: transform .25s var(--sjk-ease-out); }
.sjk-magnetic.is-pull { transform: translate(var(--mx,0), var(--my,0)); }

/* ---- Kaarten met hover-lift ------------------------------------------- */
.sjk-lift { transition: transform .25s var(--sjk-ease-out), box-shadow .25s var(--sjk-ease-out); }
.sjk-lift:hover { transform: translateY(-6px); box-shadow: var(--sjk-el-4); }

/* Kaart met gradient-rand (feature-tegels) */
.sjk-card-grad {
    position: relative; background: #fff; border-radius: var(--sjk-radius-card);
    padding: 1.6rem; height: 100%; box-shadow: var(--sjk-el-2);
    border: 1px solid var(--sjk-lijn);
}
.sjk-card-grad::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(140deg, rgba(255,107,107,.55), rgba(84,87,229,.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .25s var(--sjk-ease-out);
}
.sjk-card-grad:hover::before { opacity: 1; }

/* ---- Eigen SVG-icoon-tegel -------------------------------------------- */
.sjk-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 15px; flex: 0 0 auto;
    background: linear-gradient(140deg, var(--sjk-rozetint), #fff);
    border: 1px solid var(--sjk-lijn); color: var(--sjk-koraal-diep);
    box-shadow: var(--sjk-el-1);
}
.sjk-ico svg { width: 1.5rem; height: 1.5rem; }
.sjk-ico--indigo { color: var(--sjk-indigo); background: linear-gradient(140deg, var(--sjk-lavendel), #fff); }

/* ---- Marquee (partner-logo's, oneindig, pauzeert bij hover) ----------- */
.sjk-marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sjk-marquee-track { display: flex; width: max-content; gap: 3rem; align-items: center;
    animation: sjk-marquee 32s linear infinite; }
.sjk-marquee:hover .sjk-marquee-track { animation-play-state: paused; }
@keyframes sjk-marquee { to { transform: translateX(-50%); } }

/* ---- Tellend cijfer / vullende balk (startstaat) ---------------------- */
.sjk-bar-fill { width: 0 !important; transition: width 1.1s var(--sjk-ease-out); }
.sjk-bar-fill.is-in { /* JS zet de doelbreedte inline via --to */ width: var(--to) !important; }

/* ---- Sectie-eyebrow (herbruikbaar) ------------------------------------ */
.sjk-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700;
    color: var(--sjk-koraal-diep); text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; }
.sjk-eyebrow::before { content: ""; width: 1.4rem; height: 2px; border-radius: 2px; background: var(--sjk-koraal-diep); }

/* ---- Leesvoortgangsbalk (bovenaan, globaal) --------------------------- */
.sjk-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1080;
    background: linear-gradient(90deg, var(--sjk-koraal), var(--sjk-koraal-diep) 55%, var(--sjk-indigo));
    box-shadow: 0 0 10px rgba(242,86,79,.5); transition: width .1s linear; pointer-events: none; }

/* ---- Terug naar boven (verschijnt bij scrollen) ----------------------- */
.sjk-top { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1080;
    width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: var(--sjk-koraal-diep); box-shadow: var(--sjk-el-3);
    opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
    transition: opacity .25s var(--sjk-ease-out), transform .25s var(--sjk-ease-spring), box-shadow .2s ease; }
.sjk-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sjk-top:hover { box-shadow: 0 14px 28px -8px rgba(242,86,79,.55); transform: translateY(-2px); }
.sjk-top svg { width: 1.25rem; height: 1.25rem; }
@media print { .sjk-progress, .sjk-top { display: none; } }

/* ---- Toegankelijkheid: respecteer bewegingsvoorkeur ------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .sjk-mesh > .sjk-mesh-layer { animation: none !important; }
    .sjk-marquee-track { animation: none !important; }
    .sjk-btn::before { display: none !important; }
    .sjk-bar-fill { transition: none !important; }
    * { scroll-behavior: auto !important; }
}