/* Deltas for the active listening flow (/doorstops/listen).

   The step system comes from bathroom-flow.css, repainted for the zine by
   components/flow/flow-css.js; this file adds the intro band, the moves list,
   the "try it for real" checklist and the practice conversation (lr-, drawn
   by app/doorstops/listen/roleplay.js). Inside a step the step is the only
   box: the moves are divided by rules, not cards. Scoped under .ls. */

/* ------------------------------------------------------------ the lead
   Three people talking past each other: one yaps, one rages, one shuts
   down. A black bar wipes across each bubble and all three come back saying
   LISTEN. The resting styles are the END state (so reduced motion and the
   no-animation case just show LISTEN); the animations under .is-play start
   from the noisy state with `both` fill. Each person's --d staggers them,
   and --swap is when the bar covers the bubble and the words change. */

.ls .ls-lead .bf-hero-inner { max-width: 980px; }
.ls .ls-crowd { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 40px); margin: 0 auto 26px; }
.ls .ls-person { --d: 0s; --swap: calc(3.1s + var(--d)); display: flex; flex-direction: column; align-items: center; width: clamp(100px, 27vw, 190px); margin: 0; }
.ls .ls-person.is-rage { --d: .18s; --bg0: #FDE7E0; }
.ls .ls-person.is-shut { --d: .36s; --bg0: #E6ECFF; }
.ls .ls-person.is-yap { --bg0: #FDF3D8; }
.ls .ls-person svg { display: block; width: 72%; height: auto; }

.ls .ls-lead p.ls-bubble { position: relative; width: 100%; margin: 0 0 14px; min-height: 0; }
/* the tail */
.ls .ls-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: #3ECFB0;
  border-right: 3px solid #16130f;
  border-bottom: 3px solid #16130f;
  transform: rotate(45deg);
}
.ls .ls-bubble-in {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3.4em;
  padding: 10px 8px;
  border: 3px solid #16130f;
  background: #3ECFB0;
  box-shadow: 4px 4px 0 #16130f;
  overflow: hidden;
  font-family: var(--dl-font-display);
  font-weight: var(--dl-fw-bold);
  font-size: clamp(12px, 2.4vw, 19px);
  line-height: 1.15;
  letter-spacing: .02em;
  text-align: center;
}
.ls .ls-bubble-in > span { grid-area: 1 / 1; }
.ls .ls-say { visibility: hidden; }
.ls .ls-listen { font-size: 1.25em; }
/* the censor bar */
.ls .ls-bubble-in::after { content: ''; position: absolute; inset: 0; background: #16130f; transform: translateX(-101%); }

.ls .ls-p-head { transform-box: fill-box; transform-origin: 50% 100%; }
.ls .ls-p-yap { transform-box: fill-box; transform-origin: center; transform: scaleY(.3); }
.ls .ls-p-steam { opacity: 0; }

.ls .ls-lead .bf-title.ls-lead-title { max-width: 20ch; margin: 0 auto 22px; font-size: clamp(28px, 4.6vw, 50px); line-height: 1.1; }
.ls .ls-lead-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ls .ls-lead button.ls-replay { font-size: 14px; }

.ls .ls-lead.is-play .ls-person { animation: ls-person-in .45s cubic-bezier(.3, 1.5, .6, 1) var(--d) both; }
.ls .ls-lead.is-play .ls-bubble { animation: ls-bubble-in .35s cubic-bezier(.3, 1.6, .6, 1) calc(.5s + var(--d) * 2) both; }
.ls .ls-lead.is-play .ls-bubble::after { animation: ls-to-mint .15s linear var(--swap) both; }
.ls .ls-lead.is-play .ls-bubble-in { animation: ls-to-mint .15s linear var(--swap) both; }
.ls .ls-lead.is-play .ls-bubble-in::after { animation: ls-bar 1s ease-in-out calc(var(--swap) - .5s) both; }
.ls .ls-lead.is-play .ls-say { animation: ls-say var(--swap) linear both; }
.ls .ls-lead.is-play .ls-listen { animation: ls-listen var(--swap) linear both; }
.ls .ls-lead.is-play .is-yap .ls-bubble-in { animation: ls-to-mint .15s linear var(--swap) both, ls-jitter .12s linear .9s 17; }
.ls .ls-lead.is-play .ls-p-yap { animation: ls-yap .16s ease-in-out .5s 15 alternate both; }
.ls .ls-lead.is-play .is-yap .ls-p-head { animation: ls-bob .32s ease-in-out .5s 8 alternate; }
.ls .ls-lead.is-play .is-rage .ls-p-head { animation: ls-shake .3s linear .8s 7; }
.ls .ls-lead.is-play .ls-p-face { animation: ls-face-red var(--swap) linear both; }
.ls .ls-lead.is-play .ls-p-steam { animation: ls-steam var(--swap) ease both; }
.ls .ls-lead.is-play .is-shut .ls-bubble-in { animation: ls-to-mint .15s linear var(--swap) both, ls-shrink-bubble var(--swap) linear both; }
.ls .ls-lead.is-play .is-shut .ls-p-head { animation: ls-turn var(--swap) ease both; }
.ls .ls-lead.is-play .ls-lead-title { animation: ls-rise .6s ease 3.9s both; }
.ls .ls-lead.is-play .ls-lead-actions { animation: ls-rise .6s ease 4.2s both; }

@keyframes ls-person-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ls-bubble-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ls-to-mint { from { background: var(--bg0); } to { background: #3ECFB0; } }
@keyframes ls-bar { 0% { transform: translateX(-101%); } 40%, 60% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes ls-say { 0%, 99.9% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes ls-listen { 0%, 99.9% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes ls-jitter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.5px, 1px); } 75% { transform: translate(1.5px, -1px); } }
@keyframes ls-yap { from { transform: scaleY(1.1); } to { transform: scaleY(.25); } }
@keyframes ls-bob { from { transform: translateY(0); } to { transform: translateY(-3px) rotate(-2deg); } }
@keyframes ls-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-3deg); } 75% { transform: translateX(4px) rotate(3deg); } }
@keyframes ls-face-red { 0%, 92% { fill: #F59A86; } 100% { fill: #F6D2B0; } }
@keyframes ls-steam { 0% { opacity: 0; transform: translateY(6px); } 30%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ls-shrink-bubble { 0%, 99.9% { color: #4A4A58; font-style: italic; } 100% { color: inherit; font-style: normal; } }
@keyframes ls-turn { 0%, 92% { transform: rotate(-8deg) translateX(-4px); } 100% { transform: none; } }
@keyframes ls-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.ls a { display: inline; }
.ls [hidden] { display: none !important; }

/* ------------------------------------------------------- the intro band */

.ls .ls-why {
  margin: 0 0 30px;
  padding: 22px 24px 20px;
  border: 3px solid #16130f;
  background: #fff;
  box-shadow: 6px 6px 0 #16130f;
}
.ls .ls-why .bf-h3 { margin: 0 0 12px; }
.ls .ls-why p { font-size: 16px; line-height: 1.65; color: var(--bf-ink); margin: 0 0 14px; }
.ls .ls-why p:last-child { margin-bottom: 0; }
.ls .ls-quotes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.ls .ls-quotes li {
  margin: 0;
  padding: 6px 12px;
  border: 2px solid #16130f;
  background: #FDE7E0;
  font-family: var(--dl-font-display);
  font-size: 15px;
  font-weight: var(--dl-fw-semi);
  box-shadow: 2px 2px 0 #16130f;
  animation: ls-quote-in .5s cubic-bezier(.3, 1.5, .6, 1) both;
}
.ls .ls-quotes li:nth-child(2) { animation-delay: .25s; background: #FDF3D8; }
.ls .ls-quotes li:nth-child(3) { animation-delay: .5s; background: #E6ECFF; }
.ls .ls-why p.ls-pull {
  margin: 4px 0 16px;
  padding-left: 14px;
  border-left: 5px solid #F59A86;
  font-family: var(--dl-font-display);
  font-size: 20px;
  font-weight: var(--dl-fw-bold);
  line-height: 1.3;
}
@keyframes ls-quote-in { from { transform: translateY(8px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------- step content */

.ls .ls-list { margin: 0 0 18px; padding-left: 22px; list-style: disc; display: grid; gap: 6px; }
.ls .ls-list li { line-height: 1.6; }

.ls .ls-moves { margin: 18px 0 22px; padding: 0; list-style: none; counter-reset: move; border-top: 3px solid #16130f; }
.ls .ls-moves > li.ls-move { list-style: none; }
.ls .ls-tries > li { list-style: none; }
.ls .ls-move { counter-increment: move; position: relative; margin: 0; padding: 14px 0 14px 46px; border-bottom: 1px solid #16130f33; }
.ls .ls-move:last-child { border-bottom: 2px solid #16130f; }
.ls .ls-move::before {
  content: counter(move);
  position: absolute;
  left: 0;
  top: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #16130f;
  background: #FDF3D8;
  font-family: var(--dl-font-display);
  font-weight: var(--dl-fw-bold);
  font-size: 15px;
}
.ls .ls-move-name { margin: 3px 0 4px; font-family: var(--dl-font-display); font-size: 18px; font-weight: var(--dl-fw-bold); line-height: 1.3; }
.ls .ls-move p { margin: 0 0 6px; font-size: 15.5px; line-height: 1.6; color: var(--bf-ink); }
.ls .ls-move p:last-child { margin-bottom: 0; }
.ls .ls-move p.ls-try { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.ls .ls-try span { display: inline-block; padding: 4px 10px; font-size: 14.5px; line-height: 1.45; border: 2px solid #16130f; }
.ls .ls-try .ls-yes { background: #E4F6E9; }
.ls .ls-try .ls-no { background: #FDE7E0; text-decoration: line-through; text-decoration-thickness: 2px; }

.ls .ls-avoid { margin: 0 0 18px; }
.ls .ls-avoid p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.ls .ls-avoid p.ls-avoid-title { margin-bottom: 4px; font-family: var(--dl-font-display); font-weight: var(--dl-fw-bold); font-size: 17px; }

.ls .ls-tries { margin: 0 0 16px; padding: 0; list-style: none; border-top: 3px solid #16130f; }
.ls .ls-tries li { margin: 0; border-bottom: 1px solid #16130f33; }
.ls .ls-tries li:last-child { border-bottom: 2px solid #16130f; }
.ls .ls-tries label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; cursor: pointer; font-size: 16px; line-height: 1.55; }
.ls .ls-tries input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #3ECFB0; }
.ls .ls-tries input:checked + span { color: var(--dl-muted); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ------------------------------------------- the practice conversation */

.ls .lr { margin-top: 14px; }
.ls .lr p { margin: 0; }
.ls .lr .lr-q { font-weight: var(--dl-fw-semi); font-size: 16px; margin-bottom: 10px; }
.ls .lr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ls .lr button.lr-chip {
  padding: 8px 13px;
  border: 2px solid #16130f;
  background: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: var(--dl-fw-semi);
  box-shadow: 2px 2px 0 #16130f;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ls .lr button.lr-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #16130f; }
.ls .lr button.lr-chip[aria-pressed="true"] { background: #3ECFB0; }

.ls .lr-stage { margin-top: 18px; border: 3px solid #16130f; background: #fff; }
.ls .lr .lr-setup { padding: 12px 14px; border-bottom: 3px solid #16130f; background: #FFF9EA; font-size: 14.5px; line-height: 1.55; font-style: italic; }

.ls .lr-scene { position: relative; border-bottom: 3px solid #16130f; background: #FDF3D8; overflow: hidden; }
.ls .lr-scene svg { display: block; width: 100%; height: auto; }
.ls .lr-meter { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: #fff; border: 2px solid #16130f; }
.ls .lr-meter-label { margin-right: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: var(--dl-fw-semi); }
.ls .lr-pip { width: 12px; height: 12px; border: 2px solid #16130f; background: #fff; transition: background .4s ease, transform .4s ease; }
.ls .lr-pip.is-on { background: #3ECFB0; transform: scale(1.1); }
.ls .lr .lr-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  font-family: var(--dl-font-display);
  font-weight: var(--dl-fw-bold);
  font-size: 15px;
  border: 2px solid #16130f;
  animation: lr-pop 2.6s ease both;
}
.ls .lr .lr-badge.is-good { background: #3ECFB0; color: #16130f; }
.ls .lr .lr-badge.is-bad { background: #16130f; color: #fff; }

.ls .lr-chat { display: flex; flex-direction: column; }
.ls .lr-log { min-height: 150px; max-height: 340px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ls .lr-row { display: flex; flex-direction: column; align-items: flex-start; }
.ls .lr-row.is-me { align-items: flex-end; }
.ls .lr .lr-bubble { max-width: 85%; padding: 9px 13px; border: 2px solid #16130f; background: #E6ECFF; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; animation: lr-bubble-in .25s ease both; }
.ls .lr-row.is-me .lr-bubble { background: #3ECFB0; }
.ls .lr-who { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: var(--dl-fw-semi); opacity: .7; margin-bottom: 2px; }
.ls .lr .lr-silence { padding: 6px 12px; border: 2px dashed #16130f; font-size: 14px; font-style: italic; color: var(--dl-muted); }
.ls .lr .lr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; justify-content: flex-end; }
.ls .lr-tag { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: var(--dl-fw-semi); border: 1.5px solid #16130f; }
.ls .lr-tag.is-good { background: #E4F6E9; }
.ls .lr-tag.is-bad { background: #FDE7E0; }
.ls .lr .lr-tip { max-width: 85%; margin-top: 6px; padding: 6px 10px; background: #FFF9EA; border-left: 4px solid #FFD65A; font-size: 13.5px; line-height: 1.45; }
.ls .lr-typing { padding: 12px 14px; }
.ls .lr-dots { display: inline-flex; gap: 4px; }
.ls .lr-dots span { width: 7px; height: 7px; border-radius: 50%; background: #16130f; animation: lr-dot 1s ease-in-out infinite; }
.ls .lr-dots span:nth-child(2) { animation-delay: .15s; }
.ls .lr-dots span:nth-child(3) { animation-delay: .3s; }

.ls .lr-voice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-top: 3px solid #16130f; }
.ls .lr button.lr-mic { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 3px solid #16130f; background: #3ECFB0; box-shadow: 3px 3px 0 #16130f; font-size: 26px; cursor: pointer; }
.ls .lr button.lr-mic.is-on { background: #F59A86; animation: lr-pulse 1.1s ease-in-out infinite; }
.ls .lr button.lr-mic:disabled { opacity: .5; cursor: default; }
.ls .lr .lr-voice-status { font-size: 14.5px; font-weight: var(--dl-fw-semi); }
.ls .lr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ls .lr-type { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border-top: 3px solid #16130f; }
.ls .lr-type input { flex: 1; min-width: 0; padding: 10px 12px; border: 2px solid #16130f; border-radius: 0; font: inherit; font-size: 15px; }
.ls .lr button.lr-send { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid #16130f; background: #3ECFB0; font-size: 20px; cursor: pointer; }
.ls .lr button.lr-send:disabled { opacity: .45; cursor: default; }
.ls .lr-type .lr-side { flex-basis: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
.ls .lr button.lr-quiet { padding: 5px 11px; border: 2px dashed #16130f; background: #fff; font: inherit; font-size: 13.5px; font-weight: var(--dl-fw-semi); cursor: pointer; }
.ls .lr button.lr-quiet:hover:not(:disabled) { background: #FDF3D8; }
.ls .lr button.lr-quiet:disabled { opacity: .45; cursor: default; }
.ls .lr button.lr-link { padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--bf-accent, #16130f); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ls .lr button.lr-link:disabled { opacity: .45; cursor: default; }
.ls .lr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ls .lr .lr-note { padding: 0 14px 10px; font-size: 14px; color: #A3361F; }
.ls .lr .lr-fine { padding: 0 14px 12px; font-size: 13px; color: var(--dl-muted); }
.ls .lr-end { padding: 14px; border-top: 3px solid #16130f; display: grid; gap: 10px; }
.ls .lr-end.is-revealed { background: #E4F6E9; }
.ls .lr-end.is-left { background: #FDE7E0; }
.ls .lr .lr-end-head { font-weight: var(--dl-fw-semi); font-size: 15.5px; }
.ls .lr .lr-score { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 14px; }
.ls .lr .lr-why { padding: 10px 12px; border: 2px solid #16130f; background: #fff; font-size: 14.5px; line-height: 1.55; animation: lr-bubble-in .35s ease both; }
.ls .lr-end-actions { display: flex; gap: 10px; align-items: center; }

/* the scene: talking bobs, openness moves the door and the lean (inline
   transforms, so they ease), and the fx are one-offs */
.ls .lr-head { transform-box: fill-box; transform-origin: 50% 100%; }
.ls .lr-door { transform-box: fill-box; transform-origin: 0% 50%; transition: transform .9s cubic-bezier(.3, 1.3, .6, 1); }
.ls .lr-light { transition: opacity .9s ease; }
.ls .lr-lean { transition: transform .9s ease; }
.ls .lr-arms { animation: lr-fade-in .4s ease both; }
.ls .lr-scene[data-talking="them"] .lr-them .lr-mouth, .ls .lr-scene[data-talking="me"] .lr-me .lr-mouth { transform-box: fill-box; transform-origin: center; animation: lr-talk .22s ease-in-out infinite alternate; }
.ls .lr-scene[data-talking="them"] .lr-them .lr-head, .ls .lr-scene[data-talking="me"] .lr-me .lr-head { animation: lr-bob .5s ease-in-out infinite alternate; }
/* a good move: the listener nods, hearts float up */
.ls .lr-scene[data-fx="move"] .lr-me .lr-head { animation: lr-nod .45s ease 2; }
.ls .lr-heart { transform-box: fill-box; animation: lr-float 1.8s ease-out both; }
/* mistakes */
.ls .lr-scene[data-fx="advice"] .lr-door, .ls .lr-scene[data-fx="arguing"] .lr-door { animation: lr-slam 2.2s ease; }
.ls .lr-pop { transform-box: fill-box; transform-origin: 50% 100%; animation: lr-pop 2.4s ease both; }
.ls .lr-wall { animation: lr-wall 2.4s cubic-bezier(.3, 1.3, .6, 1) both; }
.ls .lr-scene[data-fx="closed_question"] .lr-them { transform-box: fill-box; transform-origin: 50% 100%; animation: lr-shrug .7s ease 2; }
.ls .lr-spot { animation: lr-spot 2.4s ease both; }
.ls .lr-scene[data-fx="about_me"] .lr-them { animation: lr-dim 2.4s ease; }
.ls .lr-scene[data-fx="dismissing"] .lr-them { transform-box: fill-box; transform-origin: 50% 100%; animation: lr-shrink 2.4s ease; }
.ls .lr-cloud { animation: lr-float-in .5s ease both; }
.ls .lr-drop { animation: lr-rain .6s linear infinite; }
.ls .lr-scene[data-fx="rude"] .lr-them { transform-box: fill-box; animation: lr-shake .35s linear 3; }
.ls .lr-steam { transform-box: fill-box; transform-origin: 50% 100%; animation: lr-steam 1.1s ease-out 2; }
/* the end */
.ls .lr-confetti { animation: lr-fall 1.8s ease-in forwards; }
.ls .lr-bulb { transform-box: fill-box; transform-origin: 50% 100%; animation: lr-pop-in .5s cubic-bezier(.3, 1.6, .6, 1) both, lr-glow 1.6s ease-in-out .5s infinite alternate; }
.ls .lr-wedge { animation: lr-wedge .6s cubic-bezier(.3, 1.4, .6, 1) .3s both; }
.ls .lr-scene[data-outcome="left"] .lr-them { animation: lr-walk 1.6s ease-in .4s forwards; }

@keyframes lr-talk { from { transform: scaleY(1); } to { transform: scaleY(2.2); } }
@keyframes lr-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes lr-nod { 0%, 100% { transform: rotate(0); } 50% { transform: translateY(4px) rotate(-4deg); } }
@keyframes lr-float { 0% { transform: translateY(10px) scale(.4); opacity: 0; } 20% { opacity: 1; transform: translateY(0) scale(1); } 100% { transform: translateY(-46px) scale(.8); opacity: 0; } }
@keyframes lr-slam { 0%, 100% { } 12%, 60% { transform: scaleX(1); } }
@keyframes lr-pop { 0% { transform: scale(0); opacity: 0; } 12% { transform: scale(1.12); opacity: 1; } 20%, 85% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes lr-pop-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes lr-wall { 0% { transform: translateY(110px); } 20%, 80% { transform: translateY(0); } 100% { transform: translateY(110px); } }
@keyframes lr-shrug { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
@keyframes lr-spot { 0% { opacity: 0; } 15%, 80% { opacity: .75; } 100% { opacity: 0; } }
@keyframes lr-dim { 0%, 100% { opacity: 1; } 20%, 80% { opacity: .45; } }
@keyframes lr-shrink { 0%, 100% { transform: scale(1); } 30%, 75% { transform: scale(.88); } }
@keyframes lr-float-in { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes lr-rain { from { transform: translateY(0); opacity: 1; } to { transform: translateY(26px); opacity: 0; } }
@keyframes lr-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes lr-steam { from { transform: scale(.3) translateY(10px); opacity: 1; } to { transform: scale(1.2) translateY(-12px); opacity: 0; } }
@keyframes lr-fall { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(260px) rotate(540deg); } }
@keyframes lr-glow { from { filter: none; } to { filter: drop-shadow(0 0 6px #FFD65A); } }
@keyframes lr-wedge { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes lr-walk { to { transform: translateX(-260px); opacity: 0; } }
@keyframes lr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lr-bubble-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lr-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes lr-pulse { 0%, 100% { box-shadow: 3px 3px 0 #16130f, 0 0 0 0 #F59A8699; } 50% { box-shadow: 3px 3px 0 #16130f, 0 0 0 10px #F59A8600; } }

@media (prefers-reduced-motion: reduce) {
  .ls .lr-scene *, .ls .lr-badge, .ls .lr button.lr-mic.is-on, .ls .ls-quotes li, .ls .ls-lead *, .ls .ls-lead *::after, .ls .lr-bubble, .ls .lr-why { animation: none !important; transition: none !important; }
}
@media (max-width: 700px) {
  .ls .ls-why { padding: 18px 16px; }
  .ls .lr-log { max-height: 300px; }
  .ls .lr .lr-badge { font-size: 13px; }
  .ls .lr-meter { padding: 3px 6px; }
  .ls .lr-pip { width: 9px; height: 9px; }
  .ls .lr-voice { grid-template-columns: auto 1fr; }
  .ls .lr-voice .lr-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .ls .ls-move { padding-left: 40px; }
}