/* ==========================================================================
   BINEXA — Motion system
   Usage (attributes survive the Blade conversion unchanged):
     data-reveal="fade-up | fade-in | mask-up | slide-start | slide-end | scale-in | draw-line | clip-chamfer"
     data-reveal-delay="200"         → ms
     data-stagger                    → children with [data-reveal] get incremental delays
   Hidden initial states apply ONLY under html.js (content stays visible without JS)
   and never under prefers-reduced-motion.
   ========================================================================== */

:root {
  --dur-reveal: 700ms;
  --stagger: 80ms;
  --reveal-distance: 28px;
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);
  --ease-draw: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Keyframes ---------- */
@keyframes bx-sheen       { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes bx-ken-burns   { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@keyframes bx-hazard-flow { from { transform: translateX(calc(var(--hazard-period, 28px) * -1)); } to { transform: translateX(0); } }
@keyframes bx-pulse       { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes bx-ring        { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes bx-shake       { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
@keyframes bx-scroll-cue  { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes bx-draw-stroke { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes bx-fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes bx-shine-loop  { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- Reveal: initial (hidden) states ---------- */
.js [data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal) var(--ease-reveal),
    clip-path var(--dur-reveal) var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="fade-up"]     { opacity: 0; transform: translate3d(0, var(--reveal-distance), 0); }
.js [data-reveal="fade-in"]     { opacity: 0; }
.js [data-reveal="scale-in"]    { opacity: 0; transform: scale(.94); }
/* "start" = the side where reading begins (right in RTL, left in LTR) */
.js [dir="rtl"] [data-reveal="slide-start"], .js[dir="rtl"] [data-reveal="slide-start"] { opacity: 0; transform: translate3d(calc(var(--reveal-distance) * 1.6), 0, 0); }
.js [dir="ltr"] [data-reveal="slide-start"], .js[dir="ltr"] [data-reveal="slide-start"] { opacity: 0; transform: translate3d(calc(var(--reveal-distance) * -1.6), 0, 0); }
.js [dir="rtl"] [data-reveal="slide-end"],   .js[dir="rtl"] [data-reveal="slide-end"]   { opacity: 0; transform: translate3d(calc(var(--reveal-distance) * -1.6), 0, 0); }
.js [dir="ltr"] [data-reveal="slide-end"],   .js[dir="ltr"] [data-reveal="slide-end"]   { opacity: 0; transform: translate3d(calc(var(--reveal-distance) * 1.6), 0, 0); }

/* Mask reveal: text line rises out of an invisible slot */
[data-reveal="mask-up"] { display: block; }
.js [data-reveal="mask-up"] { clip-path: inset(-25% -10% 100% -10%); transform: translate3d(0, 40%, 0); }

/* Chamfered (cut-corner) image reveal — brand motif from the profile spreads */
.js [data-reveal="clip-chamfer"] { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }

/* Line drawing (accent bars, underlines) */
.js [data-reveal="draw-line"] { transform: scaleY(0); transform-origin: top; }
.js [data-reveal="draw-line"].accent-bar--horizontal { transform: scaleX(0); transform-origin: right; }
.js [dir="ltr"] [data-reveal="draw-line"].accent-bar--horizontal,
.js[dir="ltr"] [data-reveal="draw-line"].accent-bar--horizontal { transform-origin: left; }
.js [data-reveal="draw-line"] { transition-duration: 900ms; transition-timing-function: var(--ease-draw); }

/* SVG ring stroke drawing (icon circles) */
.js [data-reveal] .icon-circle__ring circle,
.js .icon-circle[data-reveal] .icon-circle__ring circle { stroke-dashoffset: 100; transition: stroke-dashoffset 1100ms var(--ease-draw) var(--reveal-delay, 0ms); }

/* ---------- Reveal: visible state ---------- */
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  /* negative inset keeps Arabic diacritics/descenders unclipped */
  clip-path: inset(-25% -10% -25% -10%);
}
.js [data-reveal="clip-chamfer"].is-revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.js [data-reveal].is-revealed .icon-circle__ring circle,
.js .icon-circle[data-reveal].is-revealed .icon-circle__ring circle { stroke-dashoffset: 0; }

/* ---------- Utility animations ---------- */
/* Slow zoom: desktop only, starting after first paint (a continuously changing scale makes the
   browser re-raster the image every frame — too costly on phones and during load) */
.ken-burns { transform-origin: 60% 40%; }
@media (min-width: 1024px) {
  .ken-burns { animation: bx-ken-burns 22s var(--ease-standard) 1.2s infinite alternate both; }
}

/* Sections off screen pause their decorative loops (motion.js toggles .is-offscreen) */
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after { animation-play-state: paused !important; }


.pulse-icon { display: inline-block; animation: bx-pulse 2.4s var(--ease-standard) infinite; }

.ring-pulse { position: relative; }
/* expanding ring as a composited pseudo-element (transform/opacity, no box-shadow repaint) */
.ring-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(211,157,53,.6);
  pointer-events: none;
  animation: bx-ring 2.2s var(--ease-out) infinite;
}

.is-shaking { animation: bx-shake 420ms var(--ease-standard); }

/* Periodic shine on a primary CTA */
.btn--shine::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  animation: bx-shine-loop 4.5s var(--ease-standard) infinite;
}

/* Scroll cue (hero) */
.scroll-cue {
  display: inline-flex;
  justify-content: center;
  width: 26px; height: 42px;
  padding-block-start: 8px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 14px;
}
.scroll-cue::before {
  content: "";
  width: 4px; height: 8px;
  border-radius: 2px;
  background: var(--gold-500);
  animation: bx-scroll-cue 1.8s var(--ease-standard) infinite;
}

/* ---------- Global UI: reading progress ---------- */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  transform: scaleX(var(--progress, 0));
  transform-origin: right;
}
[dir="ltr"] .scroll-progress { transform-origin: left; }

/* ---------- Global UI: back-to-top with progress ring ---------- */
.back-to-top {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 150;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--gold-500);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.9);
  transition:
    opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-base),
    background-color var(--dur-base) var(--ease-standard);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.back-to-top:hover { background: var(--ink-750); }
.back-to-top:hover .fa-solid { transform: translateY(-3px); }
.back-to-top .fa-solid { position: relative; transition: transform var(--dur-base) var(--ease-out); }
.back-to-top__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.back-to-top__ring circle { fill: none; stroke-width: 2.5; }
.back-to-top__track { stroke: rgba(255,255,255,.12); }
.back-to-top__bar   { stroke: var(--gold-500); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--progress, 0) * 100); stroke-linecap: round; }

