/* Portti Lab portfolio — page identity. Engine CSS lives in sites-incriveis.css. */

:root {
  --noite: #1E0B33;
  --roxo: #4E018F;
  --creme: #F6F4E5;
  --creme-2: #ECE8D3;
  --grafite: #262827;
  --grafite-suave: #5B5D58;
  --orquidea: #C964CE;

  --display: "Fraunces", Georgia, serif;
  --texto: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 104px; --e7: 160px;
  --margem: clamp(20px, 5vw, 88px);
  --saida: cubic-bezier(0.23, 1, 0.32, 1);

  background: var(--noite);
  color: var(--creme);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--noite);
  color: var(--creme);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orquidea); outline-offset: 4px; }

.rotulo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--roxo);
}
.rotulo-claro { color: var(--orquidea); }

/* ---------- header ---------- */

.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--margem);
  color: var(--creme);
  transition: color 250ms ease, background-color 250ms ease;
}
.topo.topo-claro {
  color: var(--grafite);
  background: rgba(246, 244, 229, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.topo a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.topo-marca { gap: 10px; font-family: var(--display); font-size: 19px; }
.marca-porta { height: 24px; width: auto; fill: none; stroke: currentColor; stroke-width: 7; stroke-linejoin: round; }
.topo-cta {
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- button ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--roxo);
  color: var(--creme);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  transition: transform 160ms var(--saida), background-color 200ms ease;
}
.botao::after { content: "→"; font-size: 18px; }
.botao:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .botao:hover { background: var(--noite); } }

/* ---------- scene 1: the door ---------- */

.cena-porta { background: var(--noite); }
.cena-porta .fx-palco {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  padding: 88px var(--margem) var(--e4);
  gap: var(--e5);
}
.porta-texto { display: grid; gap: var(--e3); max-width: 640px; will-change: transform, opacity; }
.porta-titulo {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: clamp(44px, 6.2vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--creme);
}
.porta-sub { max-width: 40ch; font-size: 18px; color: rgba(246, 244, 229, 0.72); }

.porta-cena {
  justify-self: center;
  position: relative;
  perspective: 1600px;
  /* zoom pivots on the doorway centre so translate() lands it in the middle of the screen */
  transform-origin: 50% 50%;
  will-change: transform;
}
.porta-moldura {
  position: relative;
  height: min(70vh, 640px);
  aspect-ratio: 128 / 207;
  border: 2px solid var(--creme);
  border-bottom: none;
  transform-style: preserve-3d;
}
.porta-luz { position: absolute; inset: 0; overflow: hidden; background: var(--creme); }
.porta-luz img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.porta-folha {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: var(--roxo);
  border: 2px solid var(--creme);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1.6fr;
  gap: 9%;
  padding: 14% 12%;
  backface-visibility: hidden;
  will-change: transform;
}
.almofada { border: 1.5px solid rgba(246, 244, 229, 0.55); }
.macaneta {
  position: absolute;
  right: 10%; top: 52%;
  width: 10px; height: 32px;
  border-radius: 6px;
  background: var(--orquidea);
}
.porta-soleira {
  position: absolute;
  left: -14%; right: -14%; bottom: -1px;
  height: 2px;
  background: var(--creme);
}

/* ---------- scene 2: who ---------- */

.cena-quem {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--e6);
  align-items: center;
  padding: var(--e7) var(--margem) var(--e6);
}
.quem-foto { margin: 0; justify-self: end; width: min(100%, 460px); }
.quem-foto img { width: 100%; }
.quem-texto { display: grid; gap: var(--e3); max-width: 560px; }
.quem-titulo {
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.quem-titulo em { font-style: italic; color: var(--roxo); }
.quem-texto p:not(.rotulo) { font-size: 18px; color: var(--grafite-suave); }

/* ---------- scene 3: the work (peak) ---------- */

.cena-trabalhos .fx-palco {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: stretch;
  justify-content: stretch;
  padding: 84px var(--margem) var(--e4);
  gap: var(--e3);
}
.trabalhos-palco { display: grid; min-height: 0; }
.trabalho {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--e5);
  align-items: center;
  min-height: 0;
}
.trabalho-texto { display: grid; gap: var(--e2); align-content: center; }
.trabalho-tipo {
  justify-self: start;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafite-suave);
}
.trabalho-no-ar { color: var(--roxo); }
.trabalho-no-ar::before { content: "● "; color: var(--orquidea); }
.trabalho-nome {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.trabalho-desc { max-width: 34ch; font-size: 18px; color: var(--grafite-suave); }
.trabalho-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--roxo);
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}
.trabalho-link::after { content: " ↗"; }

.aparelhos {
  position: relative;
  height: min(66vh, 600px);
  will-change: clip-path;
}
.tela-desktop {
  position: absolute;
  left: 0; top: 0;
  width: 86%;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: var(--grafite);
  box-shadow: 0 30px 60px -30px rgba(30, 11, 51, 0.45);
  border-top: 22px solid var(--grafite);
}
.tela-desktop img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tela-celular {
  position: absolute;
  right: 0; bottom: 0;
  width: 27%;
  aspect-ratio: 390 / 844;
  margin: 0;
  border: 7px solid var(--grafite);
  border-radius: 28px;
  overflow: hidden;
  background: var(--grafite);
  box-shadow: 0 30px 60px -24px rgba(30, 11, 51, 0.55);
}
.tela-rolo { will-change: transform; }
.tela-rolo img { width: 100%; height: auto; }

