/* Demo kit: the overlay menu. The same menu on every demo (Karl, 2026-09-25); each demo only themes it.

   Built from measurements of the AgentFire "regalia" panel at 1440x900: a left panel 1050px wide, a page scrim to
   its right, nine primary links at 38px on a 50px pitch starting 162px from the top, three small links below,
   a right-aligned contact column ending 119px from the panel edge, four 40px social circles, and a 150px circle
   close button centred on the panel's right edge. Below 900px the panel is the whole screen and the close button
   sits inside it.

   Theme with custom properties (set them on :root or on .dm in the demo's CSS):
     --dm-bg          panel ground              (default #121619)
     --dm-ink         link and text colour       (default #fff)
     --dm-soft        labels and secondary text  (default rgba(255,255,255,.72))
     --dm-line        circle and rule colour     (default rgba(255,255,255,.28))
     --dm-accent      hover colour for links     (default = --dm-ink)
     --dm-font        display face for the nine primary links
     --dm-font-ui     face for the small links, labels and contact details
     --dm-size        primary link size          (default clamp(26px, 6.4vw, 38px))
     --dm-ls          primary link tracking      (default .052em)
     --dm-weight      primary link weight        (default 500)
     --dm-tt          primary link text-transform (default uppercase)
     --dm-scrim       page dimmer                (default rgba(8,10,12,.62))
*/

.dm { --dm-w: min(1050px, 100vw); position: fixed; inset: 0; z-index: 150; visibility: hidden; pointer-events: none; transition: visibility 0s linear .65s; }
.dm[data-open] { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.dm__scrim { position: absolute; inset: 0; background: var(--dm-scrim, rgba(8, 10, 12, .62)); opacity: 0; transition: opacity .55s ease; cursor: pointer; }
.dm[data-open] .dm__scrim { opacity: 1; }

.dm__panel { position: absolute; top: 0; bottom: 0; left: 0; width: var(--dm-w); display: grid; grid-template-columns: 1fr auto; align-items: stretch; column-gap: 40px;
  padding: clamp(96px, 18vh, 162px) max(24px, calc(var(--dm-w) * .113)) clamp(48px, 16vh, 150px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--dm-bg, #121619); color: var(--dm-ink, #fff); font-family: var(--dm-font-ui, inherit);
  transform: translateX(-100%); transition: transform .65s cubic-bezier(.77, 0, .18, 1); }
.dm[data-open] .dm__panel { transform: none; }

.dm__panel:focus { outline: none; }
.dm__nav { align-self: start; min-width: 0; }
.dm__primary, .dm__secondary, .dm__social { list-style: none; margin: 0; padding: 0; }
.dm__primary a { display: inline-block; padding: 1px 0; font-family: var(--dm-font, inherit); font-size: var(--dm-size, clamp(26px, 6.4vw, 38px)); font-weight: var(--dm-weight, 500);
  line-height: 1.263; letter-spacing: var(--dm-ls, .052em); text-transform: var(--dm-tt, uppercase); text-decoration: none; color: var(--dm-ink, #fff); transition: color .25s ease, transform .25s ease; }
.dm__secondary { margin-top: clamp(28px, 5.3vh, 48px); }
.dm__secondary a { display: inline-block; padding: 0; min-height: 26px; font-size: 13.2px; font-weight: 600; line-height: 26px; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; color: var(--dm-ink, #fff); transition: color .25s ease; }
.dm__primary a:hover, .dm__primary a:focus-visible { color: var(--dm-accent, var(--dm-ink, #fff)); transform: translateX(6px); }
.dm__secondary a:hover, .dm__secondary a:focus-visible { color: var(--dm-accent, var(--dm-ink, #fff)); }

.dm__contact { align-self: end; justify-self: end; text-align: right; }
.dm__contact dl { margin: 0; }
.dm__contact dl > div + div { margin-top: 26px; }
.dm__contact dt { font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; line-height: 1.6; color: var(--dm-ink, #fff); }
.dm__contact dd { margin: 3px 0 0; font-size: 14px; letter-spacing: .035em; line-height: 1.8; color: var(--dm-ink, #fff); font-style: normal; }
.dm__contact dd a { text-decoration: none; }
.dm__contact dd a:hover, .dm__contact dd a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.dm__social { display: flex; justify-content: flex-end; gap: 10px; margin-top: 44px; }
.dm__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--dm-line, rgba(255, 255, 255, .28)); color: var(--dm-ink, #fff); transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.dm__social a:hover, .dm__social a:focus-visible { background: var(--dm-ink, #fff); color: var(--dm-bg, #121619); border-color: var(--dm-ink, #fff); }
.dm__social svg { width: 18px; height: 18px; }

/* Close: a thin 150px circle centred on the panel's right edge, over the dimmed page. */
.dm__close { position: absolute; z-index: 3; top: 60px; left: calc(var(--dm-w) - 75px); display: grid; place-items: center; width: 150px; height: 150px; padding: 0; border-radius: 50%;
  border: 1px solid var(--dm-line, rgba(255, 255, 255, .28)); background: transparent; color: var(--dm-ink, #fff); opacity: 0; transform: scale(.6); transition: opacity .4s ease .3s, transform .5s cubic-bezier(.22, .61, .36, 1) .3s, background-color .25s ease, color .25s ease; }
.dm[data-open] .dm__close { opacity: 1; transform: none; }
.dm__close:hover, .dm__close:focus-visible { background: var(--dm-ink, #fff); color: var(--dm-bg, #121619); }
.dm__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.4; fill: none; }

/* Entrance: links rise in one after another once the panel is most of the way across. */
.dm__primary li, .dm__secondary li, .dm__contact dl > div, .dm__social { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
.dm[data-open] .dm__primary li, .dm[data-open] .dm__secondary li, .dm[data-open] .dm__contact dl > div, .dm[data-open] .dm__social { opacity: 1; transform: none; transition-delay: calc(.28s + var(--i, 0) * 45ms); }

@media (max-width: 899px) {
  .dm__panel { width: 100vw; grid-template-columns: 1fr; row-gap: 40px; padding: 88px max(24px, 6vw) 40px; }
  .dm__contact { justify-self: start; text-align: left; }
  .dm__social { justify-content: flex-start; }
  .dm__close { top: 18px; left: auto; right: max(16px, 4vw); width: 56px; height: 56px; }
  .dm__primary a { font-size: var(--dm-size, clamp(26px, 7.4vw, 38px)); }
}
@media (max-height: 560px) and (min-width: 900px) { .dm__panel { padding-top: 72px; } .dm__contact dl > div + div { margin-top: 14px; } .dm__social { margin-top: 24px; } }

@media (prefers-reduced-motion: reduce) {
  .dm, .dm__scrim, .dm__panel, .dm__close, .dm__primary li, .dm__secondary li, .dm__contact dl > div, .dm__social { transition: none !important; }
  .dm__primary li, .dm__secondary li, .dm__contact dl > div, .dm__social { opacity: 1; transform: none; }
}