/* MEV 2.0 — Teaching motion layer — FR1594 / EN1595 — 2026-09-09.
 * Bounded retrofit: animate only existing section thresholds and native horizontal rules.
 * No structural nodes are injected; CTA, FAQ, copy and media reservations remain static.
 */
body.mev-teaching-motion{
  --mev-teach-red:#FD0600;
  --mev-teach-black:#000000;
  --mev-teach-d4-line:3px;
  --mev-teach-d4-ms:1280ms;
}

html.mev-teach-js body.mev-teaching-motion .mev-teach-d4-boundary,
html.mev-teach-js body.mev-teaching-motion .mev-teach-hline{
  position:relative;
}

/* SECTION→SECTION D4 — reuses the existing red section boundary. */
html.mev-teach-js body.mev-teaching-motion .mev-teach-d4-boundary{
  border-bottom-color:transparent!important;
  overflow:visible;
}
html.mev-teach-js body.mev-teaching-motion .mev-teach-d4-boundary::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  z-index:8;
  height:var(--mev-teach-d4-line);
  background:var(--mev-teach-red);
  transform:scaleX(0);
  transform-origin:50% 50%;
  pointer-events:none;
}
html.mev-teach-js body.mev-teaching-motion .mev-teach-d4-boundary.is-teach-d4-building::after{
  animation:mev-teach-d4-balanced var(--mev-teach-d4-ms) linear forwards;
}
html.mev-teach-js body.mev-teaching-motion .mev-teach-d4-boundary.is-teach-d4-built::after{
  transform:scaleX(1)!important;
}
@keyframes mev-teach-d4-balanced{
  0%{transform:scaleX(0)}
  20%{transform:scaleX(.08)}
  45%{transform:scaleX(.48)}
  70%{transform:scaleX(.80)}
  100%{transform:scaleX(1)}
}

/* Native black/grey horizontal rules — same final geometry, progressive construction only. */
html.mev-teach-js body.mev-teaching-motion .mev-teach-hline[data-mev-teach-edge="top"]{
  border-top-color:transparent!important;
}
html.mev-teach-js body.mev-teaching-motion .mev-teach-hline[data-mev-teach-edge="bottom"]{
  border-bottom-color:transparent!important;
}
html.mev-teach-js body.mev-teaching-motion .mev-teach-hline::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  z-index:6;
  height:1px;
  background:var(--mev-teach-line-color,var(--mev-teach-black));
  transform:scaleX(0);
  transition:transform var(--mev-teach-ms,1000ms) cubic-bezier(.18,.72,.22,1);
  pointer-events:none;
}
html.mev-teach-js body.mev-teaching-motion .mev-teach-hline[data-mev-teach-edge="top"]::after{top:0}
html.mev-teach-js body.mev-teaching-motion .mev-teach-hline[data-mev-teach-edge="bottom"]::after{bottom:0}
html.mev-teach-js body.mev-teaching-motion .mev-teach-hline[data-mev-teach-dir="ltr"]::after{transform-origin:0 50%}
html.mev-teach-js body.mev-teaching-motion .mev-teach-hline[data-mev-teach-dir="rtl"]::after{transform-origin:100% 50%}
html.mev-teach-js body.mev-teaching-motion .mev-teach-hline.is-teach-built::after{transform:scaleX(1)}

/* One-sentence inline principles stay compact: no field, no vertical rail. Their native short top rule may build. */
html.mev-teach-js body.mev-teaching-motion .mev-p05c-inline-principle.mev-teach-hline{
  background:none!important;
}

/* CTA, FAQ and hidden photo reservation are deliberately static. */

@media(prefers-reduced-motion:reduce){
  html.mev-teach-js body.mev-teaching-motion .mev-teach-d4-boundary::after{
    animation:none!important;
    transform:scaleX(1)!important;
  }
  html.mev-teach-js body.mev-teaching-motion .mev-teach-hline::after{
    transition:none!important;
    transform:scaleX(1)!important;
  }
}