/* ==== Apparitions au défilement ==== */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].sk-in { opacity: 1; transform: none; }
[data-reveal-rule] {
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal-rule].sk-in { transform: scaleX(1); }

/* ==== Animations continues ==== */
@keyframes sk-ken { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes sk-swing { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }
@keyframes sk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sk-tick { 0%, 100% { opacity: .28; } 50% { opacity: 1; } }
@keyframes sk-rotate { to { transform: rotate(360deg); } }
@keyframes sk-nudge { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-5px); } }
@keyframes sk-logo-turn { 0%, 62% { transform: rotate(45deg); } 82% { transform: rotate(405deg); } 100% { transform: rotate(405deg); } }
@keyframes sk-logo-glow { 0%, 58% { border-color: var(--sk-gold-line); } 70% { border-color: #e8c07a; } 100% { border-color: var(--sk-gold-line); } }

.sk-ken { animation: sk-ken 28s ease-in-out infinite alternate; }
.sk-swing { animation: sk-swing 2.4s ease-in-out infinite alternate; transform-origin: 50% 6px; }
.sk-marquee { animation: sk-marquee 44s linear infinite; }
.sk-tick { animation: sk-tick 2s steps(2, end) infinite; }
.sk-gear { animation: sk-rotate 40s linear infinite; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-rule] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sk-ken, .sk-swing, .sk-marquee, .sk-tick, .sk-gear, .sk-logo, .sk-logo-in, .sk-sticker { animation: none !important; }
}