/* ===================================================================
   Deep-sea motifs: quiet line-art watermarks for card groups.

   The landing page carries the loud version of this idea (the coral
   reef band under the three core cards, in index.css). Everything here
   is the echo of it: a single specimen sitting in a card corner, well
   under 15% opacity, fading toward the card interior so it reads as
   something half-seen in the water rather than a pasted-on icon.

   Shapes are generated by testenv/motifs.py into _motif_*.html.

   Usage:  <div class="mb-mcard" style="...">
             {% include 'public/_motif_nautilus.html' %}
             ...card content...
           </div>
   =================================================================== */

.mb-mcard{position:relative;overflow:hidden}
/* card content sits above the watermark; the motif itself keeps z-index 0 */
.mb-mcard > :not(.mb-motif){position:relative;z-index:1}

.mb-motif{
  position:absolute;right:-18px;bottom:-22px;width:134px;height:auto;z-index:0;
  color:#6DE3FF;pointer-events:none;
  /* dissolve toward the middle of the card, so there is no hard silhouette */
  -webkit-mask-image:linear-gradient(315deg,#000 22%,rgba(0,0,0,.55) 58%,transparent 92%);
          mask-image:linear-gradient(315deg,#000 22%,rgba(0,0,0,.55) 58%,transparent 92%);
}
.mb-motif-ink{
  fill:none;stroke:currentColor;stroke-opacity:.085;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-opacity .55s ease;
}
.mb-mcard:hover .mb-motif-ink{stroke-opacity:.155}

/* Per-species placement. Things that grow off the seabed sit low and
   upright; things that drift are tilted and float. */
.mb-motif-anemone,
.mb-motif-barnacle{bottom:-12px;right:-10px;width:126px}

.mb-motif-nautilus{transform:rotate(-9deg);width:128px;right:-6px}
.mb-motif-scallop {transform:rotate(7deg);bottom:-26px}
.mb-motif-seastar {transform:rotate(-16deg);width:120px}
.mb-motif-urchin  {width:124px}

.mb-motif-jelly{
  right:-6px;bottom:-30px;width:116px;
  animation:mb-motif-drift 17s ease-in-out infinite;
}
.mb-motif-bubbles{
  right:14px;bottom:-30px;width:88px;
  animation:mb-motif-drift 23s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 4%,rgba(0,0,0,.6) 42%,#000 80%);
          mask-image:linear-gradient(180deg,transparent 4%,rgba(0,0,0,.6) 42%,#000 80%);
}
.mb-motif-bubbles .mb-motif-ink{stroke-opacity:.13}
.mb-mcard:hover .mb-motif-bubbles .mb-motif-ink{stroke-opacity:.22}
@keyframes mb-motif-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Smaller variant for tight cards. */
.mb-mcard-sm .mb-motif{width:98px;right:-14px;bottom:-18px}
.mb-mcard-sm .mb-motif-jelly,
.mb-mcard-sm .mb-motif-bubbles{width:72px}

/* -------------------------------------------------------------------
   Seabed: a band of sand ripples closing off a section. Not a card
   watermark: it runs the full width and the list settles onto it.
   ------------------------------------------------------------------- */
.mb-seabed{
  position:relative;height:88px;margin-top:-6px;overflow:hidden;pointer-events:none;
}
.mb-seabed .mb-motif{
  position:absolute;left:0;right:0;bottom:-4px;width:100%;height:auto;
  transform:none;animation:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%),
                     linear-gradient(180deg,transparent 0%,#000 55%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%),
                     linear-gradient(180deg,transparent 0%,#000 55%);
          mask-composite:intersect;
}
.mb-seabed .mb-motif-ink{stroke-opacity:.13}