/* =============================================================================
   Alkaraji motion layer
   -----------------------------------------------------------------------------
   Presentation half of the motion system; the choreography lives in
   wwwroot/js/alkaraji.motion.js. Split so the look-and-feel (colours, blur
   radii, keyframes) can be retuned without touching timing logic.

   Two rules hold this together:

   1. Nothing here hides content on its own. Elements are pre-hidden only under
      `html.ak-js`, a class set by an inline script in <head> that removes
      itself again if the motion script never signals ready - so a failed or
      blocked script can never leave the page blank.
   2. Every hiding/moving rule sits inside `prefers-reduced-motion: no-preference`
      or is neutralised by the reduce block at the bottom of this file.

   Direction: the site is bilingual, so horizontal motion uses logical
   properties (inset-inline-*) or is flipped in JS via the rtl flag. Never
   hard-code left/right for anything that moves.
   ============================================================================= */

:root {
  --ak-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ak-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ak-ease-io-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ak-gold-rgb: 196, 148, 62;
  --ak-navy-rgb: 23, 28, 43;
}

/* -----------------------------------------------------------------------------
   Reveal arming
   The JS writes inline opacity/transform per frame; CSS only covers the gap
   between first paint and the script running, so there is no flash of
   un-animated content.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.ak-js [data-ak-reveal] { opacity: 0; }
  html.ak-js [data-ak-split] { opacity: 0; }

  /* Once played, the element is handed back to the stylesheet: the JS clears
     its inline styles, and this keeps it visible without them. */
  html.ak-js [data-ak-reveal].ak-in { opacity: 1; }
}

.ak-anim { will-change: transform, opacity, filter; }
.ak-anim-done { will-change: auto; }

/* Split-text words. The inner span slides out of the clipped outer span.
   Arabic is split on word boundaries only - never characters, which would
   break glyph shaping - and the padding/negative-margin pair keeps the
   Tajawal diacritics and descenders from being clipped by the overflow. */
.ak-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.18em 0.04em 0.16em;
  margin: -0.18em -0.04em -0.16em;
}
.ak-word-i {
  display: inline-block;
  will-change: transform;
}

/* -----------------------------------------------------------------------------
   Scroll progress bar (top hairline, above the sticky header)
   -------------------------------------------------------------------------- */
.ak-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 100%;
  z-index: 1030;
  pointer-events: none;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold), #e9c477, var(--gold));
  box-shadow: 0 0 12px rgba(var(--ak-gold-rgb), 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
}
html[dir="rtl"] .ak-progress { transform-origin: right center; }
.ak-progress.is-live { opacity: 1; }

/* -----------------------------------------------------------------------------
   Header: shrink on scroll, retract on scroll-down, return on scroll-up
   -------------------------------------------------------------------------- */
.site-header {
  transition: box-shadow 0.3s ease, border-color 0.3s ease,
              transform 0.45s var(--ak-ease-io-quart),
              background-color 0.3s ease;
  will-change: transform;
}
.site-header .navbar { transition: padding 0.35s var(--ak-ease-out-expo); }
.site-header .navbar-brand img { transition: height 0.35s var(--ak-ease-out-expo); }

