/* ==========================================================
   RAM Elevators — Premium Animations v1
   Pure CSS animations: transform + opacity only.
   No layout-triggering properties animated.
   ========================================================== */

/* ----------------------------------------------------------
   1. KEYFRAMES
   ---------------------------------------------------------- */

@keyframes ram-fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ram-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ram-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ram-scale-in {
  from { opacity: 0.7; transform: scale(1.025); }
  to   { opacity: 1;   transform: scale(1); }
}


/* ----------------------------------------------------------
   2. HEADER — initial load animation
   ---------------------------------------------------------- */

#header {
  animation: ram-fade-down 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Class toggled by JS when page is scrolled */
#header.ram-scrolled .container-ram > div {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;
}


/* ----------------------------------------------------------
   3. HERO — staggered entrance
   ---------------------------------------------------------- */

#hero video {
  animation: ram-scale-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#hero h1 {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

#hero p.text-lg,
#hero p.text-xl {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 550ms 80ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 550ms 80ms cubic-bezier(0.22, 1, 0.36, 1);
}

#hero .ram-hero-buttons {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms 160ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 550ms 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

#hero .ram-hero-scroll {
  opacity: 0;
  transition: opacity 500ms 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

#hero h1.ram-visible,
#hero p.text-lg.ram-visible,
#hero p.text-xl.ram-visible,
#hero .ram-hero-buttons.ram-visible,
#hero .ram-hero-scroll.ram-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------------------------
   4. SCROLL REVEAL
   ---------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--ram-delay, 0ms);
}

[data-reveal].ram-visible {
  opacity: 1;
  transform: translateY(0);
}

.ram-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--ram-delay, 0ms);
}

.ram-reveal.ram-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ----------------------------------------------------------
   5. BUTTONS — hover + active
   ---------------------------------------------------------- */

.btn-primary,
.btn-outline,
.ram-submit {
  transition: background-color 220ms ease,
              border-color 220ms ease,
              box-shadow 220ms ease,
              transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.btn-primary:hover,
.btn-outline:hover,
.ram-submit:hover {
  transform: translateY(-2px) !important;
}

.btn-primary:active,
.btn-outline:active,
.ram-submit:active {
  transform: translateY(0) scale(0.98) !important;
}

a.ram-main-btn,
a.ram-alt-btn {
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease !important;
}

a.ram-main-btn:hover,
a.ram-alt-btn:hover {
  transform: translateY(-2px) !important;
}

a.ram-main-btn:active,
a.ram-alt-btn:active {
  transform: translateY(0) scale(0.98) !important;
}


/* ----------------------------------------------------------
   6. SERVICE CARDS
   ---------------------------------------------------------- */

#services .group > div {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 300ms ease !important;
}

#services .group:hover > div {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(11, 122, 111, 0.10) !important;
  border-color: rgba(11, 122, 111, 0.20) !important;
}

#services img {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#services .group:hover img {
  transform: scale(1.03) !important;
}


/* ----------------------------------------------------------
   7. TYPE / PROJECT / WHY CARDS
   ---------------------------------------------------------- */

.ram-type-card,
.ram-project-card,
.ram-why-card,
.ram-extra-card {
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 280ms ease,
              border-color 280ms ease !important;
}

.ram-type-img img,
.ram-project-image img {
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.ram-type-card:hover .ram-type-img img {
  transform: scale(1.03) !important;
}

.ram-project-card:hover .ram-project-image img {
  transform: scale(1.03) !important;
}


/* ----------------------------------------------------------
   8. PROCESS STEPS
   ---------------------------------------------------------- */

.ram-step {
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 280ms ease,
              border-color 280ms ease;
}

.ram-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(11, 122, 111, 0.08);
  border-color: rgba(11, 122, 111, 0.20);
}


/* ----------------------------------------------------------
   9. FAQ ACCORDION — smooth
   ---------------------------------------------------------- */

.ram-faq-a {
  display: block !important;
  overflow: hidden;
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  transition: max-height 350ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 300ms ease,
              padding 300ms ease !important;
}

.ram-faq-item.open .ram-faq-a {
  max-height: 220px;
  opacity: 1;
  padding-bottom: 20px !important;
}

.ram-faq-plus {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* ----------------------------------------------------------
   10. LOGO FADE
   ---------------------------------------------------------- */

header a[aria-label*="رام"] {
  animation: ram-fade-in 500ms 200ms ease both;
}


/* ----------------------------------------------------------
   11. PREFERS-REDUCED-MOTION
   ---------------------------------------------------------- */

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

  [data-reveal],
  .ram-reveal,
  #hero h1,
  #hero p.text-lg,
  #hero p.text-xl,
  #hero .ram-hero-buttons,
  #hero .ram-hero-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  #header { animation: none !important; }
  #hero video { animation: none !important; }
  header a[aria-label*="رام"] { animation: none !important; }
}


/* ----------------------------------------------------------
   12. MOBILE — simplified
   ---------------------------------------------------------- */

@media (max-width: 768px) {
  [data-reveal], .ram-reveal { transform: translateY(12px); }

  #hero h1,
  #hero p.text-lg,
  #hero p.text-xl,
  #hero .ram-hero-buttons { transform: translateY(10px); }

  .btn-primary:hover,
  .btn-outline:hover { transform: none !important; }
}