/**
 * Boost Theme Framework - Effects & Animations
 * 
 * Unified CSS for all frontend effects:
 * - Scroll animations
 * - Skeleton loading
 * - Micro-interactions
 * - Lazy loading states
 * - Performance utilities
 *
 * @package BoostThemeFramework
 */

/* /assets/css/boost-effects.css */

/* =============================================================================
   ANIMATION FOUNDATIONS
   ============================================================================= */

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

/* Animation timing */
:root {
  --boost-anim-duration: 600ms;
  --boost-anim-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --boost-anim-delay: 0ms;
}

/* =============================================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================================= */

/* Base state for animated elements */
[data-boost-animate] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity var(--boost-anim-duration) var(--boost-anim-easing),
              transform var(--boost-anim-duration) var(--boost-anim-easing);
  transition-delay: var(--boost-anim-delay);
}

/* Visible state */
[data-boost-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Animation types */
[data-boost-animate="fade"] {
  transform: none;
}

[data-boost-animate="slide-up"] {
  transform: translateY(30px);
}

[data-boost-animate="slide-down"] {
  transform: translateY(-30px);
}

[data-boost-animate="slide-left"] {
  transform: translateX(30px);
}

[data-boost-animate="slide-right"] {
  transform: translateX(-30px);
}

[data-boost-animate="scale"] {
  transform: scale(0.95);
}

[data-boost-animate="scale-up"] {
  transform: scale(0.9);
}

/* Child animation support */
[data-boost-animate-child] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms var(--boost-anim-easing),
              transform 400ms var(--boost-anim-easing);
  transition-delay: var(--boost-anim-delay);
}

[data-boost-animate-child].is-visible {
  opacity: 1;
  transform: none;
}

/* =============================================================================
   SKELETON LOADING
   ============================================================================= */

.boost-skeleton {
  background: linear-gradient(90deg, 
    var(--boost-color-neutral-200) 25%, 
    var(--boost-color-neutral-100) 50%, 
    var(--boost-color-neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: boost-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--boost-radius-md);
}

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

/* Skeleton shapes */
.boost-skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.boost-skeleton-text:last-child {
  width: 70%;
}

.boost-skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 1em;
}

.boost-skeleton-circle {
  border-radius: 50%;
}

.boost-skeleton-image {
  aspect-ratio: 16/9;
  width: 100%;
}

.boost-skeleton-card {
  padding: var(--boost-spacing-lg);
}

/* Pulse variant */
.boost-skeleton--pulse {
  animation: boost-skeleton-pulse 1.5s ease-in-out infinite;
  background: var(--boost-color-neutral-200);
}

@keyframes boost-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* =============================================================================
   LAZY LOADING STATES
   ============================================================================= */

[data-boost-lazy] {
  position: relative;
}

[data-boost-lazy]:not([data-boost-loaded]) [data-boost-content] {
  opacity: 0;
  visibility: hidden;
}

[data-boost-lazy][data-boost-loaded] [data-boost-content] {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease;
}

[data-boost-lazy][data-boost-loaded] [data-boost-skeleton] {
  display: none;
}

/* =============================================================================
   CONTENT VISIBILITY (Performance)
   ============================================================================= */

[data-boost-cv] {
  content-visibility: auto;
}

/* Intrinsic size - required to prevent CLS with content-visibility */
[data-boost-cv][data-boost-intrinsic] {
  contain-intrinsic-size: var(--boost-intrinsic-size, auto 500px);
}

/* =============================================================================
   REDUCE MOTION
   ============================================================================= */

[data-boost-reduce-motion] {
  animation: none !important;
  transition: none !important;
}

/* Lazy images */
img[data-src] {
  opacity: 0;
  transition: opacity 300ms ease;
}

img[data-src].is-loaded {
  opacity: 1;
}

/* =============================================================================
   MICRO-INTERACTIONS
   ============================================================================= */

/* Button hover lift */
.boost-btn-lift {
  transition: transform 200ms var(--boost-easing),
              box-shadow 200ms var(--boost-easing);
}

.boost-btn-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.boost-btn-lift:active {
  transform: translateY(0);
}

/* Card hover effects */
.boost-card-hover {
  transition: transform 300ms var(--boost-easing),
              box-shadow 300ms var(--boost-easing);
}

.boost-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--boost-shadow-lg);
}

/* Image zoom on hover */
.boost-img-zoom {
  overflow: hidden;
}

.boost-img-zoom img {
  transition: transform 500ms var(--boost-easing);
}

.boost-img-zoom:hover img {
  transform: scale(1.05);
}

/* Link underline animation */
.boost-link-underline {
  position: relative;
}

.boost-link-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 300ms var(--boost-easing);
}

