/* ═══════════════════════════════════════════════════
   CINEMATIC UPGRADE v2 + 3D MOTION LAYER
   Performance-safe. Zero continuous animations except brand icon.
   ═══════════════════════════════════════════════════ */

/* ── PANEL CARDS — Stronger surface differentiation ── */
.panel-card {
    border-top-color: rgba(56,189,248,0.42) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.60),
                0 8px 20px rgba(0,0,0,0.40),
                inset 0 1px 0 rgba(56,189,248,0.10),
                inset 0 -1px 0 rgba(0,0,0,0.30) !important;
}

.panel-header::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(56,189,248,0.55) 30%,
        rgba(96,165,250,0.65) 50%,
        rgba(56,189,248,0.55) 70%,
        transparent 100%
    ) !important;
    opacity: 1 !important;
}

.panel-header { background: rgba(56,189,248,0.06) !important; }

.panel-title {
    background: linear-gradient(105deg, #bae6fd 0%, #38bdf8 50%, #818cf8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── LAYER CARDS ── */
.layer-card { border-color: rgba(56,189,248,0.10) !important; }
.layer-card:hover {
    background: rgba(56,189,248,0.07) !important;
    border-color: rgba(56,189,248,0.28) !important;
    box-shadow: inset 0 1px 0 rgba(56,189,248,0.12), 0 4px 18px rgba(0,0,0,0.35) !important;
}

/* ── LAYER GROUPS ── */
.layer-group { border-color: rgba(56,189,248,0.10) !important; }
.layer-group:hover {
    background: rgba(56,189,248,0.05) !important;
    border-color: rgba(56,189,248,0.24) !important;
    box-shadow: inset 0 1px 0 rgba(56,189,248,0.08), 0 4px 16px rgba(0,0,0,0.30) !important;
}
.layer-group.has-active-layers {
    border-color: rgba(56,189,248,0.22) !important;
    box-shadow: 0 0 20px rgba(56,189,248,0.07), inset 0 1px 0 rgba(56,189,248,0.10) !important;
}

/* ── ICON WRAPPERS ── */
.layer-icon-wrapper,
.group-icon-box {
    background: linear-gradient(160deg,
        rgba(56,189,248,0.18) 0%,
        rgba(56,189,248,0.06) 100%
    ) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.layer-card:hover .layer-icon-wrapper,
.layer-group:hover .group-icon-box {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 16px rgba(56,189,248,0.25) !important;
    background: linear-gradient(160deg, rgba(56,189,248,0.26) 0%, rgba(56,189,248,0.10) 100%) !important;
}

/* ── TOGGLE SWITCH ── */
input:checked + .toggle-slider {
    background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%) !important;
    border-color: rgba(56,189,248,0.70) !important;
    box-shadow: 0 0 18px rgba(56,189,248,0.45), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
input:checked + .toggle-slider:before {
    background: #fff !important;
    box-shadow: 0 1px 8px rgba(56,189,248,0.60) !important;
}
.group-toggle input:checked + .group-toggle-slider {
    background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%) !important;
    border-color: rgba(56,189,248,0.65) !important;
    box-shadow: 0 0 14px rgba(56,189,248,0.40) !important;
}
.group-toggle input:checked + .group-toggle-slider:before { background: #fff !important; }

/* ── BRAND ICON ── */
.brand-icon {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 45%, #818cf8 100%) !important;
    box-shadow: 0 0 20px rgba(56,189,248,0.55), inset 0 1px 0 rgba(255,255,255,0.40), inset -1px -1px 0 rgba(0,0,0,0.15) !important;
}

/* ── TOOLBAR ── */
.toolbar-brand,
.toolbar-actions {
    box-shadow: 0 8px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.28) !important;
}
.toolbar-btn:hover {
    background: rgba(56,189,248,0.10) !important;
    border-color: rgba(56,189,248,0.28) !important;
}
.toolbar-btn.active {
    background: rgba(56,189,248,0.14) !important;
    border-color: rgba(56,189,248,0.42) !important;
    box-shadow: 0 0 16px rgba(56,189,248,0.18) !important;
}

/* ── VIEW TOGGLE ── */
.view-btn.active {
    background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%) !important;
    box-shadow: 0 2px 16px rgba(56,189,248,0.55), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

/* ── SECTION LABEL BAR ── */
.section-label::before,
.section-label-text::before {
    box-shadow: 0 0 6px rgba(56,189,248,0.80) !important;
}

/* ── STAT CELLS ── */
.stat-cell { background: rgba(56,189,248,0.06) !important; border-color: rgba(56,189,248,0.14) !important; }
.stat-value {
    background: linear-gradient(110deg, #bae6fd 0%, #38bdf8 45%, #60a5fa 80%, #a78bfa 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
.stat-cell:hover {
    border-color: rgba(56,189,248,0.36) !important;
    box-shadow: 0 0 24px rgba(56,189,248,0.14), 0 8px 28px rgba(0,0,0,0.35) !important;
}

/* ── BASEMAP ACTIVE ── */
.basemap-card.active {
    background: rgba(56,189,248,0.14) !important;
    border-color: rgba(56,189,248,0.50) !important;
    box-shadow: 0 0 20px rgba(56,189,248,0.20), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* ── FAB ── */
.fab {
    box-shadow: 0 8px 24px rgba(0,0,0,0.50), 0 0 20px rgba(56,189,248,0.22), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.fab:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 32px rgba(56,189,248,0.36), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* ── ADMIN BOX ── */
.admin-overlay { backdrop-filter: blur(20px) !important; }
.admin-box {
    border-top-color: rgba(56,189,248,0.35) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.65), inset 0 1px 0 rgba(56,189,248,0.08) !important;
    border-radius: var(--radius-xl) !important;
}

/* ── SEARCH MODAL ── */
.search-modal-content {
    border-top-color: rgba(56,189,248,0.38) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.65), inset 0 1px 0 rgba(56,189,248,0.08) !important;
}

/* ── OBRA ITEMS hover ── */
.obra-item:hover { background: rgba(56,189,248,0.04) !important; }

/* ── CUSTOM LEGEND ── */
#customLegend {
    border-top-color: rgba(56,189,248,0.30) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55) !important;
}

/* ── LOADING SPINNER ── */
.loading-spinner { box-shadow: 0 0 28px rgba(56,189,248,0.40) !important; }

/* ── SPLASH LOGO ── */
.splash-logo {
    filter: drop-shadow(0 0 32px rgba(56,189,248,0.55)) drop-shadow(0 0 12px rgba(56,189,248,0.35)) !important;
}

/* ═══════════════════════════════════════════════════
   3D MOTION LAYER
   ═══════════════════════════════════════════════════ */

/* ── GPU hints ── */
.fab, .toolbar-btn { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* ── TOOLBAR — 3D entry ── */
@keyframes slideDown {
    from { opacity: 0; transform: translateX(-50%) perspective(700px) rotateX(-26deg) translateY(-28px) scale(0.86); }
    to   { opacity: 1; transform: translateX(-50%) perspective(700px) rotateX(0deg) translateY(0) scale(1); }
}
.floating-toolbar { animation-duration: 0.65s !important; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important; }

/* ── DASHBOARD PANEL — 3D entry ── */
@keyframes slideInRight {
    from { opacity: 0; transform: perspective(900px) rotateY(18deg) translateX(36px) scale(0.93); }
    to   { opacity: 1; transform: perspective(900px) rotateY(0deg) translateX(0) scale(1); }
}

/* ── OBRAS PANEL — 3D entry ── */
@keyframes slideInLeft {
    from { opacity: 0; transform: perspective(900px) rotateY(-18deg) translateX(-36px) scale(0.93); }
    to   { opacity: 1; transform: perspective(900px) rotateY(0deg) translateX(0) scale(1); }
}

/* ── SEARCH MODAL — 3D entry ── */
@keyframes slideUpModal {
    from { opacity: 0; transform: perspective(1000px) rotateX(-12deg) translateY(36px) scale(0.90); }
    to   { opacity: 1; transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1); }
}

/* ── ADMIN BOX — 3D entry ── */
.admin-overlay.active .admin-box { animation: adminEntry3D 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both !important; }
@keyframes adminEntry3D {
    from { opacity: 0; transform: perspective(1000px) rotateX(-14deg) translateY(28px) scale(0.88); }
    to   { opacity: 1; transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1); }
}

/* ── LAYER CARDS — clean 2D slide ── */
.layer-card {
    transform-origin: left center;
    transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.layer-card:hover { transform: translateX(4px) !important; }

/* ── LAYER GROUPS — clean 2D slide ── */
.layer-group {
    transform-origin: left center;
    transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.layer-group:hover { transform: translateX(4px) !important; }

/* ── ICON BOXES ── */
.layer-card:hover .layer-icon-wrapper { transform: scale(1.1) !important; transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.layer-group:hover .group-icon-box { transform: scale(1.1) !important; transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }

/* ── STAT CELLS — lift ── */
.stat-cell {
    transform-origin: center bottom;
    transition: transform .26s cubic-bezier(0.34, 1.56, 0.64, 1), border-color .25s ease, box-shadow .25s ease !important;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.stat-cell:hover { transform: translateY(-4px) !important; }

/* ── BASEMAP CARDS — lift ── */
.basemap-card {
    transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), background .2s ease, border-color .2s ease !important;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.basemap-card:hover { transform: translateY(-3px) !important; }
.basemap-card:active { transform: translateY(1px) scale(0.97) !important; }

/* ── TOOLBAR BUTTONS ── */
.toolbar-btn:hover { transform: translateY(-2px) !important; }
.toolbar-btn:active { transform: translateY(1px) scale(0.96) !important; }

/* ── VIEW TOGGLE ── */
.view-btn:hover:not(.active) { transform: translateY(-2px) !important; }

/* ── FAB ── */
.fab {
    transition: transform .24s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .24s ease !important;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.fab:hover { transform: translateY(-3px) scale(1.05) !important; }
.fab:active { transform: translateY(-1px) scale(1.01) !important; }

/* ── BRAND ICON — Continuous gentle orbit ── */
.brand-icon { will-change: transform; animation: brandOrbit 7s ease-in-out infinite !important; }
@keyframes brandOrbit {
    0%, 100% { transform: perspective(160px) rotateY(0deg) rotateX(0deg); }
    30%       { transform: perspective(160px) rotateY(14deg) rotateX(-4deg); }
    65%       { transform: perspective(160px) rotateY(-8deg) rotateX(3deg); }
}

/* ── INFO + OBRA ITEMS — 2D slide ── */
.info-card {
    transition: transform .24s cubic-bezier(0.34, 1.56, 0.64, 1), background .2s ease, border-color .2s ease !important;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.info-card:hover { transform: translateX(4px) !important; }

.obra-item {
    transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), background .18s ease !important;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.obra-item:hover { transform: translateX(4px) !important; }

/* ── RESPECTS REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}