/**
 * SiteClick text effects (TXF) — span.sc-tx.
 * Contract: docs/rondes/ronde-14/contracts/text-effects.md (Laravel repo).
 * Loaded after theme.css so .sc-tx-fg can beat the .clr-* palette classes.
 */

.sc-tx {
    position: relative;
    display: inline;
    font-size: calc(1em * var(--sc-tx-size, 1));
}

/** STIJL **/
.sc-tx-fg {
    color: var(--sc-tx-fg) !important;
}

.sc-tx-i {
    font-style: italic;
}

.sc-tx-ls {
    letter-spacing: calc(var(--sc-tx-ls, 0) * 0.01em);
}

.sc-tx-tt-upper {
    text-transform: uppercase;
}

.sc-tx-tt-lower {
    text-transform: lowercase;
}

.sc-tx-tt-caps {
    text-transform: capitalize;
}

.sc-tx-grad {
    background-image: linear-gradient(var(--sc-tx-gdeg, 90deg), var(--sc-tx-g1, currentColor), var(--sc-tx-g2, currentColor));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sc-tx-ff {
    font-family: var(--sc-tx-ff), sans-serif;
}

/** DECORATIE **/
.sc-tx-d-highlight {
    background-image: linear-gradient(transparent calc(100% - var(--sc-tx-w, 0.45em)), color-mix(in srgb, var(--sc-tx-c, #ffe066) calc(var(--sc-tx-o, 1) * 100%), transparent) calc(100% - var(--sc-tx-w, 0.45em)));
}

.sc-tx-d-marker::after,
.sc-tx-d-underline-hand::after,
.sc-tx-d-underline-brush::after,
.sc-tx-d-scribble::after,
.sc-tx-d-strike-hand::after,
.sc-tx-d-circle::after,
.sc-tx-d-ellipse::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    background: var(--sc-tx-c, currentColor);
    opacity: var(--sc-tx-o, 1);
    transform: rotate(var(--sc-tx-rot, 0deg));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.sc-tx-d-underline-hand::after,
.sc-tx-d-underline-brush::after {
    left: calc(-1 * var(--sc-tx-pad, 0px));
    right: calc(-1 * var(--sc-tx-pad, 0px));
    bottom: calc(-1 * var(--sc-tx-gap, 2px));
    height: var(--sc-tx-w, 3px);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7.5 C 20 3.5 34 8.5 52 5.5 C 68 2.8 84 6.8 98 4' stroke='%23000' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7.5 C 20 3.5 34 8.5 52 5.5 C 68 2.8 84 6.8 98 4' stroke='%23000' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The decoration is always painted behind the glyphs; d.pos is geometry only.
   A hand-drawn strike-through is the one shape that belongs in front. */
.sc-tx-d-marker,
.sc-tx-d-underline-hand,
.sc-tx-d-underline-brush,
.sc-tx-d-scribble,
.sc-tx-d-circle,
.sc-tx-d-ellipse,
.sc-tx-d-box {
    isolation: isolate;
}

.sc-tx-d-strike-hand::after {
    z-index: auto;
}

.sc-tx-d-marker::after {
    inset: calc(-1 * var(--sc-tx-pad, 2px));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C 14 2 30 4 46 3 C 64 2 82 5 99 3 L 98 36 C 80 39 62 36 44 37 C 28 38 14 36 2 38 Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C 14 2 30 4 46 3 C 64 2 82 5 99 3 L 98 36 C 80 39 62 36 44 37 C 28 38 14 36 2 38 Z' fill='%23000'/%3E%3C/svg%3E");
}

.sc-tx-d-circle::after,
.sc-tx-d-ellipse::after {
    inset: calc(-1 * var(--sc-tx-pad, 6px));
}

.sc-tx-d-circle::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cpath d='M72 5 C 48 -1 18 2 8 13 C -2 25 8 40 32 45 C 58 50 92 44 95 28 C 97 16 86 7 68 4' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cpath d='M72 5 C 48 -1 18 2 8 13 C -2 25 8 40 32 45 C 58 50 92 44 95 28 C 97 16 86 7 68 4' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sc-tx-d-ellipse::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cellipse cx='50' cy='25' rx='47' ry='22' stroke='%23000' stroke-width='2.6' fill='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cellipse cx='50' cy='25' rx='47' ry='22' stroke='%23000' stroke-width='2.6' fill='none'/%3E%3C/svg%3E");
}

.sc-tx-d-underline-brush::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 22 3 40 9.5 58 5 C 74 1.5 88 7.5 98 4' stroke='%23000' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 22 3 40 9.5 58 5 C 74 1.5 88 7.5 98 4' stroke='%23000' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sc-tx-d-scribble::after {
    inset: calc(-1 * var(--sc-tx-pad, 4px));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M4 30 C 26 8 58 6 96 13 C 72 25 34 22 6 33 C 40 40 74 31 97 25' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M4 30 C 26 8 58 6 96 13 C 72 25 34 22 6 33 C 40 40 74 31 97 25' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sc-tx-d-strike-hand::after {
    left: calc(-1 * var(--sc-tx-pad, 0px));
    right: calc(-1 * var(--sc-tx-pad, 0px));
    top: 50%;
    height: var(--sc-tx-w, 3px);
    transform: translateY(-50%) rotate(var(--sc-tx-rot, 0deg));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 26 3.5 52 7 76 4 C 86 2.8 93 5 98 4' stroke='%23000' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 26 3.5 52 7 76 4 C 86 2.8 93 5 98 4' stroke='%23000' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sc-tx-d-box::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    inset: calc(-1 * var(--sc-tx-pad, 4px));
    border: var(--sc-tx-w, 2px) solid var(--sc-tx-c, currentColor);
    border-radius: var(--sc-tx-r, 0px);
    opacity: var(--sc-tx-o, 1);
    transform: rotate(var(--sc-tx-rot, 0deg));
}

.sc-tx-pos-behind {
    isolation: isolate;
}

/** BOX BEHIND THE TEXT (b, v1.2) — runtime DOM of sc-text.js; the layers follow the radius object of the box **/
.sc-tx-b {
    isolation: isolate;
}

.sc-tx-bx {
    position: absolute;
    inset: calc(-1 * var(--sc-tx-bpad, 6px));
    z-index: -1;
    pointer-events: none;
}

.sc-tx-bl {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
}

.sc-tx-pos-behind::after {
    z-index: -1;
}

/** TEKSTANIMATIE **/
.sc-tx-a .sc-tx-u {
    display: inline-block;
    will-change: opacity, transform;
    transition-property: opacity, transform, clip-path;
    transition-duration: var(--sc-tx-spd, 600ms);
    transition-timing-function: var(--sc-tx-ease, ease);
}

.sc-tx-a-reveal .sc-tx-u {
    opacity: 0;
}

.sc-tx-a-rise .sc-tx-u {
    opacity: 0;
    transform: translateY(0.4em);
}

.sc-tx-a-mask .sc-tx-u {
    clip-path: inset(0 100% 0 0);
}

.sc-tx-played .sc-tx-u {
    opacity: 1;
    transform: none;
}

.sc-tx-a-mask.sc-tx-played .sc-tx-u {
    clip-path: inset(0 0 0 0);
}

/* a.type "draw": sc-text.js injects the decoration as a real <path> and
   animates stroke-dashoffset; the mask version is hidden while it does. */
.sc-tx-svg {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    z-index: -1;
    opacity: var(--sc-tx-o, 1);
    transform: rotate(var(--sc-tx-rot, 0deg));
}

.sc-tx-d-underline-hand > .sc-tx-svg,
.sc-tx-d-underline-brush > .sc-tx-svg {
    left: calc(-1 * var(--sc-tx-pad, 0px));
    right: calc(-1 * var(--sc-tx-pad, 0px));
    bottom: calc(-1 * var(--sc-tx-gap, 2px));
    height: var(--sc-tx-w, 3px);
}

.sc-tx-d-scribble > .sc-tx-svg {
    inset: calc(-1 * var(--sc-tx-pad, 4px));
}

.sc-tx-d-circle > .sc-tx-svg {
    inset: calc(-1 * var(--sc-tx-pad, 6px));
}

.sc-tx-d-strike-hand > .sc-tx-svg {
    left: calc(-1 * var(--sc-tx-pad, 0px));
    right: calc(-1 * var(--sc-tx-pad, 0px));
    top: 50%;
    height: var(--sc-tx-w, 3px);
    z-index: auto;
    transform: translateY(-50%) rotate(var(--sc-tx-rot, 0deg));
}

.sc-tx-drawn::after {
    display: none;
}

/** DYNAMISCHE TEKST **/
.sc-tx-dy .sc-tx-in {
    display: inline-grid;
    text-align: left;
    transition-property: opacity, transform, clip-path, filter;
    transition-duration: var(--sc-tx-dyspd, 400ms);
    transition-timing-function: ease;
}

/* Fixed size (missing dy.fit): the hidden ghosts and the visible line share
   one grid cell, so the cell is as wide and as high as the largest text. The
   line starts at the left, so the cursor stays behind the last typed letter. */
.sc-tx-gh,
.sc-tx-line {
    grid-area: 1 / 1;
    justify-self: start;
}

.sc-tx-gh {
    visibility: hidden;
}

.sc-tx-dy .sc-tx-txt {
    display: inline;
}

.sc-tx-dy-fx-fade .sc-tx-in.is-out {
    opacity: 0;
}

.sc-tx-dy-fx-slide .sc-tx-in.is-out {
    opacity: 0;
    transform: translateY(-0.35em);
}

.sc-tx-dy-fx-flip .sc-tx-in {
    transform-origin: center bottom;
}

.sc-tx-dy-fx-flip .sc-tx-in.is-out {
    opacity: 0;
    transform: rotateX(90deg);
}

.sc-tx-dy-fx-reveal .sc-tx-in.is-out {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
}

.sc-tx-dy-fx-morph .sc-tx-in.is-out {
    opacity: 0;
    filter: blur(6px);
    transform: scale(1.06);
}

.sc-tx-cursor {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 0.06em;
    vertical-align: -0.1em;
    background: currentColor;
    animation: sc-tx-blink 1s step-end infinite;
}

@keyframes sc-tx-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/** INTERACTIE **/
.sc-tx-h-color,
.sc-tx-h-lift {
    transition: color 0.2s ease, transform 0.2s ease;
}

.sc-tx-h-lift,
.sc-tx-h-sweep {
    display: inline-block;
}

.sc-tx-h-sweep {
    isolation: isolate;
}

.sc-tx-h-underline-draw::before,
.sc-tx-h-sweep::before {
    content: "";
    position: absolute;
    pointer-events: none;
    background: var(--sc-tx-hc, currentColor);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.sc-tx-h-underline-draw::before {
    left: 0;
    right: 0;
    bottom: -0.1em;
    height: 2px;
}

.sc-tx-h-sweep::before {
    inset: 0;
    z-index: -1;
}

body.no-touch .sc-tx-h-color:hover {
    color: var(--sc-tx-hc, currentColor);
}

body.no-touch .sc-tx-h-lift:hover {
    transform: translateY(-0.1em);
}

body.no-touch .sc-tx-h-underline-draw:hover::before,
body.no-touch .sc-tx-h-sweep:hover::before {
    transform: scaleX(1);
}

/** ZICHTBAARHEID PER APPARAAT — zelfde grenzen als base.css **/
@media screen and (min-width: 1025px) {
    .sc-tx-off-desktop {
        font-size: 1em;
        letter-spacing: normal;
        text-transform: none;
        background-image: none;
        -webkit-text-fill-color: currentColor;
    }

    .sc-tx-off-desktop.sc-tx-i {
        font-style: normal;
    }

    .sc-tx-off-desktop::before,
    .sc-tx-off-desktop::after {
        display: none !important;
    }

    .sc-tx-off-desktop .sc-tx-u {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .sc-tx-off-tablet-landscape {
        font-size: 1em;
        letter-spacing: normal;
        text-transform: none;
        background-image: none;
        -webkit-text-fill-color: currentColor;
    }

    .sc-tx-off-tablet-landscape.sc-tx-i {
        font-style: normal;
    }

    .sc-tx-off-tablet-landscape::before,
    .sc-tx-off-tablet-landscape::after {
        display: none !important;
    }

    .sc-tx-off-tablet-landscape .sc-tx-u {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .sc-tx-off-tablet-portrait {
        font-size: 1em;
        letter-spacing: normal;
        text-transform: none;
        background-image: none;
        -webkit-text-fill-color: currentColor;
    }

    .sc-tx-off-tablet-portrait.sc-tx-i {
        font-style: normal;
    }

    .sc-tx-off-tablet-portrait::before,
    .sc-tx-off-tablet-portrait::after {
        display: none !important;
    }

    .sc-tx-off-tablet-portrait .sc-tx-u {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}

@media screen and (max-width: 480px) {
    .sc-tx-off-mobile {
        font-size: 1em;
        letter-spacing: normal;
        text-transform: none;
        background-image: none;
        -webkit-text-fill-color: currentColor;
    }

    .sc-tx-off-mobile.sc-tx-i {
        font-style: normal;
    }

    .sc-tx-off-mobile::before,
    .sc-tx-off-mobile::after {
        display: none !important;
    }

    .sc-tx-off-mobile .sc-tx-u {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}

/** BEPERKTE BEWEGING **/
@media (prefers-reduced-motion: reduce) {
    .sc-tx .sc-tx-u {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    .sc-tx .sc-tx-in {
        transition: none !important;
    }

    .sc-tx-cursor {
        animation: none !important;
    }

    .sc-tx-h-underline-draw::before,
    .sc-tx-h-sweep::before {
        transition: none !important;
    }
}