/* Add brasco-cinematic-hero to the existing Divi SECTION.
   Keep its 100vh height and flex settings in Divi. No layout dimensions here. */
.brasco-cinematic-hero {
    --brasco-hero-enabled: 1;
    --brasco-hero-gradient: linear-gradient(180deg, rgba(227, 136, 59, 0.83) 0%, rgba(208, 67, 103, 0.75) 100%);

    position: relative;
    isolation: isolate;

    /* Always available, including without JavaScript and inside the builder. */
    background-image: var(--brasco-hero-gradient), url("assets/mural.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
}

/* Negative z-index within the isolated section puts this ABOVE its background
   but BELOW its existing content, without altering row/module z-index values.
   Clip this layer only, so menus and other section content can overflow. */
.brasco-cinematic-hero > .brasco-hero__visual {
    position: absolute;
    inset: 0;
    z-index: -1;

    display: block;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.brasco-cinematic-hero > .brasco-hero__visual::after {
    position: absolute;
    inset: 0;
    content: "";
    background-image: var(--brasco-hero-gradient);
}

.brasco-cinematic-hero > .brasco-hero__visual > canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.brasco-cinematic-hero.brasco-hero--ready > .brasco-hero__visual {
    opacity: 1;
}

.brasco-cinematic-hero.brasco-hero--still > .brasco-hero__visual {
    opacity: 0;
}

/* Optional headline reveal: tied to the 3D entrance when images load quickly.
   Both timers and a finite CSS animation reveal the text if loading stalls. */
.brasco-cinematic-hero.brasco-hero--loading .brasco-hero-reveal {
    animation: brasco-hero-loading-text 2.2s both;
}
.brasco-cinematic-hero.brasco-hero--intro .brasco-hero-reveal {
    animation: brasco-hero-text-in 1s .9s backwards;
}
.brasco-cinematic-hero.brasco-hero--paused .brasco-hero-reveal {
    animation-play-state: paused;
}
.brasco-cinematic-hero.brasco-hero--still .brasco-hero-reveal {
    animation: none !important;
}
@keyframes brasco-hero-text-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes brasco-hero-loading-text {
    0%, 65% { opacity: 0; }
    100% { opacity: 1; }
}

/* Visual Builder uses the original still image. */
body.et-fb-active .brasco-cinematic-hero > .brasco-hero__visual,
body.et-fb .brasco-cinematic-hero > .brasco-hero__visual {
    display: none !important;
}
body.et-fb-active .brasco-cinematic-hero .brasco-hero-reveal,
body.et-fb .brasco-cinematic-hero .brasco-hero-reveal {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .brasco-cinematic-hero > .brasco-hero__visual {
        display: none !important;
    }
    .brasco-cinematic-hero .brasco-hero-reveal {
        animation: none !important;
    }
}

/* Pause the continuous background drift without altering the Divi content. */
.brasco-cinematic-hero > .brasco-hero__motion-toggle {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(35, 28, 34, .25);
    color: #fff;
    font: 18px/1 Arial, sans-serif;
    cursor: pointer;
    display: none !important;
}
.brasco-cinematic-hero > .brasco-hero__motion-toggle:hover {
    background: rgba(35, 28, 34, .45);
}
.brasco-cinematic-hero > .brasco-hero__motion-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.brasco-cinematic-hero > .brasco-hero__motion-toggle[hidden],
body.et-fb-active .brasco-hero__motion-toggle,
body.et-fb .brasco-hero__motion-toggle {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .brasco-cinematic-hero > .brasco-hero__motion-toggle {
        display: none !important;
    }
}