/* V13: premium motion system inspired by product storytelling sites.
   The effects are intentionally lightweight and fully respect reduced motion. */
:root{
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --motion-ease-soft:cubic-bezier(.16,1,.3,1);
}

/* Floating, compact navigation after the first screen begins to move. */
.site-header,.site-header .utility-bar,.site-header .navbar{
  transition:height .42s var(--motion-ease),opacity .3s ease,background .38s ease,
    border-color .38s ease,box-shadow .38s ease,transform .42s var(--motion-ease);
}
.site-header.is-scrolled{
  position:fixed!important;
  top:10px;
  color:#fff;
  pointer-events:none;
}
.site-header.is-scrolled .utility-bar{
  height:0;
  opacity:0;
  overflow:hidden;
  visibility:hidden;
}
.site-header.is-scrolled .navbar{
  height:64px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:17px;
  background:rgba(5,20,37,.84);
  box-shadow:0 18px 55px rgba(2,13,25,.22),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  pointer-events:auto;
}
.site-header.is-scrolled .brand-copy strong{font-size:16px}
.site-header.is-scrolled .brand-mark{scale:.84}
.navbar{position:relative}

/* The top rule becomes a calm reading-progress signal. */
.scroll-progress{height:3px;background:rgba(255,255,255,.025)}
.scroll-progress span{transition:width .1s linear;box-shadow:0 0 16px rgba(220,190,126,.65)}

/* First-screen choreography. It only runs when JavaScript opts in. */
.motion-ready .hero-copy>*,.motion-ready .hero-card{
  opacity:0;
  translate:0 30px;
  filter:blur(7px);
}
.motion-ready.motion-loaded .hero-copy>*{
  animation:motionHeroIn .92s var(--motion-ease) forwards;
}
.motion-ready.motion-loaded .hero-copy>:nth-child(1){animation-delay:.08s}
.motion-ready.motion-loaded .hero-copy>:nth-child(2){animation-delay:.16s}
.motion-ready.motion-loaded .hero-copy>:nth-child(3){animation-delay:.26s}
.motion-ready.motion-loaded .hero-copy>:nth-child(4){animation-delay:.36s}
.motion-ready.motion-loaded .hero-copy>:nth-child(5){animation-delay:.46s}
.motion-ready.motion-loaded .hero-card{
  animation:motionHeroCardIn 1.05s .28s var(--motion-ease) forwards;
}
@keyframes motionHeroIn{
  to{opacity:1;translate:0 0;filter:blur(0)}
}
@keyframes motionHeroCardIn{
  from{opacity:0;translate:35px 24px;filter:blur(9px)}
  to{opacity:1;translate:0 0;filter:blur(0)}
}

/* Pointer parallax stays on compositor-friendly properties. */
.motion-capable .hero-photo{translate:var(--hero-photo-x,0) var(--hero-photo-y,0)}
.motion-capable .orb-one{translate:var(--hero-orb-x,0) var(--hero-orb-y,0)}
.motion-capable .orb-two{translate:var(--hero-orb2-x,0) var(--hero-orb2-y,0)}
.motion-capable .city-lines{translate:var(--hero-city-x,0) var(--hero-city-y,0)}
.motion-capable .hero-card{
  transform:perspective(1250px) rotateX(var(--hero-tilt-x,0deg)) rotateY(var(--hero-tilt-y,0deg));
  transform-style:preserve-3d;
  transition:transform .35s var(--motion-ease),box-shadow .35s ease;
}
.motion-capable .hero-card:hover{box-shadow:0 34px 95px rgba(0,0,0,.32)}
.hero-card:after{
  content:'';
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--hero-shine-x,50%) var(--hero-shine-y,50%),rgba(255,255,255,.24),transparent 38%);
  transition:opacity .3s ease;
}
.motion-capable .hero-card:hover:after{opacity:1}

/* Scroll reveal with group-based stagger. Independent translate/scale avoids
   fighting existing hover transforms on cards. */
.motion-ready .motion-item{
  opacity:0;
  translate:0 28px;
  scale:.985;
  filter:blur(6px);
  transition:opacity .78s var(--motion-ease),translate .78s var(--motion-ease),
    scale .78s var(--motion-ease),filter .62s ease;
  transition-delay:calc(var(--motion-order,0)*65ms);
}
.motion-ready .motion-item.is-inview{
  opacity:1;
  translate:0 0;
  scale:1;
  filter:blur(0);
}

