/* ============================================================
   SITE-WIDE CREATIVE ANIMATIONS
   ============================================================ */

:root {
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 0.95s;
}

/* ---- Scroll progress ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 10001;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold));
  box-shadow: 0 0 12px rgba(191, 143, 32, 0.55);
  transform-origin: left center;
  pointer-events: none;
}

[dir="rtl"] .scroll-progress {
  left: auto;
  right: 0;
  transform-origin: right center;
}

/* ---- Nav scroll state ---- */
.nav.is-scrolled {
  box-shadow: 0 8px 32px rgba(6, 34, 60, 0.12);
}

[data-theme="dark"] .nav.is-scrolled {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

.nav.is-scrolled .nav-inner {
  height: 64px;
}

.nav-links a {
  position: relative;
  overflow: hidden;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  inset-inline: 14px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s var(--ease-spring);
  border-radius: 2px;
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
}

/* ---- Core reveal ---- */
.fade-up,
.reveal {
  opacity: 0;
  transform: translate3d(0, 48px, 0) scale(0.96);
  filter: blur(10px);
  transition:
    opacity var(--reveal-duration) var(--ease-spring),
    transform var(--reveal-duration) var(--ease-spring),
    filter var(--reveal-duration) ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.fade-up.visible,
.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

[data-reveal="left"] {
  transform: translate3d(40px, 0, 0) scale(0.96);
}

[dir="ltr"] [data-reveal="left"] {
  transform: translate3d(-40px, 0, 0) scale(0.96);
}

[data-reveal="right"] {
  transform: translate3d(-40px, 0, 0) scale(0.96);
}

[dir="ltr"] [data-reveal="right"] {
  transform: translate3d(40px, 0, 0) scale(0.96);
}

[data-reveal="scale"] {
  transform: scale(0.82);
  filter: blur(6px);
}

[data-reveal="up"].visible,
[data-reveal="left"].visible,
[data-reveal="right"].visible,
[data-reveal="scale"].visible {
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* ---- Section in view ambient ---- */
.section.is-inview::after {
  opacity: 1;
}

.section::after {
  content: "";
  position: absolute;
  top: 12%;
  inset-inline-end: -8%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 143, 32, 0.07), transparent 68%);
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
  z-index: 0;
}

.section-alt.is-inview::after {
  background: radial-gradient(circle, rgba(10, 53, 88, 0.12), transparent 68%);
}

.section > .container,
.stats-section > .container {
  position: relative;
  z-index: 1;
}

/* ---- Section header cascade ---- */
.fade-up.visible .section-label,
.reveal.visible .section-label {
  animation: label-reveal 0.7s var(--ease-spring) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 0.05s);
}

.fade-up.visible .section-title,
.reveal.visible .section-title {
  animation: title-reveal 0.85s var(--ease-spring) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 0.12s);
}

.fade-up.visible .section-subtitle,
.reveal.visible .section-subtitle {
  animation: subtitle-reveal 0.8s var(--ease-spring) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 0.2s);
}

.fade-up.visible .gold-divider,
.reveal.visible .gold-divider {
  animation: divider-grow 0.9s var(--ease-out-expo) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 0.18s);
}

@keyframes label-reveal {
  from {
    opacity: 0;
    letter-spacing: 6px;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    letter-spacing: 2px;
    transform: translateY(0);
  }
}

@keyframes title-reveal {
  from {
    opacity: 0;
    transform: translateY(28px) skewY(2deg);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0) skewY(0);
    filter: blur(0);
  }
}

@keyframes subtitle-reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes divider-grow {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: 60px;
    opacity: 1;
  }
}

/* ---- Hero entrance ---- */
.hero-reveal-child {
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  filter: blur(8px);
  transition:
    opacity 1s var(--ease-spring),
    transform 1s var(--ease-spring),
    filter 1s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.hero-reveal-child.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.hero-title .accent {
  display: inline-block;
  background-image: linear-gradient(
    90deg,
    var(--gold-dark) 0%,
    var(--gold-light) 30%,
    #fff4cc 50%,
    var(--gold-light) 70%,
    var(--gold-dark) 100%
  );
  background-size: 200% auto;
  animation: gold-shimmer 4s linear infinite;
  animation-play-state: paused;
}

.hero-centered.is-animated .hero-title .accent {
  animation-play-state: running;
}

@keyframes gold-shimmer {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

.hero-trust-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--ease-spring),
    transform 0.7s var(--ease-spring);
  transition-delay: var(--reveal-delay, 0ms);
}

.hero-centered.is-animated .hero-trust-item {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Card hover lift ---- */
.service-card,
.project-card,
.goal-card,
.mv-card,
.testimonial-card,
.leader-card,
.ceo-value,
.contact-item,
.whyus-step-card {
  transition:
    transform 0.45s var(--ease-spring),
    box-shadow 0.45s ease,
    border-color 0.35s ease;
}

.service-card:hover,
.project-card:hover,
.goal-card:hover,
.mv-card:hover,
.testimonial-card:hover,
.leader-card:hover,
.ceo-value:hover,
.contact-item:hover {
  transform: translateY(-8px) scale(1.02);
}

/* ---- Stat pop ---- */
.stat-item.visible .stat-icon {
  animation: stat-pop 0.7s var(--ease-spring) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 0.15s);
}

