/* ============================================================================
   dash-shark — CENA
   A camada que faz um card virar JANELA em vez de caixa.
   ----------------------------------------------------------------------------
   DEPENDE de dash-shark.tokens.css. Carregue depois de core.

   POR QUE ISTO EXISTE
   O dono descreveu assim: "parece que tem um universo dentro dos cards, parece
   que ali e' uma janela de algo muito maior". Traduzindo pra mecanica, o que
   as referencias fazem e' o OPOSTO de um card comum:

     card comum   conteudo com padding DENTRO de uma caixa. A caixa contem.
     janela       conteudo MAIOR que o quadro, e o quadro CORTA ele. O quadro
                  recorta uma cena que continua fora.

   Tres coisas somadas produzem o efeito, e as tres precisam estar presentes —
   isolada, nenhuma funciona:

     1. RECORTE   o conteudo sangra pra fora e a moldura corta (.ds-bleed).
     2. CAMADAS   fundo, grade e dado em profundidades diferentes, que se
                  movem em velocidades diferentes (paralaxe).
     3. LUZ DE DENTRO  o brilho nasce de um ponto DENTRO da cena (o horizonte),
                  nao e' um veu uniforme por cima. E' isso que faz o olho ler
                  "lugar" em vez de "efeito".

   E DOIS ARQUETIPOS, que sao opostos e nao devem ser misturados num meio-termo:

     .ds-card--janela   SIMPLICIDADE EXPANDIDA. Um elemento so, enorme, com
                        muito vazio em volta e sangrando pelas bordas.
     .ds-card--denso    COMPLEXIDADE CONTIDA. Muitos dados num lugar so, presos
                        por uma grade de fios de 1px. A elegancia vem do
                        alinhamento implacavel, nao de espacamento generoso.

   ----------------------------------------------------------------------------
   ESTRUTURA

     <article class="ds-card ds-card--janela">
       <div class="ds-scene ds-scene--deep">
         <div class="ds-scene-sky"></div>      luz no horizonte
         <div class="ds-scene-grid"></div>     chao em perspectiva
         <div class="ds-scene-haze"></div>     bruma que funde no horizonte
         <div class="ds-scene-fore">           o dado, na frente de tudo
           ...
         </div>
       </div>
     </article>

   As tres primeiras camadas sao decorativas e devem ter aria-hidden ou serem
   <div> vazias — nao poem conteudo nelas.
   ========================================================================= */


/* ==========================================================================
   1. SCENE — a janela
   ========================================================================== */

.ds-scene {
  /* encanamento: a cor da cena e a altura do horizonte, em % da altura */
  --_ds-accent: var(--ds-blue);
  --_ds-glow: var(--ds-glow-blue);
  --_ds-horizonte: 46%;
  --_ds-parallax: 0px;    /* o hover mexe nisto; cada camada usa um multiplo */

  position: relative;
  overflow: hidden;       /* E' O RECORTE. Sem isto nao ha janela, ha caixa. */
  isolation: isolate;     /* segura os blend modes das camadas aqui dentro */
  min-height: 180px;
  border-radius: inherit; /* acompanha o raio do card que a hospeda */
}

.ds-scene--profit { --_ds-accent: var(--ds-green); --_ds-glow: var(--ds-glow-green); }
.ds-scene--loss   { --_ds-accent: var(--ds-red);   --_ds-glow: var(--ds-glow-red); }
.ds-scene--energia { --_ds-accent: var(--ds-atencao); --_ds-glow: var(--ds-glow-atencao); }

/* horizonte mais baixo = ceu maior = sensacao de mais espaco */
.ds-scene--deep { --_ds-horizonte: 62%; min-height: 260px; }
.ds-scene--raso { --_ds-horizonte: 34%; min-height: 140px; }


/* ==========================================================================
   2. SKY — a luz que nasce DENTRO da cena
   Um veu uniforme por cima le como "filtro". Um brilho com centro definido,
   ancorado no horizonte, le como "sol atras da montanha" — e e' so' isso que
   separa um card com gradiente de um card que parece ter lugar dentro.
   ========================================================================== */

