/* ==========================================================================
   Life Vogue – dezente Bewegung für die Startseite (nur index.php)

   Alle Regeln, die etwas verstecken oder bewegen, greifen ausschließlich unter
   html.motion-on. Diese Klasse setzt js/index-motion.js – und nur dann, wenn
   der Browser es kann und der Besucher keine reduzierte Bewegung wünscht.
   Ohne JavaScript ist damit alles sofort sichtbar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Einblenden beim Scrollen
   Nach Abschluss setzt das Skript .is-done – ab dann gilt wieder allein das
   Template (wichtig für die Hover-Übergänge der Buttons).
   -------------------------------------------------------------------------- */
.motion-on [data-reveal]:not(.is-done) {
    opacity: 0;
    transform: translateY(30px);
}

.motion-on [data-reveal="left"]:not(.is-done) {
    transform: translateX(-30px);
}

.motion-on [data-reveal].is-visible:not(.is-done) {
    opacity: 1;
    transform: none;
    transition: opacity .8s ease-out, transform .8s cubic-bezier(.2, .65, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Zahlen-Leiste
   Aufbau wie die Seitenbanner: Bild + .overlay-main.bg-black.opacity-07
   -------------------------------------------------------------------------- */
.motion-counter {
    background-color: #333;
    background-image: url(../images/background/bg-8.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* entsättigt, passend zu den Schwarz-Weiß-Bannern der Seite */
    background-blend-mode: luminosity;
}

/* Parallax-Gefühl nur mit Maus – iOS ignoriert "fixed" ohnehin */
@media (hover: hover) and (pointer: fine) {
    .motion-counter {
        background-attachment: fixed;
    }
}

.motion-counter__num {
    display: block;
    color: #fff;
    font-size: 46px;
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: 1px;
    white-space: nowrap;
}

.motion-counter__label {
    display: block;
    margin-top: 10px;
    color: #d3d3d3;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .motion-counter__item {
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .motion-counter__num {
        font-size: 36px;
    }

    .motion-counter__label {
        font-size: 11px;
        letter-spacing: 1px;
    }
}

/* --------------------------------------------------------------------------
   3. Hover auf den Leistungsbildern
   Geclippt wird am <a>, NICHT an .circle-effect-1: dessen ::before/::after
   sind die vorhandenen Ringe hinter dem Bild (style.css), die beim Hover
   wandern und nicht abgeschnitten werden dürfen.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .our-services-index .circle-effect-1 > a {
        display: block;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        /* Safari: sonst ignoriert overflow:hidden den Radius bei transform */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    .our-services-index .circle-effect-1 > a img {
        transition: transform .8s cubic-bezier(.2, .65, .3, 1);
    }

    .our-services-index .circle-effect-1:hover > a img {
        transform: scale(1.08);
    }

    .our-services-index .circle-effect-1 > a::after {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: linear-gradient(100deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, .35) 50%,
                rgba(255, 255, 255, 0) 100%);
        transform: skewX(-20deg);
        pointer-events: none;
    }

    .our-services-index .circle-effect-1:hover > a::after {
        animation: lv-shine .9s ease-out;
    }
}

@keyframes lv-shine {
    from { left: -75%; }
    to   { left: 125%; }
}

/* --------------------------------------------------------------------------
   4. Herz-Puls und wachsende Trennlinien
   -------------------------------------------------------------------------- */
.motion-on .wt-separator.style-icon .fa-heart {
    animation: lv-heartbeat 2.4s ease-in-out infinite;
}

@keyframes lv-heartbeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.18); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.12); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
}

.motion-on [data-reveal] .wt-separator .separator-left,
.motion-on [data-reveal] .wt-separator .separator-right {
    transition: transform .9s cubic-bezier(.2, .65, .3, 1) .25s;
}

.motion-on [data-reveal] .wt-separator .separator-left {
    transform-origin: right center;
}

.motion-on [data-reveal] .wt-separator .separator-right {
    transform-origin: left center;
}

.motion-on [data-reveal]:not(.is-visible) .wt-separator .separator-left,
.motion-on [data-reveal]:not(.is-visible) .wt-separator .separator-right {
    transform: scaleX(0);
}

/* --------------------------------------------------------------------------
   5. Angebots-Block „Mein Angebot": keine weißen Ecken am Bogen
   Der weiße Kasten war ein Rechteck bis zur Seitenmitte und verdeckte das
   Bild in den Ecken ober- und unterhalb des Bogens. Das Weiß endet jetzt
   dort, wo die Rundung beginnt; dahinter ist das Bild zu sehen.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Bild reicht immer bis unter den Bogen: mindestens ~60 % der Breite,
       sonst wie bisher volle Höhe. Ohne max()-Unterstützung bleibt es beim Template. */
    .special-offer-block {
        background-size: auto max(100%, 25.5vw);
        background-position: right center;
    }
}

/* Ab 1201 px beginnt die Rundung bei 85 % der Kastenbreite
   (Bogen: right:-10 %, width:50 %, Radius 50 % – style.css).
   Bis 1200 px verschiebt das Template den Bogen, dort gibt es keine Ecken. */
@media (min-width: 1201px) {
    .special-offer-outer.bg-white {
        background-color: transparent;
    }

    .special-offer-outer::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 15%;
        background-color: #fff;
        z-index: -1;
    }
}