.comparison-separate .comparison-photo { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; background: none; border-radius: 0; display: block; }
.transformation-gallery { align-items: start; padding-bottom: 64px; }
.transformation-card { min-width: 0; }
.transformation-gallery .transformation-zoom { position: relative; display: block; min-width: 0; border: 0; border-radius: 10px; box-shadow: none; cursor: zoom-in; }
.transformation-gallery .transformation-zoom:hover { transform: none; }
.transformation-gallery .transformation-zoom img { display: block; width: 100%; height: auto; border-radius: 10px; }
@property --transformation-neon-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.product .poster { position:relative; display:block; }
.changes a::before, .product .poster::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--transformation-neon-angle), #2ee6ff, #8c67ff, #ff5ebc, #f3b544, #2ee6ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .45;
  pointer-events: none;
  transition: opacity .25s ease;
}
.changes a { transition: filter .25s ease; }
.product .poster { transition: transform .22s ease, border-color .22s ease, filter .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .changes a:hover::before, .product:hover .poster::before {
    opacity: 1;
    animation: transformation-neon-spin 3s linear infinite;
  }
  .changes a:hover, .product:hover .poster { filter: drop-shadow(0 0 5px #2ee6ff55) drop-shadow(0 0 10px #8c67ff33); }
}
.changes a:focus-visible::before, .product .poster:focus-visible::before { opacity: 1; animation: transformation-neon-spin 3s linear infinite; }
@keyframes transformation-neon-spin { to { --transformation-neon-angle: 360deg; } }
@supports not (mask-composite: exclude) {
  .changes a::before, .product .poster::before { display: none; }
  .changes a, .product .poster { box-shadow: inset 0 0 0 2px #2ee6ff; }
}
@media (prefers-reduced-motion: reduce) {
  .changes a::before, .product .poster::before { animation: none !important; transition: none; }
  .changes a, .product .poster { transition: none; }
}
.transformation-zoom:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.transformation-zoom-hint, .transformation-photo-label { position: absolute; right: 8px; bottom: 8px; padding: 5px 8px; border-radius: 5px; color: #fff; background: #141914df; font-size: 11px; pointer-events: none; }
.transformation-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; overflow: hidden; border-radius: 10px; background: #1b211d; }
.transformation-pair .transformation-zoom img { height:100%; aspect-ratio:169 / 600; object-fit:cover; }
.transformation-photo-label { right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.transformation-copy { padding: 12px 14px; }
.transformation-copy h2 { margin: 0; font-size: 15px; line-height: 1.4; color: #f5f5eb; overflow-wrap: anywhere; }
.transformation-copy p { margin: 8px 0 0; color: #c2c9c0; font-size: 13px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.transformation-duration { display: block; margin-bottom: 6px; color: var(--yellow); font-size: 11px; font-weight: 700; }
.transformation-empty { grid-column: 1 / -1; padding: 48px 20px; text-align: center; }
.transformation-lightbox { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; padding: 48px 16px 14px; border: 0; border-radius: 12px; background: #141914; color: #fff; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
.transformation-lightbox::backdrop { background: #000d; }
.transformation-lightbox figure { margin: 0; }
.transformation-lightbox img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 150px); object-fit: contain; margin: auto; }
.transformation-lightbox figcaption { max-width: 80ch; padding-top: 12px; text-align: center; font-size: 13px; overflow-wrap: anywhere; }
.transformation-lightbox-close { position: absolute; top: 4px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 50%; font: 30px/1 sans-serif; color: #fff; background: transparent; cursor: pointer; }
.transformation-lightbox-close:hover, .transformation-lightbox-close:focus-visible { color: #141914; background: var(--yellow); }
@media(max-width:560px) { .transformation-copy { padding: 10px 0; } .transformation-copy h2 { font-size: 13px; } }