/*
 * Méthode Richard — sept transformations premium
 * Contrat : <html data-mr-transition="0-1"> … "6-7"
 *            un seul élément visible porte view-transition-name: mr-objet-central
 * Dépendances visuelles : aucune couleur ni fonte ajoutée ; la charte --mrs-* reste propriétaire.
 */

html[data-mr-transition] {
  --mr-vt-duration: 680ms;
  --mr-vt-ease-geometry: cubic-bezier(.22, 1, .36, 1);
  --mr-vt-ease-material: cubic-bezier(.20, .80, .20, 1);
}

html[data-mr-transition="0-1"] {
  --mr-vt-duration: 720ms;
  --mr-vt-ease-geometry: cubic-bezier(.22, 1, .36, 1);
  --mr-vt-ease-material: cubic-bezier(.18, .78, .18, 1);
}

html[data-mr-transition="1-2"] {
  --mr-vt-duration: 620ms;
  --mr-vt-ease-geometry: cubic-bezier(.20, .78, .20, 1);
  --mr-vt-ease-material: cubic-bezier(.20, .72, .20, 1);
}

html[data-mr-transition="2-3"] {
  --mr-vt-duration: 640ms;
  --mr-vt-ease-geometry: cubic-bezier(.16, 1, .30, 1);
  --mr-vt-ease-material: cubic-bezier(.24, .74, .20, 1);
}

html[data-mr-transition="3-4"] {
  --mr-vt-duration: 760ms;
  --mr-vt-ease-geometry: cubic-bezier(.77, 0, .18, 1);
  --mr-vt-ease-material: cubic-bezier(.65, 0, .20, 1);
}

html[data-mr-transition="4-5"] {
  --mr-vt-duration: 680ms;
  --mr-vt-ease-geometry: cubic-bezier(.20, .90, .25, 1);
  --mr-vt-ease-material: cubic-bezier(.20, .82, .18, 1);
}

html[data-mr-transition="5-6"] {
  --mr-vt-duration: 860ms;
  --mr-vt-ease-geometry: cubic-bezier(.65, 0, .18, 1);
  --mr-vt-ease-material: cubic-bezier(.22, .76, .18, 1);
}

html[data-mr-transition="6-7"] {
  --mr-vt-duration: 720ms;
  --mr-vt-ease-geometry: cubic-bezier(.22, 1, .36, 1);
  --mr-vt-ease-material: cubic-bezier(.20, .80, .20, 1);
}

/* Le shell ne crossfade pas. Seul l'objet central est chorégraphié. */
html[data-mr-transition]::view-transition-group(root),
html[data-mr-transition]::view-transition-new(root) {
  animation: none;
}

html[data-mr-transition]::view-transition-old(root) {
  animation: none;
  visibility: hidden;
}

html[data-mr-transition]::view-transition-group(root) {
  z-index: 0;
}

html[data-mr-transition]::view-transition-group(mr-objet-central) {
  z-index: 10;
  animation-duration: var(--mr-vt-duration);
  animation-timing-function: var(--mr-vt-ease-geometry);
  animation-fill-mode: both;
}

html[data-mr-transition]::view-transition-image-pair(mr-objet-central) {
  isolation: isolate;
  overflow: visible;
}

html[data-mr-transition]::view-transition-old(mr-objet-central),
html[data-mr-transition]::view-transition-new(mr-objet-central) {
  animation-duration: var(--mr-vt-duration);
  animation-timing-function: var(--mr-vt-ease-material);
  animation-fill-mode: both;
  backface-visibility: hidden;
  mix-blend-mode: normal;
  will-change: transform, clip-path;
}

/* 0 → 1 : portrait / ouverture optique / vidéo */
html[data-mr-transition="0-1"]::view-transition-old(mr-objet-central) {
  z-index: 1;
  transform-origin: 50% 42%;
  animation-name: mr-01-old;
}

html[data-mr-transition="0-1"]::view-transition-new(mr-objet-central) {
  z-index: 2;
  transform-origin: 50% 42%;
  animation-name: mr-01-new;
}

