/* ==========================================================================
   FX layer — transitions, motion and tech-style effects.
   Loaded after styles.css. Everything animated lives inside the
   no-preference media query or is neutralised by html.a11y-no-motion.
   ========================================================================== */

@property --fx-ang{syntax:'<angle>';inherits:false;initial-value:0deg;}

/* ---- page transitions (cross-document View Transitions, progressive) ---- */
@view-transition{navigation:auto;}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:fxPageOut .22s ease both;}
  ::view-transition-new(root){animation:fxPageIn .38s cubic-bezier(.2,.7,.2,1) both;}
}
@keyframes fxPageOut{to{opacity:0;transform:scale(.995);}}
@keyframes fxPageIn{from{opacity:0;transform:translateY(10px);}}

/* ---- progress bar glow ---- */
.progress-bar{box-shadow:0 0 12px rgba(45,212,191,.75);}

/* ---- spotlight that follows the cursor on dark blocks ---- */
.fx-spot-layer{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(45,212,191,.14),transparent 62%);
  opacity:var(--spot,0);transition:opacity .45s ease;
}

/* ---- navigation: active section + underline ---- */
.main-nav a{position:relative;}
.main-nav ul a::after{
  content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal-300),var(--gold-300));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.main-nav ul a:hover::after,.main-nav ul a.is-active::after{transform:scaleX(1);}
.main-nav ul a.is-active{color:var(--teal-300);}

/* ---- buttons: light sweep + magnetic pull ---- */
.btn-primary,.btn-gold{position:relative;overflow:hidden;isolation:isolate;}
.btn-primary::before,.btn-gold::before{
  content:'';position:absolute;top:0;bottom:0;left:-80%;width:50%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.btn-primary:hover::before,.btn-gold:hover::before{left:130%;}
.btn{translate:var(--bx,0px) var(--by,0px);}
.btn-primary:hover{box-shadow:0 8px 24px rgba(45,212,191,.38);}

/* ---- section titles: animated accent line ---- */
.kicker::after{
  content:'';display:block;height:2px;width:0;margin-top:8px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal-400),var(--gold-500));
  transition:width .9s cubic-bezier(.2,.7,.2,1) .15s;
}
.kicker.fx-in::after{width:48px;}
.kicker.center::after{margin-left:auto;margin-right:auto;}

/* ---- richer reveal ---- */
.reveal{
  transform:translateY(34px) scale(.975);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease;
}
.reveal.in-view{transform:translateY(0) scale(1);}
.service-card.reveal,.about-copy.reveal,.badge-card.reveal,.method-item.reveal{filter:blur(5px);}
.service-card.reveal.in-view,.about-copy.reveal.in-view,.badge-card.reveal.in-view,.method-item.reveal.in-view{filter:none;}

/* once settled the cards drop the slow reveal transition so hover feels instant */
.reveal.fx-settled{transition:transform .2s ease-out,box-shadow .3s ease,border-color .3s ease,opacity .3s ease;}

/* ---- 3D tilt + spotlight glare ---- */
.fx-tilt{position:relative;}
.fx-tilt.fx-settled{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
}
.fx-tilt.fx-settled:hover{--ty:-5px;box-shadow:0 18px 40px rgba(6,15,31,.18);}
.fx-tilt::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),rgba(45,212,191,.2),transparent 65%);
  opacity:0;transition:opacity .3s ease;
}
.fx-tilt:hover::after{opacity:1;}
.service-card--cta.fx-tilt::after,.badge-card.fx-tilt::after,.method-item.fx-tilt::after,.office-card.fx-tilt::after{
  background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),rgba(94,234,212,.16),transparent 65%);
}

/* ---- rotating conic ring (badge card, office card, medallion) ---- */
.fx-ring{position:relative;}
.fx-ring::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--fx-ang),transparent 0 62%,var(--teal-300) 82%,var(--gold-300) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.anniversary-medallion::before{
  content:'';position:absolute;inset:-14px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from var(--fx-ang),transparent 0 55%,rgba(245,216,122,.0) 60%,var(--gold-300) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
}

/* ---- hero: tech grid, scan line, entrance ---- */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(94,234,212,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,234,212,.09) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 30% 35%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 75% 70% at 30% 35%,#000 20%,transparent 78%);
}
.hero::after{
  content:'';position:absolute;left:0;right:0;top:-30%;height:30%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(45,212,191,.07),transparent);
}
.hero-stats::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--teal-300),transparent) no-repeat;
  background-size:35% 100%;background-position:-40% 0;
}
.stat-number{text-shadow:0 0 26px rgba(45,212,191,.35);}

/* hero text: gradient sweep across the headline, once */
.hero h1{
  background:linear-gradient(100deg,#fff 0 42%,var(--teal-300) 50%,#fff 58% 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}

/* ---- industries & team ---- */
.industry-grid a{position:relative;overflow:hidden;isolation:isolate;}
.industry-grid a::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,rgba(45,212,191,.16),rgba(212,175,55,.12));
  transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.industry-grid a:hover::before,.industry-grid a:focus-visible::before{transform:translateY(0);}
.industry-grid a:hover,.industry-grid a:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(6,15,31,.12);}

.team-card--clickable img{transition:box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);}
.team-card--clickable:hover img,.team-card--clickable:focus-visible img{
  box-shadow:0 0 0 6px var(--ring,var(--teal-300)),0 14px 28px rgba(6,15,31,.22);
}

