/* ==========================================================================
   central.tech7 — hub dos aplicativos da Tech7
   Camada de marca Tecs7ven sobre o design system Nuvem Azul.
   Layout: campo escuro calmo com duas nuvens de brilho da marca derivando
   devagar, cabeçalho com a marca de três colunas e uma grade de tiles que
   entra em cascata; o ícone de cada app ganha vida no hover.
   Escuro é a assinatura (segue o sistema); claro é a alternativa; o botão força.
   ========================================================================== */

:root {
  /* ---- cor (valores escuros: a assinatura da marca) ---- */
  --marca: #36a1ea;              /* azul da marca: anéis, ícones, destaques */
  --marca-forte: #2f9ce4;        /* ação com texto branco */
  --marca-texto: #5ab5f2;        /* texto/link azul legível no escuro */
  --bg: #141518;                 /* fundo da página */
  --superficie: #202124;         /* tile */
  --superficie-2: #292a2e;       /* caixa do ícone, chip */
  --borda: #333539;
  --borda-forte: #404247;
  --fg: #e8eaed;
  --fg-2: #c4c7cc;
  --muted: #9a9ea7;
  --nuvem-a: color-mix(in srgb, var(--marca) 26%, transparent);
  --nuvem-b: color-mix(in srgb, var(--marca-forte) 18%, transparent);
  --sombra: 0 1px 0 0 rgba(255,255,255,.015), 0 18px 40px -22px rgba(0,0,0,.7);
  --sombra-alta: 0 24px 50px -18px rgba(0,0,0,.78);
  --textura-opac: .05;
  color-scheme: dark;

  /* ---- tipografia ---- */
  --fonte: "Gantari", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --fonte-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

  /* ---- raios, movimento ---- */
  --r-tile: 18px;
  --r-ic: 13px;
  --r-pill: 999px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --salto: cubic-bezier(.34, 1.3, .64, 1);

  /* o esqueleto do artifact já aplica isto; repetido para a versão hospedada */
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --marca: #1a78c4;
    --marca-forte: #156aae;
    --marca-texto: #0075bb;
    --bg: #eef4f8;
    --superficie: #ffffff;
    --superficie-2: #f2f6f7;
    --borda: #e3e9ed;
    --borda-forte: #d4d8db;
    --fg: #123a4f;
    --fg-2: #34464c;
    --muted: #677070;
    --nuvem-a: color-mix(in srgb, #36a1ea 24%, transparent);
    --nuvem-b: color-mix(in srgb, #1a78c4 14%, transparent);
    --sombra: 0 6px 18px -10px rgba(20, 45, 70, .22), 0 0 0 1px rgba(20,45,70,.03);
    --sombra-alta: 0 22px 44px -16px rgba(20, 45, 70, .3);
    --textura-opac: .06;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --marca: #1a78c4;
  --marca-forte: #156aae;
  --marca-texto: #0075bb;
  --bg: #eef4f8;
  --superficie: #ffffff;
  --superficie-2: #f2f6f7;
  --borda: #e3e9ed;
  --borda-forte: #d4d8db;
  --fg: #123a4f;
  --fg-2: #34464c;
  --muted: #677070;
  --nuvem-a: color-mix(in srgb, #36a1ea 24%, transparent);
  --nuvem-b: color-mix(in srgb, #1a78c4 14%, transparent);
  --sombra: 0 6px 18px -10px rgba(20, 45, 70, .22), 0 0 0 1px rgba(20,45,70,.03);
  --sombra-alta: 0 22px 44px -16px rgba(20, 45, 70, .3);
  --textura-opac: .06;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: clamp(30px, 7vh, 72px);
}

/* ---- atmosfera: nuvens da marca + textura fina ---- */
.nuvens, .textura {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.nuvem {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
}
.nuvem--a {
  top: -24vh; left: -6vw;
  width: 70vw; height: 64vh;
  background: radial-gradient(closest-side, var(--nuvem-a), transparent 72%);
  animation: deriva-a 23s var(--ease) infinite alternate;
}
.nuvem--b {
  top: -14vh; right: -8vw;
  width: 58vw; height: 56vh;
  background: radial-gradient(closest-side, var(--nuvem-b), transparent 72%);
  animation: deriva-b 29s var(--ease) -9s infinite alternate-reverse;
}
/* grão sutil para dar textura ao fundo (feTurbulence, sem imagem externa) */
.textura {
  opacity: var(--textura-opac);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes deriva-a { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.12); } }
@keyframes deriva-b { from { transform: translate3d(4%, -2%, 0) scale(1.05); } to { transform: translate3d(-5%, 5%, 0) scale(1); } }

/* ---- largura de leitura ---- */
.envolto {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}

/* ---- cabeçalho ---- */
.topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: clamp(26px, 5vh, 44px);
}
.marca { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.marca__linha { display: flex; align-items: center; gap: 13px; }
.marca__simbolo { width: 34px; height: 34px; flex: none; overflow: visible; }
.marca__simbolo rect { fill: var(--marca); transform-box: fill-box; transform-origin: 50% 0; }
.marca__nome {
  margin: 0;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--fg);
}
.marca__nome span { color: var(--marca-texto); }
.marca__tag {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
  max-width: 48ch;
  text-wrap: balance;
}

/* ---- botão de tema ---- */
.tema {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
  background: var(--superficie);
  color: var(--fg-2);
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), background-color .18s var(--ease);
}
.tema:hover { color: var(--marca-texto); border-color: var(--borda-forte); }
.tema:active { transform: scale(.94); }
.tema svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema .ic-sol { display: none; }
.tema .ic-lua { display: block; }
:root[data-theme="light"] .tema .ic-sol { display: block; }
:root[data-theme="light"] .tema .ic-lua { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .tema .ic-sol { display: block; }
  :root:not([data-theme="dark"]) .tema .ic-lua { display: none; }
}

/* ---- grade de apps ---- */
.grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr));
  gap: 14px;
}