@keyframes mr-01-old {
  0%, 12% { transform: scale(1); }
  78%, 100% { transform: scale(1.018); }
}

@keyframes mr-01-new {
  0%, 12% {
    clip-path: circle(0% at 50% 42%);
    transform: scale(1.035);
  }
  42% { clip-path: circle(34% at 50% 42%); }
  78%, 100% {
    clip-path: circle(150% at 50% 42%);
    transform: scale(1);
  }
}

/* 1 → 2 : le cadre vidéo se recadre sur les mains et devient le geste. */
html[data-mr-transition="1-2"]::view-transition-old(mr-objet-central) {
  z-index: 1;
  transform-origin: 50% 68%;
  animation-name: mr-12-old;
}

html[data-mr-transition="1-2"]::view-transition-new(mr-objet-central) {
  z-index: 2;
  transform-origin: 50% 68%;
  animation-name: mr-12-new;
}

@keyframes mr-12-old {
  0%, 18% { transform: scale(1); }
  82%, 100% { transform: scale(1.012); }
}

@keyframes mr-12-new {
  0%, 18% {
    clip-path: inset(49% 8% 49% 8% round 999px);
    transform: scale(1.02);
  }
  46% { clip-path: inset(31% 4% 31% 4% round 48px); }
  82%, 100% {
    clip-path: inset(0 round 0);
    transform: scale(1);
  }
}

/* 2 → 3 : le plan de classement se redresse en carte éditoriale. */
html[data-mr-transition="2-3"]::view-transition-old(mr-objet-central) {
  z-index: 1;
  transform-origin: 50% 70%;
  animation-name: mr-23-old;
}

html[data-mr-transition="2-3"]::view-transition-new(mr-objet-central) {
  z-index: 2;
  transform-origin: 50% 70%;
  animation-name: mr-23-new;
}

@keyframes mr-23-old {
  0%, 20% { transform: perspective(1100px) rotateX(0deg); }
  86%, 100% { transform: perspective(1100px) rotateX(-2deg) scale(.992); }
}

@keyframes mr-23-new {
  0%, 20% {
    clip-path: polygon(8% 51%, 94% 45%, 92% 51%, 6% 57%);
    transform: perspective(1100px) rotateX(5deg) scale(.965);
  }
  52% {
    clip-path: polygon(4% 18%, 97% 8%, 96% 84%, 3% 94%);
    transform: perspective(1100px) rotateX(2deg) scale(.985);
  }
  86%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: perspective(1100px) rotateX(0deg) scale(1);
  }
}

/* 3 → 4 : la carte pivote comme une porte vers la scène de vente. */
html[data-mr-transition="3-4"]::view-transition-old(mr-objet-central) {
  z-index: 2;
  transform-origin: 0% 50%;
  animation-name: mr-34-old;
}

html[data-mr-transition="3-4"]::view-transition-new(mr-objet-central) {
  z-index: 1;
  transform-origin: 50% 50%;
  animation-name: mr-34-new;
}

@keyframes mr-34-old {
  0%, 16% {
    transform: perspective(1200px) rotateY(0deg);
    visibility: visible;
  }
  56% {
    transform: perspective(1200px) rotateY(-48deg);
    visibility: visible;
  }
  86% {
    transform: perspective(1200px) rotateY(-88deg) scale(.99);
    visibility: visible;
  }
  87%, 100% {
    transform: perspective(1200px) rotateY(-92deg) scale(.99);
    visibility: hidden;
  }
}

@keyframes mr-34-new {
  0%, 16% { transform: scale(1.012); }
  86%, 100% { transform: scale(1); }
}

/* 4 → 5 : la scène se concentre dans la carte BOP. */
html[data-mr-transition="4-5"]::view-transition-old(mr-objet-central) {
  z-index: 1;
  transform-origin: 50% 50%;
  animation-name: mr-45-old;
}

