/*
 * Apparitions au défilement et animations discrètes.
 * Les états masqués ne s'appliquent que si JavaScript est actif (classe .js posée par boot.js) :
 * sans JavaScript, tout le contenu reste visible.
 */
.js [data-reveal] { opacity: 0; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease-out), clip-path 1.1s var(--ease-out); transition-delay: calc(var(--reveal-delay, 0) * 90ms); }
.js [data-reveal="rise"] { transform: translate3d(0, 28px, 0); }
.js [data-reveal="clip"] { opacity: 1; clip-path: inset(0 0 100% 0 round var(--radius-lg)); }
.js [data-reveal].is-visible, .js.reveal-all [data-reveal] { opacity: 1; transform: none; }
.js [data-reveal="clip"].is-visible, .js.reveal-all [data-reveal="clip"] { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
/* Une carte inclinable reprend sa transformation 3D une fois révélée */
.js [data-tilt][data-reveal].is-visible { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
[data-reveal-delay="1"] { --reveal-delay: 1; }
[data-reveal-delay="2"] { --reveal-delay: 2; }
[data-reveal-delay="3"] { --reveal-delay: 3; }
[data-reveal-delay="4"] { --reveal-delay: 4; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes zoom-in { from { opacity: 0; transform: scale(.96); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { transform: scale(.9); opacity: .8; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes dash { to { stroke-dashoffset: -100; } }
@keyframes halo { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.15); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes hero-zoom { from { scale: 1.08; } to { scale: 1; } }

.hero__media img { animation: hero-zoom 2.4s var(--ease-out) both; }
.emblem .logo-mark { animation: float 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; }
  .hero__media img, .emblem .logo-mark { animation: none; }
}