/*
 * iOS Safari GPU Memory Leak Fix:
 * - Removed @property animations (causes gradient re-rasterization each frame)
 * - Use transform: rotate() on elements instead (GPU-accelerated, no re-raster)
 * - Static conic-gradient + rotating container = same visual, no leak
 */

@keyframes _glow-rotate_1sq6e_1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes _progress_1sq6e_18 {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

._progressBar_1sq6e_18 {
    animation-name: _progress_1sq6e_18;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

._demoRoot_1sq6e_24 {
    --black: hsl(180 0% 6%);
    --screen: hsl(180 0% 9%);
    --animation: 3000ms;
    --radius: 16px;
    /* Static glow gradient - origin is centered for rotation */
    --glow-gradient: conic-gradient(from 0deg at 50% 50%,
            #BC82F3,
            #F5B9EA,
            #8D99FF,
            #AA6EEE,
            #FF6778,
            #FFBA71,
            #C686FF);
}

._windowGlowContainer_1sq6e_40 {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 50;
}

/*
 * Window glow uses a rotating pseudo-element technique:
 * - The ::before holds the static gradient and rotates
 * - The parent masks/clips and handles opacity transitions
 * - This is GPU-composited (transform) not re-rasterized (gradient angle)
 */
._windowGlowRing_1sq6e_55 {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    -webkit-mask-image:
        linear-gradient(to bottom, black 0px, rgba(0, 0, 0, 0.4) 0px, transparent 20px, transparent calc(100% - 20px), rgba(0, 0, 0, 0.4) calc(100% - 0px), black 100%),
        linear-gradient(to right, black 0px, rgba(0, 0, 0, 0.4) 0px, transparent 20px, transparent calc(100% - 20px), rgba(0, 0, 0, 0.4) calc(100% - 0px), black 100%);
    mask-image:
        linear-gradient(to bottom, black 0px, rgba(0, 0, 0, 0.4) 0px, transparent 20px, transparent calc(100% - 20px), rgba(0, 0, 0, 0.4) calc(100% - 0px), black 100%),
        linear-gradient(to right, black 0px, rgba(0, 0, 0, 0.4) 0px, transparent 20px, transparent calc(100% - 20px), rgba(0, 0, 0, 0.4) calc(100% - 0px), black 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
    filter: blur(2px);
    opacity: 0;
    transition: opacity 0.5s ease;
}

._windowGlowRing_1sq6e_55::before {
    content: '';
    position: absolute;
    /* Oversized to cover corners during rotation */
    inset: -50%;
    background-image: var(--glow-gradient);
    animation: _glow-rotate_1sq6e_1 var(--animation) linear infinite;
    will-change: transform;
}

._windowGlowRingVisible_1sq6e_82 {
    opacity: 1;
}

/*
 * Shimmer animation - moves gradient across element
 * -200% ensures full cycle through all gradient colors
 */
@keyframes _glow-shimmer_1sq6e_1 {
    0% { background-position: -200% 50%; }
    100% { background-position: 0% 50%; }
}

/*
 * AI Mode Badge: Softer angled gradient
 */
._aiModeBadge_1sq6e_98 {
    background: linear-gradient(
        90deg,
        #BC82F3 0%,
        #F5B9EA 14%,
        #8D99FF 28%,
        #AA6EEE 42%,
        #FF6778 56%,
        #FFBA71 70%,
        #C686FF 84%,
        #BC82F3 100%);
    background-size: 400% 100%;
    animation: _glow-shimmer_1sq6e_1 5s linear infinite;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}
._aiModeBadge_1sq6e_98::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.1);
}

/*
 * File Row Glow: Animated gradient with full color palette
 */
._fileRowGlow_1sq6e_126 {
    background: linear-gradient(
        90deg,
        #BC82F3 0%,
        #F5B9EA 14%,
        #8D99FF 28%,
        #AA6EEE 42%,
        #FF6778 56%,
        #FFBA71 70%,
        #C686FF 84%,
        #BC82F3 100%
    );
    background-size: 400% 100%;
    animation: _glow-shimmer_1sq6e_1 5s linear infinite;
    /* Ensure text is readable on this gradient */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
._fileRowGlow_1sq6e_126::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.1);
}

._demoNavAnchor_1sq6e_153 {
    display: flex;
    justify-content: center;
}

._demoNavInFlow_1sq6e_158 {
    display: inline-flex;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 999px;
}

._demoNavPill_1sq6e_165 {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
}

._demoNavInFlowVisible_1sq6e_172 {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    backdrop-filter: none;
}

._demoNavFloating_1sq6e_179 {
    position: fixed;
    bottom: 1rem;
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
    z-index: 70;
}

._demoNavHiddenAll_1sq6e_187 {
    opacity: 0;
    pointer-events: none;
}

._demoNavInFlow_1sq6e_158 {
    transition: opacity 700ms ease;
}

@media (min-width: 768px) {
    ._demoNavFloating_1sq6e_179 {
        display: none;
    }
}