/**
 * Motions de chapitre (lab Mondrian → reader).
 * Plateau : .fx-motion-board.fx-motion-{id}.is-armed.is-play | .is-exit
 * Contact : .fx-contact-{id}
 */

.fx-motion-board {
  --fx-sy: 1;
  overflow: visible;
}

.fx-motion-board .fx-motion-slot {
  --mx: 50%;
  --my: 40%;
  --dx: 0px;
  --dy: 0px;
  --rx: 0deg;
  --ry: 0deg;
}

.fx-motion-board.is-armed:not(.is-play):not(.is-exit) .fx-motion-slot {
  opacity: 0;
}

.fx-motion-board.is-play .fx-motion-slot,
.fx-motion-board.is-exit .fx-motion-slot {
  animation-duration: 0.85s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  transition: none;
}

.fx-motion-board.is-exit .fx-motion-slot {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}

@keyframes fx-motion-in-left {
  from { opacity: 0; transform: translateX(-48%) translateY(calc(var(--fx-sy, 1) * 32%)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-left {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(-48%) translateY(calc(var(--fx-sy, 1) * -32%)); }
}
@keyframes fx-motion-in-right {
  from { opacity: 0; transform: translateX(52%) translateY(calc(var(--fx-sy, 1) * 32%)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-right {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(52%) translateY(calc(var(--fx-sy, 1) * -32%)); }
}
@keyframes fx-motion-in-up {
  from { opacity: 0; transform: translateY(calc(var(--fx-sy, 1) * 55%)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-up {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(calc(var(--fx-sy, 1) * 55%)); }
}
@keyframes fx-motion-in-down {
  from { opacity: 0; transform: translateY(calc(var(--fx-sy, 1) * -42%)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-down {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(calc(var(--fx-sy, 1) * -42%)); }
}
@keyframes fx-motion-in-fade {
  from { opacity: 0; transform: scale(0.92) translateY(calc(var(--fx-sy, 1) * 16%)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-fade {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0.92) translateY(calc(var(--fx-sy, 1) * -16%)); }
}
@keyframes fx-motion-in-pop {
  from { opacity: 0; transform: scale(0.62) translateY(calc(var(--fx-sy, 1) * 22%)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-pop {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0.62) translateY(calc(var(--fx-sy, 1) * -22%)); }
}
@keyframes fx-motion-wipe {
  from { opacity: 1; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes fx-motion-wipe-out {
  from { opacity: 1; clip-path: inset(0 0 0 0); }
  to { opacity: 1; clip-path: inset(100% 0 0 0); }
}
@keyframes fx-motion-sheen {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}
@keyframes fx-motion-in-fold {
  from { opacity: 0; transform: perspective(900px) rotateX(calc(var(--fx-sy, 1) * 62deg)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-fold {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: perspective(900px) rotateX(calc(var(--fx-sy, 1) * -50deg)); }
}
@keyframes fx-motion-curtain {
  from { opacity: 1; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes fx-motion-curtain-out {
  from { opacity: 1; clip-path: inset(0 0 0 0); }
  to { opacity: 1; clip-path: inset(100% 0 0 0); }
}
@keyframes fx-motion-in-zoom {
  from { opacity: 0; transform: scale(1.28) translateY(calc(var(--fx-sy, 1) * 12%)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-zoom {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(1.2) translateY(calc(var(--fx-sy, 1) * -12%)); }
}
@keyframes fx-motion-in-flip {
  from { opacity: 0; transform: perspective(1100px) rotateX(calc(var(--fx-sy, 1) * -78deg)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-flip {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: perspective(1100px) rotateX(calc(var(--fx-sy, 1) * 78deg)); }
}
@keyframes fx-motion-in-nw {
  from { opacity: 0; transform: translate(-42%, calc(var(--fx-sy, 1) * 38%)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-nw {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate(-42%, calc(var(--fx-sy, 1) * -38%)); }
}
@keyframes fx-motion-in-ne {
  from { opacity: 0; transform: translate(48%, calc(var(--fx-sy, 1) * 32%)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-ne {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate(48%, calc(var(--fx-sy, 1) * -32%)); }
}
@keyframes fx-motion-in-se {
  from { opacity: 0; transform: translate(48%, calc(var(--fx-sy, 1) * 40%)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-se {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate(48%, calc(var(--fx-sy, 1) * -40%)); }
}
@keyframes fx-motion-in-center {
  from { opacity: 0; transform: translate(var(--fx-from-x, 0px), var(--fx-from-y, 28px)); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-motion-out-center {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate(var(--fx-from-x, 0px), var(--fx-from-y, -28px)); }
}

/* —— fade —— */
.fx-motion-fade.is-play .fx-motion-slot { animation-name: fx-motion-in-fade; animation-duration: 0.65s; }
.fx-motion-fade.is-exit .fx-motion-slot { animation-name: fx-motion-out-fade; }

/* —— cascade —— */
.fx-motion-cascade.is-play .fx-motion-slot { animation-name: fx-motion-in-center; }
.fx-motion-cascade.is-play [data-slot-id="a"],
.fx-motion-cascade.is-play [data-motion-i="1"] { animation-delay: 0.14s; }
.fx-motion-cascade.is-play [data-slot-id="b"],
.fx-motion-cascade.is-play [data-motion-i="2"] { animation-delay: 0.26s; }
.fx-motion-cascade.is-play [data-slot-id="c"],
.fx-motion-cascade.is-play [data-motion-i="3"] { animation-delay: 0.4s; }
.fx-motion-cascade.is-exit .fx-motion-slot { animation-name: fx-motion-out-center; }
.fx-motion-cascade.is-exit [data-slot-id="hero"] { animation-delay: 0.18s; }
.fx-motion-cascade.is-exit [data-slot-id="a"] { animation-delay: 0.08s; }
.fx-motion-cascade.is-exit [data-slot-id="b"] { animation-delay: 0.04s; }

/* —— rise —— */
.fx-motion-rise.is-play .fx-motion-slot { animation-name: fx-motion-in-up; }
.fx-motion-rise.is-play [data-slot-id="a"] { animation-delay: 0.1s; }
.fx-motion-rise.is-play [data-slot-id="b"] { animation-delay: 0.2s; }
.fx-motion-rise.is-play [data-slot-id="c"] { animation-delay: 0.3s; }
.fx-motion-rise.is-exit .fx-motion-slot { animation-name: fx-motion-out-down; }
.fx-motion-rise.is-exit [data-slot-id="c"] { animation-delay: 0.12s; }

/* —— wipe —— */
.fx-motion-wipe.is-armed:not(.is-play):not(.is-exit) .fx-motion-slot {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
}
.fx-motion-wipe.is-play .fx-motion-slot { animation-name: fx-motion-wipe; animation-duration: 0.7s; animation-timing-function: ease; }
.fx-motion-wipe.is-play [data-slot-id="a"] { animation-delay: 0.1s; }
.fx-motion-wipe.is-play [data-slot-id="b"] { animation-delay: 0.18s; }
.fx-motion-wipe.is-play [data-slot-id="c"] { animation-delay: 0.26s; }
.fx-motion-wipe.is-exit .fx-motion-slot { animation-name: fx-motion-wipe-out; }

/* —— focus —— */
.fx-motion-focus.is-play .fx-motion-slot { animation-name: fx-motion-in-center; animation-delay: 0.34s; }
.fx-motion-focus.is-play [data-slot-id="hero"] { animation-name: fx-motion-in-pop; animation-duration: 0.7s; animation-delay: 0s; }
.fx-motion-focus.is-play [data-slot-id="b"] { animation-delay: 0.46s; }
.fx-motion-focus.is-play [data-slot-id="c"] { animation-delay: 0.56s; }
.fx-motion-focus.is-exit .fx-motion-slot { animation-name: fx-motion-out-center; }
.fx-motion-focus.is-exit [data-slot-id="hero"] { animation-name: fx-motion-out-pop; animation-delay: 0.16s; }

/* —— split —— */
.fx-motion-split.is-play .fx-motion-slot { animation-name: fx-motion-in-center; }
.fx-motion-split.is-play [data-slot-id="a"],
.fx-motion-split.is-play [data-slot-id="b"] { animation-delay: 0.16s; }
.fx-motion-split.is-play [data-slot-id="b"] { animation-delay: 0.28s; }
.fx-motion-split.is-play [data-slot-id="c"] { animation-delay: 0.4s; }
.fx-motion-split.is-exit .fx-motion-slot { animation-name: fx-motion-out-center; }
.fx-motion-split.is-exit [data-slot-id="hero"] { animation-delay: 0.14s; }

/* —— sheen —— */
.fx-motion-sheen.is-play .fx-motion-slot { animation-name: fx-motion-in-fade; animation-duration: 0.5s; }
.fx-motion-sheen.is-exit .fx-motion-slot { animation-name: fx-motion-out-fade; }
.fx-motion-sheen .fx-motion-slot,
.fx-motion-sheen .fx-motion-slot-face { overflow: hidden; }
.fx-motion-sheen .fx-motion-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    105deg,
    transparent 35%,
    color-mix(in srgb, var(--da-on-surface, #fff) 55%, transparent) 50%,
    transparent 65%
  );
  transform: translateX(-130%);
}
.fx-motion-sheen.is-play .fx-motion-slot::after { animation: fx-motion-sheen 0.95s 0.35s ease both; }
.fx-motion-sheen .fx-motion-slot:hover::after { animation: fx-motion-sheen 0.7s ease both; }

/* —— tilt —— */
.fx-motion-tilt.is-play .fx-motion-slot { animation-name: fx-motion-in-pop; animation-duration: 0.6s; }
.fx-motion-tilt.is-exit .fx-motion-slot { animation-name: fx-motion-out-pop; }
.fx-motion-tilt .fx-motion-slot-face {
  height: 100%;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.12s ease;
  transform-style: preserve-3d;
}

/* —— scatter —— */
.fx-motion-scatter.is-play .fx-motion-slot { animation-name: fx-motion-in-center; }
.fx-motion-scatter.is-play [data-slot-id="a"] { animation-delay: 0.1s; }
.fx-motion-scatter.is-play [data-slot-id="b"] { animation-delay: 0.2s; }
.fx-motion-scatter.is-play [data-slot-id="c"] { animation-delay: 0.3s; }
.fx-motion-scatter.is-exit .fx-motion-slot { animation-name: fx-motion-out-center; }
.fx-motion-scatter.is-exit [data-slot-id="hero"] { animation-delay: 0.16s; }
.fx-motion-scatter.is-exit [data-slot-id="a"] { animation-delay: 0.08s; }
.fx-motion-scatter.is-exit [data-slot-id="b"] { animation-delay: 0.04s; }

/* —— fold —— */
.fx-motion-fold.is-play .fx-motion-slot {
  animation-name: fx-motion-in-fold;
  transform-origin: 50% calc(50% + var(--fx-sy, 1) * 50%);
}
.fx-motion-fold.is-play [data-slot-id="a"] { animation-delay: 0.1s; }
.fx-motion-fold.is-play [data-slot-id="b"] { animation-delay: 0.18s; }
.fx-motion-fold.is-play [data-slot-id="c"] { animation-delay: 0.26s; }
.fx-motion-fold.is-exit .fx-motion-slot {
  animation-name: fx-motion-out-fold;
  transform-origin: 50% calc(50% - var(--fx-sy, 1) * 50%);
}

/* —— curtain —— */
.fx-motion-curtain.is-armed:not(.is-play):not(.is-exit) .fx-motion-slot {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
}
.fx-motion-curtain.is-play .fx-motion-slot { animation-name: fx-motion-curtain; animation-duration: 0.7s; }
.fx-motion-curtain.is-play [data-slot-id="a"] { animation-delay: 0.08s; }
.fx-motion-curtain.is-play [data-slot-id="b"] { animation-delay: 0.16s; }
.fx-motion-curtain.is-play [data-slot-id="c"] { animation-delay: 0.24s; }
.fx-motion-curtain.is-exit .fx-motion-slot { animation-name: fx-motion-curtain-out; }

/* —— zoom —— */
.fx-motion-zoom.is-play .fx-motion-slot { animation-name: fx-motion-in-zoom; }
.fx-motion-zoom.is-play [data-slot-id="a"] { animation-delay: 0.08s; }
.fx-motion-zoom.is-play [data-slot-id="b"] { animation-delay: 0.16s; }
.fx-motion-zoom.is-play [data-slot-id="c"] { animation-delay: 0.24s; }
.fx-motion-zoom.is-exit .fx-motion-slot { animation-name: fx-motion-out-zoom; }

/* —— flip —— */
.fx-motion-flip.is-play .fx-motion-slot { animation-name: fx-motion-in-flip; }
.fx-motion-flip.is-play [data-slot-id="a"] { animation-delay: 0.08s; }
.fx-motion-flip.is-play [data-slot-id="b"] { animation-delay: 0.16s; }
.fx-motion-flip.is-play [data-slot-id="c"] { animation-delay: 0.24s; }
.fx-motion-flip.is-exit .fx-motion-slot { animation-name: fx-motion-out-flip; }

/* Contact : la CLASSE est sur la bulle (.fx-motion-slot), pas le texte intérieur. */
.fx-motion-slot.fx-contact-lift,
.fx-motion-slot.fx-contact-inch,
.fx-motion-slot.fx-contact-magnet,
.fx-motion-slot.fx-contact-glow,
.fx-motion-slot.fx-contact-lean,
.fx-motion-slot.fx-contact-peek,
.fx-motion-slot.fx-contact-relief,
.fx-motion-slot.fx-contact-tint,
.fx-motion-slot.fx-contact-gleam {
  position: relative;
  isolation: isolate;
}

.fx-motion-slot.fx-contact-lift {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.fx-motion-slot.fx-contact-lift:hover {
  transform: translateY(-8px);
  box-shadow:
    0 18px 34px color-mix(in srgb, var(--da-ink) 16%, transparent),
    0 6px 14px var(--da-accent-glow, color-mix(in srgb, var(--da-accent) 18%, transparent));
}

.fx-motion-slot.fx-contact-inch {
  overflow: hidden;
}
.fx-motion-slot.fx-contact-inch .fx-motion-slot-face {
  transform-origin: center center;
  transition: transform 3s ease-out;
}
.fx-motion-slot.fx-contact-inch:hover .fx-motion-slot-face {
  transform: scale(1.03);
}

.fx-motion-slot.fx-contact-magnet {
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  transition: transform 0.22s ease-out, box-shadow 0.22s ease;
}
.fx-motion-slot.fx-contact-magnet:hover {
  box-shadow: 0 12px 26px color-mix(in srgb, var(--da-ink) 12%, transparent);
}

/* Lueur : allumage net, extinction douce (la lampe meurt au leave). */
.fx-motion-slot.fx-contact-glow {
  --fx-lamp: oklch(0.93 0.1 90);
  --fx-ember: oklch(0.88 0.07 62);
  overflow: visible;
  cursor: pointer;
}
.fx-motion-slot.fx-contact-glow .fx-motion-slot-face {
  position: relative;
  z-index: 1;
}
.fx-motion-slot.fx-contact-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 0%,
    color-mix(in srgb, var(--fx-lamp) 58%, white) 0%,
    color-mix(in srgb, var(--fx-ember) 16%, white) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--fx-lamp) 50%, transparent),
    0 0 22px color-mix(in srgb, var(--fx-lamp) 50%, transparent),
    0 0 44px color-mix(in srgb, var(--fx-ember) 26%, transparent);
  opacity: 0;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.55, 1);
}
.formation-module--reader-flow .formation-reader__idea.fx-contact-glow {
  overflow: visible;
}
.fx-motion-slot.fx-contact-glow:hover::before,
.fx-motion-slot.fx-contact-glow.is-glow-on::before {
  opacity: 1;
  transition: opacity 0.18s ease-out;
}

.fx-motion-slot.fx-contact-lean {
  transform: perspective(920px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.16s ease-out, box-shadow 0.2s ease;
}
.fx-motion-slot.fx-contact-lean:hover {
  box-shadow: 0 18px 32px color-mix(in srgb, var(--da-ink) 13%, transparent);
}

.fx-motion-slot.fx-contact-peek {
  transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.fx-motion-slot.fx-contact-peek:hover {
  transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.04);
  box-shadow: 0 18px 32px color-mix(in srgb, var(--da-ink) 14%, transparent);
}

.fx-motion-slot.fx-contact-relief {
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.fx-motion-slot.fx-contact-relief:hover {
  transform: translateY(-5px);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 78%, transparent),
    0 20px 38px color-mix(in srgb, var(--da-ink) 16%, transparent);
}

.fx-motion-slot.fx-contact-tint {
  transition: transform 0.32s ease, background 0.32s ease, box-shadow 0.32s ease;
}
.fx-motion-slot.fx-contact-tint:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--da-accent) 16%, #fff);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--da-accent) 18%, transparent);
}

@keyframes fx-contact-gleam {
  from { transform: translateX(-70%); }
  to { transform: translateX(70%); }
}
.fx-motion-slot.fx-contact-gleam {
  overflow: hidden;
}
.fx-motion-slot.fx-contact-gleam::before {
  content: "";
  position: absolute;
  inset: -30% -45%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    108deg,
    transparent 38%,
    color-mix(in srgb, #fff 62%, transparent) 50%,
    transparent 62%
  );
}
.fx-motion-slot.fx-contact-gleam:hover::before {
  opacity: 1;
  animation: fx-contact-gleam 0.7s ease;
}

/* Zoom / cascade : le translate/scale ne doit pas élargir le scroll et décaler toute la page. */
.fx-motion-board.is-armed,
.fx-motion-board.is-play,
.fx-motion-board.is-exit,
.formation-module--reader-flow .formation-reader--window .formation-reader__ideas.fx-motion-board.is-armed,
.formation-module--reader-flow .formation-reader--window .formation-reader__ideas.fx-motion-board.is-play,
.formation-module--reader-flow .formation-reader--window .formation-reader__ideas.fx-motion-board.is-exit {
  overflow: hidden;
}

.fx-motion-board.is-live-resize .fx-motion-slot,
.fx-motion-board.is-live-resize .fx-motion-slot:hover,
.fx-motion-board.is-live-resize .fx-motion-slot-face,
.fx-motion-board.is-live-resize .fx-motion-slot::before,
.fx-motion-board.is-live-resize .fx-motion-slot::after {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
.fx-motion-board.is-live-resize .fx-motion-slot::before,
.fx-motion-board.is-live-resize .fx-motion-slot::after {
  opacity: 0 !important;
}

body.formation-live-edit .fx-motion-slot,
body.formation-live-edit .fx-motion-slot:hover,
body.formation-live-edit .fx-motion-slot-face,
body.formation-live-edit .fx-motion-slot::before,
body.formation-live-edit .fx-motion-slot::after {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}
body.formation-live-edit .fx-motion-slot::before,
body.formation-live-edit .fx-motion-slot::after {
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .fx-motion-board .fx-motion-slot,
  .fx-motion-board.is-armed .fx-motion-slot,
  .fx-motion-board.is-play .fx-motion-slot,
  .fx-motion-board.is-exit .fx-motion-slot,
  .fx-motion-sheen .fx-motion-slot::after,
  .fx-motion-tilt .fx-motion-slot-face,
  .fx-motion-slot.fx-contact-lift,
  .fx-motion-slot.fx-contact-magnet,
  .fx-motion-slot.fx-contact-glow,
  .fx-motion-slot.fx-contact-lean,
  .fx-motion-slot.fx-contact-peek,
  .fx-motion-slot.fx-contact-relief,
  .fx-motion-slot.fx-contact-tint,
  .fx-motion-slot.fx-contact-gleam::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
  .fx-motion-slot.fx-contact-glow::before {
    transition: none !important;
  }
}