/* prizmWidget.css */

/* Add or ensure your .prism-controls styles are good */
.prism-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    background-color: #223C59;
    border-top: 1px solid #333;
    height: 50px; /* Explicit height for controls */
    box-sizing: border-box;
    z-index: 10; /* Ensure controls are always on top */
}

.control-arrow {
    background: none; /* Remove default button background */
    border: none;
    color: #ff9900; /* Neon blue color */
    font-size: 2em; /* Larger arrows */
    cursor: pointer;
    padding: 0 15px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); /* Subtle glow */
}

.control-arrow:hover {
    color: #a0ffff; /* Lighter on hover */
    text-shadow: 0 0 10px rgba(0, 255, 255, 1); /* Stronger glow on hover */
}

/* For the dots indicator */
.dots-indicator {
    display: flex;
    gap: 8px; /* Space between dots */
    margin: 0 20px; /* Space between arrows and dots */
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #555; /* Inactive dot color */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 1px solid #ff9900; /* Outline */
}

.dot.active {
    background-color: #ff9900; /* Active dot color */
    transform: scale(1.2); /* Slightly larger active dot */
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.8); /* Glow for active dot */
}

.dynamic-prism-widget {
    /* Set a defined height for the widget itself */
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    
 
    
    display: flex; /* Use flexbox for vertical layout */
    flex-direction: column; /* Stack children vertically */
    
    position: relative; /* If you have positioned children */
    overflow: hidden; /* Crucial for clipping the prism effects */
    background-color: #1a1a1a; /* Add a background for visibility */
    border-radius: 8px; /* Optional: nice rounded corners */
}

.prism-display {
    flex-grow: 1; /* Takes up remaining space */
    position: relative; /* This is important for .image-container to be absolute relative to it */
    width: 100%;
    overflow: hidden; /* Important for images */
    /* REMOVE: height: calc(100% - 50px); -- let flex-grow handle it */
}

.image-container {
    /* Keep this relative to .prism-display */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Below the effects overlay */
}

.prism-image {
    position: absolute; /* Stack images for cross-fading */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.7s ease-in-out; /* Smooth cross-fade */
}

.prism-image.active {
    opacity: 1; /* Only active image is visible */
}


.prism-effects-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Above images */
    pointer-events: none; /* Allows clicks to pass through */
    opacity: 0; /* Hidden by default */
}

/* Animations for prism effects */
.prism-effects-overlay.active {
    opacity: 1; /* Make visible when active */
    animation: fade-out-prism-overlay 1.5s forwards ease-in-out; /* Fade out after effect */
}

@keyframes fade-out-prism-overlay {
    0% { opacity: 1; }
    50% { opacity: 1; } /* Hold visible during peak effect */
    100% { opacity: 0; }
}


.prism-burst {
    transform-origin: center center;
    /*animation: none;  Controlled by JS / class toggling */
    opacity: 0;
}
.prism-effects-overlay.active .prism-burst {
    animation: prism-burst-anim 0.8s forwards cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes prism-burst-anim {
    0% { r: 0; opacity: 0; transform: scale(0.5); }
    30% { r: 500px; opacity: 1; transform: scale(1); } /* Max size, max opacity */
    100% { r: 700px; opacity: 0; transform: scale(1.5); } /* Expand and fade */
}

.prism-streak {
    stroke-dasharray: 1000; /* Long enough for full path */
    stroke-dashoffset: 1000; /* Hidden initially */
    transform-origin: center center;
    opacity: 0;
}
.prism-effects-overlay.active .prism-streak:nth-child(2) {
    animation: prism-streak-anim 1s forwards ease-out;
    animation-delay: 0.1s;
    opacity: 1;
}
.prism-effects-overlay.active .prism-streak:nth-child(3) {
    animation: prism-streak-anim 1s forwards ease-out reverse; /* Animate in reverse for effect */
    animation-delay: 0.2s;
    opacity: 1;
}
@keyframes prism-streak-anim {
    0% { stroke-dashoffset: 1000; opacity: 0; transform: scaleX(0.5); }
    50% { opacity: 1; transform: scaleX(1); }
    100% { stroke-dashoffset: 0; opacity: 0; transform: scaleX(1.2); }
}

.widget-title-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #ff9900;
    font-family: 'Electrolize', sans-serif; /* Or another sci-fi font */
    font-size: 0.9em;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
    z-index: 3;
}

.dot.dot-cycling {
    /* Example cycling style: a different color, maybe a quick pulse */
    background-color: #55aaff; /* A distinct cycling color */
    transform: scale(1.1); /* Slightly larger, but not as large as active */
    box-shadow: 0 0 6px rgba(85, 170, 255, 0.7); /* Subtle glow for cycling */
    /* Add a slight animation to make it pulse if you want more visual flair */
    /* animation: dot-pulse 0.6s infinite alternate ease-in-out; */
}