/* 06-components/_photo-band.css — .c-photo-band: a full-bleed photograph of the trade with the page's own
   content on top of it. The photographs are in app/assets/images/site/timber-backgrounds; a modifier
   picks one, so the view names a subject and never a file.
   The band breaks out of .site__container with the standard full-bleed margin — calc(50% - 50vw) on each
   side — which is why .site carries overflow-x: clip (08-pages/_site.css): the element is 100vw wide and
   100vw counts the scrollbar. The photograph is painted by ::before and a scrim over it by ::after, both
   below the content, because a single background cannot hold an image and a wash that darkens it.
   Parallax is background-attachment: fixed on a fine pointer and a scroll-driven animation on a coarse
   one; the two mechanisms and why there have to be two are at the foot of this file.
   prefers-reduced-motion turns both off for the same reason a transition is turned off.
   The scrim is not decoration. The photographs are bright watercolours and white text on one is illegible
   without it, so the ink here is fixed white on a dark wash rather than the page's ink tokens, in both
   themes. */
.c-photo-band {
  --photo-band-scrim: linear-gradient(100deg, rgb(28 27 24 / 82%), rgb(28 27 24 / 55%));
  --photo-band-ink: #fff;
  --photo-band-ink-muted: rgb(255 255 255 / 86%);
  --photo-band-ink-faint: rgb(255 255 255 / 70%);
  position: relative;
  isolation: isolate;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-3xl);
  padding-inline: var(--gutter-page);
  color: var(--photo-band-ink);
  background-color: var(--iron-900);
}
.c-photo-band::before,
.c-photo-band::after { content: ""; position: absolute; inset: 0; }
.c-photo-band::before { z-index: -2; background-image: var(--photo-band-image); background-size: cover; background-position: center; }
.c-photo-band::after { z-index: -1; background: var(--photo-band-scrim); }
.c-photo-band__inner { max-width: var(--measure-site); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-md); }
.c-photo-band__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--photo-band-ink-faint); }
.c-photo-band__title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--photo-band-ink); }
.c-photo-band__text { font-size: var(--text-lg); line-height: var(--leading-normal); max-width: var(--measure-prose); color: var(--photo-band-ink-muted); }
/* A band with no content: the photograph alone, between two sections of the page. */
.c-photo-band--plain { --photo-band-scrim: linear-gradient(100deg, rgb(28 27 24 / 12%), rgb(28 27 24 / 4%)); padding-block: 0; min-height: 22rem; }
/* Natten. The photographs are daylit whatever the page is, and an unwashed one on the dark ground is a
   lit window in a dark room; the plain band, which carries almost no scrim in the light theme, therefore
   gets one. The bands that carry text already have theirs. */
