/* 
 * ==============================================================================
 * شركة أساس للمقاولات العامة | ASAS Construction
 * ملف: css/animations.css
 * الفئة: Corporate Trust (حركات رصينة وسريعة 400ms مع توافق WCAG 2.1 AA)
 * ==============================================================================
 */

/* ═══ Keyframes — Corporate Trust (سرعة مؤسسية) ═══ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeUpSoft {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══ Reveal Classes (400ms — أسرع من Japandi/Warm) ═══ */

.reveal-fade {
  opacity: 0;
  transition: opacity 400ms var(--ease-out-expo);
  will-change: opacity;
}

.reveal-fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease-out-expo),
              transform 400ms var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal-fade.is-visible,
.reveal-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ Stagger (60ms delay — سريع) ═══ */

.stagger-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease-out-expo),
              transform 400ms var(--ease-out-expo);
  transition-delay: calc(var(--stagger-index, 0) * 60ms);
}

.stagger-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ will-change cleanup ═══ */

.animations-ready .reveal-fade,
.animations-ready .reveal-fade-up,
.animations-ready .stagger-item {
  will-change: auto;
}

/* ═══ Skip to content (WCAG 2.1 AA) ═══ */

.skip-to-content {
  position: absolute;
  top: -100px;
  right: 1rem;
  background-color: var(--gold);
  color: var(--navy);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  z-index: 1000;
  transition: top 200ms var(--ease-out-expo);
}

.skip-to-content:focus {
  top: 1rem;
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* ═══ prefers-reduced-motion (WCAG إلزامي) ═══ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .reveal-fade,
  .reveal-fade-up,
  .stagger-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}