/* Home: finale (patterns/home-finale.php). Closing inverted band before the footer: label, big headline, one line,
   two buttons, and on the right a wall of project pictures in three tilted columns that scroll endlessly (inc/finale-wall.php
   deals the Gallery block's pictures into the columns; the middle column runs the other way). */
.hm-finale{
  --hm-finale-w:760px;
  --hm-finale-h:clamp(40px, 6.4vw, 84px);
  --hm-finale-track:-0.035em;
  --hm-finale-z-dots:-1;
  --hm-finale-z-fx:0;
  --hm-finale-z-copy:1;
  --hm-wall-w:52%; /* the box: wide enough that the tilted columns' left edge shows whole inside it */
  --hm-wall-cols:15%; /* where the columns start inside the box */
  --hm-wall-fade-l:34%; /* the slanted fade on the left, along the columns' tilt */
  --hm-wall-h-m:clamp(300px, 78vw, 440px);
  --hm-wall-tilt:7deg;
  --hm-wall-dur:180s; /* one loop = half a column (16 pictures with 12 in the gallery) */
  --hm-wall-dur-2:225s;
  --hm-wall-fade:16%;
  --hm-wall-mask:linear-gradient(calc(90deg + var(--hm-wall-tilt)), transparent, var(--ink) var(--hm-wall-fade-l), var(--ink) calc(100% - var(--hm-wall-fade)), transparent), linear-gradient(transparent, var(--ink) var(--hm-wall-fade), var(--ink) calc(100% - var(--hm-wall-fade)), transparent);
  position:relative;isolation:isolate;overflow:hidden;
  /* fixed, not --gap-section: the design keeps the closing band this tall on phones too */
  padding-block:var(--s-9) calc(var(--s-9) + var(--s-7));
  background:var(--inv-bg);color:var(--inv-fg)
}
/* dotted texture in the band's own text colour */
.hm-finale::before{content:"";position:absolute;inset:0;z-index:var(--hm-finale-z-dots);background-image:radial-gradient(circle, color-mix(in srgb, var(--inv-fg) 14%, transparent) 1px, transparent 1px);background-size:var(--dotgrid-size) var(--dotgrid-size)}
.hm-finale > *{margin:0}
.hm-finale > .page{position:relative;z-index:var(--hm-finale-z-copy)}

.hm-finale__inner{display:grid;gap:var(--s-6);justify-items:start;max-width:min(var(--hm-finale-w), 58%)}
.hm-finale__inner > *{margin:0}
/* the pictures may pass behind the copy: a soft halo of the band colour keeps every line readable */
.hm-finale__inner{--hm-finale-halo:color-mix(in srgb, var(--inv-bg) 88%, transparent);text-shadow:0 0 var(--s-5) var(--hm-finale-halo), 0 0 var(--s-2) var(--hm-finale-halo)}
.hm-finale__label{color:color-mix(in srgb, var(--inv-fg) 60%, transparent)}
.hm-finale__title{color:inherit;font-size:var(--hm-finale-h);font-weight:800;letter-spacing:var(--hm-finale-track);line-height:1.02}
.hm-finale__title strong{font-weight:inherit;color:var(--accent-fill)}
.hm-finale__lede{max-width:44ch;font-size:var(--t-l);color:color-mix(in srgb, var(--inv-fg) 72%, transparent)}

/* buttons (icons + magnet: shared ic-cal / ic-arrow / dg-magnet); ghost button recoloured for the band */
.hm-finale__cta{gap:var(--s-3)}
.hm-finale .wp-block-button.is-style-outline > .wp-block-button__link{color:var(--inv-fg);background:var(--hm-finale-halo);border-color:color-mix(in srgb, var(--inv-fg) 30%, transparent)}
.hm-finale .wp-block-button.is-style-outline > .wp-block-button__link:hover{border-color:var(--inv-fg)}

/* picture wall: the tilted block is taller than the wall so no corner shows; the wall's edges fade into the band (the
   left one slanted along the columns) and the columns keep to the right part so the copy has room; the pictures run faster while the page scrolls (hm-finale.js) */
.hm-wall{position:absolute;inset:0 0 0 auto;z-index:var(--hm-finale-z-fx);width:var(--hm-wall-w);overflow:hidden;pointer-events:none;
  -webkit-mask:var(--hm-wall-mask);-webkit-mask-composite:source-in;mask:var(--hm-wall-mask);mask-composite:intersect} /* all four edges sink into the band */
.hm-wall__tilt{position:absolute;inset:-30% -10% -30% var(--hm-wall-cols);display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--s-4);transform:rotate(var(--hm-wall-tilt))}
.hm-wall__col{min-width:0;overflow:hidden}
.hm-wall__track{display:grid;gap:var(--s-4);padding-bottom:var(--s-4);will-change:transform;animation:hm-wall-up var(--hm-wall-dur) linear infinite}
.hm-wall__col:nth-child(2) .hm-wall__track{animation-duration:var(--hm-wall-dur-2);animation-direction:reverse}
.hm-wall__shot{display:block;overflow:hidden;border:1px solid color-mix(in srgb, var(--inv-fg) 14%, transparent);border-radius:var(--r);background:color-mix(in srgb, var(--inv-fg) 6%, transparent)}
.hm-wall__shot img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:top}
@keyframes hm-wall-up{to{transform:translate3d(0, -50%, 0)}}
@media (prefers-reduced-motion: reduce){
  .hm-wall__track{animation:none}
}

@media (max-width: 991px){
  .hm-finale{padding-bottom:0} /* the picture wall runs to the band's bottom edge */
  .hm-finale__inner{max-width:var(--hm-finale-w)}
  .hm-wall{position:relative;inset:auto;width:auto;height:var(--hm-wall-h-m);margin-top:var(--s-8)}
  .hm-wall__tilt{inset:-40% 0}
  /* the phone box is the full width and ends at the band's bottom: even fades on both sides, a fade at the top only */
  .hm-finale{--hm-wall-mask:linear-gradient(90deg, transparent, var(--ink) var(--hm-wall-fade), var(--ink) calc(100% - var(--hm-wall-fade)), transparent), linear-gradient(transparent, var(--ink) var(--hm-wall-fade))}
}