/* ---------- Language switch crossfade ---------- */
main, .site-header, .site-footer { transition: opacity 220ms var(--ease-standard); }
html.is-switching-lang main,
html.is-switching-lang .site-header,
html.is-switching-lang .site-footer { opacity: 0; }

/* Non-default language: hide body until i18n applies (CSS fallback after 1.2s) */
html.lang-pending body { opacity: 0; animation: bx-fade-in 1ms linear 1.2s forwards; }

/* ---------- Mobile: lighten heavy effects ---------- */
@media (max-width: 767px), (hover: none) {
  [data-parallax] { transform: none !important; }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js [data-reveal] .icon-circle__ring circle { stroke-dashoffset: 0 !important; }
  .ken-burns, .hazard--flow::before, .pulse-icon, .ring-pulse::after, .btn--shine::before, .scroll-cue::before { animation: none !important; }
  [data-parallax] { transform: none !important; }
}

/* ---------- Above-the-fold entrance ([data-reveal-immediate], e.g. the hero) ----------
   Pure CSS keyframes that start with the first paint — no waiting for JS — so the hero text is
   painted (LCP) as early as possible. Delays come from inline --reveal-delay. motion.js still adds
   .is-revealed afterwards; the final state is identical. */
@keyframes bx-in-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes bx-in-up      { from { opacity: 0; transform: translate3d(0, var(--reveal-distance), 0); } to { opacity: 1; transform: none; } }
@keyframes bx-in-mask    { from { clip-path: inset(-25% -10% 100% -10%); transform: translate3d(0, 40%, 0); } to { clip-path: inset(-25% -10% -25% -10%); transform: none; } }
@keyframes bx-in-draw-y  { from { transform: scaleY(0); } to { transform: none; } }

.js [data-reveal-immediate] [data-reveal] { transition: none; }
.js [data-reveal-immediate] [data-reveal="fade-in"]   { animation: bx-in-fade   var(--dur-reveal) var(--ease-reveal) var(--reveal-delay, 0ms) both; }
.js [data-reveal-immediate] [data-reveal="fade-up"]   { animation: bx-in-up     var(--dur-reveal) var(--ease-reveal) var(--reveal-delay, 0ms) both; }
.js [data-reveal-immediate] [data-reveal="mask-up"]   { animation: bx-in-mask   var(--dur-reveal) var(--ease-reveal) var(--reveal-delay, 0ms) both; }
.js [data-reveal-immediate] [data-reveal="draw-line"] { animation: bx-in-draw-y 900ms var(--ease-draw) var(--reveal-delay, 0ms) both; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal-immediate] [data-reveal] { animation: none !important; }
}