/* ============================================================
   Talpie Smart Home — Transitions & Loading FX
   Iter 8 Hotfix 3 · talpie-transitions.css
   ============================================================ */

/* ── 1. KEYFRAMES ─────────────────────────────────────────── */

@keyframes tsh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes tsh-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes tsh-slide-up-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tsh-slide-up-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes tsh-slide-right-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes tsh-scale-in {
    from { opacity: 0; transform: scale(.965); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes tsh-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
@keyframes tsh-pulse-subtle {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}
@keyframes tsh-toast-in {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes tsh-toast-out {
    from { opacity: 1; transform: translateY(0)    scale(1)   translateX(0); max-height: 80px; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px; }
    to   { opacity: 0; transform: translateY(4px)  scale(.96) translateX(18px); max-height: 0;  margin-bottom: -10px; padding-top: 0; padding-bottom: 0; }
}
@keyframes tsh-nav-item-in {
    from { opacity: 0; transform: translateX(-7px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes tsh-topbar-update {
    0%   { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes tsh-summary-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes tsh-tab-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}



.tsh-topbar {
    position: relative;
}

.tsh-skeleton-gap-top {
    margin-top: 4px;
}

/* ── 2. PAGE ROOT — exit / enter ──────────────────────────── */

[data-tsh-page-root] {
    /* base; JS adds the animation classes */
}

[data-tsh-page-root].tsh-page-exit {
    animation: tsh-slide-up-out 160ms cubic-bezier(.4,0,1,1) forwards;
    pointer-events: none;
}

[data-tsh-page-root].tsh-page-enter {
    animation: tsh-slide-up-in 260ms cubic-bezier(.16,1,.3,1) forwards;
}

/* Stagger children of incoming page fragment */
[data-tsh-page-root].tsh-page-enter > * {
    opacity: 0;
    animation: tsh-slide-up-in 300ms cubic-bezier(.16,1,.3,1) forwards;
}
[data-tsh-page-root].tsh-page-enter > *:nth-child(1)  { animation-delay:  60ms; }
[data-tsh-page-root].tsh-page-enter > *:nth-child(2)  { animation-delay: 120ms; }
[data-tsh-page-root].tsh-page-enter > *:nth-child(3)  { animation-delay: 180ms; }
[data-tsh-page-root].tsh-page-enter > *:nth-child(4)  { animation-delay: 230ms; }
[data-tsh-page-root].tsh-page-enter > *:nth-child(5)  { animation-delay: 270ms; }
[data-tsh-page-root].tsh-page-enter > *:nth-child(n+6){ animation-delay: 300ms; }


/* ── 3. LOADING PLACEHOLDER — improved ───────────────────── */

.tsh-page-loading {
    animation: tsh-fade-in 180ms ease forwards;
}

/* Shimmer bar used inside skeleton cards */
.tsh-skeleton-line {
    display: block;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--tsh-surface-3, #f1f5f9) 25%,
        var(--tsh-border,    #dde4ee) 50%,
        var(--tsh-surface-3, #f1f5f9) 75%
    );
    background-size: 600px 100%;
    animation: tsh-shimmer 1.4s ease-in-out infinite;
    height: 13px;
    margin: 0;
}
.tsh-skeleton-line.wide  { width: 70%; }
.tsh-skeleton-line.medium{ width: 50%; }
.tsh-skeleton-line.narrow{ width: 30%; }
.tsh-skeleton-line.tall  { height: 20px; }
.tsh-skeleton-line.short { height: 10px; }

/* Full skeleton card (replaces tsh-page-loading when JS kicks in) */
.tsh-skeleton-card {
    background: var(--tsh-surface);
    border: 1px solid var(--tsh-border);
    border-radius: 8px;
    box-shadow: var(--tsh-shadow);
    padding: 20px 20px 24px;
    display: grid;
    gap: 12px;
    animation: tsh-fade-in 140ms ease forwards;
}
.tsh-skeleton-card .tsh-skeleton-line:first-child {
    width: 45%;
    height: 16px;
    margin-bottom: 4px;
}

/* Skeleton grid for summary cards */
.tsh-skeleton-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    animation: tsh-fade-in 140ms ease forwards;
}
.tsh-skeleton-summary-card {
    background: var(--tsh-surface-soft);
    border: 1px solid var(--tsh-border);
    border-radius: 8px;
    padding: 16px;
    display: grid;
    gap: 10px;
    animation: tsh-pulse-subtle 1.6s ease-in-out infinite;
}
/* Stagger the pulse on each summary card */
.tsh-skeleton-summary-card:nth-child(2) { animation-delay: .18s; }
.tsh-skeleton-summary-card:nth-child(3) { animation-delay: .36s; }
.tsh-skeleton-summary-card:nth-child(4) { animation-delay: .54s; }

/* Skeleton table rows */
.tsh-skeleton-table-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tsh-border);
    animation: tsh-pulse-subtle 1.5s ease-in-out infinite;
}
.tsh-skeleton-table-row:nth-child(2) { animation-delay: .12s; }
.tsh-skeleton-table-row:nth-child(3) { animation-delay: .24s; }
.tsh-skeleton-table-row:nth-child(4) { animation-delay: .36s; }
.tsh-skeleton-table-row:nth-child(5) { animation-delay: .48s; }


/* ── 4. API SECTIONS — loaded state reveal ────────────────── */

[data-tsh-api-section] {
    transition: opacity 200ms ease;
}

/* Before data arrives — values show as shimmer bars */
[data-tsh-api-section]:not(.is-loaded):not(.warn) [data-tsh-bind],
[data-tsh-api-section]:not(.is-loaded):not(.warn) [data-tsh-count] {
    display: inline-block;
    min-width: 48px;
    height: 14px;
    vertical-align: middle;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--tsh-surface-3, #f1f5f9) 25%,
        var(--tsh-border, #dde4ee) 50%,
        var(--tsh-surface-3, #f1f5f9) 75%
    );
    background-size: 600px 100%;
    animation: tsh-shimmer 1.4s ease-in-out infinite;
    color: transparent;
    pointer-events: none;
    border: none;
}

/* Snap reveal once loaded */
[data-tsh-api-section].is-loaded [data-tsh-bind],
[data-tsh-api-section].is-loaded [data-tsh-count] {
    animation: tsh-scale-in 220ms cubic-bezier(.16,1,.3,1) forwards;
}


/* ── 5. SUMMARY CARDS — staggered entrance ────────────────── */

.summary-card-grid .summary-card {
    opacity: 0;
    animation: tsh-summary-in 320ms cubic-bezier(.16,1,.3,1) forwards;
}

/* Stagger via nth-child only; no inline style required. */
.summary-card-grid .summary-card:nth-child(1) { animation-delay: 40ms; }
.summary-card-grid .summary-card:nth-child(2) { animation-delay: 90ms; }
.summary-card-grid .summary-card:nth-child(3) { animation-delay: 140ms; }
.summary-card-grid .summary-card:nth-child(4) { animation-delay: 190ms; }
.summary-card-grid .summary-card:nth-child(n+5){ animation-delay: 220ms; }

/* Summary card hover lift */
.summary-card {
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tsh-shadow-lg);
    border-color: var(--tsh-primary);
}


/* ── 6. SMART TABLE — row reveal ─────────────────────────── */

.smart-table tbody tr {
    opacity: 0;
    animation: tsh-slide-up-in 220ms cubic-bezier(.16,1,.3,1) forwards;
}
/* Row stagger: up to 12 rows, then uniform */
.smart-table tbody tr:nth-child(1)  { animation-delay:  40ms; }
.smart-table tbody tr:nth-child(2)  { animation-delay:  70ms; }
.smart-table tbody tr:nth-child(3)  { animation-delay:  96ms; }
.smart-table tbody tr:nth-child(4)  { animation-delay: 118ms; }
.smart-table tbody tr:nth-child(5)  { animation-delay: 138ms; }
.smart-table tbody tr:nth-child(6)  { animation-delay: 155ms; }
.smart-table tbody tr:nth-child(7)  { animation-delay: 170ms; }
.smart-table tbody tr:nth-child(8)  { animation-delay: 183ms; }
.smart-table tbody tr:nth-child(9)  { animation-delay: 195ms; }
.smart-table tbody tr:nth-child(10) { animation-delay: 206ms; }
.smart-table tbody tr:nth-child(11) { animation-delay: 215ms; }
.smart-table tbody tr:nth-child(n+12){ animation-delay: 222ms; }

/* Row hover micro-interaction */
.smart-table tbody tr {
    transition: background 100ms ease;
}


/* ── 7. TOAST — polished entrance & exit ─────────────────── */

.tsh-toast {
    animation: tsh-toast-in 220ms cubic-bezier(.16,1,.3,1) forwards;
    overflow: hidden;
    transition: max-height 240ms cubic-bezier(.4,0,.2,1),
                padding    240ms cubic-bezier(.4,0,.2,1),
                margin     240ms cubic-bezier(.4,0,.2,1),
                opacity    200ms ease;
}
.tsh-toast.tsh-toast-dismissing {
    animation: tsh-toast-out 220ms cubic-bezier(.4,0,1,1) forwards;
}


/* ── 8. NAVIGATION ITEMS — staggered load ────────────────── */

[data-tsh-navigation] .tsh-nav-item,
[data-tsh-navigation] .tsh-nav-group {
    opacity: 0;
    animation: tsh-nav-item-in 240ms cubic-bezier(.16,1,.3,1) forwards;
}
[data-tsh-navigation] .tsh-nav-item:nth-child(1),
[data-tsh-navigation] .tsh-nav-group:nth-child(1)  { animation-delay:  40ms; }
[data-tsh-navigation] .tsh-nav-item:nth-child(2),
[data-tsh-navigation] .tsh-nav-group:nth-child(2)  { animation-delay:  70ms; }
[data-tsh-navigation] .tsh-nav-item:nth-child(3),
[data-tsh-navigation] .tsh-nav-group:nth-child(3)  { animation-delay:  96ms; }
[data-tsh-navigation] .tsh-nav-item:nth-child(4),
[data-tsh-navigation] .tsh-nav-group:nth-child(4)  { animation-delay: 120ms; }
[data-tsh-navigation] .tsh-nav-item:nth-child(5),
[data-tsh-navigation] .tsh-nav-group:nth-child(5)  { animation-delay: 142ms; }
[data-tsh-navigation] .tsh-nav-item:nth-child(6),
[data-tsh-navigation] .tsh-nav-group:nth-child(6)  { animation-delay: 162ms; }
[data-tsh-navigation] .tsh-nav-item:nth-child(n+7),
[data-tsh-navigation] .tsh-nav-group:nth-child(n+7){ animation-delay: 180ms; }


/* ── 9. TOPBAR TITLE — animate on page change ────────────── */

[data-tsh-page-title].tsh-title-refresh,
[data-tsh-page-kicker].tsh-title-refresh {
    animation: tsh-topbar-update 200ms cubic-bezier(.16,1,.3,1) forwards;
}


/* ── 10. TAB PANELS ──────────────────────────────────────── */

[data-tsh-tab-panel] > * {
    animation: tsh-tab-panel-in 240ms cubic-bezier(.16,1,.3,1) forwards;
}
[data-tsh-tab-panel] .tsh-page-loading {
    animation: tsh-fade-in 120ms ease forwards;
}

/* Tab button transition */
[data-tsh-tab] {
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}


/* ── 11. SIDEBAR USER CARD — fade in when authenticated ───── */

body.is-authenticated .tsh-user-card {
    animation: tsh-fade-in 300ms ease forwards;
}


/* ── 12. COMMAND PALETTE — card slide-scale in ───────────── */

.tsh-command-backdrop.open .tsh-command-card {
    animation: tsh-scale-in 180ms cubic-bezier(.16,1,.3,1) forwards;
}
.tsh-command-list button {
    transition: background 80ms ease;
}
.tsh-command-list button.is-active {
    animation: tsh-fade-in 100ms ease forwards;
}


/* ── 13. TALPIE CARD — hover lift ────────────────────────── */

.tsh-card {
    transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}
/* Only lift non-hero, non-dark cards */
.tsh-card:not(.tsh-hero-card):hover {
    box-shadow: var(--tsh-shadow-lg);
}


/* ── 14. BUTTONS — press / hover feedback ────────────────── */

.ah-btn, .tsh-top-button, .tsh-ghost-button {
    transition: background 120ms ease,
                border-color 120ms ease,
                box-shadow 120ms ease,
                transform 120ms ease,
                opacity 120ms ease;
}
.ah-btn:active:not([disabled]),
.tsh-top-button:active:not([disabled]),
.tsh-ghost-button:active:not([disabled]) {
    transform: scale(.97);
}


/* ── 15. SIDEBAR — active item indicator ────────────────────*/
.tsh-nav-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,.06);
    opacity: 0;
    transition: opacity 120ms ease;
}
.tsh-nav-item:hover::after {
    opacity: 1;
}


/* ── 16. TOPBAR PROGRESS LINE ────────────────────────────── */

.tsh-topbar-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--tsh-primary);
    width: 0%;
    transition: width 200ms ease, opacity 200ms ease;
    opacity: 0;
    z-index: 20;
    border-radius: 0 1px 1px 0;
}
.tsh-topbar-progress.active {
    width: 65%;
    opacity: 1;
    transition: width 1800ms cubic-bezier(.1,.6,.3,1), opacity 100ms ease;
}
.tsh-topbar-progress.done {
    width: 100%;
    opacity: 0;
    transition: width 200ms ease, opacity 400ms ease 200ms;
}


/* ── 17. REDUCED MOTION OVERRIDE ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
    .tsh-skeleton-line,
    .tsh-skeleton-summary-card,
    .tsh-skeleton-table-row {
        animation: none !important;
        background: var(--tsh-surface-3) !important;
    }
}