/* =============================================================
   Tríplice Capital — página única, duas cenas, zero JavaScript.
   A paleta sai da própria fotografia: pedra grafite, luz dourada, pedra clara.
   Toda a vida da página (abertura, respiração da foto, revelação) é CSS, o que
   mantém a CSP `default-src 'none'` do vhost e não deixa nada para quebrar.
   ============================================================= */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fontes/cormorant-garamond.woff2?v=2") format("woff2");
  /* Arquivo variável: um só para toda a faixa de peso. */
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --preto:        #0b0c0e;
  --grafite:      #141518;
  --dourado:      #d9b47a;
  --dourado-vivo: #f0dcb8;
  --marfim:       #f3efe8;

  --serifada: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
              Palatino, Georgia, "Times New Roman", serif;

  /* O relógio da abertura, num lugar só: mexer aqui remonta a sequência inteira. */
  --t-traco:   0.30s;  /* o contorno começa a se desenhar */
  --t-luzes:   1.00s;  /* os três acendem */
  --t-fachada: 1.60s;  /* a luz se abre e o prédio aparece */
  --t-frase:   2.20s;  /* a frase entra, palavra a palavra */
}

* { box-sizing: border-box; }

html {
  height: 100%;
  scroll-behavior: smooth;
  /* Duas cenas, dois tempos: o rolar para e assenta em cada uma. */
  scroll-snap-type: y mandatory;
  background: var(--preto);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--preto);
  color: var(--marfim);
  font-family: var(--serifada);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(217, 180, 122, 0.3); color: var(--marfim); }

:focus-visible {
  outline: 1px solid var(--dourado);
  outline-offset: 6px;
}

/* -------------------------------------------------------------
   Abertura
   ------------------------------------------------------------- */
.abertura {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--preto);
  pointer-events: none;
  animation: abrir-a-luz 1.1s ease-in-out var(--t-fachada) both;
}

/* A cortina não só some: ela clareia um instante, como a luz da fachada
   acendendo, e só então entrega a imagem. */
@keyframes abrir-a-luz {
  0%   { opacity: 1; background: var(--preto); }
  35%  { opacity: 1; background: #1b1a18; }
  100% { opacity: 0; background: var(--preto); visibility: hidden; }
}

.abertura__marca {
  position: relative;
  width: clamp(176px, 26vw, 330px);
  filter: drop-shadow(0 0 26px rgba(217, 180, 122, 0.22));
}

/* A marca é a arte real do logotipo, em dourado. Em vez de "se desenhar" (o que
   obrigaria a redesenhá-la em traço e nunca seria a mesma marca), ela ACENDE: uma
   máscara em gradiente sobe pela figura, como a luz que lambe a pedra da fachada
   na própria fotografia. */
.abertura__simbolo {
  display: block;
  width: 100%;
  height: auto;

  --mascara: linear-gradient(to top,
    #000 0%, #000 34%, rgba(0, 0, 0, 0.55) 48%, transparent 64%);
  -webkit-mask-image: var(--mascara);
          mask-image: var(--mascara);
  -webkit-mask-size: 100% 300%;
          mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 50% 0%;
          mask-position: 50% 0%;
  animation: acender-marca 1.05s cubic-bezier(0.4, 0, 0.3, 1) var(--t-traco) forwards;
}

@keyframes acender-marca {
  from { -webkit-mask-position: 50% 0%;   mask-position: 50% 0%; }
  to   { -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
}

/* As três mentes do logotipo acendem uma a uma — são os três sócios. O brilho
   é um halo por cima da arte, nas coordenadas medidas no arquivo original. */
.mente {
  position: absolute;
  /* Estreito de propósito: mais largo que isso, os halos de baixo se tocam e
     comem a estrela do centro. */
  width: 17%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 236, 200, 0.95) 0%,
    rgba(240, 220, 184, 0.55) 32%,
    rgba(217, 180, 122, 0.22) 55%,
    rgba(217, 180, 122, 0) 72%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: brilhar 0.9s ease-out both;
}

.mente--1 { left: 49.1%; top: 29.1%; animation-delay: var(--t-luzes); }
.mente--2 { left: 29.1%; top: 79.7%; animation-delay: calc(var(--t-luzes) + 0.15s); }
.mente--3 { left: 74.5%; top: 79.5%; animation-delay: calc(var(--t-luzes) + 0.30s); }

@keyframes brilhar {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.35); }
  45%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0.72; transform: translate(-50%, -50%) scale(1); }
}