.site-header.is-shrunk .navbar { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; }
.site-header.is-shrunk .navbar-brand img { height: 36px; }
.site-header.is-shrunk {
  background-color: rgba(23, 28, 43, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

.site-header.is-retracted { transform: translateY(-100%); }

/* Nav underline sweeps in from the reading edge */
.site-header .nav-link::after {
  transform-origin: left center;
  transition: transform 0.32s var(--ak-ease-out-expo);
}
html[dir="rtl"] .site-header .nav-link::after { transform-origin: right center; }
.site-header .nav-link { transition: color 0.2s ease; }

/* Mobile menu items are staggered in by JS via .ak-menu-in */
@media (prefers-reduced-motion: no-preference) {
  .site-header .navbar-collapse.collapsing .nav-item,
  .site-header .navbar-collapse.ak-menu-in .nav-item {
    opacity: 0;
    transform: translateY(-8px);
  }
  .site-header .navbar-collapse.ak-menu-in .nav-item {
    animation: ak-menu-item 0.45s var(--ak-ease-out-expo) forwards;
    animation-delay: calc(var(--ak-i, 0) * 55ms);
  }
}
@keyframes ak-menu-item {
  to { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------------------------
   Page-transition veil
   Hidden by default: it is only ever raised by a click the script handled, and
   lowered again on the next page ready event.
   -------------------------------------------------------------------------- */
.ak-veil {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  pointer-events: none;
}
.ak-veil.is-active { display: block; pointer-events: all; }
.ak-veil-panel {
  position: absolute;
  inset-block: 0;
  width: 34%;
  background: var(--navy);
  transform: scaleY(0);
  will-change: transform;
}
.ak-veil-panel::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ak-veil-panel:nth-child(1) { inset-inline-start: 0; }
.ak-veil-panel:nth-child(2) { inset-inline-start: 33%; }
.ak-veil-panel:nth-child(3) { inset-inline-start: 66%; width: 35%; }

/* -----------------------------------------------------------------------------
   Back-to-top dial - the ring traces read progress
   -------------------------------------------------------------------------- */
.ak-totop {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-end: 26px;
  width: 48px;
  height: 48px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  z-index: 1035;
  background: var(--navy);
  color: var(--gold);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.7);
  transition: opacity 0.4s ease, transform 0.5s var(--ak-ease-out-back), visibility 0.4s;
  box-shadow: 0 10px 26px rgba(var(--ak-navy-rgb), 0.28);
}
.ak-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ak-totop:hover { color: var(--white); }
.ak-totop:hover .ak-totop-bar { stroke: var(--white); }
.ak-totop i { font-size: 1.05rem; line-height: 1; transition: transform 0.3s var(--ak-ease-out-back); }
.ak-totop:hover i { transform: translateY(-3px); }
.ak-totop svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ak-totop circle { fill: none; stroke-width: 2; }
.ak-totop-track { stroke: rgba(250, 250, 248, 0.16); }
.ak-totop-bar { stroke: var(--gold); stroke-linecap: round; transition: stroke 0.25s ease; }

/* -----------------------------------------------------------------------------
   Hero accents - a glow that tracks the pointer and a gold edge-sweep,
   injected by JS so the Razor views stay clean. The background-field role
   (drifting orbs, a panning grid) this block used to also carry is now the
   sitewide network canvas's job (see .ak-bg-network in site.css) - it plays
   behind every page, hero included, so a second field here would just compete
   with it rather than add anything.
   -------------------------------------------------------------------------- */
.hero-section { position: relative; overflow: hidden; isolation: isolate; }
.hero-section > .container { position: relative; z-index: 2; }

.ak-hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ak-hero-glow {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  background: radial-gradient(circle, rgba(var(--ak-gold-rgb), 0.20), transparent 62%);
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}
.hero-section.ak-pointer-in .ak-hero-glow { opacity: 1; }

/* Gold hairline that sweeps the bottom edge of the hero */
.ak-hero-edge {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ak-gold-rgb), 0.85), transparent);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: ak-edge-sweep 6s var(--ak-ease-io-quart) infinite;
}
@keyframes ak-edge-sweep {
  0%   { background-position: -60% 0; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { background-position: 160% 0; opacity: 0; }
}

/* Hero artwork: slow idle float, with JS parallax layered on the wrapper */
.ak-float { animation: ak-float 7s ease-in-out infinite; }
@keyframes ak-float {
  0%, 100% { transform: translateY(-9px); }
  50%      { transform: translateY(9px); }
}
.ak-float-wrap { display: inline-block; will-change: transform; }

/* -----------------------------------------------------------------------------
   Cards: pointer-tracked tilt + spotlight
   -------------------------------------------------------------------------- */
.ak-tilt { transform-style: preserve-3d; position: relative; }
.ak-tilt.is-hover {
  /* A navy-tinted shadow reads as "darker than the surroundings" - on a page
     that is already dark, that was invisible. A true black shadow plus the
     existing gold border/spot accents still gives the hover lift its pop. */
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
  border-color: rgba(var(--ak-gold-rgb), 0.45);
}
.ak-spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(260px circle at var(--ak-sx, 50%) var(--ak-sy, 50%),
              rgba(var(--ak-gold-rgb), 0.15), transparent 62%);
}
.ak-tilt.is-hover .ak-spot { opacity: 1; }

