/* ============================================================
   switcher.css — шапка приложения и переключатель режимов
   ============================================================ */

/* ---------- Корневой контейнер приложения + фон ---------- */
.app {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.app.is-fading-out { opacity: 0; }
.app.is-entering   { animation: appFadeIn var(--dur-slow) var(--ease-out); }

@keyframes appFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ===== Фоновые слои =====
   Минимализм: базовый красно-чёрный градиент + 3 медленно дрейфующих
   красных blur-орба + лёгкая сетка + почти невидимый watermark «А». */

/* 1. Базовый градиент */
.app__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 25%,
      rgba(239, 49, 36, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 65% 55% at 85% 80%,
      rgba(239, 49, 36, 0.12) 0%, transparent 65%),
    linear-gradient(135deg, #120606 0%, #0A0303 50%, #050101 100%);
}

/* 2. Дрейфующие красные орбы — основная анимация фона.
   Multi-stop gradient полностью устраняет жёсткие границы blur'а:
   плавный спад alpha от центра до краёв через 4 точки. */
.app__orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.orb--1 {
  top: -12%;
  left: -10%;
  width: 80vh;
  height: 80vh;
  background: radial-gradient(circle,
    rgba(239, 49, 36, 0.85) 0%,
    rgba(239, 49, 36, 0.50) 18%,
    rgba(239, 49, 36, 0.22) 38%,
    rgba(239, 49, 36, 0.08) 60%,
    rgba(239, 49, 36, 0.02) 80%,
    rgba(239, 49, 36, 0) 100%);
  animation: orbDrift1 28s ease-in-out infinite;
}
.orb--2 {
  bottom: -18%;
  right: -12%;
  width: 90vh;
  height: 90vh;
  background: radial-gradient(circle,
    rgba(255, 60, 45, 0.65) 0%,
    rgba(255, 60, 45, 0.38) 18%,
    rgba(255, 60, 45, 0.18) 38%,
    rgba(255, 60, 45, 0.06) 60%,
    rgba(255, 60, 45, 0.02) 80%,
    rgba(255, 60, 45, 0) 100%);
  animation: orbDrift2 34s ease-in-out infinite;
}
.orb--3 {
  top: 25%;
  left: 45%;
  width: 70vh;
  height: 70vh;
  background: radial-gradient(circle,
    rgba(201, 38, 27, 0.55) 0%,
    rgba(201, 38, 27, 0.32) 18%,
    rgba(201, 38, 27, 0.14) 38%,
    rgba(201, 38, 27, 0.05) 60%,
    rgba(201, 38, 27, 0) 100%);
  animation: orbDrift3 40s ease-in-out infinite;
}
.orb--4 {
  bottom: 15%;
  left: 8%;
  width: 60vh;
  height: 60vh;
  background: radial-gradient(circle,
    rgba(255, 80, 60, 0.50) 0%,
    rgba(255, 80, 60, 0.28) 18%,
    rgba(255, 80, 60, 0.12) 38%,
    rgba(255, 80, 60, 0.04) 60%,
    rgba(255, 80, 60, 0) 100%);
  animation: orbDrift4 46s ease-in-out infinite;
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0)         scale(1);    opacity: 0.85; }
  25%      { transform: translate(10vw, 4vh)    scale(1.10); opacity: 1;    }
  50%      { transform: translate(14vw, 10vh)   scale(0.95); opacity: 0.7;  }
  75%      { transform: translate(6vw, 14vh)    scale(1.05); opacity: 0.95; }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0)         scale(1);    opacity: 0.8;  }
  30%      { transform: translate(-8vw, -10vh)  scale(1.08); opacity: 1;    }
  60%      { transform: translate(-14vw, 6vh)   scale(0.92); opacity: 0.65; }
  85%      { transform: translate(-4vw, 8vh)    scale(1.04); opacity: 0.9;  }
}
@keyframes orbDrift3 {
  0%, 100% { transform: translate(-50%, 0)      scale(1);    opacity: 0.7;  }
  33%      { transform: translate(-44%, -12vh)  scale(1.12); opacity: 1;    }
  66%      { transform: translate(-58%, 6vh)    scale(0.88); opacity: 0.55; }
}
@keyframes orbDrift4 {
  0%, 100% { transform: translate(0, 0)         scale(1);    opacity: 0.75; }
  40%      { transform: translate(8vw, -6vh)    scale(1.10); opacity: 1;    }
  75%      { transform: translate(-4vw, -10vh)  scale(0.95); opacity: 0.6;  }
}

/* Ambient pulse — медленное «дыхание» центрального свечения */
.app__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vh;
  height: 120vh;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(239, 49, 36, 0.20) 0%,
    rgba(239, 49, 36, 0.10) 20%,
    rgba(239, 49, 36, 0.04) 45%,
    rgba(239, 49, 36, 0.01) 70%,
    transparent 100%);
  filter: blur(60px);
  mix-blend-mode: screen;
  animation: ambientPulse 12s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes ambientPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
  50%      { transform: translate(-50%, -50%) scale(1.18); opacity: 1;   }
}

/* Aurora sweep — широкая диагональная полоса света, медленно проплывает */
.app__aurora {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 80, 60, 0.04) 45%,
    rgba(255, 100, 80, 0.10) 50%,
    rgba(255, 80, 60, 0.04) 55%,
    transparent 65%,
    transparent 100%);
  mix-blend-mode: screen;
  filter: blur(30px);
  animation: auroraSweep 22s ease-in-out infinite;
  will-change: transform;
}
@keyframes auroraSweep {
  0%, 100% { transform: translate(-12%, -8%); }
  50%      { transform: translate(8%, 6%);    }
}

/* 3. Сетка — медленный диагональный drift + faint pulse opacity */
.app__bg-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.030) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 90%);
  animation: gridDrift 80s linear infinite, gridPulse 14s ease-in-out infinite;
  will-change: background-position, opacity;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 60px 60px, 60px 60px; }
}
@keyframes gridPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1;    }
}

/* 4. Watermark — огромная «А», очень бледная */
.app__watermark {
  position: absolute;
  top: 50%;
  right: -6%;
  transform: translateY(-50%);
  width: 70vh;
  height: 70vh;
  z-index: 2;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: screen;
}
.app__watermark svg { width: 100%; height: 100%; }
.app__watermark path { fill: #FF6B5E; }

/* ---------- Шапка ---------- */
.app__header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  height: var(--header-height);
  flex-shrink: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.app__brand-logo {
  height: 44px;
  width: auto;
  filter: drop-shadow(0 2px 12px rgba(239, 49, 36, 0.35));
}

/* ---------- Переключатель режимов ---------- */
.switcher {
  display: flex;
  gap: var(--switcher-gap);
  padding: 8px;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 36px;
  min-height: 56px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--fg-muted);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.switcher__btn:active { transform: scale(0.96); }

.switcher__btn.is-active {
  background: var(--alfa-red);
  color: var(--alfa-white);
  box-shadow: 0 6px 24px rgba(239, 49, 36, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.switcher__icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
}
.switcher__icon svg { width: 100%; height: 100%; }

/* ---------- Сцена с мокапами ---------- */
.stage {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 56px 56px;
  overflow: hidden;
}