/**
 * CastConductor Preview Shortcode Styles
 * 
 * Styles for the [castconductor_preview] shortcode that embeds
 * the TV preview on the WordPress front-end.
 * 
 * @since 5.7.25
 */

.cc-frontend-preview {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    background: #0b1220;
    margin: 0 auto;
    /* Use Lexend font to match content blocks */
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.cc-frontend-preview .cc-preview-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 720px;
    transform-origin: top left;
    /* Inherit Lexend font */
    font-family: inherit;
}

/* Background Layer */
.cc-frontend-preview .cc-preview-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Containers Layer */
.cc-frontend-preview .cc-preview-containers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.cc-frontend-preview .cc-preview-container {
    position: absolute;
    overflow: hidden;
}

.cc-frontend-preview .cc-preview-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Content Block Transitions */
.cc-frontend-preview .cc-preview-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.cc-frontend-preview .cc-preview-block.active {
    opacity: 1;
    pointer-events: auto;
}

/* Branding Layer */
.cc-frontend-preview .cc-preview-branding {
    position: absolute;
    z-index: 100;
    pointer-events: none;
}

/* Floating animation */
.cc-frontend-preview .cc-logo-animated {
    animation: cc-shortcode-logo-float 6s ease-in-out infinite;
}

@keyframes cc-shortcode-logo-float {
    0%, 100% { 
        transform: translate(-50%, -50%) translateY(0) scale(1);
        opacity: 0.9;
    }
    25% {
        transform: translate(-50%, -50%) translateY(-8px) translateX(5px) scale(1.02);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) translateY(0) translateX(0) scale(1.04);
        opacity: 0.95;
    }
    75% {
        transform: translate(-50%, -50%) translateY(8px) translateX(-5px) scale(1.02);
        opacity: 1;
    }
}

/* Text layer styling - prevent overflow */
.cc-frontend-preview .cc-layer-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ticker animation for scrolling text */
.cc-frontend-preview .cc-ticker-host {
    overflow: hidden;
    position: relative;
}

.cc-frontend-preview .cc-ticker-inner {
    display: inline-block;
    white-space: nowrap;
    animation: cc-shortcode-ticker-scroll 15s linear infinite;
}

@keyframes cc-shortcode-ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Error state */
.cc-preview-error {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
}

/* Responsive scaling */
@media (max-width: 1024px) {
    .cc-frontend-preview {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
    
    .cc-frontend-preview .cc-preview-canvas {
        transform: scale(calc(100vw / 1280)) !important;
    }
}