/* Scene pages: one black-and-white photo from the approved pool in assets/js/scenes.js,
   film grain over it, and small dark-gray type in the lower right. Load after site.css.

   The values below are the fallback when JavaScript is off (the 996 Turbo v2 scene, JPEG
   only); scenes.js replaces them with the scene it picks. */
:root {
  --bg: #0b0b0b;
  /* The floors under the type average #7c7c7c to #949494. Dark grays rather than black:
     brand about 3:1 to 4:1 against them, the tagline a couple of shades darker */
  --brand-ink: #303030;
  --tagline-ink: #222222;
  --brand-size: clamp(1.1rem, 2.3vw, 2.75rem);
  --tint: 0;
  --scene-wide: url("/assets/img/scenes/996-turbo-v2-2560.jpg");
  --scene-narrow: url("/assets/img/scenes/996-turbo-v2-1280.jpg");
  --scene-portrait: url("/assets/img/scenes/996-turbo-v2-portrait-1080.jpg");
  --scene-pos-landscape: left center;
  --scene-pos-portrait: center bottom;
}

body.scene::before {
  background-image: var(--scene-wide);
  background-position: var(--scene-pos-landscape);
  filter: none;
}

@media (max-width: 1280px) and (orientation: landscape) {
  body.scene::before {
    background-image: var(--scene-narrow);
  }
}

@media (orientation: portrait) {
  body.scene::before {
    background-image: var(--scene-portrait);
    background-position: var(--scene-pos-portrait);
  }
}

body.scene::after {
  background: none;
}

/* Faint moving grain over the photo and the type */
html::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 10;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.45;
  mix-blend-mode: soft-light;
  animation: grain 1.2s steps(8) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-6%, 4%); }
  33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, -4%); }
  67% { transform: translate(7%, 3%); }
  83% { transform: translate(-5%, 6%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html::after {
    animation: none;
  }
}

/* Lower right, small */
body.scene .center {
  position: fixed;
  right: max(16px, 3.5vw);
  bottom: max(16px, 4.5vh);
  width: auto;
  max-width: none;
  margin: 0;
  text-align: right;
}

/* Dark type on a light floor: a faint light edge below each letter, as if pressed in,
   instead of the dark drop shadow used on dark backgrounds */
body.scene .cast {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.10);
}

body.scene .brand {
  margin: 0 0 0.3em;
  color: var(--brand-ink);
}

body.scene .tagline {
  margin: 0;
  /* Tracking leaves space after the last letter; pull it back so the right edges line up */
  margin-right: -0.12em;
  color: var(--tagline-ink);
  font-size: clamp(0.75rem, calc(var(--brand-size) * 0.38), 1.05rem);
}

/* scenes.js swaps in the scene's tagline once the page is parsed; hide the fallback text
   until then so it never flashes */
html[data-scene]:not([data-scene-ready]) [data-scene-tagline] {
  visibility: hidden;
}