/* ===========================================================================
   animations.css — shared motion layer for سحابة نورة
   Loaded on every page after main.css so it can decorate the shared shell
   (nav, buttons, cards, footer) as well as page-specific blocks.

   Everything in here is decorative. main.css already neutralises transitions
   and AOS under prefers-reduced-motion; this file adds its own guard at the
   bottom for the looping keyframe animations, which that block cannot stop.
   =========================================================================== */

/* ---------------------------- keyframes ---------------------------------- */
@keyframes nc-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(58, 199, 139, 0.55); }
  70%  { box-shadow: 0 0 0 0.9rem rgba(58, 199, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 199, 139, 0); }
}

@keyframes nc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.4rem); }
}

@keyframes nc-fade-in-down {
  from { opacity: 0; transform: translateY(-0.8rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nc-sheen {
  from { transform: translateX(-160%) skewX(-18deg); }
  to   { transform: translateX(160%) skewX(-18deg); }
}

@keyframes nc-aurora {
  0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: 0.9;  transform: translate3d(0, -2%, 0) scale(1.06); }
}

/* ------------------------- scroll progress bar --------------------------- */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1080;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: right center; /* RTL: fills from the right */
  background: linear-gradient(to left, var(--bs-teal), var(--bs-pink));
  will-change: transform;
}

/* --------------------------- sticky nav shell ---------------------------- */
.site-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 1040;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.site-nav .nav-wrapper {
  transition: padding 0.35s ease, backdrop-filter 0.35s ease;
}

.site-nav.is-scrolled {
  background-color: rgba(13, 8, 44, 0.82) !important;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-nav.is-scrolled .nav-wrapper {
  padding-block: 1.2rem !important;
}

/* animated underline on the desktop nav links */
.nav-links li a {
  position: relative;
  padding-block-end: 0.4rem;
}

.nav-links li a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--bs-teal);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s ease;
}

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

/* offcanvas links stagger in when the sheet opens */
.offcanvas.show .offcanvas-body a {
  animation: nc-fade-in-down 0.4s both;
}

.offcanvas.show .offcanvas-body a:nth-child(1) { animation-delay: 0.04s; }
.offcanvas.show .offcanvas-body a:nth-child(2) { animation-delay: 0.08s; }
.offcanvas.show .offcanvas-body a:nth-child(3) { animation-delay: 0.12s; }
.offcanvas.show .offcanvas-body a:nth-child(4) { animation-delay: 0.16s; }
.offcanvas.show .offcanvas-body a:nth-child(5) { animation-delay: 0.20s; }
.offcanvas.show .offcanvas-body a:nth-child(6) { animation-delay: 0.24s; }
.offcanvas.show .offcanvas-body a:nth-child(7) { animation-delay: 0.28s; }
.offcanvas.show .offcanvas-body a:nth-child(8) { animation-delay: 0.32s; }

/* ------------------------------ buttons ---------------------------------- */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 1.2rem 2.8rem rgba(58, 199, 139, 0.32);
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after {
  animation: nc-sheen 0.75s ease;
}

.btn-primary:active {
  transform: translateY(-1px);
}

/* the outline "تواصل مع فريقنا" pill in the hero */
.hero-actions .box.btn-contact-us {
  transition: transform 0.28s ease, border-color 0.28s ease, background-color 0.28s ease;
}

.hero-actions .box.btn-contact-us:hover,
.hero-actions .box.btn-contact-us:focus-visible {
  transform: translateY(-3px);
  border-color: var(--bs-teal);
  background-color: var(--bs-gray-500);
}

/* arrows inside CTAs drift toward the reading direction on hover */
.btn img,
.link-arrow img {
  transition: transform 0.3s ease;
}

.btn:hover img,
.btn:focus-visible img,
.link-arrow:hover img,
.link-arrow:focus-visible img {
  transform: translateX(-0.5rem);
}

/* ------------------------------- cards ----------------------------------- */
.infra-boxes .box,
.government-boxes .box,
.why-norah-boxes .box,
.cloud-boxes .box,
.contact-card,
.stat-card {
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease,
    background-color 0.35s ease;
}

.infra-boxes .box:hover,
.infra-boxes .box:focus-within,
.government-boxes .box:hover,
.why-norah-boxes .box:hover,
.contact-card:hover,
.contact-card:focus-within,
.stat-card:hover {
  transform: translateY(-6px);
  border-color: var(--bs-pink);
  box-shadow: 0 1.6rem 4rem rgba(212, 187, 255, 0.16);
}

