/* =========================================================================
   NEED4LEASE — anim.css
   Motion design uniquement : aucun changement de design.
   Les états "cachés" ne s'appliquent que si JS actif (html.anim-ready)
   ET si l'utilisateur accepte le mouvement (prefers-reduced-motion).
   Fallback : sans JS ou avec reduced-motion, tout reste visible.
   ========================================================================= */

/* ---------- NAVBAR : fond opaque au scroll (hook data-anim="navbar") ---- */
header[data-anim="navbar"]{
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease;
}
header[data-anim="navbar"].nav-solid{
  background:rgba(8,8,10,.92);
  border-bottom-color:var(--line-2);
  box-shadow:0 14px 44px -22px rgba(0,0,0,.85);
}

/* ---------- Tout le reste : seulement si mouvement autorisé ------------- */
@media (prefers-reduced-motion: no-preference){

  /* Reveal générique (fade-up) */
  .anim-ready [data-anim="fade-up"]{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .9s cubic-bezier(.22,.65,.25,1),transform .9s cubic-bezier(.22,.65,.25,1);
  }

  /* Cascade (stagger) — délais posés en inline par anim.js */
  .anim-ready [data-anim="stagger"]{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .85s cubic-bezier(.22,.65,.25,1),transform .85s cubic-bezier(.22,.65,.25,1);
  }

  .anim-ready [data-anim="fade-up"].in,
  .anim-ready [data-anim="stagger"].in{
    opacity:1;
    transform:none;
  }

  /* Titre hero mot à mot — spans créés par anim.js */
  .anim-ready .w-anim{
    display:inline-block;
    opacity:0;
    transform:translateY(.55em);
    transition:opacity .75s cubic-bezier(.22,.65,.25,1),transform .75s cubic-bezier(.22,.65,.25,1);
  }
  .anim-ready .w-anim.in{
    opacity:1;
    transform:none;
  }

  /* Ken-burns du hero : dé-zoom lent vers l'état d'origine scale(1.05) */
  .anim-ready [data-parallax] > img{
    animation:n4l-kenburns 9s cubic-bezier(.2,.6,.3,1) both;
  }
  @keyframes n4l-kenburns{
    from{transform:scale(1.14)}
    to{transform:scale(1.05)}
  }

  /* Catalogue : ré-apparition en cascade au changement de filtre */
  .anim-ready .f-in{
    animation:n4l-fin .5s cubic-bezier(.22,.65,.25,1) both;
  }
  @keyframes n4l-fin{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:none}
  }

  /* Halo pulsé sur le Pack 3 (offre mise en avant) */
  .anim-ready .offer.feat::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:0 40px 120px -42px rgba(225,27,44,.95);
    opacity:0;
    animation:n4l-halo 3.6s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes n4l-halo{
    0%,100%{opacity:0}
    50%{opacity:1}
  }
}

/* Mots du gradient rouge du hero (équivalent visuel de .hero h1 .red,
   appliqué mot à mot car le clip de texte ne traverse pas les spans animés) */
.w-red{
  background:linear-gradient(120deg,var(--red-2),var(--red));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}