/* =========================================================================
   JARDIM ENCANTADO PRESERVADOS — editorial.css  (dono: A8)
   Seção 05 · Experiência Editorial / Ambientes  (#ambientes)

   Prefixo obrigatório: .edit-  ·  Mobile-first (≥769px em media queries)
   Regra de ouro: SOMENTE transform/opacity são animados.
   Blocos: 1 layout · 2 cabeçalho/fios · 3 tipografia cinética ·
           4 chips de materiais · 5 quadro SVG · 6 hotspots · 7 tooltips ·
           8 desktop · 9 reduced-motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LAYOUT DA SEÇÃO
   ------------------------------------------------------------------------- */
.secao--editorial {
  /* espelha o padding horizontal real do .secao (que vira 1.25rem no mobile)
     para o sangramento (full-bleed) da faixa cinética */
  --edit-pad: 1.25rem;
  min-height: 100dvh;
  overflow: visible;
}

.edit-wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 5.5vh, 4.25rem);
}

/* Utilitário local: conteúdo só para leitores de tela */
.edit-sro {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   2. CABEÇALHO TÉCNICO + FIOS (linhas finas animadas por scaleX)
   ------------------------------------------------------------------------- */
.edit-cabecalho {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.edit-cabecalho__ref { opacity: .55; }

/* Fio: 1px que cresce da esquerda (transform only; classe via editorial.js) */
.edit-fio {
  display: block;
  flex: 1;
  height: 1px;
  background: var(--je-glass-border);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--je-ease);
  will-change: transform;
}
.edit-fio.is-visivel { transform: scaleX(1); }

/* Rótulos técnicos flutuantes (decorativos) */
.edit-flutuante {
  position: absolute;
  font-size: .58rem;
  letter-spacing: .3em;
  opacity: .65;
  pointer-events: none;
  user-select: none;
}

/* -------------------------------------------------------------------------
   3. TIPOGRAFIA CINÉTICA
   Faixa full-bleed com overflow oculto: as linhas deslizam alguns % para
   dentro da calha lateral sem jamais gerar scroll horizontal.
   ------------------------------------------------------------------------- */
.edit-cinetica {
  position: relative;
  overflow: hidden;
  margin-inline: calc(-1 * var(--edit-pad));
  padding: 1.6rem var(--edit-pad) 1rem;
  display: flex;
  flex-direction: column;
  gap: clamp(.35rem, 1.2vh, .85rem);
}
.edit-flutuante--cinetica { top: .15rem; right: var(--edit-pad); }

.edit-linha {
  font-family: var(--je-font-display);
  font-weight: 340;
  font-optical-sizing: auto;
  font-size: clamp(2.15rem, 5.2vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--je-white);
  max-width: none;           /* anula o limite de 68ch do reset em <p> */
  will-change: transform;
}
/* Linhas pares alinham à direita — reforça o vai-e-vem editorial */
.edit-linha--dir {
  align-self: flex-end;
  text-align: right;
}

/* Palavra-chave de acento: verde sólido, camada única.
   (A técnica anterior — camada ::before sobreposta que "acendia" por
   opacity — criava um contorno duplicado feio quando as duas camadas
   ficavam parcialmente visíveis ao mesmo tempo. Pedido do cliente:
   uma cor só, sempre verde.) */
.edit-acende {
  font-style: italic;
  font-weight: 320;
  color: var(--je-accent);
  text-shadow: 0 0 28px var(--je-glow);
}

/* -------------------------------------------------------------------------
   4. MATÉRIA-PRIMA — chips de vidro pequenos
   (backdrop-filter só no desktop: vidro é caro no mobile)
   ------------------------------------------------------------------------- */
.edit-materiais__cabeca {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.edit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.edit-chip {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .62em 1.05em;
  border: 1px solid var(--je-glass-border);
  border-radius: 999px;
  background: rgba(16, 56, 38, .34);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--je-white);
  box-shadow: inset 0 1px 0 rgba(244, 247, 244, .05);
}
.edit-chip__num {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--je-accent);
}

/* -------------------------------------------------------------------------
   5. QUADRO DO AMBIENTE (SVG ilustrado + grade fina)
   ------------------------------------------------------------------------- */
