/* Atmospheric effects — tăng độ nhìn thấy rõ */

/* TEMP: disable toàn bộ effect — xóa block này (hoặc set display) để bật lại */
.hero__fx,
.hero__fog,
.hero__ember,
.portal-vignette,
.portal-grain,
.auth-fx {
  display: none !important;
  animation: none !important;
}

.hero__brand {
  animation: none !important;
  filter: none !important;
}

.hero {


  position: relative;
  overflow: hidden;
}

.hero__fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 2;
}

.hero__mist {
  z-index: 1;
}

/* Hai lớp sương lớn, chuyển động rõ */
.hero__fog {
  position: absolute;
  width: 140%;
  height: 70%;
  left: -20%;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.55;
  mix-blend-mode: screen;
}

.hero__fog--1 {
  bottom: -25%;
  background: radial-gradient(ellipse at center, rgba(180, 160, 120, 0.45) 0%, rgba(122, 31, 31, 0.25) 40%, transparent 70%);
  animation: fogMoveA 12s ease-in-out infinite alternate;
}

.hero__fog--2 {
  bottom: -10%;
  height: 50%;
  background: radial-gradient(ellipse at center, rgba(232, 212, 139, 0.22) 0%, rgba(80, 20, 20, 0.2) 45%, transparent 70%);
  animation: fogMoveB 16s ease-in-out infinite alternate;
}

@keyframes fogMoveA {
  from { transform: translateX(-8%) translateY(0) scale(1); }
  to { transform: translateX(10%) translateY(-12%) scale(1.12); }
}

@keyframes fogMoveB {
  from { transform: translateX(6%) translateY(4%) scale(1.05); }
  to { transform: translateX(-12%) translateY(-8%) scale(1); }
}

/* Tàn lửa / hạt bay — DOM particles */
.hero__ember {
  position: absolute;
  bottom: -4%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(232, 212, 139, 0.9);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.8), 0 0 16px rgba(122, 31, 31, 0.4);
  animation: emberFloat linear infinite;
  opacity: 0;
}

@keyframes emberFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(0.6);
    opacity: 0;
  }
  10% { opacity: 0.9; }
  70% { opacity: 0.65; }
  100% {
    transform: translate3d(var(--ex, 20px), -110vh, 0) scale(1.1);
    opacity: 0;
  }
}

/* Brand glow rõ hơn */
.hero__brand {
  text-shadow:
    0 0 12px rgba(232, 212, 139, 0.55),
    0 0 36px rgba(201, 162, 39, 0.4),
    0 0 64px rgba(122, 31, 31, 0.35),
    0 4px 24px rgba(0, 0, 0, 0.7) !important;
  animation: brandBreath 4s ease-in-out infinite !important;
}

@keyframes brandBreath {
  0%, 100% {
    filter: brightness(1);
    text-shadow:
      0 0 10px rgba(232, 212, 139, 0.4),
      0 0 28px rgba(201, 162, 39, 0.3),
      0 0 48px rgba(122, 31, 31, 0.25),
      0 4px 24px rgba(0, 0, 0, 0.7);
  }
  50% {
    filter: brightness(1.12);
    text-shadow:
      0 0 18px rgba(255, 230, 160, 0.75),
      0 0 42px rgba(201, 162, 39, 0.55),
      0 0 72px rgba(140, 40, 40, 0.4),
      0 4px 24px rgba(0, 0, 0, 0.7);
  }
}

/* Vignette phủ lên toàn trang (không bị shell che) */
.portal-vignette {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 70% at 50% 40%, transparent 35%, rgba(0, 0, 0, 0.45) 100%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(90, 20, 20, 0.28), transparent 55%);
}

/* Grain */
.portal-grain {
  position: fixed;
  inset: 0;
  z-index: 1101;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: grainShift 0.45s steps(2) infinite;
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-3%, 2%); }
}

/* Auth */
.auth-page .hero__fx,
.auth-page > .auth-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.auth-card {
  position: relative;
  z-index: 1;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(122, 31, 31, 0.18),
    0 0 24px rgba(201, 162, 39, 0.1) !important;
}

.btn-gold:hover {
  box-shadow: 0 0 28px rgba(201, 162, 39, 0.5), 0 8px 22px rgba(0, 0, 0, 0.4) !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero__fog,
  .hero__ember,
  .hero__brand,
  .portal-grain {
    animation: none !important;
  }
}