/* ==========================================================================
   TMA Wave Motif — layer styles
   Pair with tma-waves.js. Add to site/styles.css or link separately.
   ========================================================================== */

/* Any section carrying a wave becomes the crop frame for it. */
[data-tma-wave] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* The generated field. Bled 8% beyond the section so parallax never
   exposes an edge, and never interactive. */
.tma-wave-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -8%;
  bottom: -8%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.tma-wave-layer .tma-wave-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The F1 field spans its layer's full width while a copy column is usually a
   fixed max-width, so on narrow viewports the two converge. The field is
   already very pale (0.09 base), so only the smallest sizes need damping. */
@media (max-width: 860px) {
  [data-tma-wave="F1"] > .tma-wave-layer { opacity: 0.8; }
}

/* Content sits above the field. Sections using the motif should wrap their
   content in .wrap (already the site convention) — this lifts it. */
[data-tma-wave] > .wrap,
[data-tma-wave] > .tma-wave-content {
  position: relative;
  z-index: 1;
}

/* Optional: pin a field to the lower half only (contact / CTA details). */
.tma-wave-layer[data-tma-anchor="bottom"] {
  top: auto;
  height: 60%;
}
.tma-wave-layer[data-tma-anchor="top"] {
  bottom: auto;
  height: 56%;
}

/* Motion: a single, extremely slow drift. Off by default — add
   data-tma-drift to the section to opt in. */
[data-tma-drift] > .tma-wave-layer {
  animation: tma-wave-drift 90s ease-in-out infinite alternate;
}
@keyframes tma-wave-drift {
  from { transform: translate3d(-1.2%, 0, 0); }
  to   { transform: translate3d(1.2%, 0, 0); }
}

/* Mobile: fields lose their outer groups' subtlety at small widths, so
   lift the crop and drop the parallax bleed. */
@media (max-width: 700px) {
  .tma-wave-layer { top: -4%; bottom: -4%; }
  .tma-wave-layer[data-tma-anchor="bottom"],
  .tma-wave-layer[data-tma-anchor="top"] { height: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .tma-wave-layer,
  [data-tma-drift] > .tma-wave-layer {
    animation: none !important;
    transform: none !important;
  }
}

@media print {
  .tma-wave-layer { display: none; }
}