/* =============================================================
   CORTINA DE ABERTURA — Stúdio Arabesque
   -------------------------------------------------------------
   Toda vez que a página abre, o pano roxo cobre a tela e a
   bailarina de feltro (a mascote) dança por 3,5 s numa janela em
   arco, terminando em arabesque. Depois o pano se abre ao meio e a
   página entra.

   O HTML fica em <div class="cortina"> no começo do <body>, e a
   classe "anim-cortina" é colocada pelo script no <head> do
   index.html. Para desligar a cortina, apague esse script.
   Quem pediu "reduzir movimento" no aparelho não vê a cortina.
   ============================================================= */

.cortina {
  display: none; /* só aparece com html.anim-cortina */
}

/* A abertura da página principal espera a cortina abrir */
html.anim-cortina {
  --atraso-abertura: 4.5s;
}

@media (prefers-reduced-motion: no-preference) {
  html.anim-cortina:not(.anim-cortina-fim) {
    overflow: hidden;
  }

  html.anim-cortina .cortina {
    display: block;
  }

  .cortina__metade {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 400;
    width: 50.5%;
    pointer-events: none;
    background:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 3.5rem),
      linear-gradient(180deg, var(--roxo-700), var(--roxo-900));
    animation-duration: 1.2s;
    animation-delay: 3.4s;
    animation-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
    animation-fill-mode: both;
  }

  .cortina__metade--e { left: 0; animation-name: cortina-abrir-e; }
  .cortina__metade--d { right: 0; animation-name: cortina-abrir-d; }

  /* A "janela" branca em arco onde a bailarina dança */
  .cortina__palco {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 401;
    width: clamp(12rem, 34vw, 17rem);
    aspect-ratio: 1 / 1;
    translate: -50% -50%;
    overflow: hidden;
    pointer-events: none;
    border-radius: 50% 50% 1.5rem 1.5rem / 38% 38% 1.5rem 1.5rem;
    background: #bea3ea; /* o lilás do vídeo, enquanto ele carrega */
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 181, 228, 0.35);
    animation: cortina-palco 4.3s ease both;
  }

  .cortina__palco video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  html.anim-cortina-fim .cortina {
    display: none;
  }

  @keyframes cortina-abrir-e { to { transform: translateX(-101%); } }
  @keyframes cortina-abrir-d { to { transform: translateX(101%); } }
  @keyframes cortina-palco {
    0% { opacity: 0; transform: scale(0.92); }
    10% { opacity: 1; transform: scale(1); }
    80% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.04); }
  }
}