.ds-scene-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  translate: 0 calc(var(--_ds-parallax) * 0.15);   /* a camada mais lenta */
  transition: translate var(--ds-dur-3) var(--ds-ease);

  background:
    /* O brilho principal. Elipse LARGA e baixa, com queda longa: se a queda for
       curta o glow vira uma barra horizontal atravessada no card em vez de
       atmosfera. As paradas intermediarias existem so' pra alongar a queda. */
    radial-gradient(
      165% 58% at 50% var(--_ds-horizonte),
      color-mix(in srgb, var(--_ds-accent) 30%, transparent) 0%,
      color-mix(in srgb, var(--_ds-accent) 16%, transparent) 22%,
      color-mix(in srgb, var(--_ds-accent) 6%, transparent) 45%,
      color-mix(in srgb, var(--_ds-accent) 2%, transparent) 66%,
      transparent 85%
    ),
    /* Vinheta. Fecha SO' nas quinas e nunca chega no preto puro — com stop em
       var(--ds-black) ela desenha um retangulo arredondado visivel dentro do
       card, e ai o olho le "caixa dentro de caixa", que e' o oposto de janela. */
    radial-gradient(
      118% 108% at 50% 42%,
      transparent 58%,
      color-mix(in srgb, var(--ds-black) 45%, transparent) 88%,
      color-mix(in srgb, var(--ds-black) 72%, transparent) 100%
    );
}

/* uma segunda fonte de luz, fora de eixo, pra cena nao ficar simetrica demais */
.ds-scene-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    46% 40% at 78% calc(var(--_ds-horizonte) - 12%),
    color-mix(in srgb, var(--_ds-accent) 14%, transparent),
    transparent 70%
  );
}


/* ==========================================================================
   3. GRID — o chao em perspectiva
   O aparelho central. Uma grade plana rotacionada em X com perspective() ganha
   ponto de fuga de verdade: as linhas convergem, o espacamento comprime na
   distancia. E' o que da ESCALA — o olho entende que aquilo continua alem da
   moldura.
   ========================================================================== */

.ds-scene-grid {
  --_ds-celula: 34px;

  position: absolute;
  /* Comeca no horizonte e vaza MUITO pros lados: depois da rotacao, as bordas
     laterais fogem do quadro, e e' justamente esse vazamento que faz parecer
     grande. Se couber certinho, vira estampa. */
  inset: var(--_ds-horizonte) -60% -25% -60%;
  pointer-events: none;
  translate: 0 var(--_ds-parallax);
  transition: translate var(--ds-dur-3) var(--ds-ease);

  background-image:
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--_ds-accent) 34%, transparent) 0 1px,
      transparent 1px var(--_ds-celula)),
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--_ds-accent) 26%, transparent) 0 1px,
      transparent 1px var(--_ds-celula));

  /* perspective CURTA = ponto de fuga perto = convergencia dramatica. Em 300px
     as linhas saem quase paralelas e o chao le como "plano inclinado", nao como
     chao indo embora. 165px e' onde a fuga fica obvia sem distorcer. */
  transform: perspective(165px) rotateX(68deg);
  transform-origin: 50% 0;

  /* O mask e' o que vende a distancia, e ele faz DUAS coisas: some no horizonte
     e nas laterais, E escurece com a distancia (a grade nasce apagada la' longe
     e vai ganhando forca conforme chega perto). Sem esse degrade de forca a
     grade fica uniforme e denuncia que e' textura, nao espaco. */
  -webkit-mask-image:
    linear-gradient(to bottom,
      transparent 0%,
      color-mix(in srgb, var(--ds-black) 18%, transparent) 12%,
      color-mix(in srgb, var(--ds-black) 55%, transparent) 34%,
      var(--ds-black) 62%,
      var(--ds-black) 82%,
      transparent 100%),
    linear-gradient(to right, transparent 0%, var(--ds-black) 20%, var(--ds-black) 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom,
      transparent 0%,
      color-mix(in srgb, var(--ds-black) 18%, transparent) 12%,
      color-mix(in srgb, var(--ds-black) 55%, transparent) 34%,
      var(--ds-black) 62%,
      var(--ds-black) 82%,
      transparent 100%),
    linear-gradient(to right, transparent 0%, var(--ds-black) 20%, var(--ds-black) 80%, transparent 100%);
  mask-composite: intersect;
}

