/* Home closing band (TODO 00001.5.13). FINAL design/home/inspiration/sections/closing-footer/r3/v1.png.
   Pre-footer texture band (section 8): texture.jpg as is, orange eyebrow rule, white headline, ONE primary
   button (orange fill, navy label, arrow). A 1px white rule at 20 percent alpha separates it from the footer. */
.p-home-closing {
  box-sizing: border-box; color: var(--wp--preset--color--white);
  background: var(--wp--preset--color--navy) url("../../img/texture.jpg") center / cover no-repeat;
  border-bottom: 1px solid var(--wp--custom--alpha--rule-on-navy);
  padding: var(--wp--preset--spacing--110) var(--wp--custom--gutter--desktop);
}
.p-home-closing *, .p-home-closing *::before, .p-home-closing *::after { box-sizing: border-box; }
.p-home-closing__inner {
  max-width: var(--wp--custom--layout--wide); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--90);
}
.p-home-closing__eyebrow {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--50); margin: 0;
  color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--label);
  font-weight: var(--wp--custom--font-weight--label); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase;
}
.p-home-closing__eyebrow::before { content: ""; flex: none; width: 48px; height: 3px; background: var(--wp--preset--color--orange); }
.p-home-closing .p-home-closing__title {
  margin: var(--wp--preset--spacing--40) 0 0; color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--h-2); font-weight: var(--wp--custom--font-weight--h-2);
  letter-spacing: var(--wp--custom--letter-spacing--h-2); line-height: 1.15;
}
.p-home-closing__actions { flex: none; }
.p-home-closing__cta .wp-block-button__link {
  position: relative; display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--40);
  min-height: var(--wp--custom--control); padding: 14px var(--wp--preset--spacing--60);
  border-radius: var(--wp--custom--radius--default); line-height: 1; text-decoration: none;
}
.p-home-closing__cta .wp-block-button__link::after {
  content: ""; width: 20px; height: 20px; background: currentColor; transition: transform 0.2s cubic-bezier(.22, .61, .36, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Hover fill (00001.5.22.13.b, the .12 rule): a layer over the padding box whose opacity fades at the kit's hover token, navy at
   8 percent ABOVE the navy label (navy over navy leaves the label as it is); never an animated box-shadow. Press: scale .98 at once. */
.p-home-closing__cta .wp-block-button__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: var(--wp--custom--alpha--overlay-navy); transition: opacity var(--mo-hover) var(--mo-ease); }
.p-home-closing__cta .wp-block-button__link:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--white); outline-offset: var(--wp--custom--focus--offset);
}
.p-home-closing__cta .wp-block-button__link:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .p-home-closing__cta .wp-block-button__link:hover::before { opacity: 1; }
  .p-home-closing__cta .wp-block-button__link:hover::after { transform: translateX(3px); }
}
@media (max-width: 991.98px) {
  .p-home-closing { padding: var(--wp--custom--section--tablet) var(--wp--custom--gutter--tablet); }
  .p-home-closing__inner { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--70); }
}
@media (max-width: 599.98px) {
  .p-home-closing { padding: var(--wp--custom--section--phone) var(--wp--custom--gutter--phone); }
}
/* Motion (stage 10, 00001.5.22.7; design/FINDINGS.md "Motion inventory: closing"). inc/motion.php sets data-mo on the
   section root (hook, the veil host), the eyebrow (hook), the title (rise 150 ms) and the cta (hook, 450 ms). These are
   the hook start states, all under html.mo and only until the host's .mo-in, so JS off, reduced motion and print show the
   approved look. Story move: the Shop instruments button rises, then its arrow travels 16 px out of the label to where it
   points, 1.4 s from the cta's start + 300 ms. */
/* The veil (and the stacking context that keeps it above the texture and under the content) lives only until the root's
   .mo-done (the veil's own transitionend, about 0.9 s; GO-041). It is inset 0 on the padding box, so the 1 px white rule
   (the border-bottom) is never covered or moved. */
.mo .p-home-closing[data-mo]:not(.mo-done) { position: relative; isolation: isolate; }
.mo .p-home-closing[data-mo]:not(.mo-done)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--wp--preset--color--navy);
  opacity: 0; transition: opacity var(--mo-dur) var(--mo-ease);
}
.mo .p-home-closing[data-mo]:not(.mo-in)::before { opacity: 1; }
.mo .p-home-closing__eyebrow[data-mo]::before { transform-origin: 0 50%; transition: transform var(--mo-dur) var(--mo-ease) var(--mo-delay, 0ms); }
.mo .p-home-closing__eyebrow[data-mo]:not(.mo-in)::before { transform: scaleX(0); }
/* The link and its arrow are hook-children of the cta: one .mo-in drives both, and a late-entry rewrite of the cta's
   --mo-delay reaches them by inheritance. Their entrance transitions exist only while the cta is :not(.mo-done) (its 2.5 s
   timer, GO-043: their transitionend targets the link, not the cta), so the arrow's 0.2 s hover nudge is back after. */
.mo .p-home-closing__cta[data-mo]:not(.mo-done) .wp-block-button__link {
  transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease);
  transition-delay: var(--mo-delay, 0ms);
}
.mo .p-home-closing__cta[data-mo]:not(.mo-done) .wp-block-button__link::after {
  transition: transform 1.4s var(--mo-ease), opacity var(--mo-dur) var(--mo-ease);
  transition-delay: calc(var(--mo-delay, 0ms) + 300ms);
}
.mo .p-home-closing__cta[data-mo]:not(.mo-in) .wp-block-button__link { opacity: 0; transform: translate3d(0, var(--mo-rise), 0); }
.mo .p-home-closing__cta[data-mo]:not(.mo-in) .wp-block-button__link::after { opacity: 0; transform: translate3d(calc(-1 * var(--mo-rise)), 0, 0); }
