/* ═══════════════════════════════════════════════════════════════
   THE BARNHOUSE, fence component
   Part A: picket fence dividers (.fence[data-fence])
   Part B: the walker rail (.rail[data-rail] / .orderbar__rail[data-rail])
   Contents are built by fence.js. Only the root markup is authored.
   ═══════════════════════════════════════════════════════════════ */

/* ── Component tokens ──────────────────────────────────────────── */
.fence, .rail, .orderbar__rail {
  --fence-h: 76px;            /* fence height, desktop */
  --fence-picket-w: 22px;
  --fence-gap: 10px;
  --fence-rail-h: 7px;
  --fence-top-rail: 22%;      /* top edge of the top rail */
  --fence-low-rail: 66%;      /* top edge of the lower rail */
  --fence-post-rise: 40px;    /* how far the letterbox post rises above the fence */
  --fence-shade: #B98740;     /* shade side of the gold timber (fallback, see @supports below) */
  --fence-step: 18ms;         /* per picket stagger, written by fence.js */
  --fence-plant-end: 900ms;   /* moment the last picket is planted, written by fence.js */
  --fence-shell-edge: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
}
@supports (color: color-mix(in srgb, red, blue)) {
  .fence, .rail, .orderbar__rail { --fence-shade: color-mix(in srgb, var(--wood), var(--char) 30%); }
}
@media (max-width: 759px) {
  .fence { --fence-h: 60px; --fence-post-rise: 34px; }
}

/* ── PART A. Fence dividers ────────────────────────────────────── */
.fence {
  position: relative;
  z-index: 2;
  height: var(--fence-h);
  margin: calc(var(--fence-h) / -2) 0;   /* straddles the join between two sections */
  padding: 0;
  background: transparent;
  pointer-events: none;
}

/* Rails (behind the pickets) */
.fence__rails { position: absolute; inset: 0; z-index: 0; }
.fence__rail {
  position: absolute; left: 0; right: 0;
  height: var(--fence-rail-h);
  background: var(--fence-shade);
  border-radius: 1px;
}
.fence__rail--top { top: var(--fence-top-rail); }
.fence__rail--low { top: var(--fence-low-rail); }

/* Picket row. The perspective lives here, on the gate's direct parent:
   perspective only applies to children, so on .fence it never reached the gate. */
.fence__row {
  position: absolute; inset: 0; z-index: 1;
  perspective: 600px; perspective-origin: 50% 50%;
  display: flex; justify-content: center; align-items: stretch;
  gap: var(--fence-gap);
}
.fence__picket {
  flex: none;
  width: var(--fence-picket-w);
  height: 100%;
  background-color: var(--wood);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, transparent calc(100% - 12px), var(--fence-shade) calc(100% - 12px), var(--fence-shade) calc(100% - 10px), transparent calc(100% - 10px));
  clip-path: polygon(50% 0, 100% 9px, 100% 100%, 0 100%, 0 9px);
  transform-origin: 50% 100%;
}

/* Gate: the middle five pickets, hinged on the left */
.fence__gate {
  position: relative; flex: none;
  display: flex; gap: var(--fence-gap);
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}
.fence__gate .fence__rail { z-index: 0; }
.fence__gate .fence__picket { position: relative; z-index: 1; }
.fence__brace {
  position: absolute; z-index: 0;
  left: -2px; right: -2px;
  top: calc((var(--fence-top-rail) + var(--fence-low-rail)) / 2 + var(--fence-rail-h) / 2);
  height: var(--fence-rail-h);
  background: var(--fence-shade);
  border-radius: 1px;
  transform: translateY(-50%) rotate(-12deg);
}
@media (max-width: 759px) { .fence__brace { transform: translateY(-50%) rotate(-10deg); } }

/* Hen on the top rail, near the right end */
.fence__hen {
  position: absolute; z-index: 3;
  right: calc(var(--fence-shell-edge) + 28px);
  bottom: calc(100% - var(--fence-top-rail));
  height: 56px; width: auto;
  overflow: visible;
  transform-origin: 46% 100%;
}
.fence__hen-body { fill: var(--cream); }
.fence[data-ink="dark"] .fence__hen-body { fill: var(--brown); }
.fence__hen-comb { fill: var(--red); }
@media (max-width: 759px) { .fence__hen { height: 48px; right: calc(var(--fence-shell-edge) + 12px); } }

