/* A abertura só aparece quando o JavaScript confirma a primeira visita da sessão. */
.brand-intro {
  display: none;
}
.intro-pending .brand-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #101411;
  color: #f5f7f2;
  animation: intro-safety-exit 0.4s 6s forwards;
}
.intro-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.intro-logo-wrap {
  position: relative;
  width: clamp(180px, 24vw, 300px);
  overflow: hidden;
}
.intro-logo {
  display: block;
  width: 100%;
  height: auto;
  animation: logo-arrival 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.intro-shine {
  position: absolute;
  inset: -40% -70%;
  background: linear-gradient(
    105deg,
    transparent 42%,
    #c2f57835 49%,
    #ffffff70 50%,
    transparent 57%
  );
  mix-blend-mode: screen;
  transform: translateX(-70%);
  animation: logo-shine 1.5s 0.3s ease-in-out both;
  pointer-events: none;
}
.intro-line {
  height: 1px;
  width: 110px;
  margin-top: 33px;
  background: #ffffff20;
  overflow: hidden;
}
.intro-line span {
  display: block;
  height: 100%;
  background: #c2f578;
  transform-origin: left;
  animation: intro-line 1.9s ease-in-out both;
}
.intro-tagline {
  margin: 18px 0 0;
  font:
    500 8px/1.6 Manrope,
    Arial,
    sans-serif;
  letter-spacing: 3px;
  color: #899584;
  animation: logo-arrival 1.2s 0.4s both;
}
.intro-skip {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(28px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  border: 1px solid #ffffff20;
  border-radius: 4px;
  background: transparent;
  color: #d5ddd1;
  font:
    500 10px Manrope,
    Arial,
    sans-serif;
  animation: logo-arrival 0.5s 0.6s both;
}
.intro-skip:hover {
  color: #c2f578;
  border-color: #c2f57870;
}
.brand-intro.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    visibility 0.45s;
}

@keyframes logo-arrival {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes logo-shine {
  from {
    transform: translateX(-70%);
  }
  to {
    transform: translateX(70%);
  }
}
@keyframes intro-line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes intro-safety-exit {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-pending .brand-intro {
    display: none;
  }
}

.intro-logo {
  stroke: none;
  overflow: visible;
}
.intro-wings {
  transform-box: fill-box;
  transform-origin: center;
  animation: wings-reveal 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.intro-wordmark {
  animation: wordmark-reveal 0.8s 0.4s ease both;
}
@keyframes wings-reveal {
  from {
    clip-path: inset(0 50% 0 50%);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes wordmark-reveal {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}