/* =========================================================
   CR&A — Landing "Em breve"
   Cores extraídas da logo (cria.jpg)
   ========================================================= */

:root {
  --color-wine: #940145;
  --color-pink: #fed2df;

  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;

  --size-title: clamp(3rem, 1.9rem + 5vw, 6rem);
  --size-mark: min(80vw, 38vh, 25rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Regra autoritativa: impede que qualquer `display` de autor anule [hidden] */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  background-color: var(--color-wine);
  color: var(--color-pink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Composição ---------- */

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 3vh, 2.25rem);
}

/* A arte foi recortada com o fundo achatado no mesmo vinho da página,
   por isso não leva moldura, sombra nem cantos arredondados. */
.mark {
  display: block;
  width: var(--size-mark);
  height: auto;
  aspect-ratio: 697 / 864;
}

.title {
  margin: 0;
  font-size: var(--size-title);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.015em;
}

.title__line {
  display: block;
}

.title__line--italic {
  font-style: italic;
}

/* ---------- Entrada em cena ---------- */

.reveal {
  opacity: 0;
  transform: translateY(1rem);
}

.is-revealed .reveal {
  animation: rise 900ms var(--ease-out) forwards;
}

.is-revealed .title.reveal {
  animation-delay: 160ms;
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .is-revealed .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
}