@property --ai-reveal-fill-angle{syntax: "<angle>"; inherits: false; initial-value: 90deg;}@property --ai-comparison-fill-angle{syntax: "<angle>"; inherits: false; initial-value: 90deg;}@keyframes ai-reveal-rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes ai-reveal-fill{0%{--ai-reveal-fill-angle: 90deg}to{--ai-reveal-fill-angle: 360deg}}@keyframes ai-reveal-content{0%{opacity:0;filter:blur(2px);transform:translateY(5px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}@keyframes ai-gradient-comparison-discrete{0%{background-image:conic-gradient(color-mix(in srgb,var(--accent) 72%,#86efac) 0deg 60deg,color-mix(in srgb,var(--accent) 34%,var(--preview-border)) 60deg 90deg,transparent 90deg 360deg)}to{background-image:conic-gradient(color-mix(in srgb,var(--accent) 72%,#86efac) 0deg 60deg,color-mix(in srgb,var(--accent) 34%,var(--preview-border)) 60deg 360deg,transparent 360deg 360deg)}}@keyframes ai-gradient-comparison-interpolated{0%{--ai-comparison-fill-angle: 90deg}to{--ai-comparison-fill-angle: 360deg}}.ai-result-frame{--ai-reveal-fill-angle: 90deg;position:relative;isolation:isolate;contain:paint;padding:2px;border-radius:18px}.ai-result-frame:before{position:absolute;z-index:0;top:50%;left:50%;width:200%;height:200%;content:"";background:conic-gradient(color-mix(in srgb,var(--accent) 72%,#86efac) 0deg 60deg,color-mix(in srgb,var(--accent) 34%,var(--preview-border)) 60deg var(--ai-reveal-fill-angle),transparent var(--ai-reveal-fill-angle) 360deg);filter:blur(20px);pointer-events:none;transform:translate(-50%,-50%) rotate(0);transform-origin:center;animation:ai-reveal-rotate 1.2s cubic-bezier(.65,0,.35,1) forwards,ai-reveal-fill .8s cubic-bezier(.22,1,.36,1) 1.2s forwards}.ai-result-frame--controlled:before{--ai-reveal-fill-angle: var(--ai-reveal-controlled-fill-angle);transform:translate(-50%,-50%) rotate(var(--ai-reveal-controlled-rotation));animation:none}.ai-result-card{position:relative;z-index:1;overflow:hidden;border-radius:16px;background:var(--preview-surface)}.ai-result-section{opacity:0;animation:ai-reveal-content .6s cubic-bezier(.22,1,.36,1) forwards}.ai-result-section--controlled{animation:none}.ai-gradient-layer-canvas{position:relative;contain:paint;overflow:hidden;border:1px solid var(--preview-border);border-radius:16px;background:var(--preview-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--preview-surface) 75%,transparent)}.ai-gradient-layer-canvas:before{--ai-reveal-fill-angle: 90deg;position:absolute;top:50%;left:50%;width:200%;height:200%;content:"";background:conic-gradient(color-mix(in srgb,var(--accent) 72%,#86efac) 0deg 60deg,color-mix(in srgb,var(--accent) 34%,var(--preview-border)) 60deg var(--ai-reveal-fill-angle),transparent var(--ai-reveal-fill-angle) 360deg);filter:blur(20px);transform:translate(-50%,-50%) rotate(0);transform-origin:center;animation:ai-reveal-rotate 2.4s linear infinite}.ai-gradient-layer-canvas--paused:before{animation-play-state:paused}.ai-gradient-comparison-canvas{position:relative;overflow:hidden;border:1px solid var(--preview-border);border-radius:14px;background-color:var(--preview-surface)}.ai-gradient-comparison-canvas--discrete{animation:ai-gradient-comparison-discrete 2.4s linear infinite alternate}.ai-gradient-comparison-canvas--property{--ai-comparison-fill-angle: 90deg;background-image:conic-gradient(color-mix(in srgb,var(--accent) 72%,#86efac) 0deg 60deg,color-mix(in srgb,var(--accent) 34%,var(--preview-border)) 60deg var(--ai-comparison-fill-angle),transparent var(--ai-comparison-fill-angle) 360deg);animation:ai-gradient-comparison-interpolated 2.4s linear infinite alternate}.ai-gradient-comparison-canvas--paused{animation-play-state:paused}.ai-gradient-fill-canvas{position:relative;overflow:hidden;border:1px solid var(--preview-border);border-radius:16px;background-color:var(--preview-surface);background-image:conic-gradient(color-mix(in srgb,var(--accent) 72%,#86efac) 0deg 60deg,color-mix(in srgb,var(--accent) 34%,var(--preview-border)) 60deg var(--ai-demo-fill-angle),transparent var(--ai-demo-fill-angle) 360deg)}@media(prefers-reduced-motion:reduce){.ai-result-frame:before{--ai-reveal-fill-angle: 360deg;transform:translate(-50%,-50%) rotate(360deg);animation:none}.ai-result-section{opacity:1;filter:none;transform:none;animation:none}.ai-gradient-layer-canvas:before{transform:translate(-50%,-50%) rotate(0);animation:none}.ai-gradient-comparison-canvas--discrete,.ai-gradient-comparison-canvas--property{--ai-comparison-fill-angle: 360deg;background-image:conic-gradient(color-mix(in srgb,var(--accent) 72%,#86efac) 0deg 60deg,color-mix(in srgb,var(--accent) 34%,var(--preview-border)) 60deg 360deg);animation:none}}