/* Letterbox post (a taller picket) and the red box beside it */
.fence__picket--post {
  align-self: flex-end;
  height: calc(100% + var(--fence-post-rise));
}
.fence__box {
  position: absolute; z-index: 3;
  left: var(--fence-box-left, var(--fence-shell-edge));
  top: calc(var(--fence-post-rise) * -1 + 10px);
  width: 50px; height: 38px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 5px;
  background: var(--red-2);
  border-radius: 3px;
  box-shadow: inset 0 -3px 0 rgba(26, 20, 16, .22), inset 0 1px 0 rgba(255, 255, 255, .14);
  transform-origin: 0 calc(100% + var(--fence-post-rise) - 10px);
}
.fence__slot {
  position: absolute; top: 7px; left: 50%;
  width: 26px; height: 3px;
  margin-left: -13px;
  background: var(--cream);
  border-radius: 2px;
}
.fence__num {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--cream);
}

/* Entrance: rails fade in first, then the pickets plant left to right.
   Hidden states live inside the no-preference query so reduced motion,
   and no JS, always render the final fence. */
@media (prefers-reduced-motion: no-preference) {
  .js .fence__rail, .js .fence__brace { opacity: 0; transition: opacity 240ms var(--ease-out); }
  .js .fence.is-in .fence__rail, .js .fence.is-in .fence__brace { opacity: 1; }

  .js .fence__picket, .js .fence__box {
    transform: scaleY(0);
    transition: transform 300ms var(--ease-out);
    transition-delay: calc(120ms + var(--i, 0) * var(--fence-step));
  }
  .js .fence.is-in .fence__picket, .js .fence.is-in .fence__box { transform: scaleY(1); }

  .js .fence__gate {
    transform: rotateY(0deg);
    transition: transform 720ms var(--ease-out);
    transition-delay: calc(var(--fence-plant-end) + 300ms);
  }
  .js .fence.is-in .fence__gate { transform: rotateY(-70deg); }

  .js .fence__hen { opacity: 0; transition: opacity 360ms var(--ease-out) var(--fence-plant-end); }
  .js .fence.is-in .fence__hen {
    opacity: 1;
    animation: fencePeck 500ms var(--ease) calc(var(--fence-plant-end) + 520ms) 1 both;
  }

  /* Rebuilt after a resize while already in view: render the final state at once.
     The plant happens once and the hen pecks once, never again on rotation or resize. */
  .js .fence.is-settled .fence__hen { animation: none; }
  .js .fence.is-settled .fence__gate,
  .js .fence.is-settled .fence__picket,
  .js .fence.is-settled .fence__box,
  .js .fence.is-settled .fence__rail,
  .js .fence.is-settled .fence__brace,
  .js .fence.is-settled .fence__hen { transition: none; }
}
@keyframes fencePeck {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fence__gate { transform: rotateY(-70deg); }
}

/* ── PART B. The walker rail ───────────────────────────────────── */
/* The core CSS owns the rail box. The one property set here: clip it horizontally
   so the translated track never widens the page, while the 24px sprite can still
   rise above the 8px rail (visible + clip keeps visible, per css-overflow-3). */
.rail, .orderbar__rail { overflow-x: clip; overflow-y: visible; }

/* Rail line: the shape is a mask, the colour is the token */
.rail__line {
  position: absolute; inset: 0;
  background: var(--wood);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8' shape-rendering='crispEdges'%3E%3Crect y='6' width='24' height='2' fill='%23000'/%3E%3Cpath d='M10 2l2-2 2 2v6h-4z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8' shape-rendering='crispEdges'%3E%3Crect y='6' width='24' height='2' fill='%23000'/%3E%3Cpath d='M10 2l2-2 2 2v6h-4z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  -webkit-mask-size: 24px 8px; mask-size: 24px 8px;
}
.rail__track {
  position: absolute; left: 0; bottom: 2px;
  width: calc(100% - 24px); height: 24px;
  transform: translate3d(0, 0, 0);   /* fence.js moves it with the scroll */
  will-change: transform;
}
.rail__hen {
  position: absolute; left: 0; bottom: 0;
  width: 24px; height: 24px;
  display: block;
  transform: scaleX(1);
}
.rail__hen.is-back { transform: scaleX(-1); }
.rail__hen g { display: none; }
.rail__hen[data-frame="a"] .rail__fa,
.rail__hen[data-frame="b"] .rail__fb,
.rail__hen[data-frame="peck"] .rail__fp { display: block; }
.rail__hen .rail__u-cream { fill: var(--cream); }
.rail__hen .rail__u-red   { fill: var(--red); }
.rail__hen .rail__u-gold  { fill: var(--gold); }
.rail__hen .rail__u-char  { fill: var(--char); }

/* Reduced motion: no sprite, a plain gold progress line */
.rail__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold);
  transform: scaleX(0);   /* fence.js scales it with the scroll */
  transform-origin: 0 50%;
}