/*
 * DAN Roma · mobile image pinch zoom.
 * The original layout stays untouched at 1×; transforms are applied only
 * during an intentional two-finger zoom on a narrow touch viewport.
 */

.mobile-pinch-host,
.mobile-pinch-controls-host {
  position: relative;
}

.mobile-pinch-host {
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-pinch-host img[data-mobile-pinch-image] {
  -webkit-user-drag: none;
  user-select: none;
}

.mobile-pinch-hint,
.mobile-pinch-reset {
  display: none;
}

@media (max-width: 820px) {
  .mobile-pinch-host.is-mobile-pinch-zoomed,
  .mobile-pinch-host[data-dan-gesture-state="PINCHING"] {
    touch-action: none;
  }

  .mobile-pinch-hint {
    position: absolute;
    z-index: 11;
    top: 12px;
    left: 12px;
    display: inline-flex;
    max-width: calc(100% - 92px);
    min-height: 32px;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    color: #fff;
    background: rgba(9, 28, 22, .72);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: uppercase;
    pointer-events: none;
    animation: mobile-pinch-hint-out .45s ease 4s both;
  }

  .mobile-pinch-hint.is-dismissed {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    animation: none;
  }

  html[dir="rtl"] .mobile-pinch-hint {
    right: 12px;
    left: auto;
  }

  .mobile-pinch-hint::before {
    font-family: Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    content: "↗";
  }

  .mobile-pinch-reset {
    position: absolute;
    z-index: 13;
    top: 12px;
    right: 12px;
    display: inline-grid;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    justify-items: center;
    align-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    color: #fff;
    background: rgba(9, 28, 22, .88);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 0;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity .18s ease, transform .18s ease;
  }

  html[dir="rtl"] .mobile-pinch-reset {
    right: auto;
    left: 12px;
  }

  .mobile-pinch-reset::before {
    font-size: 15px;
    font-weight: 500;
    content: "↺";
  }

  .mobile-pinch-reset:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .mobile-pinch-controls-host.is-mobile-pinch-zoomed > .mobile-pinch-reset {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-pinch-controls-host.is-mobile-pinch-zoomed > .mobile-pinch-hint {
    opacity: 0;
    animation: none;
  }

  .mobile-pinch-host.is-mobile-pinch-zoomed img[data-mobile-pinch-image] {
    transform: translate3d(
      var(--mobile-pinch-x, 0px),
      var(--mobile-pinch-y, 0px),
      0
    ) scale(var(--mobile-pinch-render-scale, 1)) var(--mobile-pinch-base-transform, matrix(1,0,0,1,0,0)) !important;
    transform-origin: var(--mobile-pinch-origin, 50% 50%) !important;
    transition: none !important;
    will-change: transform;
  }

  .mobile-pinch-host.is-mobile-pinch-resetting img[data-mobile-pinch-image] {
    transition: transform .22s cubic-bezier(.22, .72, .24, 1) !important;
  }

  .configurator-swipe-host.is-mobile-pinch-zoomed .configurator-swipe-ui {
    opacity: 0;
    pointer-events: none;
  }

  body.mobile-pinch-panning {
    overscroll-behavior: none;
  }
}

@keyframes mobile-pinch-hint-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-pinch-hint {
    animation: none;
  }

  .mobile-pinch-host.is-mobile-pinch-resetting img[data-mobile-pinch-image] {
    transition: none !important;
  }
}