/*
 * Eagle LLC Global UI Polish
 * Phase 7 - Typography, Spacing, Micro-interactions, Accessibility
 */

/* ==========================================================================
   Micro-Interactions & Components (Task 2 & 9)
   ========================================================================== */
   
/* Card Elevation & Scale */
.bg-bg, .bg-bg-card {
    transition: box-shadow var(--motion-time-medium) var(--motion-ease-ease-out-quart),
                transform var(--motion-time-medium) var(--motion-ease-ease-out-quart),
                border-color var(--motion-time-medium) ease;
}

.hover\:shadow-2xl:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) scale(1.01) !important; /* Premium constraint: max scale 1.01 */
}

/* Button Refinements */
button, .bg-btn-bg {
    position: relative;
    overflow: hidden;
    transition: all var(--motion-time-medium) ease-out;
}

button:active, .bg-btn-bg:active {
    transform: scale(0.98);
}

/* Subtle glow on accent elements */
.text-accent {
    text-shadow: 0 0 10px rgba(var(--color-accent), 0.1);
}

/* Form Focus Enhancements */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 2px rgba(var(--color-accent), 0.2) !important;
    border-color: var(--color-accent) !important;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* ==========================================================================
   Typography Refinement (Task 6)
   ========================================================================== */
   
h1, h2, h3, h4, h5, h6, .font-heading {
    letter-spacing: -0.02em;
    line-height: 1.1;
}

p, .font-sans {
    letter-spacing: -0.01em;
    line-height: 1.6;
}

/* ==========================================================================
   Accessibility & Focus States (Task 13)
   ========================================================================== */

*:focus-visible {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 4px !important;
}

/* ==========================================================================
   Performance Optimizations (Task 12)
   ========================================================================== */

/* Hardware acceleration for transforms */
.eagle-reveal, .page-wrapper, .hover\:-translate-y-1, .group:hover img {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ==========================================================================
   Loading States & Skeletons (Task 4)
   ========================================================================== */

.skeleton {
    background: linear-gradient(90deg, var(--color-bg-card) 25%, var(--color-border) 50%, var(--color-bg-card) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 0.25rem;
}

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