/* Comic Compiler Home motion layer. All transforms are composited; no layout shifts.
   Deliberately independent of the frozen creative engines and story handoff. */

.hero{isolation:isolate}
.hero::after{
 content:"";position:absolute;inset:2px max(5%,calc((100% - 990px)/2)) -10px;
 z-index:-1;pointer-events:none;border-radius:80px;opacity:.78;
 background:
  radial-gradient(circle at 23% 55%,#d8d5ff90 0,transparent 32%),
  radial-gradient(circle at 77% 24%,#ffdae696 0,transparent 34%),
  radial-gradient(circle at 60% 95%,#ddf3e092 0,transparent 42%);
 background-size:115% 115%;
 animation:ambient-shift 12s ease-in-out infinite alternate;
}
.hero-orbit{position:absolute;pointer-events:none;width:37px;height:37px;top:28%;border-radius:12px;
 border:1px solid #b9cdbd60;box-shadow:0 5px 16px #5272620c;z-index:0;transform:rotate(-17deg);
 animation:orbit-float 6s ease-in-out infinite}
.orbit-left{left:12%;background:#d7eeddd9}
.orbit-right{right:13%;top:19%;background:#f5ddecdb;border-radius:50%;width:27px;height:27px;animation-delay:-2s}
.orbit-small{right:21%;top:67%;width:10px;height:10px;border-radius:4px;background:#c7b5f4;animation-delay:-4s;box-shadow:none}
.hero-copy{animation:rise-into-view .65s both cubic-bezier(.2,.75,.2,1)}
.hero h1 .gradient-text{background-image:linear-gradient(105deg,#735ad4 0%,#cd6be3 29%,#f28b95 52%,#dda75f 75%,#735ad4 100%);
 background-size:220% 100%;animation:hero-iridescence 11s ease-in-out infinite}
.create-section>.section-kicker,.create-section>h2,.create-section>.section-sub{
 animation:rise-into-view .6s .09s both cubic-bezier(.2,.75,.2,1)
}
.composer{position:relative;transition:border-color .25s,box-shadow .3s}
.composer:focus-within{box-shadow:0 9px 30px #547e5015,0 0 0 3px #8bc5a81f}
.composer::before{content:"";height:2px;position:absolute;top:0;left:12%;right:12%;opacity:0;pointer-events:none;
 background:linear-gradient(90deg,transparent,#a09deb,#7bcbb7,#f5b48a,transparent);transform:scaleX(.4);
 transition:opacity .3s,transform .45s}
.composer:focus-within::before{opacity:1;transform:scaleX(1)}
.sample-chip{transition:transform .2s ease,background .2s,border-color .2s,box-shadow .2s}
.sample-chip:hover{box-shadow:0 4px 12px #345c3e0c;transform:translateY(-2px)}
.mode{position:relative;isolation:isolate;overflow:hidden;will-change:auto;transform:translateZ(0);
 transition:border-color .25s,box-shadow .25s,transform .28s cubic-bezier(.2,.7,.2,1),background .25s}
.mode:hover{transform:translateY(-4px) rotate(var(--hover-tilt,0deg));box-shadow:0 12px 26px #47655616}
.mode::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
 background:radial-gradient(circle at 83% 40%,#b7e2c342,transparent 65%);
 transition:opacity .35s}
.mode:hover::before,.mode.selected::before{opacity:1}
.mode.selected{background:linear-gradient(118deg,#fff 20%,#f6faf6 100%);box-shadow:0 0 0 3px #deeee1,0 6px 22px #6080690c}
.mode.selected .selected-check{animation:check-pop .36s cubic-bezier(.16,1.6,.5,1) both}
.mode-art{display:grid!important;position:absolute;width:68px;height:60px;right:8px;bottom:6px;margin:0;
 opacity:.78;z-index:0;pointer-events:none;border-radius:12px;overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);
 mask-image:linear-gradient(90deg,transparent,#000 22%)}
.mode-art svg{width:85px;height:60px}
.mode-title{position:relative;z-index:1;max-width:calc(100% - 4px)}
.mode-desc{position:relative;z-index:1;padding-right:42px;max-width:100%;font-size:10px}
.mode .selected-check{position:absolute;right:0;top:0}
.pose-art svg{animation:pose-bounce 4s ease-in-out infinite}
.scene-art .sun{width:22px;height:22px;right:12px;top:9px;box-shadow:0 0 14px #ffe6a3a8;
 animation:sun-orbit 5s ease-in-out infinite}
.scene-art .hill.back{animation:hill-drift 7s ease-in-out infinite alternate}
.scene-art .hill.front{animation:hill-drift 8s ease-in-out infinite alternate-reverse}
.scene-art .tiny-person{transform:scale(.6);transform-origin:bottom center;left:52%;bottom:12px;animation:step-bob 2s ease-in-out infinite}
.board-art{padding:5px;gap:3px}
.board-art .frame{height:44px;min-width:0;border-width:2px}
.board-art .frame:nth-child(1){animation:page-sway 4s ease-in-out infinite alternate}
.board-art .frame:nth-child(2){animation:page-sway 4s -1.5s ease-in-out infinite alternate-reverse}
.board-art .frame:nth-child(3){animation:page-sway 5s -2.5s ease-in-out infinite alternate}
.comic-art>img{width:63px;height:73px;border-width:3px;transform:rotate(8deg) translateY(11px);
 animation:comic-peek 5s ease-in-out infinite}
.comic-art .page-corner{right:3px;bottom:5px;padding:3px;font-size:11px}
.create-footer .submit{position:relative;isolation:isolate;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,background .2s}
.create-footer .submit::after{content:"";position:absolute;inset:0;width:48%;left:-70%;pointer-events:none;opacity:.52;
 background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
 transform:skewX(-23deg);animation:button-glint 7s ease-in-out infinite}
.submit:hover{transform:translateY(-2px);box-shadow:0 11px 27px #344c3c2b}
.create-section .mode-grid{animation:rise-into-view .55s .21s both cubic-bezier(.2,.75,.2,1)}
.examples-row{animation:rise-into-view .55s .13s both cubic-bezier(.2,.75,.2,1)}
.composer{animation:rise-into-view .55s .12s both cubic-bezier(.2,.75,.2,1)}
#modeHelp.is-switching{animation:soft-text-enter .31s ease both}
#promptFeedback{display:none}

@keyframes rise-into-view{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes soft-text-enter{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-iridescence{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ambient-shift{from{background-position:0% 0%;transform:translateY(4px)}to{background-position:100% 60%;transform:translateY(-4px)}}
@keyframes orbit-float{0%,100%{transform:translateY(0) rotate(-16deg)}50%{transform:translateY(-9px) rotate(12deg)}}
@keyframes check-pop{from{transform:scale(.72)}to{transform:scale(1)}}
@keyframes pose-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes sun-orbit{0%,100%{transform:translateY(0)}50%{transform:translate(-5px,3px)}}
@keyframes hill-drift{from{transform:translateX(-3px)}to{transform:translateX(4px)}}
@keyframes step-bob{0%,100%{transform:scale(.6) translateY(0)}50%{transform:scale(.6) translateY(-5px)}}
@keyframes page-sway{from{transform:rotate(-9deg) translateY(0)}to{transform:rotate(4deg) translateY(-3px)}}
@keyframes comic-peek{0%,100%{transform:rotate(8deg) translateY(11px)}50%{transform:rotate(3deg) translateY(4px)}}
@keyframes button-glint{0%,57%,100%{left:-70%}72%{left:130%}}

@media(max-width:880px){
 .mode-art{width:60px;height:55px;right:6px}
 .mode-desc{padding-right:33px}
 .orbit-left{left:3%}.orbit-right{right:4%}
}
@media(max-width:600px){
 .hero-orbit{opacity:.38;transform:scale(.7)}
 .orbit-left{left:0%}.orbit-right{right:0%}
 .hero::after{inset:4px 0 -12px}
 .mode-art{width:48px;height:48px;bottom:7px;right:4px;opacity:.7}
 .mode-desc{padding-right:20px}
 .mode{min-height:95px}
 .mode-title{font-size:12px}
 .mode-art svg{width:60px}
 .board-art .frame{height:37px}
 .comic-art>img{height:60px}
}
@media(hover:none),(pointer:coarse){
 .mode:hover{transform:none}
 .submit:hover{transform:none}
 .sample-chip:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .hero::after,.hero h1 .gradient-text,.hero-orbit,.hero-copy,
 .create-section>.section-kicker,.create-section>h2,.create-section>.section-sub,
 .composer,.examples-row,.create-section .mode-grid,#modeHelp.is-switching,
 .mode.selected .selected-check,.pose-art svg,.scene-art .sun,
 .scene-art .hill,.scene-art .tiny-person,.board-art .frame,
 .comic-art>img,.create-footer .submit::after{
   animation:none!important;transform:none!important
 }
 .mode,.composer,.sample-chip,.submit,.mode::before{transition:none!important}
 .mode:hover{transform:none!important}
}