/* grade de pontos em vez de linhas: mesma perspectiva, textura de dither */
.ds-scene-grid--dots {
  background-image: radial-gradient(
    color-mix(in srgb, var(--_ds-accent) 46%, transparent) 1px,
    transparent 1.4px);
  background-size: var(--_ds-celula) var(--_ds-celula);
}

.ds-scene-grid--fina  { --_ds-celula: 20px; }
.ds-scene-grid--larga { --_ds-celula: 52px; }


/* ==========================================================================
   4. HAZE — a bruma
   Funde o encontro do chao com o ceu. Sem ela existe uma costura visivel na
   linha do horizonte, e a costura denuncia que sao duas camadas.
   ========================================================================== */

.ds-scene-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent calc(var(--_ds-horizonte) - 20%),
    color-mix(in srgb, var(--ds-black) 30%, transparent) calc(var(--_ds-horizonte) - 8%),
    color-mix(in srgb, var(--ds-black) 55%, transparent) var(--_ds-horizonte),
    color-mix(in srgb, var(--ds-black) 26%, transparent) calc(var(--_ds-horizonte) + 12%),
    transparent calc(var(--_ds-horizonte) + 26%)
  );
}


/* ==========================================================================
   5. FORE — o dado, na frente
   Fica acima das camadas decorativas e e' o unico lugar com conteudo real.
   ========================================================================== */

.ds-scene-fore {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  height: 100%;
  padding: var(--ds-space-6);
  translate: 0 calc(var(--_ds-parallax) * -0.35);   /* anda contra o fundo */
  transition: translate var(--ds-dur-3) var(--ds-ease);
}

/* paralaxe no hover: as tres camadas andam distancias diferentes, e a
   diferenca E' a profundidade. Valor pequeno de proposito — passar de ~10px
   vira enjoo, nao vira espaco. */
.ds-scene:hover { --_ds-parallax: 7px; }


/* ==========================================================================
   5b. PARALAXE POR SCROLL
   O hover so' funciona com mouse e so' quando alguem resolve apontar. A
   profundidade fica muito mais convincente quando as camadas se mexem
   SOZINHAS enquanto a pagina rola — e' ai' que o olho confirma que sao planos
   a distancias diferentes, e nao um desenho parado.

   Feito com animation-timeline: view(), que roda no compositor e nao custa
   um listener de scroll em JS. Fica dentro de @supports: navegador que nao
   tem a feature simplesmente mantem a cena parada, que continua correta.

   As distancias sao PROPORCIONAIS de proposito: ceu anda pouco (esta' longe),
   grade anda o dobro, e o dado anda CONTRA os dois. E' a razao entre elas que
   cria a profundidade, nao o valor absoluto.

   EFEITO COLATERAL, e e' o desejado: animacao ganha de declaracao normal, entao
   onde o scroll-timeline roda ele ASSUME o `translate` e o paralaxe de hover
   (--_ds-parallax) para de aparecer. Trocar hover por movimento continuo e'
   melhora, nao perda — mas quem for mexer precisa saber que os dois disputam a
   mesma propriedade, senao vai ficar procurando por que o hover "parou".
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ds-scene-sky,
    .ds-scene-grid,
    .ds-scene-fore {
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }

    .ds-scene-sky  { animation-name: ds-cena-ceu; }
    .ds-scene-grid { animation-name: ds-cena-chao; }
    .ds-scene-fore { animation-name: ds-cena-frente; }
  }
}

/* o ceu quase nao anda: e' o plano mais distante */
@keyframes ds-cena-ceu {
  from { translate: 0 -5px; }
  to   { translate: 0 5px; }
}

/* o chao anda o triplo do ceu */
@keyframes ds-cena-chao {
  from { translate: 0 -16px; }
  to   { translate: 0 16px; }
}

/* o dado anda CONTRA — e' o que separa ele do fundo em vez de colar junto */
@keyframes ds-cena-frente {
  from { translate: 0 7px; }
  to   { translate: 0 -7px; }
}


/* ==========================================================================
   6. BLEED — o recorte
   Faz um filho ficar MAIOR que a janela pra moldura cortar ele. E' o gesto
   mais barato e mais eficaz do arquivo inteiro: uma linha de grafico que entra
   vinda de fora da borda esquerda comunica "isto continua" melhor que qualquer
   gradiente.
   ========================================================================== */

