/* =============================================================
   WAVE POWER — motion layer "Power"
   Blur-to-sharp rise, red sweep, electric current on key cards,
   3D tilt + glare, magnetic buttons, logo marquee, lit process,
   tracing + flowing map routes, counters, scroll progress.
   Loaded on the public site only (not in the editor).
============================================================= */
:root{--e-out:cubic-bezier(.22,1,.36,1);--e-io:cubic-bezier(.65,0,.35,1);--e-spring:cubic-bezier(.34,1.56,.64,1)}

/* scroll progress */
.mx-bar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#CC0000,#FF4D4D);box-shadow:0 0 12px rgba(255,60,60,.6);z-index:70;pointer-events:none}
html[dir="rtl"] .mx-bar{transform-origin:100% 50%;background:linear-gradient(270deg,#CC0000,#FF4D4D)}

/* hero entrance */
.c-hero h1 > span{display:inline-block}
.c-hero.play h1 > span{animation:cRise 1.1s var(--e-out) both;animation-delay:calc(var(--i,0)*110ms)}
@keyframes cRise{from{opacity:0;transform:translateY(40px) scale(.98);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
.c-hero h1 .r{position:relative}
.c-hero.play h1 .r::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.08em;background:var(--red);transform-origin:0 50%;transform:scaleX(0);animation:cSweep .9s var(--e-io) 1s forwards;border-radius:2px}
.c-hero.done h1 .r::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.08em;background:var(--red);border-radius:2px}
html[dir="rtl"] .c-hero.play h1 .r::after{transform-origin:100% 50%}
@keyframes cSweep{to{transform:scaleX(1)}}
.c-hero.play .badge,.c-hero.play .c-hero__side > *{animation:cRise .9s var(--e-out) both;animation-delay:calc(350ms + var(--i,0)*90ms)}
.c-hero.play .visual{animation:cZoom 1.6s var(--e-out) .4s both}
@keyframes cZoom{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.c-hero.play .glass{animation:cPop .7s var(--e-spring) both;animation-delay:calc(1.4s + var(--i,0)*120ms)}
@keyframes cPop{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}

/* scroll reveal (overrides the base .rv) */
.rv{opacity:0;transform:translateY(40px) scale(.97);filter:blur(6px)}
.rv.in{opacity:1;transform:none;filter:blur(0);transition:opacity .9s var(--e-out),transform 1.1s var(--e-out),filter .9s var(--e-out);transition-delay:var(--d,0s)}
.rv.in.bx,.rv.in.pstep,.rv.in.oc{transition:opacity .9s var(--e-out),transform 1.1s var(--e-out),filter .9s var(--e-out),box-shadow .5s var(--e-out),border-color .3s;transition-delay:var(--d,0s),var(--d,0s),var(--d,0s),0s,0s}

/* electric current around the featured card + quote band */
.cur{display:block;position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,#FF3B3B 82%,#fff 86%,transparent 92%);-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);animation:cSpin 4s linear infinite;pointer-events:none;z-index:3}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes cSpin{to{--ang:360deg}}

/* tilt + glare */
.bx,.pstep{transform-style:preserve-3d}
.bx.tilt,.pstep.tilt{transition:transform .12s linear,box-shadow .3s}
.bx .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .3s;z-index:1}
.bx.tilt .glare{opacity:1}
.bx--ink .glare{background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),rgba(255,80,80,.25),transparent 45%)}

/* magnetic buttons */
.btn{transition:transform .25s var(--e-out),background .2s,border-color .2s,box-shadow .3s}
.btn--red:hover{box-shadow:0 10px 30px -8px rgba(204,0,0,.6)}

/* logo marquee */
.logos.mq-on{flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos .mq{display:flex;align-items:center;gap:56px;width:max-content;animation:cMarq 28s linear infinite;padding-inline:28px}
.logos:hover .mq{animation-play-state:paused}
@keyframes cMarq{to{transform:translateX(-50%)}}
html[dir="rtl"] .logos .mq{animation-name:cMarqR}
@keyframes cMarqR{to{transform:translateX(50%)}}

/* process steps light up */
.process.lit .pstep{animation:cLight 1.2s var(--e-out) both;animation-delay:calc(var(--k,0)*180ms)}
@keyframes cLight{0%{box-shadow:0 0 0 0 rgba(204,0,0,0);border-color:var(--line)}40%{box-shadow:0 0 0 4px rgba(204,0,0,.15),0 18px 40px -16px rgba(204,0,0,.35);border-color:#EFB5B5}100%{box-shadow:var(--sh-1);border-color:var(--line)}}

/* division panel */
.panel > *{animation:cPop .55s var(--e-spring) both}
.panel > *:nth-child(2){animation-delay:.06s}.panel > *:nth-child(3){animation-delay:.12s}.panel > *:nth-child(4){animation-delay:.18s}

/* map: routes trace, cities pop, then current flows */
.map.mo .rt{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);animation:none;opacity:.8}
.map.mo.drawn .rt{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--e-io);transition-delay:calc(var(--k,0)*250ms)}
.map.mo.drawn.flow .rt{stroke-dasharray:3 7;stroke-dashoffset:0;animation:flow 1.6s linear infinite;transition:none}
.map.mo .city{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center}
.map.mo.drawn .city{opacity:1;transform:none;transition:opacity .4s,transform .6s var(--e-spring);transition-delay:calc(var(--k,0)*250ms + 1.2s)}
.map.mo.drawn.flow .city{transition:transform .4s var(--e-out);transition-delay:0s}
.map.mo.drawn .city.hot{transform:scale(1.15)}

@media (prefers-reduced-motion:reduce){
  .c-hero.play *,.rv,.panel > *,.process.lit .pstep{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .logos .mq,.cur{animation:none!important}
  .map .rt{stroke-dashoffset:0!important}.map .city{opacity:1!important;transform:none!important}
  .mx-bar{display:none}
}