/* shared/stage.css — the lit, rounded hero stage with a living canvas scene
   behind the title (library/banner.js), shared by the Simulator Library and
   the subject pages (guideline §5.14). The fade keeps the text side dark; the
   glass caption names the scene and re-enters on every change. */

.lib-hero {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(closest-side at 78% 50%, rgba(45, 212, 191, .07), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%), #0b1017;
  border: 1px solid var(--home-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px -36px rgba(0, 0, 0, .8);
}
.lib-hero canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lib-hero-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 16, 23, .96) 0%, rgba(11, 16, 23, .8) 36%, rgba(11, 16, 23, .12) 62%, rgba(11, 16, 23, 0) 78%);
}

/* The caption names the scene; it re-enters on every subject change. */
.lib-banner-cap {
  --cap: var(--accent);
  position: absolute;
  left: 28px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: min(calc(100% - 56px), 520px);
  margin: 0;
  padding: 9px 16px 10px 18px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--home-glass);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--home-line);
}
.lib-banner-cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cap), color-mix(in srgb, var(--cap) 35%, #e0f2fe));
  transform-origin: 50% 0;
}
.lib-cap-title { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--text); }
.lib-cap-desc { font-size: .8rem; line-height: 1.4; color: var(--home-ink); }
.lib-banner-cap.is-in::before { animation: libCapBar .55s cubic-bezier(.2, .8, .2, 1) both; }
.lib-banner-cap.is-in .lib-cap-title { animation: libCapUp .5s cubic-bezier(.2, .8, .2, 1) .08s both; }
.lib-banner-cap.is-in .lib-cap-desc { animation: libCapUp .5s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes libCapBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes libCapUp { from { opacity: 0; transform: translateY(8px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }

/* Tablet: the scene runs full width under an even fade */
@media (max-width: 990px) {
  .lib-hero-fade { background: linear-gradient(180deg, rgba(11, 16, 23, .86) 0%, rgba(11, 16, 23, .66) 100%); }
}
@media (max-width: 720px) {
  .lib-hero { min-height: 0; border-radius: 20px; }
  .lib-banner-cap { left: 12px; right: 12px; bottom: 10px; max-width: none; padding: 7px 12px 8px 14px; }
  .lib-cap-title { font-size: .9rem; }
  .lib-cap-desc { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-banner-cap.is-in::before, .lib-banner-cap.is-in .lib-cap-title, .lib-banner-cap.is-in .lib-cap-desc { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .lib-banner-cap { background: #141a26; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .lib-hero-fade { background: rgba(11, 16, 23, .9); }
}