/* While JS drives the transform inline, suppress the CSS hover lift so the two
   never fight over the same property. */
.ak-tilt:hover { transform: none; }

/* -----------------------------------------------------------------------------
   Buttons: ripple, magnetic pull, shine
   -------------------------------------------------------------------------- */
.btn, .lang-switch { position: relative; overflow: hidden; }
.ak-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform, opacity;
}
.ak-magnet { will-change: transform; }
.ak-magnet-label { display: inline-block; will-change: transform; }

.btn-gold::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start 0.65s var(--ak-ease-out-expo);
  pointer-events: none;
}
.btn-gold:hover::before { inset-inline-start: 120%; }

/* -----------------------------------------------------------------------------
   Stats strip: sheen sweep behind the numbers
   -------------------------------------------------------------------------- */
.stats-strip { position: relative; overflow: hidden; }
.stats-strip::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -30%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(var(--ak-gold-rgb), 0.10), transparent);
  transform: skewX(-16deg);
  animation: ak-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ak-sheen {
  0%, 62%  { inset-inline-start: -30%; }
  100%     { inset-inline-start: 130%; }
}
.stat-value { display: inline-block; will-change: transform; }

/* -----------------------------------------------------------------------------
   CTA band: slow living gradient
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(115deg, #c4943e 0%, #d9ae5c 28%, #b3843a 55%, #d9ae5c 78%, #c4943e 100%);
  background-size: 300% 300%;
  animation: ak-band 16s ease infinite;
}
@keyframes ak-band {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* -----------------------------------------------------------------------------
   Imagery: scroll-linked parallax (JS supplies the transform)
   -------------------------------------------------------------------------- */
.ak-parallax-media { overflow: hidden; }
.ak-parallax-media img { will-change: transform; }

/* -----------------------------------------------------------------------------
   Form micro-interactions
   -------------------------------------------------------------------------- */
.form-control {
  transition: border-color 0.25s ease, box-shadow 0.35s var(--ak-ease-out-expo);
}
.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(var(--ak-gold-rgb), 0.16);
}
.form-label { transition: color 0.25s ease; }
.ak-field-active .form-label { color: var(--gold); }

@keyframes ak-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.ak-shake { animation: ak-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

.ak-btn-busy { pointer-events: none; opacity: 0.85; }
.ak-spinner {
  display: inline-block;
  width: 0.85em; height: 0.85em;
  margin-inline-end: 0.5em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ak-spin 0.65s linear infinite;
  vertical-align: -0.1em;
}
@keyframes ak-spin { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------------------
   Icon badges keep their pop, now driven from the tilt hover state and lifted
   on the Z axis so they sit above the card plane while it rotates.
   -------------------------------------------------------------------------- */
.icon-badge { transition: transform 0.35s var(--ak-ease-out-back), background-color 0.3s ease, color 0.3s ease; }
.ak-tilt.is-hover .icon-badge {
  transform: scale(1.1) rotate(-6deg) translateZ(30px);
  background-color: var(--gold);
  color: var(--white);
}
.ak-tilt h5 { transition: transform 0.35s var(--ak-ease-out-expo); }
.ak-tilt.is-hover h5 { transform: translateZ(18px); }

.testimonial-card .quote-mark { display: inline-block; transition: transform 0.4s var(--ak-ease-out-back); }
.testimonial-card:hover .quote-mark { transform: scale(1.25) rotate(-8deg); }

/* -----------------------------------------------------------------------------
   Reduced motion: strip every transform/animation, keep every pixel of content.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.ak-js [data-ak-reveal],
  html.ak-js [data-ak-split] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .ak-hero-edge, .ak-float, .stats-strip::after, .cta-band { animation: none !important; }
  .cta-band { background: var(--gold); }
  .ak-hero-glow { display: none; }
  .site-header.is-retracted { transform: none; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}