/* Domi motifs — mounts, placement presets, mobile behaviour */
.motif { position: absolute; width: var(--mw, 100px); pointer-events: none; z-index: 6; }
.motif svg, .motif img { display: block; width: 100%; height: auto; }
.motif img { opacity: 0; }
.motif.drawn img { opacity: 1; }

/* placement presets */
.motif[data-place="tr"] { top: 9%; right: 5%; }
.motif[data-place="br"] { bottom: 7%; right: 4%; }
.motif[data-place="bl"] { bottom: 8%; left: 4%; }
.motif[data-place="tl"] { top: 10%; left: 5%; }
.motif[data-place="ct"] { top: 14%; left: 50%; transform: translateX(-50%); }
.motif[data-place="tuck"] { bottom: -14px; right: 6%; }

/* inline variant (beside headings) */
.motif-inline { display: inline-block; vertical-align: middle; width: var(--mw, 56px); margin-left: 14px; pointer-events: none; }
.motif-inline svg { display: block; width: 100%; height: auto; }

@media (max-width: 760px) {
  .motif { width: calc(var(--mw, 100px) * 0.62); }
  .motif[data-place="tr"] { top: 4%; right: 3%; }
  .motif[data-place="br"] { bottom: 3%; right: 3%; }
  .motif[data-place="ct"] { top: 4px; }
  .motif[data-place="tuck"] { bottom: -6px; right: 2%; }
  .motif-inline { width: calc(var(--mw, 56px) * 0.7); margin-left: 8px; }
  /* olive band is dense when stacked — coconut sits under the cards */
  .motif[data-motif="07-chalk"] { display: none; }
  /* whale moves to the open header corner instead of the text column */
  .exp-group .motif[data-place="br"] { top: 0; bottom: auto; right: 2%; width: 84px; }
}

/* sections hosting absolutely-positioned motifs */
.msec { position: relative; }

/* scattered solos: keep one shell on mobile, drop the rest */
@media (max-width: 760px) {
  .motif[data-scatter="2"], .motif[data-scatter="3"] { display: none; }
  .exp-group .motif[data-place="br"] { width: 100px; }
}


/* footer hosts chalk motifs */
.footer { position: relative; }

/* ── Sola-style section reveals (Elementor fadeInUp, exact values) ──
   Per element: 1.25s ease, translate3d(0,100%,0) → none,
   100ms stagger per sibling, fired once on entering the viewport. */
.sa { visibility: hidden; }
.sa.on { visibility: visible; animation: dmFadeInUp 1.25s ease both; animation-delay: var(--sd, 0ms); }
@keyframes dmFadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sa { visibility: visible; }
  .sa.on { animation: none; }
}

/* mobile: stacked layouts can't host the extra scatter motifs */
@media (max-width: 760px) {
  .exp-group .motif[data-place="br"],
  .exp-group .motif[data-place="bl"],
  .vfull-villa .motif[data-place="bl"],
  .vfull-villa .motif:not(.motif-inline),
  .testi-band .motif,
  .footer .motif,
  .story-body .motif { display: none; }
}


/* turtle: swims once the draw has finished (dm-done). The artist sketched the
   front flipper at five stroke poses; the split-out pose set (dm-flip) rows
   around the shoulder like a paddle while the whole drawing drifts through
   the water. Never runs under reduced motion (dm-done stays absent). */
.motif.dm-done[data-motif="19"] { animation: dmSwim 10s ease-in-out infinite; }
@keyframes dmSwim {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(12px, -4px); }
  55%      { transform: translate(20px, 2px); }
  80%      { transform: translate(9px, -2px); }
}
/* turtle: swims once the draw has finished (dm-done; never under reduced
   motion). Ghost copies of the artwork, clipped to the flipper regions, row
   around their shoulders exactly like the artist's own wake sketches, while
   the whole drawing glides and gently undulates through the water. */
.motif.dm-done[data-motif="19"] { animation: dmSwim 6s ease-in-out infinite; }
@keyframes dmSwim {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15%      { transform: translate(9px, -3px) rotate(1.2deg); }
  35%      { transform: translate(17px, 2px) rotate(-1.4deg); }
  55%      { transform: translate(11px, -4px) rotate(1deg); }
  75%      { transform: translate(21px, 1px) rotate(-1deg); }
}
.motif.dm-done[data-motif="19"] .dm-flip {
  transform-box: view-box;
  transform-origin: 360px 640px;
  animation: dmPaddle 2.2s ease-in-out infinite;
}
@keyframes dmPaddle {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(20deg); }
}
.motif.dm-done[data-motif="19"] .dm-flipr {
  transform-box: view-box;
  transform-origin: 1180px 770px;
  animation: dmRear 1.5s ease-in-out infinite;
}
@keyframes dmRear {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}