/**
 * ============================================================
 * COVER GENERATOR — COMING SOON PRODUCT LOCAL CSS
 * Purpose: Keep only WooCommerce host handling and Cover Generator-specific
 * motion here. Shared card/badge/title/message visuals now live in
 * shared/ui/css/songshove-ui.css as .ss-coming-soon components.
 * Coded: 2026-09-14
 * ============================================================
 */

/* PRODUCT HOST — keep the WooCommerce/block-theme product container alive,
 * but hide its normal product contents after the placeholder is inserted.
 * Coded: 2026-09-14 */
.cover-generator-coming-soon-page .cover-generator-product-placeholder > *:not(.cover-generator-coming-soon) {
    display: none !important;
}

.cover-generator-coming-soon-page .cover-generator-product-placeholder {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

/* COVER GENERATOR COMING SOON MOTION — feature-specific animation remains local.
 * Coded: 2026-09-14 */
.cover-generator-coming-soon {
    position: relative;
    overflow: hidden;
    animation: cover-generator-coming-soon-enter 520ms ease-out both;
}

.cover-generator-coming-soon::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #20D8FF 0%, #347DFF 35%, #785CFF 68%, #F245C7 100%);
    background-size: 220% 100%;
    animation: cover-generator-coming-soon-sweep 3.2s linear infinite;
}

.cover-generator-coming-soon__badge {
    animation: cover-generator-coming-soon-pulse 2.4s ease-in-out infinite;
}

.cover-generator-coming-soon__title {
    background: linear-gradient(90deg, #08172F 0%, #347DFF 35%, #785CFF 65%, #08172F 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: cover-generator-coming-soon-title 4.2s ease-in-out infinite;
}

@keyframes cover-generator-coming-soon-enter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cover-generator-coming-soon-sweep {
    from { background-position: 100% 0; }
    to { background-position: -120% 0; }
}

@keyframes cover-generator-coming-soon-pulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 0 rgba(52, 125, 255, 0);
    }
    50% {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(52, 125, 255, 0.22);
    }
}

@keyframes cover-generator-coming-soon-title {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .cover-generator-coming-soon,
    .cover-generator-coming-soon::before,
    .cover-generator-coming-soon__badge,
    .cover-generator-coming-soon__title {
        animation: none !important;
    }
}