/* Authored motion: attention travels through the autonomous conversion flow. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1);--read-progress:0}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:20;pointer-events:none;background:var(--yellow);transform:scaleX(var(--read-progress));transform-origin:left}
.hero-copy,.flow-stage{animation:none}
.headline-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.headline-line>span{display:block;transform-origin:0 100%}
.flow-stage{transform:perspective(1100px) rotate(-2deg);transition:transform 450ms var(--motion-ease);box-shadow:12px 22px 38px -18px #000}
.motion-on .flow-stage{transform:perspective(1100px) rotate(-2deg) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.motion-toggle{color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:4px;padding:7px 9px;font:500 11px 'DM Sans',Arial,sans-serif;letter-spacing:0;min-height:34px;flex-shrink:0}
.motion-toggle:hover{color:var(--yellow);border-color:var(--yellow)}
.motion-toggle[hidden]{display:none}
.stage-top{gap:12px;min-height:80px}
.flow-step{transition:transform 450ms var(--motion-ease),border-color 300ms,background 300ms}
.flow-step:after{content:'';position:absolute;left:-1px;top:15px;bottom:15px;width:3px;background:var(--yellow);transform:scaleY(0);transform-origin:top;transition:transform 350ms var(--motion-ease)}
.flow-active{border-color:var(--yellow);transform:translateX(5px)}
.flow-active:after{transform:scaleY(1)}
.sale.flow-active:after{background:var(--bg)}
.flow-passed:not(.sale){border-color:#686335}
.connector{border-color:#454534}
.connector i{animation:none;opacity:0;width:5px;height:7px;border-radius:3px}
.motion-on .connector.flow-running i{animation:flow-travel 1500ms linear both}
.connector.flow-passed{border-color:var(--yellow)}
.bubble{display:flex;align-items:center;gap:3px;min-height:24px}
.bubble i{display:block;width:3px;height:3px;border-radius:50%;background:currentColor}
.motion-on .flow-active .bubble i{animation:typing-wave 550ms ease-in-out 2}
.motion-on .flow-active .bubble i:nth-child(2){animation-delay:100ms}
.motion-on .flow-active .bubble i:nth-child(3){animation-delay:200ms}
@keyframes flow-travel{0%{transform:translateY(0);opacity:0}15%{opacity:1}90%{opacity:1}100%{transform:translateY(21px);opacity:0}}
@keyframes typing-wave{50%{transform:translateY(-3px);opacity:.45}}
.button span,.nav-cta span,.text-link span{display:inline-block;transition:transform 200ms var(--motion-ease)}
.motion-on .button:hover:not(:disabled) span,.motion-on .nav-cta:hover span{transform:translate(3px,-3px)}
.motion-on .text-link:hover span{transform:translateY(3px)}
.button:active:not(:disabled){transform:translateY(1px) scale(.985)}
.lessons article{transition:transform 300ms var(--motion-ease),border-color 250ms}
.lesson-icon{transition:transform 250ms var(--motion-ease),background 250ms,color 250ms}
.motion-on .lessons article:hover .lesson-icon{transform:rotate(-8deg);background:var(--yellow);color:var(--bg)}
.faq summary span{transition:transform 180ms var(--motion-ease)}
.ticket{transform-origin:50% 100%;box-shadow:0 18px 45px -25px #000}
.current-lot{position:relative;overflow:hidden}
@media(min-width:1000px){.mentor-portrait{position:sticky;top:30px}}
@media(max-width:760px){.flow-stage,.motion-on .flow-stage{transform:none}.stage-top{padding:18px;font-size:9px;letter-spacing:1px}.diagram{padding:22px 18px}.flow-active{transform:translateX(3px)}.motion-toggle{font-size:10px}.headline-line{overflow:clip}.stage-footer{font-size:8px;gap:10px}}
.motion-paused .flow-stage{transform:none}
.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation:none!important}
.motion-paused .button:hover,.motion-paused .button:active,.motion-paused .lessons article:hover{transform:none}
@media(prefers-reduced-motion:reduce){.flow-stage,.motion-on .flow-stage{transform:none}.connector i{display:none}.headline-line{overflow:visible}.mentor-portrait{position:static}.reading-progress{display:none}}
