/* ============================================================
   MUCIZE LOGHATI — ANIMATIONS CSS v2
   جمعية معجزة لغتي
   ============================================================ */

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children in grids */
.grid-2 .reveal-on-scroll:nth-child(2),
.grid-3 .reveal-on-scroll:nth-child(2),
.grid-4 .reveal-on-scroll:nth-child(2) { transition-delay: .1s; }

.grid-3 .reveal-on-scroll:nth-child(3),
.grid-4 .reveal-on-scroll:nth-child(3) { transition-delay: .2s; }

.grid-4 .reveal-on-scroll:nth-child(4) { transition-delay: .3s; }

/* ============================================================
   HERO ENTRANCE ANIMATION
   ============================================================ */
.hero-content {
  animation: heroSlideIn .9s cubic-bezier(.22, 1, .36, 1) both;
}

.hero-illustration {
  animation: heroCardIn 1s cubic-bezier(.22, 1, .36, 1) .2s both;
}

@keyframes heroSlideIn {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroCardIn {
  from { opacity: 0; transform: translateX(-32px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ============================================================
   HERO BADGE
   ============================================================ */
.hero-badge {
  animation: badgeFadeIn .7s ease .3s both;
}

@keyframes badgeFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO VISUAL CARD FLOAT
   ============================================================ */
.hero-visual-card {
  animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ============================================================
   PAGE BANNER
   ============================================================ */
.page-banner h1 {
  animation: bannerTextIn .7s cubic-bezier(.22, 1, .36, 1) both;
}

.page-banner .breadcrumb {
  animation: bannerTextIn .7s cubic-bezier(.22, 1, .36, 1) .15s both;
}

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

/* ============================================================
   STATS SECTION ENTRANCE
   ============================================================ */
.stat-item { animation: fadeUp .6s ease both; }

.stat-item:nth-child(1) { animation-delay: .0s; }
.stat-item:nth-child(2) { animation-delay: .1s; }
.stat-item:nth-child(3) { animation-delay: .2s; }
.stat-item:nth-child(4) { animation-delay: .3s; }

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

/* ============================================================
   COUNTER NUMBER
   ============================================================ */
.counter {
  display: inline-block;
  position: relative;
}

/* ============================================================
   BUTTON RIPPLE EFFECT
   ============================================================ */
.btn { position: relative; overflow: hidden; }

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .3s ease;
  pointer-events: none;
}

.btn:active::after { background: rgba(255,255,255,.18); }

/* ============================================================
   CARD LIFT — GPU COMPOSITING
   ============================================================ */
.card,
.program-card,
.board-member-card,
.media-card,
.success-card,
.step-item,
.testimonial-card {
  will-change: transform;
}

/* ============================================================
   SECTION TITLE UNDERLINE
   ============================================================ */
.section-title .title-underline { width: 60px; }

/* ============================================================
   PARTNER LOGOS
   ============================================================ */
.partner-logo {
  animation: partnerFadeIn .5s ease both;
}

@keyframes partnerFadeIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-card { animation: fadeUp .65s ease both; }
.testimonial-card:nth-child(2) { animation-delay: .12s; }
.testimonial-card:nth-child(3) { animation-delay: .24s; }

/* ============================================================
   SUCCESS CARD BOUNCE
   ============================================================ */
.success-card:hover .success-num {
  animation: numBounce .35s cubic-bezier(.36, .07, .19, .97);
}

@keyframes numBounce {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

/* ============================================================
   LOADING SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--light) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

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

/* ============================================================
   FOCUS OUTLINE (accessibility)
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* ============================================================
   HERO ORB (slow drift)
   ============================================================ */
.hero-orb-1 {
  animation: orbDrift1 12s ease-in-out infinite;
}

.hero-orb-2 {
  animation: orbDrift2 15s ease-in-out infinite;
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-20px, 20px); }
}

@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(15px, -15px); }
}

/* ============================================================
   CTA ICON
   ============================================================ */
.cta-icon {
  animation: ctaIconPop .8s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes ctaIconPop {
  from { opacity: 0; transform: scale(.6) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .hero-illustration,
  .hero-float-badge,
  .hero-scroll-indicator,
  .nav-toggle,
  .header-actions,
  #site-footer { display: none !important; }

  body { font-size: 12pt; color: #000; }
  .stats-section { -webkit-print-color-adjust: exact; }
}