/* Load after interaction-v9.css; keep the existing project/service cover motion. */

/* Opt-out removes light layers only: colors, shadows and keyboard focus remain. */
body [data-no-cta-fx] {
  filter: none !important;
}

body [data-no-cta-fx]::before,
body [data-no-cta-fx]::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
}

@media (max-width: 760px) {
  .hero .hero-copy > a.button.button-glass {
    min-height: 42px;
    height: 42px;
    padding: 6px 6px 6px 16px;
    gap: 13px;
    font-size: 10.5px;
    line-height: 1.4;
  }

  .hero .hero-copy > a.button.button-glass > span.button-round[aria-hidden="true"] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-basis: 28px;
    margin: 0;
  }

  .hero .hero-copy > a.button.button-glass > span.button-round > .ui-icon {
    width: 15px;
    height: 15px;
  }
}

@keyframes atelier-v10-photo-breathe {
  from { scale: 1; }
  to { scale: 1.045; }
}

@keyframes atelier-v10-contained-breathe {
  from { scale: .97; }
  to { scale: 1; }
}

/* Opaque masks keep transformed children inside rounded frames on Safari. */
body:not(.legal-mode) :is(
  .about-v5-atmosphere-main,
  .about-v5-atmosphere-detail,
  .about-v5-chapter-figure,
  .about-v5-material-inset,
  .ambiance-project,
  .ambiance-detail,
  .portrait-frame,
  .about-v5-portrait,
  .booking-summary,
  .gallery
) {
  isolation: isolate;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Explicit photo targets exclude logos, thumbnails, controls and SVG icons. */
body:not(.legal-mode) :is(
  .about-v5-atmosphere-main,
  .about-v5-atmosphere-detail,
  .about-v5-chapter-figure,
  .about-v5-material-inset,
  .ambiance-project,
  .ambiance-detail,
  .hero-project,
  .image-interlude,
  .booking-summary
) > img,
body:not(.legal-mode) .cart-item > img.cart-item-image {
  scale: 1;
  transform-origin: center;
  animation: atelier-v10-photo-breathe 11s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-play-state: running;
  transition: none;
  will-change: scale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

body:not(.legal-mode) :is(.about-v5-atmosphere-detail, .ambiance-detail, .hero-project) > img {
  animation-delay: -4.125s;
}

body:not(.legal-mode) :is(.about-v5-chapter-figure, .about-v5-material-inset, .booking-summary) > img,
body:not(.legal-mode) .cart-item > img.cart-item-image {
  animation-delay: -6.875s;
}

/* The independent scale property works alongside the older transform:none!important.
   Staying at or below 1 keeps every pixel of the contained portraits/gallery visible. */
body:not(.legal-mode) .studio .portrait-frame > img,
body:not(.legal-mode) .about-page.about-v5 .about-v5-portrait > img.about-v5-portrait-image,
body:not(.legal-mode) .gallery > img.gallery-image,
body:not(.legal-mode) .detail-dialog #dialog-content > img.dialog-cover {
  scale: .97;
  transform: none !important;
  transform-origin: center;
  animation: atelier-v10-contained-breathe 11s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-play-state: running;
  transition: none;
  will-change: scale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

body:not(.legal-mode) .studio .portrait-frame > img,
body:not(.legal-mode) .about-page.about-v5 .about-v5-portrait > img.about-v5-portrait-image,
body:not(.legal-mode) .gallery > img.gallery-image {
  object-fit: contain !important;
}

/* The interlude photograph is also contained above its text card on mobile. */
@media (max-width: 760px) {
  body:not(.legal-mode) .image-interlude > img {
    scale: .97;
    animation-name: atelier-v10-contained-breathe;
  }
}

@media (prefers-reduced-motion: reduce) {
  body :is(
    .about-v5-atmosphere-main,
    .about-v5-atmosphere-detail,
    .about-v5-chapter-figure,
    .about-v5-material-inset,
    .ambiance-project,
    .ambiance-detail,
    .hero-project,
    .image-interlude,
    .booking-summary,
    .portrait-frame,
    .about-v5-portrait,
    .gallery
  ) > img,
  body .cart-item > img.cart-item-image,
  body .detail-dialog #dialog-content > img.dialog-cover {
    scale: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto;
  }
}