/**
 * Cool Slides engine stylesheet v0.8.2
 * Niet-thema-gebonden layout. Thema-specifieke styling (palet, illustraties,
 * prop-animaties) zit in themes/{slug}/theme.css.
 *
 * Structuur: een vaste .yc-cool-slides-stage met de parallax-lagen (bewegen
 * los van de scenes), daarboven een .yc-cool-slides-viewport met de bewegende
 * .yc-cool-slides-track die de scenes bevat.
 *
 * RESTRICTED ACCESS: This software is proprietary and closed-source.
 * NO AI TRAINING OR ANALYSIS: See TERMS.txt and https://www.yoozecase.com/terms
 */

.yc-cool-slides {
    --yc-cs-height: 75vh;
    position: relative;
    width: 100%;
    height: var(--yc-cs-height);
    min-height: 420px;
    overflow: hidden;
    background: var(--yc-cs-sky, #9eddf0);
    color: var(--yc-cs-text, #17304a);
    font-family: var(--yc-cs-font-body, inherit);
    touch-action: pan-y;
    isolation: isolate;
}

.yc-cool-slides.yc-cool-slides-dragging { cursor: grabbing; }
.yc-cool-slides.yc-cool-slides-dragging .yc-cool-slides-track,
.yc-cool-slides.yc-cool-slides-dragging .yc-cool-slides-layer { transition: none; }

/* Skip-link */
.yc-cool-slides-skip {
    position: absolute;
    left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
    z-index: 100;
}
.yc-cool-slides-skip:focus {
    left: 8px; top: 8px; width: auto; height: auto;
    padding: 8px 12px; background: #17304a; color: #fff;
    text-decoration: none; border-radius: 4px;
}

/* Parallax-stage: vaste laag-bak achter de scenes */
.yc-cool-slides-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.yc-cool-slides-layer {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    will-change: transform;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: auto 100%;
}

/* Viewport + bewegende track met de scenes */
.yc-cool-slides-viewport {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.yc-cool-slides-track {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100%;
    will-change: transform;
}

.yc-cool-slides-scene {
    flex: 0 0 auto;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(24px, 5vw, 72px);
    box-sizing: border-box;
    outline: none;
}
.yc-cool-slides-scene:focus-visible {
    outline: 3px solid var(--yc-cs-focus, #f4c24a);
    outline-offset: -6px;
}

/* Tekstkaart */
.yc-cool-slides-scene-inner {
    max-width: 460px;
    padding: clamp(20px, 3vw, 32px);
    background: var(--yc-cs-card, rgba(255, 255, 255, 0.9));
    color: var(--yc-cs-text, #17304a); /* v0.8.0: kaart-inhoud onafhankelijk van host-thema */
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(23, 48, 74, 0.18);
    opacity: 0;
    transform: translateY(6px) scale(0.99);
    transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), opacity 450ms ease;
}
.yc-cool-slides-scene.is-active .yc-cool-slides-scene-inner {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* Tijdens slepen alle kaarten zichtbaar zodat je de volgende scene ziet
   aankomen; alleen tijdens de auto-transitie faden de inactieve kaarten weg,
   zodat de uitgaande kaart niet rommelig achter het hero-menu doorschemert. */
.yc-cool-slides-dragging .yc-cool-slides-scene-inner {
    opacity: 1;
    transition: none;
}

.yc-cool-slides-text-right  .yc-cool-slides-scene-inner { margin-left: auto; }
.yc-cool-slides-text-left   .yc-cool-slides-scene-inner { margin-right: auto; }
.yc-cool-slides-text-top    .yc-cool-slides-scene-inner { margin: 0 auto auto; }
.yc-cool-slides-text-bottom .yc-cool-slides-scene-inner { margin: auto auto 0; }

.yc-cool-slides-intro {
    margin: 0 0 8px;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--yc-cs-accent-dark, #a04531); /* v0.8.0: fallback */
    color: color-mix(in srgb, var(--yc-cs-accent, #c45a3f) 78%, #000); /* accent-tekst AA op witte kaart */
}
.yc-cool-slides-title {
    margin: 0 0 14px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    color: var(--yc-cs-text, #17304a); /* v0.8.0: niet op host-thema-overerving leunen */
}
.yc-cool-slides-body { font-size: 16px; line-height: 1.55; margin-bottom: 22px; }
.yc-cool-slides-body p { margin: 0 0 12px; }
.yc-cool-slides-body p:last-child { margin-bottom: 0; }

.yc-cool-slides-button {
    display: inline-block;
    padding: 11px 22px;
    background: var(--yc-cs-accent-dark, #a84a33); /* v0.8.0: fallback */
    background: color-mix(in srgb, var(--yc-cs-accent, #c45a3f) 85%, #000); /* witte tekst AA */
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 150ms ease, transform 150ms ease;
}
.yc-cool-slides-button:hover,
.yc-cool-slides-button:focus {
    background: var(--yc-cs-accent-dark, #8f3f2b); /* fallback voor oudere browsers */
    background: color-mix(in srgb, var(--yc-cs-accent, #c45a3f) 70%, #000); /* volgt de per-scene accent */
    color: #fff;
    transform: translateY(-1px);
}

/* Hero-props (sticky over scenes) */
.yc-cool-slides-hero { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.yc-cool-slides-hero-prop { position: absolute; max-width: 22%; height: auto; }
.yc-cool-slides-hero-top-left     { top: 6%;  left: 4%; }
.yc-cool-slides-hero-top-right    { top: 6%;  right: 4%; }
.yc-cool-slides-hero-bottom-left  { bottom: 6%; left: 4%; }
.yc-cool-slides-hero-bottom-right { bottom: 6%; right: 4%; }

/* Navigatie */
.yc-cool-slides-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px; height: 48px;
    border: 0; border-radius: 50%;
    background: rgba(23, 48, 74, 0.72);
    color: #fff; cursor: pointer; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms ease, opacity 150ms ease;
}
.yc-cool-slides-nav:hover { background: rgba(23, 48, 74, 0.95); }
.yc-cool-slides-nav:focus-visible { outline: 3px solid var(--yc-cs-focus, #f4c24a); outline-offset: 2px; }
.yc-cool-slides-nav:disabled { opacity: 0.25; cursor: default; }
.yc-cool-slides-nav-prev { left: 16px; }
.yc-cool-slides-nav-next { right: 16px; }

.yc-cool-slides-dots {
    position: absolute;
    bottom: 18px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px; z-index: 20;
}
.yc-cool-slides-dot {
    width: 12px; height: 12px;
    padding: 6px; box-sizing: content-box; background-clip: content-box; /* v0.8.0: klikvlak 24px (WCAG 2.5.8) */
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(23, 48, 74, 0.25);
    border-radius: 50%; cursor: pointer; padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: background 150ms ease, transform 150ms ease;
}
.yc-cool-slides-dot.is-active { background: var(--yc-cs-accent, #c45a3f); transform: scale(1.2); }
.yc-cool-slides-dot:focus-visible { outline: 2px solid var(--yc-cs-focus, #f4c24a); outline-offset: 2px; }

/* Stacked-modus (smal scherm): geen parallax-wereld, maar wel een thema-
   achtergrond zodat de kaarten niet op een leeg vlak zweven. De lucht krijgt
   een zachte gradient en elke scene een grondband (--yc-cs-ground), zodat de
   thema-sfeer ook verticaal behouden blijft. */
.yc-cool-slides.yc-cool-slides-stacked {
    height: auto;
    min-height: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.28) 100%),
        var(--yc-cs-sky, #9eddf0);
}
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-track {
    flex-direction: column;
    width: 100% !important;
    transform: none !important;
    height: auto;
}
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-scene {
    width: 100% !important;
    height: auto;
    min-height: 52vh;
    position: relative;
    padding-bottom: clamp(40px, 9vw, 64px);
}
/* Grondband onder elke gestapelde scene (thema-kleur). */
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-scene::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: clamp(20px, 5vw, 30px);
    background: var(--yc-cs-ground, var(--yc-cs-accent, #c45a3f));
    opacity: 0.9;
}
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-scene-inner {
    transform: none; opacity: 1;
}

/* Mobiele body-tekst en verkorte titel (builder, element-niveau).
   De body-regel-limiet ('mobile-N': N=0..4, 0=verbergen, 'full'=alles) en de
   verkorte titel gelden vanaf een instelbare YOOtheme-breakpoint ('textbp-N'),
   los van de stack-breakpoint. Pure CSS via media queries, geen JS. */
.yc-cool-slides-title-short { display: none; }

@media (max-width: 639px) {
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-0 .yc-cool-slides-body { display: none; }
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-1 .yc-cool-slides-body,
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-2 .yc-cool-slides-body,
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-3 .yc-cool-slides-body,
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-4 .yc-cool-slides-body {
        display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    }
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-1 .yc-cool-slides-body { -webkit-line-clamp: 1; line-clamp: 1; }
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-2 .yc-cool-slides-body { -webkit-line-clamp: 2; line-clamp: 2; }
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-3 .yc-cool-slides-body { -webkit-line-clamp: 3; line-clamp: 3; }
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-4 .yc-cool-slides-body { -webkit-line-clamp: 4; line-clamp: 4; }
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-1 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-2 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-3 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-640.yc-cool-slides-mobile-4 .yc-cool-slides-body p { margin-bottom: 0; }
    .yc-cool-slides-textbp-640.yc-cool-slides-stacked.yc-cool-slides-mobile-0 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-640.yc-cool-slides-stacked.yc-cool-slides-mobile-1 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-640.yc-cool-slides-stacked.yc-cool-slides-mobile-2 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-640.yc-cool-slides-stacked.yc-cool-slides-mobile-3 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-640.yc-cool-slides-stacked.yc-cool-slides-mobile-4 .yc-cool-slides-scene { min-height: 0; }
    .yc-cool-slides-textbp-640 .yc-cool-slides-title-short { display: block; }
    .yc-cool-slides-textbp-640 .yc-cool-slides-title-full { display: none; }
}
@media (max-width: 767px) {
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-0 .yc-cool-slides-body { display: none; }
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-1 .yc-cool-slides-body,
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-2 .yc-cool-slides-body,
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-3 .yc-cool-slides-body,
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-4 .yc-cool-slides-body {
        display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    }
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-1 .yc-cool-slides-body { -webkit-line-clamp: 1; line-clamp: 1; }
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-2 .yc-cool-slides-body { -webkit-line-clamp: 2; line-clamp: 2; }
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-3 .yc-cool-slides-body { -webkit-line-clamp: 3; line-clamp: 3; }
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-4 .yc-cool-slides-body { -webkit-line-clamp: 4; line-clamp: 4; }
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-1 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-2 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-3 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-768.yc-cool-slides-mobile-4 .yc-cool-slides-body p { margin-bottom: 0; }
    .yc-cool-slides-textbp-768.yc-cool-slides-stacked.yc-cool-slides-mobile-0 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-768.yc-cool-slides-stacked.yc-cool-slides-mobile-1 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-768.yc-cool-slides-stacked.yc-cool-slides-mobile-2 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-768.yc-cool-slides-stacked.yc-cool-slides-mobile-3 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-768.yc-cool-slides-stacked.yc-cool-slides-mobile-4 .yc-cool-slides-scene { min-height: 0; }
    .yc-cool-slides-textbp-768 .yc-cool-slides-title-short { display: block; }
    .yc-cool-slides-textbp-768 .yc-cool-slides-title-full { display: none; }
}
@media (max-width: 959px) {
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-0 .yc-cool-slides-body { display: none; }
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-1 .yc-cool-slides-body,
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-2 .yc-cool-slides-body,
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-3 .yc-cool-slides-body,
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-4 .yc-cool-slides-body {
        display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    }
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-1 .yc-cool-slides-body { -webkit-line-clamp: 1; line-clamp: 1; }
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-2 .yc-cool-slides-body { -webkit-line-clamp: 2; line-clamp: 2; }
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-3 .yc-cool-slides-body { -webkit-line-clamp: 3; line-clamp: 3; }
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-4 .yc-cool-slides-body { -webkit-line-clamp: 4; line-clamp: 4; }
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-1 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-2 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-3 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-960.yc-cool-slides-mobile-4 .yc-cool-slides-body p { margin-bottom: 0; }
    .yc-cool-slides-textbp-960.yc-cool-slides-stacked.yc-cool-slides-mobile-0 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-960.yc-cool-slides-stacked.yc-cool-slides-mobile-1 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-960.yc-cool-slides-stacked.yc-cool-slides-mobile-2 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-960.yc-cool-slides-stacked.yc-cool-slides-mobile-3 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-960.yc-cool-slides-stacked.yc-cool-slides-mobile-4 .yc-cool-slides-scene { min-height: 0; }
    .yc-cool-slides-textbp-960 .yc-cool-slides-title-short { display: block; }
    .yc-cool-slides-textbp-960 .yc-cool-slides-title-full { display: none; }
}
@media (max-width: 1199px) {
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-0 .yc-cool-slides-body { display: none; }
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-1 .yc-cool-slides-body,
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-2 .yc-cool-slides-body,
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-3 .yc-cool-slides-body,
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-4 .yc-cool-slides-body {
        display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    }
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-1 .yc-cool-slides-body { -webkit-line-clamp: 1; line-clamp: 1; }
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-2 .yc-cool-slides-body { -webkit-line-clamp: 2; line-clamp: 2; }
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-3 .yc-cool-slides-body { -webkit-line-clamp: 3; line-clamp: 3; }
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-4 .yc-cool-slides-body { -webkit-line-clamp: 4; line-clamp: 4; }
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-1 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-2 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-3 .yc-cool-slides-body p,
    .yc-cool-slides-textbp-1200.yc-cool-slides-mobile-4 .yc-cool-slides-body p { margin-bottom: 0; }
    .yc-cool-slides-textbp-1200.yc-cool-slides-stacked.yc-cool-slides-mobile-0 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-1200.yc-cool-slides-stacked.yc-cool-slides-mobile-1 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-1200.yc-cool-slides-stacked.yc-cool-slides-mobile-2 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-1200.yc-cool-slides-stacked.yc-cool-slides-mobile-3 .yc-cool-slides-scene,
    .yc-cool-slides-textbp-1200.yc-cool-slides-stacked.yc-cool-slides-mobile-4 .yc-cool-slides-scene { min-height: 0; }
    .yc-cool-slides-textbp-1200 .yc-cool-slides-title-short { display: block; }
    .yc-cool-slides-textbp-1200 .yc-cool-slides-title-full { display: none; }
}
/* Bewegende parallax-lagen, zwevende decoraties (vogels/wolken) en de
   horizontale navigatie horen niet thuis in de verticale stack. */
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-stage,
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-deco,
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-hero,
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-nav,
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-dots {
    display: none;
}
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-viewport {
    overflow: visible;
    height: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .yc-cool-slides-track,
    .yc-cool-slides-layer,
    .yc-cool-slides-scene-inner { transition: none !important; }
    .yc-cool-slides-scene-inner { transform: none; opacity: 1; }
}

@media (max-width: 480px) {
    .yc-cool-slides-height-large  { --yc-cs-height: 68vh; }
    .yc-cool-slides-height-medium { --yc-cs-height: 56vh; }
    .yc-cool-slides-scene-inner { max-width: 100%; }
}

/* ---- Decoratieve geanimeerde props (vogels, wolken) ---- */
.yc-cool-slides-deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.yc-cool-slides-deco-back  { z-index: 1; }  /* achter de tekstkaarten (wolken) */
.yc-cool-slides-deco-front { z-index: 6; }  /* over de scene heen (vogels) */
.yc-cool-slides-deco-item {
    position: absolute;
    display: block;
    aspect-ratio: 2.2 / 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    will-change: transform;
}

/* Overstekende props (vogels=fly met op-neer, wolken=cross vlak), met richting.
   Richting via de modifier-class -ltr (links->rechts) of -rtl (rechts->links). */
.yc-cool-slides-deco-fly,
.yc-cool-slides-deco-cross {
    left: 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.yc-cool-slides-deco-fly.yc-cool-slides-deco-ltr   { animation-name: yc-cs-fly-ltr; }
.yc-cool-slides-deco-fly.yc-cool-slides-deco-rtl   { animation-name: yc-cs-fly-rtl; }
.yc-cool-slides-deco-cross.yc-cool-slides-deco-ltr { animation-name: yc-cs-cross-ltr; }
.yc-cool-slides-deco-cross.yc-cool-slides-deco-rtl { animation-name: yc-cs-cross-rtl; }

@keyframes yc-cs-fly-ltr {
    0%   { transform: translateX(-12vw) translateY(0); }
    25%  { transform: translateX(18vw)  translateY(-18px); }
    50%  { transform: translateX(48vw)  translateY(6px); }
    75%  { transform: translateX(80vw)  translateY(-14px); }
    100% { transform: translateX(118vw) translateY(0); }
}
@keyframes yc-cs-fly-rtl {
    0%   { transform: translateX(118vw) translateY(0); }
    25%  { transform: translateX(80vw)  translateY(-14px); }
    50%  { transform: translateX(48vw)  translateY(6px); }
    75%  { transform: translateX(18vw)  translateY(-18px); }
    100% { transform: translateX(-12vw) translateY(0); }
}
@keyframes yc-cs-cross-ltr {
    from { transform: translateX(-20vw); }
    to   { transform: translateX(122vw); }
}
@keyframes yc-cs-cross-rtl {
    from { transform: translateX(122vw); }
    to   { transform: translateX(-20vw); }
}

/* Wolken driften langzaam heen en weer */
.yc-cool-slides-deco-drift {
    animation-name: yc-cs-driftx;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes yc-cs-driftx {
    from { transform: translateX(-30px); }
    to   { transform: translateX(40px); }
}

/* Wiebelen (bob) voor hangende props */
.yc-cool-slides-deco-bob {
    animation-name: yc-cs-bob;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: top center;
}
@keyframes yc-cs-bob {
    from { transform: rotate(-6deg); }
    to   { transform: rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .yc-cool-slides-deco-item { animation: none !important; }
    .yc-cool-slides-deco-fly,
    .yc-cool-slides-deco-cross { transform: translateX(40vw); }
}

/* ---- Balloon-menu (optioneel zwevend menu over de scenes) ---- */
.yc-cool-slides-heromenu {
    position: absolute;
    z-index: 12;
    width: clamp(110px, 14vw, 180px);
    pointer-events: none;
    transform-origin: top center;
}
.yc-cool-slides-hero-top-left     { top: 3%; left: 3%; }
.yc-cool-slides-hero-top-right    { top: 3%; right: 3%; }
.yc-cool-slides-hero-bottom-left  { bottom: 3%; left: 3%; }
.yc-cool-slides-hero-bottom-right { bottom: 3%; right: 3%; }

.yc-cool-slides-heromenu-prop {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 14px rgba(23, 48, 74, 0.25));
}
.yc-cool-slides-heromenu-list {
    list-style: none;
    margin: -6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.yc-cool-slides-heromenu-board {
    pointer-events: auto;
    display: inline-block;
    padding: 5px 12px;
    background: var(--yc-cs-card, #fff);
    color: var(--yc-cs-text, #17304a);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(23, 48, 74, 0.2);
    border-top: 3px solid var(--yc-cs-accent, #c45a3f);
    white-space: nowrap;
    transition: transform 120ms ease, background 120ms ease;
}
.yc-cool-slides-heromenu-board:hover,
.yc-cool-slides-heromenu-board:focus {
    transform: translateY(-2px);
    background: var(--yc-cs-focus, #f4c24a);
}

/* Zachte wiebel zoals de buurman-luchtballon */
.yc-cool-slides-hero-sway { animation: yc-cs-sway 6s ease-in-out infinite alternate; }
@keyframes yc-cs-sway {
    from { transform: rotate(-3deg); }
    to   { transform: rotate(3deg); }
}

.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-heromenu { display: none; }

@media (prefers-reduced-motion: reduce) {
    .yc-cool-slides-hero-sway { animation: none; }
}

/* === v0.7.8: aria-live region (visueel verborgen) === */
.yc-cool-slides-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* === v0.7.8: overlay-media per scene (bijv. ansichtkaart) === */
.yc-cool-slides-overlay {
    position: absolute;
    max-width: 60%;
    height: auto;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.18));
}
.yc-cool-slides-overlay-bottom-right { right: clamp(16px, 4vw, 56px); bottom: clamp(16px, 4vw, 56px); }
.yc-cool-slides-overlay-bottom-left  { left:  clamp(16px, 4vw, 56px); bottom: clamp(16px, 4vw, 56px); }
.yc-cool-slides-overlay-top-right    { right: clamp(16px, 4vw, 56px); top:    clamp(16px, 4vw, 56px); }
.yc-cool-slides-overlay-top-left     { left:  clamp(16px, 4vw, 56px); top:    clamp(16px, 4vw, 56px); }
.yc-cool-slides-overlay-center       { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Tekstkaart boven de overlay houden */
.yc-cool-slides-scene-inner { position: relative; z-index: 6; }

/* Gestapelde modus: overlay inline tonen i.p.v. absoluut over de kaart */
.yc-cool-slides.yc-cool-slides-stacked .yc-cool-slides-overlay {
    position: static;
    display: block;
    transform: none;
    margin: 0 auto 12px;
    max-width: 70%;
}

/* === v0.7.9: thema-fonts uit theme.json (scoped CSS-vars, ingespoten op de root) === */
.yc-cool-slides-title { font-family: var(--yc-cs-font-heading, inherit); font-weight: var(--yc-cs-font-heading-weight, 700); }
.yc-cool-slides-scene-inner { font-family: var(--yc-cs-font-body, inherit); }

/* === v0.8.0: tekstkaart en ballon-menu houden rekening met elkaar ===
   Het ballon-menu hangt aan een hoek (anchor). Reserveer aan die kant ruimte in
   de scene zodat de tekstkaart niet onder het menu valt. Niet in stacked-modus,
   want daar is het menu verborgen. */
.yc-cool-slides-heromenu-on.yc-cool-slides-heromenu-anchor-top-left:not(.yc-cool-slides-stacked) .yc-cool-slides-scene,
.yc-cool-slides-heromenu-on.yc-cool-slides-heromenu-anchor-bottom-left:not(.yc-cool-slides-stacked) .yc-cool-slides-scene {
    padding-left: clamp(150px, 17vw, 220px);
}
.yc-cool-slides-heromenu-on.yc-cool-slides-heromenu-anchor-top-right:not(.yc-cool-slides-stacked) .yc-cool-slides-scene,
.yc-cool-slides-heromenu-on.yc-cool-slides-heromenu-anchor-bottom-right:not(.yc-cool-slides-stacked) .yc-cool-slides-scene {
    padding-right: clamp(150px, 17vw, 220px);
}


/* === v0.8.0: hoogte-modi, hero full-bleed en tekstkaart-stijlen === */
.yc-cool-slides-height-viewport { --yc-cs-height: 100vh; }
@supports (height: 100svh) { .yc-cool-slides-height-viewport { --yc-cs-height: 100svh; } }
.yc-cool-slides-height-large   { --yc-cs-height: 75vh; }
.yc-cool-slides-height-medium  { --yc-cs-height: 60vh; }
.yc-cool-slides-height-custom  { --yc-cs-height: var(--yc-cs-height-custom, 600px); }

/* Full-bleed: uit de content-container naar volledige vensterbreedte (hero) */
.yc-cool-slides-full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Tekstkaart 'geen': tekst direct op de illustratie, met leesbaarheidsschaduw */
.yc-cool-slides-card-none .yc-cool-slides-scene-inner {
    background: transparent;
    box-shadow: none;
    padding: 0;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75), 0 1px 8px rgba(255, 255, 255, 0.5);
}
/* Tekstkaart 'themed': achtergrond uit een thema-asset; valt terug op de paneel-kleur */
.yc-cool-slides-card-themed .yc-cool-slides-scene-inner {
    background: var(--yc-cs-card-image, var(--yc-cs-card, rgba(255, 255, 255, 0.92)));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: none;
}


/* === v0.8.2: hero-integratie met de site-header (self-contained, geen custom CSS nodig) ===
   Het element zet via een kleine inline class-setter html.yc-cs-header-hide of
   html.yc-cs-header-overlay; deze regels handelen de rest af. Doelwit is de
   YOOtheme-header (.tm-header / .tm-header-mobile). */
html.yc-cs-header-hide .tm-header,
html.yc-cs-header-hide .tm-header-mobile { display: none !important; }

html.yc-cs-header-overlay .tm-header,
html.yc-cs-header-overlay .tm-header-mobile {
    position: absolute !important;
    left: 0; right: 0; top: 0;
    z-index: 980;
    background: transparent !important;
    box-shadow: none !important;
}
/* sticky-kloon van de header niet over de content laten plakken in overlay-modus */
html.yc-cs-header-overlay .uk-sticky-placeholder { display: none !important; }

/* leesbaarheid van de overlay-nav: donkere tekst op een lichte hero (default) */
html.yc-cs-header-overlay.yc-cs-header-text-dark .tm-header,
html.yc-cs-header-overlay.yc-cs-header-text-dark .tm-header a,
html.yc-cs-header-overlay.yc-cs-header-text-dark .tm-header .uk-navbar-nav > li > a {
    color: #17304a !important;
}
/* lichte tekst op een donkere hero */
html.yc-cs-header-overlay.yc-cs-header-text-light .tm-header,
html.yc-cs-header-overlay.yc-cs-header-text-light .tm-header a,
html.yc-cs-header-overlay.yc-cs-header-text-light .tm-header .uk-navbar-nav > li > a {
    color: #ffffff !important;
}


/* === v0.8.2: full-bleed hero vult ook verticaal tot de rand ===
   De full-bleed hero breekt uit naar de volle vensterbreedte, maar de YOOtheme-
   sectie eromheen houdt zijn verticale block-padding (met sectie-achtergrond),
   wat boven/onder een strook laat zien. In full-bleed modus nemen we die
   verticale padding van de omliggende sectie weg zodat de hero edge-to-edge
   vult. Vereist :has() (alle courante browsers). */
.uk-section:has(.yc-cool-slides-full-bleed) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}