/* MAGI's movement language: floating, assembling, responding. */
:root{--ease-magic:cubic-bezier(.2,.8,.2,1);--shadow-soft:0 16px 45px #32136510;--pointer-x:0px;--pointer-y:0px;--tilt-x:0deg;--tilt-y:0deg}
.motion-toggle{position:fixed;bottom:18px;left:18px;z-index:30;border:1px solid #ddd1f5;border-radius:30px;padding:10px 16px;min-height:44px;background:#fffc;color:#4d3271;backdrop-filter:blur(18px);box-shadow:0 4px 24px #34116d0d;font-size:11px;font-weight:600}
.motion-toggle[hidden]{display:none}.motion-toggle:hover{background:white;border-color:#6325e9}
.site-header{position:relative;z-index:10}.site-header nav a:not(.button){position:relative}.site-header nav a::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:#6325e9;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-magic)}.site-header nav a:hover::after{transform:scaleX(1)}
.button{position:relative;isolation:isolate;box-shadow:0 2px 3px #27103b05;transition:transform .3s var(--ease-magic),box-shadow .3s,background .25s}.button:hover{transform:translateY(-4px);box-shadow:0 10px 25px #3612641f}.button:active{transform:translateY(0) scale(.98)}.button>span{transition:transform .3s var(--ease-magic)}.button:hover>span{transform:translate(3px,-3px)}
.hero-panel{background:radial-gradient(ellipse at 78% 30%,#8650ff 0,transparent 45%),radial-gradient(ellipse at 17% 90%,#4312b9,transparent 60%),#6325e9;box-shadow:0 24px 75px -45px #6325e9a0;border:1px solid #7641ed}
.hero-world{perspective:950px;isolation:isolate}.hero-magi{filter:drop-shadow(0 24px 15px #21056232);translate:var(--pointer-x) var(--pointer-y);transition:translate .7s var(--ease-magic);transform-origin:55% 62%;animation:magi-hover 6s ease-in-out infinite}
.magi-aura{position:absolute;inset:13% 9% 20%;border-radius:50%;background:radial-gradient(ellipse,#a782ff88,transparent 65%);filter:blur(24px);animation:aura-breathe 7s ease-in-out infinite;z-index:0}.magi-floor{position:absolute;bottom:2%;left:29%;width:45%;height:20px;background:#27114b40;border-radius:50%;filter:blur(12px);animation:floor-breathe 6s ease-in-out infinite}
.floating-note{border:1px solid #fff8;box-shadow:0 14px 26px #25005226;animation:note-drift 5s ease-in-out infinite;translate:calc(var(--pointer-x) * -.7) calc(var(--pointer-y) * -.7);transition:translate .9s var(--ease-magic)}.note-bottom{animation-delay:-2.5s}.hero-mini{animation:page-drift 7s ease-in-out infinite;translate:calc(var(--pointer-x) * -.4) calc(var(--pointer-y) * -.4);transition:translate .9s var(--ease-magic);box-shadow:0 20px 45px #20005145}
.hero-orbit{animation:orbit-breathe 12s ease-in-out infinite}.orbit-two{animation-delay:-6s}.hero-spark{animation:spark-turn 5s ease-in-out infinite}.spark-two{animation-delay:-2s}.tiny-star{animation:spark-turn 7s ease-in-out infinite}
.magi-spark-button{position:absolute;left:33%;bottom:0;z-index:6;color:#fff;background:#ffffff16;border:1px solid #ffffff50;border-radius:30px;padding:9px 16px;font-size:11px;min-height:40px;backdrop-filter:blur(10px);transition:background .2s,transform .2s}.magi-spark-button:hover{background:#ffffff30;transform:translateY(-3px)}.magi-spark-button span{font-size:18px;margin-left:6px}.hero-world.magi-cheer .hero-magi{animation:magi-cheer 1s var(--ease-magic)}
.magic-particles{position:absolute;inset:0;pointer-events:none;z-index:5}.magic-particles i{position:absolute;left:30%;top:28%;font-style:normal;color:#b8edff;font-size:25px;opacity:0;--dx:-100px;--dy:-100px}.magic-particles i:nth-child(2){--dx:90px;--dy:-150px}.magic-particles i:nth-child(3){--dx:170px;--dy:0px}.magic-particles i:nth-child(4){--dx:-180px;--dy:80px}.magic-particles i:nth-child(5){--dx:50px;--dy:140px}.magi-cheer .magic-particles i{animation:magic-burst 1s var(--ease-magic) both}
.hero-bottom{position:relative;background:#3404a012;backdrop-filter:blur(10px)}.hero-bottom-symbol{animation:arrow-nudge 3s ease-in-out infinite}.hand-line{animation:underline-grow 1s var(--ease-magic) .4s both;transform-origin:left}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease-magic) var(--reveal-delay,0ms),transform .75s var(--ease-magic) var(--reveal-delay,0ms)}.reveal.is-visible{opacity:1;transform:translateY(0)}
.step{position:relative}.step-illustration{height:228px;border:1px solid #e8ddf9;box-shadow:inset 0 2px 0 #fff9,0 10px 35px #4d258807;transition:transform .5s var(--ease-magic),box-shadow .5s,border-color .4s;transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}.step:hover .step-illustration{box-shadow:0 20px 45px #4d258817;border-color:#c6adea}.step-label>span{transition:background .3s,color .3s,transform .3s}.step:hover .step-label>span{background:#6325e9;color:white;transform:rotate(-10deg) scale(1.12)}
.step-illustration::before{content:'';position:absolute;width:180px;height:180px;right:-40px;top:-60px;border:1px solid #ffffffc0;border-radius:50%;box-shadow:0 0 0 24px #ffffff20,0 0 0 48px #ffffff15}
.step-conversation .bubble-a{animation:conversation-in 8s ease-in-out infinite}.step-conversation .bubble-b{bottom:43px;min-height:63px;display:flex;align-items:center;animation:answer-in 8s ease-in-out infinite}.bubble-message{animation:answer-text 8s ease-in-out infinite}.typing-dots{position:absolute;display:flex;gap:6px;animation:typing-window 8s linear infinite}.typing-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#fff;animation:typing-dot .8s ease-in-out infinite}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}.step-doodle{animation:spark-turn 5s ease-in-out infinite}
.compose-tile{box-shadow:0 10px 18px #4a2a7a12;animation:tile-stack 7s var(--ease-magic) infinite}.tile-b{animation-delay:-.15s;top:86px}.tile-c{animation-delay:-.3s;top:150px}.compose-cursor{animation:cursor-travel 7s var(--ease-magic) infinite;filter:drop-shadow(2px 4px 2px #53278e20)}
.device-desktop{top:39px;box-shadow:0 12px 16px #43236310;animation:desktop-peek 7s ease-in-out infinite}.device-desktop b{animation:screen-hello 7s ease-in-out infinite}.device-mobile{box-shadow:0 10px 18px #43236320;animation:phone-peek 7s ease-in-out infinite}.device-check{animation:check-pop 7s var(--ease-magic) infinite}
.showcase{border:1px solid #ece3d9;box-shadow:var(--shadow-soft);overflow:hidden}.sample-window{transform:perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .6s var(--ease-magic),box-shadow .5s;box-shadow:0 20px 40px #6c4d2c1a}.sample-palette span{transition:transform .3s}.showcase:hover .sample-palette span:nth-child(2){transform:translateY(-7px)}.showcase:hover .sample-palette span:nth-child(3){transform:translateY(-12px)}.example-tabs button{transition:background .25s,color .25s,box-shadow .25s,transform .25s}.example-tabs button[aria-pressed=true]{box-shadow:0 5px 16px #6325e924}.example-tabs button:hover{transform:translateY(-2px)}
.play-editor{box-shadow:0 26px 70px -20px #52278224;border:1px solid #e5dbf3}.play-shape{transition:transform .7s var(--ease-magic)}.play-editor:hover .shape-one{transform:rotate(-12deg)}.play-editor:hover .shape-two{transform:rotate(14deg) translateY(-6px)}
.magi-portrait{isolation:isolate;background:radial-gradient(ellipse at 50% 30%,#e4d4ff,transparent 60%),#f1eafd;border:1px solid #e6daf8;box-shadow:inset 0 2px 0 #fff,0 24px 65px #5825960d;overflow:hidden}.magi-portrait>img{animation:portrait-float 6s ease-in-out infinite}.portrait-orbit{position:absolute;inset:13%;border:1px dashed #b297dc;border-radius:50%;transform:rotate(-25deg);animation:portrait-orbit 35s linear infinite;z-index:-1}.magi-portrait::after{content:'';position:absolute;bottom:7%;left:27%;width:46%;height:18px;background:#7e57ae25;filter:blur(10px);border-radius:50%;z-index:-1}.magi-name-tag{z-index:3}.magi-model-actions{margin:26px 0}.model-status{font-size:12px!important;line-height:1.6!important;max-width:350px;margin-top:13px!important;color:var(--muted)}.magi-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:grab;touch-action:pan-y}.magi-canvas.is-grabbing{cursor:grabbing}.model-ready>img{visibility:hidden}.model-ready .portrait-ring{opacity:.3}.model-ready .magi-name-tag{pointer-events:none}.magi-canvas:focus-visible{outline:3px solid #159ccc;outline-offset:-5px;border-radius:inherit}
.price-card{border:1px solid #e7dff1;box-shadow:0 6px 25px #27103b05;transition:transform .4s var(--ease-magic),box-shadow .4s,border-color .4s}.price-card:hover{transform:translateY(-7px);border-color:#bda1ea;box-shadow:0 22px 50px #52278f12}.store-price{background:linear-gradient(150deg,#f1e9ff,#faf7ff 60%);position:relative;overflow:hidden}.store-price::after{content:'✦';position:absolute;right:25px;top:70px;font-size:110px;line-height:1;color:#6a29eb0a;transform:rotate(15deg);pointer-events:none}.price-card .check-list li{transition:translate .3s}.price-card:hover .check-list li{translate:3px 0}.faq-list details{border-radius:12px;transition:background .25s,padding .25s}.faq-list details[open]{background:#f2edfb;padding-inline:20px}.faq-list details[open] p{animation:answer-reveal .3s ease}.faq-list summary::after{transition:transform .3s}.faq-list details[open] summary::after{transform:rotate(180deg)}
.final-cta-inner{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 30%,#854aff,transparent 55%),#5920d6;box-shadow:0 24px 70px -35px #6325e966}.final-action{position:relative;z-index:1}.final-magi{position:absolute;width:200px;max-width:none;bottom:100%;right:0;transform:rotate(12deg);pointer-events:none;filter:drop-shadow(0 14px 12px #29005f30)}.final-star{opacity:.4;position:absolute;right:-20px;top:-120px;z-index:-1}.final-action .button{margin-top:100px}
.hero-world:not(.scene-visible) *,.step-illustration:not(.scene-visible) *,.magi-portrait:not(.scene-visible) *{animation-play-state:paused!important}.page-sleeping *{animation-play-state:paused!important}
@keyframes magi-hover{0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes portrait-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes note-drift{0%,100%{margin-top:0;margin-bottom:0}50%{margin-top:8px;margin-bottom:8px}}
@keyframes page-drift{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-8px)}}
@keyframes aura-breathe{50%{opacity:.65;scale:1.15}}
@keyframes floor-breathe{50%{scale:.85;opacity:.6}}
@keyframes orbit-breathe{50%{scale:1.08;opacity:.6}}
@keyframes spark-turn{0%,100%{scale:1;rotate:0deg}50%{scale:.8;rotate:35deg}}
@keyframes arrow-nudge{0%,70%,100%{translate:0 0}85%{translate:5px -5px}}
@keyframes underline-grow{from{scale:0 1}to{scale:1 1}}
@keyframes magi-cheer{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-22px) rotate(-7deg)}65%{transform:translateY(-12px) rotate(5deg)}}
@keyframes magic-burst{0%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(90deg) scale(.5)}}
@keyframes conversation-in{0%,8%{opacity:0;translate:0 12px}15%,88%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -5px}}
@keyframes answer-in{0%,16%{opacity:0;translate:0 10px}24%,90%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes typing-window{0%,22%{opacity:0}23%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes typing-dot{50%{translate:0 -4px;opacity:.5}}
@keyframes answer-text{0%,40%{opacity:0}47%,100%{opacity:1}}
@keyframes tile-stack{0%,100%{translate:0 0}35%,60%{translate:12px -9px}80%{translate:0 0}}
@keyframes cursor-travel{0%,100%{translate:0 0}28%{translate:-25px -45px;scale:1}35%{translate:-25px -45px;scale:.85}60%{translate:-12px -52px;scale:1}80%{translate:0 0}}
@keyframes desktop-peek{0%,100%{translate:0 0}50%{translate:-3px -5px}}
@keyframes phone-peek{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-9px)}}
@keyframes screen-hello{0%,12%{opacity:.25}25%,100%{opacity:1}}
@keyframes check-pop{0%,45%{scale:.7;opacity:.3}55%,85%{scale:1;opacity:1}100%{scale:.7;opacity:.3}}
@keyframes portrait-orbit{to{rotate:360deg}}
@keyframes answer-reveal{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}html[data-motion=off] .reveal{opacity:1;transform:none}html[data-motion=off] .typing-dots{display:none}html[data-motion=off] .bubble-message{opacity:1}html[data-motion=off] .hero-magi,html[data-motion=off] .floating-note,html[data-motion=off] .hero-mini{translate:0 0}html[data-motion=off] .step-illustration,html[data-motion=off] .sample-window{transform:none}
@media(max-width:900px){.step-illustration{height:220px}.final-magi{width:160px;right:0}.final-action .button{margin-top:70px}}
@media(max-width:590px){.motion-toggle{bottom:10px;left:10px;font-size:10px;padding:7px 12px;min-height:36px}.hero-world{margin-bottom:25px}.magi-spark-button{left:32%;bottom:-15px;font-size:10px;min-height:36px;padding:5px 12px}.step-illustration{height:230px}.tile-b{top:87px}.tile-c{top:150px}.hero-magi{filter:drop-shadow(0 14px 10px #21056228)}.magi-model-actions .button{font-size:13px}.final-action .button{margin-top:0}.final-magi{width:150px;bottom:70%;right:-40px;opacity:.4;z-index:-1}.final-action{isolation:isolate}.final-cta-inner>div:first-child{position:relative;z-index:2}.site-footer{padding-bottom:65px}.magi-portrait{width:100%;min-height:360px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.typing-dots{display:none}.bubble-message{opacity:1}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Give MAGI its own space beside the final invitation, away from the text. */
.final-magi{bottom:auto;top:-45px;right:24px;width:185px;z-index:0}.final-action .button{position:relative;z-index:1;margin-top:130px}.site-footer{padding-bottom:65px}
@media(max-width:590px){.final-action{padding-top:105px}.final-action .button{margin-top:0}.final-magi{top:-12px;right:0;bottom:auto;width:140px;opacity:1;z-index:0;transform:rotate(8deg)}}
.final-magi{mask-image:radial-gradient(ellipse at 50% 48%,#000 30%,#000c 47%,transparent 71%)}

.hero-choices{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:23px 0 14px}.hero-choices>span{flex-basis:100%;font-size:12px;color:#e9dcff;margin-bottom:3px}.hero-choices button{font:inherit;font-size:12px;padding:8px 13px;border:1px solid #c6a9fa7a;border-radius:20px;background:#ffffff0d;color:white;cursor:pointer;transition:background .2s,transform .2s}.hero-choices button[aria-pressed=true]{background:white;color:#6325e9;border-color:white}.hero-choices button:hover{transform:translateY(-2px)}.hero-choices button:focus-visible,.step-play:focus-visible{outline:3px solid #6ceaff;outline-offset:4px}.hero-mini .mini-page-inner>span{white-space:pre-line}.hero-mini[data-idea=services] .mini-page-inner{background:#e2f2ff}.hero-mini[data-idea=personal] .mini-page-inner{background:#efdcff}.hero-mini[data-idea=personal] .mini-vase{border-radius:15px 50px 12px 30px;transform:rotate(-15deg);background:#a45ae5}.hero-mini[data-idea=services] .mini-vase{border-radius:8px 8px 0 0;background:#719da7}
.step-play{position:absolute;z-index:6;right:14px;bottom:12px;border:1px solid #ffffffaa;border-radius:20px;padding:7px 12px;background:#ffffffdc;color:#572cb0;font:600 11px system-ui;cursor:pointer;box-shadow:0 3px 12px #4b217d0a}.step-play:hover{background:#fff}.step-illustration.user-composed *{animation:none!important}.user-composed .bubble-message{opacity:1!important}.user-composed .typing-dots{display:none}.step-compose.user-composed .compose-tile{transition:transform .35s,top .35s,left .35s}.step-compose[data-arrangement="1"] .tile-a{transform:translate(28px,80px) rotate(4deg)}.step-compose[data-arrangement="1"] .tile-b{transform:translate(-32px,-50px) rotate(-6deg)}.step-compose[data-arrangement="1"] .tile-c{transform:translate(32px,-24px) rotate(2deg)}.step-compose[data-arrangement="2"] .tile-a{transform:translate(-10px,18px) rotate(-9deg)}.step-compose[data-arrangement="2"] .tile-b{transform:translate(0,35px) rotate(8deg)}.step-compose[data-arrangement="2"] .tile-c{transform:translate(30px,-115px) rotate(-3deg)}.step-devices .device-mobile,.step-devices .device-desktop{transition:transform .35s,opacity .35s}.step-devices.focus-mobile .device-desktop{transform:scale(.8) translateX(-30px);opacity:.25}.step-devices.focus-mobile .device-mobile{transform:translateX(-110px) rotate(0deg) scale(1.25);z-index:3}.step-devices.user-composed .device-check{opacity:1}.step-conversation.user-composed .bubble-b{transform:rotate(2deg)}
@media(prefers-reduced-motion:reduce){.hero-choices button,.step-compose.user-composed .compose-tile,.step-devices .device-mobile,.step-devices .device-desktop{transition:none!important}}