/**
 * AILO Layout & Motion Refinements
 * Source of Truth: docs/06_반응형_인터랙션_명세서.md, docs/07_구현_체크리스트.md
 */

/* ==========================================================================
   Vertical Rhythm & Content Alignment
   ========================================================================== */

/* Equal height flex cards */
.cards-grid .card {
  height: 100%;
}

.portfolio-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Glassmorphism fallback for older browsers */
@supports not (backdrop-filter: blur(20px)) {
  .site-header {
    background-color: rgba(255, 255, 255, 0.98);
  }
  .card--glass,
  .universe-fragment {
    background-color: var(--color-white);
  }
}

/* ==========================================================================
   Reduced Motion Strict Overrides
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .universe-fragment,
  .hero-content,
  .philo-item,
  .workflow-step,
  .bento-card,
  .card {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   Micro Interactions & Interactive Polish
   ========================================================================== */

.interactive-hover-lift {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.interactive-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* Subtle line divider */
.divider {
  height: 1px;
  background-color: var(--color-divider);
  width: 100%;
  margin-block: var(--space-6);
}