/* EVERLOOM living machine border (Phase 2, first slice, 2026-10-11).

   A decorative four-sided cog frame that sits behind the shell.
   - Never takes input: pointer-events none, aria-hidden in the markup.
   - Static by default. Gears only turn when the OS allows motion AND the
     Cowlsly "reduce motion" setting (body.motion-reduced) is off, so the
     existing Simple Settings toggle doubles as the user's stop control.
   - Rotation is applied to HTML wrappers around the SVG images (composited
     transform), never to elements inside an SVG.
   - Turn time ∝ gear diameter (sm 40s, md 60s, lg 90s), so meshed neighbours
     keep the same rim speed; neighbours always turn in opposite directions.
   - Reuses the cog images already served from /assets/images/cogs/. Those are
     generated copies of the canonical UI repo and are not edited here. */

.pf {
  --pf-top: 4.4rem;            /* sits on the line the sticky cog bar uses */
  --pf-gear-sm: var(--cw-gear-sm, 3.2rem);
  --pf-gear-md: var(--cw-gear-md, 4.8rem);
  --pf-gear-lg: var(--cw-gear-lg, 7.2rem);
  --pf-overlap: 0.84;          /* centre distance = 0.84 × (r1 + r2): tooth tips reach the neighbour's roots */
  position: fixed;
  inset: 0;
  z-index: 1;                  /* above .site-bg (0); main/footer come later in the DOM at z 1-2 and paint over it */
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: 0.82;
}

.pf * { pointer-events: none; }

/* ── Gear primitives ── */
.pf-g {
  position: relative;
  display: block;
  flex: none;
  width: var(--pf-size);
  height: var(--pf-size);
  border-radius: 50%;
}

.pf-g--sm { --pf-size: var(--pf-gear-sm); --pf-turn: var(--cw-turn-sm, 40s); }
.pf-g--md { --pf-size: var(--pf-gear-md); --pf-turn: var(--cw-turn-md, 60s); }
.pf-g--lg { --pf-size: var(--pf-gear-lg); --pf-turn: var(--cw-turn-lg, 90s); }

.pf-g img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Rest angle so the static frame looks set, not stamped */
.pf-spin { transform: rotate(var(--pf-rest, 0deg)); }

/* Emerald crystal hub drawn in CSS: radially symmetric, so it can turn with the gear */
.pf-g--sm.pf-spin::after,
.pf-g--md.pf-spin::after {
  content: "";
  position: absolute;
  inset: 37%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cw-jade-300, #9af7d3) 0 18%, var(--cw-emerald-500, #3ff0b2) 42%, var(--cw-emerald-deep, #0b3d2c) 100%);
  box-shadow: 0 0 0 2px rgba(232, 192, 106, 0.75), 0 0 0.7rem var(--cw-emerald-glow, rgba(63, 240, 178, 0.35));
}

/* Layered corner gear: static glow, turning body, static hub, glass and shadow */
.pf-g--layered .pf-spin {
  position: absolute;
  inset: 0;
}

