.scene__wrapper {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene {
  --size: 50vw;
  --thickness: 5px; /* Espessura do vinil */

  width: var(--size);
  aspect-ratio: 1/1;
  perspective: 800px;
  perspective-origin: 50% 50%;
  margin: 0 auto;
}

.vinyl {
  width: 100%;
  height: 100%;
  position: relative;
  animation: flip 8s linear infinite;
  transform-style: preserve-3d;
}

/* Frente e Verso */
.vinyl__face {
  position: absolute;
  width: 100%;
  height: 100%;
}

.front img,
.back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.front {
  transform: translateZ(calc(var(--thickness) / 2));
}
.back {
  transform: rotateY(180deg) translateZ(calc(var(--thickness) / 2));
}

/* === LATERAIS COM BEFORE E AFTER === */
.vinyl::before,
.vinyl::after {
  content: ""; /* Obrigatório para pseudo-elementos aparecerem */
  position: absolute;
  width: var(--thickness);
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: calc(var(--thickness) / -2);
  background-color: #111; /* Cor da borda preta do vinil */
}

/* Lado Direito (antigo .right) */
.vinyl::before {
  transform: rotateY(90deg) translateZ(calc(var(--size) / 2));
}

/* Lado Esquerdo (antigo .left) */
.vinyl::after {
  transform: rotateY(-90deg) translateZ(calc(var(--size) / 2));
}

@keyframes flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@media (min-width: 768px) and (hover: hover) {
  /* 1. Quando a seção está ativa, reduzimos a opacidade de TODOS os textos e linhas */
  .section--highlights.has-active-marquee .marquee__container,
  .section--highlights.has-active-marquee .line {
    opacity: 0.33;
  }

  /* 2. O texto do marquee ativo volta para 100% */
  .marquee.is-hovered .marquee__container {
    opacity: 1;
  }

  /* 3. As linhas pertencentes ao marquee ativo voltam para 100% 
     (Isso garante a linha de cima e de baixo do PRIMEIRO marquee, e a de baixo dos demais) */
  .marquee.is-hovered .line {
    opacity: 1;
  }

  /* 4. O PULO DO GATO: Acende a linha de baixo do marquee ANTERIOR ao ativo.
     Como o 2º e 3º marquees não têm linha superior própria (display: none), 
     nós acendemos a linha inferior do vizinho de cima. */
  .marquee:has(+ .marquee.is-hovered) > .line:last-child {
    opacity: 1;
  }

  /* Lógica do Vinil 3D Fixo (mantida igual) */
  .scene__wrapper {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    margin-bottom: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.4s ease,
      visibility 0.4s ease;
  }

  .marquee.is-hovered .scene__wrapper {
    opacity: 1;
    visibility: visible;
  }

  .scene {
    --size: 25vw;
  }
}