/**
 * Kayan Smart — Animations
 *
 * Lightweight CSS animations using transforms + opacity for 60fps performance.
 * The actual reveal trigger is in animations.js (IntersectionObserver).
 */

/* ============================================================
 *  Scroll-reveal base — invisible until JS adds .is-visible
 * ============================================================ */
[data-animate] {
    opacity: 0;
    transition: opacity .8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform .8s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-down"]  { transform: translateY(-40px); }
[data-animate="fade-left"]  { transform: translateX(40px); }
[data-animate="fade-right"] { transform: translateX(-40px); }
[data-animate="zoom-in"]    { transform: scale(0.92); }
[data-animate="fade"]       { transform: none; }

[data-animate].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Staggered delays */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }

/* ============================================================
 *  Hero entrance — runs immediately on page load (not scroll-based)
 * ============================================================ */
.hero-eyebrow,
.hero-title,
.hero-sub,
.hero-cta,
.hero-brand {
    opacity: 0;
    transform: translateY(30px);
    animation: ks-hero-in 0.9s forwards cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-eyebrow { animation-delay: 0.15s; }
.hero-title   { animation-delay: 0.3s; }
.hero-sub     { animation-delay: 0.5s; }
.hero-cta     { animation-delay: 0.7s; }
.hero-brand   { animation-delay: 0.9s; }
@keyframes ks-hero-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 *  Mobile drawer link stagger
 * ============================================================ */
.mobile-drawer.is-open .mobile-menu li {
    animation: ks-fade-in-up .4s both;
}
.mobile-drawer.is-open .mobile-menu li:nth-child(1) { animation-delay: .05s; }
.mobile-drawer.is-open .mobile-menu li:nth-child(2) { animation-delay: .1s; }
.mobile-drawer.is-open .mobile-menu li:nth-child(3) { animation-delay: .15s; }
.mobile-drawer.is-open .mobile-menu li:nth-child(4) { animation-delay: .2s; }
.mobile-drawer.is-open .mobile-menu li:nth-child(5) { animation-delay: .25s; }
.mobile-drawer.is-open .mobile-menu li:nth-child(n+6) { animation-delay: .3s; }
@keyframes ks-fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 *  Button shine sweep on hover
 * ============================================================ */
.ks-btn-primary { position: relative; overflow: hidden; }
.ks-btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.ks-btn-primary:hover::after { animation: ks-shine 0.8s ease-out; }
@keyframes ks-shine {
    0%   { transform: translateX(-100%) skewX(-20deg); }
    100% { transform: translateX(450%) skewX(-20deg); }
}

/* ============================================================
 *  Counter — Inter, tabular numerals so digits don't jitter
 * ============================================================ */
.stat-counter, .stat-prefix {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-family: var(--ks-font-en);
}

/* Will-change hints for smooth hovers */
.service-card, .project-card, .blog-card, .stat-card, .testimonial-card {
    will-change: transform;
}