/*
  The Plains of Sedia scene (layouts/_partials/docs/inject/body.html) and the opening view over it
  (layouts/_partials/docs/inject/content-before.html). The candlelit tabletop fills the window
  behind the whole page and stays put. The top of the page column is a clear window onto it with
  the bone die turning in the middle and the page's title (the site's on the home page) leading,
  the same height on every page. Below it a veil of the page's color thickens as the reader scrolls, and the menu, page
  and contents columns are a little translucent, so the painting shows at the edges and through
  them while long prose sits on a near-solid page. Plain CSS, outside the theme's Sass, so it
  needs no extended Hugo.
*/

body {
  /* The opening view's height, the same on every page, which the veil clears and the page
     column's own color waits for. */
  --plains-hero: clamp(320px, 52vh, 480px);
  /* What sits above the opening view's own content: nothing beside the menu, the top bar on
     phones. */
  --plains-nav: 0px;
}

html {
  background: var(--body-background);
}

/* The body stays clear: the scene sits behind the page on the html's background, and a
   background here would cover it. */
body {
  background: none;
}

.plains-scene {
  /* The painting's size as it covers the window, and where its candle lands, the same way
     static/js/backdrop.js fits it (the candle is its focus), for the light to sit on it. */
  --paint-w: max(100cqw, 100cqh * 1600 / 679);
  --paint-h: max(100cqh, 100cqw * 679 / 1600);
  --light-x: calc(
    clamp(100cqw - var(--paint-w), 50cqw - 0.94 * var(--paint-w), 0px) + 0.94 * var(--paint-w)
  );
  --light-y: calc(
    clamp(100cqh - var(--paint-h), 50cqh - 0.25 * var(--paint-h), 0px) + 0.25 * var(--paint-h)
  );
  position: fixed;
  inset: 0;
  z-index: -1;
  container-type: size;
  background: #14171b;
  pointer-events: none;
}

.plains-backdrop,
.plains-scene-glow,
.plains-scene-motes,
.plains-scene-veil {
  position: absolute;
  inset: 0;
}

.plains-backdrop canvas,
.plains-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 94% 25%;
}

.plains-backdrop img[hidden] {
  display: none;
}

.plains-backdrop canvas {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.plains-backdrop canvas.ready {
  opacity: 1;
}

/* Light on the painting itself, so it stays with it as the page scrolls: a shade on the left
   where the menu and titles sit, the candle warming the table around it, and the edges falling
   into dark. */
.plains-scene-glow {
  background:
    linear-gradient(90deg, rgba(14, 16, 20, 0.55) 0%, rgba(14, 16, 20, 0.2) 40%, transparent 60%),
    radial-gradient(
      320px 260px at var(--light-x) var(--light-y),
      rgba(255, 176, 92, 0.24),
      transparent 70%
    ),
    radial-gradient(ellipse 90% 90% at 55% 45%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

/* Dust and the odd spark drifting up through the candlelight. The mask stays put while a tall
   layer of dots slides up 600px under it and starts over; every tile's height divides 600. */
.plains-scene-motes {
  overflow: hidden;
  mask-image: radial-gradient(
    280px 420px at var(--light-x) calc(var(--light-y) + 120px),
    #000,
    transparent
  );
}

.plains-scene-motes::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% + 600px);
  opacity: 0.7;
  background-image:
    radial-gradient(circle, rgba(255, 190, 130, 0.9) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255, 225, 190, 0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 160, 90, 0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 210, 160, 0.7) 0 1px, transparent 1.5px);
  background-size:
    370px 300px,
    230px 200px,
    530px 600px,
    290px 150px;
  background-position:
    43px 61px,
    127px 13px,
    261px 187px,
    11px 97px;
  animation: plains-scene-motes 90s linear infinite;
}

@keyframes plains-scene-motes {
  to {
    transform: translateY(-600px);
  }
}

/* Barely there over the opening view at the top, near solid below it once the reader scrolls. */
.plains-scene-veil {
  --s: var(--scrolled, 0);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--body-background) calc(6% + var(--s) * 80%), transparent) 0%,
    color-mix(in srgb, var(--body-background) calc(16% + var(--s) * 74%), transparent)
      var(--plains-hero),
    color-mix(in srgb, var(--body-background) 92%, transparent) calc(var(--plains-hero) + 240px)
  );
}

/* The theme's columns, a little translucent over the scene. The menu and contents are fixed
   panels the height of the window, clearer at the top of the page and settling as the reader
   scrolls; the page column is clear through the opening view, then takes the page's color. */
.book-menu,
.book-toc {
  background: none;
  border: 0;
}

.book-menu .book-menu-content,
.book-toc .book-toc-content {
  background: color-mix(
    in srgb,
    var(--body-background) calc(62% + var(--scrolled, 0) * 26%),
    transparent
  );
  backdrop-filter: blur(8px);
}

.book-menu .book-menu-content {
  box-shadow: inset -1px 0 var(--gray-100);
}

.book-toc .book-toc-content {
  box-shadow: inset 1px 0 var(--gray-100);
}

.book-page {
  background: linear-gradient(
    180deg,
    transparent calc(var(--plains-hero) - 56px),
    color-mix(in srgb, var(--body-background) 78%, transparent) calc(var(--plains-hero) + 24px)
  );
}

