/* The crest intro (public/intro.js), modelled on the IT Help Desk's: the gold crest draws itself in
   the middle of the screen, fills in, the section's name rises under it, then the crest flies into
   the sidebar logo. Shared by To-Dos and Meetings. */
.qas-intro {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: var(--bg, #f5f5f7); color: #9a7426; transition: background-color 0.45s ease, opacity 0.45s ease;
}
:root[data-theme="dark"] .qas-intro { color: #d4af5a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qas-intro { color: #d4af5a; } }
.qas-intro-crest { block-size: min(34vh, 220px); inline-size: auto; overflow: visible; }
.qas-intro-crest :is(path, rect, circle, ellipse, polygon, polyline, line) {
  fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 0.5; stroke-dasharray: 1; stroke-dashoffset: 1;
}
.qas-intro.drawing .qas-intro-crest :is(path, rect, circle, ellipse, polygon, polyline, line) {
  animation: qas-crest-draw 0.9s cubic-bezier(.4,0,.2,1) var(--d, 0ms) forwards, qas-crest-fill 0.45s ease-out calc(0.7s + var(--d, 0ms)) forwards;
}
.qas-intro-name {
  margin: 0; font: 700 1.25rem/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  letter-spacing: -0.02em; color: var(--text, #1d1d1f); opacity: 0;
}
.qas-intro.drawing .qas-intro-name { animation: qas-rise 0.5s ease-out 0.9s forwards; }
.qas-intro.leaving { background-color: transparent; pointer-events: none; }
.qas-intro.leaving .qas-intro-name { opacity: 0; transition: opacity 0.2s; animation: none; }
@keyframes qas-crest-draw { to { stroke-dashoffset: 0; } }
@keyframes qas-crest-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes qas-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }