/* ==========================================================================
   Journal widgets — ilustrações interativas dos artigos (js/journal-widgets.js)
   Linguagem da casa: hairlines, micro caps, cross-marks como affordance,
   laranja IoT como acento, hover 300ms in / 500ms out em expo.
   ========================================================================== */

.artigo__widget { display: block; }

.jw {
  position: relative;
  border: 1px solid rgba(10, 10, 15, 0.14);
  border-radius: var(--radius-container, 24px);
  background:
    radial-gradient(ellipse 90% 70% at 30% 20%, rgba(244, 125, 78, 0.05), transparent 60%),
    #FBFAF8;
  color: #1A1A1A;
  padding: 2.6rem 1.4rem 1.2rem;
  overflow: hidden;
}

.jw__kicker {
  position: absolute;
  top: 14px;
  left: 18px;
  opacity: 0.45;
  letter-spacing: 0.18em;
}

.jw__corner {
  position: absolute;
  font-size: 14px;
  opacity: 0.3;
  pointer-events: none;
}
.jw__corner--tl { top: 34px; left: 18px; }
.jw__corner--br { bottom: 14px; right: 18px; }

/* ---- cena ---- */
.jw__scene {
  display: block;
  width: 100%;
  height: auto;
  color: #1A1A1A;
}

.jw__tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  fill: currentColor;
  opacity: 0.45;
}

/* sensor: ponto aceso + anéis que respiram */
.jw__sensor-dot,
.jw__gw-dot {
  fill: var(--orange, #F47D4E);
}

.jw__ring {
  fill: none;
  stroke: var(--orange, #F47D4E);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  stroke-width: 1.6;
}

.jw__ring--1 { animation: jw-ping 2.6s cubic-bezier(0.19, 1, 0.22, 1) infinite; }
.jw__ring--2 { animation: jw-ping 2.6s cubic-bezier(0.19, 1, 0.22, 1) 1.3s infinite; }
.jw__ring--gw { animation: jw-ping 2.6s cubic-bezier(0.19, 1, 0.22, 1) 0.9s infinite; }

@keyframes jw-ping {
  0%   { opacity: 0.85; transform: scale(0.5); }
  70%  { opacity: 0;    transform: scale(2.6); }
  100% { opacity: 0;    transform: scale(2.6); }
}

/* ondas LoRa: arcos tracejados correndo do sensor ao gateway */
.jw__wave {
  stroke: var(--orange, #F47D4E);
  stroke-width: 2;
  stroke-dasharray: 10 14;
  opacity: 0.55;
  animation: jw-travel 1.8s linear infinite;
}
.jw__wave--2 { opacity: 0.4; animation-delay: 0.25s; }
.jw__wave--3 { opacity: 0.28; animation-delay: 0.5s; }
.jw__wave--4 { opacity: 0.18; animation-delay: 0.75s; }

@keyframes jw-travel {
  to { stroke-dashoffset: -48; }
}

.jw__downlink {
  stroke: currentColor;
  opacity: 0.4;
  animation: jw-travel 2.4s linear infinite;
}

/* ---- régua de telemetria ---- */
.jw__telemetry {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 1rem;
  padding: 10px 14px;
  border-top: 1px solid rgba(10, 10, 15, 0.12);
}

.jw__telemetry-label { opacity: 0.45; letter-spacing: 0.18em; }

.jw__telemetry-wave {
  flex: 1;
  height: 28px;
  color: var(--orange, #F47D4E);
}

.jw__telemetry-path { stroke: currentColor; }

.jw__telemetry-value {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
  min-width: 4.6em;
  text-align: right;
}

/* ---- hotspots: cross-marks clicáveis ---- */
.jw__spot {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #1A1A1A;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 500ms var(--ease-expo-out, cubic-bezier(0.19, 1, 0.22, 1)),
              transform 500ms var(--ease-expo-out, cubic-bezier(0.19, 1, 0.22, 1));
  animation: jw-breathe 3.4s ease-in-out infinite;
}

.jw__spot:hover,
.jw__spot:focus-visible,
.jw__spot.is-on {
  opacity: 1;
  transform: scale(1.25);
  transition-duration: 300ms;
  animation-play-state: paused;
}

.jw__spot:focus-visible {
  outline: 2px solid var(--orange, #F47D4E);
  outline-offset: 2px;
}

@keyframes jw-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* enquanto explica, a cena abaixa o volume e o ponto em foco fala */
.jw--explaining .jw__scene,
.jw--explaining .jw__telemetry { opacity: 0.45; transition: opacity 300ms ease; }
.jw__scene, .jw__telemetry { transition: opacity 500ms ease; }

/* ---- tooltip (pílula escura, padrão da casa) ---- */
.jw__tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  max-width: 300px;
  padding: 10px 14px;
  background: #0A0A0F;
  color: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: none;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 10px 30px rgba(10, 10, 15, 0.25);
}

@media (max-width: 700px) {
  .jw { padding: 2.4rem 0.8rem 1rem; }
  .jw__tip { max-width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .jw__ring, .jw__wave, .jw__downlink, .jw__spot { animation: none; }
  .jw__ring { opacity: 0.35; transform: scale(1.6); }
}