.boost-link-underline:hover::after {
  width: 100%;
}

/* Icon rotation */
.boost-icon-rotate {
  transition: transform 300ms var(--boost-easing);
}

.boost-icon-rotate:hover {
  transform: rotate(15deg);
}

/* Focus ring */
.boost-focus-ring:focus-visible {
  outline: 2px solid var(--boost-color-primary-500);
  outline-offset: 2px;
}

/* =============================================================================
   COUNTER ANIMATION
   ============================================================================= */

[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   GPU OPTIMIZATION HINTS
   ============================================================================= */

.boost-gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Remove GPU acceleration after animation */
[data-boost-animate].is-visible {
  will-change: auto;
}

/* =============================================================================
   INTERACTION LOADING
   ============================================================================= */

[data-boost-interaction]:not([data-boost-loaded]) {
  cursor: pointer;
}

[data-boost-interaction]:not([data-boost-loaded])::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
}

/* =============================================================================
   PREFETCH INDICATORS
   ============================================================================= */

[data-boost-prefetch] {
  position: relative;
}

/* =============================================================================
   LOADING SPINNER
   ============================================================================= */

.boost-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--boost-color-neutral-200);
  border-top-color: var(--boost-color-primary-500);
  border-radius: 50%;
  animation: boost-spin 800ms linear infinite;
}

@keyframes boost-spin {
  to { transform: rotate(360deg); }
}

/* =============================================================================
   PROGRESS BAR ANIMATION
   ============================================================================= */

.boost-progress-animate {
  transition: width 1s var(--boost-easing);
}

[data-boost-animate].is-visible .boost-progress-animate {
  width: var(--progress-value, 0%);
}

/* =============================================================================
   ACCORDION/FAQ ANIMATIONS
   ============================================================================= */

.boost-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--boost-easing);
}

.boost-accordion-content.is-open {
  grid-template-rows: 1fr;
}

.boost-accordion-content > div {
  overflow: hidden;
}

/* Accordion icon rotation */
.boost-accordion-icon {
  transition: transform 300ms var(--boost-easing);
}

.is-open .boost-accordion-icon {
  transform: rotate(180deg);
}

/* =============================================================================
   TABS ANIMATION
   ============================================================================= */

.boost-tab-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms var(--boost-easing),
              transform 300ms var(--boost-easing);
}

.boost-tab-content.is-active {
  opacity: 1;
  transform: none;
}

/* Tab indicator slide */
.boost-tab-indicator {
  transition: left 300ms var(--boost-easing),
              width 300ms var(--boost-easing);
}

/* =============================================================================
   SLIDER/CAROUSEL
   ============================================================================= */

.boost-slide {
  opacity: 0;
  transition: opacity 500ms var(--boost-easing);
}

.boost-slide.is-active {
  opacity: 1;
}

/* Slider dots */
.boost-slider-dot {
  transition: background-color 200ms ease,
              transform 200ms ease,
              width 200ms ease;
}

.boost-slider-dot.is-active {
  transform: scale(1.2);
}

/* =============================================================================
   MODAL/OVERLAY
   ============================================================================= */

.boost-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease,
              visibility 300ms ease;
}

.boost-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.boost-modal {
  transform: scale(0.95) translateY(20px);
  opacity: 0;
  transition: transform 300ms var(--boost-easing),
              opacity 300ms var(--boost-easing);
}

.boost-overlay.is-visible .boost-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* =============================================================================
   TOOLTIP
   ============================================================================= */

.boost-tooltip {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 200ms ease,
              transform 200ms ease;
  pointer-events: none;
}

.boost-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================================
   COUNTDOWN FLIP ANIMATION
   ============================================================================= */

.boost-countdown-digit {
  transition: transform 300ms var(--boost-easing);
}

.boost-countdown-digit.is-changing {
  animation: boost-flip 300ms var(--boost-easing);
}

@keyframes boost-flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(-90deg); }
  100% { transform: rotateX(0); }
}

/* =============================================================================
   NOTIFICATION/TOAST
   ============================================================================= */

.boost-toast {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 300ms var(--boost-easing),
              opacity 300ms var(--boost-easing);
}

.boost-toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}

.boost-toast.is-leaving {
  transform: translateX(100%);
  opacity: 0;
}

/* =============================================================================
   RESPONSIVE VISIBILITY
   ============================================================================= */

/* Mobile: up to 767px */
@media (max-width: 767px) {
  [data-boost-hide-mobile] {
    display: none !important;
  }
}

/* Tablet: 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  [data-boost-hide-tablet] {
    display: none !important;
  }
}

/* Desktop: 1025px and up */
@media (min-width: 1025px) {
  [data-boost-hide-desktop] {
    display: none !important;
  }
}