/* ============================================
   CIAOOPS — Motion layer
   Experiência fluida / contemporânea
   (hover, vídeo no hero, cursor, reveals)
   ============================================ */

/* ---- Hero vídeo ---- */
.hero-bg {
    overflow: hidden;
    background-color: #0b1220;
}

.hero-bg--empty {
    background-image: none;
}

.hero-video,
.hero-video-youtube {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero-video {
    object-fit: cover;
    object-position: center center;
}

.hero-video-youtube {
    overflow: hidden;
}

.hero-video-youtube iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.78%;
    transform: translate(-50%, -50%);
    border: 0;
}

.hero-slide.swiper-slide-active .hero-video.is-playing,
.hero-slide.swiper-slide-active .hero-video[data-ready="1"],
.hero-slide.swiper-slide-active .hero-video-youtube.is-playing {
    opacity: 1;
}

.hero-slide[data-has-video="1"] .hero-bg {
    background-size: cover;
}

/* Controles discretos do vídeo + fallback Assistir */
.hero-media-ui {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.hero-watch-btn,
.hero-media-toggle {
    pointer-events: auto;
    border: 0;
    cursor: pointer;
    color: #fff;
    background: rgba(8, 14, 28, 0.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        background-color 0.25s ease,
        visibility 0.35s ease;
}

.hero-watch-btn {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.78rem 1.35rem;
    border-radius: 999px;
    font-family: var(--font-body, inherit);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0;
    visibility: hidden;
}

.hero-watch-btn i {
    font-size: 0.85rem;
}

.hero-slide--needs-play .hero-watch-btn {
    opacity: 1;
    visibility: visible;
}

.hero-watch-btn:hover,
.hero-watch-btn:focus-visible {
    background: rgba(8, 14, 28, 0.72);
    outline: none;
}

.hero-media-toggle {
    position: absolute;
    left: 1.15rem;
    bottom: 1.15rem;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
}

.hero-section.is-media-ui-visible .hero-slide.swiper-slide-active[data-media-state="playing"] .hero-media-toggle,
.hero-section.is-hero-ui-visible .hero-slide.swiper-slide-active[data-media-state="playing"] .hero-media-toggle,
.hero-section.is-media-ui-visible .hero-slide.swiper-slide-active[data-media-state="paused"] .hero-media-toggle,
.hero-section.is-hero-ui-visible .hero-slide.swiper-slide-active[data-media-state="paused"] .hero-media-toggle,
.hero-slide.swiper-slide-active[data-media-state="paused"] .hero-media-toggle {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Setas: somem com mouse parado ou fora do hero */
.hero-section:not(.hero-section--no-arrows) .hero-prev,
.hero-section:not(.hero-section--no-arrows) .hero-next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        background-color 0.3s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section.is-hero-ui-visible:not(.hero-section--no-arrows) .hero-prev,
.hero-section.is-hero-ui-visible:not(.hero-section--no-arrows) .hero-next,
.hero-section:not(.hero-section--no-arrows):focus-within .hero-prev,
.hero-section:not(.hero-section--no-arrows):focus-within .hero-next {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hero-media-toggle:hover,
.hero-media-toggle:focus-visible {
    background: rgba(8, 14, 28, 0.72);
    outline: none;
}

.hero-media-toggle[hidden],
.hero-watch-btn[hidden] {
    display: none !important;
}

@media (max-width: 991.98px) {
    .hero-media-toggle {
        left: 0.85rem;
        bottom: 4.25rem;
        width: 2.35rem;
        height: 2.35rem;
    }

    .hero-watch-btn {
        top: 55%;
        padding: 0.7rem 1.15rem;
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-watch-btn,
    .hero-media-toggle {
        transition: none;
    }
}

/* ---- Repertório: hover contemporâneo ---- */
.espetaculo-card {
    position: relative;
    isolation: isolate;
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.espetaculo-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.espetaculo-card .espetaculo-image > img,
.espetaculo-card .espetaculo-slideshow-slide {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    will-change: transform;
}

.espetaculo-card:hover .espetaculo-image > img,
.espetaculo-card:hover .espetaculo-slideshow-slide {
    transform: scale(1.08);
}

.espetaculo-card .espetaculo-overlay {
    transition: opacity 0.4s ease;
}

/* ---- Micro-interações em botões / links ---- */
.btn,
.section-slider-arrow,
.hero-prev,
.hero-next,
.nav-link,
.back-to-top,
.whatsapp-float {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.section-slider-arrow:hover {
    transform: translateY(-50%) scale(1.06);
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

.section-slider-arrow:active {
    transform: translateY(-50%) scale(0.98);
}

/* ---- Reveal / stagger (reforço do AOS) ---- */
[data-aos] {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.motion-stagger > * {
    --stagger-i: 0;
}

/* ---- Cursor personalizado (desktop) ---- */
.cursor-dot,
.cursor-ring {
    display: none;
}

body.has-custom-cursor {
    cursor: none;
}

body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor .espetaculo-card,
body.has-custom-cursor .integrante-card,
body.has-custom-cursor .noticia-card,
body.has-custom-cursor .section-slider-arrow,
body.has-custom-cursor input,
body.has-custom-cursor textarea,
body.has-custom-cursor select,
body.has-custom-cursor label,
body.has-custom-cursor [role="button"] {
    cursor: none;
}

body.has-custom-cursor .cursor-dot,
body.has-custom-cursor .cursor-ring {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, width, height, opacity;
}

body.has-custom-cursor .cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--color-cyan);
    mix-blend-mode: difference;
    transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, opacity 0.2s ease;
}

body.has-custom-cursor .cursor-ring {
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(0, 181, 204, 0.75);
    transition:
        width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        opacity 0.25s ease,
        background 0.3s ease;
}

body.has-custom-cursor.cursor-hover .cursor-dot {
    width: 0;
    height: 0;
    opacity: 0;
}

body.has-custom-cursor.cursor-hover .cursor-ring {
    width: 64px;
    height: 64px;
    border-color: var(--color-yellow);
    background: rgba(253, 225, 0, 0.08);
}

body.has-custom-cursor.cursor-down .cursor-ring {
    width: 28px;
    height: 28px;
    opacity: 0.7;
}

body.has-custom-cursor.cursor-hidden .cursor-dot,
body.has-custom-cursor.cursor-hidden .cursor-ring {
    opacity: 0;
}

/* Tema escuro: leve ajuste de contraste do cursor */
[data-theme="theme2"].has-custom-cursor .cursor-ring {
    border-color: rgba(0, 181, 204, 0.9);
}

/* Acessibilidade / touch */
@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
    body.has-custom-cursor,
    body.has-custom-cursor * {
        cursor: auto !important;
    }

    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }

    .espetaculo-card:hover {
        transform: none;
    }

    .espetaculo-card:hover .espetaculo-image > img,
    .espetaculo-card:hover .espetaculo-slideshow-slide {
        transform: none;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .espetaculo-card,
    .espetaculo-card .espetaculo-image > img,
    .espetaculo-card .espetaculo-slideshow-slide,
    .btn,
    .section-slider-arrow,
    .hero-video {
        transition: none !important;
    }

    .espetaculo-card:hover {
        transform: none;
    }

    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }

    body.has-custom-cursor,
    body.has-custom-cursor * {
        cursor: auto !important;
    }
}