/* ДО / ПІСЛЯ — фото старого керма розходиться навпіл, під ним нове.
   Підключається після site.css, використовує його змінні.        */

.reveal{--p:0}

.reveal__part{position:absolute;inset:0;will-change:transform}
.reveal__part img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block
}

/* ліва половина */
.reveal__part--left{
  clip-path:polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
  transform:translateX(calc(var(--p) * -102%))
}

/* права половина: край на 0.4% лівіше — мікро-нахлист,
   інакше по шву проступає світла щілина.               */
.reveal__part--right{
  clip-path:polygon(49.6% 0%, 100% 0%, 100% 100%, 49.6% 100%);
  transform:translateX(calc(var(--p) * 102%))
}

/* тонка тінь по лінії розриву — щоб шов читався як розріз */
.reveal__part--left::after{
  content:"";position:absolute;top:0;bottom:0;right:50%;width:10px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.35));
  opacity:calc(var(--p) * 3);pointer-events:none
}

.reveal__badge{
  position:absolute;top:14px;left:14px;z-index:4;pointer-events:none;
  background:rgba(20,15,13,.72);border:1px solid rgba(176,138,82,.42);
  backdrop-filter:blur(6px);border-radius:99px;padding:6px 13px;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--thread)
}

@media (prefers-reduced-motion:reduce){
  .reveal__part{transform:none!important;opacity:calc(1 - var(--p))}
}