/* Terre Promise — motion + brand (solemn, minimal) */
:root {
    --tp-gold: #7eb6ff;
    --tp-ink: #0b1220;
}

.brand-logo {
    display: block;
    object-fit: contain;
    background: #050a12;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(126, 182, 255, 0.12);
}
.brand-logo--nav { height: 52px; width: auto; max-width: 168px; }
.brand-logo--side { height: 56px; width: auto; max-width: 160px; }
.brand-logo--login { height: 112px; width: auto; max-width: 240px; margin: 0 auto; }
.brand-logo--map { height: 72px; width: auto; max-width: 180px; }
.brand-logo--invoice { height: 88px; width: auto; max-width: 200px; }
.brand-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #050a12;
    border-radius: 12px;
    padding: 4px 6px;
    line-height: 0;
    box-shadow: 0 0 0 1px rgba(126, 182, 255, 0.12);
}

#tpLoader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Solid veil only — no blur on load (blur was applied to whole UI via tp-booting). */
    background: rgba(5, 5, 5, 0.72);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#tpLoader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.tp-loader-mark {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tp-loader-orbit {
    --tp-orbit: clamp(148px, 38vw, 200px);
    position: relative;
    width: var(--tp-orbit);
    height: var(--tp-orbit);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tp-loader-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.tp-loader-ring-track {
    stroke: rgba(212, 175, 55, 0.18);
    stroke-width: 1.35;
}
.tp-loader-ring-arc {
    stroke: var(--tp-gold);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-dasharray: 70 213; /* ~25% of circumference (2π·45 ≈ 283) */
    animation: tp-ring-spin 1.15s linear infinite;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.35));
}
.tp-loader-core {
    position: relative;
    z-index: 1;
    width: 72%;
    height: 72%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.22),
        0 10px 32px rgba(0, 0, 0, 0.5);
    animation: tp-pulse 1.6s ease-in-out infinite;
}
.tp-loader-logo {
    display: block;
    width: auto;
    height: clamp(56px, 14vw, 88px);
    max-width: 78%;
    object-fit: contain;
}
.tp-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-top-color: var(--tp-gold);
    border-right-color: rgba(255, 255, 255, 0.75);
    animation: tp-spin 0.85s linear infinite;
}

/* Loading / boot: no page blur — overlay + logo only */
html.tp-leaving body {
    opacity: 0.55;
    transition: opacity 0.28s ease;
}

body.tp-ready {
    animation: tp-fade-in 0.45s ease both;
}

[data-animate] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate].show,
[data-animate].is-in {
    opacity: 1;
    transform: none;
}

/* Dashboard SPA: panels tagged while display:none never got .show — force visible once the section is shown */
#dashboard .section:not(.hidden) [data-animate] {
    opacity: 1;
    transform: none;
}

.modal,
.tp-overlay {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@keyframes tp-spin {
    to { transform: rotate(360deg); }
}
@keyframes tp-ring-spin {
    to { stroke-dashoffset: -283; }
}
@keyframes tp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(0.985); }
}
@keyframes tp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media print {
    #tpLoader { display: none !important; }
    html.tp-leaving body {
        opacity: 1 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #tpLoader { display: none !important; }
    html.tp-leaving body {
        opacity: 1 !important;
        transition: none !important;
    }
    body.tp-ready { animation: none !important; }
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .tp-spinner,
    .tp-loader-core,
    .tp-loader-ring-arc { animation: none !important; }
}