.pf-g--layered .pf-shadow { transform: translate(4%, 6%); opacity: 0.7; }
.pf-g--layered .pf-glow { inset: -14%; width: 128%; height: 128%; opacity: 0.7; }
.pf-g--layered .pf-hub {
  inset: 26%;
  width: 48%;
  height: 48%;
  filter: hue-rotate(-38deg) saturate(1.3);
}
.pf-g--layered .pf-hub-gem {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, var(--cw-jade-300, #9af7d3) 0 14%, var(--cw-emerald-500, #3ff0b2) 40%, var(--cw-emerald-deep, #0b3d2c) 100%);
  box-shadow: 0 0 0 3px rgba(232, 192, 106, 0.8), 0 0 1.2rem var(--cw-emerald-glow, rgba(63, 240, 178, 0.35));
}
.pf-g--layered .pf-glass { opacity: 0.5; mix-blend-mode: screen; }

/* ── Rails: gold filigree line + marble trim, gears centred on the line ── */
.pf-rail {
  position: absolute;
  display: flex;
  align-items: center;
}

.pf-rail::before,
.pf-rail::after {
  content: "";
  position: absolute;
  z-index: -1;                 /* trim runs behind the gears (.pf is the stacking context) */
}

.pf-rail--top,
.pf-rail--bottom {
  left: 0;
  right: 0;
  height: 0;
  justify-content: space-between;
}

.pf-rail--top { top: var(--pf-top); }
.pf-rail--bottom { bottom: 0; }

.pf-rail--top::before,
.pf-rail--bottom::before {
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cw-gold-500, #e8c06a) 8%, var(--cw-gold-300, #f6dfa4) 50%, var(--cw-gold-500, #e8c06a) 92%, transparent);
  box-shadow: 0 0 0.6rem var(--cw-gold-glow, rgba(242, 204, 123, 0.32));
}

.pf-rail--top::after,
.pf-rail--bottom::after {
  left: 0;
  right: 0;
  height: 3px;
  background:
    repeating-linear-gradient(115deg, transparent 0 14px, var(--cw-marble-vein, rgba(122, 112, 94, 0.32)) 14px 15px, transparent 15px 41px),
    linear-gradient(90deg, transparent, var(--cw-marble-200, #e6e0d4) 10%, var(--cw-ivory-50, #f7f2e8) 50%, var(--cw-marble-200, #e6e0d4) 90%, transparent);
  opacity: 0.55;
}
.pf-rail--top::after { top: 3px; }
.pf-rail--bottom::after { top: -6px; }

.pf-rail--left,
.pf-rail--right {
  top: var(--pf-top);
  bottom: 0;
  width: 0;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(var(--pf-gear-lg) * 0.62);  /* clear the corner assembly */
}

.pf-rail--left { left: 0; }
.pf-rail--right { right: 0; }

.pf-rail--left::before,
.pf-rail--right::before {
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: linear-gradient(180deg, var(--cw-gold-500, #e8c06a), var(--cw-gold-300, #f6dfa4) 50%, var(--cw-gold-500, #e8c06a));
  box-shadow: 0 0 0.6rem var(--cw-gold-glow, rgba(242, 204, 123, 0.32));
}

.pf-rail--left::after,
.pf-rail--right::after {
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cw-marble-200, #e6e0d4), var(--cw-ivory-50, #f7f2e8) 50%, var(--cw-marble-200, #e6e0d4));
  opacity: 0.5;
}
.pf-rail--left::after { left: 3px; }
.pf-rail--right::after { left: -6px; }

/* Gear trains: a row/column of alternating md/sm gears whose centres sit 0.84×(r1+r2) apart */
.pf-train {
  display: flex;
  align-items: center;
}

.pf-rail--left .pf-train,
.pf-rail--right .pf-train { flex-direction: column; }

/* Rails are zero-width/height flex boxes with align-items:center, so each train
   is already centred on the rail line (half off-screen on the outer edges). */

.pf-train > .pf-g + .pf-g {
  /* pull each gear back so the pair overlaps by 16% of the summed radii */
  margin-inline-start: calc((var(--pf-gear-md) + var(--pf-gear-sm)) / 2 * (var(--pf-overlap) - 1));
}

.pf-rail--left .pf-train > .pf-g + .pf-g,
.pf-rail--right .pf-train > .pf-g + .pf-g {
  margin-inline-start: 0;
  margin-block-start: calc((var(--pf-gear-md) + var(--pf-gear-sm)) / 2 * (var(--pf-overlap) - 1));
}

/* Top/bottom trains start just inside the corner gears */
.pf-rail--top .pf-train--start,
.pf-rail--bottom .pf-train--start { margin-inline-start: calc(var(--pf-gear-lg) * 0.62); }
.pf-rail--top .pf-train--end,
.pf-rail--bottom .pf-train--end { margin-inline-end: calc(var(--pf-gear-lg) * 0.62); }

/* End trains are written corner-first in the markup and laid out reversed,
   so child 1 is always the gear nearest its corner. */
.pf-train--end { flex-direction: row-reverse; }
.pf-train--end > .pf-g + .pf-g {
  margin-inline-start: 0;
  margin-inline-end: calc((var(--pf-gear-md) + var(--pf-gear-sm)) / 2 * (var(--pf-overlap) - 1));
}

/* Alternate directions along each train. The first gear always turns against
   the large corner gear beside it. Corner large gears turn clockwise; a mirrored
   corner (scaleX or scaleY) shows it anticlockwise, so:
     top start, left rail, bottom end  → first gear anticlockwise (.pf-train--ccw-first)
     top end, right rail, bottom start → first gear clockwise     (.pf-train--cw-first) */
.pf-train--ccw-first > .pf-g:nth-child(odd),
.pf-train--cw-first > .pf-g:nth-child(even) { --pf-dir: reverse; }
.pf-train > .pf-g:nth-child(3n) { --pf-rest: 11deg; }
.pf-train > .pf-g:nth-child(3n + 1) { --pf-rest: 23deg; }

/* ── Corner assemblies ── */
.pf-corner {
  position: absolute;
  width: 0;
  height: 0;
}

.pf-corner--tl { top: var(--pf-top); left: 0; }
.pf-corner--tr { top: var(--pf-top); right: 0; transform: scaleX(-1); }
.pf-corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.pf-corner--br { bottom: 0; right: 0; transform: scale(-1, -1); }

.pf-corner > .pf-g {
  position: absolute;
  margin: calc(var(--pf-size) / -2) 0 0 calc(var(--pf-size) / -2);
}

/* Large gear centred on the corner point; md meshes on the inward diagonal;
   sm meshes off the md. Centre distances = 0.84 × (r1 + r2). */
.pf-corner > .pf-g--lg { left: 0; top: 0; }
.pf-corner > .pf-g--md {
  --pf-d: calc((var(--pf-gear-lg) + var(--pf-gear-md)) / 2 * var(--pf-overlap) * 0.7071);
  left: var(--pf-d);
  top: var(--pf-d);
  --pf-dir: reverse;
  --pf-rest: 17deg;
}
.pf-corner > .pf-g--sm {
  --pf-d: calc((var(--pf-gear-lg) + var(--pf-gear-md)) / 2 * var(--pf-overlap) * 0.7071);
  left: var(--pf-d);
  top: calc(var(--pf-d) + (var(--pf-gear-md) + var(--pf-gear-sm)) / 2 * var(--pf-overlap));
  --pf-rest: 8deg;
}

/* ── Motion: opt-in only ── */
@keyframes pf-turn {
  from { transform: rotate(var(--pf-rest, 0deg)); }
  to { transform: rotate(calc(var(--pf-rest, 0deg) + 360deg)); }
}

@media (prefers-reduced-motion: no-preference) {
  body:not(.motion-reduced) .pf-spin {
    animation: pf-turn var(--pf-turn, 60s) linear infinite;
    animation-direction: var(--pf-dir, normal);
  }
}

/* Pause in background tabs (page-visibility.js sets body.page-hidden) */
body.page-hidden .pf-spin {
  animation-play-state: paused !important;
}

/* ── Performance / layout tiers ── */

/* Tablet: shorter trains, fewer animated layers */
@media (max-width: 1099px) {
  .pf-rail--top .pf-train > .pf-g:nth-child(n + 4),
  .pf-rail--bottom .pf-train > .pf-g:nth-child(n + 4),
  .pf-rail--left .pf-train > .pf-g:nth-child(n + 7),
  .pf-rail--right .pf-train > .pf-g:nth-child(n + 7),
  .pf-corner > .pf-g--sm {
    display: none;
  }
  .pf { --pf-gear-lg: 6rem; --pf-gear-md: 4rem; --pf-gear-sm: 2.67rem; }
}

/* Phone: the header wraps to three rows and the side gutters are tiny, so keep
   only the two bottom corner assemblies (4 cogs) and no rails. */
@media (max-width: 760px) {
  .pf { --pf-gear-lg: 4.8rem; --pf-gear-md: 3.2rem; opacity: 0.7; }
  .pf-rail,
  .pf-corner--tl,
  .pf-corner--tr {
    display: none;
  }
  .pf-corner--bl { bottom: env(safe-area-inset-bottom, 0px); }
  .pf-corner--br { bottom: env(safe-area-inset-bottom, 0px); }
}

/* Data-saver users get the static frame */
@media (prefers-reduced-data: reduce) {
  .pf-spin { animation: none !important; }
}

@media (forced-colors: active) {
  .pf { display: none; }
}

@media print {
  .pf { display: none; }
}