/* ---- tile ---- */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 170px;
  padding: 18px;
  border: 1px solid var(--borda);
  border-radius: var(--r-tile);
  background: var(--superficie);
  box-shadow: var(--sombra);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
/* brilho da marca que acende de um canto no hover */
.app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130% 120% at 85% -10%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.app[href]:hover, .app[href]:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--marca) 55%, var(--borda));
  box-shadow: var(--sombra-alta);
  outline: none;
}
.app[href]:hover::after, .app[href]:focus-visible::after { opacity: 1; }
.app[href]:focus-visible { box-shadow: var(--sombra-alta), 0 0 0 3px color-mix(in srgb, var(--marca) 45%, transparent); }

.app__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.app__ic {
  width: 50px; height: 50px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-ic);
  background: color-mix(in srgb, var(--marca) 13%, var(--superficie-2));
  color: var(--marca);
  transition: background-color .22s var(--ease), transform .22s var(--salto);
}
.app[href]:hover .app__ic, .app[href]:focus-visible .app__ic {
  background: color-mix(in srgb, var(--marca) 22%, var(--superficie-2));
}
.app__ic svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.app__ic svg .cheio { fill: currentColor; stroke: none; }

.app__corpo { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.app__nome { font-size: 1.08rem; font-weight: 600; color: var(--fg); letter-spacing: -.01em; }
.app__desc { font-size: .84rem; color: var(--muted); }

.app__rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
  margin-top: 2px;
}
.app__url {
  font-family: var(--fonte-mono);
  font-size: .72rem;
  color: var(--fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.app__seta { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .22s var(--ease), transform .22s var(--ease); }
.app[href]:hover .app__seta, .app[href]:focus-visible .app__seta { stroke: var(--marca-texto); transform: translateX(3px); }

/* ---- tile "em breve" ---- */
.app--breve { cursor: default; }
.app--breve .app__ic { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, var(--superficie-2)); }
.app--breve .app__nome, .app--breve .app__desc { color: var(--muted); }
.selo {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--fg-2);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---- rodapé ---- */
.rodape {
  margin-top: clamp(28px, 5vh, 46px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .82rem;
  color: var(--muted);
}
.rodape b { color: var(--fg-2); font-weight: 600; }
.rodape .ponto { opacity: .5; }

/* ==========================================================================
   Entrada e microanimações. Tudo desligado em "reduzir movimento".
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .marca__simbolo rect { animation: coluna-desce 520ms var(--salto) backwards; }
  .marca__simbolo rect:nth-child(1) { animation-delay: 80ms; }
  .marca__simbolo rect:nth-child(2) { animation-delay: 170ms; }
  .marca__simbolo rect:nth-child(3) { animation-delay: 260ms; }
  @keyframes coluna-desce { from { transform: scaleY(0); opacity: 0; } }

  .app { animation: surge 520ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 55ms + 240ms); }
  @keyframes surge { from { opacity: 0; transform: translateY(12px); } }

  /* partes dos ícones giram/escalam a partir do próprio centro */
  .app__ic svg * { transform-box: fill-box; }

  /* Kanban — as colunas pulsam de baixo, uma depois da outra */
  .app[href]:hover [data-ic="kanban"] .pk, .app[href]:focus-visible [data-ic="kanban"] .pk { transform-origin: 50% 100%; animation: k-barra .7s var(--ease); }
  [data-ic="kanban"] .pk2 { animation-delay: .07s !important; }
  [data-ic="kanban"] .pk3 { animation-delay: .14s !important; }
  @keyframes k-barra { 30% { transform: scaleY(.5); } }

  /* ZapZap — os três pontos saltam em sequência */
  .app[href]:hover [data-ic="zapzap"] .zd, .app[href]:focus-visible [data-ic="zapzap"] .zd { animation: z-ponto .7s var(--ease); }
  [data-ic="zapzap"] .zd2 { animation-delay: .12s !important; }
  [data-ic="zapzap"] .zd3 { animation-delay: .24s !important; }
  @keyframes z-ponto { 40% { transform: translateY(-2.5px); } }

  /* Chips — o chip balança */
  .app[href]:hover [data-ic="chips"] svg, .app[href]:focus-visible [data-ic="chips"] svg { transform-origin: 50% 50%; animation: balanca .7s var(--ease); }
  @keyframes balanca { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }

  /* KL — o coração bate */
  .app[href]:hover [data-ic="kl"] .kl-cor, .app[href]:focus-visible [data-ic="kl"] .kl-cor { transform-origin: 50% 55%; animation: bati .8s var(--ease); }
  @keyframes bati { 20% { transform: scale(1.15); } 40% { transform: scale(1); } 60% { transform: scale(1.09); } }

  /* Carteira — a moeda entra */
  .app[href]:hover [data-ic="carteira"] .ca-moeda, .app[href]:focus-visible [data-ic="carteira"] .ca-moeda { animation: moeda .7s var(--ease); }
  @keyframes moeda { 0% { transform: translate(3px, -2px); } 60% { transform: translate(-1px, 0); } 100% { transform: none; } }

  /* Code — os colchetes se afastam */
  .app[href]:hover [data-ic="code"] .co1, .app[href]:focus-visible [data-ic="code"] .co1 { animation: co-esq .6s var(--ease); }
  .app[href]:hover [data-ic="code"] .co2, .app[href]:focus-visible [data-ic="code"] .co2 { animation: co-dir .6s var(--ease); }
  @keyframes co-esq { 50% { transform: translateX(-1.6px); } }
  @keyframes co-dir { 50% { transform: translateX(1.6px); } }

  /* VPS — as luzes piscam */
  .app[href]:hover [data-ic="vps"] .vl, .app[href]:focus-visible [data-ic="vps"] .vl { animation: v-luz .8s var(--ease); }
  [data-ic="vps"] .vl2 { animation-delay: .18s !important; }
  @keyframes v-luz { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

  /* Desktop — a tela dá um pulso */
  .app[href]:hover [data-ic="desktop"] .mo, .app[href]:focus-visible [data-ic="desktop"] .mo { transform-origin: 50% 45%; animation: tela .7s var(--ease); }
  @keyframes tela { 40% { transform: scale(1.06); } }

  /* Forja — o haltere levanta */
  .app[href]:hover [data-ic="forja"] svg, .app[href]:focus-visible [data-ic="forja"] svg { transform-origin: 50% 50%; animation: levanta .7s var(--ease); }
  @keyframes levanta { 50% { transform: rotate(-11deg) translateY(-1px); } }
}

@media (max-width: 420px) {
  .app { min-height: 150px; padding: 16px; }
  .grade { gap: 12px; }
}