/* ========== Scroll Reveal ========== */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========== Button hover micro-interaction ========== */
.btn:active { transform: scale(0.97); }

/* ========== Card lift ========== */
.service-card, .work-item, .case-card, .info-card {
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.service-card:hover, .work-item:hover, .case-card:hover, .info-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* ========== Navigation underline ========== */
.nav-links a { position: relative; }
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-white);
    transition: width 0.3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* ========== Hamburger animation ========== */
.hamburger.open .line:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open .line:nth-child(2) { opacity: 0; }
.hamburger.open .line:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ========== Smooth section entrance (for JS) ========== */
.fade-in { animation: fadeIn 0.8s var(--ease) both; }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}