/* ===================================================================
   SHRS Motion Layer
   -------------------------------------------------------------------
   The second half of the prestige system: icon animation, depth and
   scroll-linked motion. Loaded only on prestige:true pages, alongside
   css/prestige.css, and every effect here is additive — remove the
   stylesheet and the page still reads correctly, only still.

   House rule for all of it: motion should be felt, not watched. Nothing
   loops fast, nothing bounces, nothing demands attention while a person
   is trying to read. Anything ornamental stops under
   prefers-reduced-motion; anything load-bearing is CSS-only so it
   survives with JavaScript off.
   =================================================================== */

:root{
  --mo-ease:cubic-bezier(.16,.8,.24,1);
  --mo-ease-soft:cubic-bezier(.33,1,.68,1);
}

/* ---------- Icons: stroke that draws itself ----------------------- */
/* An outline icon is a path. Rather than fading it in, we let it be
   drawn — the eye reads it as being written, which is worth far more
   than an opacity ramp for the same cost. */
.mo-draw path,.mo-draw circle,.mo-draw rect,.mo-draw line,.mo-draw polyline,.mo-draw polygon{
  stroke-dasharray:var(--len,180);stroke-dashoffset:var(--len,180);
  transition:stroke-dashoffset 1.15s var(--mo-ease);
}
.mo-draw.mo-in path,.mo-draw.mo-in circle,.mo-draw.mo-in rect,
.mo-draw.mo-in line,.mo-draw.mo-in polyline,.mo-draw.mo-in polygon{stroke-dashoffset:0;}
/* second and third paths follow the first rather than racing it */
.mo-draw.mo-in *:nth-child(2){transition-delay:.14s}
.mo-draw.mo-in *:nth-child(3){transition-delay:.28s}
.mo-draw.mo-in *:nth-child(4){transition-delay:.42s}

/* ---------- Icons: idle life ------------------------------------- */
/* A very slow vertical drift, desynchronised per card by --d, so a grid
   of icons breathes instead of pulsing in unison like a heartbeat. */
.mo-float{animation:mo-float 6.5s var(--mo-ease-soft) infinite;animation-delay:var(--d,0s);}
@keyframes mo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* An icon mount that lights and lifts when its card is hovered. */
.mo-ico-mount{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .55s var(--mo-ease),box-shadow .55s var(--mo-ease);}
.mo-ico-mount::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(circle at 32% 26%,rgba(233,206,138,.55),rgba(198,161,91,.10) 62%,transparent 76%);
  opacity:0;transition:opacity .55s var(--mo-ease);}
.pr-card:hover .mo-ico-mount,.mo-lift:hover .mo-ico-mount{
  transform:translateY(-4px) scale(1.06) rotate(-3deg);
  box-shadow:0 14px 30px -16px rgba(156,122,60,.75);}
.pr-card:hover .mo-ico-mount::after,.mo-lift:hover .mo-ico-mount::after{opacity:1;}
/* a ring that sweeps around the mount on hover */
.mo-ico-mount::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:1;
  border:1px solid transparent;
  background:conic-gradient(from var(--pr-angle,0deg),transparent 0 78%,rgba(233,206,138,.9) 92%,transparent 100%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .5s;}
.pr-card:hover .mo-ico-mount::before,.mo-lift:hover .mo-ico-mount::before{
  opacity:1;animation:pr-orbit 4s linear infinite;}

/* ---------- Reveal variants -------------------------------------- */
.mo-mask-up{clip-path:inset(100% 0 0 0);transition:clip-path 1.05s var(--mo-ease);}
.mo-mask-up.mo-in{clip-path:inset(0 0 0 0);}
.mo-mask-left{clip-path:inset(0 100% 0 0);transition:clip-path 1.05s var(--mo-ease);}
.mo-mask-left.mo-in{clip-path:inset(0 0 0 0);}
.mo-rise{opacity:0;transform:translateY(30px) scale(.985);
  transition:opacity .95s var(--mo-ease),transform .95s var(--mo-ease);}