.edit-ambiente {
  position: relative;
  padding: clamp(1.1rem, 3vw, 2.6rem);
  overflow: visible;          /* tooltips podem sangrar para fora do vidro */
}
.edit-flutuante--quadro { top: .8rem; right: 1.1rem; display: none; }
.edit-flutuante--dados  { bottom: .7rem; left: 1.1rem; }

.edit-ambiente__quadro {
  position: relative;
  /* grade técnica discreta atrás do desenho (estática — custo zero) */
  background-image:
    repeating-linear-gradient(90deg, rgba(244, 247, 244, .04) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(244, 247, 244, .04) 0 1px, transparent 1px 96px);
}

.edit-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Traço fino padrão do desenho (verde-escuro translúcido da marca) */
.edit-svg path,
.edit-svg rect,
.edit-svg circle {
  fill: none;
  stroke: var(--je-glass-border);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.edit-svg__estrutura { opacity: .38; }
.edit-svg__verde     { stroke: var(--je-green-400); }

/* Zonas interativas: repousam a meia-luz; acendem quando destacadas */
.edit-svg__zona {
  opacity: .55;
  transition: opacity .45s var(--je-ease);
}
.edit-svg__zona.is-destacada { opacity: 1; }
.edit-svg__zona.is-destacada .edit-svg__verde { stroke: var(--je-accent); }
/* Com um hotspot aberto, as demais zonas recuam (foco vitrine) */
.edit-ambiente--focado .edit-svg__zona:not(.is-destacada) { opacity: .18; }

/* -------------------------------------------------------------------------
   6. HOTSPOTS — ponto pulsante com hitbox ≥44px
   ------------------------------------------------------------------------- */
.edit-spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.edit-spot.is-aberto { z-index: 6; }

.edit-hotspot {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;                /* mobile-first: alvo generoso no toque */
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.edit-hotspot:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 2px;
}

.edit-hotspot__ponto {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--je-accent);
  box-shadow: 0 0 16px 2px var(--je-glow);
  transition: transform .25s var(--je-ease);
}
/* Anel de pulso (transform + opacity apenas) */
.edit-hotspot__ponto::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(98, 217, 155, .55);
  animation: edit-pulso 2.6s var(--je-ease-inout) infinite;
}
/* Dessincroniza os pulsos entre hotspots vizinhos */
.edit-spot:nth-of-type(2n) .edit-hotspot__ponto::before { animation-delay: -.9s; }
.edit-spot:nth-of-type(3n) .edit-hotspot__ponto::before { animation-delay: -1.7s; }

@keyframes edit-pulso {
  0%   { transform: scale(.55); opacity: .9; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Estado ativo: ponto cresce, pulso pausa (o destaque assume) */
.edit-spot.is-aberto .edit-hotspot__ponto,
.edit-spot:focus-within .edit-hotspot__ponto {
  transform: scale(1.4);
}
.edit-spot.is-aberto .edit-hotspot__ponto::before,
.edit-spot:focus-within .edit-hotspot__ponto::before {
  animation-play-state: paused;
  opacity: 0;
}
.edit-hotspot:active .edit-hotspot__ponto { transform: scale(1.15); }

/* -------------------------------------------------------------------------
   7. GLASS-TOOLTIPS
   Aparecem acima do ponto. visibility tira o link do tab-order quando
   fechado; a transição usa apenas opacity + transform.
   ------------------------------------------------------------------------- */
.edit-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: -10px;
  width: max-content;
  max-width: min(15rem, 74vw);
  padding: .85rem 1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  border-radius: var(--je-radius-sm);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity .3s var(--je-ease),
    transform .3s var(--je-ease),
    visibility 0s linear .3s;
  pointer-events: none;
}
/* Seta do balão */
.edit-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 22px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: rgba(13, 44, 30, .9);
  border-right: 1px solid var(--je-glass-border);
  border-bottom: 1px solid var(--je-glass-border);
}

/* Variantes de ancoragem (evitam sangrar para fora da tela) */
.edit-spot--centro .edit-tooltip { left: 50%; transform: translate(-50%, 6px); }
.edit-spot--centro .edit-tooltip::after { left: 50%; margin-left: -5px; }
.edit-spot--dir .edit-tooltip { left: auto; right: -10px; }
.edit-spot--dir .edit-tooltip::after { left: auto; right: 22px; }

