/* The Help guide: animated scenes, captions and controls. Animations start when the stage gets .go. */
.help-head { max-width: 62ch; }
.help-wrap { margin-top: 1.4rem; display: grid; gap: .9rem; }
.help-stage { position: relative; min-height: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; padding: 1.4rem; }
.hs { display: grid; gap: 1rem; justify-items: center; align-content: center; width: 100%; position: relative; min-height: 280px; }
.hs.col { gap: 1.1rem; }
.hface { display: block; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--surface-2); border: 2px solid var(--surface); box-shadow: 0 10px 26px -14px rgba(30, 24, 10, .5); }
.hface .face-svg { display: block; width: 100%; height: 100%; }
.typed, .typed2 { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; }
.go .typed { animation: type 2.6s steps(32, end) .5s forwards; } .go .typed2 { animation: type2 2.4s steps(40, end) 1.2s forwards; }
@keyframes type { to { max-width: 32ch; } } @keyframes type2 { to { max-width: 60ch; } }
/* 1 */
.fake-in { display: flex; align-items: center; gap: .1rem; min-width: min(420px, 80%); background: #fff; border: 1.5px solid var(--ink); border-radius: 99px; padding: .8rem 1.2rem; font-size: 1.05rem; }
.caret { width: 2px; height: 1.2em; background: var(--ink); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.fake-btn { background: var(--ink); color: var(--accent-ink); border-radius: 99px; padding: .75rem 1.6rem; transition: transform .2s; }
.go .fake-btn { animation: press .5s 3.6s both; }
@keyframes press { 40% { transform: scale(.94); } 100% { transform: scale(1); box-shadow: 0 0 0 14px color-mix(in srgb, var(--ink) 0%, transparent); } }
.cur { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 70%, transparent); right: 34%; top: 58%; opacity: 0; }
.go .cur { animation: moveCur 1.1s 2.7s forwards; } @keyframes moveCur { from { opacity: 0; transform: translate(60px, 50px); } 30% { opacity: 1; } to { opacity: .9; transform: translate(0, 0); } }
/* 2 */
.badges { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .badges span { background: var(--ink); color: var(--accent-ink); border-radius: 99px; padding: .2rem .8rem; font-size: .78rem; }
.cast { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .cast figure { margin: 0; text-align: center; opacity: 0; } .cast .hface { width: 88px; height: 88px; }
.go .cast figure { animation: castIn .6s var(--spring) var(--d) both; } .cast figcaption { font-size: .82rem; margin-top: .3rem; }
.chips { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; } .chips span { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 99px; padding: .15rem .8rem; font-size: .82rem; opacity: 0; }
.go .chips span { animation: castIn .5s var(--spring) var(--d) both; }
/* 3 */
.hs.scene { min-height: 300px; align-content: stretch; } .scene .bg { position: absolute; inset: -1.4rem; } .scene .bg svg { width: 100%; height: 100%; }
.scene .door { position: absolute; left: 50%; top: 8%; width: 170px; height: 80%; margin-left: -85px; background: #b98b5e; border-radius: 3px; transform-origin: left center; z-index: 2; box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .08); }
.go .door { animation: doorOpen 1.2s .5s var(--ease-out) forwards; } @keyframes doorOpen { to { transform: perspective(600px) rotateY(-78deg); } }
.scene .who { position: absolute; left: 50%; top: 22%; margin-left: -62px; z-index: 1; opacity: 0; } .scene .who .hface { width: 124px; height: 124px; }
.go .who { animation: rise .8s 1.2s var(--ease-out) both; }
.bubble { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 3; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .5rem .9rem; font-family: var(--serif); font-style: italic; font-size: 1.1rem; max-width: 90%; opacity: 0; }
.go .bubble { animation: rise .5s 2s both; } .nar { position: absolute; left: 1rem; top: .6rem; z-index: 3; font-size: .78rem; color: var(--muted); font-style: italic; background: color-mix(in srgb, var(--surface) 85%, transparent); padding: .1rem .6rem; border-radius: 99px; }
/* 4 */
.micbig { width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: var(--accent-ink); display: grid; place-items: center; } .micbig svg { width: 34px; height: 34px; fill: currentColor; }
.go .micbig { animation: pulse 1.2s infinite; }
.wave { display: flex; gap: 4px; align-items: center; height: 60px; } .wave i { width: 5px; height: 12px; border-radius: 3px; background: var(--ink); opacity: .75; transform-origin: center; }
.go .wave i { animation: wv .9s ease-in-out infinite; animation-delay: calc(var(--i) * 45ms); } @keyframes wv { 50% { transform: scaleY(calc(1.5 + (var(--i) % 5))); } }
.said { font-family: var(--serif); font-style: italic; font-size: 1.15rem; min-height: 1.6em; }
/* 5 */
.live { display: grid; gap: .5rem; justify-items: center; } .lf { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: var(--surface-2); border: 3px solid var(--surface); box-shadow: 0 14px 34px -16px rgba(30, 24, 10, .5); }
.lf .face-svg { display: block; width: 100%; height: 100%; } .mood { background: var(--ink); color: var(--accent-ink); border-radius: 99px; padding: .1rem .7rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.meters, .rbars { display: grid; gap: .6rem; min-width: min(300px, 80%); } .m { display: grid; gap: .2rem; font-size: .85rem; } .tr { height: 6px; background: var(--line); border-radius: 6px; overflow: hidden; }
.fl { height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(.12); } .go .fl { animation: fillTo 1.4s var(--d) var(--spring) forwards; } @keyframes fillTo { to { transform: scaleX(var(--to)); } }
.stance { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; min-height: 1.4em; }
/* 6 */
.rep { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; justify-content: center; } .score { font-family: var(--serif); } .score b { font-size: 4.2rem; font-weight: 400; font-variant-numeric: tabular-nums; } .score span { color: var(--muted); }
.steal { max-width: 46ch; text-align: left; background: var(--accent-soft); border-radius: var(--radius-sm); padding: .8rem 1rem; font-family: var(--serif); font-style: italic; font-size: 1.1rem; opacity: 0; } .steal small { display: block; font: 600 .68rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.go .steal { animation: rise .6s 2.6s both; }
/* 7 */
.tips { display: grid; gap: .6rem; } .tips div { display: grid; background: var(--surface-2); border-radius: var(--radius-sm); padding: .6rem 1rem; opacity: 0; } .tips span { color: var(--muted); font-size: .88rem; } .go .tips div { animation: rise .5s var(--d) both; }
/* captions and controls */
.help-cap { margin: 0; padding: .9rem 1.1rem; background: var(--ink); color: color-mix(in srgb, var(--accent-ink) 55%, transparent); border-radius: var(--radius-sm); font-size: 1.02rem; line-height: 1.55; min-height: 5.2rem; }
.help-cap span { transition: color .15s; } .help-cap .said { color: var(--accent-ink); } .help-cap .now { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.help-ctl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .help-ctl .grow { flex: 1; }
.help-ctl .btn[aria-pressed="false"] { opacity: .55; }
#help-dots { display: flex; gap: .4rem; } #help-dots button { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; padding: 0; cursor: pointer; transition: transform .2s var(--spring), background-color .2s; }
#help-dots button.done { background: color-mix(in srgb, var(--ink) 40%, transparent); } #help-dots button.on { background: var(--ink); transform: scale(1.35); }
#help-title { font-family: var(--serif); font-size: 1.5rem; margin: 0; }
.helplink { background: none; border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; padding: 0; font-size: inherit; }
@media (prefers-reduced-motion: reduce) { .go .typed, .go .typed2 { animation: none; max-width: 60ch; } .go .door, .go .who, .go .bubble, .go .steal, .go .tips div, .go .cast figure, .go .chips span { animation: none; opacity: 1; } .go .door { transform: none; opacity: .2; } .go .fl { animation: none; transform: scaleX(var(--to)); } .go .wave i, .go .micbig { animation: none; } }