/* Trades row: four trade illustrations, each with one quiet loop. Self-contained component.
   Markup: .agent/trades-art/snippet.html. Art: site/assets/img/trades/ (provenance in img/IMAGES.md).
   Loops pause off screen: the list carries [data-loop]; site.js toggles .is-offscreen on it.
   Layer positions are in cqw of the art box (960 x 720 source px; 1cqw = 9.6 source px). */

.trades {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 64rem) {
  .trades { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Phones: one horizontal row that snaps tile by tile; the next tile peeks in so the row reads as scrollable. */
@media (max-width: 39.99rem) {
  .trades {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--rule, #C9D6D1) transparent;
  }
  .trade { scroll-snap-align: start; }
}

.trade { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; min-width: 0; }
.trade-name { margin: 0.75rem 0 0; }
.trade-line { margin: 0; color: var(--slate, #475569); font-size: var(--step-0, 1.0625rem); line-height: 1.5; }
.trade-link { font-size: var(--step-0, 1.0625rem); font-weight: 600; margin-top: auto; padding-top: 0.25rem; }

/* The art box. Background is the image's own mint, so the frame and the picture are one surface. */
.trade-art {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius, 16px);
  background: var(--mint, #E6F7F2);
  box-shadow: inset 0 0 0 1px rgba(16, 42, 67, 0.06);
  container-type: inline-size;
}
.trade-art > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; }
.trade-layer { position: absolute; display: none; pointer-events: none; }
@supports (width: 1cqw) {
  .trade-layer { display: block; }
}

/* HVAC: the fan disc, cut from the still, turns slowly over its own drawing. */
.trade-fan {
  left: 55.21cqw; top: 35.1cqw; width: 21.67cqw; height: 21.67cqw;
  animation: trade-spin 5s linear infinite;
}
@keyframes trade-spin { to { transform: rotate(1turn); } }

/* Plumbing: a drop gathers under the fitting, falls a short way and fades. */
.trade-drip {
  left: 55.2cqw; top: 31cqw; width: 0.95cqw; height: 1.3cqw;
  background: var(--teal, #0F9D8A);
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  transform-origin: 50% 0;
  animation: trade-drip 3.4s cubic-bezier(.55, 0, .75, .4) infinite;
}
@keyframes trade-drip {
  0%   { transform: translateY(0) scale(0.2); opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: translateY(0) scale(1); opacity: 1; }
  75%  { transform: translateY(15cqw) scale(1); opacity: 0; }
  100% { transform: translateY(15cqw) scale(1); opacity: 0; }
}

/* Electrical: the panel's indicator light blinks twice, then rests. */
.trade-light {
  left: 61.15cqw; top: 24.79cqw; width: 1.46cqw; height: 1.46cqw;
  border-radius: 50%;
  background: var(--teal, #0F9D8A);
  box-shadow: 0 0 0 0.5cqw rgba(15, 157, 138, 0.22);
  opacity: 0.15;
  animation: trade-blink 3s steps(1, end) infinite;
}
@keyframes trade-blink {
  0%, 100% { opacity: 0.15; }
  8%  { opacity: 1; }
  20% { opacity: 0.15; }
  30% { opacity: 1; }
  44% { opacity: 0.15; }
}

/* Roofing: the tape blade slides out of the case along the roof slope, holds, and goes back. */
.trade-tape {
  left: 59.75cqw; top: 27.45cqw; width: 16.5cqw; height: 0.74cqw;
  overflow: hidden;
  transform: rotate(-14.84deg);
  transform-origin: 0 50%;
}
.trade-tape::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--teal, #0F9D8A);
  border-right: 0.5cqw solid var(--navy, #102A43);
  border-radius: 0 1px 1px 0;
  transform: translateX(-100%);
  animation: trade-tape 5.5s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes trade-tape {
  0%, 8%    { transform: translateX(-100%); }
  34%, 70%  { transform: translateX(0); }
  92%, 100% { transform: translateX(-100%); }
}

/* Off screen: no animation work (site.js marks [data-loop] elements). */
/* Covers the Home row (.trades[data-loop]) and the single Industries tiles (.trade-art[data-loop]). */
.is-offscreen .trade-layer,
.is-offscreen .trade-layer::before { animation-play-state: paused; }

/* Reduced motion: one composed, still frame that still tells each story. */
@media (prefers-reduced-motion: reduce) {
  .trade-fan { animation: none; }
  .trade-drip { animation: none; transform: none; opacity: 1; }
  .trade-light { animation: none; opacity: 1; }
  .trade-tape::before { animation: none; transform: translateX(-35%); }
}