/**
 * ============================================================
 * DOMATEN Technology Stack
 * Animation Styles
 * Version: 1.0.0
 * ============================================================
 */


/* ============================================================
   TILE HOVER
============================================================ */

.domaten-tech-tile{

    will-change:transform, box-shadow;

}

.domaten-tech-tile:hover{

    transform:translateY(-6px);

    border-color:var(--dts-border-hover);

    box-shadow:var(--dts-shadow-hover);

}

.domaten-tech-tile:hover .domaten-tech-logo{

    transform:scale(1.06);

}


/* ============================================================
   ACTIVE (MOBILE TAP)
============================================================ */

.domaten-tech-tile:active{

    transform:scale(.97);

}


/* ============================================================
   GOLD SHINE EFFECT
============================================================ */

.domaten-tech-tile::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        115deg,

        transparent 25%,

        rgba(255,198,51,.12) 50%,

        transparent 75%

    );

    transform:translateX(-150%);

    transition:transform .8s ease;

    pointer-events:none;

}

.domaten-tech-tile:hover::before{

    transform:translateX(150%);

}


/* ============================================================
   SOFT GLOW
============================================================ */

.domaten-tech-tile::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

    radial-gradient(

        circle,

        rgba(255,198,51,.10),

        transparent 70%

    );

    opacity:0;

    transition:opacity .35s ease;

    z-index:0;

    pointer-events:none;

}

.domaten-tech-tile:hover::after{

    opacity:1;

}

.domaten-tech-logo{

    position:relative;

    z-index:2;

}


/* ============================================================
   LAZY REVEAL
============================================================ */

.domaten-tech-reveal{

    opacity:0;

    transform:translateY(28px);

    transition:

        opacity .65s ease,

        transform .65s ease;

}

.domaten-tech-reveal.is-visible{

    opacity:1;

    transform:translateY(0);

}


/* ============================================================
   ROW STAGGER
============================================================ */

.domaten-tech-row-1{

    transition-delay:.05s;

}

.domaten-tech-row-2{

    transition-delay:.15s;

}

.domaten-tech-row-3{

    transition-delay:.25s;

}

.domaten-tech-row-4{

    transition-delay:.35s;

}

.domaten-tech-row-5{

    transition-delay:.45s;

}

.domaten-tech-row-6{

    transition-delay:.55s;

}


/* ============================================================
   POPUP ANIMATION HELPERS
============================================================ */

.domaten-popup-opening{

    animation:dtsPopupOpen .38s ease forwards;

}

.domaten-popup-closing{

    animation:dtsPopupClose .28s ease forwards;

}


/* ============================================================
   KEYFRAMES
============================================================ */

@keyframes dtsPopupOpen{

    from{

        opacity:0;

        transform:translateY(24px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@keyframes dtsPopupClose{

    from{

        opacity:1;

        transform:translateY(0) scale(1);

    }

    to{

        opacity:0;

        transform:translateY(16px) scale(.96);

    }

}


/* ============================================================
   LOGO POP
============================================================ */

@keyframes dtsLogoPop{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

.domaten-tech-logo-pop{

    animation:dtsLogoPop .35s ease;

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    *{

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }

}