/* ============================================================
   SeteVias — Desktop Responsive Guard v2.1
   Objetivo: preservar integralmente a arte central em qualquer
   proporção de monitor desktop, inclusive portrait e ultrawide.

   Arquitetura visual:
   1) sidebar: fixa e independente;
   2) backdrop: mesma arte em cover, ampliada/escurecida/desfocada;
   3) canvas: arte principal em contain, sem corte e sem deformação;
   4) overlays: permanecem percentuais dentro do canvas principal.

   Mobile continua separado e será tratado em fase própria.
   ============================================================ */

@media (min-width:1024px){
  html,body,.pex-app{width:100%;height:100%;min-width:0;min-height:0}

  .pex-app{
    grid-template-columns:clamp(230px,14.65vw,250px) minmax(0,1fr)!important;
    overflow:hidden!important;
  }

  .pex-workspace,.pex-scene-viewport{
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .pex-scene-viewport{
    position:relative!important;
    isolation:isolate;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#01070c!important;
  }

  /* Preenchimento ambiente das áreas que sobram em portrait/ultrawide.
     Não contém informação funcional: é apenas continuidade visual. */
  .pex-scene-backdrop{
    position:absolute;
    z-index:0;
    inset:-36px;
    pointer-events:none;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    filter:blur(24px) brightness(.30) saturate(.72);
    transform:scale(1.06);
    opacity:.92;
  }
  .pex-scene-backdrop::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,7,11,.50),rgba(0,7,11,.12) 28%,rgba(0,7,11,.12) 72%,rgba(0,7,11,.50));
  }

  /* Dimensões calculadas por fitScene() — lógica CONTAIN. */
  .pex-scene-canvas{
    position:relative!important;
    z-index:1;
    flex:0 0 auto!important;
    width:var(--canvas-w)!important;
    height:var(--canvas-h)!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    transform:translateZ(0);
    box-shadow:0 0 48px rgba(0,0,0,.28);
  }

  .pex-scene-bg{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background-size:100% 100%!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
  }
}

@media (min-width:1024px) and (orientation:portrait){
  .pex-app{grid-template-columns:clamp(210px,23vw,240px) minmax(0,1fr)!important}
  .pex-sidebar{padding-inline:12px!important}
  .pex-scene-backdrop{filter:blur(30px) brightness(.25) saturate(.68)}
}

@media (min-width:1024px) and (max-height:760px){
  .pex-sidebar{padding-top:10px!important;padding-bottom:10px!important}
  .pex-menu a{padding-top:5px!important;padding-bottom:5px!important}
  .pex-sidebar-footer{gap:4px!important;padding-top:6px!important}
}

@media (prefers-reduced-motion:reduce){
  .pex-scene-backdrop{transform:none}
}

/* ============================================================
   AMBIENT FILL v2.2 — preenchimento inteligente das sobras
   ------------------------------------------------------------
   Só aparece fora do canvas principal. Em monitores de proporção
   semelhante à arte, fica praticamente invisível. Em portrait e
   telas muito altas/largas, transforma as sobras em atmosfera 7V.
   ============================================================ */
@media (min-width:1024px){
  .pex-ambient-fill{
    position:absolute; inset:0; z-index:.5; overflow:hidden;
    pointer-events:none; color:#42ff93; font-family:monospace;
  }
  .pex-ambient-vignette{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 50% 50%, transparent 20%, rgba(0,7,11,.14) 58%, rgba(0,4,7,.72) 100%),
      repeating-linear-gradient(0deg,rgba(75,255,159,.018) 0 1px,transparent 1px 5px);
  }
  .pex-ambient-message{
    position:absolute; left:50%; transform:translateX(-50%);
    width:min(78%,760px); text-align:center; text-transform:uppercase;
    letter-spacing:.34em; font-size:clamp(9px,.68vw,13px); font-weight:700;
    color:rgba(89,255,166,.18); text-shadow:0 0 18px rgba(0,255,128,.12);
    white-space:nowrap;
  }
  .pex-ambient-message.is-top{top:7.5%}
  .pex-ambient-message.is-bottom{bottom:7.5%}
  .pex-ambient-code{
    position:absolute; opacity:.11; font-size:clamp(8px,.55vw,11px);
    line-height:1.75; letter-spacing:.08em; white-space:pre;
  }
  .pex-ambient-code.is-left{left:4%;top:18%}
  .pex-ambient-code.is-right{right:4%;bottom:18%;text-align:right}
  .pex-ambient-eyes{
    --ax:0px; --ay:0px;
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; gap:22px; opacity:.22; filter:drop-shadow(0 0 12px rgba(0,255,125,.4));
  }
  .pex-ambient-eye{
    position:relative; width:38px; height:17px; border:1px solid rgba(70,255,151,.48);
    border-radius:60% 45% 60% 45%; transform:rotate(5deg); background:rgba(0,15,11,.42);
  }
  .pex-ambient-eye:last-child{transform:rotate(-5deg)}
  .pex-ambient-eye::after{
    content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
    border-radius:50%; background:#43ff91; box-shadow:0 0 10px rgba(67,255,145,.9);
    transform:translate(calc(-50% + var(--ax)),calc(-50% + var(--ay)));
  }
  /* O canvas fica acima de toda decoração; nada interfere na arte aprovada. */
  .pex-scene-canvas{z-index:2!important}

  /* Se a sobra for pequena, reduzimos os easter eggs para não competir
     visualmente com o cenário. O JS adiciona .has-ambient-room quando
     existe espaço útil suficiente. */
  .pex-scene-viewport:not(.has-ambient-room) .pex-ambient-fill{opacity:0}
  .pex-scene-viewport.has-ambient-room .pex-ambient-fill{opacity:1;transition:opacity .45s ease}
}