.cloud-boxes .box:hover {
  transform: translateX(-6px);
  border-color: var(--bs-teal);
  box-shadow: 0 1rem 3rem rgba(58, 199, 139, 0.14);
}

/* the leading icon in a card lifts with it */
.infra-boxes .box > img:first-child,
.government-boxes .box > img:first-child,
.why-norah-boxes .box img {
  transition: transform 0.35s ease;
}

.infra-boxes .box:hover > img:first-child,
.government-boxes .box:hover > img:first-child,
.why-norah-boxes .box:hover img {
  transform: scale(1.12) rotate(-4deg);
}

/* the service cards are links now — keep the arrow reading as an affordance */
.service-card .service-arrow {
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0.65;
}

.service-card:hover .service-arrow,
.service-card:focus-visible .service-arrow {
  transform: translateX(-0.8rem);
  opacity: 1;
}

/* the sec2 "معتمدة محلياً" pills */
.sec2 .box {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.sec2 .box:hover {
  transform: translateY(-4px);
  background-color: var(--bs-gray-700);
}

/* --------------------------- hero decoration ----------------------------- */
.hero-media img {
  animation: nc-float 7s ease-in-out infinite;
  will-change: transform;
}

.dot.bg-success {
  animation: nc-pulse-ring 2.4s ease-out infinite;
}

/* soft moving aurora behind the hero — purely decorative */
.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-aurora::before,
.hero-aurora::after {
  content: "";
  position: absolute;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  filter: blur(90px);
  animation: nc-aurora 12s ease-in-out infinite;
}

.hero-aurora::before {
  inset-block-start: -14rem;
  inset-inline-start: -10rem;
  background: rgba(212, 187, 255, 0.22);
}

.hero-aurora::after {
  inset-block-end: -18rem;
  inset-inline-end: -8rem;
  background: rgba(58, 199, 139, 0.16);
  animation-delay: -6s;
}

/* ------------------------------ accordion -------------------------------- */
.custom-accordion .accordion-item {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-accordion .accordion-item:hover {
  border-color: var(--bs-pink);
}

.custom-accordion .accordion-button:not(.collapsed) {
  color: var(--bs-teal);
}

.custom-accordion .accordion-icon::before {
  display: inline-block;
  transition: transform 0.3s ease;
}

.custom-accordion .accordion-button:not(.collapsed) .accordion-icon::before {
  transform: rotate(180deg);
}

/* ------------------------------- footer ---------------------------------- */
footer a {
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-flex;
}

footer a:hover,
footer a:focus-visible {
  color: var(--bs-teal) !important;
  transform: translateX(-0.4rem);
}

.social-link {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  border: 1px solid var(--bs-gray-300);
  background-color: var(--bs-gray-400);
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-4px) !important;
  border-color: var(--bs-teal);
  background-color: var(--bs-gray-500);
}

/* ----------------------------- back to top ------------------------------- */
.back-to-top {
  position: fixed;
  inset-block-end: 2.4rem;
  inset-inline-start: 2.4rem;
  z-index: 1050;
  width: 4.8rem;
  height: 4.8rem;
  border: 1px solid var(--bs-gray-300);
  border-radius: 9999px;
  background-color: rgba(35, 26, 70, 0.9);
  color: var(--bs-purple);
  font-size: 2rem;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.2rem);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease,
    background-color 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--bs-teal);
  color: var(--bs-dark);
}

/* --------------------------- reduced motion ------------------------------ */
/* main.css already flattens transitions and AOS; these are the looping
   animations and the fixed chrome that need switching off explicitly. */
@media (prefers-reduced-motion: reduce) {
  .hero-media img,
  .dot.bg-success,
  .hero-aurora::before,
  .hero-aurora::after,
  .offcanvas.show .offcanvas-body a,
  .btn-primary:hover::after {
    animation: none !important;
  }

  .scroll-progress {
    display: none;
  }

  .back-to-top {
    transform: none;
  }
}

/* --------------------- horizontal-overflow guard ------------------------- */
/* AOS's fade-left / fade-right park an element 100px outside its column
   before it animates in. On narrow screens those columns are already the
   full width of the viewport, so the offset spills past the edge and the
   page can be panned sideways until the reveal fires. Below the lg
   breakpoint the two-column layouts stack anyway, so give those blocks the
   same vertical entrance as fade-up and keep the motion on one axis. */
@media (max-width: 991.98px) {
  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: translate3d(0, 4rem, 0);
  }

  [data-aos="fade-left"].aos-animate,
  [data-aos="fade-right"].aos-animate {
    transform: translate3d(0, 0, 0);
  }
}