/* -------------------------------------------------------------
   Cenas
   ------------------------------------------------------------- */
.cena {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@supports not (height: 100svh) {
  .cena { height: 100vh; min-height: 100vh; }
}

/* ---- Cena 1: a fachada ---- */
.fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Empurra o quadro para baixo: o letreiro do prédio fica no alto e a entrada,
     mais escura, sobra embaixo para a frase. Mexer aqui remonta a composição. */
  object-position: 67% 72%;
  z-index: 0;
  opacity: 0;
  /* Duas animações: a revelação (uma vez) e a respiração (para sempre). */
  animation:
    revelar  1.6s ease-out var(--t-fachada) both,
    respirar 48s ease-in-out var(--t-fachada) infinite alternate;
}

@keyframes revelar {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* A foto nunca fica parada: um zoom lentíssimo, ida e volta, que ninguém
   percebe acontecendo mas todo mundo sente. */
@keyframes respirar {
  from { transform: scale(1); }
  to   { transform: scale(1.085); }
}

.camada {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Véu: escurece de baixo para cima para a frase ter contraste sem apagar o prédio. */
.camada--veu {
  background:
    linear-gradient(to top,
      rgba(8, 9, 11, 0.94) 0%,
      rgba(8, 9, 11, 0.82) 20%,
      rgba(8, 9, 11, 0.56) 34%,
      rgba(8, 9, 11, 0.28) 50%,
      rgba(8, 9, 11, 0.10) 70%,
      rgba(8, 9, 11, 0.26) 100%);
}

/* Brilho quente sobre a entrada, pulsando devagar como a luz da fachada. */
.camada--brilho {
  background: radial-gradient(60% 42% at 52% 68%,
    rgba(230, 176, 96, 0.20) 0%,
    rgba(230, 176, 96, 0.07) 45%,
    rgba(230, 176, 96, 0) 75%);
  mix-blend-mode: screen;
  animation: respirar-luz 9s ease-in-out var(--t-fachada) infinite alternate;
}

@keyframes respirar-luz {
  from { opacity: 0.72; }
  to   { opacity: 1; }
}

/* Vinheta: fecha os cantos e empurra o olho para o centro. */
.camada--vinheta {
  background: radial-gradient(118% 80% at 50% 42%,
    rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.55) 100%);
}

/* Grão de filme: um ladrilho de 96px a 5%. É o que tira o ar de render da
   imagem e deixa a tela com textura de fotografia. */
.camada--grao {
  background-image: url("/assets/grain.png");
  background-repeat: repeat;
  background-size: 96px 96px;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  z-index: 3;
}

/* ---- A frase ---- */
.sonho {
  position: absolute;
  left: 50%;
  bottom: clamp(96px, 14vh, 164px);
  transform: translateX(-50%);
  z-index: 2;

  margin: 0;
  width: min(92vw, 22ch);
  text-align: center;
  font-weight: 300;
  font-size: clamp(2.3rem, 8vw, 5rem);
  line-height: 1.1;
  letter-spacing: 0.012em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7);
  padding-top: 34px;
}

/* O fio dourado acima da frase se abre do centro, como o filete do letreiro. */
.sonho::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 104px;
  height: 1.5px;
  transform: translateX(-50%) scaleX(0);
  background: linear-gradient(to right,
    rgba(217, 180, 122, 0), var(--dourado-vivo) 50%, rgba(217, 180, 122, 0));
  box-shadow: 0 0 12px rgba(217, 180, 122, 0.45);
  animation: abrir-fio 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) var(--t-frase) forwards;
}

@keyframes abrir-fio {
  to { transform: translateX(-50%) scaleX(1); }
}

