/* ==========================================================================
   Life Vogue – Bewegung für die Leistungskacheln (damen.php, herren.php)

   Einblenden: gleiche Technik und gleiches Skript wie die Startseite
   (js/index-motion.js setzt html.motion-on und die Klassen .is-visible/.is-done).
   Ohne JavaScript oder bei „Bewegung reduzieren" ist alles sofort sichtbar.

   Hover: ersetzt das bisherige ruckartige Vergrößern auf 120 % (style.css,
   .scale:hover, .transition 0,3 s linear) durch eine weiche Bewegung.
   Der Ruhezustand der Kacheln bleibt unverändert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Einblenden beim Scrollen (wie css/index-motion.css, Abschnitt 1)
   -------------------------------------------------------------------------- */
.motion-on [data-reveal]:not(.is-done) {
    opacity: 0;
    transform: translateY(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. Hover – nur mit Maus; die ganze Kachel reagiert, nicht nur das Bild
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .wt-icon-box-wraper .wt-icon-box-sm.scale {
        transition: transform .5s cubic-bezier(.2, .65, .3, 1),
                    border-color .4s ease;
    }

    /* höhere Spezifität als .scale:hover aus style.css */
    .wt-icon-box-wraper:hover .wt-icon-box-sm.scale {
        transform: scale(1.1);
        border-color: #000;
        animation: lv-ring .9s ease-out;
    }

    .wt-icon-box-wraper .site-button .fa-angle-double-right {
        transition: transform .4s cubic-bezier(.2, .65, .3, 1);
    }

    .wt-icon-box-wraper:hover .site-button .fa-angle-double-right {
        transform: translateX(4px);
    }
}

/* heller Ring, der einmal vom Rahmen nach außen läuft und verblasst */
@keyframes lv-ring {
    from { box-shadow: 0 0 0 0 rgba(105, 105, 105, .45); }
    to   { box-shadow: 0 0 0 14px rgba(105, 105, 105, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .wt-icon-box-wraper .wt-icon-box-sm.scale,
    .wt-icon-box-wraper .site-button .fa-angle-double-right {
        transition: none;
        animation: none;
    }
}