/* =============================================
   Eaters Speler Carousel v7.4 — carousel.css
   Alle kleuren/fonts via CSS variabelen vanuit
   de instellingenpagina (Spelers → Instellingen)
   MDesign Studio
   ============================================= */

:root {
    --esc-rood:     #c1032f;
    --esc-donker:   #0d0003;
    --esc-h:        520px;
    --esc-num-font: Arial Black, Impact, sans-serif;
    --esc-num-max:  55vw;
    --esc-num-op:   0.055;
}

/* ── Site-breed ── */
.esc-outer {
    position: relative;
    left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    width: 100vw;
    overflow: hidden;
}

/* ── Carousel wrapper ── */
.esc-carousel {
    position: relative;
    width: 100%;
    height: var(--esc-h);
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    background: var(--esc-donker); /* eigen achtergrond — blokkeert Oxygen sectie-kleur */
}

/* ══════════════════════════════════════════════
   VIDEO VUUR / STOOM
   Staat BOVEN alles — mix-blend-mode:screen
   zorgt dat zwart wegvalt, vlammen zichtbaar
   over foto én tekst heen
   ══════════════════════════════════════════════ */
.esc-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 20;          /* boven track(7), foto, tekst, alles */
    pointer-events: none;
    mix-blend-mode: screen;
}
.esc-fire-video,
.esc-smoke-video {
    position: absolute;
    left: 0; width: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity .35s ease;
    will-change: opacity;
}
.esc-fire-video  { bottom: 0; height: 130%; object-fit: cover; object-position: bottom center; }
.esc-smoke-video { bottom: 0; height: 130%; object-fit: cover; object-position: bottom center; }

.esc-carousel.esc-fx-active .esc-fire-video  { opacity: .55; }
.esc-carousel.esc-fx-active .esc-smoke-video { opacity: .4; }
.esc-carousel.esc-fx-fading .esc-fire-video  { opacity: 0; transition: opacity .7s ease; }
.esc-carousel.esc-fx-fading .esc-smoke-video { opacity: 0; transition: opacity .9s ease; }

.esc-canvas-fallback {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 2;
    display: none;
}
.esc-carousel.esc-video-failed .esc-canvas-fallback { display: block; }
.esc-carousel.esc-video-failed .esc-fire-video,
.esc-carousel.esc-video-failed .esc-smoke-video { display: none; }

/* ── Track & slides — boven de video wrap ── */
.esc-track {
    display: flex; width: 100%; height: 100%;
    position: relative; z-index: 7;
}

.esc-slide {
    position: relative;
    min-width: 100%; height: 100%;
    display: flex; flex-direction: row;
    align-items: center;
    /* GEEN background, GEEN overflow:hidden — volledig transparant over ::before laag */
}

/* ── Rugnummer watermark — volledig instelbaar via CSS vars ── */
.esc-watermark {
    position: absolute;
    right: -20px; top: 50%;
    transform: translateY(-50%);
    font-size: clamp(140px, var(--esc-num-max), 420px);
    font-weight: 900;
    font-family: var(--esc-num-font);
    color: rgba(255, 255, 255, var(--esc-num-op));
    line-height: 1;
    letter-spacing: -12px;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

/* ── Foto kolom — geen eigen achtergrond, blend mee als één geheel ── */
.esc-foto-col {
    position: relative;
    width: 48%; height: 100%;
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 2;
}

.esc-foto {
    height: 100%; width: auto; max-width: 100%;
    object-fit: contain; object-position: bottom center;
    display: block;
    position: relative;
    z-index: 2;
}

.esc-foto-placeholder {
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 2px dashed rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 48px; font-weight: 900;
    color: rgba(255,255,255,.15); margin-bottom: 40px;
}

/* Rechterfade — vervaagt de rechterrand van de foto naar transparant */
.esc-fade-r {
    display: block;
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 55%;
    background: linear-gradient(to right, transparent, var(--esc-donker) 90%);
    z-index: 3;
    pointer-events: none;
}

/* Linkerfade — vervaagt linkerrand */
.esc-fade-l {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 15%;
    background: linear-gradient(to left, transparent, var(--esc-donker));
    z-index: 3;
    pointer-events: none;
}

/* Onderfade */
.esc-fade-b {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to top, var(--esc-donker), transparent);
    z-index: 3;
    pointer-events: none;
}

/* ── Info kolom ── */
.esc-info-col {
    position: relative; width: 52%;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
    padding: 0 72px 0 16px; gap: 10px; z-index: 4;
}

.esc-label {
    font-size: 12px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--esc-rood); margin: 0;
}

.esc-naam {
    font-size: clamp(28px, 4.2vw, 56px);
    font-weight: 900; color: #fff;
    text-transform: uppercase; line-height: 1.0; margin: 0;
}

.esc-nat {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.4); margin: 0;
}
.esc-vlag { font-size: 22px; line-height: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

.esc-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--esc-rood); color: #fff;
    font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; padding: 11px 24px;
    border-radius: 6px; margin-top: 8px;
    transition: background .2s, transform .15s;
}
.esc-btn:hover { background: color-mix(in srgb, var(--esc-rood) 80%, black); color: #fff; transform: translateY(-2px); text-decoration: none; }

/* ── Pijlen ── */
.esc-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.08);
    border: 0.5px solid rgba(255,255,255,.18);
    color: #fff; width: 46px; height: 46px;
    border-radius: 50%; font-size: 24px;
    cursor: pointer; z-index: 30;
    transition: background .2s;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.esc-arrow:hover { background: color-mix(in srgb, var(--esc-rood) 75%, transparent); border-color: transparent; }
.esc-arrow-l { left: 16px; }
.esc-arrow-r { right: 16px; }

/* ── Dots verborgen ── */
.esc-dots { display: none; }

/* ═══════════════
   MOBIEL ≤ 768px
   ═══════════════ */
@media (max-width: 768px) {
    .esc-carousel { height: auto !important; }
    .esc-slide { flex-direction: column; height: auto; padding-bottom: 56px; align-items: center; }
    .esc-watermark { font-size: clamp(100px, 48vw, 200px); right: 0; top: 8px; transform: none; letter-spacing: -6px; }
    .esc-foto-col { width: 100%; height: 260px; }
    .esc-fade-r { width: 0; }
    .esc-info-col { width: 100%; align-items: center; text-align: center; padding: 16px 24px; }
    .esc-nat { justify-content: center; }
    .esc-naam { font-size: clamp(26px, 9vw, 38px); }
    .esc-arrow { top: 130px; transform: none; width: 38px; height: 38px; font-size: 20px; }
    .esc-arrow-l { left: 8px; }
    .esc-arrow-r { right: 8px; }
    .esc-fire-video  { height: 130%; }
    .esc-smoke-video { height: 130%; }
}

/* ════════════════
   TABLET 769–1024px
   ════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    .esc-naam     { font-size: clamp(28px, 3.8vw, 44px); }
    .esc-info-col { padding-right: 44px; }
}