/* --- Reset e base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: #38385e;
  overflow-x: hidden;
}

/* --- Fundo com gradient radial animado --- */
.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 80% 100% at 50% 50%,
    #464c81 0%,
    #464c81 35%,
    transparent 60%
  );
  animation: bg-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bg-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}

/* --- Área central do logo --- */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 5rem;
}

.logo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 5rem;
}

/* --- Imagens do logo --- */
.logo {
  display: block;
  max-width: 100%;
  height: auto;
}

.logo-portal {
  width: clamp(180px, 28vw, 300px);
  animation: portal-in 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
  transform-origin: center center;
}

.logo-innergate {
  width: clamp(270px, 42vw, 420px);
  animation: innergate-in 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) 1.5s forwards;
  opacity: 0;
  transform: translateY(24px);
}

@keyframes portal-in {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(-110deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes innergate-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- "Em breve" fixo na parte inferior --- */
.em-breve {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  padding: 1rem 1.5rem 5rem;
  text-align: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(1.2rem, 10vw, 1.5rem);
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  animation: em-breve-in 0.6s ease-out 2.5s forwards;
  opacity: 0;
  transform: translateY(12px);
}

@keyframes em-breve-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Ajustes para mobile (logo centralizado, em breve fixo) --- */
@media (max-width: 480px) {
  .logo-stack {
    gap: 1rem;
    padding-bottom: 7rem;
  }
}