/* Mouvement : le traceur (lignes qui se dessinent), le balayage (scan) et la typographie qui s'élargit. */

@keyframes zk-draw-h {
  from { background-size: 0 1px, 0 1px; }
  to { background-size: 100% 1px, 100% 1px; }
}
@keyframes zk-draw-v {
  from { background-size: 1px 0, 1px 0; }
  to { background-size: 1px 100%, 1px 100%; }
}
@keyframes zk-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes zk-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes zk-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes zk-wipe-down {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes zk-widen {
  0% { font-stretch: 76%; opacity: 0; letter-spacing: 0.04em; }
  45% { opacity: 1; }
  100% { font-stretch: var(--stretch, 120%); letter-spacing: var(--ls, -0.028em); opacity: 1; }
}
@keyframes zk-scan {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(var(--scan-w, 100vw)); opacity: 0; }
}
@keyframes zk-spin {
  to { transform: rotate(360deg); }
}
@keyframes zk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes zk-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes zk-pop {
  from { opacity: 0; transform: scale(0.965) translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes zk-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes zk-toast-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes zk-shrink {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@keyframes zk-march {
  to { background-position: 18px 0, -18px 100%, 0 -18px, 100% 18px; }
}
@keyframes zk-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@keyframes zk-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes zk-stroke {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes zk-tick-in {
  from { opacity: 0.12; transform: scaleY(0.4); }
  to { opacity: 1; transform: none; }
}
@keyframes zk-strike {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes zk-bar {
  from { transform: scaleX(0); }
}
@keyframes zk-indeterminate {
  0% { transform: translateX(-100%) scaleX(0.3); }
  50% { transform: translateX(10%) scaleX(0.6); }
  100% { transform: translateX(110%) scaleX(0.3); }
}

/* Entrée de page orchestrée : balayage + titre qui s'élargit + éléments en cascade. */
.page.entering {
  animation: zk-wipe 0.62s var(--ease-io) both;
}
.page.entering .page-title {
  animation: zk-widen 1s var(--ease-out) 0.08s both;
}
.page.entering [data-r] {
  animation: zk-rise 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms + 160ms);
}
.scanline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--fg);
  box-shadow: 0 0 18px 2px var(--glow), 0 0 2px var(--fg);
  pointer-events: none;
  z-index: 40;
  animation: zk-scan 0.62s var(--ease-io) forwards;
}

/* Icônes qui se redessinent au survol. */
.draw-ico path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.can-draw:hover .draw-ico path,
.can-draw.drawing .draw-ico path,
.can-draw:focus-visible .draw-ico path {
  animation: zk-stroke 0.55s var(--ease-out) both;
}
.can-draw:hover .draw-ico path:nth-child(2) {
  animation-delay: 0.05s;
}
.can-draw:hover .draw-ico path:nth-child(3) {
  animation-delay: 0.1s;
}
.can-draw:hover .draw-ico path:nth-child(4) {
  animation-delay: 0.15s;
}
.can-draw:hover .draw-ico path:nth-child(n + 5) {
  animation-delay: 0.2s;
}

/* Mouvement réduit : préférence système ou réglage de l'app. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full-forced"]) *,
  :root:not([data-motion="full-forced"]) *::before,
  :root:not([data-motion="full-forced"]) *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  transition-duration: 0.01ms !important;
}
:root[data-motion="reduced"] .scanline {
  display: none;
}