.ds-bleed {
  position: relative;
  /* estoura o padding do pai nos dois lados */
  margin-inline: calc(var(--ds-space-6) * -1);
  width: calc(100% + var(--ds-space-6) * 2);
  max-width: none;
}

/* sangra pra baixo tambem: o dado corre pra fora do quadro */
.ds-bleed--b { margin-bottom: calc(var(--ds-space-6) * -1); }
.ds-bleed--t { margin-top: calc(var(--ds-space-6) * -1); }

/* sangra ALEM da moldura: 130% da largura, deslocado. Use com moderacao —
   um por card, no elemento que voce quer que pareca infinito. */
.ds-bleed--wide {
  width: 132%;
  margin-inline: -16%;
}


/* ==========================================================================
   7. CARD--JANELA — simplicidade expandida
   Um elemento so, enorme, cercado de vazio. O padding sai porque a cena vai
   ate' a borda; quem respira e' o conteudo dentro de .ds-scene-fore.
   ========================================================================== */

.ds-card--janela {
  padding: 0;
  overflow: hidden;
  border-color: var(--ds-line-strong);
}

/* o numero-heroi dentro de uma janela pode ser maior do que em card comum:
   ele tem espaco atmosferico em volta pra sustentar o tamanho */
.ds-card--janela .ds-kpi-value,
.ds-card--janela .ds-chart-value--hero {
  font-size: clamp(46px, 6vw, 82px);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

/* empurra o conteudo pro pe da janela: o vazio fica em cima, onde esta o ceu */
.ds-scene-fore--pe { justify-content: flex-end; }
.ds-scene-fore--topo { justify-content: flex-start; }


/* ==========================================================================
   8. CARD--DENSO / FACETS — complexidade contida
   O oposto do arquetipo acima. Muitos dados, sem espaco desperdicado, presos
   por fios de 1px em vez de separados por gap. A regra que faz isso virar
   elegancia em vez de bagunca: TUDO alinha, e existe UM acento so.
   ========================================================================== */

.ds-card--denso { padding: 0; overflow: hidden; }

.ds-facets {
  display: grid;
  grid-template-columns: repeat(var(--_ds-cols, 2), minmax(0, 1fr));
  /* o gap E' a linha: 1px de fundo aparecendo entre as celulas */
  gap: 1px;
  background: var(--ds-line);
}

.ds-facets--3 { --_ds-cols: 3; }
.ds-facets--4 { --_ds-cols: 4; }

.ds-facet {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  min-width: 0;
  padding: var(--ds-space-4) var(--ds-space-5);
  background: var(--ds-surface);
  transition: background-color var(--ds-dur-2) var(--ds-ease);
}

.ds-facet:hover { background: var(--ds-surface-raised); }

/* celula que ocupa a fileira inteira (pra um grafico sangrando, por exemplo) */
.ds-facet--full { grid-column: 1 / -1; }

.ds-facet-label {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-micro);
  letter-spacing: var(--ds-track-label);
  text-transform: uppercase;
  color: var(--ds-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-facet-value {
  font-family: var(--ds-display);
  font-size: var(--ds-fs-xl);
  font-weight: 600;
  line-height: var(--ds-lh-tight);
  letter-spacing: var(--ds-track-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-1);
}

.ds-facet-value.is-up   { color: var(--ds-green); }
.ds-facet-value.is-down { color: var(--ds-red); }

/* rodape da celula: dado secundario, menor, sem competir com o valor */
.ds-facet-foot {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-xs);
  color: var(--ds-text-4);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   9. CUSTO
   A grade em perspectiva e o paralaxe sao baratos (transform e translate, sem
   layout), mas em tela pequena o efeito nao se le e o custo continua. Abaixo
   de 767px a cena vira gradiente chapado — mesmo clima, sem a geometria.
   ========================================================================== */

@media (max-width: 767px) {
  .ds-scene-grid { display: none; }
  .ds-scene:hover { --_ds-parallax: 0px; }
  .ds-scene { min-height: 150px; }
  .ds-scene--deep { min-height: 200px; }
  .ds-card--janela .ds-kpi-value,
  .ds-card--janela .ds-chart-value--hero { font-size: clamp(38px, 12vw, 56px); }
  .ds-facets { --_ds-cols: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-scene:hover { --_ds-parallax: 0px; }
}