/* ============================================================
   Utilitati — mișcare și ierarhie
   Se încarcă ULTIMA, după tokens.css, app.css și zen.css.
   Totul se oprește singur la prefers-reduced-motion (la final).
   ============================================================ */

:root {
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.3, .44, 1);
    --t-fast: .16s;
    --t-base: .28s;
    --t-slow: .45s;
}

/* ------------------------------------------------- intrarea în cascadă */

@keyframes util-rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.util-in > * {
    animation: util-rise var(--t-slow) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}

/* elementele care apar singure (nu la randarea ecranului) */
@keyframes util-fade {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: none; }
}
.util-pop { animation: util-fade var(--t-base) var(--ease-out) backwards; }

/* schimbarea de ecran */
@keyframes util-view-in {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
}
.app-main.view-switch { animation: util-view-in var(--t-base) var(--ease-out); }

/* --------------------------------------------------- navigație cu pastilă */

.utilitati-app .app-nav { position: fixed; }

.nav-pill {
    position: absolute;
    top: 6px;
    height: calc(100% - 12px - env(safe-area-inset-bottom, 0px));
    border-radius: 13px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    box-shadow: inset 0 1px 0 var(--highlight);
    transition: transform var(--t-base) var(--ease-spring), width var(--t-base) var(--ease-spring), opacity var(--t-fast);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    left: 0;
}
.nav-pill.ready { opacity: 1; }

.utilitati-app .nav-btn { position: relative; z-index: 1; }
/* fundalul activ îl desenează pastila */
.utilitati-app .nav-btn.active { background: transparent; }

.utilitati-app .nav-btn svg {
    transition: transform var(--t-base) var(--ease-spring);
}
.utilitati-app .nav-btn.active svg { transform: translateY(-1px) scale(1.08); }

/* linia de deasupra butonului activ crește din centru */
.utilitati-app .nav-btn.active::after {
    animation: util-tick var(--t-base) var(--ease-spring) backwards;
}
@keyframes util-tick {
    from { width: 0; opacity: 0; }
    to   { width: 20px; opacity: 1; }
}

/* ------------------------------------------------------ apăsări și hover */

.utilitati-app .glass-card,
.utilitati-app .expandable-card,
.utilitati-app .utility-card,
.utilitati-app .room-card,
.utilitati-app .shopping-item,
.utilitati-app .location-option {
    transition:
        transform var(--t-fast) var(--ease-out),
        box-shadow var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out);
}

.is-press { transform: scale(.985) !important; }

.utilitati-app button,
.utilitati-app .btn-icon,
.utilitati-app .nav-btn,
.utilitati-app .toggle-btn {
    transition: transform var(--t-fast) var(--ease-out), background var(--t-fast),
                color var(--t-fast), border-color var(--t-fast), filter var(--t-fast);
}
.utilitati-app button.is-press,
.utilitati-app .btn-icon.is-press { transform: scale(.94) !important; }

/* ------------------------------------------------------------ cifre vii */

.util-count { font-variant-numeric: tabular-nums; }

/* bara de progres crește la apariție */
@keyframes util-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.util-bar { transform-origin: left center; animation: util-grow .7s var(--ease-out) backwards; animation-delay: .12s; }

/* inel de progres */
.util-ring circle.val {
    transition: stroke-dashoffset .9s var(--ease-out);
}

/* ------------------------------------------------------------- skeleton */

@keyframes util-shimmer {
    from { background-position: -340px 0; }
    to   { background-position: 340px 0; }
}

.skeleton {
    border-radius: var(--card-radius, 16px);
    background-color: var(--surface-1);
    background-image: linear-gradient(90deg, transparent 0%, var(--surface-2) 45%, var(--surface-2) 55%, transparent 100%);
    background-size: 340px 100%;
    background-repeat: no-repeat;
    animation: util-shimmer 1.25s linear infinite;
}
.skeleton-stack { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.skeleton-row { height: 74px; }
.skeleton-row.tall { height: 128px; }
.skeleton-row.short { height: 54px; }

/* ----------------------------------------------------------- foaia modală */

.utilitati-app .modal-backdrop {
    transition: opacity var(--t-base) var(--ease-out);
    opacity: 0;
}
.utilitati-app .app-modal.active .modal-backdrop { opacity: 1; }

.utilitati-app .modal-content {
    transition: transform var(--t-slow) var(--ease-spring);
}

/* mânerul foii, ca la aplicațiile native */
.utilitati-app .modal-content::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 38px;
    height: 4px;
    margin-left: -19px;
    border-radius: 99px;
    background: var(--text-4);
    opacity: .6;
    z-index: 20;
}
.utilitati-app .modal-header { padding-top: 24px; }

/* ---------------------------------------------------------------- toast */

@keyframes util-toast-in {
    from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.utilitati-app .toast {
    animation: util-toast-in var(--t-base) var(--ease-spring) backwards;
}
.utilitati-app .toast-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --------------------------------------------------------- încărcare lină */

.utilitati-app .loading-spinner {
    animation: util-spin .8s linear infinite;
}
@keyframes util-spin { to { transform: rotate(360deg); } }

/* clipirea badge-ului de notificări când apare ceva nou */
@keyframes util-ping {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.notification-badge.is-new { animation: util-ping .5s var(--ease-spring) 2; }

/* --------------------------------------------- schimbarea temei, fără salt */

.theme-switching,
.theme-switching * {
    transition: background-color .35s var(--ease-out), color .35s var(--ease-out),
                border-color .35s var(--ease-out) !important;
}

/* ----------------------------------------------------- respectă preferința */

@media (prefers-reduced-motion: reduce) {
    .util-in > *,
    .util-pop,
    .app-main.view-switch,
    .utilitati-app .toast,
    .util-bar,
    .notification-badge.is-new {
        animation: none !important;
    }
    .nav-pill,
    .utilitati-app .modal-content,
    .utilitati-app .nav-btn svg { transition: none !important; }
    .is-press { transform: none !important; }
}