/**
 * ASCIIfy – shared widget styles.
 *
 * @package Asciify
 */

.asciify-output pre {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1;
    letter-spacing: 0;
    white-space: pre;
    overflow: hidden;
    background: #000;
    color: #0f0;
    padding: 10px;
    border-radius: 4px;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    box-sizing: border-box;
}

/* Image / video widgets: ASCII art should fill edge-to-edge. */
.asciify-image-widget pre,
.asciify-video-widget .asciify-video-pre {
    padding: 0;
}

/* Container defaults – width / max-width / alignment set by Elementor. */
.asciify-output {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    transition: opacity 0.3s, transform 0.3s;
}

.asciify-output pre {
    transition: background-color 0.3s, border-color 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

/* ---- Video widget ------------------------------------------------- */

.asciify-video-widget {
    position: relative;
}

.asciify-video-widget .asciify-video-source {
    /* Hidden: only used as pixel source. */
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.asciify-video-widget .asciify-video-canvas {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.asciify-video-widget .asciify-video-pre {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1;
    letter-spacing: 0;
    white-space: pre;
    overflow: hidden;
    padding: 0;
    border-radius: 4px;
    margin: 0;
}

/* Loading state */
.asciify-loading {
    opacity: 0.5;
    animation: asciify-pulse 1.2s ease-in-out infinite;
}

@keyframes asciify-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* ---- Play button overlay ------------------------------------------ */

.asciify-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
}

.asciify-play-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
}

.asciify-play-btn svg,
.asciify-play-btn img {
    fill: currentColor;
}

.asciify-download-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.68);
    color: #ffffff;
    font: 600 12px/1 "Courier New", Courier, monospace;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.asciify-download-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.82);
    border-color: rgba(255, 255, 255, 0.34);
    transform: translateY(-1px);
}

.asciify-download-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ---- motion.js enhancement defaults ------------------------------- */

/*
 * The JS layer sets opacity:0 and translateY(12px) inline before
 * running the entrance animation.  These rules ensure widgets stay
 * visible if motion.js fails to load (progressive enhancement).
 */
.asciify-output,
.asciify-video-widget {
    will-change: opacity, transform;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover lift -- only activates when asciify-motion marks the element */
[data-asciify-hover="1"] {
    cursor: pointer;
}