/* Street Shakers — Apparitions au défilement (CSS pur) + secours pour les navigateurs sans cette fonction */
/* ---------- APPARITIONS AU DÉFILEMENT (100 % CSS) ----------
   Navigateurs récents : les blocs apparaissent, les titres se dévoilent et les étiquettes « poppent »
   au fil du défilement. Ailleurs, tout est simplement affiché. */
@keyframes reveal{ from{ opacity:0; translate:0 26px; } to{ opacity:1; translate:0 0; } }
@keyframes stickpop{ 0%{ transform:rotate(var(--r)) scale(0.3); opacity:0; } 100%{ transform:rotate(var(--r)) scale(1); opacity:1; } }
@keyframes cue-out{ to{ opacity:0; translate:0 12px; visibility:hidden; } }
@supports (animation-timeline: view()){
  .reveal{ animation:reveal linear both; animation-timeline:view(); animation-range:entry 0% entry 55%; }
  section:not(.hero) .title-wipe{ animation:wipe linear both; animation-timeline:view(); animation-range:entry 20% cover 35%; }
  .sticker{ animation:stickpop linear both; animation-timeline:view(); animation-range:entry 0% entry 60%; }
  .s2{ animation-range:entry 10% entry 70%; }
  .s3{ animation-range:entry 20% entry 85%; }
  .s4{ animation-range:entry 30% entry 100%; }
  .scroll-cue{ animation:cue-out linear both; animation-timeline:scroll(root); animation-range:0 80px; }
}
@media (prefers-reduced-motion: reduce){
  .reveal, .title-wipe, .sticker, .scroll-cue{ animation:none !important; }
}
/* Secours pour les navigateurs sans animations liées au défilement (ex. Firefox) :
   js/main.js ajoute la classe .no-sda sur <html> et .is-visible quand l'élément arrive à l'écran.
   Les animations se jouent alors une fois, à l'arrivée à l'écran. */
.no-sda .reveal{ opacity:0; translate:0 26px; transition:opacity .7s ease, translate .7s ease; }
.no-sda .reveal.is-visible{ opacity:1; translate:0 0; }
.no-sda section:not(.hero) .title-wipe{ clip-path:inset(0 100% 0 0); transition:clip-path 1s cubic-bezier(.22,.9,.3,1); }
.no-sda section:not(.hero) .title-wipe.is-visible{ clip-path:inset(-30px); }
.no-sda .sticker{ opacity:0; scale:.3; transition:opacity .35s ease, scale .6s cubic-bezier(.3,1.6,.5,1); }
.no-sda .stickers.is-visible .sticker{ opacity:1; scale:1; }
.no-sda .stickers.is-visible .s2{ transition-delay:.1s; }
.no-sda .stickers.is-visible .s3{ transition-delay:.2s; }
.no-sda .stickers.is-visible .s4{ transition-delay:.3s; }