/* ── Diagrama interativo do rompedor/compactador (compartilhado: home + landing) ── */

.diagram {
  padding-block: clamp(3rem, 7vw, 6rem);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .012) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--bg-deep), var(--brand-deep) 150%);
  border-block: 1px solid var(--line);
}

.diagram__head {
  text-align: center;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.diagram__head .section-sub {
  margin-inline: auto;
}

.diagram__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* Painel claro: a máquina é escura e o PNG é transparente, então o
   fundo branco funciona como mesa de fotografia. Textura de metal
   escovado no lugar do branco chapado. */
.diagram__photo-wrap {
  position: relative;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background-color: var(--bg-light);
  background-image:
    repeating-linear-gradient(135deg, rgba(10, 12, 15, .022) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .5) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, var(--bg-light-sheen) 0%, var(--bg-light-2) 100%);
  overflow: hidden;
}

/* A máquina é prata (luminância mediana ~171): sobre o painel claro o
   contraste cai de 8,5:1 para 2,1:1. A sombra de recorte separa a
   silhueta do fundo, como foto de produto — mas só tem efeito se o
   arquivo tiver canal alfa. As imagens em uso hoje (rompedor-anexo.webp
   e compactador-realista.jpeg) são opacas com fundo branco próprio,
   então a regra fica inerte até voltar um PNG transparente. */
.diagram__photo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(10, 12, 15, .28));
  transition: filter var(--tr);
}

.diagram__photo-wrap:hover .diagram__photo {
  filter: drop-shadow(0 14px 24px rgba(10, 12, 15, .36)) contrast(1.04);
}

/* Hotspots sobre o esquema */
.hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}

.hotspot__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--signal);
  color: var(--signal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 0 0 4px rgba(245, 183, 10, .12);
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr);
}

.hotspot__dot::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(245, 183, 10, .4);
  animation: hotspot-pulse 2.6s ease-out infinite;
}

.hotspot__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  padding: 4px 8px;
  border-radius: 2px;
  white-space: nowrap;
  transition: color var(--tr), border-color var(--tr);
}

.hotspot--left .hotspot__dot { order: 1; }
.hotspot--left .hotspot__label { order: 2; }
.hotspot--right .hotspot__label { order: 2; }
.hotspot--top { flex-direction: column; }
.hotspot--top .hotspot__label { order: 2; }

.hotspot:hover .hotspot__dot,
.hotspot:focus-visible .hotspot__dot,
.hotspot.is-active .hotspot__dot {
  background: var(--signal);
  color: var(--signal-ink);
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 0 0 6px rgba(245, 183, 10, .18);
}

.hotspot.is-active .hotspot__label,
.hotspot:hover .hotspot__label {
  color: var(--signal);
  border-color: rgba(245, 183, 10, .4);
}

.hotspot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

@keyframes hotspot-pulse {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Legenda numerada */
.diagram__legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.legend__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  text-align: left;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
}

.legend__num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 11px;
  flex-shrink: 0;
}

.legend__btn.is-active,
.legend__btn:hover {
  color: var(--signal);
  border-color: rgba(245, 183, 10, .4);
  background: rgba(245, 183, 10, .05);
}

.legend__btn.is-active .legend__num {
  border-color: var(--signal);
  color: var(--signal);
}

.legend__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Painel de detalhe da peça */
.diagram__panel {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  min-height: 480px;
  display: flex;
}

.diagram__item {
  display: none;
  flex-direction: column;
  width: 100%;
}

.diagram__item.is-active {
  display: flex;
  animation: diagram-in .35s ease both;
}

@keyframes diagram-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Piece animations on selection ── */
/* Different animations per piece type */
.diagram__item.is-active.animating[data-panel-part="sanfona"],
.diagram__item.is-active.animating[data-panel-part="protecao"] {
  /* Breathing/expand-collapse for sanfonas */
  animation: diagram-in .35s ease both, piece-breathe .8s ease-out .35s both;
}

.diagram__item.is-active.animating[data-panel-part="sapata"],
.diagram__item.is-active.animating[data-panel-part="raspador"] {
  /* Compression pulse for sapata/raspador */
  animation: diagram-in .35s ease both, piece-compress .6s ease-out .35s both;
}

