/* JS keeps the exact same filter chain through sharp/blurred state changes. */
.works .work-card img.skn-wave-image,
.packet-gallery .packet-artwork img.skn-wave-image {
  transition: none !important;
  transform-origin: center;
}
/* Blur the complete site as one composed layer. The modal is moved outside
   .site by site.js, so its image and controls are never part of that filter. */
body.skn-lightbox-open > .site,
body:has(> dialog.artwork-lightbox[open]) > .site {
  filter: blur(12px) !important;
}
body.skn-lightbox-open > #wpadminbar,
body:has(> dialog.artwork-lightbox[open]) > #wpadminbar {
  filter: blur(12px) !important;
}
/* Avoid applying a second page-level blur through older saved CSS rules. */
body.skn-lightbox-open > .site .portfolio-page,
body.skn-lightbox-open > .site .site-header,
body.skn-lightbox-open > .site .contact-section,
body.skn-lightbox-open > .site .footer {
  filter: none !important;
}
dialog.artwork-lightbox::backdrop {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* The initial random desktop reveal uses the same zoom as a hovered image. */
@media (min-width: 1025px) and (hover: hover) {
  .works .work-card.skn-initial-sharp img {
    transform: scale(1.035) !important;
  }
  .works .work-card.skn-initial-sharp[data-category="mandala"] img {
    transform: scale(1.19) !important;
  }
}
/* Fallback breathing. When JS is active it synchronizes blur and zoom directly. */
.works .work-card img {
  --skn-motion-amount: 1;
  --skn-breath-blur-max: 14px;
  --skn-breath-blur-min: 7px;
  --skn-breath-zoom: .08;
  animation: skn-home-breath 14s ease-in-out infinite !important;
  transform-origin: center !important;
}
.works .work-card img.skn-wave-image {
  animation: none !important;
}
.works .work-card:nth-child(2n) img {
  animation-delay: -3s !important;
}
.works .work-card:nth-child(3n) img {
  animation-delay: -7s !important;
}
.packet-gallery .packet-artwork img {
  animation: none !important;
}
body:has(dialog.artwork-lightbox[open]) .packet-gallery .packet-artwork img {
  --skn-motion-amount: 1;
  animation: skn-gallery-breath 18s ease-in-out infinite !important;
}
/* Gleiche Intensität auch im CSS-Fallback für Tablet und Mobil. */
@media (max-width: 1024px) {
  .works .work-card img {
    --skn-breath-blur-max: 18px;
    --skn-breath-blur-min: 3px;
    --skn-breath-zoom: .18;
    animation-duration: 13.5s !important;
  }
}
@keyframes skn-home-breath {
  0%, 100% {
    scale: 1;
    filter: blur(var(--skn-breath-blur-max, 14px));
  }
  50% {
    scale: calc(1 + var(--skn-breath-zoom, .08) * var(--skn-motion-amount, 1));
    filter: blur(var(--skn-breath-blur-min, 7px));
  }
}
@keyframes skn-gallery-breath {
  0%, 100% {
    scale: 1;
  }
  50% {
    scale: 1.014 1.009;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .works .work-card img,
  body:has(dialog.artwork-lightbox[open]) .packet-gallery .packet-artwork img {
    animation: none !important;
  }
}