/* Load after mobile-v8.css. Animate cover images only, inside their steady frames. */
@keyframes atelier-v9-cover-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.10); }
}

body:not(.legal-mode) .services .service-card .service-card-image > img,
body:not(.legal-mode) .services .service-card .service-card-image:is(:hover, :active, :focus-visible) > img,
body:not(.legal-mode) .project-card .project-image > img,
body:not(.legal-mode) .project-card:is(:hover, :active, :focus-visible, :focus-within) .project-image > img {
  transform: scale(1);
  transform-origin: center;
  animation: atelier-v9-cover-zoom 8.5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-play-state: running;
  transition: none;
  will-change: transform;
}

body:not(.legal-mode) .services .service-card:nth-child(2n) .service-card-image > img,
body:not(.legal-mode) .project-card:nth-child(2n) .project-image > img {
  animation-delay: -2.83s;
}

body:not(.legal-mode) .services .service-card:nth-child(3n) .service-card-image > img,
body:not(.legal-mode) .project-card:nth-child(3n) .project-image > img {
  animation-delay: -5.67s;
}

/* Registered angles let the light turn while the pill-shaped mask stays still. */
@property --atelier-v9-light-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes atelier-v9-edge-light {
  from { --atelier-v9-light-angle: 0deg; }
  to { --atelier-v9-light-angle: 360deg; }
}

@keyframes atelier-v9-inner-light {
  from { background-position: 0% 25%, 100% 75%; }
  to { background-position: 100% 75%, 0% 25%; }
}

/* Both light layers sit below all text, including unwrapped text nodes. */
body:not(.legal-mode) :is(.button, .service-reserve, .header-cta, .about-v5-contact-button):not(:disabled):not([aria-disabled="true"]) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* A steady outer glow preserves every existing box-shadow and focus ring. */
  filter: drop-shadow(0 0 18px #c18b5747);
}

body:not(.legal-mode) :is(.button, .service-reserve, .header-cta, .about-v5-contact-button):not(:disabled):not([aria-disabled="true"])::before,
body:not(.legal-mode) :is(.button, .service-reserve, .header-cta, .about-v5-contact-button):not(:disabled):not([aria-disabled="true"]):is(:hover, :active, :focus-visible)::before {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, #fff8e95c 0%, #fff3dc25 28%, transparent 65%),
    radial-gradient(ellipse at center, #e3b17f38 0%, #e3b17f14 32%, transparent 68%);
  background-size: 180% 220%, 180% 220%;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 12px #f8d4a62b, inset 0 1px 1px #fff8;
  opacity: var(--atelier-v9-inner-opacity, 1);
  transform: none;
  animation: atelier-v9-inner-light 3.6s ease-in-out infinite alternate;
  animation-delay: 0s;
  animation-play-state: running;
  transition: none;
}

/* Keep the moving interior gentle under light text; the edge stays fully lit. */
body:not(.legal-mode) :is(.button-dark, .about-v5-contact-button),
body:not(.legal-mode) .site-header.scrolled .header-cta,
body.page-mode:not(.legal-mode) .header-cta {
  --atelier-v9-inner-opacity: .30;
}

body:not(.legal-mode) .contact .button-dark {
  --atelier-v9-inner-opacity: .12;
}

body:not(.legal-mode) .contact .contact-form .button-dark:hover {
  background: linear-gradient(120deg, #49362d, #866047);
}

/* Safari uses the WebKit mask; unsupported masks retain only the inner light. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  body:not(.legal-mode) :is(.button, .service-reserve, .header-cta, .about-v5-contact-button):not(:disabled):not([aria-disabled="true"])::after,
  body:not(.legal-mode) :is(.button, .service-reserve, .header-cta, .about-v5-contact-button):not(:disabled):not([aria-disabled="true"]):is(:hover, :active, :focus-visible)::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 3px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
      from var(--atelier-v9-light-angle, 0deg),
      #b582554d 0deg,
      #c69768 45deg,
      #fff9e9 85deg,
      #b77b46 125deg,
      #f9e5c566 180deg,
      #a26c435c 220deg,
      #fff3d7 275deg,
      #ca975a 315deg,
      #b582554d 360deg
    );
    -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: 1;
    transform: none;
    animation: atelier-v9-edge-light 4s linear infinite;
    animation-play-state: running;
    transition: none;
  }
}

/* Legal pages and reduced-motion keep static images and the existing CTA colors. */
.legal-mode .services .service-card .service-card-image > img,
.legal-mode .project-card .project-image > img {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

.legal-mode :is(.button, .service-reserve, .header-cta, .about-v5-contact-button)::before,
.legal-mode :is(.button, .service-reserve, .header-cta, .about-v5-contact-button)::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.legal-mode :is(.button, .service-reserve, .header-cta, .about-v5-contact-button) {
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body :is(.button, .service-reserve, .header-cta, .about-v5-contact-button) {
    filter: none !important;
  }

  body .services .service-card .service-card-image > img,
  body .project-card .project-image > img {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  body :is(.button, .service-reserve, .header-cta, .about-v5-contact-button)::before,
  body :is(.button, .service-reserve, .header-cta, .about-v5-contact-button)::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    transition: none !important;
  }
}