/* ==========================================================================
   Tooreen Construction — pale photographic backgrounds

   The Tooreen_DEPLOY treatment for light sections: instead of flat cream,
   a foggy London crane photograph sits behind a near-opaque wash of the
   section's own colour. The photo is fixed to the window, so neighbouring
   sections line up seamlessly and it drifts gently as the page scrolls.

   Each section keeps its original tint (cream, stone, sage…) through
   --pale-wash; only the flat colour is replaced. `body .x` so these outrank
   the single-class rules in the page stylesheets whatever the load order.
   ========================================================================== */

:root{
  --pale-photo:url("assets/backgrounds/pale-cranes.webp");
  --pale-strength:.95;   /* how much of the section colour covers the photo */
}

body .homepage,
body .about-section,
body .work-section,
body .process-section,
body .contact-section,
body .services-main,
body .s-explorer,
body .s-index,
body .s-contact,
body.projects-page,
body .collection,
body .c-main,
body .c-hero--routes,
body .c-brief,
body .legal{
  --pale-wash:rgba(244,242,233,var(--pale-strength));
  --pale-extra:linear-gradient(transparent,transparent);
  background-color:rgb(244,242,233);
  background-image:
    var(--pale-extra),
    linear-gradient(var(--pale-wash),var(--pale-wash)),
    var(--pale-photo);
  background-size:auto,auto,cover;
  background-position:center,center,center center;
  background-repeat:no-repeat;
  background-attachment:scroll,fixed,fixed;
}

/* each section's own tint, carried through the wash */
body .homepage{--pale-wash:rgba(241,240,231,var(--pale-strength))}
body .about-section{--pale-wash:rgba(235,229,214,var(--pale-strength))}
body .work-section{
  --pale-wash:rgba(248,246,239,var(--pale-strength));
  --pale-extra:radial-gradient(circle at 95% 8%,rgba(202,174,103,.09),transparent 25%);
}
body .process-section{
  --pale-wash:rgba(251,250,245,var(--pale-strength));
  --pale-extra:radial-gradient(circle at 92% 0,rgba(215,222,205,.36),transparent 28%);
}
body .contact-section{--pale-wash:rgba(220,225,207,var(--pale-strength))}

body .services-main{--pale-wash:rgba(244,241,232,var(--pale-strength))}
body .s-explorer{--pale-wash:rgba(251,249,243,var(--pale-strength))}
body .s-index{--pale-wash:rgba(233,230,217,var(--pale-strength))}
body .s-contact{--pale-wash:rgba(231,234,223,var(--pale-strength))}

body.projects-page{--pale-wash:rgba(245,243,235,var(--pale-strength))}
body .collection{--pale-wash:rgba(247,245,238,var(--pale-strength))}

body .c-main,
body .c-hero--routes{--pale-wash:rgba(244,241,232,var(--pale-strength))}
body .c-brief{--pale-wash:rgba(250,248,242,var(--pale-strength))}

/* Phones and tablets don't support fixed backgrounds (iOS ignores them and
   stretches the photo over the whole section), so there it scrolls with
   the section instead. */
@media (hover:none) and (pointer:coarse){
  body .homepage,
  body .about-section,
  body .work-section,
  body .process-section,
  body .contact-section,
  body .services-main,
  body .s-explorer,
  body .s-index,
  body .s-contact,
  body.projects-page,
  body .collection,
  body .c-main,
  body .c-hero--routes,
  body .c-brief,
  body .legal{background-attachment:scroll}
}