/* Floating cut-paper collage around the original WordPress image. */
[data-sa-hero-art] {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(400px, 45vw, 580px);
  margin: 0;
  overflow: hidden;
  overflow: clip;
}

[data-sa-hero-art] > img {
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 17%;
  width: 68%;
  height: 72%;
  object-fit: cover;
  box-sizing: border-box;
  border: 5px solid #f4eee2;
  border-radius: 46% 54% 48% 52% / 34% 42% 58% 66%;
  box-shadow: 3px 6px 9px -4px rgba(73, 66, 50, 0.18);
  animation: sa-photo-morph 8s -2s ease-in-out infinite;
}

.sa-clay-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sa-clay-scene::before {
  content: "";
  position: absolute;
  left: 21%;
  bottom: 12%;
  width: 64%;
  height: 5%;
  border-radius: 50%;
  background: rgba(93, 97, 77, 0.09);
  filter: blur(12px);
  animation: sa-floating-shadow 6.4s -1.6s ease-in-out infinite;
}

.sa-clay-scene::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 25%;
  left: 6%;
  width: 12%;
  aspect-ratio: 1;
  border-radius: 48% 52% 42% 58%;
  background: #aebfc1 url("./paper-fibres.svg") 40% 70% / 170px 170px;
  box-shadow: 2px 3px 3px rgba(60, 84, 88, 0.1);
  animation: sa-clay-satellite 5.8s -3s ease-in-out infinite;
}

.sa-clay-sage {
  position: absolute;
  z-index: 1;
  top: 8%;
  right: 6%;
  width: 60%;
  height: 57%;
  border-radius: 54% 46% 40% 60% / 45% 45% 55% 55%;
  background: #aeb99e url("./paper-fibres.svg") 10% 20% / 230px 230px;
  box-shadow: 3px 4px 5px rgba(68, 77, 54, 0.12);
  animation: sa-clay-morph 9s -4s ease-in-out infinite alternate;
}

.sa-clay-ring {
  position: absolute;
  z-index: 3;
  left: 8%;
  bottom: 16%;
  width: 36%;
  aspect-ratio: 1;
  background: #d6c4a3 url("./paper-fibres.svg") 70% 10% / 190px 190px;
  -webkit-mask: url("./paper-ring.svg") center / contain no-repeat;
  mask: url("./paper-ring.svg") center / contain no-repeat;
  transform: rotate(-24deg) scaleY(0.83);
  animation: sa-clay-orbit 6.4s -1.6s ease-in-out infinite;
}

.sa-clay-peach {
  position: absolute;
  z-index: 4;
  right: 6%;
  bottom: 20%;
  width: 23%;
  aspect-ratio: 1;
  border-radius: 48% 52% 56% 44% / 54% 42% 58% 46%;
  background: #c9957e url("./paper-fibres.svg") 50% 50% / 160px 160px;
  box-shadow: 2px 4px 4px rgba(93, 70, 47, 0.12);
  animation: sa-clay-float 5.4s -0.8s ease-in-out infinite;
}

.sa-clay-orbit {
  position: absolute;
  top: 5%;
  left: 6%;
  width: 81%;
  height: 78%;
  border: 1px solid rgba(121, 139, 124, 0.21);
  border-radius: 48% 52% 49% 51% / 52% 45% 55% 48%;
  transform: rotate(-21deg);
}

.sa-clay-caption {
  position: absolute;
  bottom: 3%;
  left: 5%;
  color: #686e63;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  line-height: 1.5;
}

/* Default to a complete still composition when JavaScript is unavailable. */
[data-sa-hero-art] > img,
[data-sa-hero-art] .sa-clay-scene::before,
[data-sa-hero-art] .sa-clay-scene::after,
[data-sa-hero-art] .sa-clay-scene > span {
  animation-play-state: paused;
}
[data-sa-hero-art].is-motion-active > img,
[data-sa-hero-art].is-motion-active .sa-clay-scene::before,
[data-sa-hero-art].is-motion-active .sa-clay-scene::after,
[data-sa-hero-art].is-motion-active .sa-clay-scene > span {
  animation-play-state: running;
}

@keyframes sa-photo-morph {
  0%, 100% { transform: translate(0, 8px) rotate(-1.5deg); border-radius: 46% 54% 48% 52% / 34% 42% 58% 66%; }
  50% { transform: translate(4px, -10px) rotate(1.5deg); border-radius: 53% 47% 42% 58% / 46% 32% 68% 54%; }
}
@keyframes sa-clay-morph {
  0% { transform: translate(4px, -8px) rotate(-10deg); border-radius: 54% 46% 40% 60% / 45% 45% 55% 55%; }
  100% { transform: translate(-12px, 18px) rotate(10deg); border-radius: 40% 60% 54% 46% / 56% 38% 62% 44%; }
}
@keyframes sa-clay-orbit {
  0%, 100% { transform: translate(-4px, 0) rotate(-28deg) scaleY(0.76); }
  50% { transform: translate(8px, -30px) rotate(-4deg) scaleY(0.97); }
}
@keyframes sa-clay-float {
  0%, 100% { transform: translate(3px, 5px) rotate(-8deg); }
  50% { transform: translate(-9px, -29px) rotate(22deg); }
}
@keyframes sa-clay-satellite {
  0%, 100% { transform: translate(0, 8px) rotate(-12deg); }
  50% { transform: translate(10px, -16px) rotate(22deg); }
}
@keyframes sa-floating-shadow {
  0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.8; }
  50% { transform: translateX(7px) scaleX(0.78); opacity: 0.4; }
}

@media (max-width: 781px) {
  [data-sa-hero-art] { width: min(100%, 510px); height: clamp(330px, 105vw, 520px); margin-inline: auto; }
  .sa-clay-caption { font-size: 0.5rem; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  [data-sa-hero-art] > img,
  [data-sa-hero-art] .sa-clay-scene::before,
  [data-sa-hero-art] .sa-clay-scene::after,
  [data-sa-hero-art] .sa-clay-scene > span { animation: none !important; }
}