/* HSM GmbH — Premium UI Enhancements */

/* ============================================================
   1. VIEW TRANSITIONS (Cross-Document, Chrome 126+ / Edge)
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.42s;
  animation-timing-function:cubic-bezier(.22,1,.36,1)
}
::view-transition-old(root){
  animation-name:hsmFadeOut
}
::view-transition-new(root){
  animation-name:hsmFadeIn
}
@keyframes hsmFadeOut{to{opacity:0;transform:scale(.992) translateY(8px)}}
@keyframes hsmFadeIn{from{opacity:0;transform:scale(1.008) translateY(-8px)}}

/* Persistent elements get a name → smoother transition */
.nav{view-transition-name:hsm-nav}#chat-fb{view-transition-name:hsm-chat-fb}#chat-m{view-transition-name:hsm-chat-m}
.footer{view-transition-name:hsm-footer}

/* Reduce motion */
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ============================================================
   2. JS-FALLBACK FADE (Browsers ohne View Transitions API)
   ============================================================ */
html.hsm-fade-out{
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .28s ease,transform .28s ease
}

/* ============================================================
   3. MAGNETIC CTAs — keine eigenen Styles nötig,
   bei mobile-touch wird Effekt via JS deaktiviert
   ============================================================ */
.magnet{will-change:transform}

/* ============================================================
   5. CHAT FAB — versteckt am Header, fadet ein nach Scroll
   ============================================================ */
#chat-fb{
  transition:opacity .4s cubic-bezier(.22,1,.36,1),
             transform .4s cubic-bezier(.22,1,.36,1),
             background .25s ease,box-shadow .25s ease;
}
#chat-fb.chat-hidden{
  opacity:0;
  transform:translateY(80px) scale(.85);
  pointer-events:none;
}
#chat-fb.chat-hidden::after{display:none}

/* ============================================================
   4. PARALLAX — Performance-Hint für Browser
   ============================================================ */
.hv,.ph-vid{will-change:transform}