/* Each example shows its own process. One control pauses every scene. */
.hero-visual{isolation:isolate;overflow:hidden;border:1px solid #c4a98b;border-radius:30px;background:radial-gradient(ellipse at 50% 43%,#fff7e8 0%,#ead9c0 55%,#d7bea0 100%);box-shadow:0 30px 65px #291f181c,inset 0 1px 0 #fff8}
.hero-visual:before{content:"";position:absolute;inset:70px 35px 80px;border:1px solid #a8481f26;border-radius:50%;transform:rotate(-20deg);z-index:-1;box-shadow:0 0 0 25px #f8f0e426,0 0 0 65px #f8f0e433}
.flow-head{position:relative;margin-top:9px;letter-spacing:.16em;font-size:10px}.flow-core{position:relative;border:1px solid #806044;box-shadow:0 10px 0 #6b412b,0 26px 35px #291f1830,inset 0 1px 0 #ffffff35;animation:upgrade-core 8s ease-in-out infinite;margin:42px auto;border-radius:22px}
.flow-core:before,.flow-core:after{content:"";position:absolute;width:2px;height:33px;left:50%;background:linear-gradient(#a8481f00,#a8481f);top:-40px}.flow-core:after{top:auto;bottom:-45px;transform:rotate(180deg)}
.flow-input span,.flow-output span{border:1px solid #cbb28f;box-shadow:0 5px 0 #cbb28f,0 13px 22px #291f181a;animation:upgrade-input 8s ease-in-out infinite}.flow-input span:nth-child(2){animation-delay:.2s}.flow-input span:nth-child(3){animation-delay:.4s}.flow-output span{animation:upgrade-output 8s ease-in-out infinite;background:#fff9ef;border-bottom:3px solid #a8481f}.flow-output span:nth-child(2){animation-delay:.2s}.flow-output span:nth-child(3){animation-delay:.4s}
.web-demo{animation:website-tilt 9s ease-in-out infinite}.product-cube{animation:product-turn 9s ease-in-out infinite;background:linear-gradient(135deg,#f4dcc0,#c78655 55%,#8c3a17);box-shadow:12px 17px 0 #291f1820,inset 1px 1px 0 #fff8}.web-bottom{position:relative}.web-bottom:after{content:"";height:3px;position:absolute;bottom:0;left:0;right:0;background:#a8481f;transform-origin:left;animation:progress-scan 9s ease-in-out infinite}
.mail-demo{position:relative;box-shadow:0 18px 35px #291f1810;border:1px solid #d8c5ad}.mail-demo p:not(.after){animation:edit-original 8s ease-in-out infinite}.mail-demo .after{position:relative;animation:edit-result 8s ease-in-out infinite;color:#8c3a17}.mail-demo .after:after{content:" ✓";font:18px Arial,sans-serif}
.plan-demo div{position:relative;box-shadow:0 8px 15px #291f1808;animation:plan-stage 9s ease-in-out infinite}.plan-demo div:nth-child(2){animation-delay:3s}.plan-demo div:nth-child(3){animation-delay:6s}.plan-demo div:after{content:"✓";position:absolute;right:10px;top:12px;font-size:12px;color:#8c3a17}
.table-demo{position:relative;overflow:hidden;box-shadow:0 18px 35px #291f1810}.table-demo tbody tr{animation:row-found 8s ease-in-out infinite}.table-demo tbody tr:nth-child(2){animation-delay:.8s}.table-demo:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#a8481f,transparent);animation:table-scan 8s ease-in-out infinite;pointer-events:none}
.film-screen{background:radial-gradient(ellipse at 50% 30%,#654936,#291f18 72%);box-shadow:0 15px 28px #291f1820;border:1px solid #806044}.film-screen .play{animation:video-mark 8s ease-in-out infinite;text-shadow:0 8px 20px #0004;color:#e5bd8d}.film-screen p{animation:video-title 8s ease-in-out infinite}.timeline{position:relative;padding-bottom:10px}.timeline:after{content:"";position:absolute;top:-5px;bottom:0;width:2px;left:0;background:#8c3a17;box-shadow:0 0 0 3px #f8f0e466;animation:video-playhead 8s linear infinite}
@keyframes upgrade-core{0%,100%{transform:perspective(600px) rotateX(8deg) rotateY(-8deg) translateY(0)}50%{transform:perspective(600px) rotateX(0) rotateY(7deg) translateY(-5px)}}
@keyframes upgrade-input{0%,100%{transform:translateY(0)}30%,45%{transform:translateY(7px);box-shadow:0 2px 0 #cbb28f,0 7px 12px #291f181a}}
@keyframes upgrade-output{0%,30%,100%{transform:translateY(0)}60%,78%{transform:translateY(-7px);box-shadow:0 8px 0 #d8c5ad,0 18px 25px #291f181a}}
@keyframes website-tilt{0%,100%{transform:perspective(900px) rotateY(-7deg) rotateX(2deg)}50%{transform:perspective(900px) rotateY(2deg) rotateX(-2deg)}}
@keyframes product-turn{0%,100%{transform:rotate(-14deg) translateY(0)}50%{transform:rotate(8deg) translateY(-10px)}}
@keyframes progress-scan{0%,10%{transform:scaleX(.05)}75%,90%{transform:scaleX(1)}100%{transform:scaleX(.05)}}
@keyframes edit-original{0%,25%,100%{opacity:1}50%,80%{opacity:.45}}
@keyframes edit-result{0%,20%,100%{transform:translateY(4px);opacity:.6}45%,85%{transform:translateY(0);opacity:1}}
@keyframes plan-stage{0%,30%{transform:translateY(-6px);border-top-color:#291f18;background:#ead9c0}40%,100%{transform:none;border-top-color:#a8481f;background:#f8f0e4}}
@keyframes row-found{0%,15%,100%{background:transparent}35%,75%{background:#ead9c0}}
@keyframes table-scan{0%,10%{top:25%;opacity:0}20%{opacity:.7}75%{top:85%;opacity:.7}90%,100%{top:85%;opacity:0}}
@keyframes video-mark{0%,100%{transform:scale(1)}45%{transform:scale(1.08) rotate(-5deg)}}
@keyframes video-title{0%,100%{opacity:.6;transform:translateY(4px)}30%,85%{opacity:1;transform:none}}
@keyframes video-playhead{0%{left:1%}95%,100%{left:99%}}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
@media(max-width:700px){.hero-visual{min-height:440px}.web-demo{animation:none}.plan-demo{gap:8px}.plan-demo code{font-size:17px}.plan-demo div{padding:18px 9px}.plan-demo div:after{top:4px;right:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}