/* =====================================================================
   Aylat Aljanoob — shared motion layer (all pages)
   Enhances the existing reveal system in style.css / script.js.
   ===================================================================== */
:root{--mv-ease:cubic-bezier(.16,1,.3,1);}

/* ---------- top scroll progress bar ---------- */
#mv-progress{
  position:fixed;top:0;inset-inline-start:0;height:3px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--secondary),var(--primary-2));
  box-shadow:0 0 12px rgba(0,122,204,.5);
  transition:width .1s linear;pointer-events:none;
}

/* ---------- page-hero: cinematic entrance ---------- */
.page-hero{overflow:hidden;}
.page-hero .container{position:relative;z-index:2;}
.page-hero::before{opacity:.38 !important;filter:blur(80px) !important;}
.page-hero .icon-badge{
  opacity:0;transform:scale(.5) translateY(16px);
  animation:mvPop .9s var(--mv-ease) .1s forwards, mvFloat 6s ease-in-out 1.2s infinite;
}
.page-hero h1{
  opacity:0;transform:translateY(34px);
  animation:mvUp 1s var(--mv-ease) .3s forwards;
}
.page-hero p{
  opacity:0;transform:translateY(28px);
  animation:mvUp 1s var(--mv-ease) .55s forwards;
}
@keyframes mvPop{to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes mvUp{to{opacity:1;transform:translateY(0)}}
@keyframes mvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* the existing observer reveals .page-hero .container — keep it visible
   so the children above own the choreography */
html.js-reveal-ready .page-hero .container{opacity:1;transform:none;}

/* ---------- deeper card choreography (extends style.css stagger) ---------- */
html.js-reveal-ready .card{transform:translateY(38px) scale(.97);}
html.js-reveal-ready .revealed{transform:none !important;}
.grid .card:nth-child(7){transition-delay:.46s;}
.grid .card:nth-child(8){transition-delay:.53s;}
.grid .card:nth-child(9){transition-delay:.60s;}
.card{transition:transform .35s var(--mv-ease), box-shadow .35s ease !important;}
.card:hover{transform:translateY(-7px) !important;box-shadow:var(--shadow-lg) !important;}
.card .card-icon{transition:transform .35s var(--mv-ease);}
.card:hover .card-icon{transform:scale(1.12) rotate(-4deg);}

/* ---------- section titles: underline draws itself on reveal ---------- */
.section-title{position:relative;padding-bottom:16px;}
.section-title::after{
  content:"";position:absolute;bottom:0;left:50%;
  width:64px;height:3px;border-radius:3px;background:var(--secondary);
  transform:translateX(-50%) scaleX(0);transform-origin:center;
  transition:transform .9s var(--mv-ease) .25s;
}
.section-title.mv-in::after{transform:translateX(-50%) scaleX(1);}

/* ---------- generic reveal for blocks the base system doesn't cover ---------- */
.mv-r{opacity:0;transform:translateY(34px);transition:opacity .9s var(--mv-ease),transform .9s var(--mv-ease);}
.mv-r.mv-in{opacity:1;transform:none;}

/* ---------- CTA banner shine (homepage v3c already has its own) ---------- */
.cta-banner:not(.v3c){position:relative;overflow:hidden;}
.cta-banner:not(.v3c)::before{
  content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.09),transparent);
  animation:mvShine 5s ease-in-out infinite;pointer-events:none;
}
@keyframes mvShine{0%,60%{left:-50%}100%{left:150%}}

/* ---------- buttons: springier feel everywhere ---------- */
.btn{transition:transform .3s var(--mv-ease), box-shadow .3s ease, background-color .25s ease, color .25s ease !important;}
.btn:hover{transform:translateY(-3px);}
.btn:active{transform:translateY(0) scale(.97);}

/* ---------- footer columns rise in ---------- */
html.js-reveal-ready .footer-grid > div{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--mv-ease),transform .8s var(--mv-ease);
}
html.js-reveal-ready .footer-grid > div.mv-in{opacity:1;transform:none;}
.footer-grid > div:nth-child(2){transition-delay:.1s;}
.footer-grid > div:nth-child(3){transition-delay:.2s;}
.footer-grid > div:nth-child(4){transition-delay:.3s;}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #mv-progress{display:none;}
  .page-hero .icon-badge,.page-hero h1,.page-hero p{opacity:1 !important;transform:none !important;animation:none !important;}
  .mv-r,html.js-reveal-ready .footer-grid > div{opacity:1 !important;transform:none !important;}
  .section-title::after{transform:translateX(-50%) scaleX(1) !important;}
  .cta-banner:not(.v3c)::before{animation:none !important;}
}