/* fx/transformations.css — Transformations section mount layer.
   Same mechanics as fx/engine-hero.css (fade-in, focus ring, WebGL-off
   <img> fallback) — a separate file because this mount lives inside a
   bounded, aspect-ratio'd card (see .transformations-frame in
   assets/css/style.css), not a full-bleed hero. */

#transformations-mount {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: ew-resize;
  background: #0b0906; /* never a white flash while the two photos decode */
}

#transformations-mount canvas,
#transformations-mount img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

#transformations-mount.is-loaded canvas,
#transformations-mount.is-loaded img {
  opacity: 1;
}

#transformations-mount:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gold) 70%, white);
}

@media (prefers-reduced-motion: reduce) {
  #transformations-mount canvas,
  #transformations-mount img { transition: none; }
}