/* Palavra a palavra: cada uma sobe com um leve desfoque que assenta. */
.palavra {
  display: inline-block;
  opacity: 0;
  animation: entrar-palavra 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.palavra:nth-child(1) { animation-delay: calc(var(--t-frase) + 0.00s); }
.palavra:nth-child(2) { animation-delay: calc(var(--t-frase) + 0.11s); }
.palavra:nth-child(3) { animation-delay: calc(var(--t-frase) + 0.22s); }
.palavra:nth-child(4) { animation-delay: calc(var(--t-frase) + 0.33s); }
.palavra:nth-child(5) { animation-delay: calc(var(--t-frase) + 0.44s); }
.palavra:nth-child(6) { animation-delay: calc(var(--t-frase) + 0.55s); }

@keyframes entrar-palavra {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* ---- O convite a rolar: um fio com uma luz que desce, sem a palavra "role" ---- */
.convite {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgba(217, 180, 122, 0.18);
  opacity: 0;
  animation: surgir-convite 1.4s ease-out calc(var(--t-frase) + 1.2s) forwards;
}

.convite__fio {
  position: absolute;
  inset-inline: 0;
  top: -46px;
  height: 46px;
  background: linear-gradient(to bottom,
    rgba(217, 180, 122, 0), var(--dourado-vivo));
  animation: descer-luz 2.6s cubic-bezier(0.5, 0, 0.5, 1) calc(var(--t-frase) + 1.6s) infinite;
}

@keyframes surgir-convite { to { opacity: 1; } }
@keyframes descer-luz {
  0%   { transform: translateY(0); }
  55%  { transform: translateY(92px); }
  100% { transform: translateY(92px); }
}

/* ---- Cena 2: a marca, em silêncio ---- */
.cena--marca {
  display: grid;
  place-items: center;
  background:
    radial-gradient(42% 32% at 50% 44%, rgba(217, 180, 122, 0.085) 0%, rgba(217, 180, 122, 0) 70%),
    radial-gradient(74% 56% at 50% 46%, #1e2024 0%, var(--grafite) 46%, #08090b 100%);
  padding: 40px 24px;
}

/* Um filete inteiro, bem fraco, fecha a cena como a borda de um cartão
   impresso — é o que tira o ar de "tela vazia" do grafite. */
.cena--marca::after {
  content: "";
  position: absolute;
  inset: clamp(16px, 3.4vw, 40px);
  border: 1px solid rgba(217, 180, 122, 0.14);
  pointer-events: none;
  z-index: 1;
}

.cartao {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cartao__logo {
  width: clamp(230px, 42vw, 430px);
  height: auto;
  filter: drop-shadow(0 10px 50px rgba(0, 0, 0, 0.6));
}

.cartao__linha {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 0;
  font-size: clamp(0.76rem, 1.7vw, 0.95rem);
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: rgba(243, 239, 232, 0.74);
}

.cartao__linha span { color: var(--dourado); }

.cartao__linha em {
  font-style: normal;
  position: relative;
  padding-left: 22px;
}

/* O losango do próprio logotipo, repetido pequeno como separador. */
.cartao__linha em::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  transform: rotate(45deg);
  background: var(--dourado);
  opacity: 0.8;
}

/* A cena 2 se monta enquanto você rola até ela — animação dirigida pelo scroll,
   sem JavaScript. Onde o navegador não tiver `view()`, ela só já está lá. */
@supports (animation-timeline: view()) {
  .cartao {
    opacity: 0;
    transform: translateY(26px);
    animation: montar-cartao linear both;
    animation-timeline: view();
    animation-range: entry 18% cover 46%;
  }
  @keyframes montar-cartao {
    to { opacity: 1; transform: none; }
  }
}

/* -------------------------------------------------------------
   Telas baixas e deitadas: sobra pouco vertical, a frase sobe.
   ------------------------------------------------------------- */
@media (max-height: 560px) {
  .sonho   { bottom: 64px; font-size: clamp(1.8rem, 6vw, 3rem); padding-top: 24px; }
  .convite { display: none; }
}

/* -------------------------------------------------------------
   Quem pediu menos movimento vê a fachada direto, inteira e parada.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .abertura { display: none; }
  .fundo,
  .camada--brilho { animation: none; opacity: 1; }
  .palavra { animation: none; opacity: 1; }
  .sonho::before { animation: none; transform: translateX(-50%) scaleX(1); }
  .convite { animation: none; opacity: 1; }
  .convite__fio { animation: none; top: 0; }
  .cartao { animation: none; opacity: 1; transform: none; }
}