/**
 * Haptic Visual Language - Spring-based UI Animations
 */

:root {
    --haptic-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --haptic-duration: 0.15s;
}

/* Visibility Enforcement: Ensure haptic elements stay visible even if entrance animations are interrupted */
[class*="haptic-"] {
    opacity: 1 !important;
}

/* Tap Down (Phase 1) - Firm Inset */
.haptic-tap-down {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), inset 0 0 0 100vw var(--haptic-dim) !important;
}

/* Push Forward (Opening) - Borderless Surface Highlight */
.haptic-push {
    box-shadow: inset 0 0 0 100vw var(--haptic-highlight) !important;
}

@media (dynamic-range: high) {
    .haptic-push {
        box-shadow: inset 0 0 0 100vw var(--haptic-hdr-glow) !important;
        /* Specular highlight: looks brighter than SDR white */
    }
}

/* Pull Back (Closing) - Deep Surface Dimming */
.haptic-pull {
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.15), inset 0 0 0 100vw var(--haptic-dim) !important;
}

/* Base Transition for Down Phase */
.haptic-tap-down, .haptic-push, .haptic-pull {
    transition: all 0.1s ease-out;
}

/* Tap Up (Phase 2) / Release - Internal Light Pulse */
.haptic-tap-up {
    animation: haptic-pop 0.3s ease-out;
}

@keyframes haptic-pop {
    0% { filter: brightness(1.2); }
    100% { filter: brightness(1); }
}

/* Shake (Error/Disabled) */
.haptic-shake {
    animation: haptic-shake 0.15s ease-in-out;
}

@keyframes haptic-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Bloom (Success Pulse) */
.haptic-bloom {
    animation: haptic-bloom 0.4s ease-out;
}

@keyframes haptic-bloom {
    0% { box-shadow: 0 0 0 0 rgba(var(--green-3-rgb, 74, 222, 128), 0.4); transform: scale(1); }
    70% { box-shadow: 0 0 0 15px rgba(var(--green-3-rgb, 74, 222, 128), 0); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 rgba(var(--green-3-rgb, 74, 222, 128), 0); transform: scale(1); }
}

@keyframes fade-in {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fade-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.98); }
}

@keyframes backdrop-fade-in {
    from { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
    to { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(var(--glass-blur, 15px)); -webkit-backdrop-filter: blur(var(--glass-blur, 15px)); }
}

@keyframes backdrop-fade-out {
    from { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(var(--glass-blur, 15px)); -webkit-backdrop-filter: blur(var(--glass-blur, 15px)); }
    to { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
}

.animate-fade-in {
    animation: fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-out {
    animation: fade-out 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Character Tick (Typewriter) */
.haptic-tick {
    animation: haptic-tick 0.1s ease-out;
}

@keyframes haptic-tick {
    0% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

/* --- Sparkline Drawing Animation --- */
.sparkline-path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: sparkline-draw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes sparkline-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.sparkline-svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

@media (dynamic-range: high) {
    .sparkline-svg {
        filter: drop-shadow(0 0 8px var(--system-accent));
    }
}

/* --- Skeleton Shimmer System --- */
.skeleton-base {
    background: linear-gradient(
        90deg,
        var(--skeleton-bg) 25%,
        var(--skeleton-shimmer) 50%,
        var(--skeleton-bg) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
    border-radius: var(--radius-2);
}

.skeleton-text { height: 1rem; width: 100%; margin-bottom: 0.5rem; }
.skeleton-title { height: 2rem; width: 60%; margin-bottom: 1rem; }
.skeleton-icon { width: 3rem; height: 3rem; border-radius: var(--radius-3); }
.skeleton-card { height: 8rem; width: 100%; border-radius: var(--radius-3); }
.skeleton-stat { height: 6rem; width: 100%; border-radius: var(--radius-3); }


@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton Content Transition */
.view-item > div {
    transition: opacity 0.4s ease;
}

@media (dynamic-range: high) {
    .skeleton-base:not(.no-hdr) {
        background: linear-gradient(
            90deg,
            var(--bg-3) 25%,
            oklch(95% 0 0 / 0.1) 50%,
            var(--bg-3) 75%
        );
        background-size: 200% 100%;
    }
}
/* Theme Morphing State - Safe Property Transition */
html.is-morphing * {
    transition-property: background-color, color, border-color, fill, stroke, box-shadow, backdrop-filter !important;
    transition-duration: 0.4s !important;
    transition-timing-function: ease !important;
}