/* 20261015-heavy-walk1 — motion on the yellow Between chat box only. transform/opacity/SVG. Decorative layers aria-hidden, pointer-events:none. */
#view-between .between-chat > *:not(.bbx-layer) { position: relative; z-index: 2; }
#view-between .bbx-layer { position: absolute; inset: 0; pointer-events: none; }
/* resting glow: inner gold breath */
#view-between .bbx-rest { z-index: 0; border-radius: 12px; box-shadow: inset 0 0 22px rgba(242,201,76,.38), 0 0 0 rgba(0,0,0,0); opacity: .45; animation: bbx-breathe 5.6s cubic-bezier(.45,0,.55,1) 1.2s infinite; }
@keyframes bbx-breathe { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
/* living-electricity edge: two soft sparks orbit the border, plus rare crackles */
#view-between .bbx-edge { z-index: 3; width: 100%; height: 100%; overflow: visible; }
#view-between .bbx-edge rect { fill: none; stroke: #FFE79A; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255,214,90,.9)); }
#view-between .bbx-edge .bbx-orb { stroke-dasharray: 34 966; animation: bbx-orbit 9s linear infinite; }
#view-between .bbx-edge .bbx-orb.b { stroke-dasharray: 18 982; opacity: .7; animation-duration: 13s; animation-direction: reverse; }
@keyframes bbx-orbit { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
#view-between .bbx-edge .bbx-zap { fill: none; stroke: #FFF4C8; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0 3px #F2C94C); stroke-dasharray: 120; stroke-dashoffset: 120; animation: bbx-zap 900ms cubic-bezier(.22,.61,.2,1) 1 forwards; }
@keyframes bbx-zap { 0% { stroke-dashoffset: 120; opacity: 1; } 35% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* door-name header: gold shimmer sweep */
#view-between .between-chat-name { overflow: hidden; }
#view-between .between-chat-name::after { content: ""; position: absolute; inset: -2px 0; pointer-events: none; background: linear-gradient(100deg, transparent 38%, rgba(255,246,210,.85) 50%, transparent 62%); mix-blend-mode: overlay; transform: translateX(-110%); animation: bbx-shine 7.5s cubic-bezier(.45,0,.55,1) .4s infinite; }
@keyframes bbx-shine { 0% { transform: translateX(-110%); } 22%, 100% { transform: translateX(110%); } }
/* door switch: the box morphs in */
#view-between .between-chat.bbx-morph { animation: bbx-morph 620ms cubic-bezier(.22,1.25,.36,1) 1 both; }
@keyframes bbx-morph { 0% { opacity: .35; transform: scale(.94) translateY(6px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
#view-between .between-chat.bbx-morph .between-chat-name { animation: bbx-name 560ms cubic-bezier(.22,1,.36,1) 80ms 1 both; }
@keyframes bbx-name { 0% { opacity: 0; transform: translateY(-8px) scale(.92); letter-spacing: .3em; } 100% { opacity: 1; transform: none; } }
/* each bubble arrives on a spring with a spark */
#view-between .between-msg.bbx-in { animation: bbx-spring 780ms cubic-bezier(.2,.9,.3,1) var(--bbx-d, 0ms) 1 both; }
@keyframes bbx-spring { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 55% { opacity: 1; transform: translateY(-3px) scale(1.01); } 78% { transform: translateY(1px) scale(.998); } 100% { opacity: 1; transform: none; } }
#view-between .between-msg { position: relative; }
#view-between .between-msg .bbx-spark { position: absolute; left: 6px; top: 9px; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 3; background: radial-gradient(circle, #fff 0 25%, #FFD95A 45%, transparent 70%); opacity: 0; animation: bbx-spark 700ms cubic-bezier(.22,.61,.2,1) calc(var(--bbx-d, 0ms) + 200ms) 1 both; }
@keyframes bbx-spark { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.6); } 100% { opacity: 0; transform: scale(3.2); } }
/* new brother answer: one soft gold glow pulse */
#view-between .between-reply { position: relative; }
#view-between .between-reply.bbx-new::before { content: ""; position: absolute; inset: -3px -6px; border-radius: 8px; pointer-events: none; z-index: -1; background: rgba(242,201,76,.22); box-shadow: 0 0 14px rgba(242,201,76,.55); opacity: 0; animation: bbx-glow 2.4s cubic-bezier(.45,0,.55,1) var(--bbx-d, 400ms) 1 both; }
@keyframes bbx-glow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
/* "Say it." typing shimmer + focus ring */
#view-between .between-chat .between-say-row { position: relative; }
#view-between .between-chat .between-say-row::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 1px; height: 2px; border-radius: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, #FFE79A, transparent); opacity: 0; transform: scaleX(.2); transition: opacity 400ms ease, transform 500ms cubic-bezier(.22,1,.36,1); }
#view-between .between-chat .between-say-row.bbx-typing::after { opacity: .9; transform: scaleX(1); animation: bbx-type 1.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes bbx-type { 0%,100% { transform: scaleX(.55) translateX(-18%); } 50% { transform: scaleX(1) translateX(18%); } }
#view-between .between-chat #between-say { transition: box-shadow 450ms ease; }
#view-between .between-chat #between-say:focus { box-shadow: 0 0 0 2px rgba(242,201,76,.55), 0 0 14px rgba(242,201,76,.25); }
/* door → box strike bolt (fixed, transient) */
.bbx-bolt { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; }
.bbx-bolt path { fill: none; stroke: #FFE79A; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 4px #F2C94C); stroke-dasharray: 600; stroke-dashoffset: 600; animation: bbx-bolt 560ms cubic-bezier(.22,.61,.2,1) 1 forwards; }
.bbx-bolt path.br { stroke-width: 1; }
.bbx-bolt circle { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; animation: bbx-burst 520ms ease-out 170ms 1 forwards; }
@keyframes bbx-bolt { 0% { stroke-dashoffset: 600; opacity: 1; } 35% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes bbx-burst { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.5); } }
html.bbx-hidden #view-between .bbx-layer, html.bbx-hidden #view-between .bbx-layer *, html.bbx-hidden #view-between .between-chat-name::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  #view-between .bbx-layer, #view-between .bbx-layer *, #view-between .between-chat-name::after, #view-between .between-msg, #view-between .between-msg .bbx-spark,
  #view-between .between-reply::before, #view-between .between-chat .between-say-row::after, #view-between .between-chat.bbx-morph, #view-between .between-chat-name, .bbx-bolt, .bbx-bolt * { animation: none !important; transition: none !important; }
  #view-between .bbx-edge, #view-between .bbx-spark, .bbx-bolt { display: none; }
  #view-between .bbx-rest { opacity: .8; }
}