/* Aberto: via classe (JS) ou foco de teclado (fallback sem JS) */
.edit-spot.is-aberto .edit-tooltip,
.edit-spot:focus-within .edit-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}
.edit-spot--centro.is-aberto .edit-tooltip,
.edit-spot--centro:focus-within .edit-tooltip {
  transform: translate(-50%, 0);
}
/* Hover só em dispositivos com hover real (touch usa tap-toggle via JS) */
@media (hover: hover) and (pointer: fine) {
  .edit-spot:hover .edit-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    pointer-events: auto;
  }
  .edit-spot--centro:hover .edit-tooltip { transform: translate(-50%, 0); }
  .edit-spot:hover .edit-hotspot__ponto { transform: scale(1.4); }
  .edit-spot:hover .edit-hotspot__ponto::before { animation-play-state: paused; opacity: 0; }
}

.edit-tooltip__rotulo {
  font-family: var(--je-font-ui);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--je-accent);
}
.edit-tooltip__nome {
  font-family: var(--je-font-display);
  font-weight: 420;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--je-white);
}
.edit-tooltip__desc {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--je-white-60);
}
.edit-tooltip__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-top: .3rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--je-accent);
  cursor: pointer;
}
.edit-tooltip__link svg {
  width: 12px;
  height: 12px;
  transition: transform .25s var(--je-ease);
}
.edit-tooltip__link:hover svg { transform: translateX(3px); }
.edit-tooltip__link:focus-visible {
  outline: 2px solid var(--je-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   8. DESKTOP (≥769px)
   ------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .secao--editorial { --edit-pad: var(--je-pad-secao); }

  /* Linhas em faixa única: o deslize horizontal fica mais cinematográfico */
  .edit-linha { white-space: nowrap; }

  .edit-flutuante { font-size: .62rem; }
  .edit-flutuante--quadro { display: block; }

  /* Vidro de verdade nos chips só onde o custo compensa */
  .edit-chip {
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
    backdrop-filter: blur(8px) saturate(1.15);
  }

  /* Ponteiro fino: hitbox pode ser um pouco menor (ainda ≥44px) */
  .edit-hotspot { width: 46px; height: 46px; }
}

/* -------------------------------------------------------------------------
   8b. MOBILE (≤768px) — os hotspots do TOPO abrem o balão PARA BAIXO,
   para não cobrir os chips de matéria-prima acima do quadro. Um respiro
   extra acima do quadro reforça a separação.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* mais espaço entre os chips e o quadro do ambiente */
  .edit-ambiente { margin-top: clamp(1.5rem, 6vw, 2.75rem); }

  /* fechado: balão desce (abre abaixo do ponto) */
  .edit-spot--baixa-mobile .edit-tooltip {
    top: calc(100% + 12px);
    bottom: auto;
    transform: translateY(-6px);
  }
  .edit-spot--baixa-mobile.edit-spot--centro .edit-tooltip {
    transform: translate(-50%, -6px);
  }

  /* aberto (classe do JS ou foco por teclado) */
  .edit-spot--baixa-mobile.is-aberto .edit-tooltip,
  .edit-spot--baixa-mobile:focus-within .edit-tooltip {
    transform: translateY(0);
  }
  .edit-spot--baixa-mobile.edit-spot--centro.is-aberto .edit-tooltip,
  .edit-spot--baixa-mobile.edit-spot--centro:focus-within .edit-tooltip {
    transform: translate(-50%, 0);
  }

  /* seta agora aponta para CIMA (o balão está abaixo do ponto) */
  .edit-spot--baixa-mobile .edit-tooltip::after {
    top: -5px;
    bottom: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid var(--je-glass-border);
    border-top: 1px solid var(--je-glass-border);
  }
}

/* -------------------------------------------------------------------------
   9. MOVIMENTO REDUZIDO — tipografia estática, pulso desligado
   (base.css já zera durações; aqui garantimos os estados finais)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .edit-hotspot__ponto::before { animation: none; opacity: .45; }
  .edit-fio { transform: scaleX(1); transition: none; }
  .edit-acende::before { opacity: 1; transition: none; }
  .edit-linha { will-change: auto; }
  .edit-tooltip { transition: none; }
}