html[data-mr-transition="4-5"]::view-transition-new(mr-objet-central) {
  z-index: 2;
  transform-origin: 50% 50%;
  animation-name: mr-45-new;
}

@keyframes mr-45-old {
  0%, 18% { transform: scale(1); }
  84%, 100% { transform: scale(.985); }
}

@keyframes mr-45-new {
  0%, 18% {
    clip-path: inset(47% 43% 47% 43% round 999px);
    transform: scale(.94);
  }
  48% {
    clip-path: inset(22% 18% 22% 18% round 22px);
    transform: scale(.975);
  }
  84%, 100% {
    clip-path: inset(0 round 0);
    transform: scale(1);
  }
}

/* 5 → 6 : une carte-maîtresse déploie une plaque collective continue. */
html[data-mr-transition="5-6"]::view-transition-old(mr-objet-central) {
  z-index: 2;
  transform-origin: 50% 50%;
  animation-name: mr-56-old;
}

html[data-mr-transition="5-6"]::view-transition-new(mr-objet-central) {
  z-index: 1;
  transform-origin: 50% 50%;
  animation-name: mr-56-new;
}

@keyframes mr-56-old {
  0%, 14% {
    clip-path: inset(0 round 0);
    transform: scale(1);
    visibility: visible;
  }
  34% {
    clip-path: inset(4% 18% round 18px);
    transform: scale(1.006);
    visibility: visible;
  }
  62%, 82% {
    clip-path: inset(8% 38% round 18px);
    transform: scale(1);
    visibility: visible;
  }
  83%, 100% {
    clip-path: inset(8% 38% round 18px);
    transform: scale(1);
    visibility: hidden;
  }
}

@keyframes mr-56-new {
  0%, 14% {
    clip-path: inset(8% 49.5% round 18px);
    transform: perspective(1400px) rotateX(-2deg) scale(.992);
  }
  34% { clip-path: inset(8% 31% round 18px); }
  62% {
    clip-path: inset(4% 9% round 12px);
    transform: perspective(1400px) rotateX(-.6deg) scale(.997);
  }
  82%, 100% {
    clip-path: inset(0 round 0);
    transform: perspective(1400px) rotateX(0deg) scale(1);
  }
}

/* 6 → 7 : le mur devient le cadre de Charlotte et referme la boucle. */
html[data-mr-transition="6-7"]::view-transition-old(mr-objet-central) {
  z-index: 1;
  transform-origin: 50% 50%;
  animation-name: mr-67-old;
}

html[data-mr-transition="6-7"]::view-transition-new(mr-objet-central) {
  z-index: 2;
  transform-origin: 50% 46%;
  animation-name: mr-67-new;
}

@keyframes mr-67-old {
  0%, 18% { transform: scale(1); }
  84%, 100% { transform: scale(.985); }
}

@keyframes mr-67-new {
  0%, 18% {
    clip-path: polygon(50% 49%, 51% 50%, 51% 51%, 50% 52%, 49% 51%, 49% 50%);
    transform: scale(1.025);
  }
  52% {
    clip-path: polygon(35% 18%, 68% 18%, 84% 50%, 68% 82%, 35% 82%, 18% 50%);
    transform: scale(1.012);
  }
  84%, 100% {
    clip-path: polygon(-2% -2%, 102% -2%, 102% 102%, -2% 102%, -2% 102%, -2% -2%);
    transform: scale(1);
  }
}

/* Double sécurité : si la préférence change pendant le parcours, le remplacement est immédiat. */
@media (prefers-reduced-motion: reduce) {
  html[data-mr-transition]::view-transition-group(root),
  html[data-mr-transition]::view-transition-group(mr-objet-central),
  html[data-mr-transition]::view-transition-new(root),
  html[data-mr-transition]::view-transition-new(mr-objet-central) {
    animation: none !important;
  }

  html[data-mr-transition]::view-transition-old(root),
  html[data-mr-transition]::view-transition-old(mr-objet-central) {
    animation: none !important;
    visibility: hidden !important;
  }
}