/* ══════════════════════════════════════════════════════════════
   Treatment-page media (image or muted loop video) + motion base.
   Used by dc-specialists, dc-price-list and dc-faq (Behandelpagina).
   Animations only run once js/dc-tp-motion.js adds .is-motion.
   ══════════════════════════════════════════════════════════════ */

.dc-tp-media {
    --dc-tp-ease: cubic-bezier(.22, .7, .18, 1);
    position: relative;
    overflow: hidden;
    background: #efe9e6;
}
/* doubled class beats Elementor's `.elementor img { height: auto }` */
.dc-tp-media__el.dc-tp-media__el {
    display: block;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
}

/* Pause / play for looping video (WCAG 2.2.2) */
.dc-tp-media__toggle {
    position: absolute; top: 14px; right: 14px; z-index: 4;
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%;
    background: rgba(26, 26, 46, 0.45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff; cursor: pointer;
    transition: background-color .3s ease, transform .3s ease;
}
.dc-tp-media__toggle:hover { background: rgba(26, 26, 46, 0.7); transform: scale(1.06); }
.dc-tp-media__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.dc-tp-media__toggle[hidden] { display: none; }
.dc-tp-media__toggle svg { width: 16px; height: 16px; display: block; }
.dc-tp-media__toggle .dc-tp-media__ico-play,
.dc-tp-media__toggle[aria-pressed="true"] .dc-tp-media__ico-pause { display: none; }
.dc-tp-media__toggle[aria-pressed="true"] .dc-tp-media__ico-play { display: block; }

/* Unveil: media settles from a slow zoom when its block scrolls in */
.is-motion [data-dc-tp-reveal] .dc-tp-media__el {
    scale: 1.16;
    transition: scale 2.4s var(--dc-tp-ease, ease), transform .9s var(--dc-tp-ease, ease);
}
.is-motion [data-dc-tp-reveal].is-in .dc-tp-media__el { scale: 1.04; }

/* Gentle scroll-linked drift (browsers with scroll-driven animations) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .dc-tp-media--drift .dc-tp-media__el {
            animation: dc-tp-drift linear both;
            animation-timeline: view();
            animation-range: cover;
        }
    }
}
@keyframes dc-tp-drift {
    from { translate: 0 -2.5%; }
    to   { translate: 0 2.5%; }
}

/* Count-up overlay (js/dc-tp-motion.js); the element's own text stays the real value */
[data-dc-tp-count] { position: relative; }
[data-dc-tp-count].is-counting { color: transparent !important; }
[data-dc-tp-count].is-counting::after {
    content: attr(data-dc-tp-shown);
    position: absolute; inset: 0;
    text-align: inherit;
    color: var(--dc-tp-count-color, #8B6B62);
}

@media (prefers-reduced-motion: reduce) {
    .dc-tp-media__el.dc-tp-media__el { scale: 1 !important; transition: none !important; animation: none !important; }
}