/* Naboo site — styles des animations discrètes (voir site-motion.js). */

/* Header qui se condense au scroll — actif même en reduced-motion (aide à la lecture). */
.mk-nav { transition: box-shadow 0.3s cubic-bezier(0.2,0,0,1), background-color 0.3s ease, border-color 0.3s ease; }
html.mk-scrolled .mk-nav { box-shadow: 0 10px 28px -16px rgba(14,21,37,0.28); background: rgba(244,246,251,0.95); }
html.mk-scrolled .mk-nav.mk-nav-dark { box-shadow: 0 12px 34px -18px rgba(0,0,0,0.6); background: rgba(14,21,37,0.9); border-bottom-color: rgba(255,255,255,0.12); }

@media (prefers-reduced-motion: no-preference) {
  /* Maquettes (bureau / téléphone) : entrée avec un léger basculement 3D, puis
     léger soulèvement au survol. */
  html.mk-anim .mk-desktop.mk-reveal,
  html.mk-anim .mk-phone.mk-reveal {
    transform: perspective(1500px) rotateX(8deg) translateY(30px) scale(0.975);
    transform-origin: center bottom;
  }
  html.mk-anim .mk-desktop.mk-reveal.mk-in,
  html.mk-anim .mk-phone.mk-reveal.mk-in {
    transform: perspective(1500px) rotateX(0deg) translateY(0) scale(1);
  }
  html.mk-anim .mk-desktop.mk-reveal.mk-in:hover { transform: perspective(1500px) translateY(-6px) scale(1.008); box-shadow: 0 44px 74px -24px rgba(14,21,37,0.42); }
  html.mk-anim .mk-phone.mk-reveal.mk-in:hover { transform: perspective(1500px) translateY(-6px); }

  html.mk-anim .mk-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s cubic-bezier(0.2, 0, 0, 1), transform 0.65s cubic-bezier(0.2, 0, 0, 1);
  }
  html.mk-anim .mk-reveal.mk-in {
    opacity: 1;
    transform: none;
  }
  html.mk-anim .mk-nav {
    animation: mkNavIn 0.5s cubic-bezier(0.2, 0, 0, 1) both;
  }
  @keyframes mkNavIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
}