/* ============================================================
   AYMAN GLOBAL — ANIMATION SYSTEM
   Scroll-reveal, hover effects, page transitions, micro-interactions
   ============================================================ */

/* ------------------------------------------------------------
   1. SCROLL REVEAL CLASSES
   Applied to elements; JS adds .is-visible when in viewport
   ------------------------------------------------------------ */
.reveal-up,
.reveal-fade,
.reveal-left,
.reveal-right {
  will-change: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 700ms;
  transition-property: opacity, transform;
}

/* Initial (hidden) states */
.reveal-up    { opacity: 0; transform: translateY(64px); }
.reveal-fade  { opacity: 0; transform: translateY(24px); }
.reveal-left  { opacity: 0; transform: translateX(-64px); }
.reveal-right { opacity: 0; transform: translateX(64px); }

/* Visible state — added by IntersectionObserver */
.reveal-up.is-visible,
.reveal-fade.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Staggered children — add data-delay="N" (0-5) to elements */
[data-delay="1"] { transition-delay: 100ms; }
[data-delay="2"] { transition-delay: 200ms; }
[data-delay="3"] { transition-delay: 300ms; }
[data-delay="4"] { transition-delay: 400ms; }
[data-delay="5"] { transition-delay: 500ms; }

/* ------------------------------------------------------------
   2. HOVER LIFT — Service cards, pricing boxes, team cards
   ------------------------------------------------------------ */
.hover-lift {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(10,22,40,.14), 0 6px 16px rgba(10,22,40,.08);
}

/* Gold accent variant — for featured/highlighted cards */
.hover-lift--gold:hover {
  box-shadow: 0 20px 48px rgba(201,168,76,.22), 0 6px 16px rgba(201,168,76,.12);
}

/* ------------------------------------------------------------
   3. BTN PULSE — Primary CTA buttons
   ------------------------------------------------------------ */
@keyframes btn-pulse-ring {
  0%   { transform: scale(1);    opacity: .25; }
  100% { transform: scale(1.3);  opacity: 0; }
}

.btn-pulse {
  position: relative;
  isolation: isolate;
}
.btn-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-gold);
  z-index: -1;
  animation: btn-pulse-ring 2.5s var(--ease-out) infinite;
  opacity: 0;
}
.btn-pulse:hover::after {
  animation: btn-pulse-ring 2s var(--ease-out) infinite;
}

/* ------------------------------------------------------------
   4. HERO ENTRANCE SEQUENCE
   ------------------------------------------------------------ */
@keyframes hero-drop {
  from { opacity: 0; transform: translateY(-32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-animate > * {
  animation: hero-drop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-animate > *:nth-child(1) { animation-delay: 0.15s; }
.hero-animate > *:nth-child(2) { animation-delay: 0.35s; }
.hero-animate > *:nth-child(3) { animation-delay: 0.52s; }
.hero-animate > *:nth-child(4) { animation-delay: 0.68s; }
.hero-animate > *:nth-child(5) { animation-delay: 0.82s; }

/* ------------------------------------------------------------
   5. PARALLAX WRAPPER
   JS applies transform via scroll listener
   ------------------------------------------------------------ */
.parallax-layer {
  will-change: transform;
  transition: transform 0ms linear;
}

/* ------------------------------------------------------------
   6. COUNTER ANIMATION (stats section)
   ------------------------------------------------------------ */
.stat-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--color-gold);
  font-family: var(--font-heading);
  line-height: 1;
}

/* ------------------------------------------------------------
   7. NAV LINK UNDERLINE SLIDE
   ------------------------------------------------------------ */
/* Nav underline slide removed — replaced by gold pill active state in header.css */

/* ------------------------------------------------------------
   8. IMAGE ZOOM HOVER (service / about images)
   ------------------------------------------------------------ */
.img-zoom-wrap {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.img-zoom-wrap img {
  transition: transform 600ms var(--ease-out);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-zoom-wrap:hover img { transform: scale(1.06); }

/* ------------------------------------------------------------
   9. FLOATING BADGE PULSE (accent badges on hero/cards)
   ------------------------------------------------------------ */
@keyframes badge-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.badge-float {
  animation: badge-float 3.5s ease-in-out infinite;
}

/* ------------------------------------------------------------
   10. SKELETON LOADING (for async content like jobs listings)
   ------------------------------------------------------------ */
@keyframes skeleton-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 1200px 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
  border-radius: var(--radius-md);
}

/* ------------------------------------------------------------
   11. ROTATING HEADLINE WORDS (hero subtext cycling)
   ------------------------------------------------------------ */
@keyframes word-slide-in {
  from { opacity: 0; transform: translateY(60%); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0);   clip-path: inset(0 0 0% 0); }
}
@keyframes word-slide-out {
  from { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0% 0); }
  to   { opacity: 0; transform: translateY(-60%); clip-path: inset(100% 0 0 0); }
}

.rotating-word {
  display: inline-block;
  overflow: hidden;
}
.rotating-word.is-in  { animation: word-slide-in  0.8s cubic-bezier(0.86, 0, 0.07, 1) both; }
.rotating-word.is-out { animation: word-slide-out 0.8s cubic-bezier(0.86, 0, 0.07, 1) both; }

/* ------------------------------------------------------------
   12. FLOATING GENTLE OSCILLATION (about image, decorative elements)
   ------------------------------------------------------------ */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px)   rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(0.5deg); }
  66%       { transform: translateY(-5px)  rotate(-0.5deg); }
}
.float-gentle {
  animation: float-gentle 6s ease-in-out infinite;
  will-change: transform;
}

