/* Motion guides attention without changing layout or delaying a control's action. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:180ms}
html.motion-ready{scroll-behavior:smooth}
.artwork-motion{position:relative;display:block;flex-shrink:0;--art-scale:1;isolation:isolate}
.hero-art>.artwork-motion{width:124%;max-width:none;margin-left:-30px}
.artwork-motion>img{display:block;width:100%;height:auto;max-width:none;margin:0;transform:none}
.art-glint{position:absolute;display:block;width:12px;height:12px;opacity:0;pointer-events:none;background:radial-gradient(circle,#fff 0 9%,#fff8 12%,transparent 45%);transform:scale(.5);z-index:1}
.art-glint:before,.art-glint:after{content:"";position:absolute;inset:47% 0;background:linear-gradient(90deg,transparent,#fff,transparent)}
.art-glint:after{transform:rotate(90deg)}
.glint-1{left:31%;top:27%;--glint-delay:-2.2s}.glint-2{left:31%;top:58%;--glint-delay:-5.7s}.glint-3{left:66%;top:34%;--glint-delay:-.8s}
@keyframes artwork-float{0%,100%{transform:translate3d(0,0,0) rotate(-.25deg) scale(var(--art-scale))}50%{transform:translate3d(0,-5px,0) rotate(.3deg) scale(var(--art-scale))}}
@keyframes stone-glimmer{0%,72%,100%{opacity:0;transform:scale(.45) rotate(0)}79%{opacity:.8;transform:scale(1.05) rotate(12deg)}87%{opacity:0;transform:scale(.65) rotate(24deg)}}
/* Only the visible artwork runs; offscreen and background tabs remain still. */
html.motion-ready .artwork-motion{animation:artwork-float 8.8s ease-in-out infinite;animation-play-state:paused}
html.motion-ready .artwork-motion.is-in-view{animation-play-state:running}
html.motion-ready .artwork-motion .art-glint{animation:stone-glimmer 9s ease-in-out var(--glint-delay) infinite;animation-play-state:paused}
html.motion-ready .artwork-motion.is-in-view .art-glint{animation-play-state:running}
html.motion-suspended .artwork-motion,html.motion-suspended .artwork-motion .art-glint{animation-play-state:paused!important}
button,a,select,input,.upload-zone,summary{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.mobile-steps button,.pattern-mode button,.view-options button,.size-options button,.custom-presets button,.examples button,.language-list button{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,box-shadow 200ms ease,transform 160ms var(--motion-ease)}
button:not(:disabled):active,.hero-action:active,.header-action:active,.upload-zone:active{transform:translateY(1px)}
.color-row,.box-cell{transition:background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
.color-row.active{box-shadow:inset 3px 0 #7545bc}
.crop-disclosure>summary span,.box-disclosure>summary span{transition:transform 220ms var(--motion-ease)}
.idea-art canvas{transition:transform 420ms var(--motion-ease)}
.toast{transition:opacity 180ms ease,transform 240ms var(--motion-ease)}
dialog::backdrop{background:#25153355;animation:backdrop-arrive 180ms ease both}
@keyframes backdrop-arrive{from{background:#25153300}to{background:#25153355}}
@media(hover:hover) and (pointer:fine){.idea-item:hover .idea-art canvas,.idea-item:focus-visible .idea-art canvas{transform:translateY(-5px) rotate(-1deg)}.hero-action:hover,.header-action:hover{box-shadow:0 5px 16px #43246724}}
@media(min-width:901px) and (max-width:1200px){.hero-art>.artwork-motion{width:130%;margin-left:-20px}}
@media(min-width:901px) and (max-width:1000px){.hero-art>.artwork-motion{width:138%;margin-left:-15px}}
@media(max-width:900px){
 .mobile-only.mobile-intro>.artwork-motion{grid-column:2;grid-row:3;display:block;position:relative;width:calc(100% + 23px);margin:0 -16px 0 0;--art-scale:1.12;transform:scale(1.12)}
 .mobile-only.mobile-intro>.artwork-motion>img{width:100%;height:auto;max-width:none;margin:0;transform:none}
 .mobile-intro .art-glint{width:9px;height:9px}
 .hero-art>.artwork-motion{width:110%;margin-left:0}
}
@media(max-width:370px){.mobile-only.mobile-intro>.artwork-motion{width:calc(100% + 20px)}}
@media(prefers-reduced-motion:reduce){
 html.motion-ready .artwork-motion,html.motion-ready .artwork-motion .art-glint{animation:none!important}
 .artwork-motion{transform:scale(var(--art-scale))!important}.art-glint{display:none}
 button,a,select,input,.upload-zone,summary,.color-row,.box-cell,.idea-art canvas,.toast,.crop-disclosure>summary span,.box-disclosure>summary span{transition:none!important}
 button:active,.hero-action:active,.header-action:active,.upload-zone:active,.idea-item:hover .idea-art canvas,.idea-item:focus-visible .idea-art canvas{transform:none!important}
 dialog::backdrop{animation:none}html{scroll-behavior:auto!important}
}
@media print{.artwork-motion,.art-glint{animation:none!important}.art-glint{display:none}*{transition:none!important}}