/* ==========================================================================
   Animations & Interactive States
   ========================================================================== */

/* 
 * Animation Philosophy:
 * - Performance-first approach using transform and opacity
 * - Progressive enhancement for touch devices
 * - Accessibility-conscious timing and easing
 * - Meaningful feedback for all user interactions
 */

/* ==========================================================================
   Page-Level Animations
   ========================================================================== */

/* 
 * Page entrance animation - smooth fade-in with subtle upward motion
 * Uses transform3d for hardware acceleration
 */
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translate3d(0, 30px, 0); 
  }
  to { 
    opacity: 1; 
    transform: translate3d(0, 0, 0); 
  }
}

/* ==========================================================================
   Author Card Interactions
   ========================================================================== */

/* 
 * Author cards use layered hover states for professional feel
 * Transform and shadow changes provide clear interactive feedback
 */

/* Base hover state - subtle elevation */
.author:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px) scale(1.02);
  z-index: 100;
  position: relative;
  will-change: transform, box-shadow;
}

/* Enhanced focus state for keyboard and explicit hover */
.author-link:focus .author,
.author-link:hover .author {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px) scale(1.025);
  z-index: 100;
  position: relative;
  will-change: transform, box-shadow;
}

/* ==========================================================================
   Logo Grid Interactions
   ========================================================================== */

/* 
 * Logo hover effects transition from grayscale to full color
 * Scale and glow effects indicate interactivity
 * Performance optimized with will-change hints
 */
.grid-logo:hover {
  filter: grayscale(0) brightness(1.1) opacity(1) drop-shadow(0 8px 24px var(--color-accent-alpha));
  transform: scale(1.35) rotate(-2deg);
  z-index: 10;
  will-change: transform, filter;
}

/* ==========================================================================
   Mobile Touch Enhancement
   ========================================================================== */

/* 
 * Touch-specific interactions for mobile devices
 * Persistent highlighting helps users understand current selection
 * Complements the JavaScript touch handling system
 */

/* Touch-focused author cards */
.mobile-touch-enabled .author.touch-focused {
  box-shadow: 0 8px 32px 0 rgba(59, 130, 246, 0.25);
  transform: translateY(-2px) scale(1.02);
  z-index: 100;
  position: relative;
  transition: all var(--timing-slow) ease-out;
  will-change: transform, box-shadow;
}

/* Touch-focused logo grid items */
.mobile-touch-enabled .logo-link.touch-focused .grid-logo {
  filter: grayscale(0) brightness(1.1) opacity(1) drop-shadow(0 8px 24px rgba(59, 130, 246, 0.4));
  transform: scale(1.15);
  z-index: 10;
  transition: all var(--timing-slow) ease-out;
  will-change: transform, filter;
}

/* ==========================================================================
   Tooltip System
   ========================================================================== */

/* 
 * Accessible tooltip system with smart positioning
 * Automatically adjusts to viewport constraints
 * Supports both hover (desktop) and touch (mobile) interactions
 */

/* Tooltip Container */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover {
  z-index: 200;
}

/* Tooltip Content */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-tooltip-bg);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  max-width: min(220px, 90vw);
  min-width: 120px;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  margin-top: var(--space-md);
  transition: opacity var(--timing-fast) ease-out;
  z-index: 1001;
  box-shadow: var(--shadow-subtle);
  backdrop-filter: blur(2px);
}

/* Smart Viewport-Aware Positioning */
[data-tooltip]::after {
  left: clamp(calc(50% - 45vw), 50%, calc(50% + 45vw));
  transform: translateX(clamp(-100%, -50%, 0%));
}

/* Tooltip Visibility States */
[data-tooltip]:hover::after,
.mobile-touch-enabled [data-tooltip].show-caption::after {
  opacity: 0.9;
}

/* Component-Specific Tooltip Adjustments */
.logo-link[data-tooltip]::after {
  margin-top: var(--space-lg);
}

.author[data-tooltip]::after {
  margin-top: var(--space-md);
  max-width: min(200px, 85vw);
}