/* ─────────────────────────────────────────────────────────────
   animations.css — Subtle motion layer for the directory shell.
   Loaded after directory-shell.css. All animations respect
   prefers-reduced-motion.
   ───────────────────────────────────────────────────────────── */

/* ─── Easing tokens ──────────────────────────────────────────── */
:root {
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Keyframes ──────────────────────────────────────────────── */
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bar-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ─── Hero / page-context entrance (staggered) ───────────────── */

.hero-copy-block .atlas-label,
.page-context-copy .atlas-label {
    animation: fade-up 0.45s var(--ease-out-quint) both;
    animation-delay: 0.05s;
}

.hero-copy-block h1,
.page-context-copy h1 {
    animation: fade-up 0.5s var(--ease-out-quint) both;
    animation-delay: 0.1s;
}

.hero-copy-block > p,
.page-context-copy > p {
    animation: fade-up 0.45s var(--ease-out-quint) both;
    animation-delay: 0.18s;
}

.hero-copy-block .summary-stack,
.page-context-copy .summary-stack,
.page-context-copy .city-hero-stats {
    animation: fade-up 0.45s var(--ease-out-quint) both;
    animation-delay: 0.24s;
}

.hero-copy-block .hero-actions,
.page-context-copy .hero-actions {
    animation: fade-up 0.45s var(--ease-out-quint) both;
    animation-delay: 0.3s;
}

.hero-panel {
    animation: fade-up 0.55s var(--ease-out-quint) both;
    animation-delay: 0.15s;
}

/* ─── Stats strip stagger ────────────────────────────────────── */
.toned-block .metric-chip:nth-child(1) { animation: fade-up 0.4s var(--ease-out-quint) both 0.05s; }
.toned-block .metric-chip:nth-child(2) { animation: fade-up 0.4s var(--ease-out-quint) both 0.10s; }
.toned-block .metric-chip:nth-child(3) { animation: fade-up 0.4s var(--ease-out-quint) both 0.15s; }
.toned-block .metric-chip:nth-child(4) { animation: fade-up 0.4s var(--ease-out-quint) both 0.20s; }

/* ─── Breadcrumbs ────────────────────────────────────────────── */
.breadcrumbs {
    animation: fade-in 0.35s ease both 0.28s;
}

/* ─── Section headings ───────────────────────────────────────── */
.section-block .section-heading {
    animation: fade-up 0.45s var(--ease-out-quint) both 0.08s;
}

/* ─── Business card list stagger ─────────────────────────────── */
.business-card {
    animation: fade-up 0.4s var(--ease-out-quint) both;
}
.business-card:nth-child(1)   { animation-delay: 0.04s; }
.business-card:nth-child(2)   { animation-delay: 0.08s; }
.business-card:nth-child(3)   { animation-delay: 0.12s; }
.business-card:nth-child(4)   { animation-delay: 0.16s; }
.business-card:nth-child(5)   { animation-delay: 0.20s; }
.business-card:nth-child(6)   { animation-delay: 0.23s; }
.business-card:nth-child(7)   { animation-delay: 0.26s; }
.business-card:nth-child(8)   { animation-delay: 0.28s; }
.business-card:nth-child(n+9) { animation-delay: 0.30s; }

/* ─── Business card hover: improved easing ───────────────────── */
.business-card {
    transition:
        box-shadow 0.2s var(--ease-out-quart),
        transform  0.2s var(--ease-out-quart);
}
.business-card:hover {
    transform: translateY(-2px);
}

/* ─── Button polish ──────────────────────────────────────────── */
.button {
    transition:
        background    0.15s var(--ease-out-quart),
        color         0.15s var(--ease-out-quart),
        border-color  0.15s var(--ease-out-quart),
        transform     0.15s var(--ease-out-quart),
        box-shadow    0.15s var(--ease-out-quart);
}
.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
    transition-duration: 0.07s;
}

/* ─── Feature cards: lift on hover ──────────────────────────── */
.principle-card,
.step-card,
.guide-card,
.trust-card {
    transition:
        border-color  0.15s var(--ease-out-quart),
        box-shadow    0.2s  var(--ease-out-quart),
        transform     0.2s  var(--ease-out-quart);
}
.principle-card:hover,
.step-card:hover,
.guide-card:hover,
.trust-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* ─── Cloud tags: add lift ───────────────────────────────────── */
.city-cloud-tag,
.departement-cloud-tag,
.footer-city-link {
    transition:
        background   0.15s var(--ease-out-quart),
        border-color 0.15s var(--ease-out-quart),
        color        0.15s var(--ease-out-quart),
        transform    0.15s var(--ease-out-quart);
}
.city-cloud-tag:hover,
.departement-cloud-tag:hover,
.footer-city-link:hover {
    transform: translateY(-1px);
}

/* ─── Toggle / category pills ────────────────────────────────── */
.toggle-pill,
.category-pill {
    transition:
        background   0.12s var(--ease-out-quart),
        border-color 0.12s var(--ease-out-quart),
        transform    0.12s var(--ease-out-quart);
}
.toggle-pill:active,
.category-pill:active {
    transform: scale(0.96);
    transition-duration: 0.07s;
}

/* ─── Search result links: left-border highlight on hover ────── */
.search-result-link {
    transition:
        background   0.12s ease,
        box-shadow   0.12s ease;
}
.search-result-link:hover {
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ─── Score bars: grow in from left ─────────────────────────── */
.real-talk-score-bar {
    transform-origin: left center;
    animation: bar-grow 0.65s var(--ease-out-quart) both;
    animation-delay: 0.5s;
}

/* ─── Profile page: section stagger ─────────────────────────── */
.profile-sections .profile-section:nth-child(1),
.profile-sections .section:nth-child(1) {
    animation: fade-up 0.4s var(--ease-out-quint) both 0.08s;
}
.profile-sections .profile-section:nth-child(2),
.profile-sections .section:nth-child(2) {
    animation: fade-up 0.4s var(--ease-out-quint) both 0.16s;
}
.profile-sections .profile-section:nth-child(3),
.profile-sections .section:nth-child(3) {
    animation: fade-up 0.4s var(--ease-out-quint) both 0.22s;
}
.profile-sections .profile-section:nth-child(n+4),
.profile-sections .section:nth-child(n+4) {
    animation: fade-up 0.4s var(--ease-out-quint) both 0.26s;
}

/* Sidebar panels */
.sidebar-column .profile-panel:nth-child(1) { animation: fade-up 0.4s var(--ease-out-quint) both 0.18s; }
.sidebar-column .profile-panel:nth-child(2) { animation: fade-up 0.4s var(--ease-out-quint) both 0.26s; }
.sidebar-column .profile-panel:nth-child(3) { animation: fade-up 0.4s var(--ease-out-quint) both 0.32s; }

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:         0.01ms !important;
        animation-iteration-count:  1      !important;
        transition-duration:        0.01ms !important;
        animation-delay:            0s     !important;
    }
}