/* The opening view: out to the edges of the page column, through the theme's .book-page
   padding, with the page's title (the site's on the home page) and the die. */
.plains-opening {
  --die: min(calc(var(--plains-hero) - var(--plains-nav) - 56px), 200px);
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--plains-hero);
  margin: -2rem -2.5rem 2rem;
  padding: var(--plains-nav) 2.5rem 0;
  container-type: inline-size;
}

.plains-opening-text {
  position: relative;
  z-index: 1;
  max-width: calc(100% - var(--die) - 24px);
}

.plains-opening-title,
.plains-opening-subtitle {
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.plains-opening-title {
  font-family: var(--font-heading, 'Alegreya', Georgia, serif);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: #f3e7cf;
}

.plains-opening-subtitle {
  margin-top: 0.35rem;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: #d9b86a;
}

.plains-opening .plains-opening-name {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #efe3c8;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.plains-opening .plains-opening-name span {
  color: #d9b86a;
}

.plains-opening .plains-opening-name:hover {
  text-decoration: underline;
}

.plains-opening-page {
  margin: 0.15rem 0 0;
  font-family: var(--font-heading, 'Alegreya', Georgia, serif);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: #f3e7cf;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  overflow-wrap: anywhere;
}

/* On the reading pages the die turns beside the title, on the right of the view. It is the still
   until static/js/hero-model.js swaps in the model-viewer, which shows the same still on a clear
   ground until the model loads. */
.plains-opening-die {
  --poster-color: transparent;
  display: block;
  position: absolute;
  top: calc(var(--plains-nav) + (var(--plains-hero) - var(--plains-nav)) / 2);
  right: 6%;
  width: var(--die);
  height: var(--die);
  transform: translateY(-50%);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));
}

/* Every page: the title (the site's on the home page) leads the view and the die turns in the
   middle of the rest. */
.plains-opening-home {
  --lead: 120px;
  --die: min(calc(var(--plains-hero) - var(--plains-nav) - var(--lead) - 24px), 360px);
  align-items: flex-start;
  padding-top: calc(var(--plains-nav) + 2rem);
}

.plains-opening-home .plains-opening-text {
  max-width: none;
}

.plains-opening-home .plains-opening-die {
  top: calc(
    var(--plains-nav) + var(--lead) + (var(--plains-hero) - var(--plains-nav) - var(--lead)) / 2
  );
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6));
}

/* The view leads with the page's title (the site's on the home page); keep the article's copy of
   it for screen readers and the outline, out of sight. */
.book-kind-home .book-article > h1:first-child,
.book-page:has(.plains-opening-titled) .book-article > h1:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A narrow page column (a small window, or the menu and contents squeezing it) keeps the titles
   a little smaller. */
@container (max-width: 560px) {
  .plains-opening-title {
    font-size: 2rem;
  }

  .plains-opening-subtitle {
    font-size: 1rem;
  }

  .plains-opening-page {
    font-size: 1.85rem;
  }
}

@media screen and (max-width: 64rem) {
  .plains-opening {
    margin: -1.5rem -1.5rem 1.5rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

/* The theme's mobile layout (below 56rem): the menu folds away behind the top bar, which becomes
   the opening view's top row over the painting, and the contents drop down from it. */
@media screen and (max-width: 56rem) {
  body {
    --plains-nav: 64px;
  }

  .book-page {
    position: relative;
  }

  .book-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    margin: 0;
    padding: 0 1.5rem;
    background: none;
    border: 0;
  }

  .book-header > .flex {
    height: var(--plains-nav);
  }

  .book-header label {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
  }

  .book-header h3 {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  }

  /* The contents, when open, over the view and the page. */
  .book-header aside {
    max-height: 60vh;
    overflow-y: auto;
    margin: 0 0 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    background: color-mix(in srgb, var(--body-background) 94%, transparent);
    backdrop-filter: blur(8px);
  }

  .book-menu .book-menu-content {
    background: color-mix(in srgb, var(--body-background) 94%, transparent);
  }

  /* A soft shade at the top for the top bar to read on, fading well before the view ends. */
  .plains-opening::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 160px;
    background: linear-gradient(
      180deg,
      rgba(14, 16, 20, 0.7) 0,
      rgba(14, 16, 20, 0.25) 90px,
      transparent 160px
    );
    pointer-events: none;
  }

  .plains-opening-home {
    --lead: 92px;
    padding-top: calc(var(--plains-nav) + 0.5rem);
  }

  .plains-opening-page {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 40rem) {
  body {
    --plains-hero: clamp(260px, 40vh, 340px);
  }

  .plains-opening-die {
    right: 4%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plains-backdrop canvas {
    transition: none;
  }

  .plains-scene-motes::before {
    animation: none;
  }
}

/* Paper gets the words alone: no scene, no opening view, and the article's own title back. */
@media print {
  .plains-scene,
  .plains-opening {
    display: none;
  }

  .book-page {
    background: none;
  }

  .book-kind-home .book-article > h1:first-child,
  .book-page:has(.plains-opening-titled) .book-article > h1:first-child {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}