.diagram__item.is-active.animating[data-panel-part="pino"],
.diagram__item.is-active.animating[data-panel-part="coxim"],
.diagram__item.is-active.animating[data-panel-part="coxim2"] {
  /* 3D rotation for pins/coxins */
  animation: diagram-in .35s ease both, piece-rotate3d .7s ease-out .35s both;
}

.diagram__item.is-active.animating[data-panel-part="aneis"],
.diagram__item.is-active.animating[data-panel-part="tampao"],
.diagram__item.is-active.animating[data-panel-part="diafragma"] {
  /* Radial expansion for rings/seals */
  animation: diagram-in .35s ease both, piece-radial .7s ease-out .35s both;
}

.diagram__item.is-active.animating[data-panel-part="acoplamento"],
.diagram__item.is-active.animating[data-panel-part="amortecedor"],
.diagram__item.is-active.animating[data-panel-part="abracadeira"],
.diagram__item.is-active.animating[data-panel-part="placa"] {
  /* Default: subtle 3D rotation */
  animation: diagram-in .35s ease both, piece-rotate3d .7s ease-out .35s both;
}

@keyframes piece-breathe {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.02); }
  60%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes piece-compress {
  0%   { transform: scaleY(1); }
  40%  { transform: scaleY(0.95); }
  80%  { transform: scaleY(1.02); }
  100% { transform: scaleY(1); }
}

@keyframes piece-rotate3d {
  0%   { transform: perspective(600px) rotateY(15deg) rotateX(-5deg); }
  100% { transform: perspective(600px) rotateY(0deg) rotateX(0deg); }
}

@keyframes piece-radial {
  0%   { transform: scale(0.9); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.diagram__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
}

.diagram__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diagram__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 10px, transparent 10px 20px),
    var(--bg);
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .14em;
  text-align: center;
}

/* Placeholder com identificação da peça sem foto (flag, não "espaço genérico") */
.diagram__placeholder-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.diagram__placeholder-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.diagram__placeholder-sub {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal);
  background: rgba(245, 183, 10, .06);
  border: 1px solid rgba(245, 183, 10, .25);
  padding: 3px 8px;
  border-radius: 2px;
}

.diagram__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
}

.diagram__info {
  padding: clamp(1rem, 2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.diagram__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  line-height: 1.1;
}

.diagram__prod {
  color: var(--ink);
  font-size: .92rem;
}

.diagram__mat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.mat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 85, 29, .18);
}

.diagram__desc {
  color: var(--ink-dim);
  font-size: .9rem;
  line-height: 1.6;
}

.diagram__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: auto;
  padding-top: .6rem;
}

/* ── Seletor de variações da peça ───────────────────────────── */
.diagram__variants {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  flex-shrink: 0;
}

.diagram__variants-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.diagram__variants-list {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding-bottom: 2px; /* espaço pro focus-visible */
  scrollbar-width: none;
}

.diagram__variants-list::-webkit-scrollbar {
  display: none;
}

.diagram__variant {
  flex-shrink: 0;
  padding: .34rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
}

.diagram__variant:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.diagram__variant.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.diagram__variant:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.diagram__variant-detail {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.diagram__variant-detail.is-active {
  display: flex;
  animation: variant-in .32s ease both;
}

@keyframes variant-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.diagram__ref {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--signal);
}

.diagram__model {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--ink-faint);
}

/* ── Responsivo: diagrama ───────────────────────────────────── */
@media (max-width: 1024px) {
  .diagram__body {
    grid-template-columns: 1fr;
  }

  .diagram__panel {
    position: static;
    min-height: 0;
  }

  .diagram__media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .hotspot__label {
    display: none;
  }
}

@media (max-width: 560px) {
  .diagram__variants {
    gap: .45rem;
    padding: .5rem .7rem;
  }
  .diagram__variants-label {
    display: none;
  }
}

/* ── Reduced motion: diagrama ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hotspot__dot::before {
    animation: none;
    display: none;
  }

  .diagram__item.is-active,
  .diagram__variant-detail.is-active {
    animation: none !important;
  }
}