/* Homepage motion — hero entrance (CSS only) + scroll reveals (classes added by animations.js).
   Scoped to .amanah-site so the About page is untouched. Uses `translate` rather than
   `transform` so existing hover transforms on cards and buttons keep working. */

@keyframes am-rise { from { opacity: 0; translate: 0 28px } to { opacity: 1; translate: 0 0 } }
@keyframes am-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes am-line { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes am-drift { from { background-position: 0 0, 0 0 } to { background-position: 0 0, 82px 0 } }
@keyframes am-pulse { from { opacity: .55 } to { opacity: 1 } }
@keyframes am-sway { from { transform: rotate(-26deg) } to { transform: rotate(-19deg) } }
@keyframes am-breathe { from { scale: 1 } to { scale: 1.06 } }

/* ---------- Hero entrance ---------- */
.amanah-site .hero-content > * { animation: am-rise .9s cubic-bezier(.2, .7, .2, 1) both }
.amanah-site .hero-content > .eyebrow { animation-delay: .15s }
.amanah-site .hero-content > h1 { animation-delay: .3s }
.amanah-site .hero-content h1 em { display: inline-block; animation: am-rise 1s .55s cubic-bezier(.2, .7, .2, 1) both }
.amanah-site .hero-content > p { animation-delay: .7s }
.amanah-site .hero-content > .hero-actions { animation-delay: .85s }
.amanah-site .eyebrow span { transform-origin: left center; animation: am-line .8s .4s cubic-bezier(.6, 0, .2, 1) both }
.amanah-site .hero-visual { animation: am-fade 1.2s .2s both }
.amanah-site .hero-brand { animation: am-rise 1.1s .5s cubic-bezier(.2, .7, .2, 1) both }
.amanah-site .hero-aside { animation: am-fade 1.2s 1.1s both }
.amanah-site .hero-corner { animation: am-rise 1s 1.2s cubic-bezier(.2, .7, .2, 1) both }

/* Ambient background motion: gold grid lines drift, perspective arc glows */
.amanah-site .hero-bahrain:before { animation: am-drift 22s linear infinite }
.amanah-site .hero-bahrain:after { animation: am-pulse 5s ease-in-out infinite alternate }
.amanah-site .approach-section:before { animation: am-sway 18s ease-in-out infinite alternate }
.amanah-site .contact-glow { animation: am-breathe 7s ease-in-out infinite alternate }

/* ---------- Scroll reveals ---------- */
.amanah-site .reveal {
  opacity: 0;
  translate: 0 32px;
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
              translate .8s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
              background .2s, transform .2s;
}
.amanah-site .reveal.is-visible { opacity: 1; translate: 0 0 }

.amanah-site .reveal .section-label__line,
.amanah-site .reveal .eyebrow span {
  transform: scaleX(0);
  transform-origin: left center;
  animation: none;
  transition: transform .9s cubic-bezier(.6, 0, .2, 1) calc(var(--reveal-delay, 0ms) + .25s);
}
.amanah-site .reveal.is-visible .section-label__line,
.amanah-site .reveal.is-visible .eyebrow span { transform: scaleX(1) }

/* ---------- Hover details ---------- */
.amanah-site .service-icon { transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .35s, color .35s }
.amanah-site .service-card:hover .service-icon { transform: rotate(-8deg) scale(1.07); background: var(--gold); color: var(--navy) }
.amanah-site .approach-item svg,
.amanah-site .sector-item svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1) }
.amanah-site .approach-item:hover svg,
.amanah-site .sector-item:hover svg { transform: translateY(-4px) }
.amanah-site .contact-card > svg { transition: transform .25s }
.amanah-site .contact-card:hover > svg { transform: translateX(5px) }

/* Lines draw from the reading start in Arabic */
[dir=rtl] .eyebrow span,
[dir=rtl] .section-label__line { transform-origin: right center !important }

@media (prefers-reduced-motion: reduce) {
  .amanah-site *, .amanah-site *:before, .amanah-site *:after { animation: none !important; transition: none !important }
  .amanah-site .reveal { opacity: 1; translate: none }
  .amanah-site .reveal .section-label__line,
  .amanah-site .reveal .eyebrow span { transform: none }
}