/*
====================================================================

Effects

Reusable visual effects for Deneb Dent components.

====================================================================
*/


/*
 * «Наш блик» — фирменный диагональный блик при наведении. Общий эффект
 * проекта, используется во многих местах: карточки CTA, фото About и т.д.
 * Вешается классом .dd-hover-shine на любой элемент с overflow.
 */
.dd-hover-shine {
    position: relative;
    overflow: hidden;
}

.dd-hover-shine::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    display: block;
    width: 50%;
    height: 100%;

    content: "";
    opacity: 0;
    pointer-events: none;

    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .3) 100%
    );
    transform: skewX(-25deg);
}

.dd-hover-shine:hover::after,
.dd-hover-shine:focus-within::after {
    opacity: 1;
    animation: dd-shine 1s;
}

@keyframes dd-shine {
    100% {
        left: 125%;
    }
}


/* ================================================================
   Reveal - анимации первого показа (движок: assets/js/reveal.js)

   Эффекты сняты с референса: About и FAQ вылетают половинками с
   боков (zoomInLeft/zoomInRight), карусели врачей и документов -
   из глубины (zoomIn). Для карточек услуг - свой эффект: подъём с
   лёгким наклоном из плоскости, каскадом (stagger).

   Скрытие активно только при работающем JS (html.dd-reveal-js).
   ================================================================ */

.dd-reveal-js .dd-reveal {
    opacity: 0;
    transition:
        opacity .8s cubic-bezier(.16, 1, .3, 1),
        transform .8s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

.dd-reveal-js .dd-reveal--zoom-left {
    transform: translateX(-56px) scale(.92);
}

.dd-reveal-js .dd-reveal--zoom-right {
    transform: translateX(56px) scale(.92);
}

.dd-reveal-js .dd-reveal--depth {
    transform: scale(.8);
}

/* Перспектива для 3D-наклона карточек. */
.dd-reveal-js [data-dd-reveal-stagger] {
    perspective: 1100px;
}

.dd-reveal-js .dd-reveal--card {
    transform: translateY(44px) rotateX(-12deg) scale(.95);
    transform-origin: center bottom;
}

.dd-reveal-js .dd-reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .dd-reveal-js .dd-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

}