/* ==========================================================================
   Capital Misr — motion & depth layer
   Engineered, not playful: short travel, crisp easing, no bounce.
   Everything degrades to a fully visible static page without JS.
   ========================================================================== */

:root{
  --ease:cubic-bezier(.22,1,.36,1);      /* decisive settle */
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.62s;
  --stagger:60ms;
}

/* --- scroll reveal ------------------------------------------------------- */
/* Visible by default; only the js class opts into the hidden start state. */
.js [data-rv]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:calc(var(--i,0) * var(--stagger));
  will-change:opacity,transform;
}
.js [data-rv="left"]{transform:translate3d(-26px,0,0)}
.js [data-rv="right"]{transform:translate3d(26px,0,0)}
.js [data-rv="scale"]{transform:scale(.965)}
.js [data-rv="clip"]{
  opacity:1;transform:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .9s var(--ease);
}
.js [data-rv].in{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0);
  will-change:auto;
}

/* --- hero entrance ------------------------------------------------------- */
.js .hero-tx > *{
  opacity:0;
  transform:translate3d(0,20px,0);
  animation:heroIn .78s var(--ease) forwards;
  animation-delay:calc(.08s + var(--i,0) * .085s);
}
@keyframes heroIn{to{opacity:1;transform:none}}

/* the hero photograph settles rather than snapping in */
.js .hero-bg > img,.js .hero-full > img{
  animation:heroPan 1.5s var(--ease) both;
}
@keyframes heroPan{
  from{transform:scale(1.07);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* the glass card and the capability strip arrive after the copy */
.js .hero-card{opacity:0;transform:translate3d(0,26px,0);
  animation:heroIn .8s var(--ease) .45s forwards}
.js .hero-card .row{opacity:0;animation:calloutIn .45s var(--ease) forwards;
  animation-delay:calc(.6s + var(--i,0) * .07s)}
@keyframes calloutIn{to{opacity:1}}
.js .hero-strip{opacity:0;animation:calloutIn .6s var(--ease) .7s forwards}
.js .hero-strip__cell{opacity:0;animation:calloutIn .5s var(--ease) forwards;
  animation-delay:calc(.8s + var(--i,0) * .06s)}

/* --- depth: the flat 1px-border look gets a real elevation scale ---------- */
.panel,.feat,.disc,.art,.acc,.opt{
  box-shadow:0 1px 2px rgba(8,20,31,.04);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease),
             border-color .3s var(--ease);
}
.panel:hover,.feat:hover,.acc:hover{
  box-shadow:0 10px 30px -12px rgba(8,20,31,.16);
  border-color:var(--blue-100);
}
.disc:hover,.art:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 44px -18px rgba(8,20,31,.26);
  border-color:var(--blue-100);
}

/* a cyan hairline wipes across the top of a card on hover */
.disc,.art,.card-link{position:relative}
.disc::before,.art::before,.card-link::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.disc:hover::before,.art:hover::before,.card-link:hover::before{transform:scaleX(1)}

.disc .ph img,.art .ph img,.card-link img,.proj img{
  transition:transform .7s var(--ease), filter .7s var(--ease);
}
.disc:hover .ph img,.art:hover .ph img,.card-link:hover img{transform:scale(1.06)}
.proj:hover img{transform:scale(1.07)}

/* project cards lift and reveal their gradient a touch more */
.proj{transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.proj:hover{transform:translateY(-4px);box-shadow:0 24px 50px -20px rgba(1,22,46,.6)}
.proj::after{transition:opacity .4s var(--ease)}
.proj:hover::after{opacity:.9}

/* --- buttons ------------------------------------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn .ic{transition:transform .34s var(--ease)}
.btn:hover .ic{transform:translateX(4px)}
.btn-pri::after,.btn-dark::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22),transparent 80%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn-pri:hover::after,.btn-dark:hover::after{transform:translateX(120%)}
.btn-pri:hover,.btn-dark:hover{box-shadow:0 10px 24px -10px rgba(0,105,204,.6)}
.btn:active{transform:translateY(1px)}

/* text links pull their arrow and draw an underline */
.tlink{position:relative;padding-bottom:2px}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .4s var(--ease);
}
.tlink:hover::after{transform:scaleX(1);transform-origin:left center}

/* --- icon tiles & rings -------------------------------------------------- */
.tile .ring{transition:transform .4s var(--ease), border-color .4s var(--ease),
                       background .4s var(--ease), box-shadow .4s var(--ease)}
