/* Character renders (kernel/blocks.php renders(), Web_Scratchpad/me/renders_clean.py). A home block may stand one
   behind it (Admin > Layout, Appearance): the figure on its left or right, its lower part hidden behind the block and
   its upper part rising over the block's top edge; the block keeps that room above itself. */
.home-block.has-render { position: relative; --rh: 360px; --rv: 170px; padding-top: var(--rv); }
.home-block.is-render-small { --rh: 260px; --rv: 120px; }
.home-block.is-render-large { --rh: 480px; --rv: 230px; }
.home-block.has-render > :not(.block-render) { position: relative; z-index: 1; }
.block-render { position: absolute; top: 0; z-index: 0; width: auto; height: var(--rh); max-width: 70%; object-fit: contain; object-position: bottom; pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); animation: render-rise 900ms var(--ease, ease) backwards; }
.block-render.is-right { right: 5%; }
.block-render.is-left { left: 5%; }
@keyframes render-rise { from { opacity: 0; translate: 0 40px; } }
@media (max-width: 760px) {
  .home-block.has-render { --rh: 240px; --rv: 110px; }
}
@media (prefers-reduced-motion: reduce) { .block-render { animation: none; } }

/* a hero slide's character, standing on the side its words leave free, rising in as the slide shows */
.slide-render { position: absolute; bottom: 0; z-index: 1; width: auto; height: 94%; max-width: 46%; object-fit: contain; object-position: bottom; pointer-events: none;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.6)); opacity: 0; translate: 0 30px; transition: opacity 900ms var(--ease, ease), translate 1100ms var(--ease, ease); }
.slide.is-on .slide-render { opacity: 1; translate: 0 0; }
.slide-render.is-right { right: max(2%, calc((100% - 1200px) / 2)); }
.slide-render.is-left { left: max(2%, calc((100% - 1200px) / 2)); }
.slide-body { z-index: 2; }
@media (max-width: 760px) { .slide-render { height: 60%; max-width: 60%; opacity: 0.35; } .slide.is-on .slide-render { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .slide-render { transition: none; translate: none; } }

/* a menu panel's character (Admin > Appearance, kernel/view.php nav_render()): only gilded shows it, standing out past
   the panel's right or left edge and rising as the panel opens. In front it stands over the panel (the list keeps clear
   of it); behind, only what stands out past the edge shows (--out), clipped there, so a mirrored one is clipped on its
   other side */
.nav-drop-render { display: none; }
[data-skin='gilded'] .nav-drop { overflow: visible; }
[data-skin='gilded'] .nav-drop-render { --out: 96px; position: absolute; right: calc(-1 * var(--out)); bottom: 6px; z-index: 3; display: block; width: auto; height: 240px; max-width: 220px; object-fit: contain;
  object-position: bottom; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6)); opacity: 0; translate: 16px 24px; transition: opacity 400ms var(--ease, ease), translate 600ms var(--ease, ease); }
[data-skin='gilded'] .nav-drop-render.is-left { right: auto; left: calc(-1 * var(--out)); translate: -16px 24px; }
[data-skin='gilded'] .nav-drop-render.is-behind { --out: 120px; z-index: 0; translate: 0 24px; clip-path: inset(0 0 0 calc(100% - var(--out))); }
[data-skin='gilded'] .nav-drop-render.is-behind:is(.is-left:not(.is-flip), .is-right.is-flip) { clip-path: inset(0 calc(100% - var(--out)) 0 0); }
[data-skin='gilded'] .nav-drop-render.is-left.is-flip.is-behind { clip-path: inset(0 0 0 calc(100% - var(--out))); }
[data-skin='gilded'] .nav-drop.is-open .nav-drop-render { opacity: 1; translate: 0 0; }
[data-skin='gilded'] .nav-drop-list { position: relative; z-index: 1; }
[data-skin='gilded'] .nav-drop:has(> .nav-drop-render.is-front.is-right) .nav-drop-list { padding-right: 110px; }
[data-skin='gilded'] .nav-drop:has(> .nav-drop-render.is-front.is-left) .nav-drop-list { padding-left: 110px; }
@media (max-width: 1080px) { [data-skin='gilded'] .nav-drop-render { display: none; } [data-skin='gilded'] .nav-drop .nav-drop-list { padding-right: 0; padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { [data-skin='gilded'] .nav-drop-render { transition: none; translate: none; } }

/* in front of the block (over its panel) instead of behind it, and mirrored */
.home-block.has-render > .block-render.is-front { z-index: 2; }
:is(.block-render, .slide-render, .nav-drop-render).is-flip { scale: -1 1; }