/* The identity mark: the small pot-and-steam badge in the sidebar, and the
   full curtain-stage banner on the pages someone actually looks at first
   (login, register). One set of curtain/steam keyframes, used by both.

   Loaded by the pages that render either one: shell.html (the sidebar mark,
   on every logged-in page) and the auth pages (the banner). */

/* -- the sidebar mark ---------------------------------------------------- */

.sidebar .app-mark { width: 2rem; height: 2rem; flex: none; border-radius: 50%; }

.app-mark .mark-backdrop { fill: var(--stage-bg); }

/* At 32px a curtain gag can't land -- the pot alone is the right mark at
   this size, so the curtain panels stay out of its way entirely instead of
   hiding it behind a hover-only reveal nobody on a touch device can reach. */
.app-mark .curtain-panel { display: none; fill: var(--curtain); }

/* The pot's steam curling, as a hover/focus flourish only -- nothing in
   persistent chrome (this mark sits on every page) should animate
   unprompted forever. */
.app-mark .steam-curl { transform-box: fill-box; transform-origin: center bottom; }
.app-name:hover .app-mark .steam-curl,
.app-name:focus-visible .app-mark .steam-curl { animation: brand-mark-sway 3s ease-in-out infinite; }
.app-name:hover .app-mark .steam-curl.c1,
.app-name:focus-visible .app-mark .steam-curl.c1 { animation-duration: 3.2s; }
.app-name:hover .app-mark .steam-curl.c2,
.app-name:focus-visible .app-mark .steam-curl.c2 { animation-duration: 2.6s; animation-delay: -0.6s; }
.app-name:hover .app-mark .steam-curl.c3,
.app-name:focus-visible .app-mark .steam-curl.c3 { animation-duration: 3.6s; animation-delay: -1.1s; animation-direction: reverse; }
.app-mark .steam-flourish { transform-box: fill-box; transform-origin: center; }
.app-name:hover .app-mark .steam-flourish,
.app-name:focus-visible .app-mark .steam-flourish { animation: brand-mark-spin 1.8s linear 1; }
@media (prefers-reduced-motion: reduce) {
  .app-mark .steam-curl, .app-mark .steam-flourish { animation: none; }
}

/* -- brand banner --------------------------------------------------------
   The marquee wordmark over a curtain stage -- used on the pages that are
   the theatre entrance (login, register), not stamped on every page in the
   shell, where the sidebar's small badge already covers wayfinding.

   Parted at rest, not closed: the pot and its steam are visible with no
   interaction, on every device, including a kitchen tablet that can never
   trigger :hover. Hovering or focusing just finishes the reveal. */

.brand-banner { max-width: 22rem; margin: 0 auto 2rem; text-align: center; color: var(--accent); }
.brand-banner .word {
  display: block; font: 700 clamp(1.9rem, 5vw, 2.5rem)/1 ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  color: var(--accent); letter-spacing: .01em;
}
.brand-banner .swash { width: 65%; height: 12px; margin: .4rem auto 1rem; display: block; }

.stage {
  position: relative; width: 100%; aspect-ratio: 16 / 6; color: var(--accent);
  background: var(--stage-bg); border-radius: 6px; overflow: hidden; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.12);
}
.stage-valance { position: absolute; top: 0; left: 0; width: 100%; height: 18px; z-index: 3; pointer-events: none; }
/* Solid from the stage's own top edge -- no transparent strip between the
   box's shadowed corner and where the curtain fabric starts -- and the
   valance (drawn above, z-index 3) overlaps the curtain instead of a gap. */
.stage-reveal {
  position: absolute; inset: 0; z-index: 1; background: var(--stage-bg);
  display: flex; align-items: center; justify-content: center;
}
.stage-reveal svg { height: 82%; width: auto; aspect-ratio: 1; }
.stage-panel {
  position: absolute; top: 0; bottom: 0; width: 54%; z-index: 2; background-color: var(--curtain);
  background-image: repeating-linear-gradient(100deg, rgba(0,0,0,.16) 0 4px, rgba(255,255,255,.05) 4px 8px, transparent 8px 24px);
  transition: transform 0.85s cubic-bezier(.65, 0, .35, 1);
}
.stage-panel-l { left: 0; transform-origin: left; border-right: 2px solid rgba(0,0,0,.35); transform: translateX(-34%); }
.stage-panel-r { right: 0; transform-origin: right; border-left: 2px solid rgba(0,0,0,.35); transform: translateX(34%); }
.stage-knot { position: absolute; bottom: 14%; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.stage-panel-l .stage-knot { right: 6px; }
.stage-panel-r .stage-knot { left: 6px; }
.stage:hover .stage-panel-l, .stage:focus-visible .stage-panel-l { transform: translateX(-46%); }
.stage:hover .stage-panel-r, .stage:focus-visible .stage-panel-r { transform: translateX(46%); }
.stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .stage-panel { transition: none; }
}

/* The steam is already revealed at rest, so unlike the sidebar mark it's
   allowed to keep moving -- this is the one animation a settled page
   should still show. */
.stage-reveal .steam-curl { transform-box: fill-box; transform-origin: center bottom; animation: brand-mark-sway 3s ease-in-out infinite; }
.stage-reveal .steam-curl.c1 { animation-duration: 3.2s; }
.stage-reveal .steam-curl.c2 { animation-duration: 2.6s; animation-delay: -0.6s; }
.stage-reveal .steam-curl.c3 { animation-duration: 3.6s; animation-delay: -1.1s; animation-direction: reverse; }
.stage-reveal .steam-flourish { transform-box: fill-box; transform-origin: center; animation: brand-mark-spin 1.8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .stage-reveal .steam-curl, .stage-reveal .steam-flourish { animation: none; }
}

@keyframes brand-mark-sway {
  0%, 100% { transform: rotate(-5deg) scaleY(0.98); }
  50% { transform: rotate(5deg) scaleY(1.02); }
}
@keyframes brand-mark-spin { to { transform: rotate(360deg); } }