/* =====================================================================================================================
   Morae — the projects' own identity inside the system's frame (v4 "Sistema", 29/10). Loaded after the page CSS on
   every page, next to kit.css (.quadro, .cantos, .trilho, .no, .porta, .conexao, .pacote).

   Each project block / page carries its palette as custom properties, written inline by tools/build.mjs from
   tools/identidades.mjs, every text checked against WCAG AA there:
     --p-base --p-superficie --p-destaque --p-texto   the product's own colours (sampled from the product)
     --p-texto-2       a quieter text on the base (still AA, with a pattern line under it)
     --p-barra-texto   text on the surface colour (a window's title bar)
     --p-traco         the line colour of the emblem (the accent when it stands off the base, else the text colour)
     --p-veu           a veil over the base, only when its text needs it to reach AA (the brand colours stay)
     --p-linha         a hairline on the base

   Components
     .painel-projeto  the project's surface inside a frame: its base colour, its pattern at low contrast and the veil.
                      Children: .painel-motivo (the pattern: a tile already in the project's palette at low alpha, at
                      --motivo-tam; its url is written in the element's own style, so it resolves against the page),
                      .painel-cabeca (a head row).
     .logo-projeto    the product's mark: its logotype (<img>, height --logo-h) or its name in its own face
                      (.logo-projeto--texto, family "p-<id>": one of the @font-face below, downloaded only where used).
     .anotacao        a numbered annotation marker on a close-up: a small square with the number, at --x/--y of the
                      image. .ativa (hover, focus, click) turns it amber. Its hairline leader to the note is drawn by
                      projeto.js: .recorte-fio (port to note), .recorte-guia (marker to port, only while active),
                      .recorte-porta (the port on the image's edge).
     .recorte         a close-up figure carrying annotations: .recorte-imagem (inset frame) > .recorte-tela (the
                      image and its markers), .recorte-notas (the numbered notes). Computer: notes beside the image,
                      each at its marker's height (.com-fios); phone: the numbered list under it.
     .ficha-tecnica   the spec sheet: a head (the logotype on its panel + the project's rail) and compact two-column
                      rows with thin dividers; values that are data in Geist Mono (dd.dado).
     .antes-depois    two nodes (antes, depois) and the wire between them; the depois node is the project's panel;
                      .ligado lights the wire and sends one packet along it.
     .trilho-projeto  the layout of a project's rail: index, type, platform, status (the kit's .trilho gives the face).
   ===================================================================================================================== */

/* the products' own faces (OFL subsets in media/<id>/identidade/, tools/identidades/fontes.py), each under its own
   family name "p-<id>" so it never mixes with Morae's Geist and Unbounded or with a font installed on the visitor's
   computer; tools/build.mjs warns when a project's face is missing here */
