/* Motion layer (see js/fx.js). Most rules need the .fx-on class the script adds; reduced-motion users get none of it. */
.fx-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:80;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#16b5a3,#7c5cff,#f5b942);pointer-events:none}

/* staggered entrance */
.fx-on .fx-in{opacity:0;transform:translateY(22px) scale(.97);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.fx-on .fx-in.fx-seen{opacity:1;transform:none}

/* cards: cursor spotlight, gentle 3D tilt, lift and glow */
.fx-on .cat,.fx-on .svc-card,.fx-on .work-card,.fx-on .pred-tile,.fx-on .country-grid .card{position:relative}
.fx-on .fx-in.fx-seen:is(.cat,.svc-card,.work-card,.pred-tile,.country-grid .card){transition:transform .25s ease-out,box-shadow .25s,border-color .25s,opacity .6s;transition-delay:0s}
.fx-on .fx-in.fx-seen:is(.cat,.svc-card,.work-card,.pred-tile,.country-grid .card):hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px)}
.fx-on :is(.cat,.svc-card,.work-card,.fam-card,.cw-group,.panel,.country-grid .card,.hero-home ~ .wrap .card){position:relative}
.fx-on :is(.cat,.svc-card,.work-card,.fam-card,.cw-group,.panel,.country-grid .card,.hero-home ~ .wrap .card)::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--teal) 22%,transparent),transparent 65%);z-index:0}
.fx-on :is(.cat,.svc-card,.work-card,.fam-card,.cw-group,.panel,.country-grid .card,.hero-home ~ .wrap .card):hover::before{opacity:1}
.fx-on :is(.work-card,.svc-card,.cat,.fam-card,.cw-group,.panel,.country-grid .card)>*{position:relative;z-index:1}

/* the core service card gets a slowly turning gradient edge */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.fx-on .svc-card.core{background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--ang),#16b5a3,#7c5cff,#f5b942,#16b5a3) border-box;border:2px solid transparent;animation:fx-spin 6s linear infinite}
@keyframes fx-spin{to{--ang:360deg}}

/* hero: drifting colour orbs, shimmering gradient words, parallax visual, floating chips */
.hero-home{position:relative;overflow:hidden}
.hero-home::before,.hero-home::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.4;pointer-events:none;animation:fx-drift 14s ease-in-out infinite alternate}
.hero-home::before{width:340px;height:340px;left:-80px;top:10%;background:#16b5a3}
.hero-home::after{width:380px;height:380px;right:-100px;bottom:-60px;background:#7c5cff;animation-duration:18s;animation-delay:-6s}
.hero-home>.wrap{position:relative;z-index:1}
@keyframes fx-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,-40px) scale(1.18)}}
.fx-on .grad{background-size:220% 100%;animation:fx-shine 6s linear infinite}
@keyframes fx-shine{to{background-position:-220% 0}}
.fx-on .hero-visual{transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform .25s ease-out}
.fx-on .hv-chip{animation:fx-float 5s ease-in-out infinite}.fx-on .hv-chip.c2{animation-delay:-1.6s}.fx-on .hv-chip.c3{animation-delay:-3.2s}
@keyframes fx-float{50%{margin-top:-9px}}
.fx-on .hv-orb{animation:fx-pulse 5s ease-in-out infinite}
@keyframes fx-pulse{50%{transform:scale(1.08)}}

/* buttons: shine sweep and magnetic pull */
.fx-on .btn:not(.small),.fx-on .cta-top{position:relative;overflow:hidden;transform:translate(var(--tx,0px),var(--ty,0px));transition:transform .2s ease-out,box-shadow .2s,background .2s}
.fx-on .btn:not(.small)::after,.fx-on .cta-top::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}
.fx-on .btn:not(.small):hover::after,.fx-on .cta-top:hover::after{left:130%}

/* chips and exam pills: soft pop on hover */
.fx-on .chips a{transition:transform .18s,background .18s,border-color .18s,color .18s,opacity .6s}.fx-on .chips a.fx-seen:hover{transform:translateY(-3px) scale(1.04);border-color:var(--teal);color:var(--teal)}

/* icons bounce when their card is hovered */
.fx-on .svc-card:hover .svc-ic,.fx-on .cat:hover .cat-ic,.fx-on .pred-tile:hover .ic,.fx-on .country-grid .card:hover .big-flag{animation:fx-bounce .6s ease}
@keyframes fx-bounce{30%{transform:translateY(-8px) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}}

/* step numbers pulse softly, one after another */
.fx-on .steps-grid .n{animation:fx-pulse 3.2s ease-in-out infinite}
.fx-on .steps-grid li:nth-child(2) .n{animation-delay:-.5s}.fx-on .steps-grid li:nth-child(3) .n{animation-delay:-1s}.fx-on .steps-grid li:nth-child(4) .n{animation-delay:-1.5s}.fx-on .steps-grid li:nth-child(5) .n{animation-delay:-2s}.fx-on .steps-grid li:nth-child(6) .n{animation-delay:-2.5s}

