/* Gallery's retro theme: the house look over the glass (plan section 7,
 * D5; willperlak.com/docs/standards/theme.md, "Retro"; the landing page is
 * the reference). Every rule is under html:not([data-theme="clean"]), so a
 * page with no data-theme, which is every page with scripts off, wears it:
 * the no-script look is this one, finished.
 *
 * The starfield over a dimmed backdrop, Comic Sans (Comic Relief from the
 * edge's /fonts/ where Comic Sans MS is missing), square corners (Kit's
 * retro radii are 0), the 3px ridge purple frames on the glass surfaces and
 * the cards, the cyan double border on the photo, the cyan frame on the
 * caption strips. The blur stays; the radius and the shadows go.
 *
 * The glass tokens for retro (clean.css has clean's and says what each is):
 * the tint and the veil clear 4.5:1 for --text on the backdrop and for
 * --text-muted and --link on glass over the worst photo, measured from
 * rendered pixels (docs/LOOK.md). */

@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/comic-relief-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comic-relief-latin-700-normal.woff2") format("woff2");
}

:root:not([data-theme="clean"]) {
  --glass: rgba(26, 0, 42, 0.72);
  --glass-strong: rgba(26, 0, 42, 0.92);
  --glass-line: #cc00ff;
  --glass-blur: 14px;
  --backdrop-dim: rgba(0, 0, 16, 0.66);
  --kind-location: #00ccff;
  --kind-species: #00ff00;
  --kind-subject: #ffee00;
  --kind-month: #ff77cc;
  /* The life list's silhouettes, pale on the dark tile (FEAT-gallery-4). */
  --dex-silhouette-filter: brightness(0) invert(1);
  --dex-silhouette-opacity: 0.5;
  --dex-unseen-figure: #0d0018;
}

html:not([data-theme="clean"]) .backdrop {
  filter: blur(calc(var(--glass-blur) * 3)) saturate(1.4);
  transition: opacity var(--duration-slow) var(--ease-standard);
}

/* The starfield, drawn in CSS as the landing page draws it, in the veil
 * over the backdrop. Still: nothing here twinkles. */
html:not([data-theme="clean"]) body::after {
  background:
    radial-gradient(1px 1px at 10% 20%, var(--text), transparent),
    radial-gradient(1px 1px at 25% 65%, var(--text), transparent),
    radial-gradient(2px 2px at 35% 15%, var(--text), transparent),
    radial-gradient(1px 1px at 45% 80%, var(--text), transparent),
    radial-gradient(1px 1px at 55% 35%, var(--text), transparent),
    radial-gradient(2px 2px at 65% 55%, var(--text), transparent),
    radial-gradient(1px 1px at 75% 10%, var(--text), transparent),
    radial-gradient(1px 1px at 85% 75%, var(--text), transparent),
    radial-gradient(2px 2px at 95% 40%, var(--text), transparent),
    radial-gradient(1px 1px at 5% 90%, var(--text), transparent),
    radial-gradient(1px 1px at 15% 45%, var(--border-alt), transparent),
    radial-gradient(1px 1px at 30% 95%, var(--text), transparent),
    radial-gradient(2px 2px at 50% 5%, var(--focus), transparent),
    radial-gradient(1px 1px at 70% 85%, var(--text), transparent),
    radial-gradient(1px 1px at 90% 20%, var(--text), transparent),
    var(--backdrop-dim);
}

html:not([data-theme="clean"]) .glass {
  border: 3px ridge var(--border);
  background: var(--glass);
  color: var(--text);
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
}

@supports not (backdrop-filter: blur(1px)) {
  html:not([data-theme="clean"]) .glass {
    background: var(--glass-strong);
  }
}

html:not([data-theme="clean"]) body[data-drawer="open"] .sidebar {
  background: var(--glass-strong);
}

html:not([data-theme="clean"]) .appearance-panel {
  border: 3px ridge var(--border);
}

/* The frames: purple ridge on every card, cyan on the strip, the cyan
 * double border on the photo. */
html:not([data-theme="clean"]) .card {
  background: var(--surface);
  box-shadow: none;
}

html:not([data-theme="clean"]) .card::after {
  border: 3px ridge var(--border);
}

html:not([data-theme="clean"]) .card:not(.card--wide, .card-hero) .caption {
  border: 2px solid var(--border-alt);
}

html:not([data-theme="clean"]) .card--wide .caption,
html:not([data-theme="clean"]) .card-hero .caption {
  border-top: 2px solid var(--border-alt);
}

html:not([data-theme="clean"]) .frost {
  opacity: 0.3;
  filter: blur(8px) saturate(1.5);
  transform: scale(1.4);
}

html:not([data-theme="clean"]) .shot img {
  outline: 4px double var(--border-alt);
  box-shadow: none;
}

html:not([data-theme="clean"]) .browse-link,
html:not([data-theme="clean"]) .appearance-toggle,
html:not([data-theme="clean"]) .back,
html:not([data-theme="clean"]) .pager a,
html:not([data-theme="clean"]) .pager-top a,
html:not([data-theme="clean"]) .grid-pager a {
  border: 2px outset var(--border);
}

/* Pressed while open: the outset frame turns inset. */
html:not([data-theme="clean"]) .browse-link[aria-expanded="true"],
html:not([data-theme="clean"]) .appearance-toggle[aria-expanded="true"] {
  border-style: inset;
}

html:not([data-theme="clean"]) .chip {
  border-color: var(--border-alt);
}

@media (hover: hover) {
  html:not([data-theme="clean"]) .card:hover::after {
    border-color: var(--border-alt);
  }

  html:not([data-theme="clean"]) .side-link:not([aria-current]):hover,
  html:not([data-theme="clean"]) .side-index:not([aria-current]):hover {
    background: var(--surface-alt);
    color: var(--text);
  }
}