/* O wrapper é responsável pelo posicionamento, efeito de mistura e intensidade. */
.shadow-wrapper {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    overflow: hidden; 
    pointer-events: none; 
    z-index: 1;
    mix-blend-mode: multiply; /* O efeito é aplicado no container pai */
    opacity: 0.5;             /* A intensidade geral do efeito */
}

/* Os filhos (poster e video) só se preocupam em ocupar o espaço. */
.shadow-poster, .shadow-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 102%;
    min-height: 102%;
    width: auto;
    height: auto;
    object-fit: cover;
    /* A transição de opacidade criará o efeito de cross-fade */
    transition: opacity 1.5s ease-in-out;
}

/* ESTADO INICIAL: Por padrão, o poster é visível e o vídeo não. */
.shadow-poster {
    background-image: url('https://atelieaugusto.com/wp-content/uploads/2026/03/shadow-rame-001.jpeg');
    background-size: cover; 
    background-position: center;
    opacity: 1;
}

.shadow-video {
    opacity: 0;
}

/* ESTADO VÍDEO ATIVO: Quando o vídeo está tocando, ele aparece e o poster desaparece. */
.shadow-wrapper.video-active .shadow-video {
    opacity: 0.7;
}

.shadow-wrapper.video-active .shadow-poster {
    opacity: 0;
}

/* ======================================================= */
/* ESTADO FALLBACK: O poster é animado para parecer vivo. */
/* ======================================================= */

.shadow-wrapper.fallback-active .shadow-poster {
    opacity: 1;
    /* 
      A animação agora é um ciclo contínuo, não mais um "alternate".
      Isso permite uma coreografia mais complexa e menos previsível.
    */
    animation: sway 7s ease-in-out infinite;
}

.shadow-wrapper.fallback-active .shadow-video {
    opacity: 0;
}

/* 
  A animação "sway" foi redesenhada com múltiplos keyframes para criar "rotinas" de movimento,
  tornando o efeito mais natural e menos repetitivo. O ciclo de 15 segundos agora é uma
  dança contínua, em vez de um simples vai-e-vem.
*/
@keyframes sway {
    0% {
        transform: translate(-50%, -50%) rotate(-0.3deg) translateX(-8px) translateY(4px);
    }
    25% {
        transform: translate(-50%, -50%) rotate(0.4deg) translateX(6px) translateY(-6px);
    }
    50% {
        transform: translate(-50%, -50%) rotate(-0.1deg) translateX(-10px) translateY(-3px);
    }
    75% {
        transform: translate(-50%, -50%) rotate(0.2deg) translateX(4px) translateY(5px);
    }
    100% {
        /* Volta ao ponto inicial para criar um loop perfeito */
        transform: translate(-50%, -50%) rotate(-0.3deg) translateX(-8px) translateY(4px);
    }
}