/* ---- map: sonar pulses + staggered entrance ---- */
.map-pulse{
  fill:none;stroke:var(--teal-400);stroke-width:1.6;vector-effect:non-scaling-stroke;
  transform-box:fill-box;transform-origin:center;pointer-events:none;opacity:0;
}
.map-pulse:has(+ .marker-dot--active){stroke:#fff;stroke-width:2.4;}

/* ==========================================================================
   Motion (only when the visitor hasn't asked for less)
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .site-header{animation:fxDrop .9s cubic-bezier(.2,.7,.2,1) backwards;}

  .hero-inner > *{animation:fxRise 1s cubic-bezier(.2,.7,.2,1) backwards;}
  .hero-inner > :nth-child(1){animation-delay:.15s;}
  .hero-inner > :nth-child(2){animation-delay:.27s;}
  .hero-inner > :nth-child(3){animation-delay:.39s;}
  .hero-inner > :nth-child(4){animation-delay:.51s;}
  .hero-inner > :nth-child(5){animation-delay:.63s;}
  .hero h1{animation:fxRise 1s cubic-bezier(.2,.7,.2,1) .39s backwards,fxSheen 2.4s ease-in-out 1.1s 1 both;}
  .anniversary-medallion{animation:medallionGlow 3s ease-in-out infinite,fxPop 1.1s cubic-bezier(.2,.9,.3,1.2) .6s backwards;}
  .hero-stats .stat{animation:fxRise .9s cubic-bezier(.2,.7,.2,1) backwards;}
  .hero-stats .stat:nth-child(1){animation-delay:.7s;}
  .hero-stats .stat:nth-child(2){animation-delay:.8s;}
  .hero-stats .stat:nth-child(3){animation-delay:.9s;}
  .hero-stats .stat:nth-child(4){animation-delay:1s;}

  .hero::before{animation:fxGrid 14s linear infinite;}
  .hero::after{animation:fxScan 9s linear infinite;}
  .hero-stats::before{animation:fxSweep 5.5s ease-in-out infinite;}

  .fx-ring::before,.anniversary-medallion::before{animation:fxSpin 7s linear infinite;}

  .map-pulse{animation:fxPulse 2.8s ease-out infinite;animation-delay:calc(var(--i,0) * .32s);}
  .map-wrap.in-view .country-shape{animation:fxShapeIn .9s ease backwards;animation-delay:calc(var(--i,0) * 110ms + .2s);}
  .map-wrap.in-view .map-label{animation:fxShapeIn .8s ease backwards;animation-delay:calc(var(--i,0) * 110ms + .7s);}
}
html.a11y-no-motion .hero h1{background:none;-webkit-text-fill-color:#fff;color:#fff;}
@media (prefers-reduced-motion:reduce){
  .hero h1{background:none;-webkit-text-fill-color:#fff;color:#fff;}
}

@keyframes fxDrop{from{transform:translateY(-100%);opacity:0;}}
@keyframes fxRise{from{opacity:0;transform:translateY(28px);filter:blur(6px);}}
@keyframes fxPop{from{opacity:0;transform:translateY(-55%) scale(.4) rotate(-25deg);}}
@keyframes fxSheen{from{background-position:100% 0;}to{background-position:0% 0;}}
@keyframes fxGrid{to{background-position:56px 56px,56px 56px;}}
@keyframes fxScan{from{top:-30%;}to{top:130%;}}
@keyframes fxSweep{0%{background-position:-40% 0;}100%{background-position:140% 0;}}
@keyframes fxSpin{to{--fx-ang:360deg;}}
@keyframes fxPulse{0%{transform:scale(1);opacity:.85;}70%{opacity:0;}100%{transform:scale(5);opacity:0;}}
@keyframes fxShapeIn{from{opacity:0;}}

/* ---- responsive: keep it light on small / touch screens ---- */
@media (max-width:1024px){
  .anniversary-medallion{translate:none !important;}
  @keyframes fxPop{from{opacity:0;transform:scale(.4) rotate(-25deg);}}
  .hero-inner,.anniversary-medallion{translate:none !important;}
}
@media (hover:none){
  .fx-tilt.fx-settled{transform:none;}
  .fx-tilt.fx-settled:hover{box-shadow:none;}
}
@media (max-width:640px){
  .hero::before{opacity:.35;}
  .service-card.reveal,.about-copy.reveal,.badge-card.reveal,.method-item.reveal{filter:none;}
}


/* PERF: effects that repaint every frame (custom-property / background-position / filter
   animations) or need a mouse are limited to large screens with a pointer. */
@media (max-width:1024px), (hover:none){
  .hero::before,.hero::after,.hero-stats::before{animation:none !important;}
  .hero::after{display:none;}
  .fx-ring::before,.anniversary-medallion::before{animation:none !important;}
  .section-team::after{animation:none !important;}
  .map-pulse{animation:none !important;opacity:0;}
  .service-card.reveal,.about-copy.reveal,.badge-card.reveal,.method-item.reveal{filter:none;}
  .hero-inner > *{animation-name:fxRiseLite;}
  .hero-stats .stat{animation-name:fxRiseLite;}
}
@keyframes fxRiseLite{from{opacity:0;transform:translateY(18px);}}