/**
 * ROUGESWORLD - Sigillo Oracle
 * ============================================================
 * Sostituisce le emoji usate finora come pulsante dell'Oracle
 * (👁️ 🎧 ⚙️ 🎨 👤) con un simbolo vettoriale unico:
 * due anelli controrotanti, tacche cardinali, nucleo esagonale
 * e impulso centrale.
 *
 * Il colore non è scritto qui: eredita --primary-color, che ogni
 * sezione definisce sul proprio tema. Così il sigillo resta lo
 * stesso segno grafico ma parla il colore dell'area in cui si trova
 * — rosa in Music, blu in Software, viola in Art, verde altrove.
 *
 * Caricare DOPO oracle-chat.css per poterne sovrascrivere le regole.
 */

.oracle-trigger {
  --sigil-c: var(--primary-color, var(--matrix-green, #00ff41));
  --sigil-glow: var(--glow-color, var(--matrix-green-glow, rgba(0, 255, 65, .45)));
  --spin-o: 14s;  /* giro dell'anello esterno */
  --spin-m: 9s;   /* giro dell'anello interno, verso opposto */

  position: relative;
  width: 68px;
  height: 68px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 50% 45%,
              color-mix(in srgb, var(--sigil-c) 16%, transparent),
              rgba(0, 6, 3, .88) 68%);
  border: 1px solid color-mix(in srgb, var(--sigil-c) 34%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--sigil-c) 20%, transparent),
              inset 0 0 18px color-mix(in srgb, var(--sigil-c) 12%, transparent);
  backdrop-filter: blur(4px);
  transition: transform .3s cubic-bezier(.19, 1, .22, 1),
              border-color .3s, box-shadow .3s;
}

.oracle-trigger:hover,
.oracle-trigger:focus-visible {
  transform: scale(1.09);
  border-color: var(--sigil-c);
  box-shadow: 0 0 40px color-mix(in srgb, var(--sigil-c) 50%, transparent),
              inset 0 0 22px color-mix(in srgb, var(--sigil-c) 22%, transparent);
  --spin-o: 5s;
  --spin-m: 3.2s;
  outline: none;
}

.oracle-trigger:focus-visible {
  outline: 2px solid var(--sigil-c);
  outline-offset: 4px;
}

.oracle-trigger:active { transform: scale(.96); }

/* Nasconde l'eventuale emoji rimasta nel markup di pagine non aggiornate */
.oracle-trigger .oracle-icon { display: none; }

/* ---------- Il segno ---------- */
.oracle-sigil {
  width: 52px;
  height: 52px;
  overflow: visible;
  color: var(--sigil-c);
}

.oracle-sigil .ring-o,
.oracle-sigil .ring-m,
.oracle-sigil .ticks,
.oracle-sigil .hex { transform-origin: 32px 32px; }

.oracle-sigil .ring-o { animation: sigil-cw  var(--spin-o) linear infinite; }
.oracle-sigil .ring-m { animation: sigil-ccw var(--spin-m) linear infinite; }
.oracle-sigil .ticks  { animation: sigil-cw  calc(var(--spin-o) * 2) linear infinite; }
.oracle-sigil .hex    { animation: sigil-breathe 3.4s ease-in-out infinite; }
.oracle-sigil .pip    { animation: sigil-pip 2.1s ease-in-out infinite; }

@keyframes sigil-cw  { to { transform: rotate(360deg); } }
@keyframes sigil-ccw { to { transform: rotate(-360deg); } }

@keyframes sigil-breathe {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: .95; }
  50%      { transform: scale(1.07) rotate(30deg); opacity: .65; }
}

@keyframes sigil-pip {
  0%, 100% { r: 3.2; opacity: 1; }
  50%      { r: 4.6; opacity: .55; }
}

/* ---------- Onda di propagazione ---------- */
.oracle-trigger .oracle-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sigil-c) 55%, transparent);
  background: none;
  animation: sigil-wave 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes sigil-wave {
  0%        { transform: scale(1);    opacity: .6; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* ---------- Stato a chat aperta ---------- */
.oracle-trigger.open {
  --spin-o: 22s;
  --spin-m: 15s;
  border-color: var(--sigil-c);
  box-shadow: 0 0 34px color-mix(in srgb, var(--sigil-c) 50%, transparent);
}
.oracle-trigger.open .oracle-pulse { animation: none; opacity: 0; }
.oracle-trigger.open .hex { animation: none; transform: rotate(90deg) scale(.82); }

/* ---------- Accessibilità e schermi piccoli ---------- */
@media (prefers-reduced-motion: reduce) {
  .oracle-sigil .ring-o,
  .oracle-sigil .ring-m,
  .oracle-sigil .ticks,
  .oracle-sigil .hex,
  .oracle-sigil .pip,
  .oracle-trigger .oracle-pulse { animation: none !important; }
  .oracle-trigger { transition: none !important; }
}

@media (max-width: 760px) {
  .oracle-trigger { width: 58px; height: 58px; }
  .oracle-sigil   { width: 44px; height: 44px; }
}

/* Browser senza color-mix: si ricade su un verde leggibile */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .oracle-trigger {
    background: rgba(0, 12, 5, .88);
    border-color: rgba(0, 255, 65, .35);
  }
  .oracle-trigger:hover { border-color: #00ff41; }
  .oracle-trigger .oracle-pulse { border-color: rgba(0, 255, 65, .55); }
}