/* TAROONLINE — ATMOSPHERE LAYER v2 (ярче угольки, шире круг на мобиле, оптимизация) */

:root{
  --atm-gold:#d4a843;--atm-gold-light:#f0d078;--atm-purple:#8b5cf6;
  --atm-mystical:#c084fc;--atm-violet:#6d28d9;
}

.atm-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}

/* Рунный круг справа (PC: 25% за кадром, 75% виден) */
.atm-rune{
  position:fixed;right:-225px;top:50%;width:900px;height:900px;margin-top:-450px;
  opacity:.18;pointer-events:none;z-index:0;
  animation:atm-rune-rotate 180s linear infinite;
  filter:drop-shadow(0 0 40px rgba(192,132,252,.28));
  will-change:transform;transform:translateZ(0);
}
.atm-rune svg{width:100%;height:100%;display:block}
.atm-rune .rune-ring-outer,.atm-rune .rune-ring-mid,.atm-rune .rune-ring-inner{stroke:var(--atm-gold);fill:none}
.atm-rune .rune-ring-outer{stroke-width:2;opacity:.9}
.atm-rune .rune-ring-mid{stroke-width:1;opacity:.7}
.atm-rune .rune-ring-inner{stroke-width:1.5;opacity:.8}
.atm-rune .rune-glyphs{fill:var(--atm-mystical);opacity:.85;font-family:Georgia,serif;font-size:32px;letter-spacing:8px}
.atm-rune .rune-cross{stroke:var(--atm-purple);stroke-width:1;fill:none;opacity:.5}
.atm-rune .rune-star{stroke:var(--atm-gold-light);stroke-width:1.5;fill:none;opacity:.8}
@keyframes atm-rune-rotate{to{transform:translateZ(0) rotate(360deg)}}

/* Малый круг слева */
.atm-rune-small{
  position:fixed;left:-200px;top:50%;width:420px;height:420px;margin-top:-210px;
  opacity:.1;pointer-events:none;z-index:0;
  animation:atm-rune-rev 240s linear infinite;
  filter:drop-shadow(0 0 30px rgba(139,92,246,.35));
  will-change:transform;transform:translateZ(0);
}
.atm-rune-small svg{width:100%;height:100%}
.atm-rune-small circle,.atm-rune-small path{stroke:var(--atm-purple);fill:none;stroke-width:1.2}
@keyframes atm-rune-rev{from{transform:translateZ(0) rotate(360deg)}to{transform:translateZ(0) rotate(0deg)}}

/* Факелы */
.atm-torch{position:fixed;z-index:1;pointer-events:none;width:60px;height:120px}
.atm-torch-left{left:2vw;top:50%;transform:translateY(-50%)}
.atm-torch-right{right:2vw;top:50%;transform:translateY(-50%)}
.atm-torch-glow{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:240px;height:240px;
  background:radial-gradient(circle,rgba(192,132,252,.25) 0%,rgba(212,168,67,.15) 30%,transparent 65%);
  animation:atm-flick 1.4s ease-in-out infinite alternate;will-change:transform,opacity}
.atm-torch-flame{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:36px;height:64px;
  background:radial-gradient(ellipse at bottom,var(--atm-gold-light) 0%,var(--atm-gold) 25%,var(--atm-mystical) 55%,rgba(139,92,246,.4) 75%,transparent 100%);
  border-radius:50% 50% 45% 45% / 70% 70% 30% 30%;
  animation:atm-flick 1.1s ease-in-out infinite alternate;filter:blur(1px);will-change:transform}
.atm-torch-flame::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:20px;height:40px;
  background:radial-gradient(ellipse at bottom,#fff 0%,var(--atm-gold-light) 40%,transparent 90%);
  border-radius:50%;opacity:.7;animation:atm-flick .9s ease-in-out infinite alternate}
.atm-torch-stick{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:6px;height:60px;
  background:linear-gradient(180deg,#3a2817,#1a0f08);border-radius:3px;box-shadow:inset 1px 0 0 rgba(212,168,67,.2)}
@keyframes atm-flick{
  0%{transform:translateX(-50%) scale(1) rotate(-2deg);opacity:1}
  50%{transform:translateX(-50%) scale(1.06) rotate(2deg);opacity:.9}
  100%{transform:translateX(-50%) scale(.96) rotate(-1deg);opacity:1}
}

/* Угольки - ярче */
.atm-embers{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;contain:strict}
.atm-ember{
  position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,var(--atm-gold-light) 30%,var(--atm-gold) 60%,transparent 80%);
  box-shadow:0 0 10px var(--atm-gold-light),0 0 22px var(--atm-gold);
  animation:atm-rise linear infinite;will-change:transform,opacity
}
.atm-ember.purple{
  background:radial-gradient(circle,#fff 0%,var(--atm-mystical) 35%,var(--atm-purple) 65%,transparent 82%);
  box-shadow:0 0 10px var(--atm-mystical),0 0 22px var(--atm-purple)
}
@keyframes atm-rise{
  0%{transform:translate3d(0,0,0) scale(1);opacity:0}
  6%{opacity:1}
  92%{opacity:.95}
  100%{transform:translate3d(var(--atm-drift,30px),-110vh,0) scale(.3);opacity:0}
}

/* Виньетка */
.atm-vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,rgba(10,5,20,.4) 0%,transparent 20%,transparent 80%,rgba(10,5,20,.5) 100%)}

/* Контент поверх атмосферы (точечно - только footer static, остальные уже с position) */
body > footer{position:relative;z-index:10}
/* Никогда не трогаем .site-nav (position:fixed), #app (position:relative из inline) */

/* Мобильные: круг 15% за кадром, 85% виден */
@media(max-width:768px){
  .atm-torch{display:none}
  .atm-rune{
    right:-105px;width:700px;height:700px;margin-top:-350px;opacity:.2
  }
  .atm-rune-small{
    left:-260px;width:380px;height:380px;margin-top:-190px;opacity:.08
  }
  .atm-vignette{background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.5) 100%)}
}
@media(max-width:480px){
  .atm-rune{right:-100px;width:680px;height:680px;margin-top:-340px;opacity:.18}
  .atm-rune-small{display:none}
}

/* Уважать системное отключение анимаций */
@media (prefers-reduced-motion: reduce){
  .atm-rune,.atm-rune-small,.atm-torch-flame,.atm-torch-flame::before,.atm-torch-glow,.atm-ember{
    animation:none !important
  }
}