/* BASTION performance-safe cinematic atmosphere */
.start-page {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 64%, rgba(213, 20, 45, .16), transparent 36%),
    linear-gradient(180deg, #050407 0%, #080306 54%, #120308 100%);
}

.bg-layer,
.premium-fog,
.field-light-wave {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-main {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 86%, rgba(255, 46, 77, .12), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.24)),
    url("../assets/images/bg-bastion-hero.webp") center center / cover no-repeat;
  transform: scale(1.035);
  animation: cameraBreath 26s ease-in-out infinite;
  filter: saturate(1.16) contrast(1.08) brightness(1.08);
}

/* Легка димка без важкого canvas */
.premium-fog {
  z-index: 2;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.fog-low {
  top: auto;
  bottom: -5vh;
  height: 42vh;
  opacity: .16;
  filter: blur(22px);
  background:
    radial-gradient(ellipse at 18% 58%, rgba(255, 80, 95, .18), transparent 42%),
    radial-gradient(ellipse at 72% 62%, rgba(255, 56, 76, .16), transparent 46%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .055), transparent);
  animation: fogLowDrift 38s ease-in-out infinite;
}

.fog-horizon {
  top: 47vh;
  height: 28vh;
  opacity: .11;
  filter: blur(28px);
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 90, 105, .18), transparent 50%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: fogHorizonDrift 54s ease-in-out infinite;
}

/* Не рухаємо самі квіти шарами — це виглядало плоско.
   Натомість додаємо повільний світловий прохід по полю. */
.field-light-wave {
  z-index: 3;
  top: auto;
  bottom: 0;
  height: 44vh;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(20px);
  background:
    linear-gradient(105deg,
      transparent 0%,
      transparent 30%,
      rgba(255, 47, 70, .11) 45%,
      rgba(255, 255, 255, .06) 50%,
      rgba(255, 47, 70, .09) 56%,
      transparent 72%,
      transparent 100%);
  transform: translateX(-65vw) skewX(-8deg);
  animation: fieldLightSweep 22s ease-in-out infinite;
}

.bg-vignette {
  z-index: 8;
  background:
    radial-gradient(circle at 50% 54%, transparent 0 46%, rgba(0,0,0,.11) 78%, rgba(0,0,0,.42) 100%),
    linear-gradient(90deg, rgba(0,0,0,.32), transparent 22% 78%, rgba(0,0,0,.32));
}

.bg-noise {
  z-index: 9;
  opacity: .03;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.34) 0 1px, transparent 1px 3px);
  background-size: 180px 180px;
  animation: noiseDrift 16s steps(8) infinite;
}

.embers {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
}

.corner-ui {
  position: absolute;
  z-index: 20;
  top: 42px;
  display: grid;
  gap: 8px;
  font-family: var(--font-ui);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(244, 247, 255, .82);
  text-shadow: 0 0 18px rgba(0,0,0,.7);
}

.corner-left {
  left: 48px;
  padding-left: 22px;
  border-left: 1px solid rgba(244, 247, 255, .42);
}

.corner-right {
  right: 48px;
  text-align: right;
}

.corner-title {
  font-size: 13px;
}

.corner-sub {
  font-size: 10px;
  color: rgba(244, 247, 255, .52);
}

.corner-title i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--red-400);
  box-shadow: var(--glow-red);
}

.access-shell {
  position: relative;
  z-index: 15;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.status-left,
.status-right {
  position: absolute;
  z-index: 20;
  bottom: 42px;
  display: grid;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .28em;
  color: rgba(244, 247, 255, .62);
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(0,0,0,.75);
}

.status-left {
  left: 48px;
  padding-left: 22px;
  border-left: 1px solid rgba(244, 247, 255, .36);
}

.status-left b {
  color: var(--red-400);
  font-weight: 600;
}

.status-right {
  right: 48px;
  text-align: right;
  padding-right: 22px;
  border-right: 1px solid rgba(244, 247, 255, .36);
}

@media (max-width: 900px) {
  .corner-ui,
  .status-left,
  .status-right {
    display: none;
  }
}