/**
 * Text Overlay GSAP Widget Styles
 */

.wml-text-overlay-gsap {
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-color: #000;
}

.wml-tog-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

.wml-tog-overlay {
    z-index: 3;
    background-color: #000;
    transform-origin: center center;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Video Background */
.wml-tog-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
}

/* Blend Mode - Text knockout effect */
/* .wml-tog-blend-active removed - now using SVG Mask */

/* Text Overlay Styling */
.wml-tog-overlay-text {
    font-size: 8vw;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    display: block;
}

/* SVG Mask Text Overrides */
text.wml-tog-overlay-text {
    display: block;
    /* SVG doesn't use display:block usually but for safety */
    fill: black !important;
    /* Transparency in white mask */
    color: black !important;
    white-space: pre;
    /* SVG default */
}

/* Enforce black for SVG mask elements to create hole */
.wml-tog-mask-svg,
.wml-tog-mask-svg * {
    fill: black !important;
    stroke: black !important;
    color: black !important;
}

/* SVG Styling */
.wml-tog-svg {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

/* Responsive */
@media (max-width: 768px) {
    .wml-tog-overlay-text {
        font-size: 10vw;
    }
}