/**
 * Hero aura — Unicorn + blur atrás do nav (sem luz animada)
 * Dark: brilho preservado (não deixar o preto matar a animação)
 * Light: saturação/brilho calibrados no fundo claro
 */
.hero-aura {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(68vh, 620px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* opacity 0 (sem visibility:hidden) — Unicorn precisa “ver” o canvas p/ rodar Appear */
  opacity: 0;
  transition: opacity 0.9s ease-out;
}

html.is-loading .hero-aura {
  opacity: 0 !important;
}

html.is-aura-live .hero-aura {
  opacity: 1;
}

/* Bloom ambiente só no dark — devolve brilho sem beam animado */
[data-theme="dark"] .hero-aura::before {
  content: "";
  position: absolute;
  inset: -12% -15% -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 120% 85% at 50% -5%,
      rgba(66, 165, 245, 0.55) 0%,
      rgba(41, 121, 255, 0.5) 18%,
      rgba(25, 118, 210, 0.32) 40%,
      rgba(13, 71, 161, 0.16) 58%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 60% 55% at 70% 22%,
      rgba(0, 229, 255, 0.28) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 45% 40% at 25% 28%,
      rgba(100, 181, 246, 0.22) 0%,
      transparent 70%
    );
  opacity: 0;
  transition: opacity 0.7s ease-out 0.25s;
}
html.is-ready[data-theme="dark"] .hero-aura::before {
  opacity: 0;
}
html.is-ready.is-aura-live[data-theme="dark"] .hero-aura::before {
  opacity: 1;
}

.hero-aura.is-away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* —— Unicorn —— */
.hero-aura__unicorn {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1; /* fade controlado pelo .hero-aura pai */
  filter: saturate(1.4) brightness(1.65) contrast(1.1);
  mix-blend-mode: plus-lighter;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.78) 58%,
    rgba(0, 0, 0, 0.35) 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.78) 58%,
    rgba(0, 0, 0, 0.35) 80%,
    transparent 100%
  );
  transition: filter 0.45s ease-out;
}

html.is-ready .hero-aura__unicorn {
  opacity: 1;
}

html.is-ready.is-aura-live .hero-aura__unicorn {
  opacity: 1;
  transition-delay: 0s;
}

.hero-aura__unicorn > [data-us-project],
.hero-aura__unicorn > #hero-unicorn-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-aura__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* no dark: tint leve — screen no unicorn já carrega o brilho */
  background-color: rgba(41, 121, 255, 0.18);
  mix-blend-mode: soft-light;
  transition: background-color 0.45s ease-out, opacity 0.45s ease-out, mix-blend-mode 0.01s;
}

/* Blur na altura do nav — atrás do header (não aplica no logo/ícones) */
.hero-aura__nav-frost {
  position: absolute;
  top: 0;
  left: -4%;
  right: -4%;
  height: max(var(--mp-chrome-h, 5.75rem), 7rem);
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  /* navy translúcido em vez de preto puro — não apaga a aura */
  background: linear-gradient(
    to bottom,
    rgba(5, 12, 28, 0.28) 0%,
    rgba(5, 12, 28, 0.1) 55%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  opacity: 0;
  transition: opacity 0.55s ease-out 0.2s, background 0.45s ease-out;
}

html.is-ready .hero-aura__nav-frost {
  opacity: 0;
}
html.is-ready.is-aura-live .hero-aura__nav-frost {
  opacity: 1;
}

/* Legado: luz removida — esconde se HTML antigo ainda tiver */
.hero-aura__fill,
.hero-aura__beam,
.hero-aura__glow,
.hero-aura__soft,
.hero-aura__top-blur {
  display: none !important;
}

/* Mobile: pixels maiores + fade limpo (sem faixa branca) */
@media (max-width: 768px) {
  .hero-aura {
    height: min(70vh, 600px);
  }
  .hero-aura__unicorn {
    transform: scale(1.65);
    transform-origin: top center;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 22%,
      rgba(0, 0, 0, 0.5) 48%,
      rgba(0, 0, 0, 0.15) 70%,
      transparent 92%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 22%,
      rgba(0, 0, 0, 0.5) 48%,
      rgba(0, 0, 0, 0.15) 70%,
      transparent 92%
    );
  }
  [data-theme="dark"] .hero-aura__unicorn {
    transform: scale(1.65);
    transform-origin: top center;
  }
  .hero-aura__unicorn > [data-us-project],
  .hero-aura__unicorn > #hero-unicorn-host,
  .hero-aura__unicorn canvas {
    width: 100% !important;
    height: 100% !important;
  }
  html.is-ready .hero-aura__unicorn {
    filter: saturate(1.38) brightness(1.58) contrast(1.08);
  }
  .hero-aura__tint {
    background-color: rgba(41, 121, 255, 0.16);
  }
  .hero-aura__nav-frost {
    height: max(var(--mp-chrome-h, 5.75rem), 6.5rem);
  }
}

