/* Interactive behavior arena and concept-specific motion. */
.behavior-concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.behavior-concepts button { display: grid; grid-template-columns: 30px 1fr; gap: 2px 9px; min-height: 56px; padding: 8px 12px; cursor: pointer; text-align: left; color: var(--muted); border: 1px solid var(--line); background: rgba(3,11,14,.94); }
.behavior-concepts button b { grid-row: 1 / 3; display: grid; width: 28px; height: 28px; place-items: center; color: var(--cyan); border: 1px solid #315a65; font: 9px monospace; }
.behavior-concepts button span { color: var(--text); font-weight: 700; }
.behavior-concepts button small { font: 8px monospace; letter-spacing: .08em; }
.behavior-concepts button.is-active { border-color: var(--cyan); background: rgba(7,25,31,.96); }
.behavior-concepts button.is-complete small { color: var(--mint); }
.behavior-concepts button.is-locked { cursor: not-allowed; opacity: .45; }
.behavior-simulator { display: grid; grid-template-columns: minmax(420px, 1.15fr) minmax(320px, .85fr); gap: 14px; margin-top: 14px; }
.behavior-arena { overflow: hidden; border: 1px solid #31594e; background: radial-gradient(ellipse at 50% 100%, rgba(87,242,164,.15), transparent 60%), rgba(3,10,13,.94); }
.behavior-arena > header { display: flex; justify-content: space-between; padding: 8px 12px; color: var(--cyan); border-bottom: 1px solid #1d3936; font: 9px monospace; letter-spacing: .1em; }
.behavior-arena > header b { color: var(--muted); }
.behavior-simulator.is-running .behavior-arena > header b { color: var(--mint); }
.behavior-stage { position: relative; display: flex; align-items: end; justify-content: space-around; height: 150px; padding: 12px 30px 0; border-bottom: 1px solid #244a42; }
.behavior-actor { position: relative; width: min(30%, 150px); height: 132px; margin: 0; }
.behavior-actor img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 12px rgba(0,0,0,.75)); }
.behavior-actor figcaption { position: absolute; top: 0; left: 50%; z-index: 2; width: 110px; color: var(--text); font: 9px monospace; text-align: center; transform: translateX(-50%); }
.health-bar { display: block; height: 4px; margin-top: 4px; overflow: hidden; background: #26302e; }
.health-bar i { display: block; width: 100%; height: 100%; transform-origin: left; background: var(--mint); }
.behavior-call { display: block; padding: 9px 12px; color: #9edfc1; background: rgba(2,7,9,.82); font: 11px monospace; text-align: center; }
.hit-impact { position: absolute; top: 42%; left: 27%; z-index: 4; padding: 5px 8px; color: white; background: var(--danger); font: 800 11px monospace; opacity: 0; transform: rotate(-8deg) scale(.4); }
.sim-shield, .sim-blueprint, .sim-constructor, .sim-contract, .sim-null, .sim-recovery, .sim-package { position: absolute; z-index: 5; opacity: 0; pointer-events: none; font: 800 9px monospace; letter-spacing: .08em; }
.sim-shield { top: 43%; left: 27%; padding: 20px 10px; color: var(--cyan); border: 2px solid var(--cyan); border-radius: 50%; transform: translate(-50%,-50%) scale(.3); }
.sim-blueprint { top: 42%; left: 50%; padding: 10px 18px; color: var(--cyan); border: 1px solid var(--cyan); transform: translate(-50%,-50%); }
.sim-constructor { top: 27%; right: 17%; padding: 7px 11px; color: #04130c; background: var(--mint); transform: translateY(12px); }
.sim-contract { top: 47%; left: 50%; padding: 7px 12px; color: #06130e; background: var(--mint); transform: translate(-50%,-50%); }
.sim-null { top: 45%; right: 19%; padding: 8px 12px; color: white; background: var(--danger); }
.sim-recovery { top: 45%; left: 50%; padding: 8px 13px; color: #04130c; background: var(--mint); transform: translate(-50%,-50%); }
.sim-package { top: 20%; width: 38%; height: 64%; padding: 7px; color: var(--cyan); border: 1px dashed #327b80; }
.sim-package--a { left: 5%; }
.sim-package--b { right: 5%; }
.behavior-sprite, .behavior-effect { position: absolute; z-index: 4; opacity: 0; pointer-events: none; }
.behavior-sprite { bottom: 0; width: min(24%, 100px); height: 132px; background-repeat: no-repeat; background-position: 0 56%; background-size: 600% auto; filter: drop-shadow(0 0 16px rgba(89,217,255,.45)); }
.behavior-sprite--target { left: 16.5%; transform: translateX(-50%); }
.behavior-sprite--unit { left: 50%; transform: translateX(-50%); }
.behavior-sprite--attacker { right: 16.5%; transform: translateX(50%); }
.behavior-simulator--1:not(.behavior--method-attack) .behavior-sprite--attacker { right: auto; left: 50%; transform: translateX(-50%); }
.behavior-simulator--1.behavior--constructor-init .sim-constructor { top: 88px; right: auto; left: calc(50% + 112px); transform: translateX(-50%); }
.behavior-simulator--1.behavior--method-attack .behavior-sprite--target,
.behavior-simulator--3 .behavior-sprite--target,
.behavior-simulator--4 .behavior-sprite--target { left: 25%; }
.behavior-simulator--1.behavior--method-attack .behavior-sprite--target { transform: translateX(-50%) scaleX(-1); }
.behavior-simulator--1.behavior--method-attack .behavior-actor--target img { transform: scaleX(-1); }
.behavior-simulator--1.behavior--method-attack .behavior-actor--target figcaption { top: -18px; }
.behavior-simulator--1.behavior--method-attack .behavior-sprite--attacker,
.behavior-simulator--3 .behavior-sprite--attacker,
.behavior-simulator--4 .behavior-sprite--attacker { right: 25%; }
.behavior-effect { inset: 8% 20%; width: 60%; height: 84%; object-fit: contain; filter: drop-shadow(0 0 14px currentColor); }
.behavior-simulator.is-running.has-sprite--target .behavior-actor--target img,
.behavior-simulator.is-running.has-sprite--unit .behavior-actor--unit img,
.behavior-simulator.is-running.has-sprite--attacker .behavior-actor--attacker img { opacity: 0; }
.behavior-simulator.is-running.has-sprite--target .behavior-actor--target,
.behavior-simulator.is-running.has-sprite--unit .behavior-actor--unit,
.behavior-simulator.is-running.has-sprite--attacker .behavior-actor--attacker { animation: none; }
.behavior-simulator.is-running .behavior-sprite { animation: sprite-sequence 1100ms steps(5) both; }
.behavior-simulator.is-running .behavior-effect { animation: asset-effect 1100ms ease both; }
.behavior--method-attack.is-running .behavior-sprite--attacker { animation: method-slime-sprite 1600ms steps(5) both, method-slime-approach 1600ms ease-in-out both; }
.behavior--method-attack.is-running .behavior-sprite--target { animation: sprite-sequence 700ms 700ms steps(5) both; }
.behavior--method-attack.is-running .behavior-actor--target img { animation: method-player-wait 1400ms both; }
.behavior--method-attack.is-running .behavior-effect { right: auto; left: 20%; width: 30%; animation: asset-effect 500ms 650ms ease both; }

.behavior--class-blueprint.is-running .behavior-actor { animation: class-hologram 1000ms ease both; }
.behavior--constructor-init.is-running .behavior-actor--attacker { animation: constructor-build 1100ms ease both; }
.behavior--constructor-init.is-running .behavior-actor--attacker .health-bar i { animation: constructor-health 900ms 250ms ease both; }
.behavior--constructor-init.is-running .sim-constructor { animation: constructor-parameter 1000ms 180ms ease both; }
.behavior--object-spawn.is-running .behavior-actor--attacker { animation: object-materialize 1100ms cubic-bezier(.2,.8,.2,1) both; }
.behavior--method-attack.is-running .behavior-actor--attacker { animation: method-lunge 720ms 260ms cubic-bezier(.2,.8,.2,1) both; }
.behavior--method-attack.is-running .behavior-actor--target { animation: target-hit 420ms 720ms ease both; }
.behavior--method-attack.is-running .behavior-actor--target .health-bar i { animation: health-damage 420ms 720ms ease forwards; }
.behavior--method-attack.is-running .hit-impact { animation: impact-pop 360ms 700ms ease both; }

.behavior--encapsulation-shield.is-running .behavior-actor--attacker { animation: access-probe 850ms 180ms ease both; }
.behavior--encapsulation-shield.is-running .sim-shield { animation: shield-block 900ms 420ms ease both; }
.behavior--inheritance-tree.is-running .behavior-actor--target { animation: parent-root 1100ms ease both; }
.behavior--inheritance-tree.is-running .behavior-actor--unit { animation: inherit-left 900ms 280ms ease both; }
.behavior--inheritance-tree.is-running .behavior-actor--attacker { animation: inherit-right 900ms 480ms ease both; }
.behavior--inheritance-tree.is-running .behavior-stage::before { animation: tree-grow 1000ms 180ms ease both; }
.behavior--polymorphism-dual.is-running .behavior-actor--unit { animation: minion-strike 550ms 180ms ease both; }
.behavior--polymorphism-dual.is-running .behavior-actor--attacker { animation: boss-slam 850ms 720ms ease both; }
.behavior--polymorphism-dual.is-running .hit-impact { animation: double-impact 1250ms 420ms ease both; }

.behavior--package-zones.is-running .sim-package { animation: package-reveal 900ms ease both; }
.behavior--package-zones.is-running .behavior-actor--target { animation: package-left 900ms 250ms ease both; }
.behavior--package-zones.is-running .behavior-actor--attacker { animation: package-right 900ms 420ms ease both; }
.behavior--interface-link.is-running .behavior-stage::before { animation: contract-line 1100ms ease both; }
.behavior--interface-link.is-running .sim-contract { animation: contract-badge 1100ms 180ms ease both; }
.behavior--interface-link.is-running .behavior-actor { animation: interface-pulse 1100ms 280ms ease both; }
.behavior--loose-coupling-swap.is-running .behavior-actor--target { animation: swap-right 1100ms ease both; }
.behavior--loose-coupling-swap.is-running .behavior-actor--attacker { animation: swap-left 1100ms ease both; }
.behavior--loose-coupling-swap.is-running .sim-contract { animation: contract-steady 1100ms ease both; }

.behavior--null-crash.is-running .behavior-actor--attacker { animation: null-vanish 900ms 180ms ease both; }
.behavior--null-crash.is-running .sim-null { animation: null-alert 900ms 420ms ease both; }
.behavior--null-crash.is-running .behavior-arena { animation: crash-flash 900ms 420ms ease both; }
.behavior--null-guard.is-running .behavior-actor--attacker { animation: guard-attempt 850ms 180ms ease both; }
.behavior--null-guard.is-running .sim-shield { animation: shield-block 900ms 420ms ease both; }
.behavior--exception-recovery.is-running .behavior-stage { animation: frame-crash 1150ms ease both; }
.behavior--exception-recovery.is-running .sim-recovery { animation: recovery-badge 1150ms 480ms ease both; }
.behavior--exception-recovery.is-running .behavior-actor { animation: recovery-reboot 1150ms 400ms ease both; }

.behavior-stage::before { content: ""; position: absolute; top: 50%; left: 18%; z-index: 0; width: 64%; height: 2px; opacity: 0; background: var(--cyan); transform-origin: left; }
@keyframes class-hologram { 0% { opacity: .15; filter: grayscale(1); } 35% { opacity: .5; filter: brightness(2) drop-shadow(0 0 20px var(--cyan)); } 100% { opacity: 1; filter: drop-shadow(0 0 10px var(--cyan)); } }
@keyframes blueprint-label { 0%, 100% { opacity: 0; } 30%, 75% { opacity: 1; box-shadow: 0 0 20px rgba(89,217,255,.3); } }
@keyframes constructor-build { from { opacity: .25; filter: grayscale(1); } 55%, 100% { opacity: 1; filter: drop-shadow(0 0 20px var(--mint)); } }
@keyframes constructor-health { from { width: 0; background: var(--cyan); } to { width: 100%; background: var(--mint); } }
@keyframes constructor-parameter { 0% { transform: translate(-50%, 12px); } 25%, 100% { opacity: 1; transform: translateX(-50%); box-shadow: 0 0 18px rgba(87,242,164,.45); } }
@keyframes object-materialize { 0% { opacity: 0; transform: scale(.25) translateY(35px); filter: blur(12px); } 55% { opacity: .7; filter: drop-shadow(0 0 28px var(--mint)); } 100% { opacity: 1; transform: none; } }
@keyframes method-lunge { 45% { transform: translateX(-58px) rotate(-5deg) scale(1.1); filter: drop-shadow(0 0 18px var(--danger)); } }
@keyframes target-hit { 30%, 70% { transform: translateX(-8px); filter: brightness(2) drop-shadow(0 0 18px var(--danger)); } 50% { transform: translateX(7px); } }
@keyframes health-damage { to { width: 72%; background: #ffb34f; } }
@keyframes impact-pop { 45% { opacity: 1; transform: rotate(-8deg) scale(1.25); } 100% { opacity: 0; transform: rotate(-8deg) scale(1); } }
@keyframes access-probe { 45% { transform: translateX(-38px); } 65% { transform: translateX(12px); filter: brightness(1.8); } }
@keyframes shield-block { 0%, 100% { opacity: 0; } 35%, 72% { opacity: 1; transform: translate(-50%,-50%) scale(1); box-shadow: 0 0 25px rgba(89,217,255,.55); } }
@keyframes parent-root { 35%, 100% { filter: drop-shadow(0 0 22px var(--mint)); transform: scale(1.08); } }
@keyframes inherit-left { from { opacity: 0; transform: translate(70px,45px) scale(.45); } to { opacity: 1; transform: none; } }
@keyframes inherit-right { from { opacity: 0; transform: translate(-70px,45px) scale(.45); } to { opacity: 1; transform: none; } }
@keyframes tree-grow { from { opacity: 1; transform: scaleX(0); } to { opacity: .7; transform: scaleX(1); } }
@keyframes minion-strike { 45% { transform: translateX(-30px) scale(1.08); filter: drop-shadow(0 0 14px var(--cyan)); } }
@keyframes boss-slam { 45% { transform: translateX(-65px) scale(1.22); filter: drop-shadow(0 0 24px var(--danger)); } 62% { transform: translateX(-58px) translateY(8px) scale(1.16); } }
@keyframes double-impact { 25%, 65% { opacity: 1; transform: rotate(-8deg) scale(1.1); } 40%, 80%, 100% { opacity: 0; } }
@keyframes package-reveal { from { opacity: 0; transform: scale(.85); } to { opacity: .8; transform: none; } }
@keyframes package-left { to { transform: translateX(-34px) scale(.9); filter: drop-shadow(0 0 12px var(--cyan)); } }
@keyframes package-right { to { transform: translateX(34px) scale(.9); filter: drop-shadow(0 0 12px var(--cyan)); } }
@keyframes contract-line { from { opacity: 1; transform: scaleX(0); } to { opacity: .75; transform: scaleX(1); box-shadow: 0 0 15px var(--mint); } }
@keyframes contract-badge { 20%, 85% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes interface-pulse { 50%, 100% { filter: drop-shadow(0 0 18px var(--mint)); } }
@keyframes swap-right { 45%, 100% { transform: translateX(150%); opacity: .75; } }
@keyframes swap-left { 45%, 100% { transform: translateX(-150%); opacity: .75; } }
@keyframes contract-steady { 10%, 90% { opacity: 1; transform: translate(-50%,-50%); box-shadow: 0 0 18px var(--mint); } }
@keyframes null-vanish { 45% { opacity: .35; filter: grayscale(1) blur(2px); } 100% { opacity: 0; transform: scale(.7); } }
@keyframes null-alert { 25%, 85% { opacity: 1; transform: scale(1.18); box-shadow: 0 0 22px var(--danger); } }
@keyframes crash-flash { 35%, 65% { border-color: var(--danger); box-shadow: inset 0 0 45px rgba(255,101,79,.25); } }
@keyframes guard-attempt { 45% { transform: translateX(-38px); } 65%, 100% { transform: translateX(15px); opacity: .5; } }
@keyframes frame-crash { 30% { filter: brightness(2) saturate(.2); transform: translateX(5px); } 42% { opacity: .35; transform: translateX(-5px); } 70%, 100% { opacity: 1; filter: none; transform: none; } }
@keyframes recovery-badge { 45%, 88% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); box-shadow: 0 0 24px var(--mint); } }
@keyframes recovery-reboot { 45% { opacity: .25; filter: grayscale(1); } 80%, 100% { opacity: 1; filter: drop-shadow(0 0 18px var(--mint)); } }
@keyframes sprite-sequence { 0% { opacity: 0; background-position: 0 56%; } 12% { opacity: 1; } 100% { opacity: 1; background-position: 100% 56%; } }
@keyframes asset-effect { 0%, 100% { opacity: 0; transform: scale(.7); } 35%, 72% { opacity: .86; transform: scale(1); } }
@keyframes method-slime-sprite { from { opacity: 1; background-position: 0 56%; } to { opacity: 1; background-position: 100% 56%; } }
@keyframes method-slime-approach { 0%, 15%, 100% { right: 25%; } 45%, 60% { right: 60%; } }
@keyframes method-player-wait { 0%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }