/* =========================================================
   APOLLO NETWORKS — FASE 28.3 UI
   Correções isoladas de interface. Não altera infraestrutura.
========================================================= */

/* A busca fixa substitui visualmente o header enquanto está ativa.
   Isso evita duas barras empilhadas no topo durante o scroll. */
body.apollo-sticky-search-active .f20-home-header{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(-18px) !important;
}

/* A faixa extra/placeholder da busca fixa nunca participa do layout. */
.f20-sticky-search{
  height:0 !important;
  min-height:0 !important;
}
.f20-sticky-search.is-visible{
  height:auto !important;
}
.f20-sticky-search:not(.is-visible){
  display:block !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Logo do cabeçalho: PNG limpo, sem caixa branca ou recorte. */
.f20-logo{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.f20-logo img{
  background:transparent !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Hero oficial: animação premium discreta no fundo/luz, sem alterar a arte. */
.apollo-hero-banner{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
}
.apollo-hero-banner img{
  position:relative !important;
  z-index:1 !important;
  transform:scale(1.001);
  animation:apolloHeroBreath 8s ease-in-out infinite;
  transform-origin:center;
}
.apollo-hero-banner::after{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    105deg,
    transparent 38%,
    rgba(255,255,255,.08) 48%,
    rgba(168,85,247,.14) 51%,
    transparent 61%
  );
  transform:translateX(-55%) rotate(8deg);
  animation:apolloHeroSweep 7s ease-in-out infinite;
  mix-blend-mode:screen;
}
.apollo-hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 70px rgba(80,45,255,.18),inset 0 0 26px rgba(255,35,210,.10);
  animation:apolloHeroGlow 4.5s ease-in-out infinite;
}

@keyframes apolloHeroBreath{
  0%,100%{transform:scale(1.001)}
  50%{transform:scale(1.012)}
}
@keyframes apolloHeroSweep{
  0%,15%{transform:translateX(-65%) rotate(8deg);opacity:0}
  28%{opacity:.7}
  52%{opacity:.9}
  72%,100%{transform:translateX(65%) rotate(8deg);opacity:0}
}
@keyframes apolloHeroGlow{
  0%,100%{opacity:.65}
  50%{opacity:1}
}

/* Separação real entre desktop e mobile.
   O desktop mantém a composição já aprovada; o mobile recebe
   sua própria geometria de cabeçalho. */
@media (max-width:760px){
  .f20-home-header{
    padding-top:14px !important;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease !important;
  }
  .f20-home-header .f20-header-shell{
    width:calc(100% - 24px) !important;
    min-height:68px !important;
    padding:10px 10px 10px 14px !important;
    justify-content:flex-start !important;
    gap:0 !important;
  }
  .f20-logo{
    width:58px !important;
    height:46px !important;
    flex:0 0 58px !important;
    margin:0 !important;
    align-self:center !important;
  }
  .f20-logo img{
    width:58px !important;
    height:46px !important;
    object-fit:contain !important;
  }
  .f20-header-actions{
    right:10px !important;
    gap:5px !important;
  }
  .f20-header-action{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  /* Banner e textos são redimensionados independentemente no celular. */
  .apollo-hero-banner{
    width:calc(100vw - 28px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    border-radius:20px !important;
  }
  .apollo-hero-banner img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:2048/682 !important;
    object-fit:cover !important;
  }
  .apollo-hero-copy{
    padding:0 16px !important;
    font-size:14px !important;
  }

  /* A busca principal do mobile nunca fica atrás da navegação. */
  .f20-search{
    width:calc(100% - 28px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (min-width:761px){
  .f20-home-header{
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .apollo-hero-banner img,
  .apollo-hero-banner::before,
  .apollo-hero-banner::after{
    animation:none !important;
  }
}