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

.highlights {
    display: flex;
    flex-wrap: wrap;

    gap: var(--na-gap-md);
}


/* =========================================================
   ITEM
   ========================================================= */

.highlight-item {
    flex: 1 1 200px;
}

.highlight-item h2 {
    margin: 0 0 8px;

    font-size: 1.2rem;
}

.highlight-item p {
    margin: 0;

    font-size: 0.95rem;
}


/* =========================================================
   ICON SLOT
   ========================================================= */

.highlight-icon,
[class^="highlight-icon--"],
[class*=" highlight-icon--"] {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 56px;

    margin: 0 auto 12px;
}

.highlight-icon {
    font-size: 2rem;
}


/* =========================================================
   GEARS ICON
   ========================================================= */

.highlight-icon--gears {
    position: relative;

    width: 48px;
    height: 56px;
}

.highlight-icon--gears .gear {
    position: absolute;
}

.highlight-icon--gears .gear svg {
    display: block;

    width: 100%;
    height: 100%;

    transform-box: fill-box;
    transform-origin: center;
}

.highlight-icon--gears .gear--big {
    width: 90%;
    height: 90%;

    top: 0;
    left: -3%;

    transform: rotate(5deg);
    transform-origin: center;
}

.highlight-icon--gears .gear--small {
    width: 60%;
    height: 60%;

    right: -12px;
    bottom: -8px;

    transform: rotate(-16deg);
    transform-origin: center;
}

.na-box:hover .highlight-icon--gears .gear--big svg {
    animation: na-gear-spin 1.2s linear infinite;
}

.na-box:hover .highlight-icon--gears .gear--small svg {
    animation: na-gear-spin-rev 0.9s linear infinite;
}

@keyframes na-gear-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes na-gear-spin-rev {
    to {
        transform: rotate(-360deg);
    }
}


/* =========================================================
   INSIGHTS ICON
   ========================================================= */

.highlight-icon--insights {
    width: 72px;
    height: 56px;
}

.highlight-icon--insights svg {
    display: block;

    width: 100%;
    height: 100%;
}

.highlight-icon--insights .insights-line,
.highlight-icon--insights .insights-lens {
    fill: none;

    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.highlight-icon--insights .insights-dot {
    fill: currentColor;
}

.highlight-icon--insights .insights-line--zoom,
.highlight-icon--insights .insights-lens {
    stroke-width: 3.6;
}

.highlight-icon--insights .insights-base .insights-line,
.highlight-icon--insights .insights-base .insights-dot {
    opacity: 0.5;
}

.highlight-icon--insights .insights-scroll {
    transform: translateX(-5px);
}

@keyframes na-insights-scroll {
    to {
        transform: translateX(-69px);
    }
}

.na-box:hover .highlight-icon--insights .insights-scroll {
    animation: na-insights-scroll 1.8s linear infinite;
}


/* =========================================================
   TEACHING ICON
   ========================================================= */

.highlight-icon--teaching {
    width: 56px;
    height: 56px;
}

.highlight-icon--teaching svg {
    display: block;

    width: 100%;
    height: 100%;
}

.highlight-icon--teaching .teach-rays {
    opacity: 1;
}

@keyframes na-teach-rays-flicker {
    0% {
        opacity: 1;
    }

    40%,
    70% {
        opacity: 0;
    }

    71%,
    100% {
        opacity: 1;
    }
}

.na-box:hover .highlight-icon--teaching .teach-rays {
    animation: na-teach-rays-flicker 2.6s ease-out infinite;
}


/* =========================================================
   HUMAN ICON
   ========================================================= */

.highlight-icon--human {
    width: 56px;
    height: 56px;
}

.highlight-icon--human svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: currentColor;

    transform: rotate(45deg);
}

@keyframes na-handshake-shake {
    0% {
        transform: rotate(0deg) scale(1);
    }

    20% {
        transform: rotate(-3deg) scale(1.04);
    }

    40% {
        transform: rotate(3deg) scale(1.02);
    }

    60% {
        transform: rotate(-2deg) scale(1.03);
    }

    80% {
        transform: rotate(2deg) scale(1.01);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

.na-box:hover .highlight-icon--human .handshake {
    animation: na-handshake-shake 1.2s ease-in-out infinite;

    transform-origin: 50% 50%;
    transform-box: fill-box;
}


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

@media (prefers-reduced-motion: reduce) {
    .na-box:hover .highlight-icon--gears .gear--big svg,
    .na-box:hover .highlight-icon--gears .gear--small svg,
    .na-box:hover .highlight-icon--insights .insights-scroll,
    .na-box:hover .highlight-icon--teaching .teach-rays,
    .na-box:hover .highlight-icon--human .handshake {
        animation: none;
    }
}