.visions-composition-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.visions-composition-container .visions-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.visions-composition-container .visions-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    overflow: hidden;
}

.visions-composition-container .visions-media-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    transform: scale(1.2);
    will-change: transform;
}

.visions-composition-container .visions-item.active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

.visions-composition-container .visions-item video,
.visions-composition-container .visions-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.visions-composition-container .visions-media-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5;
}

.visions-composition-container .visions-media-wrapper.visions-grayscale::after {
    opacity: 1;
}

.visions-composition-container .visions-overlay-text {
    position: absolute;
    transform: translate(0, -50%);
    white-space: nowrap;
    pointer-events: auto;
    z-index: 10;
    font-family: sans-serif;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

    /* Dynamic styles from JS */
    color: var(--text-color, #fff);
    font-size: var(--text-size, 16px);

    /* Simple Design */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align items */
    justify-content: center;
    min-width: 200px;
    /* Ensure minimum width for subtext */
    text-align: left;
    /* Left align text */
    transition: text-shadow 0.3s;
}

.visions-composition-container .visions-overlay-text:hover {
    z-index: 20;
}

/* Base Subtext Style */
.visions-composition-container .visions-overlay-subtext {
    font-size: var(--subtext-size, 0.7em);
    font-weight: normal;
    color: var(--subtext-color, inherit);

    /* Constraint to parent width & positioning */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    white-space: normal;
    text-align: left;

    /* Reveal Animation Default (matches 'fade' essentially) */
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    /* Use padding instead of margin to prevent hover gap issues */
    overflow: hidden;
    transition: all 0.3s ease;
}

.visions-composition-container .visions-overlay-text:hover .visions-overlay-subtext {
    max-height: 200px;
    /* Increased to allow wrapping text */
    opacity: 1;
    padding-top: 6px;
}

/* Navigation buttons */
.visions-composition-container .visions-prev,
.visions-composition-container .visions-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 16px;
    cursor: pointer;
    z-index: 10;
    font-size: 18px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.visions-composition-container .visions-prev:hover,
.visions-composition-container .visions-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.visions-composition-container .visions-prev {
    left: 20px;
}

.visions-composition-container .visions-next {
    right: 20px;
}

/* --- New Animations --- */

/* FADE: Smooth opacity, no margin movement (override default if needed, or refine) */
.visions-composition-container .visions-overlay-subtext.visions-animate-fade {
    transition: opacity 0.5s ease;
    padding-top: 6px;
    /* Keep padding fixed so it doesn't slide */
}

.visions-composition-container .visions-overlay-subtext.visions-animate-fade:not(:hover) {
    /* When not hovered (or parent not hovered), hidden state handling */
    /* Since the parent :hover triggers the state, we handle the hidden state on the base element */
    padding-top: 6px;
}

/* Note: The default base style has valid transition properties. 
   We just ensure margin doesn't animate for FADE if we want pure fade.
   But existing default is nice. Let's make FADE just slower/smoother? 
   Actually, 'Fade' usually implies NO movement. */
.visions-composition-container .visions-overlay-subtext.visions-animate-fade {
    padding-top: 6px;
    /* Pre-set padding to avoid slide */
    max-height: 0;
    opacity: 0;
    transition: opacity 0.6s ease, max-height 0s step-end;
    /* Delay max-height close */
}

.visions-composition-container .visions-overlay-text:hover .visions-overlay-subtext.visions-animate-fade {
    max-height: 50px;
    opacity: 1;
    transition: opacity 0.6s ease, max-height 0s step-start;
    /* Immediate max-height open */
}


/* SLIDE: Up from bottom */
.visions-composition-container .visions-overlay-subtext.visions-animate-slide {
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.visions-composition-container .visions-overlay-text:hover .visions-overlay-subtext.visions-animate-slide {
    transform: translateY(0);
    opacity: 1;
}


/* TYPEWRITER: Clip Path Reveal */
.visions-composition-container .visions-overlay-subtext.visions-animate-typewriter {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
    /* Keep opacity 1 so we see it type, but hidden by clip-path/max-height */
    /* We need to ensure max-height/margin toggle happens too */
    max-height: 0;
    margin-top: 0;
    transition: max-height 0s, margin-top 0s;
    /* Immediate layout change */
}

@keyframes visions-typewriter-kf {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

.visions-composition-container .visions-overlay-text:hover .visions-overlay-subtext.visions-animate-typewriter {
    /* Trigger animation */
    padding-top: 6px;
    max-height: 200px;
    opacity: 1;
    animation: visions-typewriter-kf 0.5s steps(40, end) forwards;
}

/* Style: Square */
.visions-composition-container .visions-prev.square,
.visions-composition-container .visions-next.square {
    border-radius: 4px;
}

/* Style: Minimal */
.visions-composition-container .visions-prev.minimal,
.visions-composition-container .visions-next.minimal {
    background-color: transparent;
    font-size: 24px;
    padding: 10px;
    width: auto;
    height: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Social Links */
.visions-composition-container .visions-social-links {
    position: absolute;
    display: flex;
    gap: 10px;
    z-index: 20;
}

.visions-composition-container .visions-social-links.placement-bottom {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
}

.visions-composition-container .visions-social-links.placement-top {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
}

.visions-composition-container .visions-social-links.placement-bottom-left {
    bottom: 20px;
    left: 20px;
    flex-direction: row;
}

.visions-composition-container .visions-social-links.placement-bottom-right {
    bottom: 20px;
    right: 20px;
    flex-direction: row;
}

.visions-composition-container .visions-social-links.placement-top-left {
    top: 20px;
    left: 20px;
    flex-direction: row;
}

.visions-composition-container .visions-social-links.placement-top-right {
    top: 20px;
    right: 20px;
    flex-direction: row;
}

.visions-composition-container .visions-social-link {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-family: sans-serif;
    transition: background-color 0.3s;
    backdrop-filter: blur(4px);
}

.visions-composition-container .visions-social-link:hover {
    background-color: rgba(0, 0, 0, 0.8);
}