@media (max-width: 480px) {
  .hero-aura__unicorn {
    transform: scale(1.9);
    transform-origin: top center;
  }
  /* dark não pode reduzir o zoom — mesma proporção do claro */
  [data-theme="dark"] .hero-aura__unicorn {
    transform: scale(1.9);
  }
  html.is-ready .hero-aura__unicorn {
    filter: saturate(1.4) brightness(1.62) contrast(1.06);
  }
}

/* —— Dark explícito (reforço) —— */
[data-theme="dark"] .hero-aura__unicorn {
  filter: saturate(1.45) brightness(1.7) contrast(1.1);
  mix-blend-mode: plus-lighter;
  /* sem scale aqui — no mobile o claro define a proporção (1.65 / 1.9) */
}
html.is-ready.is-aura-live[data-theme="dark"] .hero-aura__unicorn {
  opacity: 1;
}
[data-theme="dark"] .hero-aura__tint {
  background-color: rgba(41, 121, 255, 0.12);
  mix-blend-mode: soft-light;
}
[data-theme="dark"] .hero-aura__nav-frost {
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  background: linear-gradient(
    to bottom,
    rgba(5, 10, 22, 0.52) 0%,
    rgba(5, 10, 22, 0.28) 45%,
    rgba(5, 10, 22, 0.1) 72%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

@supports not (mix-blend-mode: plus-lighter) {
  .hero-aura__unicorn,
  [data-theme="dark"] .hero-aura__unicorn {
    mix-blend-mode: screen;
  }
}
/* Light: placa opaca = degradê da faixa Confiança. Blend só contra essa placa. */
[data-theme="light"] .hero-aura {
  isolation: isolate;
  background: #1565C0;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: min(68vh, 620px);
}

[data-theme="light"] .hero-aura::before {
  content: none;
}

[data-theme="light"] .hero-aura__unicorn {
  visibility: visible;
  mix-blend-mode: plus-lighter;
  filter: saturate(1.4) brightness(1.65) contrast(1.1);
  opacity: 1;
}
html.is-ready.is-aura-live[data-theme="light"] .hero-aura__unicorn {
  opacity: 1;
}

[data-theme="light"] .hero-aura__unicorn canvas,
[data-theme="light"] .hero-aura__unicorn > [data-us-project],
[data-theme="light"] .hero-aura__unicorn > #hero-unicorn-host {
  background: transparent !important;
  background-color: transparent !important;
}

[data-theme="light"] .hero-aura__tint {
  display: none;
}

[data-theme="light"] .hero-aura::after {
  content: none;
}

[data-theme="light"] .hero-aura__unicorn::after {
  content: none;
}

[data-theme="light"] .hero-aura__nav-frost {
  height: max(var(--mp-chrome-h, 5.75rem), 7rem);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.58) 0%,
    rgba(255, 255, 255, 0.34) 42%,
    rgba(11, 61, 145, 0.12) 68%,
    transparent 100%
  );
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

@media (max-width: 768px) {
  [data-theme="light"] .hero-aura {
    height: min(70vh, 600px);
  }
  html.is-ready.is-aura-live[data-theme="light"] .hero-aura__unicorn {
    opacity: 1;
  }
  [data-theme="light"] .hero-aura__unicorn {
    filter: saturate(1.38) brightness(1.58) contrast(1.08);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  [data-theme="light"] .hero-aura__unicorn {
    transform: scale(1.9);
    transform-origin: top center;
  }
}

@supports not (mix-blend-mode: plus-lighter) {
  [data-theme="light"] .hero-aura__unicorn {
    mix-blend-mode: screen;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-ready .hero-aura__unicorn,
  html.is-ready .hero-aura__nav-frost {
    transition: none;
  }
  html.is-ready.is-aura-live .hero-aura__unicorn { opacity: 1; }
  html.is-ready.is-aura-live[data-theme="light"] .hero-aura__unicorn { opacity: 1; }
  html.is-ready.is-aura-live .hero-aura__nav-frost { opacity: 1; }
}