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

/* ============================================================
   CSS VARIABLES
============================================================ */

:root{

    --dts-black:#0B0B0B;
    --dts-card:#151515;
    --dts-border:#232323;
    --dts-border-hover:#D0A54B;

    --dts-text:#FFFFFF;
    --dts-text-muted:#A8A8A8;

    --dts-gold:#D0A54B;

    --dts-radius:20px;

    --dts-shadow:none;

    --dts-shadow-hover:
        0 0 0 1px rgba(255,198,51,.35),
        0 12px 30px rgba(255,198,51,.12);

    --dts-transition:.35s cubic-bezier(.4,.2,.2,1);

    --dts-max-width:1320px;

}

.domaten-tech-wrapper{
    font-family:"Open Sans", sans-serif;
}

/* ============================================================
   SECTION
============================================================ */

.domaten-tech-stack{

    position:relative;

    width:100%;

    padding:90px 24px;

    background:transparent;

    overflow:hidden;

}


.domaten-tech-stack__container{

    width:100%;

    max-width:var(--dts-max-width);

    margin:0 auto;

}


/* ============================================================
   HEADER
============================================================ */

.domaten-tech-heading{

    margin-bottom:56px;

}

.domaten-tech-badge{

    display:inline-block;

    color:#D0A54B;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:14px;

}

.domaten-tech-heading h2{

    margin:0 0 20px;

    color:#FFFFFF;

    font-size:clamp(2rem,3vw,2.8rem);

    font-weight:700;

    line-height:1.15;

    letter-spacing:-0.03em;

    max-width:680px;

}

.domaten-tech-heading p{

    max-width:640px;

    color:#B7B7B7;

    font-size:1rem;

    font-weight:400;

    line-height:1.75;

}


/* ============================================================
   GRID
============================================================ */

.domaten-tech-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:26px;

    margin-top:60px;

}


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

.domaten-tech-tile{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    aspect-ratio:1/1;

    width:110px;
    height:110px;

    min-height:110px;

    padding:20px;

    border-radius:50% !important;

    background:var(--dts-card);

    border:1px solid var(--dts-border);

    cursor:pointer;

    transition:
        transform var(--dts-transition),
        border-color var(--dts-transition),
        box-shadow var(--dts-transition),
        background var(--dts-transition);

    overflow:hidden;

}


/* ============================================================
   CARD
============================================================ */

.domaten-tech-card{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}

.domaten-tech-open{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:none;
    border:0;
    padding:0;
    cursor:pointer;

}


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

.domaten-tech-logo{

    display:block;

    width:100%;

    max-width:58px;

    max-height:58px;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

    transition:
        transform var(--dts-transition),
        opacity var(--dts-transition),
        filter var(--dts-transition);

}


/* ============================================================
   FOCUS ACCESSIBILITY
============================================================ */

.domaten-tech-tile:focus-visible{

    outline:none;

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

    box-shadow:
        0 0 0 3px rgba(255,198,51,.35);

}


/* ============================================================
   LOADING STATE
============================================================ */

.domaten-tech-loading{

    opacity:.65;

    pointer-events:none;

}


/* ============================================================
   EMPTY STATE
============================================================ */

.domaten-tech-empty{

    width:100%;

    padding:70px 24px;

    text-align:center;

    border:1px dashed rgba(255,255,255,.12);

    border-radius:22px;

    color:var(--dts-text-muted);

}


/* ============================================================
   UTILITIES
============================================================ */

.dts-hidden{

    display:none!important;

}

.dts-text-center{

    text-align:center;

}


/* ============================================================
   CLICK / TAP HELPER
============================================================ */

.domaten-tech-helper{

    display:block;

    width:100%;

    margin:48px auto 0;

    text-align:center;

    font-family:'Open Sans',sans-serif;

    font-size:0.95rem;

    font-weight:600;

    color:#F3E7D1;

    letter-spacing:.02em;

    line-height:1.7;

}

.domaten-tech-helper span{

    color:#D0A54B;

    margin-right:6px;

    display:inline-block;

    animation:domatenFingerBounce 1.8s ease-in-out infinite;

}

@keyframes domatenFingerBounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

}


/* ============================================================
   OVERRIDE ELEMENTOR BUTTON STYLES
============================================================ */

.domaten-tech-card .domaten-tech-open,
.elementor .domaten-tech-card .domaten-tech-open{

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    height:100% !important;

    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
    background-image:none !important;

    border:none !important;
    border-radius:0 !important;

    box-shadow:none !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    cursor:pointer;
}

.domaten-tech-card .domaten-tech-open:hover,
.domaten-tech-card .domaten-tech-open:focus,
.domaten-tech-card .domaten-tech-open:active{

    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    outline:none !important;

}

.domaten-tech-card .domaten-tech-open img{

    display:block !important;

    width:70px !important;
    height:70px !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;

    background:transparent !important;
}