/* Guangzhou 04 / independent art objects / 20261012-effects01.
 * Every selector stays inside a new figure; existing worlds are never styled.
 * No timers, CSS animations or transitions: the bounded JS clock owns motion.
 * Static defaults are complete compositions, including without JavaScript.
 */
.s4-artpiece[data-s4-effect] {
  --s4-chalk: #f2f2e9;
  --s4-jade: #799f91;
  --s4-ink: #183e35;
  --s4-silver: #cdd7d1;
  --s4-gold: #d7c7a1;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--s4-chalk);
  color: var(--s4-ink);
  pointer-events: none;
  user-select: none;
}
.s4-artpiece[data-s4-effect] *,
.s4-artpiece[data-s4-effect] *::before,
.s4-artpiece[data-s4-effect] *::after {
  box-sizing: border-box;
}
.s4-artpiece[data-s4-effect] .s4-stage {
  position: absolute;
  inset: 0;
  perspective: 850px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
  /* No grouping/flattening properties on this shared 3D stage. */
}
.s4-artpiece[data-s4-effect] .s4-stage > * {
  position: absolute;
}
.s4-artpiece[data-s4-effect] .s4-primary {
  inset: 10%;
  z-index: 1;
  overflow: hidden;
  background: var(--s4-jade);
  box-shadow: 0 8px 20px #183e351c;
}
.s4-artpiece[data-s4-effect] .s4-art-image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 50%;
}

/* 01 — diagonal image refraction; central image stays continuous. */
.s4-artpiece[data-s4-effect='prism-cut'] {
  background: #dce6df;
}
.s4-artpiece[data-s4-effect='prism-cut'] .s4-primary {
  inset: 7% 6%;
}
.s4-artpiece[data-s4-effect='prism-cut'] .s4-prism {
  inset: 7% 6%;
  z-index: 2;
  transform: translateX(var(--s4-a, 0%));
  clip-path: polygon(0 0, 23% 0, 43% 100%, 20% 100%);
  filter: saturate(0.72) contrast(1.06);
}
.s4-artpiece[data-s4-effect='prism-cut'] .s4-prism:nth-child(3) {
  clip-path: polygon(38% 0, 47% 0, 22% 100%, 13% 100%);
  transform: translateX(var(--s4-b, 0%));
  filter: brightness(1.16);
}
.s4-artpiece[data-s4-effect='prism-cut'] .s4-prism:nth-child(4) {
  clip-path: polygon(78% 0, 91% 0, 68% 100%, 55% 100%);
  transform: translateX(var(--s4-b, 0%));
  filter: saturate(0.6);
}
.s4-artpiece[data-s4-effect='prism-cut'] .s4-prism:nth-child(5) {
  clip-path: polygon(92% 0, 100% 0, 100% 100%, 75% 100%);
  filter: brightness(1.1);
}

