/* Keyframes e transições do site. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================
   INTRO DE ABERTURA
   ======================================== */

@keyframes intro-logo-entra {
  from { opacity: 0; transform: scale(.88) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes intro-slogan-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--azul-profundo), var(--turquesa));
  cursor: pointer;
  /* Saída: cortina para cima */
  transition: transform .8s cubic-bezier(.7, 0, .3, 1), opacity .6s ease .1s;
}

.intro.saindo {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.intro__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  padding: 2rem;
}

.intro__logo-badge {
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.25rem 2rem;
  box-shadow:
    0 4px 24px rgba(12, 59, 90, .25),
    0 1px 6px rgba(0, 0, 0, .12);
  animation: intro-logo-entra .55s cubic-bezier(.34, 1.56, .64, 1) .25s both;
}

.intro__logo {
  display: block;
  width: 160px;
  height: auto;
}

.intro__slogan {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.25rem, 3.5vw, 1.625rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  animation: intro-slogan-entra .45s ease .85s both;
  letter-spacing: .01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

/* ========================================
   SCROLL REVEAL
   ======================================== */

/* Gated por .js para garantir que sem JS o conteúdo fica visível */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--d, 0) * 80ms);
}

.js [data-reveal].visivel {
  opacity: 1;
  transform: none;
}