/* ------------------------------------------------------------
   13. SECTION SCALE REVEAL ("coming into focus" entrance)
       Use on section wrappers instead of plain reveal-up
   ------------------------------------------------------------ */
.reveal-scale {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  will-change: opacity, transform;
  transition: opacity  0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ------------------------------------------------------------
   14. CARD LIFT WITH EXPO EASE (upgraded hover)
   ------------------------------------------------------------ */
.hover-lift {
  transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.3s ease !important;
}
.hover-lift:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 60px rgba(10,22,40,.16), 0 6px 16px rgba(10,22,40,.08) !important;
}
.hover-lift--gold:hover {
  box-shadow: 0 24px 60px rgba(201,168,76,.28), 0 6px 16px rgba(201,168,76,.14) !important;
}

/* ------------------------------------------------------------
   15. ICON ACCENT — spin + glow on card hover
   ------------------------------------------------------------ */
.why-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(201,168,76,.1);
  color: var(--color-gold);
  margin-bottom: var(--space-4);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.why-card:hover .why-card__icon {
  background: var(--color-gold);
  color: var(--color-navy);
  box-shadow: 0 8px 24px rgba(201,168,76,.35);
  transform: rotate(8deg) scale(1.1);
}

/* ------------------------------------------------------------
   16. BUTTON ARROW SLIDE-IN on hover
   ------------------------------------------------------------ */
.btn-arrow-slide {
  overflow: hidden;
  position: relative;
}
.btn-arrow-slide .btn__text {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-arrow-slide .btn__icon {
  position: absolute;
  right: -1.8em;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              opacity   0.4s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
}
.btn-arrow-slide:hover .btn__text { transform: translateX(-6px); }
.btn-arrow-slide:hover .btn__icon { transform: translate(-1.8em, -50%); opacity: 1; }

/* ------------------------------------------------------------
   17. DROPDOWN EXPO EASE (nav sub-menu upgrade)
   ------------------------------------------------------------ */
.sub-menu {
  transition: opacity   0.85s cubic-bezier(0.19, 1, 0.22, 1),
              visibility 0.85s cubic-bezier(0.19, 1, 0.22, 1),
              transform  0.85s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* ------------------------------------------------------------
   18. CASCADE FROM LEFT — Service cards (left → bottom → right)
   ------------------------------------------------------------ */
.cascade-left {
  opacity: 0;
  transform: translateX(-90px) rotate(-3deg);
  will-change: opacity, transform;
  transition: opacity  1.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cascade-bottom {
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  will-change: opacity, transform;
  transition: opacity  1.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cascade-right {
  opacity: 0;
  transform: translateX(90px) rotate(3deg);
  will-change: opacity, transform;
  transition: opacity  1.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cascade-left.is-visible,
.cascade-bottom.is-visible,
.cascade-right.is-visible {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1);
}
.cascade-bottom { transition-delay: 200ms; }
.cascade-right  { transition-delay: 400ms; }

/* ------------------------------------------------------------
   19. FLIP CARD — Why-Us cards (3D flip in on scroll)
   ------------------------------------------------------------ */
.why-grid { perspective: 1200px; }

.why-card.flip-card {
  opacity: 0;
  transform: rotateX(65deg) translateY(50px) scale(0.92);
  transform-origin: top center;
  will-change: opacity, transform;
  transition: opacity   1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.why-card.flip-card.is-visible {
  opacity: 1;
  transform: rotateX(0deg) translateY(0) scale(1);
}
/* Stagger via data-delay attribute */
.why-card.flip-card[data-delay="1"] { transition-delay: 0ms; }
.why-card.flip-card[data-delay="2"] { transition-delay: 150ms; }
.why-card.flip-card[data-delay="3"] { transition-delay: 300ms; }

/* ============================================================
   REDUCED MOTION — Respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-up,
  .reveal-fade,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .rotating-word { animation: none !important; }
  .float-gentle  { animation: none !important; }
  .badge-float   { animation: none !important; }
}