/* countries: ten equal tiles, five across on a laptop, two on a phone */
.hero-home ~ .wrap .country-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.hero-home ~ .wrap .country-grid>*{flex:none}
.country-grid .card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 12px;border-radius:18px;gap:2px}
.country-grid .card h3{margin:2px 0 0;font-size:1rem}
.country-grid .card p{margin:0;font-size:.78rem;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.country-grid .big-flag{font-size:2.4rem;margin:0}
@media (max-width:1000px){.hero-home ~ .wrap .country-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:721px) and (max-width:1000px){.hero-home ~ .wrap .country-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.country-grid .card p{display:none}}
@media (max-width:720px){.hero-home ~ .wrap .country-grid{gap:10px}.country-grid .card p{display:none}}

@media (prefers-reduced-motion:reduce){.fx-progress{display:none}.hero-home::before,.hero-home::after{animation:none}}

/* ---- the same life on every inner page ---- */
.fx-on .fx-h::after{content:"";display:block;height:4px;width:0;margin-top:8px;border-radius:4px;background:linear-gradient(90deg,#16b5a3,#7c5cff,#f5b942);transition:width .9s cubic-bezier(.2,.7,.2,1) .15s}
.fx-on .fx-h.fx-seen::after{width:64px}
.fx-on .fx-h.fx-in{transform:translateY(12px);transition-delay:0s}
.fx-on .flowchart li.fx-in{transform:translateY(26px) scale(.94)}
.fx-on .flowchart li.fx-seen .fc-n{animation:fx-pop .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,0)*70ms + .2s)}
@keyframes fx-pop{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
.fx-on .flowchart li.fx-seen:not(:last-child)::after{animation:fx-nudge 2.2s ease-in-out infinite}
@keyframes fx-nudge{50%{margin-right:-5px}}
.fx-on .flowchart li.fx-seen{transition:transform .25s ease-out,border-color .25s,box-shadow .25s,opacity .6s;transition-delay:0s}
.fx-on .flowchart li.fx-seen:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 18px 36px -22px var(--teal)}
.fx-on .timeline li.fx-in{transform:translateX(-18px)}
.fx-on .timeline li.fx-seen:before{animation:fx-pop .5s cubic-bezier(.3,1.6,.5,1) both}
.fx-on .timeline li:after{transform-origin:top;animation:fx-grow .9s ease-out both}
@keyframes fx-grow{from{transform:scaleY(0)}}
.fx-on .card.link{transition:transform .25s ease-out,border-color .25s,box-shadow .25s,opacity .6s}
.fx-on .card.link.fx-seen:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);border-color:var(--teal);box-shadow:0 22px 40px -26px var(--teal)}
.fx-on .card.link::before,.fx-on .flowchart li::before,.fx-on .team-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--teal) 20%,transparent),transparent 65%)}
.fx-on .card.link,.fx-on .team-card{position:relative}
.fx-on .card.link:hover::before,.fx-on .flowchart li:hover::before,.fx-on .team-card:hover::before{opacity:1}
.fx-on .card.link>*{position:relative}
.fx-on details.card[open]>summary~*{animation:fx-fade .35s ease both}
@keyframes fx-fade{from{opacity:0;transform:translateY(-6px)}}
.fx-on .icon-tile,.fx-on .big-flag{transition:transform .3s}.fx-on .card.link:hover .icon-tile,.fx-on .card.link:hover .big-flag{transform:scale(1.12) rotate(-5deg)}
.fx-on .toc a,.fx-on .quick a,.fx-on .sections a{transition:transform .18s,background .18s,color .18s}.fx-on .toc a:hover,.fx-on .quick a:hover,.fx-on .sections a:hover{transform:translateY(-2px)}
.fx-on tbody tr{transition:background .15s}.fx-on tbody tr:hover{background:color-mix(in srgb,var(--teal) 8%,transparent)}
/* every page hero: slow drifting colour orbs, like the home page */
.hero:not(.hero-home){position:relative;overflow:hidden}
.hero:not(.hero-home)::before,.hero:not(.hero-home)::after{content:"";position:absolute;border-radius:50%;filter:blur(55px);opacity:.35;pointer-events:none;animation:fx-drift 16s ease-in-out infinite alternate}
.hero:not(.hero-home)::before{width:260px;height:260px;right:6%;top:-70px;background:#16b5a3}
.hero:not(.hero-home)::after{width:300px;height:300px;left:-80px;bottom:-120px;background:#7c5cff;animation-delay:-7s}
.hero:not(.hero-home)>.wrap{position:relative;z-index:1}
.fx-on main{animation:fx-page .5s ease both}@keyframes fx-page{from{opacity:0;transform:translateY(8px)}}
.fx-ripple{position:absolute;left:var(--x);top:var(--y);width:10px;height:10px;margin:-5px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;animation:fx-rip .65s ease-out forwards}
@keyframes fx-rip{to{transform:scale(24);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero:not(.hero-home)::before,.hero:not(.hero-home)::after{animation:none}}
.fx-on .card:not(.form):not(details){position:relative}
.fx-on .card:not(.form):not(details)::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--teal) 18%,transparent),transparent 65%)}
.fx-on .card:not(.form):not(details):hover::before{opacity:1}

/* ---- drifting rows (reviews, stories, exam names): no scrollbar, slow constant motion, soft faded edges ---- */
.fx-mq{overflow:hidden!important;scroll-snap-type:none!important;padding:6px 0 12px!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.fx-mq-in{display:flex;align-items:stretch;gap:16px;width:max-content;animation:fx-mq var(--mq-d,70s) linear infinite;will-change:transform}
@keyframes fx-mq{to{transform:translateX(calc(var(--mq-w,0px) * -1))}}
.fx-mq:hover .fx-mq-in,.fx-mq:focus-within .fx-mq-in,.fx-mq.mq-hold .fx-mq-in,.fx-mq:has(details[open]) .fx-mq-in{animation-play-state:paused}
.fx-mq .t-card{flex:0 0 360px;width:360px;max-width:86vw;scroll-snap-align:none}
.fx-mq .t-card.fx-in{opacity:1;transform:none}
.fx-mq.exam-chips{display:block}
.fx-mq.exam-chips .fx-mq-in{gap:10px;align-items:center}
.fx-mq.exam-chips a{white-space:nowrap}
.fx-mq .t-card:hover{transform:translateY(-4px)}