/* Nova capa Creator: moldura azul (shader) + logo + "Ecossistema digital de crescimento".
   Substitui a capa antiga com zoom. A seção .hero-portal original continua existindo
   (mantém o bloco "Sua marca em outro enquadramento"), mas sem o efeito de zoom. */

/* Esconde a arte antiga da capa (linhas, letras, campo recortado, "Role para entrar") */
.hero-portal [data-gp-backdrop],
.hero-portal [data-gp-field],
.hero-portal [data-gp-art],
.hero-portal [data-gp-front],
.hero-portal [data-gp-caption],
.hero-portal [data-gp-fallback] {
  display: none !important;
}
.hero-portal [data-gp-pin] {
  height: 100vh !important;
  height: 100svh !important;
  background: #000;
}

/* ---------- Capa nova ---------- */
#cr-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
  background: #05070d;
  contain: strict;
}
#cr-hero .cr-stage {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}
#cr-hero canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(.16, 1, .3, 1);
}
#cr-hero.is-ready canvas { opacity: 1; }

/* Desce suave para o preto do site */
#cr-hero .cr-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 92%);
  pointer-events: none;
}

#cr-hero .cr-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.2vh, 30px);
  padding: 0 24px;
  will-change: transform, opacity;
}

#cr-hero .cr-logo {
  display: block;
  width: min(70vw, 560px);
  height: auto;
  opacity: 0;
  filter: blur(16px);
  transform: scale(1.06);
  user-select: none;
  -webkit-user-drag: none;
}
#cr-hero.is-in .cr-logo {
  animation:
    cr-logo-in 1.5s cubic-bezier(.16, 1, .3, 1) .25s forwards,
    cr-logo-breathe 5s ease-in-out 1.9s infinite;
}
@keyframes cr-logo-in {
  to { opacity: 1; filter: blur(0) drop-shadow(0 0 0 rgba(53, 196, 232, 0)); transform: scale(1); }
}
@keyframes cr-logo-breathe {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 10px rgba(53, 196, 232, .18)); transform: scale(1); }
  50% { opacity: 1; filter: drop-shadow(0 0 26px rgba(53, 196, 232, .42)); transform: scale(1.012); }
}

/* "Ecossistema digital de crescimento": letras entram uma a uma, depois um brilho passa */
#cr-hero .cr-eyebrow {
  position: relative;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(9.5px, 2.5vw, 13px);
  letter-spacing: .2em;
  margin-right: -.2em; /* compensa o espaçamento da última letra */
  text-transform: uppercase;
  font-weight: 500;
  color: #8fd8f2;
  text-shadow: 0 0 14px #000, 0 0 4px #000;
}
#cr-hero .cr-eyebrow .w { display: inline-block; white-space: nowrap; }
#cr-hero .cr-eyebrow .l {
  display: inline-block;
  opacity: 0;
  transform: translateY(.7em);
  filter: blur(6px);
}
#cr-hero.is-in .cr-eyebrow .l {
  animation: cr-letter .9s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(1.05s + var(--i) * 28ms);
}
@keyframes cr-letter { to { opacity: 1; transform: none; filter: blur(0); } }

#cr-hero .cr-eyebrow::after {
  content: "";
  position: absolute;
  inset: -4px -10%;
  background: linear-gradient(100deg, transparent 35%, rgba(242, 251, 255, .55) 50%, transparent 65%);
  mix-blend-mode: overlay;
  transform: translateX(-120%);
  opacity: 0;
}
#cr-hero.is-in .cr-eyebrow::after {
  animation: cr-sheen 6s ease-in-out 2.4s infinite;
}
@keyframes cr-sheen {
  0% { transform: translateX(-120%); opacity: 0; }
  8% { opacity: 1; }
  30% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* Linha fininha com uma luz descendo: indica que é para arrastar para baixo */
#cr-hero .cr-cue {
  position: absolute;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  width: 1px;
  height: 52px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22));
  overflow: hidden;
  opacity: 0;
}
#cr-hero.is-in .cr-cue { animation: cr-fade-in 1s ease 2.2s forwards; }
#cr-hero .cr-cue::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: linear-gradient(to bottom, rgba(53, 196, 232, 0), #9fe6ff);
  animation: cr-cue 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes cr-cue { to { top: 100%; } }
@keyframes cr-fade-in { to { opacity: 1; } }

@media (min-width: 768px) {
  #cr-hero .cr-logo { width: min(48vw, 640px); }
  #cr-hero .cr-eyebrow { letter-spacing: .32em; margin-right: -.32em; }
}

@media (prefers-reduced-motion: reduce) {
  #cr-hero .cr-logo,
  #cr-hero .cr-eyebrow .l,
  #cr-hero .cr-cue { animation: none !important; opacity: 1; filter: none; transform: none; }
  #cr-hero .cr-eyebrow::after,
  #cr-hero .cr-cue::after { animation: none !important; display: none; }
}