/* Critical Point Vision Site: hero.css (home only)
 *
 * Two things the hero needs that sections.css does not carry:
 *
 * 1. The backdrop under the particle field, chosen by
 *    html[data-hero-backdrop="none|paper|wash|photo"] (a Tweaks control, pref
 *    heroBackdrop). It sits behind .hero__field in the stacking order, so the
 *    particles always draw on top. The light theme only: in the dark theme the
 *    hero keeps its ink ground whatever the pick, so a paper tint never sits
 *    under pale particles.
 * 2. Where the stat pair sits under the hero body.
 *
 * Colours here are the three the design calls for (#F5F3F2 paper, #FBE9E1
 * rust tint); they are tint values, not new brand colours, so they live in
 * this file rather than in tokens.css.
 */

/* ---------------------------------------------------------------- */
/* fallback image                                                    */
/* ---------------------------------------------------------------- */

/* The still has no src until hero-field.js finds the canvas cannot run, so
   an image with no source must not paint its alt text over the hero. */
.hero__fallback:not([src]) {
  visibility: hidden;
}

/* ---------------------------------------------------------------- */
/* backdrop                                                          */
/* ---------------------------------------------------------------- */

.hero__backdrop {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

html[data-theme="light"][data-hero-backdrop="paper"] .hero__backdrop,
html[data-theme="light"][data-hero-backdrop="wash"] .hero__backdrop,
html[data-theme="light"][data-hero-backdrop="photo"] .hero__backdrop {
  display: block;
}

/* paper: a warm off-white ground, with a faint lift behind the field. The
   lift is a long, many-stop radial so there is no visible band, and a very
   fine grain (an inline SVG noise tile, not a file) dithers what is left. */
html[data-theme="light"][data-hero-backdrop="paper"] .hero__backdrop,
html[data-theme="light"][data-hero-backdrop="photo"] .hero__backdrop {
  background-color: #F5F3F2;
}

html[data-theme="light"][data-hero-backdrop="paper"] .hero__backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 46% 62% at 66% 54%,
      rgb(255 255 255 / 0.62) 0%,
      rgb(255 255 255 / 0.56) 12%,
      rgb(255 255 255 / 0.46) 26%,
      rgb(255 255 255 / 0.34) 40%,
      rgb(255 255 255 / 0.22) 54%,
      rgb(255 255 255 / 0.12) 68%,
      rgb(255 255 255 / 0.05) 82%,
      rgb(255 255 255 / 0) 100%
    );
}

html[data-theme="light"][data-hero-backdrop="paper"] .hero__backdrop::after,
html[data-theme="light"][data-hero-backdrop="photo"] .hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* wash: a rust tint on the right third, straight edge on the left, deepening
   toward the right edge. It stays under the particles. */
html[data-theme="light"][data-hero-backdrop="wash"] .hero__backdrop::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 66.667%;
  right: 0;
  background: linear-gradient(
    to right,
    rgb(251 233 225 / 0.35) 0%,
    rgb(251 233 225 / 0.62) 30%,
    #FBE9E1 70%
  );
}

/* photo: the graduation photograph at 12% under the paper ground. If the file
   is missing the paper ground still shows. */
html[data-theme="light"][data-hero-backdrop="photo"] .hero__backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/photos/06-graduation-web.jpg");
  background-size: cover;
  background-position: 70% 40%;
  background-repeat: no-repeat;
  opacity: 0.12;
}

/* Under 900px the field already fades behind the text; the wash moves to the
   whole lower half so it still reads as a tint rather than a stripe. */
@media (max-width: 900px) {
  html[data-theme="light"][data-hero-backdrop="wash"] .hero__backdrop::before {
    left: 0;
    top: 45%;
    background: linear-gradient(
      to bottom,
      rgb(251 233 225 / 0) 0%,
      rgb(251 233 225 / 0.7) 45%,
      #FBE9E1 100%
    );
  }
}

/* ---------------------------------------------------------------- */
/* subheader switch (Tweaks "Hero subheader", pref heroSub)           */
/* ---------------------------------------------------------------- */

/* Two subheaders are in the markup; html[data-hero-sub] shows one. Short
   is the default, so a page with no attribute shows the short line. */
.hero__body--long { display: none; }
html[data-hero-sub="long"] .hero__body--short { display: none; }
html[data-hero-sub="long"] .hero__body--long { display: block; max-width: 40rem; }