/* 5DollarVideo v0.4 — cinematic, progressive enhancements. */
#neon-dust{position:absolute;top:95px;left:0;width:100%;height:min(950px,100vh);z-index:1;pointer-events:none;opacity:.65}
.hero{isolation:isolate}.hero-content{position:relative;z-index:2}.hero-image-shade{z-index:0}.cursor-aura{position:fixed;width:420px;height:420px;left:0;top:0;transform:translate3d(-500px,-500px,0);background:radial-gradient(circle,#ff42af20 0%,#37e5e810 28%,transparent 66%);pointer-events:none;z-index:8;opacity:0;transition:opacity .3s;mix-blend-mode:screen;will-change:transform}
@media (hover:hover) and (pointer:fine){.cursor-aura.active{opacity:1}}
body.motion-ready .reveal-on-scroll{transition:opacity .65s ease,transform .65s ease;opacity:0;transform:translateY(26px)}body.motion-ready .reveal-on-scroll.revealed{opacity:1;transform:none}
.motion-section{position:relative;padding:110px 0;background:radial-gradient(ellipse at 2% 45%,#9a196138,transparent 46%),radial-gradient(ellipse at 97% 45%,#03d6df21,transparent 40%),#0d0816;overflow:hidden;border-block:1px solid #ffffff14}
.motion-section:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent,#000 45%,transparent)}
.motion-shell{position:relative;z-index:1}.motion-heading{display:grid;grid-template-columns:1fr 290px;gap:36px;align-items:end;margin:35px 0 38px}.motion-heading h2{font-size:clamp(54px,7vw,98px);line-height:.95;letter-spacing:-5px;margin:20px 0}.motion-heading p{color:#d1c4dc;line-height:1.65;font-size:16px;max-width:660px}.motion-heading .motion-honesty{font-size:11px;color:#a99bb7;margin-top:12px}.motion-selector{display:flex;flex-direction:column;gap:10px}.motion-mode{border:1px solid #e8a4d645;background:#24182e;color:#fff9ff;border-radius:14px;text-align:left;padding:15px 17px;font-size:14px;font-weight:800;transition:border-color .2s,transform .2s,box-shadow .2s}.motion-mode:hover{border-color:#ff56bd}.motion-mode.active{border-color:#ff4caf;background:linear-gradient(105deg,#7e2459,#3a1e5d);box-shadow:0 0 24px #f038b444;transform:translateX(-5px)}.motion-workbench{display:grid;grid-template-columns:1.1fr .9fr;min-height:550px;border:1px solid #de81df50;border-radius:30px;overflow:hidden;background:#140e20;box-shadow:0 24px 85px #0006,0 0 38px #f22b8822}
.motion-preview-area{position:relative;overflow:hidden;background:radial-gradient(circle at 49% 44%,#fe4a9f33,transparent 41%),radial-gradient(circle at 64% 62%,#24eff42e,transparent 45%),#0e0b1b;display:grid;place-items:center;min-height:555px;padding:35px}.motion-orbit{position:absolute;left:50%;top:50%;border:1px solid #ff40ab57;border-radius:50%;transform:translate(-50%,-50%);width:420px;height:420px;box-shadow:0 0 75px #ff42af14}.motion-orbit-b{width:570px;height:570px;border-color:#37e5e836}.motion-float{position:absolute;z-index:1;font-size:85px;color:#fcb8e7;text-shadow:0 0 35px #ff42af}.float-one{top:13%;left:16%;animation:float-glow 5s ease-in-out infinite}.float-two{bottom:12%;right:10%;color:#3beee9;animation:float-glow 5s 1.4s ease-in-out infinite}
.motion-phone{width:251px;max-width:100%;background:#150b1d;border:8px solid #281b31;border-radius:30px;box-shadow:0 0 0 2px #ce62b58c,0 25px 75px #000a,0 0 60px #f641ae66;overflow:hidden;transform:rotate(-5deg);position:relative;z-index:2}.motion-phone-top,.motion-phone-bottom{height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font:700 8px 'Space Grotesk',sans-serif;letter-spacing:1px;color:#e9cfef}.motion-phone-top i,.motion-phone-bottom i{display:inline-block;height:5px;width:5px;background:#31f0db;box-shadow:0 0 10px #31f0db;border-radius:50%}.motion-viewport{height:405px;position:relative;background:#221127;overflow:hidden;isolation:isolate}.motion-viewport img{width:100%;height:100%;object-fit:cover;transition:opacity .22s ease}.motion-workbench.is-playing .motion-viewport img{animation:mockup-kenburns 3s ease-in-out infinite alternate}.motion-filter{position:absolute;inset:0;background:linear-gradient(180deg,#16092310 12%,#1c081625 35%,#10091ddd 100%);pointer-events:none}.motion-captions{position:absolute;bottom:27px;left:14px;right:14px;text-align:center;text-shadow:0 2px 20px #000}.motion-captions span{font-size:10px;letter-spacing:2px;font-weight:800;color:#51eaff}.motion-captions strong{display:block;font:900 clamp(27px,3vw,41px) 'Space Grotesk',sans-serif;letter-spacing:-2px;line-height:1.08;padding:12px 0 5px;color:#fff;text-shadow:0 0 18px #f345abbb}.motion-captions p{font-size:11px;line-height:1.4;color:#ffdcf3;margin:0}.motion-corner-tag{position:absolute;top:15px;right:9px;background:#0e0815ad;border:1px solid #ffffff66;border-radius:8px;padding:8px;font-size:8px;letter-spacing:1px;font-weight:900}
.motion-director{padding:44px 43px 32px;display:flex;flex-direction:column}.motion-director h3{font:900 clamp(35px,4vw,53px)/.98 'Space Grotesk',sans-serif;letter-spacing:-2px;margin:19px 0}.motion-director>p{font-size:14px;line-height:1.65;color:#c7b9cb}.motion-scenes{display:flex;flex-direction:column;gap:8px;margin:18px 0}.motion-scene{display:grid;grid-template-columns:54px 1fr 20px;align-items:center;text-align:left;border:1px solid #ffffff22;background:#251a32;color:#fff;border-radius:13px;min-height:65px;padding:10px 13px;gap:10px;transition:border-color .25s,transform .25s,background .25s}.motion-scene:hover,.motion-scene.active{background:#4b2050;border-color:#ff48ac91;transform:translateX(4px)}.motion-scene-num{font:900 24px 'Space Grotesk',sans-serif;color:#ff69bd}.motion-scene strong{display:block;font-size:13px}.motion-scene small{display:block;color:#b9a9c6;font-size:11px;margin-top:3px}.motion-scene i{font-style:normal;color:#56eeee}.motion-player-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:3px 0 12px}.motion-play{border:1px solid #4deae98f;color:#51eafa;border-radius:999px;background:#07292c;padding:12px 20px;font-weight:800;font-size:13px;min-width:150px}.motion-count{color:#d1bdd7;font:700 12px 'Space Grotesk',sans-serif}.motion-progress{height:5px;background:#4b3654;border-radius:99px;overflow:hidden}.motion-progress>span{display:block;height:100%;width:33.333%;background:linear-gradient(90deg,#fb45ac,#56eee8);transition:width .3s ease}.motion-cta{width:100%;margin-top:22px}.motion-note{font-size:11px!important;color:#a99ab4!important;margin:10px 0 0!important}
.motion-workbench[data-motion-style="cinematic"] .motion-orbit{border-color:#66e8ff99}.motion-workbench[data-motion-style="cinematic"] .motion-phone{box-shadow:0 0 0 2px #42eaf08c,0 25px 75px #000a,0 0 60px #26eded66}.motion-workbench[data-motion-style="product"] .motion-orbit{border-color:#ffc86b99}
.prompt-presets{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}.prompt-presets button{font-size:11px;border-radius:25px;padding:8px 11px;color:#dce8ee;border:1px solid #ffffff38;background:#211729}.prompt-presets button:hover,.prompt-presets button:focus-visible{border-color:#37e5e8;color:#50e6ef}.brief-counter{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px!important;color:#b4a3c1!important;margin-top:3px!important}.brief-counter span:last-child{white-space:nowrap;color:#53e5e6}
.feature-card,.example-tile,.use-case-card{will-change:auto}.feature-card.glow-tilt,.example-tile.glow-tilt,.use-case-card.glow-tilt{transition:transform .18s ease,box-shadow .2s ease}
@keyframes mockup-kenburns{0%{transform:scale(1.05) translate(-2%,-1%)}100%{transform:scale(1.17) translate(2%,1%)}}@keyframes float-glow{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-24px) rotate(6deg)}}
@media(max-width:1100px){.motion-heading{grid-template-columns:1fr 240px}.motion-director{padding:35px 27px}.motion-workbench{grid-template-columns:1fr 1fr}.main-nav a{font-size:11px}}
@media(max-width:820px){.motion-section{padding:82px 0}.motion-heading{grid-template-columns:1fr;gap:20px}.motion-heading h2{font-size:clamp(50px,10vw,74px)}.motion-selector{flex-direction:row;flex-wrap:wrap}.motion-mode{font-size:11px;padding:12px}.motion-mode.active{transform:translateY(-2px)}.motion-workbench{grid-template-columns:1fr}.motion-preview-area{min-height:490px}.motion-director{padding:30px}.motion-director h3{font-size:42px}.motion-orbit-b{width:470px;height:470px}}
@media(max-width:580px){#neon-dust{opacity:.35;height:620px}.motion-heading h2{letter-spacing:-3px;font-size:clamp(43px,11vw,61px)}.motion-heading p{font-size:14px}.motion-section{padding:73px 0}.motion-preview-area{min-height:455px;padding:20px}.motion-phone{width:215px}.motion-viewport{height:355px}.motion-director{padding:24px 18px}.motion-director h3{font-size:38px}.motion-selector{gap:6px}.motion-mode{padding:10px}.motion-float{font-size:60px}.motion-orbit{width:290px;height:290px}.motion-orbit-b{width:400px;height:400px}.motion-phone{transform:rotate(-3deg)}.motion-scene:hover{transform:none}.studio-actions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){#neon-dust,.cursor-aura{display:none!important}body.motion-ready .reveal-on-scroll{opacity:1!important;transform:none!important;transition:none!important}.motion-float,.motion-workbench.is-playing .motion-viewport img{animation:none!important}.motion-scene,.motion-mode,.glow-tilt{transform:none!important}}

/* Avoid hidden sections in slow browsers: entrance animation is decorative. */
body.motion-ready .reveal-on-scroll{opacity:1;transform:none;transition:none}
body.motion-ready .reveal-on-scroll.revealed{animation:reveal-pop .65s cubic-bezier(.2,.7,.2,1) both}
@keyframes reveal-pop{from{opacity:.75;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:360px){.final-cta-content h2,.final-cta-content h2 em{font-size:clamp(31px,9.3vw,45px);letter-spacing:-1.5px;overflow-wrap:anywhere}.motion-orbit-b{width:325px;height:325px}}
@media(prefers-reduced-motion:reduce){body.motion-ready .reveal-on-scroll.revealed{animation:none!important}}

.article-btns .button{padding:15px 19px;min-height:50px;white-space:normal;text-align:center}.motion-cta{min-height:50px;padding:15px 18px;text-align:center}#motion-play:focus-visible,.motion-scene:focus-visible,.motion-mode:focus-visible,.prompt-presets button:focus-visible{outline:3px solid #5aeeed;outline-offset:3px}
@media(max-width:580px){.article-btns{align-items:stretch}.article-btns .button{width:100%}}
@media(max-width:580px){.motion-orbit-b{width:calc(100vw - 40px);height:calc(100vw - 40px)}}