[data-theme="dark"] .c-photo-band--plain { --photo-band-scrim: linear-gradient(100deg, rgb(20 21 22 / 62%), rgb(20 21 22 / 48%)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-photo-band--plain { --photo-band-scrim: linear-gradient(100deg, rgb(20 21 22 / 62%), rgb(20 21 22 / 48%)); }
}
/* One modifier per photograph in app/assets/images/site/timber-backgrounds. The modifier is the file's
   own name, so a band names a photograph and nothing has to be looked up; SiteHelper::PHOTO_BANDS says
   which page carries which, and test/helpers/site_helper_test.rb fails when a file has no modifier here
   or a modifier here is on no page. */
.c-photo-band--autumn-mixed-forest            { --photo-band-image: url("/assets/site/timber-backgrounds/autumn-mixed-forest-73d39180.webp"); }
.c-photo-band--billing-customer-service       { --photo-band-image: url("/assets/site/timber-backgrounds/billing-customer-service-cf316df4.webp"); }
.c-photo-band--billing-delivery-note          { --photo-band-image: url("/assets/site/timber-backgrounds/billing-delivery-note-e63bb435.webp"); }
.c-photo-band--billing-invoice-review         { --photo-band-image: url("/assets/site/timber-backgrounds/billing-invoice-review-924f8872.webp"); }
.c-photo-band--billing-month-end              { --photo-band-image: url("/assets/site/timber-backgrounds/billing-month-end-6a671107.webp"); }
.c-photo-band--billing-reconciliation         { --photo-band-image: url("/assets/site/timber-backgrounds/billing-reconciliation-e2f7044d.webp"); }
.c-photo-band--billing-year-end               { --photo-band-image: url("/assets/site/timber-backgrounds/billing-year-end-c922686c.webp"); }
.c-photo-band--contact-office-entrance        { --photo-band-image: url("/assets/site/timber-backgrounds/contact-office-entrance-aa162216.webp"); }
.c-photo-band--contact-site-visit             { --photo-band-image: url("/assets/site/timber-backgrounds/contact-site-visit-f64f37e4.webp"); }
.c-photo-band--dispatch-yard                  { --photo-band-image: url("/assets/site/timber-backgrounds/dispatch-yard-139c5571.webp"); }
.c-photo-band--drying-kilns                   { --photo-band-image: url("/assets/site/timber-backgrounds/drying-kilns-26942a08.webp"); }
.c-photo-band--grading-line                   { --photo-band-image: url("/assets/site/timber-backgrounds/grading-line-5b6475c8.webp"); }
.c-photo-band--log-yard                       { --photo-band-image: url("/assets/site/timber-backgrounds/log-yard-23797fd3.webp"); }
.c-photo-band--lumber-storage                 { --photo-band-image: url("/assets/site/timber-backgrounds/lumber-storage-a6b30418.webp"); }
.c-photo-band--maintenance-air-and-hydraulics { --photo-band-image: url("/assets/site/timber-backgrounds/maintenance-air-and-hydraulics-b537f703.webp"); }
.c-photo-band--maintenance-checklist-round    { --photo-band-image: url("/assets/site/timber-backgrounds/maintenance-checklist-round-d9758d65.webp"); }
.c-photo-band--maintenance-inspection         { --photo-band-image: url("/assets/site/timber-backgrounds/maintenance-inspection-797c6f26.webp"); }
.c-photo-band--maintenance-lubrication        { --photo-band-image: url("/assets/site/timber-backgrounds/maintenance-lubrication-6b875a34.webp"); }
.c-photo-band--managed-forest                 { --photo-band-image: url("/assets/site/timber-backgrounds/managed-forest-7c7b25af.webp"); }
.c-photo-band--mill-overview                  { --photo-band-image: url("/assets/site/timber-backgrounds/mill-overview-23a64e3d.webp"); }
.c-photo-band--modern-sawmill                 { --photo-band-image: url("/assets/site/timber-backgrounds/modern-sawmill-35b925be.webp"); }
.c-photo-band--planing-workshop               { --photo-band-image: url("/assets/site/timber-backgrounds/planing-workshop-c75184b8.webp"); }
.c-photo-band--planning-order-desk            { --photo-band-image: url("/assets/site/timber-backgrounds/planning-order-desk-990e3ccd.webp"); }
.c-photo-band--planning-shift-handover        { --photo-band-image: url("/assets/site/timber-backgrounds/planning-shift-handover-8365d518.webp"); }
.c-photo-band--privacy-archive-room           { --photo-band-image: url("/assets/site/timber-backgrounds/privacy-archive-room-40a58b64.webp"); }
.c-photo-band--privacy-office-after-hours     { --photo-band-image: url("/assets/site/timber-backgrounds/privacy-office-after-hours-3c9a2395.webp"); }
.c-photo-band--production-night-shift         { --photo-band-image: url("/assets/site/timber-backgrounds/production-night-shift-5990fcbb.webp"); }
.c-photo-band--production-packaging-line      { --photo-band-image: url("/assets/site/timber-backgrounds/production-packaging-line-6b1691e9.webp"); }
.c-photo-band--questions-intro-meeting        { --photo-band-image: url("/assets/site/timber-backgrounds/questions-intro-meeting-33e1ca73.webp"); }
.c-photo-band--questions-server-cupboard      { --photo-band-image: url("/assets/site/timber-backgrounds/questions-server-cupboard-2f74bd7b.webp"); }
.c-photo-band--repairs-bearing-change         { --photo-band-image: url("/assets/site/timber-backgrounds/repairs-bearing-change-044d8ce5.webp"); }
.c-photo-band--repairs-blade-service          { --photo-band-image: url("/assets/site/timber-backgrounds/repairs-blade-service-1cb6f31b.webp"); }
.c-photo-band--repairs-shutdown               { --photo-band-image: url("/assets/site/timber-backgrounds/repairs-shutdown-98821314.webp"); }
.c-photo-band--repairs-spare-parts-store      { --photo-band-image: url("/assets/site/timber-backgrounds/repairs-spare-parts-store-aa37b6b1.webp"); }
.c-photo-band--spring-spruce-forest           { --photo-band-image: url("/assets/site/timber-backgrounds/spring-spruce-forest-23dce5c4.webp"); }
.c-photo-band--summer-pine-forest             { --photo-band-image: url("/assets/site/timber-backgrounds/summer-pine-forest-170cfba9.webp"); }
.c-photo-band--timber-truck-arriving          { --photo-band-image: url("/assets/site/timber-backgrounds/timber-truck-arriving-57268e34.webp"); }
.c-photo-band--winter-forest                  { --photo-band-image: url("/assets/site/timber-backgrounds/winter-forest-c3ee1ce0.webp"); }
/* Parallax, by two mechanisms, because no one mechanism works on both kinds of device.
   On a fine pointer it is background-attachment: fixed, which is one declaration and has been the
   band's behaviour since it shipped.
   A touch browser cannot use it: iOS Safari either repaints the fixed layer per frame or drops the
   effect outright, which is why it was excluded and why the band was a still photograph on a phone.
   The replacement is a scroll-driven animation: ::before is made taller than the band (inset-block:
   -30% on each side) and translated across it as the band crosses the viewport, with overflow: clip
   on the band to hold the overhang. animation-timeline: view() measures the pseudo-element's own
   progress through the scrollport, so no script and no scroll listener. The translate is a percentage
   of the pseudo-element's own height, which is 160% of the band's, so it has to stay under 18.75%
   (30 / 160) or the photograph pulls away from an edge and the band's own ground shows through;
   17% leaves a little room. A band near the top of the document enters its timeline part-way
   through, because it is already on screen when the page loads; it moves over the rest of the
   scroll like any other.
   Where view() is unsupported the @supports block does not apply and the band is the still
   photograph it is today, which is the fallback we already know looks acceptable. */
@media (hover: hover) and (pointer: fine) {
  .c-photo-band::before { background-attachment: fixed; }
}
@supports (animation-timeline: view()) {
  @media (pointer: coarse) {
    .c-photo-band { overflow: clip; }
    .c-photo-band::before { inset-block: -30%; animation: photo-band-parallax linear both; animation-timeline: view(); }
  }
}
@keyframes photo-band-parallax {
  from { transform: translateY(-17%); }
  to { transform: translateY(17%); }
}
@media (prefers-reduced-motion: reduce) {
  .c-photo-band::before { background-attachment: scroll; animation: none; inset-block: 0; }
}
/* On a phone the band was as tall as the photograph is wide: 14 rem against a 390 px viewport is very
   nearly the 16:9 of the files in timber-backgrounds, so cover cropped almost nothing and the band
   read as the whole picture pasted in rather than as a band. 10 rem against the same viewport is
   about 2.4:1, a crop. */
@media (max-width: 56.24rem) {
  .c-photo-band { padding-block: var(--space-2xl); }
  .c-photo-band--plain { min-height: 10rem; }
  .c-photo-band__text { font-size: var(--text-base); }
}