/* ══════════════════════════════════════════════════════════════
   SECTION WATERMARKS  (shared by the home page and other public pages)
   Printed into the background, not pasted on top of it:
     · ONE artwork per section — never a cluster
     · alpha .04–.05, so copy and cards always win
     · a radial mask dissolves the edges, so art is never hard-cut
     · multiply on cream/ivory, screen on maroon — a real print look
     · each piece sits in ITS section's quiet zone (edge or gutter),
       never dead centre on top of body copy
   Per-piece tuning lives in two custom properties:
     --wm-size   width of the artwork (default 320px)
     --wm-alpha  opacity floor for that section (default .05)
   ══════════════════════════════════════════════════════════════ */
.wm-stage{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  /* the stage repaints the section's own ground so the artwork's
     multiply/screen has a real backdrop to blend against, instead of
     the transparent one an isolated group would hand it */
  background-color:inherit;
}
/* for sections whose art must sit ON TOP of imagery (the hero carousel) */
.wm-stage-over{ z-index:1; background-color:transparent; }
.wm-art{
  position:absolute;
  display:block;
  width:var(--wm-size,320px);
  height:auto;
  max-width:none;
  transform:translate(-50%,-50%);
  opacity:var(--wm-alpha,.05);
  pointer-events:none;
  user-select:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 56%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(closest-side,#000 56%,rgba(0,0,0,0) 100%);
  will-change:transform;
}
/* cream / ivory grounds: warm ink, multiplied into the paper */
.wm-ink{ filter:saturate(1.25) contrast(1.15) brightness(.58); mix-blend-mode:multiply; }
/* maroon grounds: knocked to a pale silhouette, screened back in */
.wm-glow{ filter:brightness(0) invert(1); mix-blend-mode:screen; }

/* anchor points — pick the quiet zone the section actually has */
.wm-c{left:50%;top:50%}
.wm-t{left:50%;top:17%}
.wm-b{left:50%;top:85%}
.wm-l{left:11%;top:50%}
.wm-r{left:89%;top:50%}
.wm-tl{left:9%;top:19%}
.wm-tr{left:91%;top:19%}
.wm-bl{left:9%;top:85%}
.wm-br{left:91%;top:85%}

section > .wrap, section > .events-grid, section > form{ position:relative; z-index:1; }

/* one slow breath — present, never distracting */
@keyframes wmBreathe{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.045); }
}
.wm-breathe{ animation:wmBreathe 18s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){ .wm-breathe{ animation:none; } }

/* ── animated lotus watermarks, every section except the hero ──
   The hero's stage is .wm-stage-over, so :not() leaves it as it was.
   1. The section's own lotus turns and breathes, a touch more visible.
   2. A smaller accent lotus spins in the opposite corner. :has() reads
      which anchor the main piece uses so the two never overlap. */
@keyframes wmLotusTurn{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.06); }
}
@keyframes wmLotusBob{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -14px; }
}
.wm-stage:not(.wm-stage-over) > .wm-art{
  opacity:calc(var(--wm-alpha,.05) * 1.7);
  animation:wmLotusTurn 26s ease-in-out infinite;
}
.wm-stage:not(.wm-stage-over) > .wm-glow{ animation-duration:32s; animation-direction:reverse; }

.wm-stage:not(.wm-stage-over)::after{
  content:'';position:absolute;bottom:8%;right:6%;
  width:clamp(110px,13vw,190px);aspect-ratio:1;
  background:url(/images/lotus/v2/1.png) center/contain no-repeat;
  opacity:.07;
  filter:saturate(1.25) contrast(1.15) brightness(.58);mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(closest-side,#000 60%,rgba(0,0,0,0) 100%);
  animation:wmLotusBob 9s ease-in-out infinite;
}
.wm-stage:not(.wm-stage-over):has(.wm-glow)::after{
  filter:brightness(0) invert(1);mix-blend-mode:screen;opacity:.06;
}
/* accent goes to the bottom corner away from the section's main piece */
.wm-stage:not(.wm-stage-over):has(.wm-r, .wm-tr, .wm-br, .wm-b)::after{
  right:auto;left:5%;animation-delay:-4.5s;
}

@media (max-width:640px){
  .wm-stage:not(.wm-stage-over)::after{ width:96px; opacity:.05; }
}
@media (prefers-reduced-motion: reduce){
  .wm-stage:not(.wm-stage-over) > .wm-art,
  .wm-stage:not(.wm-stage-over)::after{ animation:none; }
}