/* Taro Animation Styles - Canvas overlay for hero section */
.hero-slider {
    position: relative; /* Establishes a stacking context */
    background-color: #0a0a0a;
}

/* Common styles for all layers to fill the container */
.hero-slider > iframe,
.hero-slider > canvas,
.hero-slider > .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Stacking Order */
.hero-slider > iframe {
    z-index: 1; /* Iframe at the very back */
    border: none;
}

.hero-slider > canvas {
    z-index: 2; /* Canvas in the middle - Taro's layer */
    pointer-events: none; /* Allow clicks to pass through */
}

.hero-slider > .hero-overlay {
    z-index: 3; /* Text overlay on the very top */
    display: flex; /* Helps with vertical centering of text if needed */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}