/* ==========================================================================
   Mortada — Motion Layer (v1.8.5.7)
   Loaded after app.css. Everything here is additive: removing the <link>
   in includes/header.php restores the previous look completely.
   Respects: prefers-reduced-motion, the admin "theme_motion" switch
   (html[data-motion="off"]) and the LCP rules (hero headline + portrait
   are never hidden or delayed).
   ========================================================================== */

:root{
  --mx-ease:cubic-bezier(.16,1,.3,1);
  --mx-ease-io:cubic-bezier(.65,0,.35,1);
  --mx-signal:var(--brand-primary,#f2383e);
  --mx-blush:var(--brand-accent,#ffcfd2);
  --mx-night:var(--dark-background,#17213b);
  --mx-ink:#0c1326;
  --mx-glass:rgba(23,33,59,.72);
  --mx-hair:rgba(255,255,255,.12);
}

/* Smooth cross-page fade (Chrome/Edge/Safari 18+). The header stays put. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--mx-ease)}
  .site-header{view-transition-name:mx-header}
}

/* --------------------------------------------------------------------------
   1. Header — reading progress line
   -------------------------------------------------------------------------- */
.mx-progress{position:absolute;inset:auto 0 -1px 0;height:2px;pointer-events:none;z-index:2;
  background:linear-gradient(270deg,var(--mx-blush),var(--mx-signal) 60%);
  transform-origin:100% 50%;transform:scaleX(var(--mx-scroll,0));will-change:transform}
html[dir="ltr"] .mx-progress{transform-origin:0 50%}

/* --------------------------------------------------------------------------
   2. Home hero — night stage with the signal network
   -------------------------------------------------------------------------- */
html[data-theme] .hero{
  color:#fff;overflow-x:clip;
  background:
    radial-gradient(60% 70% at 24% 46%,color-mix(in srgb,var(--mx-signal) 16%,transparent),transparent 70%),
    radial-gradient(40% 40% at 88% 10%,rgba(255,255,255,.05),transparent 70%),
    linear-gradient(180deg,var(--mx-night) 0%,var(--mx-ink) 100%);
}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.3px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 65% at 28% 48%,#000 10%,transparent 72%);
          mask-image:radial-gradient(70% 65% at 28% 48%,#000 10%,transparent 72%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 30%,rgba(255,255,255,.14) 70%,transparent)}
.hero .hero-glow{display:none}

html[data-theme] .hero h1{color:#fff}
html[data-theme] .hero .hero-description{color:#c1c8d8}
html[data-theme] .hero .eyebrow{color:var(--mx-blush)}
.hero .hero-actions .btn-ghost,.hero .actions .btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#fff}
.hero .hero-actions .btn-ghost:hover,.hero .actions .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
html[data-theme] .hero .trust-row span{color:#b9c1d3;border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.035)}

/* portrait on the night stage */
html[data-theme] .hero .portrait-placeholder{
  border-color:rgba(255,255,255,.14);
  background:linear-gradient(180deg,color-mix(in srgb,var(--mx-signal) 30%,var(--mx-night)),var(--mx-night));
  box-shadow:0 40px 110px -30px color-mix(in srgb,var(--mx-signal) 55%,transparent),0 0 0 8px rgba(255,255,255,.025)}
html[data-theme] .hero .portrait-placeholder strong{color:#fff}
html[data-theme] .hero .portrait-placeholder small{color:#c1c8d8}

/* glass metric cards */
html[data-theme] .hero .metric-card{background:var(--mx-glass);color:#fff;border:1px solid var(--mx-hair);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 22px 50px -18px rgba(0,0,0,.55)}
html[data-theme] .hero .metric-card small{color:#aeb7cb}
html[data-theme] .hero .metric-card strong{color:#fff}

/* the old CSS orbits are replaced by the SVG field */
.hero .visual-orbit{display:none}

/* signal field (built by motion.js) */
.hero-visual{isolation:isolate}
.mx-field{position:absolute;left:50%;top:50%;z-index:-1;width:min(132%,800px);max-width:none;aspect-ratio:1/1;height:auto;overflow:visible;pointer-events:none;
  translate:calc(-50% + var(--mx-px,0) * -12px) calc(-50% + var(--mx-py,0) * -12px);transition:translate .9s var(--mx-ease)}
.mx-ring{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1}
.mx-ring-dash{stroke:rgba(255,255,255,.16);stroke-dasharray:1.5 9;stroke-linecap:round}
.mx-route{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.2}
.mx-packet{fill:none;stroke:var(--mx-signal);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:7 140;stroke-dashoffset:7}
.mx-packet-glow{fill:none;stroke:var(--mx-signal);stroke-width:11;stroke-linecap:round;opacity:.28;stroke-dasharray:7 140;stroke-dashoffset:7}
.mx-node-disc{fill:#1a2542;stroke:rgba(255,255,255,.16);stroke-width:1}
.mx-node-halo{fill:none;stroke:var(--mx-signal);stroke-width:1.2;opacity:0}
.mx-node svg{color:#f3f4f8}

/* sparkline inside the "focus" card */
.mx-spark{display:block;width:100%;max-width:150px!important;height:30px;margin-top:6px;overflow:visible}
.mx-spark-area{fill:url(#mx-spark-fill);opacity:.9}
.mx-spark-line{fill:none;stroke:var(--mx-signal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mx-spark-dot{fill:var(--mx-signal)}
.mx-spark-ping{fill:none;stroke:var(--mx-signal);stroke-width:1.5;opacity:0}

/* --------------------------------------------------------------------------
   3. Section headings — words rise into place
   -------------------------------------------------------------------------- */
.mx-words .mx-w{display:inline-block}

/* --------------------------------------------------------------------------
   4. Statistics — steady digits while counting
   -------------------------------------------------------------------------- */
.mx-count{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   5. Process — scroll-linked progress rail
   -------------------------------------------------------------------------- */
.process-list.mx-rail{position:relative}
.mx-rail>article{position:relative}
.mx-rail>article>span:first-child{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 8px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface,#fff);font-weight:800;font-variant-numeric:tabular-nums;
  transition:background-color .45s var(--mx-ease),color .45s var(--mx-ease),border-color .45s var(--mx-ease),box-shadow .45s var(--mx-ease)}
.mx-rail>article.mx-on>span:first-child{background:var(--mx-signal);border-color:var(--mx-signal);color:#fff!important;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--mx-signal) 14%,transparent)}
.mx-rail-track{position:absolute;pointer-events:none;background:var(--line);display:none}
.mx-rail-fill{position:absolute;inset:0;background:linear-gradient(270deg,var(--mx-signal),color-mix(in srgb,var(--mx-signal) 55%,var(--mx-blush)))}
/* horizontal (one row) */
.mx-rail[data-mx-axis="x"] .mx-rail-track{display:block;inset:-1px 0 auto 0;height:2px}
.mx-rail[data-mx-axis="x"] .mx-rail-fill{transform-origin:100% 50%;transform:scaleX(var(--mx-p,0))}
/* vertical (one column) */
.mx-rail[data-mx-axis="y"]>article{padding-inline-start:70px!important}
.mx-rail[data-mx-axis="y"]>article>span:first-child{position:absolute;inset-inline-start:12px;top:28px}
.mx-rail[data-mx-axis="y"] .mx-rail-track{display:block;top:34px;bottom:34px;inset-inline-start:30px;width:2px}
.mx-rail[data-mx-axis="y"] .mx-rail-fill{transform-origin:50% 0;transform:scaleY(var(--mx-p,0))}

/* --------------------------------------------------------------------------
   6. Cards — light that follows the pointer (mouse only)
   -------------------------------------------------------------------------- */
.mx-spot-host{position:relative;isolation:isolate}
.mx-spot{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--mx-ease);
  background:radial-gradient(380px circle at var(--mx-x,50%) var(--mx-y,0%),color-mix(in srgb,var(--mx-signal) 9%,transparent),transparent 60%)}
.mx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:radial-gradient(240px circle at var(--mx-x,50%) var(--mx-y,0%),color-mix(in srgb,var(--mx-signal) 75%,transparent),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.mx-spot-host:hover>.mx-spot{opacity:1}

/* --------------------------------------------------------------------------
   7. Closing call to action — grid + pointer glow
   -------------------------------------------------------------------------- */
.footer-cta{position:relative;overflow:hidden;isolation:isolate}
.footer-cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.3px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.footer-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx-x,78%) var(--mx-y,30%),color-mix(in srgb,var(--mx-signal) 30%,transparent),transparent 65%);
  transition:background-position .6s}

/* --------------------------------------------------------------------------
   8. Buttons — a single sweep of light on hover
   -------------------------------------------------------------------------- */
.btn-primary,.header-cta{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after,.header-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(120%)}

/* ==========================================================================
   Animated states — only when motion is allowed
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]) .btn-primary:hover::after,
  html:not([data-motion="off"]) .header-cta:hover::after{transition:transform .8s var(--mx-ease);transform:translateX(-120%)}

  /* hero load sequence — CSS only, starts with first paint (no flicker) */
  html:not([data-motion="off"]) .hero .eyebrow>span{transform-origin:100% 50%;animation:mx-line .9s var(--mx-ease) .15s both}
  html:not([data-motion="off"]) .hero .trust-row span{animation:mx-chip .7s var(--mx-ease) both}
  html:not([data-motion="off"]) .hero .trust-row span:nth-child(1){animation-delay:.55s}
  html:not([data-motion="off"]) .hero .trust-row span:nth-child(2){animation-delay:.61s}
  html:not([data-motion="off"]) .hero .trust-row span:nth-child(3){animation-delay:.67s}
  html:not([data-motion="off"]) .hero .trust-row span:nth-child(4){animation-delay:.73s}
  html:not([data-motion="off"]) .hero .trust-row span:nth-child(5){animation-delay:.79s}
  html:not([data-motion="off"]) .hero .trust-row span:nth-child(n+6){animation-delay:.85s}
  html:not([data-motion="off"]) .hero .metric-card{animation:mx-float-in 1s var(--mx-ease) .9s both}
  html:not([data-motion="off"]) .hero .metric-bottom{animation-delay:1.05s}

  /* signal field: rings draw, nodes pop, packets flow */
  .mx-live .mx-ring-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:mx-draw 1.8s var(--mx-ease) forwards}
  .mx-live .mx-ring-draw.mx-r2{animation-delay:.18s}
  .mx-live .mx-ring-dash{transform-box:view-box;transform-origin:50% 50%;animation:mx-fade 1.2s ease .5s both,mx-spin 120s linear 1.7s infinite}
  .mx-live .mx-route{animation:mx-fade 1s ease both;animation-delay:calc(.9s + var(--i) * .08s)}
  .mx-live .mx-node-pop{transform-box:fill-box;transform-origin:50% 50%;animation:mx-pop .8s var(--mx-ease) both;animation-delay:calc(.55s + var(--i) * .09s)}
  .mx-live .mx-packet,.mx-live .mx-packet-glow{animation:mx-flow var(--dur,5s) var(--mx-ease-io) infinite;animation-delay:calc(1.6s + var(--delay,0s))}
  .mx-live .mx-node-halo{transform-box:fill-box;transform-origin:50% 50%;animation:mx-halo var(--dur,5s) ease-out infinite;animation-delay:calc(1.6s + var(--delay,0s))}
  .mx-field.mx-paused *{animation-play-state:paused!important}

  .mx-live .mx-spark-line{stroke-dasharray:1;stroke-dashoffset:1;animation:mx-draw 1.6s var(--mx-ease) 1.3s forwards}
  .mx-live .mx-spark-area{animation:mx-fade 1s ease 2.1s both}
  .mx-live .mx-spark-dot{transform-box:fill-box;transform-origin:50% 50%;animation:mx-pop .5s var(--mx-ease) 2.6s both}
  .mx-live .mx-spark-ping{transform-box:fill-box;transform-origin:50% 50%;animation:mx-ping 2.4s ease-out 2.9s infinite}

  /* scroll reveals: smoother, staggered, and hover stays snappy afterwards */
  .mx .reveal{transform:translate3d(0,34px,0);
    transition:opacity .9s var(--mx-ease) var(--mx-d,0ms),transform 1s var(--mx-ease) var(--mx-d,0ms),border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
  .mx .reveal.visible{transform:none}
  .mx .reveal.mx-settled{transition:opacity .3s ease,transform .3s ease,border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
  .mx .reveal.mx-settled:hover{transition-delay:0s}

  /* heading words */
  .mx-words .mx-w{opacity:0;transform:translate3d(0,.6em,0);filter:blur(6px);
    transition:opacity .7s var(--mx-ease),transform .9s var(--mx-ease),filter .7s var(--mx-ease);transition-delay:calc(var(--i) * 45ms)}
  .mx-words.mx-in .mx-w{opacity:1;transform:none;filter:none}

  /* process rail */
  .mx-rail>article{transition:opacity .6s var(--mx-ease)}
  .mx-rail.mx-tracking>article:not(.mx-on){opacity:.5}
  .mx-rail-fill{transition:transform .25s linear}

  /* scroll progress bar is scaled every frame; no transition needed */
  .hero .metric-card{translate:calc(var(--mx-px,0) * 10px) calc(var(--mx-py,0) * 10px);transition:translate .9s var(--mx-ease)}
}

@keyframes mx-draw{to{stroke-dashoffset:0}}
@keyframes mx-fade{from{opacity:0}to{opacity:1}}
@keyframes mx-spin{to{transform:rotate(360deg)}}
@keyframes mx-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes mx-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mx-chip{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes mx-float-in{from{opacity:0;transform:translate3d(0,16px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes mx-flow{0%{stroke-dashoffset:7}58%{stroke-dashoffset:-100}100%{stroke-dashoffset:-100}}
@keyframes mx-halo{0%{opacity:.7;transform:scale(1)}22%{opacity:0;transform:scale(1.55)}100%{opacity:0;transform:scale(1.55)}}
@keyframes mx-ping{0%{opacity:.8;transform:scale(1)}60%,100%{opacity:0;transform:scale(3.2)}}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .mx-field{width:min(118%,640px)}
}
@media (max-width:680px){
  .mx-field{width:150%;top:46%}
  .mx-rail[data-mx-axis="y"]>article{padding-inline-start:62px!important}
}