/* LT adds one bounded story. Existing method effects are untouched. */
.lt-graphic { display: none; }
.method-visual[data-visual="lt"] .lt-graphic { display: block; }
.method-visual[data-visual="lt"] :is(.sample, .ut-graphic, .pt-graphic, .mt-graphic, .vt-graphic) { display: none; animation: none; }
.lt-graphic text { font-family: Manrope, Arial, sans-serif; font-size: 14px; fill: #b5d0d7; }
.lt-graphic .lt-vessel-label { font-family: monospace; font-size: 13px; letter-spacing: 1.6px; fill: #83a8b4; }
.lt-graphic .lt-detector text { font-family: monospace; font-size: 13px; letter-spacing: 1px; }
.lt-graphic .lt-detector .lt-detector-caption { font-size: 12px; fill: #b9e268; }
.lt-graphic .lt-detection > text { font-family: monospace; font-size: 15px; letter-spacing: .4px; fill: #c9eb8c; }
.lt-graphic .lt-detection .lt-record-caption { font-family: Manrope, Arial, sans-serif; font-size: 12px; letter-spacing: 0; fill: #9dbbc4; }
.lt-graphic .lt-stages text { font-size: 16px; fill: currentColor; }
.lt-graphic .lt-stages .lt-stage-number { font-family: monospace; font-size: 13px; }
.lt-stage { color: #82a3ae; }
.lt-stage-three { color: #c9eb8c; }
.lt-instrument { transform: translate(0, 0); }
.lt-signal-base { opacity: .2; }
.lt-signal-peak, .lt-detection, .lt-status-dot { opacity: 1; }
.lt-gas-route { opacity: .65; }

.method-visual[data-visual="lt"].in-view.replay .lt-vessel { animation: lt-vessel-setup 8s ease both; }
.method-visual[data-visual="lt"].in-view.replay .lt-gas { animation: lt-gas-setup 8s ease both; }
.method-visual[data-visual="lt"].in-view.replay .lt-instrument { animation: lt-probe-search 8s cubic-bezier(.32, .01, .2, 1) both; }
.method-visual[data-visual="lt"].in-view.replay .lt-gas-route { animation: lt-gas-escape 8s linear both; }
.method-visual[data-visual="lt"].in-view.replay :is(.lt-signal-peak, .lt-status-dot) { animation: lt-signal-detect 8s ease both; }
.method-visual[data-visual="lt"].in-view.replay .lt-signal-base { animation: lt-signal-idle 8s linear both; }
.method-visual[data-visual="lt"].in-view.replay .lt-detection { animation: lt-record-result 8s ease both; }
.method-visual[data-visual="lt"].in-view.replay .lt-detection-halo { animation: lt-target-settle 8s ease both; transform-origin: 374px 135px; }
.method-visual[data-visual="lt"].in-view.replay .lt-stage-one { animation: lt-stage-prepare 8s linear both; }
.method-visual[data-visual="lt"].in-view.replay .lt-stage-two { animation: lt-stage-search 8s linear both; }
.method-visual[data-visual="lt"].in-view.replay .lt-stage-three { animation: lt-stage-record 8s linear both; }
.method-visual[data-visual="lt"].in-view.replay .lt-graphic * { animation-play-state: var(--animation-state, running); }

@keyframes lt-vessel-setup {
  0% { opacity: .2; }
  17%, 100% { opacity: 1; }
}
@keyframes lt-gas-setup {
  0%, 10% { opacity: 0; }
  25%, 100% { opacity: 1; }
}
@keyframes lt-probe-search {
  0%, 22% { transform: translate(12px, 65px); }
  42% { transform: translate(5px, 20px); }
  56%, 100% { transform: translate(0, 0); }
}
@keyframes lt-gas-escape {
  0%, 24% { opacity: 0; stroke-dashoffset: 0; }
  31% { opacity: .3; }
  56% { opacity: .85; stroke-dashoffset: -42; }
  76%, 100% { opacity: .65; stroke-dashoffset: -70; }
}
@keyframes lt-signal-detect {
  0%, 53% { opacity: 0; }
  62%, 100% { opacity: 1; }
}
@keyframes lt-signal-idle {
  0%, 53% { opacity: 1; }
  62%, 100% { opacity: .2; }
}
@keyframes lt-record-result {
  0%, 62% { opacity: 0; }
  77%, 100% { opacity: 1; }
}
@keyframes lt-target-settle {
  0%, 62% { transform: scale(1.45); }
  78%, 100% { transform: scale(1); }
}
@keyframes lt-stage-prepare {
  0%, 23% { color: #c9eb8c; }
  28%, 100% { color: #82a3ae; }
}
@keyframes lt-stage-search {
  0%, 23% { color: #82a3ae; }
  28%, 68% { color: #c9eb8c; }
  74%, 100% { color: #82a3ae; }
}
@keyframes lt-stage-record {
  0%, 68% { color: #82a3ae; }
  74%, 100% { color: #c9eb8c; }
}

/* Static result remains understandable when motion is disabled. */
.motion-paused .method-visual[data-visual="lt"] .lt-graphic * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .method-visual[data-visual="lt"] .lt-graphic * { animation: none !important; }
}