.mo-rise.mo-in{opacity:1;transform:none;}
/* words rise one after another — used on a single short heading only */
.mo-words > span{display:inline-block;opacity:0;transform:translateY(18px) rotate(1.5deg);
  transition:opacity .7s var(--mo-ease),transform .7s var(--mo-ease);
  transition-delay:calc(var(--w,0) * .055s);}
.mo-words.mo-in > span{opacity:1;transform:none;}

/* ---------- Scroll parallax --------------------------------------- */
/* js/motion.js writes --p (-1..1) as the element crosses the viewport. */
/* Snapped to whole pixels. A raw calc() lands text on fractional
   device pixels, and fractionally-positioned type is genuinely blurry —
   the parallax was quietly softening every paragraph it moved. round()
   costs nothing and the movement is still perfectly smooth at this
   depth. The unrounded rule stays first as the fallback for engines
   without round(), and will-change is left off so the browser keeps
   re-rasterising crisply instead of reusing one stale texture. */
.mo-par{transform:translate3d(0,calc(var(--p,0) * var(--par-depth,26px)),0);}
@supports (top:round(1.5px,1px)){
  .mo-par{transform:translate3d(0,round(calc(var(--p,0) * var(--par-depth,26px)),1px),0);}
}
.mo-par-img{overflow:hidden;}
.mo-par-img img{transform:translate3d(0,calc(var(--p,0) * 34px),0) scale(1.14);will-change:transform;}

/* ---------- Cursor spotlight -------------------------------------- */
/* A band-wide wash that follows the pointer. Kept very low contrast: it
   should register as the room being lit, not as a torch being shone. */
.mo-spot{position:relative;isolation:isolate;}
.mo-spot::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(600px circle at var(--sx,50%) var(--sy,30%),rgba(233,206,138,.16),transparent 62%);
  opacity:0;transition:opacity .7s var(--mo-ease);}
.mo-spot.is-lit::before{opacity:1;}
.pr-section.is-royal.mo-spot::before{
  background:radial-gradient(640px circle at var(--sx,50%) var(--sy,30%),rgba(233,206,138,.22),transparent 60%);}
.mo-spot > *{position:relative;z-index:1;}

/* ---------- Magnetic buttons -------------------------------------- */
.mo-mag{transition:transform .45s var(--mo-ease);}
.mo-mag.is-pulled{transition:transform .12s linear;will-change:transform;}

/* ---------- 3D flip card ------------------------------------------ */
.mo-flip{perspective:1200px;}
.mo-flip-in{position:relative;transition:transform .85s var(--mo-ease);transform-style:preserve-3d;}
.mo-flip:hover .mo-flip-in,.mo-flip:focus-within .mo-flip-in{transform:rotateY(180deg);}
.mo-flip-f,.mo-flip-b{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;}
.mo-flip-b{position:absolute;inset:0;transform:rotateY(180deg);display:grid;align-content:center;}

/* ---------- Layered 3D stack (photographs) ------------------------ */
/* Three planes at different Z, so a tilt produces genuine parallax
   inside the frame rather than the whole rectangle leaning. */
.mo-stack{position:relative;transform-style:preserve-3d;}
.mo-stack .mo-z1{transform:translateZ(18px);}
.mo-stack .mo-z2{transform:translateZ(40px);}
.mo-stack .mo-z3{transform:translateZ(66px);}

