/* SYNISTAR_GLASS_MORPH_V1_20261113
   v1.1 fine tune: responsive 720ms desktop / 600ms mobile crossfade.
   Original Synistar Clayglass light/dark palette is restored in design-tokens.css.
   A soft refractive cross-dissolve replaces cloud fronts and hard-edge wipes.
   The official star remains perfectly centered on page exits. */

/* Existing Clayglass CSS has generic view-transition animation:none!important.
   Override it only while a deliberate theme change is underway. */
html.syn162-theme-morph::view-transition-group(root){
  animation-duration:720ms !important;
  animation-timing-function:cubic-bezier(.22,.69,.2,1) !important;
}
html.syn162-theme-morph::view-transition-image-pair(root){
  isolation:isolate;
}
html.syn162-theme-morph::view-transition-old(root),
html.syn162-theme-morph::view-transition-new(root){
  mix-blend-mode:normal !important;
  transform-origin:50% 50%;
  backface-visibility:hidden;
}
html.syn162-theme-morph::view-transition-old(root){
  z-index:1;
  animation:syn162-glass-out 720ms cubic-bezier(.22,.69,.2,1) both !important;
}
html.syn162-theme-morph::view-transition-new(root){
  z-index:2;
  animation:syn162-glass-in 720ms cubic-bezier(.22,.69,.2,1) both !important;
}
/* Both snapshots stay aligned: no sideways slide, no expanding circle,
   and no literal material that hides page copy during the switch. */
@keyframes syn162-glass-out{
  0%   {opacity:1;   filter:blur(0) saturate(1);  transform:scale(1);}
  35%  {opacity:.82; filter:blur(1px) saturate(1.06);transform:scale(1.003);}
  72%  {opacity:.24; filter:blur(3.5px) saturate(.9);transform:scale(1.009);}
  100% {opacity:0;   filter:blur(5px) saturate(.88);transform:scale(1.013);}
}
@keyframes syn162-glass-in{
  0%   {opacity:0;   filter:blur(5px) saturate(.88);transform:scale(.989);}
  32%  {opacity:.23; filter:blur(3.5px) saturate(.94);transform:scale(.994);}
  68%  {opacity:.78; filter:blur(1px) saturate(1.05);transform:scale(.998);}
  100% {opacity:1;   filter:blur(0) saturate(1); transform:scale(1);}
}

/* Simple fallback when the browser does not implement same-document View
   Transitions. The theme controls still work, and materials glide smoothly. */
html.syn162-theme-fallback body,
html.syn162-theme-fallback .site-header,
html.syn162-theme-fallback .syn90-nav-wrap,
html.syn162-theme-fallback .syn90-footer,
html.syn162-theme-fallback :is(.syn90-utility,.syn90-route-rail,.syn90-mobile-menu-inner),
html.syn162-theme-fallback :is(.button,.syn91-button,.syn90-theme,.syn91-service-item,.syn95-work-row,.form-panel){
  transition:background-color 670ms ease,background 670ms ease,
    color 670ms ease,border-color 670ms ease,box-shadow 670ms ease !important;
}

/* Loader repair: centered official star, gentle scale/fade only.
   No horizontal shine, translated mask or left-origin progress motion. */
.syn101-loader-stage{
  margin-inline:auto;
  transform:none;
  transform-origin:center center;
  justify-self:center;
  align-self:center;
}
.syn101-loader-logo{
  margin-inline:auto;
  transform:none;
  transform-origin:50% 50%;
}
.syn101-loader-logo-reveal{
  clip-path:none !important;
  overflow:visible;
  transform:none !important;
}
.syn101-loader-logo img{
  object-position:center center;
}
.syn101-loader-logo::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}
.syn101-loader-progress{
  margin-inline:auto;
  border-radius:99px;
}
.syn101-loader-progress i{
  transform-origin:center center !important;
}
body.syn101-route-leaving .syn101-loader{
  transition:opacity .19s ease,visibility 0s !important;
}
body.syn101-route-leaving .syn101-loader-stage{
  animation:syn162-loader-arrival 360ms cubic-bezier(.18,.65,.18,1) both !important;
}
body.syn101-route-leaving .syn101-loader-logo-reveal{
  clip-path:none !important;
  animation:none !important;
}
body.syn101-route-leaving .syn101-loader-logo::after{
  animation:none !important;
}
body.syn101-route-leaving .syn101-loader-progress i{
  animation:syn162-loader-progress 380ms cubic-bezier(.2,.65,.15,1) both !important;
}
@keyframes syn162-loader-arrival{
  from{opacity:0;transform:scale(.955);}
  to{opacity:1;transform:scale(1);}
}
@keyframes syn162-loader-progress{
  from{transform:scaleX(.02);}
  to{transform:scaleX(1);}
}

@media(max-width:820px){
  html.syn162-theme-morph::view-transition-old(root){
    animation-duration:600ms !important;
  }
  html.syn162-theme-morph::view-transition-new(root){
    animation-duration:600ms !important;
  }
  html.syn162-theme-morph::view-transition-group(root){
    animation-duration:600ms !important;
  }
}
@media(prefers-reduced-motion:reduce){
  html.syn162-theme-morph::view-transition-old(root),
  html.syn162-theme-morph::view-transition-new(root){
    animation:none !important;
    filter:none !important;
    transform:none !important;
  }
  body.syn101-route-leaving .syn101-loader-stage,
  body.syn101-route-leaving .syn101-loader-progress i{
    animation:none !important;
  }
}