/* ===== KEYFRAMES ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%       { opacity: 1; transform: scaleY(1.2); }
}
@keyframes waPulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes lineGrow {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes counterSpin {
  0%   { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(201,169,110,0); }
  50%       { box-shadow: 0 0 20px rgba(201,169,110,0.3); }
}
@keyframes heroTextIn {
  0%   { opacity: 0; transform: translateY(30px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes kenBurns {
  0%   { transform: scale(1)    translate(0,     0);    }
  25%  { transform: scale(1.06) translate(-1.5%, -1%);  }
  50%  { transform: scale(1.1)  translate(1%,   -2%);   }
  75%  { transform: scale(1.07) translate(2%,    1%);   }
  100% { transform: scale(1.04) translate(-1%,   1.5%); }
}
@keyframes ornamentGrow {
  0%   { width: 0; opacity: 0; }
  100% { width: 48px; opacity: 1; }
}

/* ===== HERO ANIMATIONS ===== */
.hero-tagline  { animation: heroTextIn 0.9s ease 0.3s both; }
.hero h1       { animation: heroTextIn 0.9s ease 0.55s both; }
.hero-subtitle { animation: heroTextIn 0.9s ease 0.75s both; }
.hero-btns     { animation: heroTextIn 0.9s ease 0.95s both; }

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
html.rtl .reveal-left {
  transform: translateX(50px);
}
html.rtl .reveal-left.visible {
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}
html.rtl .reveal-right {
  transform: translateX(-50px);
}
html.rtl .reveal-right.visible {
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered delays for grid children */
.stagger-children > *:nth-child(1) { transition-delay: 0s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.5s; }

/* ===== GALLERY ITEM ENTER ===== */
.gallery-item {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.gallery-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Gallery stagger delays — applied inline via JS, these are fallbacks */
.gallery-grid .gallery-item:nth-child(1)  { transition-delay: 0s; }
.gallery-grid .gallery-item:nth-child(2)  { transition-delay: 0.06s; }
.gallery-grid .gallery-item:nth-child(3)  { transition-delay: 0.12s; }
.gallery-grid .gallery-item:nth-child(4)  { transition-delay: 0.18s; }
.gallery-grid .gallery-item:nth-child(5)  { transition-delay: 0.24s; }
.gallery-grid .gallery-item:nth-child(6)  { transition-delay: 0.08s; }
.gallery-grid .gallery-item:nth-child(7)  { transition-delay: 0.14s; }
.gallery-grid .gallery-item:nth-child(8)  { transition-delay: 0.20s; }

/* ===== NAVBAR SCROLLED ===== */
#navbar { transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease; }

/* ===== GOLD LINE UNDERLINE ===== */
.gold-underline {
  position: relative;
  display: inline-block;
}
.gold-underline::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--gold-gradient);
  transition: width 0.8s ease;
}
.gold-underline.visible::after { width: 100%; }
html.rtl .gold-underline::after { left: auto; right: 0; }

/* ===== SERVICE CARD ICON HOVER ===== */
.service-icon svg {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), stroke var(--transition);
}
.service-card:hover .service-icon svg {
  transform: scale(1.2) rotate(-5deg);
}

/* ===== STAT NUMBER ===== */
.stat-number {
  transition: color 0.3s ease;
}
.stat-item:hover .stat-number {
  color: var(--gold-light);
}

/* ===== BTN RIPPLE ===== */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.btn:active::after { opacity: 1; }

/* ===== CARD HOVER GOLD SHIMMER ===== */
.service-card, .about-service-card {
  background-image: linear-gradient(
    120deg,
    transparent 40%,
    rgba(201,169,110,0.04) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  background-position: 200% center;
}
.service-card:hover, .about-service-card:hover {
  animation: shimmer 0.8s ease forwards;
}

/* ===== FOOTER SOCIAL HOVER ===== */
.social-link, .footer-social .social-link {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), color var(--transition), border-color var(--transition), background var(--transition);
}
.social-link:hover, .footer-social .social-link:hover {
  transform: translateY(-4px);
}

/* ===== LIGHTBOX OPEN ANIMATION ===== */
.lightbox-img { animation: scaleIn 0.3s ease; }

/* ===== PAGE HERO CONTENT ===== */
.page-hero-content .breadcrumb   { animation: heroTextIn 0.7s ease 0s both; }
.page-hero-ornament               { animation: ornamentGrow 0.6s ease 0.25s both; }
.page-hero-content h1             { animation: heroTextIn 0.9s ease 0.38s both; }
.page-hero-content .page-hero-subtitle { animation: heroTextIn 0.8s ease 0.58s both; }

/* ===== TIMELINE DOT PULSE ===== */
.timeline-dot { animation: goldGlow 3s ease-in-out infinite; }

/* ===== FLOATING ELEMENTS ===== */
.float-animate { animation: floatUp 4s ease-in-out infinite; }

/* ===== ABOUT BADGE ===== */
.img-badge { animation: scaleIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.8s both; }

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
  }
}