.tile:hover .ring{
  transform:translateY(-4px);
  border-color:var(--blue);
  box-shadow:0 10px 22px -10px rgba(0,105,204,.45);
}
.tile .ring .ic{transition:transform .4s var(--ease)}
.tile:hover .ring .ic{transform:scale(1.12)}
.dark .tile:hover .ring{border-color:var(--cyan);box-shadow:0 10px 24px -10px rgba(28,188,222,.5)}

.feat .ic,.feat-row .ic{transition:transform .35s var(--ease)}
.feat:hover .ic,.feat-row:hover .ic{transform:translateY(-2px) scale(1.08)}

/* process connectors draw themselves as the row enters */
.js .flow > .tile:not(:last-child)::after{
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s var(--ease);
  transition-delay:calc(.15s + var(--i,0) * var(--stagger));
}
.js .flow.in > .tile:not(:last-child)::after{transform:scaleX(1)}
.js .journey .st:not(:last-child)::after{
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s var(--ease);
  transition-delay:calc(.15s + var(--i,0) * var(--stagger));
}
.js .journey.in .st:not(:last-child)::after{transform:scaleX(1)}

/* --- diagrams ------------------------------------------------------------ */
.radial .ring{animation:ringSpin 64s linear infinite}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.js .radial .sat{
  opacity:0;transform:translate(-50%,-50%) scale(.8);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(.1s + var(--i,0) * 55ms);
}
.js .radial.in .sat{opacity:1;transform:translate(-50%,-50%) scale(1)}
.radial .sat{transition:opacity .3s,transform .3s}
.radial .sat:hover .ic{transform:scale(1.18)}
.radial .sat .ic{transition:transform .3s var(--ease)}
.radial .core{transition:box-shadow .5s var(--ease)}
.radial:hover .core{box-shadow:0 0 0 6px rgba(0,105,204,.07)}

.layers .lay{transition:transform .3s var(--ease), border-left-color .3s var(--ease),
                        box-shadow .3s var(--ease)}
.layers .lay:hover{transform:translateX(6px);box-shadow:0 8px 20px -12px rgba(8,20,31,.2)}

