/*
 * Refine Medical Aesthetics – professionelle Texteffekte
 * Ergänzung zu assets/css/site.css
 * Version 1.0.0
 */

:root {
    --refine-motion-duration: 820ms;
    --refine-motion-duration-fast: 620ms;
    --refine-motion-delay: 0ms;
    --refine-motion-distance: 30px;
    --refine-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Die Ausgangszustände greifen erst, nachdem JavaScript erfolgreich
 * initialisiert wurde. Dadurch bleiben Texte auch bei deaktiviertem oder
 * fehlerhaftem JavaScript immer sichtbar.
 */
html.refine-motion-ready .refine-motion-item {
    opacity: 0;
    transition:
        opacity var(--refine-item-duration, var(--refine-motion-duration)) var(--refine-motion-ease),
        transform var(--refine-item-duration, var(--refine-motion-duration)) var(--refine-motion-ease),
        clip-path var(--refine-item-duration, var(--refine-motion-duration)) var(--refine-motion-ease),
        filter var(--refine-item-duration, var(--refine-motion-duration)) var(--refine-motion-ease);
    transition-delay: var(--refine-item-delay, var(--refine-motion-delay));
    will-change: opacity, transform;
    backface-visibility: hidden;
}

html.refine-motion-ready .refine-motion-item[data-refine-motion="fade-up"] {
    transform: translate3d(0, var(--refine-item-distance, var(--refine-motion-distance)), 0);
}

html.refine-motion-ready .refine-motion-item[data-refine-motion="fade-in"] {
    transform: none;
}

html.refine-motion-ready .refine-motion-item[data-refine-motion="pop-up"] {
    transform: translate3d(0, 18px, 0) scale(0.975);
    filter: blur(2px);
}

html.refine-motion-ready .refine-motion-item[data-refine-motion="clip-up"] {
    opacity: 1;
    transform: translate3d(0, 22px, 0);
    clip-path: inset(0 0 100% 0);
}

html.refine-motion-ready .refine-motion-item[data-refine-motion="slide-left"] {
    transform: translate3d(36px, 0, 0);
}

html.refine-motion-ready .refine-motion-item[data-refine-motion="slide-right"] {
    transform: translate3d(-36px, 0, 0);
}

html.refine-motion-ready .refine-motion-item.is-refine-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    clip-path: inset(0 0 0 0);
    filter: none;
    will-change: auto;
}

/* Der Hero darf etwas präsenter erscheinen, bleibt aber bewusst ruhig. */
html.refine-motion-ready .refine-motion-hero.refine-motion-item {
    --refine-item-duration: 920ms;
}

/*
 * Behandlungskarten: Original-inspirierter Hover-Effekt.
 * Er wird nur auf Geräten mit echtem Hover aktiviert und verändert Mobile nicht.
 */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    [data-refine-motion-card],
    .treatment-card,
    .service-card,
    .treatment-tile,
    .service-tile {
        isolation: isolate;
    }

    [data-refine-motion-card] [data-refine-card-title],
    [data-refine-motion-card] [data-refine-card-action],
    .treatment-card .card-title,
    .treatment-card .card-action,
    .service-card .card-title,
    .service-card .card-action,
    .treatment-tile .card-title,
    .treatment-tile .card-action,
    .service-tile .card-title,
    .service-tile .card-action {
        transition:
            opacity 460ms var(--refine-motion-ease),
            transform 460ms var(--refine-motion-ease);
    }

    [data-refine-motion-card] [data-refine-card-title],
    .treatment-card .card-title,
    .service-card .card-title,
    .treatment-tile .card-title,
    .service-tile .card-title {
        transform: translate3d(0, 22px, 0);
    }

    [data-refine-motion-card] [data-refine-card-action],
    .treatment-card .card-action,
    .service-card .card-action,
    .treatment-tile .card-action,
    .service-tile .card-action {
        opacity: 0;
        transform: translate3d(0, 34px, 0);
    }

    [data-refine-motion-card]:hover [data-refine-card-title],
    [data-refine-motion-card]:focus-within [data-refine-card-title],
    [data-refine-motion-card]:hover [data-refine-card-action],
    [data-refine-motion-card]:focus-within [data-refine-card-action],
    .treatment-card:hover .card-title,
    .treatment-card:focus-within .card-title,
    .treatment-card:hover .card-action,
    .treatment-card:focus-within .card-action,
    .service-card:hover .card-title,
    .service-card:focus-within .card-title,
    .service-card:hover .card-action,
    .service-card:focus-within .card-action,
    .treatment-tile:hover .card-title,
    .treatment-tile:focus-within .card-title,
    .treatment-tile:hover .card-action,
    .treatment-tile:focus-within .card-action,
    .service-tile:hover .card-title,
    .service-tile:focus-within .card-title,
    .service-tile:hover .card-action,
    .service-tile:focus-within .card-action {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Auf kleinen Displays bleiben Layout und Positionen unangetastet. */
@media (max-width: 768px) {
    :root {
        --refine-motion-duration: 660ms;
        --refine-motion-duration-fast: 520ms;
        --refine-motion-distance: 16px;
    }

    html.refine-motion-ready .refine-motion-hero.refine-motion-item {
        --refine-item-duration: 720ms;
    }

    html.refine-motion-ready .refine-motion-item[data-refine-motion="pop-up"] {
        transform: translate3d(0, 10px, 0) scale(0.988);
        filter: none;
    }

    html.refine-motion-ready .refine-motion-item[data-refine-motion="slide-left"],
    html.refine-motion-ready .refine-motion-item[data-refine-motion="slide-right"] {
        transform: translate3d(0, 14px, 0);
    }
}

/* Barrierefreiheit: keine Bewegung bei entsprechender Systemeinstellung. */
@media (prefers-reduced-motion: reduce) {
    html.refine-motion-ready .refine-motion-item,
    html.refine-motion-ready .refine-motion-item.is-refine-visible,
    [data-refine-motion-card] *,
    .treatment-card *,
    .service-card *,
    .treatment-tile *,
    .service-tile * {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
}