@layer motion;
@layer motion {
  .splash .hammer { transform-origin: 222px 196px; transform: rotate(-55deg); }
  .splash .sparks, .splash .flash { opacity: 0; transform-origin: 222px 190px; transform: scale(.3); }
  .splash[data-play] .hammer { animation: strike .45s var(--e-io) .45s forwards; }
  .splash[data-play] .anvil { animation: shake .3s ease-out .9s; }
  .splash[data-play] .sparks, .splash[data-play] .flash { animation: sparks .4s var(--e-out) .9s forwards; }
  .splash[data-play] .splash__flash { animation: flash .4s ease-out .88s; }
  .splash[data-play] .splash__word { animation: stamp .45s var(--e-out) 1s forwards; }
  .splash[data-out] { animation: lift .8s var(--e-io) forwards; }
  @keyframes strike { to { transform: rotate(0); } }
  @keyframes shake { 25% { transform: translate(2px, 2px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, -1px); } }
  @keyframes sparks { to { opacity: 1; transform: scale(1); } }
  @keyframes flash { 8% { opacity: .9; } to { opacity: 0; } }
  @keyframes stamp { from { opacity: 0; transform: translateX(-50%) scale(1.4); filter: blur(5px); } to { opacity: 1; transform: translateX(-50%) scale(1); filter: none; } }
  @keyframes lift { to { clip-path: inset(0 0 100% 0); } }

  /* hero : entrée après le rideau */
  .hero [data-in] { opacity: 0; translate: 0 1.25rem; transition: opacity 1s var(--e-out), translate 1s var(--e-out); }
  body[data-ready] .hero [data-in] { opacity: 1; translate: 0 0; }
  body[data-ready] .hero [data-in="2"] { transition-delay: .12s; }
  body[data-ready] .hero [data-in="3"] { transition-delay: .24s; }
  body[data-ready] .hero [data-in="4"] { transition-delay: .36s; }
  .hero__media { transform: scale(1.08); transition: transform 2.4s var(--e-out); }
  body[data-ready] .hero__media { transform: scale(1); }

  /* bande */
  .tape__track { animation: tape 48s linear infinite; }
  @keyframes tape { to { transform: translateX(-50%); } }

  /* révélations */
  .reveal { opacity: 0; translate: 0 1.5rem; transition: opacity .9s var(--e-out), translate .9s var(--e-out); }
  .reveal[data-on] { opacity: 1; translate: 0 0; }
  .reveal[data-delay="1"] { transition-delay: .1s; } .reveal[data-delay="2"] { transition-delay: .2s; } .reveal[data-delay="3"] { transition-delay: .3s; }

  /* illustrations qui se tracent */
  .cap__media img { opacity: 0; transition: opacity 1.2s var(--e-out); clip-path: inset(0 100% 0 0); }
  .cap__media[data-on] img { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity .6s, clip-path 1.4s var(--e-io); }

  /* parallaxe du titre hero (JS pose --y) */
  .hero__in { transform: translateY(calc(var(--y, 0) * 1px)); }

  @media (prefers-reduced-motion: reduce) {
    .splash { display: none; }
    .hero [data-in], .reveal, .cap__media img { opacity: 1; translate: 0 0; clip-path: none; transition: none; }
    .hero__media { transform: none; transition: none; }
    .tape__track { animation: none; }
    .hero__in { transform: none; }
  }
}