/* 02 — carved wall and two real image windows. */
.s4-artpiece[data-s4-effect='negative-window'] {
  background: #e7e9de;
}
.s4-artpiece[data-s4-effect='negative-window'] .s4-primary {
  inset: 9% 29% 0 9%;
  border-radius: 48% 48% 0 0;
  box-shadow:
    -8px -5px 0 #fafbf0,
    7px 0 0 #b9c7b9;
}
.s4-artpiece[data-s4-effect='negative-window'] .s4-oculus {
  width: 23%;
  aspect-ratio: 1;
  top: 17%;
  right: 4%;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #f7f7ed;
  box-shadow: inset 0 0 0 2px #879e91;
}
.s4-artpiece[data-s4-effect='negative-window'] .s4-window-jamb {
  width: 14%;
  height: 32%;
  right: 8%;
  bottom: 0;
  border-left: 1px solid #8ba392;
  border-right: 9px solid #f4f4e9;
  background: linear-gradient(90deg, #d2d9cb, #f3f3e8);
}

/* 03 — upright photograph, horizontal plinth, vertical fascia. */
.s4-artpiece[data-s4-effect='floating-plinth'] {
  background: #dfe7df;
}
.s4-artpiece[data-s4-effect='floating-plinth'] .s4-primary {
  inset: 10% 17% 23%;
  z-index: 4;
  transform: translateY(var(--s4-a, -2%)) rotateY(var(--s4-b, -7deg));
  border: 4px solid #f5f6ed;
}
.s4-artpiece[data-s4-effect='floating-plinth'] .s4-plinth-top {
  width: 82%;
  height: 21%;
  bottom: 9%;
  left: 9%;
  z-index: 3;
  background: linear-gradient(125deg, #f8f8ee, #b2c7ba);
  transform: rotateX(62deg) rotateZ(-4deg);
  border: 1px solid #95ada0;
}
.s4-artpiece[data-s4-effect='floating-plinth'] .s4-plinth-front {
  width: 82%;
  height: 7%;
  left: 9%;
  bottom: 9%;
  z-index: 2;
  background: linear-gradient(90deg, #9eafa7, #e9efe4);
  transform: skewY(-2deg);
}
.s4-artpiece[data-s4-effect='floating-plinth'] .s4-plinth-shadow {
  left: 24%;
  right: 24%;
  bottom: 21%;
  height: 5%;
  z-index: 3;
  border-radius: 50%;
  background: #214f4033;
  transform: scaleX(var(--s4-c, 0.88));
  filter: blur(3px);
}

/* 04 — different masks give visible over/under intersections. */
.s4-artpiece[data-s4-effect='woven-screen'] .s4-primary {
  inset: 6% 8%;
}
.s4-artpiece[data-s4-effect='woven-screen'] :is(.s4-warp, .s4-weft) {
  z-index: 2;
  inset: 0 0 0 58%;
}
.s4-artpiece[data-s4-effect='woven-screen'] .s4-warp {
  background: repeating-linear-gradient(
    90deg,
    #cedfd7dd 0 9px,
    #295544c9 10px 12px,
    transparent 12px 26px
  );
  transform: translateX(var(--s4-a, 0px));
}
.s4-artpiece[data-s4-effect='woven-screen'] .s4-weft {
  background: repeating-linear-gradient(
    0deg,
    #edf2e8df 0 9px,
    #afc9bb 10px 12px,
    transparent 12px 26px
  );
  mask-image: repeating-linear-gradient(90deg, #000 0 13px, #0005 13px 26px);
  transform: translateY(var(--s4-b, 0px));
}

/* 05 — a readable initial aperture, never a black/empty frame. */
.s4-artpiece[data-s4-effect='iris-aperture'] {
  background: #c8d8cc;
}
.s4-artpiece[data-s4-effect='iris-aperture'] .s4-primary {
  inset: 8%;
  clip-path: circle(var(--s4-a, 70%) at 50% 50%);
}
.s4-artpiece[data-s4-effect='iris-aperture'] .s4-iris-blade {
  z-index: 2;
  width: 46%;
  height: 16%;
  left: 27%;
  top: 0;
  transform-origin: 50% 315%;
  transform: rotate(calc(var(--s4-i) * 60deg + var(--s4-b, 0deg)));
  clip-path: polygon(0 0, 100% 0, 65% 100%, 8% 69%);
  background: linear-gradient(115deg, #f2f5e7, #8aa897, #c8d9cd);
  border-bottom: 1px solid #476e5c;
}

/* 06 — three distinct frames repeated for one seamless belt. */
.s4-artpiece[data-s4-effect='film-conveyor'] {
  background: #193c32;
}
.s4-artpiece[data-s4-effect='film-conveyor'] .s4-primary {
  inset: 6% 6% 32%;
}
.s4-artpiece[data-s4-effect='film-conveyor'] .s4-film-track {
  left: 0;
  bottom: 5%;
  width: 200%;
  height: 23%;
  display: flex;
  padding-block: 8px;
  z-index: 2;
  transform: translateX(var(--s4-a, 0%));
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, #d5e0d4 8px 13px, transparent 13px 22px)
      top / 100% 4px repeat-x,
    repeating-linear-gradient(90deg, transparent 0 8px, #d5e0d4 8px 13px, transparent 13px 22px)
      bottom / 100% 4px repeat-x;
}
.s4-artpiece[data-s4-effect='film-conveyor'] .s4-film-cell {
  position: relative;
  flex: 0 0 16.666667%;
  overflow: hidden;
  border-inline: 5px solid #193c32;
}

/* 07 — source-aligned horizontal section planes. */
.s4-artpiece[data-s4-effect='section-layers'] .s4-primary {
  inset: 13% 10%;
}
.s4-artpiece[data-s4-effect='section-layers'] .s4-section {
  inset: 13% 10%;
  z-index: 2;
  clip-path: inset(calc(var(--s4-i) * 30%) 0 calc(72% - var(--s4-i) * 30%) 0);
  transform: translate3d(
      calc(var(--s4-i) * var(--s4-a, 3px)),
      calc(var(--s4-i) * -4px),
      calc(12px + var(--s4-i) * var(--s4-b, 8px))
    )
    rotateY(-5deg);
  opacity: 0.64;
  filter: saturate(0.58) brightness(1.13);
}

/* 08 — reflective embossed border, not a global gradient over the photo. */
.s4-artpiece[data-s4-effect='iridescent-emboss'] {
  background: #668b7c;
}
.s4-artpiece[data-s4-effect='iridescent-emboss'] .s4-primary {
  inset: 16% 11%;
  z-index: 3;
}
.s4-artpiece[data-s4-effect='iridescent-emboss'] .s4-emboss-rim {
  inset: 5%;
  border-radius: 43% 8% 42% 8%;
  z-index: 1;
  background: conic-gradient(
    from var(--s4-a, 24deg),
    #5b8d78,
    #eef1e9 13%,
    #88b6a4 24%,
    #b4c7c3 42%,
    #eef0de 55%,
    #648c7d 76%,
    #5b8d78
  );
  box-shadow:
    inset 2px 2px 1px #faffea,
    inset -3px -2px 1px #214e3e;
}
.s4-artpiece[data-s4-effect='iridescent-emboss'] .s4-emboss-grain {
  inset: 6%;
  border-radius: 43% 8% 42% 8%;
  z-index: 2;
  background: repeating-radial-gradient(
    ellipse at 30% 70%,
    transparent 0 4px,
    #f8ffef50 5px,
    #143f3540 6px,
    transparent 7px 11px
  );
}

/* 09 — anisotropic reflection restricted to the metal wings. */
.s4-artpiece[data-s4-effect='brushed-silver'] {
  background: #c1cec7;
}
.s4-artpiece[data-s4-effect='brushed-silver'] .s4-primary {
  inset: 11% 16%;
  z-index: 3;
}
.s4-artpiece[data-s4-effect='brushed-silver'] .s4-metal-wing {
  top: 0;
  bottom: 0;
  width: 18%;
  left: 0;
  background:
    repeating-linear-gradient(0deg, #ffffff30 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #5e7d6e, #eaf0e4 36%, #9bb4a5 47%, #f7f8ef 54%, #637e6f);
  background-size:
    100% 100%,
    240% 100%;
  background-position:
    0 0,
    var(--s4-a, 50%) 0;
}
.s4-artpiece[data-s4-effect='brushed-silver'] .s4-metal-wing:last-child {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}

/* 10 — stepped shallow carving. */
.s4-artpiece[data-s4-effect='limestone-relief'] .s4-primary {
  inset: 17%;
  z-index: 5;
  box-shadow: inset 0 2px 5px #163a2e;
}
.s4-artpiece[data-s4-effect='limestone-relief'] .s4-relief-step {
  inset: calc(3% + var(--s4-i) * 3.3%);
  z-index: calc(1 + var(--s4-i));
  border: 5px solid #e4e8dc;
  border-top-color: #fffef3;
  border-left-color: #f4f5e8;
  box-shadow:
    2px 3px 3px #28452e27,
    inset 2px 3px 3px #28452e20;
}

/* 11 — curved vault with depth-separated arch ribs. */
.s4-artpiece[data-s4-effect='barrel-arch'] {
  background: #c8d6c8;
}
.s4-artpiece[data-s4-effect='barrel-arch'] .s4-primary {
  inset: 13% 20% 7%;
  border-radius: 48% 48% 0 0;
}
.s4-artpiece[data-s4-effect='barrel-arch'] .s4-arch-rib {
  inset: calc(3% + var(--s4-i) * 2.4%) calc(5% + var(--s4-i) * 3.1%) 0;
  border: clamp(4px, 1.4vw, 11px) solid #ebefe2;
  border-bottom: 0;
  border-left-color: #a4b7a8;
  border-radius: 49% 49% 0 0;
  z-index: 2;
  transform: translateZ(calc(40px - var(--s4-i) * 8px)) rotateY(var(--s4-a, -4deg));
}

/* 12 — cropped duplicate supplies the glass; no backdrop blur dependency. */
.s4-artpiece[data-s4-effect='frosted-mullion'] .s4-primary {
  inset: 6%;
}
.s4-artpiece[data-s4-effect='frosted-mullion'] .s4-frost-pane {
  inset: 6%;
  z-index: 2;
  clip-path: inset(0 68% 0 12%);
  transform: translateX(var(--s4-a, 0%));
  filter: blur(3px) saturate(0.65) brightness(1.15);
}
.s4-artpiece[data-s4-effect='frosted-mullion'] .s4-frost-pane:last-child {
  clip-path: inset(0 7% 0 79%);
  transform: translateX(var(--s4-b, 0%));
}
.s4-artpiece[data-s4-effect='frosted-mullion'] .s4-frost-pane::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, #e7efe448 0 1px, transparent 1px 4px);
}

/* 13 — low-amplitude local optical interference. */
.s4-artpiece[data-s4-effect='moire-screen'] .s4-primary {
  inset: 5% 6% 13%;
}
.s4-artpiece[data-s4-effect='moire-screen'] .s4-moire {
  left: -8%;
  width: 116%;
  bottom: -3%;
  height: 23%;
  z-index: 2;
  background: repeating-linear-gradient(90deg, #1b49366b 0 1px, transparent 1px 5px);
  transform: rotate(var(--s4-a, -4deg));
}
.s4-artpiece[data-s4-effect='moire-screen'] .s4-moire:last-child {
  background: repeating-linear-gradient(90deg, #e4eee2c9 0 2px, transparent 2px 6px);
  transform: rotate(var(--s4-b, 5deg));
}

/* 14 — secondary exposure limited to one corner. */
.s4-artpiece[data-s4-effect='double-exposure'] .s4-primary {
  inset: 6%;
}
.s4-artpiece[data-s4-effect='double-exposure'] .s4-exposure {
  inset: 6%;
  z-index: 2;
  opacity: var(--s4-a, 0.3);
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at 83% 17%, #000 8%, transparent 59%);
  transform: scale(var(--s4-b, 1.02));
  transform-origin: 80% 20%;
}

/* 15 — broken L inlays and tiny gold join pins. */
.s4-artpiece[data-s4-effect='platinum-inlay'] {
  background: #446858;
}
.s4-artpiece[data-s4-effect='platinum-inlay'] .s4-primary {
  inset: 16% 12%;
}
.s4-artpiece[data-s4-effect='platinum-inlay'] .s4-inlay {
  width: 32%;
  height: 22%;
  left: 5%;
  top: 7%;
  border-top: 1px solid #e5ece0;
  border-left: 3px double #d4e3d5;
}
.s4-artpiece[data-s4-effect='platinum-inlay'] .s4-inlay::after {
  content: '';
  position: absolute;
  left: -3px;
  top: -2px;
  width: 4px;
  height: 4px;
  background: var(--s4-gold);
}
.s4-artpiece[data-s4-effect='platinum-inlay'] .s4-inlay:nth-child(3) {
  left: auto;
  right: 5%;
  transform: scaleX(-1);
}
.s4-artpiece[data-s4-effect='platinum-inlay'] .s4-inlay:nth-child(4) {
  top: auto;
  bottom: 7%;
  transform: scaleY(-1);
}
.s4-artpiece[data-s4-effect='platinum-inlay'] .s4-inlay:nth-child(5) {
  top: auto;
  bottom: 7%;
  left: auto;
  right: 5%;
  transform: scale(-1);
}

/* 16 — nonconcentric cut-paper openings with independent occlusion. */
.s4-artpiece[data-s4-effect='paper-tunnel'] {
  background: #8aab95;
}
.s4-artpiece[data-s4-effect='paper-tunnel'] .s4-primary {
  inset: 12%;
}
.s4-artpiece[data-s4-effect='paper-tunnel'] .s4-paper-cut {
  inset: calc(-1% + var(--s4-i) * 4%);
  z-index: calc(4 - var(--s4-i));
  border: clamp(10px, 2.8vw, 23px) solid #f1f3e8;
  border-radius: 29% 43% 18% 39%;
  box-shadow:
    3px 4px 4px #163d322c,
    inset 3px 5px 5px #163d3233;
  transform: translate3d(
      calc(var(--s4-i) * var(--s4-a, 2px)),
      calc(var(--s4-i) * -2px),
      calc(34px - var(--s4-i) * 9px)
    )
    rotateZ(calc(-4deg + var(--s4-i) * 3deg));
}

/* 17 — column cells sample contiguous strips of the same image. */
.s4-artpiece[data-s4-effect='cylinder-mosaic'] {
  background: #d3ded3;
}
.s4-artpiece[data-s4-effect='cylinder-mosaic'] .s4-primary {
  inset: 15% 9%;
}
.s4-artpiece[data-s4-effect='cylinder-mosaic'] .s4-cylinder-strip {
  top: 15%;
  height: 70%;
  width: 13.666667%;
  left: calc(9% + var(--s4-i) * 13.666667%);
  z-index: 2;
  overflow: hidden;
  transform: rotateY(calc((var(--s4-i) - 2.5) * -9deg + var(--s4-a, 0deg)))
    translateZ(calc(16px - var(--s4-i) * 2px));
  box-shadow: inset -1px 0 #eef3e9;
}
.s4-artpiece[data-s4-effect='cylinder-mosaic'] .s4-cylinder-strip .s4-art-image {
  width: 600%;
  left: calc(var(--s4-i) * -100%);
}

/* 18 — local cylindrical curl, no hidden image entrance. */
.s4-artpiece[data-s4-effect='scroll-unfurl'] .s4-primary {
  inset: 8% 12% 13%;
}
.s4-artpiece[data-s4-effect='scroll-unfurl'] .s4-scroll-roll {
  left: 10%;
  right: 10%;
  bottom: var(--s4-a, 10%);
  height: var(--s4-b, 9%);
  z-index: 3;
  border-radius: 50% / 30%;
  background: linear-gradient(0deg, #6c8c78, #f1f4e7 45%, #a2b9a7 76%, #e7efdf);
  box-shadow: 0 5px 5px #25443026;
  border-inline: 4px solid #dce5d7;
}
.s4-artpiece[data-s4-effect='scroll-unfurl'] .s4-scroll-back {
  inset: auto 14% 7%;
  height: 7%;
  background: #d2e1cf;
  transform: skewX(-12deg);
}

/* 19 — etched hatching, deliberately no invented building outline. */
.s4-artpiece[data-s4-effect='etched-contour'] .s4-primary {
  inset: 15% 13%;
  z-index: 2;
}
.s4-artpiece[data-s4-effect='etched-contour'] .s4-etch {
  inset: 3%;
  background: repeating-linear-gradient(35deg, #4a6a5359 0 1px, transparent 1px 4px);
  clip-path: polygon(0 0, 32% 0, 32% 5%, 18% 5%, 18% 12%, 8% 12%, 8% 40%, 0 40%);
  transform: rotate(calc(var(--s4-i) * 180deg));
}
.s4-artpiece[data-s4-effect='etched-contour'] .s4-etch:nth-child(3) {
  transform: scaleX(-1);
}
.s4-artpiece[data-s4-effect='etched-contour'] .s4-etch:nth-child(4) {
  transform: rotate(180deg);
}
.s4-artpiece[data-s4-effect='etched-contour'] .s4-etch:nth-child(5) {
  transform: scaleY(-1);
}

/* 20 — one image with a material cross-section on two edges. */
.s4-artpiece[data-s4-effect='edge-bevel'] .s4-primary {
  inset: 10% 15% 16% 9%;
  z-index: 3;
}
.s4-artpiece[data-s4-effect='edge-bevel'] .s4-bevel-side {
  right: 11%;
  top: 10%;
  bottom: 16%;
  width: 4%;
  transform: skewY(35deg);
  transform-origin: left top;
  background: repeating-linear-gradient(90deg, #c8d6c9 0 2px, #f4f5e9 2px 4px, #42634e 4px 5px);
}
.s4-artpiece[data-s4-effect='edge-bevel'] .s4-bevel-bottom {
  left: 9%;
  right: 15%;
  bottom: 12%;
  height: 4%;
  transform: skewX(55deg);
  transform-origin: top left;
  background: repeating-linear-gradient(0deg, #b2c7b8 0 1px, #ecf2e4 1px 3px, #66836e 3px 4px);
}

/* 21 — image reflection plus expanding water rings. */
.s4-artpiece[data-s4-effect='water-rings'] {
  background: #abc5b4;
}
.s4-artpiece[data-s4-effect='water-rings'] .s4-primary {
  inset: 5% 7% 27%;
  z-index: 2;
}
.s4-artpiece[data-s4-effect='water-rings'] .s4-water-reflection {
  left: 7%;
  right: 7%;
  bottom: -17%;
  height: 42%;
  opacity: 0.35;
  transform: scaleY(-1);
  overflow: hidden;
}
.s4-artpiece[data-s4-effect='water-rings'] .s4-water-ring {
  width: 47%;
  height: 13%;
  left: 27%;
  bottom: 4%;
  z-index: 3;
  border: 1px solid #f5ffec;
  border-radius: 50%;
  transform: scale(var(--s4-a, 0.9));
  opacity: var(--s4-d, 0.55);
}
.s4-artpiece[data-s4-effect='water-rings'] .s4-water-ring:nth-child(4) {
  transform: scale(var(--s4-b, 1.25));
  opacity: var(--s4-e, 0.35);
}
.s4-artpiece[data-s4-effect='water-rings'] .s4-water-ring:nth-child(5) {
  transform: scale(var(--s4-c, 1.6));
  opacity: var(--s4-f, 0.2);
}

/* 22 — three independently displaced depth cues. */
.s4-artpiece[data-s4-effect='deep-parallax'] {
  background: #c6d8c8;
}
.s4-artpiece[data-s4-effect='deep-parallax'] .s4-primary {
  inset: 11% 15%;
  z-index: 2;
  transform: translate3d(var(--s4-a, 0px), var(--s4-b, 0px), 12px);
}
.s4-artpiece[data-s4-effect='deep-parallax'] .s4-parallax-far {
  inset: 0;
  z-index: 0;
  opacity: 0.45;
  transform: translateY(var(--s4-c, 0px)) scale(1.1);
}
.s4-artpiece[data-s4-effect='deep-parallax'] .s4-parallax-near {
  inset: 3% 5%;
  border: 10px solid #eaf0e1;
  border-left-width: 20px;
  z-index: 3;
  transform: translate3d(var(--s4-d, 0px), 0, 30px);
}

/* 23 — soft satin normals, not a single shared shine sweep. */
.s4-artpiece[data-s4-effect='satin-folds'] {
  background: #8fae99;
}
.s4-artpiece[data-s4-effect='satin-folds'] .s4-primary {
  inset: 9% 22% 9% 6%;
  z-index: 3;
}
.s4-artpiece[data-s4-effect='satin-folds'] .s4-satin-fold {
  top: -10%;
  bottom: -10%;
  right: calc(-4% + var(--s4-i) * 8%);
  width: 14%;
  border-radius: 50%;
  z-index: 1;
  background: linear-gradient(90deg, #446e58, #bad2bb 24%, #eef3dc 46%, #91b89e 67%, #4e755e);
  transform: rotate(-8deg) scaleX(var(--s4-a, 1));
}
.s4-artpiece[data-s4-effect='satin-folds'] .s4-satin-fold:nth-child(3) {
  transform: rotate(6deg) scaleX(var(--s4-b, 0.8));
}
.s4-artpiece[data-s4-effect='satin-folds'] .s4-satin-fold:nth-child(4) {
  transform: rotate(-3deg) scaleX(var(--s4-c, 1.1));
}

/* 24 — warm trace confined to a corner, no full-screen blur. */
.s4-artpiece[data-s4-effect='light-leak'] {
  background: #274c3c;
}
.s4-artpiece[data-s4-effect='light-leak'] .s4-primary {
  inset: 5%;
}
.s4-artpiece[data-s4-effect='light-leak'] .s4-leak-bloom {
  inset: 35% 58% -20% -10%;
  z-index: 2;
  background: radial-gradient(ellipse, #fffce7a1, #d8c99a49 33%, transparent 68%);
  opacity: var(--s4-a, 0.55);
  transform: scale(var(--s4-b, 1));
}
.s4-artpiece[data-s4-effect='light-leak'] .s4-leak-seam {
  left: 5%;
  top: 5%;
  bottom: 5%;
  width: 3%;
  z-index: 2;
  background: linear-gradient(90deg, transparent, #e6ead78c, transparent);
  opacity: var(--s4-c, 0.4);
}

/* 25 — complete no-JS picture; bounded small checker veils after ready only. */
.s4-artpiece[data-s4-effect='checker-unveil'] .s4-primary {
  inset: 6%;
}
.s4-artpiece[data-s4-effect='checker-unveil'] .s4-checker {
  z-index: 2;
  width: 22%;
  height: 29.333333%;
  left: calc(6% + var(--s4-col, 0) * 22%);
  top: calc(6% + var(--s4-row, 0) * 29.333333%);
  background: #e9eee0;
  transform: scale(0);
  transform-origin: top left;
}
.s4-artpiece[data-s4-effect='checker-unveil'][data-s4-ready='true'] .s4-checker {
  transform: scale(var(--s4-a, 0));
}
.s4-artpiece[data-s4-effect='checker-unveil'][data-s4-ready='true'] .s4-checker:nth-child(odd) {
  transform: scale(var(--s4-b, 0));
  transform-origin: bottom right;
}
.s4-artpiece[data-s4-effect='checker-unveil'] .s4-checker:nth-child(4n + 3) {
  --s4-col: 1;
}
.s4-artpiece[data-s4-effect='checker-unveil'] .s4-checker:nth-child(4n + 4) {
  --s4-col: 2;
}
.s4-artpiece[data-s4-effect='checker-unveil'] .s4-checker:nth-child(4n + 5) {
  --s4-col: 3;
}
.s4-artpiece[data-s4-effect='checker-unveil'] .s4-checker:nth-child(n + 6) {
  --s4-row: 1;
}
.s4-artpiece[data-s4-effect='checker-unveil'] .s4-checker:nth-child(n + 10) {
  --s4-row: 2;
}

/* 26 — actual mirrored side planes around a stable forward photograph. */
.s4-artpiece[data-s4-effect='diagonal-mirrors'] {
  background: #173f32;
}
.s4-artpiece[data-s4-effect='diagonal-mirrors'] .s4-primary {
  inset: 14% 22%;
  z-index: 3;
}
.s4-artpiece[data-s4-effect='diagonal-mirrors'] .s4-mirror {
  top: 7%;
  bottom: 7%;
  width: 20%;
  left: 2%;
  overflow: hidden;
  border: 2px solid #c6d8c9;
  opacity: 0.66;
  transform-origin: right center;
  transform: rotateY(var(--s4-a, 32deg)) skewY(-8deg);
}
.s4-artpiece[data-s4-effect='diagonal-mirrors'] .s4-mirror .s4-art-image {
  transform: scaleX(-1);
}
.s4-artpiece[data-s4-effect='diagonal-mirrors'] .s4-mirror:last-child {
  left: auto;
  right: 2%;
  transform-origin: left center;
  transform: rotateY(var(--s4-b, -32deg)) skewY(8deg);
}

/* 27 — local paper triangle; no whole-photo flipping. */
.s4-artpiece[data-s4-effect='corner-lift'] .s4-primary {
  inset: 7%;
}
.s4-artpiece[data-s4-effect='corner-lift'] :is(.s4-corner-under, .s4-corner-fold) {
  right: 7%;
  bottom: 7%;
  width: 24%;
  height: 28%;
  z-index: 3;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.s4-artpiece[data-s4-effect='corner-lift'] .s4-corner-under {
  background: linear-gradient(135deg, #193e3277, #183e3508);
  transform: translate(var(--s4-b, 2px), var(--s4-b, 2px));
}
.s4-artpiece[data-s4-effect='corner-lift'] .s4-corner-fold {
  background: linear-gradient(135deg, #91ae98 34%, #f4f5e8 62%, #bbcdbd);
  transform-origin: 50% 50%;
  transform: rotate3d(1, 1, 0, var(--s4-a, 18deg));
}

/* 28 — foreground stays sharp, only small side images defocus. */
.s4-artpiece[data-s4-effect='focus-gallery'] {
  background: #cad9cc;
}
.s4-artpiece[data-s4-effect='focus-gallery'] .s4-primary {
  inset: 12% 23%;
  z-index: 3;
  border: 3px solid #f4f6e9;
}
.s4-artpiece[data-s4-effect='focus-gallery'] .s4-focus-side {
  top: 22%;
  bottom: 22%;
  width: 29%;
  overflow: hidden;
  z-index: 1;
  opacity: 0.7;
  border: 4px solid #eff2e4;
  filter: blur(var(--s4-c, 1px));
}
.s4-artpiece[data-s4-effect='focus-gallery'] .s4-focus-left {
  left: 2%;
  transform: translateZ(-30px) rotateY(var(--s4-a, 21deg)) scale(0.88);
}
.s4-artpiece[data-s4-effect='focus-gallery'] .s4-focus-right {
  right: 2%;
  transform: translateZ(-55px) rotateY(var(--s4-b, -21deg)) scale(0.8);
}

/* 29 — skylight cone with a linked floor projection. */
.s4-artpiece[data-s4-effect='light-volume'] {
  background: #285341;
}
.s4-artpiece[data-s4-effect='light-volume'] .s4-primary {
  inset: 9%;
}
.s4-artpiece[data-s4-effect='light-volume'] .s4-light-cone {
  inset: 0 35% 8% 8%;
  z-index: 2;
  clip-path: polygon(15% 0, 33% 0, 100% 100%, 46% 100%);
  background: linear-gradient(#fcffe861, #e4f0d50a);
  transform-origin: 23% 0;
  transform: rotate(var(--s4-a, 3deg));
}
.s4-artpiece[data-s4-effect='light-volume'] .s4-light-floor {
  left: 22%;
  right: 9%;
  bottom: 5%;
  height: 12%;
  z-index: 2;
  clip-path: polygon(10% 0, 72% 0, 100% 100%, 0 100%);
  background: #f3f9d835;
  transform: translateX(var(--s4-b, 0%));
}

/* 30 — print registration is limited to narrow picture edges. */
.s4-artpiece[data-s4-effect='chromatic-offset'] .s4-primary {
  inset: 10%;
  z-index: 2;
}
.s4-artpiece[data-s4-effect='chromatic-offset'] .s4-register {
  inset: 10%;
  z-index: 3;
  clip-path: polygon(0 0, 9% 0, 9% 91%, 100% 91%, 100% 100%, 0 100%);
  opacity: 0.65;
  filter: grayscale(1) sepia(0.25) hue-rotate(68deg) saturate(1.4);
  transform: translate(var(--s4-a, -3px), var(--s4-b, 2px));
}
.s4-artpiece[data-s4-effect='chromatic-offset'] .s4-register:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 91% 100%, 91% 9%, 0 9%);
  filter: grayscale(1) brightness(1.3);
  transform: translate(var(--s4-c, 3px), var(--s4-d, -2px));
}

/* 31 — physical horizontal louvres above a permanently visible photograph. */
.s4-artpiece[data-s4-effect='architectural-louvers'] .s4-primary {
  inset: 5%;
}
.s4-artpiece[data-s4-effect='architectural-louvers'] .s4-louver {
  left: 5%;
  right: 5%;
  top: calc(5% + var(--s4-i) * 7%);
  height: 4.5%;
  z-index: 2;
  background: linear-gradient(#f2f4e6, #8ca893);
  border-bottom: 1px solid #567961;
  transform-origin: 50% 0;
  transform: rotateX(calc(var(--s4-a, 36deg) + var(--s4-i) * 4deg));
}

/* 32 — six connected line segments, no SVG IDs or shared definitions. */
.s4-artpiece[data-s4-effect='line-trace'] {
  background: #426b53;
}
.s4-artpiece[data-s4-effect='line-trace'] .s4-primary {
  inset: 14%;
}
.s4-artpiece[data-s4-effect='line-trace'] .s4-trace {
  z-index: 2;
  background: #edf3e0;
  transform-origin: left top;
  width: 39%;
  height: 1px;
  left: 7%;
  top: 7%;
  transform: scaleX(var(--s4-a, 1));
}
.s4-artpiece[data-s4-effect='line-trace'] .s4-trace:nth-child(3) {
  width: 1px;
  height: 8%;
  left: 46%;
  transform: scaleY(var(--s4-b, 1));
}
.s4-artpiece[data-s4-effect='line-trace'] .s4-trace:nth-child(4) {
  width: 47%;
  left: 46%;
  top: 15%;
  transform: scaleX(var(--s4-c, 1));
}
.s4-artpiece[data-s4-effect='line-trace'] .s4-trace:nth-child(5) {
  width: 1px;
  height: 78%;
  left: 93%;
  top: 15%;
  transform: scaleY(var(--s4-d, 1));
}
.s4-artpiece[data-s4-effect='line-trace'] .s4-trace:nth-child(6) {
  width: 86%;
  top: 93%;
  transform: scaleX(var(--s4-e, 1));
  transform-origin: right;
}
.s4-artpiece[data-s4-effect='line-trace'] .s4-trace:nth-child(7) {
  width: 1px;
  height: 86%;
  transform: scaleY(var(--s4-f, 1));
  transform-origin: bottom;
}

/* 33 — moving source-aligned lens (full-size duplicate, then circular clipping). */
.s4-artpiece[data-s4-effect='ripple-refraction'] .s4-primary {
  inset: 7%;
}
.s4-artpiece[data-s4-effect='ripple-refraction'] .s4-lens {
  inset: 7%;
  z-index: 2;
  clip-path: ellipse(16% 21.333333% at var(--s4-a, 64%) var(--s4-b, 52%));
}
.s4-artpiece[data-s4-effect='ripple-refraction'] .s4-lens .s4-art-image {
  transform: scale(1.07);
  transform-origin: var(--s4-a, 64%) var(--s4-b, 52%);
}
.s4-artpiece[data-s4-effect='ripple-refraction'] .s4-lens-rim {
  left: calc(7% + var(--s4-a, 64%) * 0.86 - 13.76%);
  top: calc(7% + var(--s4-b, 52%) * 0.86 - 18.346667%);
  width: 27.52%;
  height: 36.693334%;
  border: 1px solid #f3ffe2a3;
  border-radius: 50%;
  z-index: 3;
}

/* 34 — asymmetrical contact-print composition. */
.s4-artpiece[data-s4-effect='contact-sheet'] {
  background: #e1e8d9;
}
.s4-artpiece[data-s4-effect='contact-sheet'] .s4-primary {
  inset: 8% 35% 8% 6%;
}
.s4-artpiece[data-s4-effect='contact-sheet'] .s4-contact-small {
  right: 6%;
  width: 25%;
  height: 38%;
  overflow: hidden;
  border-left: 3px solid #fbf9ed;
}
.s4-artpiece[data-s4-effect='contact-sheet'] .s4-contact-upper {
  top: 8%;
}
.s4-artpiece[data-s4-effect='contact-sheet'] .s4-contact-lower {
  bottom: 8%;
}

/* 35 — perpendicular photographic wall/floor/side, open room rather than orbit. */
.s4-artpiece[data-s4-effect='isometric-courtyard'] {
  background: #c8d6c7;
}
.s4-artpiece[data-s4-effect='isometric-courtyard'] .s4-stage {
  transform: rotateX(var(--s4-a, 5deg)) rotateY(var(--s4-b, -7deg));
}
.s4-artpiece[data-s4-effect='isometric-courtyard'] .s4-primary {
  inset: 8% 20% 30% 14%;
  z-index: 2;
  transform: translateZ(-25px);
}
.s4-artpiece[data-s4-effect='isometric-courtyard'] .s4-courtyard-floor {
  left: 14%;
  right: 20%;
  top: 70%;
  height: 30%;
  transform-origin: top;
  transform: translateZ(-25px) rotateX(62deg);
  overflow: hidden;
  filter: brightness(0.84);
}
.s4-artpiece[data-s4-effect='isometric-courtyard'] .s4-courtyard-side {
  top: 8%;
  bottom: 30%;
  left: 80%;
  width: 17%;
  transform-origin: left;
  transform: translateZ(-25px) rotateY(65deg);
  overflow: hidden;
  filter: brightness(0.8);
}

/* 36 — light caustics in a local material margin. */
.s4-artpiece[data-s4-effect='pearl-caustics'] {
  background: #8daf95;
}
.s4-artpiece[data-s4-effect='pearl-caustics'] .s4-primary {
  inset: 7% 8% 19%;
  z-index: 3;
}
.s4-artpiece[data-s4-effect='pearl-caustics'] .s4-caustic {
  left: -8%;
  right: -8%;
  bottom: -10%;
  height: 35%;
  z-index: 2;
  background: radial-gradient(ellipse at 20% 20%, transparent 30%, #f6ffe076 33%, transparent 36%) 0
    0 / 53px 37px;
  mix-blend-mode: screen;
  transform: translateX(var(--s4-a, 0px)) scaleY(var(--s4-b, 1));
}
.s4-artpiece[data-s4-effect='pearl-caustics'] .s4-caustic:last-child {
  background-size: 71px 41px;
  transform: translateX(var(--s4-c, 0px)) rotate(7deg);
  opacity: 0.7;
}

/* No breakpoint rewrites inherited controllers; all clipping is local. */
@media (max-width: 760px) {
  .s4-artpiece[data-s4-effect] .s4-stage {
    perspective: 650px;
  }
  .s4-artpiece[data-s4-effect='barrel-arch'] .s4-arch-rib {
    border-width: 5px;
    border-bottom-width: 0;
  }
  .s4-artpiece[data-s4-effect='paper-tunnel'] .s4-paper-cut {
    border-width: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* CSS is already stationary without the controller. Settled variables below
   * also close the small gap before the media-query change callback executes. */
  .s4-artpiece[data-s4-effect='iris-aperture'] .s4-primary {
    clip-path: circle(70% at 50% 50%);
  }
  .s4-artpiece[data-s4-effect='checker-unveil'] .s4-checker {
    display: none;
  }
  .s4-artpiece[data-s4-effect='line-trace'] .s4-trace {
    transform: none;
  }
}
@media (forced-colors: active) {
  .s4-artpiece[data-s4-effect] .s4-primary {
    border: 1px solid CanvasText;
  }
  .s4-artpiece[data-s4-effect] .s4-stage > :not(.s4-primary) {
    visibility: hidden;
  }
}