.trabalhos-indice {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e4);
  font-size: 14px;
  color: var(--grafite-suave);
}
.trabalhos-indice li { transition: color 200ms ease; }
.trabalhos-indice li.ativo { color: var(--roxo); font-weight: 700; }

/* ---------- scene 4: how ---------- */

.cena-como { padding: var(--e7) var(--margem); display: grid; gap: var(--e6); }
.como-titulo {
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.como-passos {
  list-style: none;
  counter-reset: passo;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e5);
}
.como-passos li { counter-increment: passo; display: grid; gap: var(--e2); align-content: start; padding-top: var(--e3); border-top: 1px solid rgba(38, 40, 39, 0.2); }
.como-passos li::before { content: counter(passo); font-family: var(--display); font-size: 56px; line-height: 1; color: var(--roxo); }
.como-passos h3 { font-family: var(--texto); font-size: 21px; font-weight: 700; }
.como-passos p { color: var(--grafite-suave); }

/* ---------- scene 5: Google and AI ---------- */

.cena-ia { padding: var(--e7) var(--margem); display: grid; gap: var(--e4); min-height: 100svh; align-content: center; }
.ia-pergunta {
  justify-self: start;
  max-width: 100%;
  padding: 18px 24px;
  border: 1px solid rgba(246, 244, 229, 0.25);
  border-radius: 16px;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--creme);
}
.ia-cursor { color: var(--orquidea); font-weight: 700; }
.ia-titulo {
  font-family: var(--display);
  font-size: clamp(34px, 4.2vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.ia-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.ia-lista li { color: rgba(246, 244, 229, 0.75); }
.ia-lista strong { display: block; margin-bottom: 6px; color: var(--creme); font-size: 19px; }
.ia-nota { max-width: 60ch; font-size: 15px; color: rgba(246, 244, 229, 0.6); }

/* ---------- scene 6: closing ---------- */

.cena-fim { padding: var(--e7) var(--margem); display: grid; justify-items: start; gap: var(--e4); }
.fim-titulo {
  font-family: var(--display);
  font-size: clamp(44px, 6.4vw, 120px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.fim-alt { color: var(--grafite-suave); }
.fim-alt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--roxo); }

.rodape {
  padding: var(--e5) var(--margem) var(--e4);
  display: grid;
  gap: 6px;
  background: var(--grafite);
  color: rgba(246, 244, 229, 0.75);
  font-size: 15px;
}
.rodape a { display: inline-flex; align-items: center; min-height: 44px; color: var(--creme); }

/* ---------- phone ---------- */

@media (max-width: 860px) {
  .topo-marca span { font-size: 17px; }

  .cena-porta .fx-palco {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-content: start;
    padding-top: 92px;
    gap: var(--e4);
  }
  .porta-texto { gap: var(--e2); }
  .porta-titulo { font-size: clamp(38px, 11vw, 52px); }
  .porta-sub { font-size: 16px; }
  .porta-cena { align-self: start; }
  .porta-moldura { height: min(44svh, 380px); }

  .cena-quem { grid-template-columns: 1fr; gap: var(--e4); padding: var(--e6) var(--margem) var(--e5); }
  .quem-foto { justify-self: start; width: min(78%, 340px); }

  .cena-trabalhos .fx-palco { padding: 76px var(--margem) var(--e3); gap: var(--e2); }
  .trabalho { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: var(--e3); align-content: center; }
  .aparelhos { grid-row: 1; height: min(50svh, 440px); }
  .tela-desktop { display: none; }
  .tela-celular { left: 50%; right: auto; transform: translateX(-50%); width: auto; height: 100%; border-width: 6px; border-radius: 26px; }
  .trabalho-texto { grid-row: 2; gap: 10px; }
  .trabalho-nome { font-size: clamp(34px, 10vw, 46px); }
  .trabalho-desc { font-size: 16px; }
  .trabalhos-indice { gap: 4px 18px; font-size: 13px; }

  .cena-como { padding: var(--e6) var(--margem); gap: var(--e5); }
  .como-passos { grid-template-columns: 1fr; gap: var(--e4); }

  .cena-ia { padding: var(--e6) var(--margem); }
  .ia-lista { grid-template-columns: 1fr; gap: var(--e3); }

  .cena-fim { padding: var(--e6) var(--margem); }
  .botao { width: 100%; justify-content: center; }
}

/* ---------- reduced motion: everything still and readable ---------- */

.fx-reduzido .porta-folha { transform: rotateY(-38deg); }
.fx-reduzido .porta-cena { transform: none !important; }
.fx-reduzido .cena-porta .fx-palco { min-height: 100svh; }
.fx-reduzido .trabalhos-palco { display: grid; gap: var(--e6); }
.fx-reduzido .trabalho { grid-area: auto; }
.fx-reduzido .trabalhos-indice { display: none; }