.stat-item.visible .stat-number {
  animation: stat-rise 0.8s var(--ease-spring) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 0.25s);
}

@keyframes stat-pop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-12deg);
  }

  70% {
    transform: scale(1.15) rotate(4deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes stat-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- CEO portrait reveal ---- */
.ceo-portrait {
  opacity: 0;
  transform: translateX(40px) scale(0.94);
  filter: blur(6px);
  transition:
    opacity 1s var(--ease-spring),
    transform 1s var(--ease-spring),
    filter 1s ease;
}

[dir="ltr"] .ceo-portrait {
  transform: translateX(-40px) scale(0.94);
}

.ceo-portrait.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.ceo-quote-mark {
  opacity: 0;
  transform: scale(0.5) rotate(-20deg);
  transition:
    opacity 0.8s var(--ease-spring),
    transform 0.8s var(--ease-spring);
}

.fade-up.visible .ceo-quote-mark {
  opacity: 0.15;
  transform: scale(1) rotate(0deg);
  transition-delay: 0.3s;
}

/* ---- About image reveal ---- */
.about-image-stack {
  opacity: 0;
  transform: translate3d(-40px, 0, 0) scale(0.96);
  transition:
    opacity 1s var(--ease-spring),
    transform 1s var(--ease-spring);
}

[dir="ltr"] .about-image-stack {
  transform: translate3d(40px, 0, 0) scale(0.96);
}

.about-image-stack.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.about-img-main {
  overflow: hidden;
}

.about-img-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.1);
  transition: transform 1.4s var(--ease-spring);
  will-change: transform;
}

.about-image-stack.visible .about-img-main-img {
  transform: scale(1);
}

.about-img-accent {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s var(--ease-spring) 0.35s,
    transform 0.7s var(--ease-spring) 0.35s;
}

.about-image-stack.visible .about-img-accent {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Filter buttons ---- */
.filter-btn {
  transition:
    transform 0.35s var(--ease-spring),
    background 0.3s ease,
    color 0.3s ease,
    box-shadow 0.35s ease;
}

.projects-filter.visible .filter-btn {
  animation: filter-pop 0.55s var(--ease-spring) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + var(--btn-i, 0) * 70ms);
}

@keyframes filter-pop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.filter-btn.active {
  animation: filter-glow 2.4s ease-in-out infinite;
}

@keyframes filter-glow {
  0%,
  100% {
    box-shadow: 0 4px 16px rgba(191, 143, 32, 0.25);
  }

  50% {
    box-shadow: 0 6px 24px rgba(191, 143, 32, 0.42);
  }
}

/* ---- Goals pin bounce ---- */
.goal-card.visible .goal-pin {
  animation: pin-drop 0.65s var(--ease-spring) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 0.1s);
}

@keyframes pin-drop {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(0.6);
  }

  65% {
    transform: translateY(4px) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- Why us step line draw ---- */
.whyus-timeline-rail .whyus-timeline-line {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1.4s var(--ease-out-expo);
}

.whyus-timeline.is-animated .whyus-timeline-line {
  transform: scaleY(1);
}

/* ---- Clients grid fade ---- */
.clients-showcase.visible {
  animation: marquee-fade-in 1s var(--ease-spring) both;
}

@keyframes marquee-fade-in {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ---- Contact form fields ---- */
.contact-form.visible .form-group {
  animation: field-slide 0.65s var(--ease-spring) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + var(--field-i, 0) * 80ms);
}

@keyframes field-slide {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[dir="ltr"] .contact-form.visible .form-group {
  animation-name: field-slide-ltr;
}

@keyframes field-slide-ltr {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---- Footer reveal ---- */
.footer-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.9s var(--ease-spring),
    transform 0.9s var(--ease-spring);
}

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

/* ---- Parallax layers ---- */
[data-parallax] {
  will-change: transform;
}

/* ---- Project extra reveal (keep existing, enhance) ---- */
@keyframes project-reveal {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.94) rotateX(8deg);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0);
    filter: blur(0);
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }

  .fade-up,
  .reveal,
  .hero-reveal-child,
  .ceo-portrait,
  .about-image-stack,
  .about-img-accent,
  .about-img-main-img,
  .footer-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  .fade-up.visible .section-label,
  .fade-up.visible .section-title,
  .fade-up.visible .section-subtitle,
  .fade-up.visible .gold-divider,
  .stat-item.visible .stat-icon,
  .stat-item.visible .stat-number,
  .goal-card.visible .goal-pin,
  .projects-filter.visible .filter-btn,
  .contact-form.visible .form-group,
  .clients-showcase.visible {
    animation: none !important;
  }

  .hero-title .accent {
    animation: none !important;
  }

  .whyus-timeline-rail .whyus-timeline-line {
    transform: scaleY(1) !important;
    transition: none !important;
  }

  .service-card:hover,
  .project-card:hover,
  .goal-card:hover,
  .mv-card:hover,
  .testimonial-card:hover,
  .leader-card:hover,
  .ceo-value:hover,
  .contact-item:hover {
    transform: none !important;
  }
}