/* Fine spotlight that follows the pointer across large content surfaces. */
.motion-surface{position:relative;isolation:isolate}
.motion-glow{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(360px circle at var(--motion-x,50%) var(--motion-y,50%),rgba(222,196,142,.16),transparent 63%);
  transition:opacity .35s ease;
}
.motion-surface:hover>.motion-glow{opacity:1}
.service-card.featured>.motion-glow,.core-route>.motion-glow,.guide-feature>.motion-glow{
  background:radial-gradient(390px circle at var(--motion-x,50%) var(--motion-y,50%),rgba(255,255,255,.18),transparent 64%);
}

/* Deliberate button sheen instead of a distracting cursor effect. */
.btn,.nav-cta,.submit-btn,.process-detail a,.policy-actions a,.route-cta{
  position:relative;
  overflow:hidden;
}
.btn:after,.nav-cta:after,.submit-btn:after,.process-detail a:after,.policy-actions a:after,.route-cta:after{
  content:'';
  position:absolute;
  top:-90%;
  bottom:-90%;
  left:-35%;
  width:22%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.46),transparent);
  transform:skewX(-18deg) translateX(-240%);
  transition:transform .78s var(--motion-ease);
}
.btn:hover:after,.nav-cta:hover:after,.submit-btn:hover:after,.process-detail a:hover:after,.policy-actions a:hover:after,.route-cta:hover:after{
  transform:skewX(-18deg) translateX(780%);
}

/* Smooth, accessible case carousel. */
.motion-ready .story-slider{display:grid;overflow:hidden}
.motion-ready .story-slide{
  display:grid!important;
  grid-area:1/1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  translate:24px 0;
  scale:.992;
  transition:opacity .58s var(--motion-ease),translate .68s var(--motion-ease),
    scale .68s var(--motion-ease),visibility 0s linear .68s;
}
.motion-ready .story-slide.active{
  z-index:2;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  translate:0 0;
  scale:1;
  transition-delay:0s;
}
.story-controls{align-items:center}
.story-status{
  min-width:46px;
  margin-right:6px;
  color:#91a2b3;
  font:600 9px var(--latin);
  letter-spacing:.13em;
  text-align:center;
}
.story-status b{color:var(--gold-2);font-weight:600}
.story-slider:focus-visible{outline:1px solid var(--gold-2);outline-offset:8px}

/* Scroll-linked display type and a practical back-to-top action. */
.stories:before,.policy-center:before,.qa-center:before{
  translate:0 var(--motion-shift,0px);
  transition:translate .12s linear;
}
.motion-backtop{
  position:fixed;
  z-index:14;
  right:35px;
  bottom:103px;
  width:43px;
  height:43px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(6,20,38,.88);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 12px 35px rgba(3,17,31,.2);
  backdrop-filter:blur(12px);
  opacity:0;
  visibility:hidden;
  translate:0 12px;
  transition:opacity .3s ease,visibility .3s,translate .38s var(--motion-ease),background .25s ease;
}
.motion-backtop.show{opacity:1;visibility:visible;translate:0 0}
.motion-backtop:hover{background:var(--gold);color:var(--navy)}
.motion-backtop svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.floating-consult{
  transition:opacity .28s ease,visibility .28s,translate .36s var(--motion-ease),background .25s ease;
}
.floating-consult.avoids-control{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  translate:0 12px;
}

@media(max-width:760px){
  .site-header.is-scrolled{top:8px}
  .site-header.is-scrolled .navbar{width:calc(100% - 16px);height:60px;padding:0 13px;border-radius:15px}
  .site-header.is-scrolled .brand-copy strong{font-size:15px}
  .site-header.is-scrolled .nav-links{top:calc(100% + 8px);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 24px 60px rgba(2,14,27,.3)}
  .motion-ready .story-slide{display:block!important}
  .story-head{gap:18px}
  .story-status{display:none}
  .motion-backtop{right:23px;bottom:91px;width:40px;height:40px}
  .motion-glow{display:none}
}

@media(prefers-reduced-motion:reduce){
  .motion-ready .hero-copy>*,.motion-ready .hero-card,.motion-ready .motion-item{
    animation:none!important;
    opacity:1!important;
    translate:none!important;
    scale:1!important;
    filter:none!important;
    transition:none!important;
  }
  .motion-capable .hero-photo,.motion-capable .orb-one,.motion-capable .orb-two,.motion-capable .city-lines{
    translate:none!important;
  }
  .motion-capable .hero-card{transform:none!important;transition:none!important}
  .motion-ready .story-slide{transition:none!important}
  .btn:after,.nav-cta:after,.submit-btn:after,.process-detail a:after,.policy-actions a:after,.route-cta:after{display:none}
  .stories:before,.policy-center:before,.qa-center:before{translate:none!important}
}
