/* OHR GAMES: gilt corner ornaments.
   js/og-corners.js adds one <span class="og-corners"> to panels, plates, tome covers, figures and any [data-corners]
   element, and sizes it to fit. Add data-no-corners to an element (or an ancestor) to leave it plain. */

span.og-corners.og-corners {
  position: absolute;
  inset: var(--oc-inset, 8px);
  z-index: 4;
  display: block;
  margin: 0;
  pointer-events: none;
  --oc: var(--oc-size, 64px);
  background:
    url(../images/ornament/corner-tl.png) 0 0 / var(--oc) var(--oc) no-repeat,
    url(../images/ornament/corner-tr.png) 100% 0 / var(--oc) var(--oc) no-repeat,
    url(../images/ornament/corner-bl.png) 0 100% / var(--oc) var(--oc) no-repeat,
    url(../images/ornament/corner-br.png) 100% 100% / var(--oc) var(--oc) no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 8px rgba(196, 165, 90, .2));
  opacity: var(--oc-op, .8);
  transition: opacity .5s var(--og-ease, ease), inset .5s var(--og-ease, ease), filter .5s var(--og-ease, ease);
}
span.og-corners[hidden] { display: none; }

/* framed text panels */
.panel > span.og-corners { --oc-max: 84; --oc-inset: 7px; --oc-op: .72; }
.panel:hover > span.og-corners { --oc-op: .95; }
@media (max-width: 760px) { .panel > span.og-corners { --oc-max: 58; --oc-inset: 5px; } }

/* image plates: quiet at rest, they wake and draw inward on hover, in step with the plate's own border */
.plate > span.og-corners { --oc-max: 104; --oc-inset: 10px; --oc-op: .42; }
.plate:hover > span.og-corners,
.plate:focus-visible > span.og-corners {
  --oc-inset: 14px; --oc-op: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 14px rgba(236, 217, 160, .38));
}

/* book covers in the downloads shelf: sit on the cover's tooled border */
.tome__cover > span.og-corners { --oc-max: 56; --oc-inset: 10px 10px 10px 22px; --oc-op: .9; }
/* the kicker sits in the top-left corner, so step it clear of the ornament */
.tome__cover.has-corners .tome__kind { padding-left: 30px; }
.tome:hover .tome__cover > span.og-corners { --oc-op: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9)) drop-shadow(0 0 10px rgba(236, 217, 160, .35)); }

/* illustrations: the image is vignetted, so the corners frame the box it fades into */
.og-cornerbox { position: relative; }
.og-cornerbox > span.og-corners { --oc-max: 92; --oc-inset: 2px; --oc-op: .78; }
.figure:hover .og-cornerbox > span.og-corners { --oc-op: 1; }

/* anything else that asks for them */
[data-corners] > span.og-corners { --oc-max: 120; }

@media (prefers-reduced-motion: reduce) {
  span.og-corners.og-corners { transition: none; }
}
@media print {
  span.og-corners.og-corners { display: none; }
}