/* ======================================================
   ███████  CINEMATIC ROYALE – EFEITO SUPREMO  █████████
   Materialização com rotação 3D, overshoot, brilho holográfico,
   raio varredor e partículas de luz.
   Uso: class="cinematic_royale"
========================================================= */

.cinematic_royale {
  /* Estado inicial: escondido, girado, escala reduzida e leve translação Z */
  opacity: 0;
  filter: blur(8px) brightness(0.6);
  transform: perspective(800px) rotateX(12deg) rotateY(-8deg) scale(0.85) translateY(20px);
  transition: transform 1.2s cubic-bezier(0.34, 1.45, 0.55, 1.05),
              opacity 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1),
              filter 0.9s ease-out,
              box-shadow 0.7s linear;
  will-change: transform, opacity, filter;
  position: relative;
  max-width: 100%;
  /* Base para pseudo-elementos de raio e partículas */
  overflow: visible;
  z-index: 1;
}

/* Estado ativo: recupera posição, adiciona brilho e animação radiante */
.cinematic_royale.active {
  opacity: 1;
  filter: blur(0) brightness(1);
  transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1) translateY(0);
  transition: transform 1s cubic-bezier(0.34, 1.45, 0.55, 1.05),
              opacity 0.8s ease-out,
              filter 0.7s ease-out;
  /* Animação principal de brilho radiante */
  animation: royal_radiance 1.4s ease-out forwards;
  /* Sombra holográfica dourada + púrpura */
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 35px rgba(199, 125, 255, 0.4);
}

/* Animação de brilho radiante (efeito principal) */
@keyframes royal_radiance {
  0% {
    text-shadow: 0 0 0 rgba(212, 175, 55, 0);
    box-shadow: 0 0 0 rgba(212, 175, 55, 0);
  }
  25% {
    text-shadow: 0 0 20px #D4AF37, 0 0 35px #C77DFF;
    box-shadow: 0 0 25px 10px rgba(212, 175, 55, 0.5), 0 0 40px 15px rgba(199, 125, 255, 0.3);
  }
  70% {
    text-shadow: 0 0 8px #FFDF85, 0 0 12px #B87CFF;
  }
  100% {
    text-shadow: 0 0 0 transparent;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
  }
}

/* Pseudo-elemento: raio de luz varredor (ocorre apenas quando ativo) */
.cinematic_royale.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 140, 0.4), transparent);
  pointer-events: none;
  animation: royal_sweep 0.9s ease-out forwards;
  z-index: 2;
  border-radius: inherit;
}

@keyframes royal_sweep {
  0% { left: -100%; opacity: 0; }
  30% { opacity: 0.8; }
  100% { left: 150%; opacity: 0; }
}

/* Partículas de luz simuladas (efeito de poeira dourada) */
.cinematic_royale.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 40%, rgba(255, 215, 0, 0.2) 2px, transparent 2px),
              radial-gradient(circle at 70% 80%, rgba(199, 125, 255, 0.2) 1px, transparent 2px),
              radial-gradient(circle at 40% 10%, rgba(255, 200, 100, 0.25) 1px, transparent 2px);
  background-size: 30px 30px, 50px 50px, 25px 25px;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: royal_particles 1s ease-out forwards;
  border-radius: inherit;
}

@keyframes royal_particles {
  0% { opacity: 0; background-position: 0% 0%, 0% 0%, 0% 0%; }
  20% { opacity: 1; }
  70% { opacity: 0.6; }
  100% { opacity: 0; background-position: 100% 100%, 90% 70%, 110% 30%; }
}

/* Ajuste responsivo para mobile */
@media (max-width: 768px) {
  .cinematic_royale {
    transform: perspective(600px) rotateX(6deg) rotateY(-4deg) scale(0.92);
    filter: blur(4px);
  }
  .cinematic_royale.active {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg) scale(1);
  }
  @keyframes royal_radiance {
    25% {
      text-shadow: 0 0 10px #D4AF37;
      box-shadow: 0 0 15px 5px rgba(212, 175, 55, 0.5);
    }
  }
}

/* Acessibilidade: respeita redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .cinematic_royale,
  .cinematic_royale.active,
  .cinematic_royale.active::before,
  .cinematic_royale.active::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: blur(0) brightness(1) !important;
    box-shadow: none !important;
  }
  .cinematic_royale.active::before,
  .cinematic_royale.active::after {
    display: none !important;
  }
}