@font-face { font-family: "p-nzah"; src: url("../media/nzah/identidade/fonte.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* Big Shoulders Display 900 */
@font-face { font-family: "p-plano"; src: url("../media/plano/identidade/fonte.woff2") format("woff2"); font-weight: 650; font-style: normal; font-display: swap; } /* Inter 650 */
@font-face { font-family: "p-cerebro"; src: url("../media/cerebro/identidade/fonte.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* Oxanium 600 */
@font-face { font-family: "p-diniz"; src: url("../media/diniz/identidade/fonte.woff2") format("woff2"); font-weight: 450; font-style: normal; font-display: swap; } /* Bodoni Moda 450 */
@font-face { font-family: "p-nexo"; src: url("../media/nexo/identidade/fonte.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } /* Montserrat 300 */
@font-face { font-family: "p-orbita"; src: url("../media/orbita/identidade/fonte.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* Unbounded 600 */
@font-face { font-family: "p-atlas"; src: url("../media/atlas/identidade/fonte.woff2") format("woff2"); font-weight: 680; font-style: normal; font-display: swap; } /* Inter 680 */
@font-face { font-family: "p-sinal"; src: url("../media/sinal/identidade/fonte.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* Geist 600 */
@font-face { font-family: "p-foco"; src: url("../media/foco/identidade/fonte.woff2") format("woff2"); font-weight: 270; font-style: normal; font-display: swap; } /* Inter 270 */
@font-face { font-family: "p-desfoco"; src: url("../media/desfoco/identidade/fonte.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* Inter 900 */
@font-face { font-family: "p-leal-captions"; src: url("../media/leal-captions/identidade/fonte.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Poppins 700 */
@font-face { font-family: "p-assistente"; src: url("../media/assistente/identidade/fonte.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* Sora 600 */
@font-face { font-family: "p-grande-salto"; src: url("../media/grande-salto/identidade/fonte.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* Pixelify Sans 600 */

/* soft corners (Rian, 29/10: "menos quadrado"): a frame (.quadro) is rounded by the kit; whatever sits inset in it
   takes the concentric radius (the frame's minus the inset), small pieces a small radius, markers and ports are circles */
:root {
  --p-raio: var(--raio-3, 24px); /* a frame (.quadro) and what is inset in it, minus the inset */
  --p-raio-cartao: var(--raio-2, 16px); /* cards: the before/after nodes */
  --p-raio-peca: var(--raio-1, 10px); /* small pieces: a note's highlight */
}

/* ===================================================================== the panel */
.painel-projeto {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--p-base, var(--marinho));
  color: var(--p-texto, var(--gelo));
}
.painel-projeto::after {
  /* the veil (transparent unless the palette needs it) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--p-veu, transparent);
}
.painel-motivo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: repeat; background-position: 0 0; background-size: var(--motivo-tam, 56px);
}
.painel-cabeca {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 24px; --logo-h: 22px;
}

/* ===================================================================== the mark */
.logo-projeto { display: inline-flex; align-items: center; flex: none; max-width: 100%; line-height: 1; }
.logo-projeto img { display: block; height: var(--logo-h, 22px); width: auto; max-width: 100%; }
.logo-projeto--texto { font-size: calc(var(--logo-h, 22px) * 0.9); color: var(--p-texto, currentColor); letter-spacing: -0.01em; white-space: nowrap; }

/* ===================================================================== the rail of a project */
.trilho-projeto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px clamp(14px, 1.6vw, 22px); margin: 0; }
.trilho-projeto > span { white-space: nowrap; }
.trilho-projeto .status--trilho { font: inherit; letter-spacing: inherit; color: inherit; }

/* ===================================================================== annotations */
.anotacao {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  display: grid; place-items: center; width: 24px; height: 24px; translate: -50% -50%;
  border-radius: 50%; background: var(--meianoite); color: var(--gelo); text-decoration: none;
  font: 600 0.75rem/1 var(--fonte); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(238, 242, 250, 0.7), 0 3px 8px -2px rgba(7, 12, 34, 0.45);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, scale 0.35s var(--ease-saida), opacity 0.35s;
}
.anotacao::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; } /* a 44 px target on a 24 px square */
.anotacao.ativa { background: var(--ambar); color: var(--meianoite); box-shadow: 0 0 0 1px var(--meianoite), 0 3px 8px -2px rgba(7, 12, 34, 0.45); }
.anotacao:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 50%; }
.movimento .recorte:not(.entrou) .anotacao { opacity: 0; }
.movimento .recorte.entrou .anotacao { animation: anotacao-entra 0.5s var(--ease-saida) both; animation-delay: calc(var(--n, 0) * 90ms + 120ms); }
@keyframes anotacao-entra { from { opacity: 0; scale: 0.55; } to { opacity: 1; scale: 1; } }

/* ===================================================================== close-ups */
.recortes { display: grid; gap: clamp(56px, 7vw, 104px); margin-top: clamp(28px, 4vw, 48px); }
.recorte { position: relative; display: grid; gap: 22px; margin: 0; }
.recorte-imagem { position: relative; padding: 6px; background: var(--branco); border-radius: var(--p-raio); }
.recorte-tela { position: relative; overflow: visible; }
.recorte-tela img { display: block; width: 100%; height: auto; background: var(--tela-fundo); border-radius: calc(var(--p-raio) - 6px); }
.recorte--alta .recorte-imagem { width: min(100%, 360px); justify-self: center; }

.recorte-notas { list-style: none; display: grid; gap: 4px; align-content: start; margin: 0; padding: 0; }
.recorte-nota {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px 12px 12px 10px; margin-left: -10px; border-radius: var(--p-raio-peca);
  transition: background-color 0.25s;
}
.anotacao-num {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--linha-forte); color: var(--tinta);
  font: 600 0.75rem/1 var(--fonte); font-variant-numeric: tabular-nums;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.recorte-nota strong { display: block; padding-top: 2px; font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--tinta); }
.recorte-nota p { margin-top: 4px; font-size: 0.9375rem; line-height: 1.5; color: var(--ardosia); max-width: 44ch; }
.recorte-nota.ativa { background: var(--claro-2); }
.recorte-nota.ativa .anotacao-num { background: var(--ambar); box-shadow: none; }
.recorte-nota:target { background: var(--claro-2); }

/* the leaders (projeto.js, computer only) */
.recorte-fios { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; } /* over the image, under the markers */
.recorte-fio { fill: none; stroke: var(--linha-forte); stroke-width: 1; transition: stroke 0.2s; }
.recorte-fio.ativa { stroke: var(--ambar-fio); }
.recorte-guia { fill: none; stroke: var(--ambar); stroke-width: 1.5; stroke-linecap: square; opacity: 0; transition: opacity 0.2s; }
.recorte-guia.ativa { opacity: 1; }
.recorte-porta { fill: var(--claro); stroke: var(--linha-forte); stroke-width: 1; transition: fill 0.2s, stroke 0.2s; }
.recorte-porta.ativa { fill: var(--ambar); stroke: var(--ambar-fio); }
.movimento .recorte.entrou .recorte-fio { stroke-dasharray: 1 1; animation: anotacao-traco 0.9s var(--ease-meio) both; animation-delay: calc(0.35s + var(--i, 0) * 0.12s); }
.movimento .recorte.entrou .recorte-porta { animation: anotacao-surge 0.4s var(--ease-saida) both; animation-delay: calc(0.3s + var(--i, 0) * 0.12s); }
@keyframes anotacao-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes anotacao-surge { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 900px) {
  .recorte { grid-template-columns: minmax(0, 1.35fr) 72px minmax(260px, 0.75fr); gap: 0; align-items: start; }
  .recorte--alta { grid-template-columns: minmax(0, 380px) 72px minmax(280px, 1fr); }
  .recorte-imagem { grid-column: 1; }
  .recorte-notas { grid-column: 3; position: relative; }
  .recorte.com-fios .recorte-notas { display: block; }
  .recorte.com-fios .recorte-nota { position: absolute; left: 0; right: 0; }
  .recorte--alta .recorte-imagem { width: 100%; justify-self: stretch; }
}
@media (max-width: 899px) {
  .anotacao { width: 22px; height: 22px; font-size: 0.6875rem; }
  .recorte-nota { margin-left: 0; padding-left: 0; }
}

/* ===================================================================== the spec sheet */
.ficha-tecnica { position: relative; max-width: 760px; background: var(--branco); border-radius: var(--p-raio); }
.ficha-tecnica-cabeca {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 10px 10px 10px 10px; border-bottom: 1px solid var(--linha);
}
.ficha-tecnica-logo { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: calc(var(--p-raio) - 10px); --logo-h: 24px; }
.ficha-tecnica-nome { padding: 6px 8px; font-weight: 600; letter-spacing: -0.01em; }
.ficha-tecnica-trilho { padding-right: 6px; color: var(--ardosia); }
.ficha-tecnica-linhas { margin: 0; }
.ficha-tecnica-linha {
  display: grid; grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr); gap: 4px 24px; align-items: baseline;
  padding: 12px 18px;
}
.ficha-tecnica-linha + .ficha-tecnica-linha { border-top: 1px solid var(--linha); }
.ficha-tecnica dt { font-size: 0.875rem; color: var(--ardosia); }
.ficha-tecnica dd { margin: 0; font-size: 0.9875rem; line-height: 1.45; color: var(--tinta); text-wrap: pretty; }
.ficha-tecnica dd.dado { font-family: var(--fonte-mono); font-size: 0.875rem; letter-spacing: 0; }
.ficha-tecnica .status--ficha { font-size: 0.9375rem; }
@media (max-width: 599px) {
  .ficha-tecnica-linha { grid-template-columns: 1fr; gap: 2px; padding: 12px 14px; }
}

/* ===================================================================== before and after */
.antes-depois { display: grid; grid-template-columns: minmax(0, 1fr) clamp(48px, 6vw, 88px) minmax(0, 1fr); align-items: stretch; }
.antes-depois-lado { position: relative; display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--p-raio-cartao); }
.antes-depois-lado.no { font-size: inherit; line-height: inherit; }
.antes-depois-lado--antes { color: var(--tinta); }
.antes-depois-lado--depois { box-shadow: 0 0 0 1px var(--p-linha, var(--linha-escura)); }
.antes-depois-lado--depois .painel-motivo { opacity: 0.5; }
.antes-depois-rotulo { font-size: 0.8125rem; font-weight: 600; color: var(--ardosia); }
.antes-depois-lado--depois .antes-depois-rotulo { color: var(--p-texto-2); }
.antes-depois-titulo { font-size: clamp(1.25rem, 1.02rem + 0.6vw, 1.625rem); line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; }
.antes-depois-texto { font-size: 1rem; line-height: 1.55; max-width: 46ch; text-wrap: pretty; }
.antes-depois-lado--antes .antes-depois-texto { color: var(--ardosia); }
.antes-depois-lado--depois .antes-depois-texto { color: var(--p-texto); }

.antes-depois-fio { position: relative; display: flex; align-items: center; }
.antes-depois-fio .fio-porta { flex: none; width: var(--porta-tam, 7px); height: var(--porta-tam, 7px); border-radius: 50%; background: var(--no-fundo, var(--claro)); box-shadow: inset 0 0 0 1px var(--porta-cor, var(--linha-forte)); transition: background-color 0.4s, box-shadow 0.4s; }
.antes-depois-fio .fio-linha { position: relative; flex: 1; height: 1px; background: var(--conexao-cor, var(--linha-forte)); clip-path: inset(-3px 0); transition: background-color 0.5s 0.1s; }
.antes-depois.ligado .fio-porta { background: var(--conexao-ativa, var(--ambar)); box-shadow: inset 0 0 0 1px var(--conexao-ativa, var(--ambar)); }
.antes-depois.ligado .fio-linha { background: var(--conexao-ativa, var(--ambar-fio)); }
.fio-pacote { position: absolute; left: 0; top: -0.5px; width: 100%; height: 2px; transform: translateX(-101%); }
.fio-pacote::after { content: ""; position: absolute; right: 0; top: 0; width: 16px; height: 2px; border-radius: 2px; background: var(--pacote-cor, var(--ambar)); }
.movimento .antes-depois.ligado .fio-pacote { animation: pacote-x 1.2s var(--ease-meio) 0.15s both; }
@keyframes pacote-x { 0% { transform: translateX(-101%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@media (max-width: 719px) {
  .antes-depois { grid-template-columns: 1fr; grid-template-rows: auto 56px auto; }
  .antes-depois-fio { flex-direction: column; justify-self: start; margin-left: clamp(20px, 6vw, 32px); }
  .antes-depois-fio .fio-linha { width: 1px; height: auto; clip-path: inset(0 -3px); }
  .fio-pacote { left: -0.5px; top: 0; width: 2px; height: 100%; transform: translateY(-101%); }
  .fio-pacote::after { right: 0; top: auto; bottom: 0; width: 2px; height: 16px; }
  .movimento .antes-depois.ligado .fio-pacote { animation-name: pacote-y; }
}
@keyframes pacote-y { 0% { transform: translateY(-101%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .anotacao, .recorte-fio, .recorte-porta, .fio-pacote { animation: none !important; transition: none; }
  .fio-pacote { display: none; }
}