/* ===================================================================
   ADG 3D Engine — Micro-Interactions & Animations
   Apple-quality hover, active, focus effects
   =================================================================== */

/* ── Global Interactive Feedback ── */

/* Buttons: unified press effect */
button,
.btn,
.btn-macro,
.nav-step,
.lighting-tab,
.tool-btn,
.export-card,
.asset-item,
.fixture-item {
    -webkit-tap-highlight-color: transparent;
}

/* ── Focus Ring (Apple-style outline) ── */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.4);
    border-radius: inherit;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: var(--accent-glow);
}

/* ── Nav Step Interaction ── */
.nav-step {
    transition: all var(--duration-fast) var(--ease-spring);
}

.nav-step:hover {
    transform: translateY(-1px);
}

.nav-step:active {
    transform: translateY(0) scale(0.97);
}

/* ── Tool Button Spring ── */
.tool-btn {
    transition: all var(--duration-fast) var(--ease-spring);
}

.tool-btn:hover {
    transform: scale(1.08);
}

.tool-btn:active {
    transform: scale(0.92);
    transition-duration: 0.08s;
}

/* ── Sidebar Asset Grid Items ── */
.asset-item {
    transition: all var(--duration-normal) var(--ease-spring);
}

.asset-item:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.asset-item:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* ── Export Card Lift ── */
.export-card {
    transition: all var(--duration-normal) var(--ease-spring);
}

.export-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.export-card:active {
    transform: translateY(-1px);
    transition-duration: 0.1s;
}

/* ── Macro Button Bounce ── */
.btn-macro {
    transition: all var(--duration-fast) var(--ease-spring);
}

.btn-macro:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn-macro:active {
    transform: scale(0.94);
    transition-duration: 0.08s;
}

/* ── Section Collapse/Expand ── */
.section-body,
.ap-section-content {
    transition: max-height var(--duration-normal) var(--ease-spring),
        opacity var(--duration-normal) var(--ease-default),
        padding var(--duration-normal) var(--ease-default);
}

/* ── Sidebar Panel Slide ── */
.app-sidebar-right {
    transition: transform var(--duration-normal) var(--ease-spring),
        opacity var(--duration-fast);
}

/* ── Input Glow on Focus ── */
.glass-input,
.glass-select,
.adg-group input,
.adg-group select,
#calib-dist-input {
    transition: border-color var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default),
        background var(--duration-fast);
}

/* ── Toggle Switch Spring ── */
.ap-slider-r,
.ap-slider-r::before {
    transition: all var(--duration-normal) var(--ease-spring);
}

/* ── Checkbox Custom (accent) ── */
input[type="checkbox"] {
    accent-color: var(--accent);
}

input[type="range"] {
    accent-color: var(--accent);
}

/* ── Tooltip-like Hover Labels ── */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font: 400 11px/1 var(--font-sans);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: all var(--duration-fast) var(--ease-spring);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: var(--z-toast);
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Skeleton Loading Animation ── */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg,
            var(--fill-quaternary) 25%,
            var(--fill-tertiary) 37%,
            var(--fill-quaternary) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* ── Smooth Page Transitions ── */
.app-workspace {
    transition: opacity var(--duration-normal) var(--ease-default);
}

/* ── Viewport Overlay Info ── */
.overlay-info {
    transition: opacity var(--duration-fast);
}

.overlay-info span {
    font: var(--text-caption);
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    letter-spacing: 0.3px;
}

/* ── Status Bar Pulse (System Ready) ── */
@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.system-status {
    animation: statusPulse 3s ease-in-out infinite;
}

/* ── Sequencer Bar Entry Animation ── */
.sequencer-bar {
    animation: seqSlideUp var(--duration-enter) var(--ease-spring);
}

/* ── Modal Overlay Backdrop ── */
.modal-overlay {
    transition: opacity var(--duration-normal) var(--ease-out);
}

/* ── Glow Effect for Active Elements ── */
.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.4),
        0 2px 8px rgba(10, 132, 255, 0.25);
}

/* ── Reduced Motion Support ── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}