/*
  Bamboo motif: placement system for the pieces in bamboo-motif.svg.
  A watermark scatter: quiet bamboo shapes in the background of a section or inside a card.

  Structure:   .motif-host   the section or card that holds the layer (position, clip)
               .motif-layer  one per section, behind the content (wash, grain, pieces)
               .motif        one piece, an <svg viewBox> that <use>s a sprite symbol
               .motif-card   the same idea inside a card, clipped by the card
  Tunables are custom properties; override them on :root, on a section, or on one piece.
*/

:root{
  --motif-ink:#35402C;            /* moss, the default piece colour */
  --motif-ink-leaf:#4A6B3F;       /* leaf green */
  --motif-ink-gold:#B8860B;       /* gold */
  --motif-opacity-min:.036;       /* floor of the contrast band (about 3.5 percent luminance delta) */
  --motif-opacity-max:.058;       /* ceiling of the contrast band (about 8 percent) */
  --motif-grain:.055;             /* paper grain strength */
  --motif-wash:rgba(246,226,180,.5); /* soft gold wash behind a section */
  --motif-content:1072px;         /* width of the page's content column, for margin sizing */
  --motif-drift-duration:18s;     /* one drift leg; very slow on purpose */
  --motif-drift-x:7px;
  --motif-drift-y:-9px;
}

/* 1. Hosts and the layer */
.motif-host{position:relative;overflow:clip;isolation:isolate}
.motif-host>.motif-content,.motif-card~.motif-content{position:relative;z-index:1}

.motif-layer{
  /* --motif-m is the free margin beside the content column: size margin pieces from it so they never reach the text */
  --motif-m:clamp(110px,calc((100vw - var(--motif-content))/2 - 28px),400px);
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.motif-layer::before{ /* the wash: place it per section with --motif-wx, --motif-wy, --motif-wc */
  content:"";position:absolute;inset:0;
  background:radial-gradient(72% 95% at var(--motif-wx,20%) var(--motif-wy,0%),var(--motif-wc,var(--motif-wash)),transparent 72%)}
.motif-layer::after{ /* the grain: a generated 200px noise tile, no raster file */
  content:"";position:absolute;inset:0;opacity:var(--motif-grain);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* 2. One piece. Per piece, set: left/top/right/bottom, --motif-w, --motif-r, --motif-o, optional --motif-flip:-1 */
.motif{
  position:absolute;display:block;height:auto;
  width:var(--motif-w,120px);
  color:var(--motif-ink);
  opacity:clamp(var(--motif-opacity-min),var(--motif-o,.05),var(--motif-opacity-max)); /* the band is enforced, not trusted */
  rotate:var(--motif-r,0deg);
  scale:var(--motif-flip,1) 1}
.motif--leaf{color:var(--motif-ink-leaf)}
.motif--gold{color:var(--motif-ink-gold)}

/* 3. Where a piece may live. Margin pieces sit beside the content column and show from 1366px;
      band pieces sit in the top and bottom padding and show below 1366px. */
@media(max-width:1365px){.motif--margin{display:none}}
@media(min-width:1366px){.motif--band{display:none}}

/* 4. Drift: a few pieces per section, never more than about a third of them */
@media(prefers-reduced-motion:no-preference){
  .motif--drift{animation:motif-drift var(--motif-drift-duration) ease-in-out var(--motif-drift-delay,0s) infinite alternate}
}
@keyframes motif-drift{to{translate:var(--motif-drift-x) var(--motif-drift-y)}}
@media(prefers-reduced-motion:reduce){.motif{animation:none!important}}

/* 5. Inside a card: clipped by the card, behind empty areas only.
      The card needs position:relative; give its content wrapper (or form) class motif-content. */
.motif-card{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:clip;pointer-events:none}
.motif-card .motif{--motif-w:min(250px,50%)}
/* card size gates: --wide from 700px up, --narrow below it, --xl from 1200px up.
   Use them where a piece fits only when the form text wraps a certain way. */
@media(max-width:699px){.motif--wide{display:none}}
@media(min-width:700px){.motif--narrow{display:none}}
@media(max-width:1199px){.motif--xl{display:none}}

/* 6. Dark band: light ink on a dark ground, same band, same rules */
.motif-layer--dark{
  --motif-ink:#E8E1CC;--motif-ink-leaf:#A9C49B;--motif-ink-gold:#E0B84A;
  --motif-wash:rgba(223,177,59,.12)}

@media print{.motif-layer,.motif-card{display:none}}