/* ============================================
   AURA TAROT — MAGIC ADD-ON v1
   Дополнительные эффекты. 
   Подключить в <head> ПОСЛЕ основного <style>:
   <link rel="stylesheet" href="magic-addon.css">
   ============================================ */

/* --- SACRED GEOMETRY BACKGROUND --- */
.sacred-geometry {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%23d4af37' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='%23d4af37' stroke-width='0.3'/%3E%3Ccircle cx='50' cy='50' r='22' fill='none' stroke='%23d4af37' stroke-width='0.3'/%3E%3Cline x1='50' y1='2' x2='50' y2='98' stroke='%23d4af37' stroke-width='0.3'/%3E%3Cline x1='2' y1='50' x2='98' y2='50' stroke='%23d4af37' stroke-width='0.3'/%3E%3Cline x1='15' y1='15' x2='85' y2='85' stroke='%23d4af37' stroke-width='0.3'/%3E%3Cline x1='85' y1='15' x2='15' y2='85' stroke='%23d4af37' stroke-width='0.3'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  animation: geoRotate 120s linear infinite;
}

@keyframes geoRotate {
  from { transform: rotate(0deg) scale(1.5); }
  to { transform: rotate(360deg) scale(1.5); }
}

/* --- MYSTIC FOG LAYERS --- */
.fog-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}
.fog-layer.active { opacity: 0.15; }

.fog-1 {
  background: radial-gradient(ellipse at 20% 80%, rgba(212,175,55,0.3) 0%, transparent 60%);
  animation: fogMove1 20s ease-in-out infinite;
}
.fog-2 {
  background: radial-gradient(ellipse at 80% 20%, rgba(138,109,31,0.2) 0%, transparent 50%);
  animation: fogMove2 25s ease-in-out infinite;
}
.fog-3 {
  background: radial-gradient(ellipse at 50% 50%, rgba(180,140,60,0.15) 0%, transparent 70%);
  animation: fogMove3 30s ease-in-out infinite;
}

@keyframes fogMove1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(30px,-20px) scale(1.1); }
}
@keyframes fogMove2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-20px,30px) scale(1.15); }
}
@keyframes fogMove3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: 0.15; }
  50% { transform: translate(10px,-10px) scale(1.2); opacity: 0.25; }
}

/* --- FLOATING RUNES (side decorations) --- */
.rune-float {
  position: fixed;
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  text-shadow: 0 0 10px rgba(212,175,55,0.5);
  animation: runeFloat 15s ease-in-out infinite;
}

.rune-left-1 { left: 3%; top: 15%; animation-delay: 0s; }
.rune-left-2 { left: 5%; top: 45%; animation-delay: 5s; font-size: 0.9rem; }
.rune-left-3 { left: 2%; top: 75%; animation-delay: 10s; font-size: 1rem; }
.rune-right-1 { right: 3%; top: 20%; animation-delay: 2s; }
.rune-right-2 { right: 6%; top: 55%; animation-delay: 7s; font-size: 0.85rem; }
.rune-right-3 { right: 3%; top: 80%; animation-delay: 12s; font-size: 1.1rem; }

@keyframes runeFloat {
  0%,100% { opacity: 0; transform: translateY(0) rotate(0deg); }
  20% { opacity: 0.4; }
  50% { opacity: 0.15; transform: translateY(-30px) rotate(10deg); }
  80% { opacity: 0.3; }
}

/* --- CARD AURA GLOW --- */
.tarot-card::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  background: conic-gradient(from 0deg, transparent, rgba(212,175,55,0.3), transparent, rgba(212,175,55,0.2), transparent);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
  filter: blur(8px);
}

.tarot-card:hover::after {
  opacity: 1;
  animation: auraSpin 4s linear infinite;
}

@keyframes auraSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- CARD FLIP PARTICLE BURST --- */
.card-burst {
  position: absolute;
  pointer-events: none;
  z-index: 10;
}

.card-burst-particle {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--gold);
}

/* --- ORACLE APPEARANCE RITUAL --- */
.oracle-response.visible {
  animation: oracleMaterialize 1.2s ease forwards;
}

@keyframes oracleMaterialize {
  0% { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(10px); }
  30% { opacity: 0.5; filter: blur(5px); }
  60% { opacity: 0.9; transform: translateY(0) scale(1); filter: blur(1px); }
  100% { opacity: 1; filter: blur(0); }
}

/* --- GLITCH TITLE (very subtle) --- */
.hero h1 {
  position: relative;
}

.hero h1::before,
.hero h1::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
}

.hero h1.glitch-active::before {
  animation: glitch1 0.3s ease;
  color: var(--gold);
  opacity: 0.8;
}

.hero h1.glitch-active::after {
  animation: glitch2 0.3s ease;
  color: #c864ff;
  opacity: 0.6;
}

@keyframes glitch1 {
  0%,100% { transform: translate(0); opacity: 0; }
  20% { transform: translate(-3px, 2px); opacity: 0.8; }
  40% { transform: translate(3px, -2px); opacity: 0.4; }
  60% { transform: translate(-2px, 0); opacity: 0.7; }
  80% { transform: translate(2px, 1px); opacity: 0.3; }
}

@keyframes glitch2 {
  0%,100% { transform: translate(0); opacity: 0; }
  20% { transform: translate(3px, -1px); opacity: 0.6; }
  40% { transform: translate(-2px, 2px); opacity: 0.3; }
  60% { transform: translate(1px, 0); opacity: 0.5; }
  80% { transform: translate(-3px, -2px); opacity: 0.2; }
}

/* --- SHIMMER ON GLASS CARDS --- */
.price-card::before,
.expert-card::before,
.oracle-response::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(212,175,55,0.03) 45%,
    rgba(212,175,55,0.08) 50%,
    rgba(212,175,55,0.03) 55%,
    transparent 60%
  );
  transform: rotate(30deg);
  animation: shimmerSweep 8s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

.price-card,
.expert-card,
.oracle-response {
  position: relative;
  overflow: hidden;
}

@keyframes shimmerSweep {
  0% { transform: translateX(-100%) translateY(-100%) rotate(30deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(30deg); }
}

/* --- CANDLE FLICKER on gold elements --- */
.price-amount,
.stat-value,
.spread-title {
  animation: candleFlicker 4s ease-in-out infinite;
}

@keyframes candleFlicker {
  0%,100% { text-shadow: 0 0 0 transparent; }
  25% { text-shadow: 0 0 15px rgba(212,175,55,0.2); }
  50% { text-shadow: 0 0 5px rgba(212,175,55,0.1); }
  75% { text-shadow: 0 0 20px rgba(212,175,55,0.25); }
}

/* --- SCROLLBAR MYSTIC --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--deep-purple); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-dark), var(--gold));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
