/* ==========================================================================
   ARTESSA — Motivos decorativos (CSS/SVG propios)
   Rayos, estrellas, círculos concéntricos, arcos, cúpulas.
   Opacidad baja e intencional: "deben sentirse antes de notarse".

   Nota de rendimiento: se evita repeating-conic-gradient + mask-image sobre
   elementos a pantalla completa (fuerza pintura por software en varios
   navegadores). Los rayos se resuelven con SVG acotado en tamaño, que se
   rasteriza una sola vez y solo se transforma (barato para el compositor).
   ========================================================================== */

/* ---------- Rayos (SVG acotado, no pantalla completa) ---------- */
.rays-svg-wrap {
  position: absolute;
  inset: 0;
  z-index: var(--z-decor);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  contain: paint;
}

.rays-svg {
  width: min(140vmin, 1400px);
  height: min(140vmin, 1400px);
  opacity: 0.4;
  transform: translateZ(0);
}

.rays-svg line {
  stroke: var(--color-gold-antique);
  stroke-width: 0.6;
}

/* Giro lento y ceremonial (hero) */
.rays-svg.rays-spin {
  animation: rays-drift 200s linear infinite;
  will-change: transform;
}

/* Latido / palpitación (sección final "legado") */
.rays-svg.rays-pulse {
  animation: rays-breathe 5s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .rays-svg.rays-spin,
  .rays-svg.rays-pulse {
    animation: none;
  }
}

/* ---------- Círculos concéntricos, muy sutiles (marco de cúpula/óculo) ---------- */
.decor-circles {
  position: absolute;
  inset: 0;
  z-index: var(--z-decor);
  pointer-events: none;
  opacity: 0.35;
  contain: paint;
}

.decor-circles::before,
.decor-circles::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(183, 138, 61, 0.08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.decor-circles::before {
  width: 62vmax;
  height: 62vmax;
}

.decor-circles::after {
  width: 42vmax;
  height: 42vmax;
  border-color: rgba(183, 138, 61, 0.12);
}

/* ---------- Óculo: luz que desciende como en una cúpula barroca ----------
   Nota de rendimiento: un solo radial-gradient, sin conic-gradient ni
   mask-image. Los conic-gradient y las máscaras combinadas con elementos
   grandes son costosos de pintar (y en algunos navegadores fuerzan
   renderizado por software), causa frecuente de "traba" al cargar. */
.oculus {
  position: absolute;
  inset: 0;
  z-index: var(--z-decor);
  pointer-events: none;
  contain: paint;
  background: radial-gradient(ellipse 42% 32% at 50% 6%, rgba(242, 217, 154, 0.14), transparent 72%);
}

/* ---------- Estrella (SVG inline, usada como icono/indicador) ---------- */
.star-icon {
  width: 10px;
  height: 10px;
  fill: var(--color-gold-light);
  flex-shrink: 0;
}

.star-icon--active {
  filter: drop-shadow(0 0 6px rgba(215, 181, 109, 0.6));
}

/* ---------- Divisor de onda (fluye suavemente como olas/nubes) ---------- */
.crown-divider {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-gold-antique);
  opacity: 0.35;
  overflow: hidden;
}

.crown-divider path {
  stroke: currentColor;
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* La onda se desplaza una longitud de onda completa (200 u) de forma
   continua y sin cortes, dando la sensación de agua/nubes en movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .crown-divider__wave {
    animation: wave-flow 12s linear infinite;
  }
  .crown-divider--rev .crown-divider__wave {
    animation-direction: reverse;
    animation-duration: 15s;
  }
}

@keyframes wave-flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200px);
  }
}

/* ---------- Marco dorado fino ---------- */
.gold-frame {
  position: relative;
}

.gold-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(183, 138, 61, 0.35);
  pointer-events: none;
  z-index: 2;
}

/* ---------- Arco / nicho de capilla ----------
   Recorte de arco de medio punto para romper la rigidez rectangular.
   Uso: envolver una imagen o tarjeta con .arch-frame. */
.arch-frame {
  border-radius: 50% 50% 6px 6px / 28% 28% 6px 6px;
  overflow: hidden;
  position: relative;
}

.arch-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(183, 138, 61, 0.4);
  pointer-events: none;
  z-index: 2;
}

/* ---------- Viñeta general de escenario (dirige la mirada al centro) ---------- */
.stage-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 55%, rgba(9, 8, 7, 0.7) 100%);
}

/* ---------- Medallón de piedra (indicador pequeño) ---------- */
.gem-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.gem-dot--ruby { background: var(--color-ruby); }
.gem-dot--sapphire { background: var(--color-sapphire); }
.gem-dot--emerald { background: var(--color-emerald); }
.gem-dot--gold { background: var(--color-gold-light); }