@media (prefers-reduced-motion:reduce){
  .pex-ambient-fill{transition:none!important}
}

/* ============================================================
   AMBIENT ART v2.3 — arte dedicada para sobras de proporção
   ------------------------------------------------------------
   Em desktop portrait/telas muito altas, usa uma arte vertical
   SeteVias como atmosfera atrás do canvas. O cenário funcional
   continua em contain, inteiro, por cima. Em desktop normal a
   camada permanece desligada para preservar o layout aprovado.
   ============================================================ */
@media (min-width:1024px){
  .pex-ambient-art{
    position:absolute;
    inset:0;
    z-index:.25;
    pointer-events:none;
    opacity:0;
    background-image:
      linear-gradient(rgba(0,7,10,.36),rgba(0,7,10,.50)),
      url('../assets/scenario/SETEVIAS-AMBIENT-VERTICAL-v2.webp');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    filter:saturate(.82) brightness(.72);
    transform:scale(1.015);
    transition:opacity .35s ease;
  }
  .pex-scene-viewport.has-ambient-room .pex-ambient-art{opacity:.82}
  .pex-scene-viewport.has-ambient-room .pex-scene-backdrop{opacity:.18}
  .pex-scene-viewport.has-ambient-room .pex-ambient-fill{z-index:.6}
  .pex-scene-viewport.has-ambient-room .pex-ambient-message,
  .pex-scene-viewport.has-ambient-room .pex-ambient-code{opacity:.20}
  .pex-scene-viewport.has-ambient-room .pex-ambient-eyes{opacity:.28}
}
@media (min-width:1024px) and (orientation:portrait){
  .pex-ambient-art{
    background-size:cover;
    background-position:center center;
    opacity:0;
    filter:saturate(.9) brightness(.78);
  }
  .pex-scene-viewport.has-ambient-room .pex-ambient-art{opacity:.94}
  .pex-scene-viewport.has-ambient-room .pex-scene-backdrop{opacity:.08}
}
@media (prefers-reduced-motion:reduce){.pex-ambient-art{transition:none;transform:none}}

/* ============================================================
   AMBIENT SUBLIMINAL v2.4 — publicação
   ------------------------------------------------------------
   Fundo das sobras usa somente elementos subliminares SeteVias
   (olhos, mensagens, terminal/mapa), sem repetir mesa/cenário.
   O quadro funcional central recebe fusão suave nas bordas apenas
   quando houver sobra relevante de proporção.
   ============================================================ */
@media (min-width:1024px){
  .pex-ambient-art{
    background-image:
      linear-gradient(180deg,rgba(0,7,10,.28),rgba(0,7,10,.42)),
      url('../assets/scenario/SETEVIAS-AMBIENT-SUBLIMINAL-v2.4.webp')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    filter:saturate(.78) brightness(.78)!important;
  }
  /* Evita qualquer repetição fantasma da mesa pela antiga camada blur. */
  .pex-scene-viewport.has-ambient-room .pex-scene-backdrop{opacity:0!important}

  /* Suavização leve: funde somente alguns pixels da borda com o ambiente. */
  .pex-scene-viewport.has-ambient-room .pex-scene-canvas{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%),linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%),linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
    mask-composite:intersect;
    box-shadow:0 0 36px rgba(0,0,0,.20)!important;
  }
}

/* ============================================================
   DESKTOP LANDSCAPE EDGE FILL v2.5
   ------------------------------------------------------------
   Em monitores desktop normais, a arte principal continua 100%
   visível (contain), mas as pequenas sobras laterais deixam de
   parecer faixas vazias: a própria cena é usada como extensão
   atmosférica em cover. Portrait mantém o fundo subliminar v2.4.
   ============================================================ */
@media (min-width:1024px) and (orientation:landscape){
  .pex-scene-viewport.has-ambient-room .pex-scene-backdrop{
    opacity:.92!important;
    filter:blur(14px) brightness(.64) saturate(.92)!important;
    transform:scale(1.045)!important;
  }
  .pex-scene-viewport.has-ambient-room .pex-ambient-art,
  .pex-scene-viewport.has-ambient-room .pex-ambient-fill{
    opacity:0!important;
  }
  /* No landscape a fusão é lateral e discreta; não cria moldura. */
  .pex-scene-viewport.has-ambient-room .pex-scene-canvas{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7px,#000 calc(100% - 7px),transparent 100%)!important;
    -webkit-mask-composite:initial!important;
    mask-image:linear-gradient(to right,transparent 0,#000 7px,#000 calc(100% - 7px),transparent 100%)!important;
    mask-composite:initial!important;
    box-shadow:none!important;
  }
}


/* ============================================================
   DESKTOP EDGE-TO-EDGE v2.6
   Landscape: zero faixa entre sidebar/cenário e zero faixa direita.
   Portrait: preserva contain + ambient subliminar v2.4.
   ============================================================ */
@media (min-width:1024px) and (orientation:landscape){
  .pex-scene-viewport{
    align-items:stretch!important;
    justify-content:stretch!important;
  }
  .pex-scene-canvas{
    width:var(--canvas-w)!important;
    height:var(--canvas-h)!important;
    margin:0!important;
    max-width:none!important;
    max-height:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .pex-scene-bg{
    width:100%!important;
    height:100%!important;
    background-size:100% 100%!important;
    background-position:center center!important;
  }
  .pex-scene-backdrop,.pex-ambient-art,.pex-ambient-fill{display:none!important;}
}