/* ---------- Text shimmer ------------------------------------------ */
.mo-shine{background-size:220% 100%;
  background-image:linear-gradient(100deg,var(--pr-gold-deep) 0%,var(--pr-gold-deep) 36%,#FFF6DF 48%,var(--pr-gold-deep) 60%,var(--pr-gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-position:120% 0;}
.mo-shine.mo-in{animation:mo-shine 3.4s var(--mo-ease) 1.1s 1;}
@keyframes mo-shine{to{background-position:-40% 0;}}

/* ---------- Scroll progress rail ---------------------------------- */
.mo-rail{position:fixed;top:0;left:0;height:2px;z-index:60;width:100%;
  transform:scaleX(var(--sp,0));transform-origin:left;pointer-events:none;
  background:linear-gradient(90deg,var(--pr-gold-deep),var(--pr-gold-bright),var(--pr-gold));
  box-shadow:0 0 12px -2px rgba(233,206,138,.8);}

/* ---------- Marquee ----------------------------------------------- */
.mo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.mo-marquee-track{display:flex;gap:56px;width:max-content;animation:mo-marq 34s linear infinite;}
.mo-marquee:hover .mo-marquee-track{animation-play-state:paused;}
.mo-marquee-item{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  font-family:'Cinzel',serif;font-size:1.02rem;color:var(--pr-gold-deep);letter-spacing:.06em;}
.mo-marquee-item::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,var(--pr-gold-bright),var(--pr-gold-deep));}
@keyframes mo-marq{to{transform:translateX(-50%);}}

/* ---------- Connector diagram ------------------------------------- */
/* For an organisational chart: the lines draw before the nodes arrive. */
.mo-org-line{stroke:var(--pr-gold);stroke-width:1.4;fill:none;opacity:.55;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  transition:stroke-dashoffset 1.3s var(--mo-ease);}
.mo-in .mo-org-line,.mo-org-line.mo-in{stroke-dashoffset:0;}

/* ---------- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .mo-draw path,.mo-draw circle,.mo-draw rect,.mo-draw line,
  .mo-draw polyline,.mo-draw polygon,.mo-org-line{
    stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important;}
  .mo-float{animation:none;}
  .mo-mask-up,.mo-mask-left{clip-path:none!important;transition:none!important;}
  .mo-rise,.mo-words > span{opacity:1!important;transform:none!important;transition:none!important;}
  .mo-par,.mo-par-img img{transform:none!important;}
  .mo-spot::before{display:none;}
  .mo-mag{transform:none!important;}
  .mo-flip:hover .mo-flip-in,.mo-flip:focus-within .mo-flip-in{transform:none;}
  .mo-flip-b{display:none;}
  .mo-shine,.mo-shine.mo-in{animation:none;background-position:0 0;}
  .mo-marquee-track{animation:none;}
  .mo-rail{display:none;}
  .pr-card:hover .mo-ico-mount,.mo-lift:hover .mo-ico-mount{transform:none;}
  .mo-ico-mount::before{display:none;}
}

/* ---------- Interface sound toggle --------------------------------
   Third slot on the trailing rail. The bottom-right corner already
   holds the assistant launcher (26px) and the WhatsApp button (96px);
   this button was placed at 16px and 78px, so on a phone it sat
   directly on top of the WhatsApp button. It takes the next rung up
   instead, and uses logical insets so the Arabic site mirrors it. */
.pr-sound-toggle{position:fixed;inset-inline-end:26px;bottom:166px;z-index:55;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--pr-gold-deep,#9C7A3C);
  background:linear-gradient(168deg,#FFFDF9,#F3EADA);
  border:1px solid rgba(198,161,91,.42);
  box-shadow:0 8px 22px -12px rgba(42,28,16,.55),inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .35s var(--mo-ease),box-shadow .35s var(--mo-ease),opacity .35s;
  opacity:.62;}
.pr-sound-toggle:hover,.pr-sound-toggle:focus-visible{opacity:1;transform:translateY(-2px) scale(1.05);
  box-shadow:0 12px 28px -12px rgba(42,28,16,.65),0 0 20px -6px rgba(198,161,91,.7),inset 0 1px 0 rgba(255,255,255,.9);}
.pr-sound-toggle svg{width:19px;height:19px;}
.pr-sound-toggle.is-off{color:#9a9086;opacity:.42;}
@media (max-width:620px){.pr-sound-toggle{width:38px;height:38px;inset-inline-end:16px;bottom:148px;}}
@media print{.pr-sound-toggle{display:none;}}