/* ── Keyframes ──────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

@keyframes shimmer {
    from { background-position: -200% center; }
    to   { background-position:  200% center; }
}

/* ── Hero entrance ──────────────────────────────────────── */
.hero-eyebrow    { animation: fadeInUp 0.8s ease 0.15s both; }
.selection-frame { animation: fadeInUp 0.9s ease 0.30s both; }
.hero-sub        { animation: fadeInUp 0.8s ease 0.45s both; }
.hero-desc       { animation: fadeInUp 0.8s ease 0.55s both; }
.hero-btns       { animation: fadeInUp 0.8s ease 0.65s both; }

.figma-panel,
.figma-inspect,
.figma-colors  { opacity: 0; }          /* GSAP handles entrance */
.gsap-done     { animation: float 7s ease-in-out infinite !important; }
.hero-badge    { animation: fadeInUp 0.8s ease 1.1s both; }

.badge-pulse { animation: pulse 2.2s ease-in-out infinite; }

/* ── Scroll-reveal base ─────────────────────────────────── */
.anim-hidden {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.anim-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Component transitions ──────────────────────────────── */
.stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

.svc-card {
    transition: background 0.25s ease, transform 0.25s ease;
}

.svc-card:hover {
    transform: translateY(-3px);
}

/* ── Folder entrance animation ── */
@keyframes folderDrop {
    0%   { opacity: 0; transform: translateY(-18px) scale(0.94); }
    65%  { transform: translateY(5px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.folder.anim-visible {
    animation: folderDrop 0.58s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    transition: none;
}

.btn-nav,
.btn-primary,
.btn-ghost {
    transition: background 0.22s ease, color 0.22s ease,
                transform 0.22s ease, box-shadow 0.22s ease,
                border-color 0.22s ease;
}

/* ── Handle pulse on hover ──────────────────────────────── */
.selection-frame:hover .sh {
    animation: pulse 1.2s ease-in-out infinite;
}

/* ── Typewriter mode (JS adds class) ────────────────────── */
.hero-eyebrow.typing {
    opacity: 1;
    animation: none;
}

/* ── Scroll-driven section reveal delay helpers ─────────── */
.process-step:nth-child(2) .anim-hidden { transition-delay: 0.1s; }
.process-step:nth-child(3) .anim-hidden { transition-delay: 0.2s; }
.svc-card:nth-child(2)  { transition-delay: 0.08s; }
.svc-card:nth-child(3)  { transition-delay: 0.16s; }
.svc-card:nth-child(4)  { transition-delay: 0.24s; }