.chipflow .node .ic{transition:transform .3s var(--ease), color .3s var(--ease)}
.chipflow .node:hover .ic{transform:translateY(-3px)}
.chipflow .arw .ic{animation:arwPulse 2.6s var(--ease-io) infinite}
@keyframes arwPulse{0%,100%{opacity:.45;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}

/* progress bars fill when their section arrives */
.js .bar i{transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .bar.in i{transform:scaleX(1)}

.cmp .row{transition:background .25s var(--ease), padding-left .25s var(--ease)}
.cmp .row:hover{background:var(--blue-050);padding-left:18px}
.tbl tbody tr{transition:background .25s var(--ease)}
.tbl tbody tr:hover{background:var(--blue-050)}
.dark .tbl tbody tr:hover{background:rgba(28,188,222,.07)}

/* --- header: reacts to scroll ------------------------------------------- */
.site-head{transition:box-shadow .35s var(--ease), background .35s var(--ease)}
.site-head.scrolled{box-shadow:0 6px 24px -12px rgba(8,20,31,.22)}
.site-head.scrolled .head-in{height:68px}
.head-in{transition:height .35s var(--ease)}
.brand img{transition:height .35s var(--ease)}
.site-head.scrolled .brand img{height:48px}

.nav > li > a::before{
  content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:center;
  transition:transform .34s var(--ease);
}
.nav > li:hover > a::before{transform:scaleX(1)}
.nav > li.on > a::before{display:none}
.drop a{transition:background .2s var(--ease), padding-left .2s var(--ease), color .2s}
.drop a:hover{padding-left:16px}

/* reading-progress hairline across the very top of the page */
.progress{
  position:fixed;left:0;top:0;height:2px;width:100%;z-index:90;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;pointer-events:none;
}

/* --- dark sections: the blueprint grid drifts slowly --------------------- */
.dark.bp::before,.cta.bp::before{animation:gridDrift 34s linear infinite}
@keyframes gridDrift{to{background-position:44px 44px}}

/* a soft cyan glow breathes behind dark bands */
.dark::after,.cta::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:46vw;aspect-ratio:1;border-radius:50%;right:-10vw;top:-30%;
  background:radial-gradient(circle,rgba(28,188,222,.10),transparent 62%);
  animation:glowBreathe 11s ease-in-out infinite;
}
@keyframes glowBreathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
.dark > *,.cta > *{position:relative;z-index:1}

/* --- counters ------------------------------------------------------------ */
.stat .v{font-variant-numeric:tabular-nums}

/* --- accordion ----------------------------------------------------------- */
.acc summary{transition:background .25s var(--ease), padding-left .25s var(--ease)}
.acc summary:hover{background:var(--bg-soft);padding-left:20px}
.acc .body{animation:accIn .4s var(--ease)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- chips / options ----------------------------------------------------- */
.chip{transition:transform .22s var(--ease), background .22s, border-color .22s, color .22s}
.chip:hover{transform:translateY(-2px)}
.opt{transition:transform .28s var(--ease), box-shadow .28s var(--ease),
                border-color .28s, background .28s}
.opt:hover{transform:translateY(-3px)}
.opt .ic{transition:transform .3s var(--ease)}
.opt:hover .ic{transform:scale(1.1)}

/* --- footer -------------------------------------------------------------- */
.foot-col a{transition:color .22s var(--ease), padding-left .22s var(--ease)}
.foot-col a:hover{padding-left:6px}
.socials a{transition:transform .28s var(--ease), background .28s, color .28s}
.socials a:hover{transform:translateY(-3px)}

/* --- accessibility ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js [data-rv],.js .hero-tx > *,.js .hero-card,.js .hero-card .row,.js .hero-strip,.js .hero-strip__cell{opacity:1!important;transform:none!important;
    animation:none!important;transition:none!important;clip-path:none!important}
  .js .hero-bg > img,.js .hero-full > img{animation:none!important}
  .radial .ring,.chipflow .arw .ic,.dark.bp::before,.cta.bp::before,
  .dark::after,.cta::after{animation:none!important}
  .js .flow > .tile::after,.js .journey .st::after,.js .bar i{
    transform:none!important;opacity:1!important;transition:none!important}
  .js .radial .sat{
    transform:translate(-50%,-50%)!important;opacity:1!important;transition:none!important}
}

/* ==========================================================================
   Partner logo wall
   Two identical tracks per row; translating -50% lands exactly on the copy,
   so the loop has no seam.
   ========================================================================== */
@keyframes marq{to{transform:translate3d(-50%,0,0)}}

.marquee{
  display:flex;flex-direction:column;gap:26px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__row{
  display:flex;align-items:center;gap:56px;width:max-content;
  animation:marq 62s linear infinite;
  will-change:transform;
}
.marquee__row--rev{animation-direction:reverse;animation-duration:74s}
.marquee:hover .marquee__row{animation-play-state:paused}

.marquee__item{
  flex:none;display:grid;place-items:center;height:60px;
}
.marquee__item img{
  max-height:60px;width:auto;max-width:190px;object-fit:contain;
  filter:grayscale(1);opacity:.55;
  transition:filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.marquee__item:hover img{filter:none;opacity:1;transform:scale(1.07)}
.dark .marquee__item img{filter:grayscale(1) brightness(0) invert(1);opacity:.4}
.dark .marquee__item:hover img{filter:none;opacity:1}

/* --- full grid variant --------------------------------------------------- */
.clients-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;
}
.client-card{
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  min-height:104px;padding:18px 16px;background:#fff;
  border:1px solid var(--line);border-radius:10px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.client-card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .35s var(--ease);
}
.client-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px -16px rgba(8,20,31,.24);
  border-color:var(--blue-100)}
.client-card:hover::before{transform:scaleX(1)}
.client-card__logo{
  max-height:56px;max-width:86%;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;
  transition:filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.client-card:hover .client-card__logo{filter:none;opacity:1;transform:scale(1.05)}
.client-card__name{display:none;font-family:var(--fd);font-size:12px;font-weight:600;color:var(--slate)}

@media (prefers-reduced-motion:reduce){
  /* No scrolling track. Keep each row on ONE line and let it scroll sideways,
     so the block stays the same height as the animated version instead of
     wrapping into a wall several thousand pixels tall. */
  .marquee__row{animation:none;flex-wrap:nowrap;width:auto;gap:34px}
  .marquee__item.is-dup{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .marquee__row{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;padding-bottom:6px}
}
@media (max-width:760px){
  .marquee__row{gap:38px;animation-duration:44s}
  .marquee__row--rev{animation-duration:52s}
  .marquee__item img{max-height:44px;max-width:130px}
  .marquee__item{height:44px}
  .clients-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:11px}
  .client-card{min-height:82px;padding:13px}
}

/* ==========================================================================
   Depth & motion techniques adapted from the asmeis.com reference,
   re-tuned to the Capital Misr navy/cyan palette.
   ========================================================================== */

/* --- 1. page-level fade so navigation never snaps ------------------------ */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.js body{animation:pageIn .6s var(--ease) both}

/* --- 2. richer diagonal gradients ---------------------------------------- */
/* Brand colour is carried past 100% so it reads as a glow off the corner
   rather than a visible band. */
.dark{
  background:linear-gradient(125deg,#01162E 0%,#062544 42%,#0B3055 82%,#0A4E93 118%);
}
.cta{
  background:linear-gradient(118deg,#01162E 0%,#062544 34%,#0B3055 68%,#0A5AAE 116%);
}
.dark-panel{
  background:linear-gradient(135deg,#062544 0%,#01162E 52%,#0B3055 118%);
}
/* a soft cyan wash across the top edge of every dark band */
.dark::before,.cta::before{
  background-image:
    linear-gradient(rgba(28,188,222,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,188,222,.075) 1px,transparent 1px),
    radial-gradient(120% 60% at 50% 0%,rgba(28,188,222,.10),transparent 70%);
}

/* light sections get a barely-there tint so the page is not flat white */
.sec-soft{
  background:linear-gradient(180deg,#F7F9FC 0%,#F3F6FB 100%);
}
.sec-soft::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 85% 0%,rgba(0,105,204,.045),transparent 65%);
}
.sec-soft{position:relative}
.sec-soft > *{position:relative;z-index:1}

/* --- 3. entrance with a little scale (asmeis "pop") ---------------------- */
.js [data-rv="up"]{transform:translate3d(0,24px,0) scale(.985)}
.js [data-rv="up"].in{transform:none}

/* --- 4. statistics land with a slight overshoot ------------------------- */
@keyframes statpop{0%{transform:scale(.72);opacity:0}62%{transform:scale(1.05)}100%{transform:none;opacity:1}}
.js .stat.in .v{animation:statpop .66s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
/* block, not inline-block: where the row carries a description the two sit in
   a plain div, and inline-block runs the label straight into the copy
   ("SafePeople & equipment protection"). Block still accepts a transform. */
.js .hero-card .row b{display:block}

/* --- 5. radar pulse on diagram cores and map pins ------------------------ */
@keyframes hubPulse{0%{transform:scale(.85);opacity:.6}80%,100%{transform:scale(1.9);opacity:0}}
.radial .core::after,.mapbox .pinmark::after{
  content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;
  margin:-50% 0 0 -50%;border-radius:50%;
  border:1px solid var(--blue);
  animation:hubPulse 3.4s var(--ease-io) infinite;
  pointer-events:none;
}
.radial .core{position:absolute;overflow:visible}
/* below 700px main.css lays the radial out as a plain list; this rule and the
   pulse ring would drag the core back into the circle, so switch both off */
@media (max-width:700px){
  .radial .core{position:static}
  .radial .core::after{display:none}
  /* the reveal state centres each satellite with translate(-50%,-50%); in list
     mode that drags every row half its width off the left edge */
  /* !important because the reduced-motion block above pins the centring
     transform with !important of its own */
  .js .radial .sat,.js .radial.in .sat{transform:none!important}
}
.mapbox .pinmark{position:relative}
.dark .radial .core::after{border-color:var(--cyan)}

/* --- 6. signal travelling along the process connectors ------------------ */
/* A short cyan segment runs the length of each connector, echoing the
   dashed-path flow on the reference site. */
@keyframes signalRun{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.flow > .tile:not(:last-child){position:relative}
.flow.in > .tile:not(:last-child) .ring::after{
  content:"";position:absolute;left:calc(100% + 4px);top:50%;width:44px;height:1px;
  overflow:hidden;pointer-events:none;
}
.chipflow .arw{position:relative}

/* --- 7. section eyebrow rule draws in ----------------------------------- */
.eyebrow .lbl{position:relative}
.js [data-rv] .eyebrow .num::after{
  content:"";display:inline-block;width:22px;height:1px;margin:0 0 4px 9px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease) .2s;
}
.js [data-rv].in .eyebrow .num::after{transform:scaleX(1)}

/* --- 8. images settle in ------------------------------------------------- */
.js [data-rv="scale"] img{transition:transform .8s var(--ease)}
.js [data-rv="scale"] img{transform:scale(1.05)}
.js [data-rv="scale"].in img{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .js body{animation:none}
  .js .stat.in .v{animation:none}
  .radial .core::after,.mapbox .pinmark::after{animation:none;opacity:0}
  .js [data-rv="scale"] img{transform:none}
  .js [data-rv] .eyebrow .num::after{transform:scaleX(1);transition:none}
}