/* ============================================================
   ROPE TEC — Camada de experiência
   1. Descida em rapel (parallax vertical)
   2. Planta industrial isométrica interativa
   3. Microinterações (cursor de mira, mosquetão, drop-in)

   Camada opcional: remover este arquivo e experience.js devolve
   o site à versão base, sem quebrar nada.
   ============================================================ */

/* ============================================================
   1. DESCIDA EM RAPEL
   ============================================================ */
.descent {
  position: relative;
  background: var(--charcoal-900);
  color: var(--text-on-dark);
  overflow: hidden;
}

/* Palco fixo: a estrutura fica parada na viewport enquanto o
   conteúdo desce por cima dela. */
.descent__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
.descent__svg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1180px;
  margin-left: -590px;
  will-change: transform;
}
/* Traço da estrutura desenhada: discreto, para não competir com o texto */
.dsvg-frame    { fill: none; stroke: var(--charcoal-700); stroke-width: 2; }
.dsvg-frame-2  { fill: none; stroke: var(--charcoal-800); stroke-width: 2; }
.dsvg-solid    { fill: #1e1e21; stroke: var(--charcoal-700); stroke-width: 2; }
.dsvg-solid-2  { fill: var(--charcoal-800); stroke: var(--charcoal-600); stroke-width: 2; }
.dsvg-plate    { fill: var(--charcoal-800); stroke: var(--charcoal-700); stroke-width: 1; }
.dsvg-ground   { fill: #131315; }

.descent__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--charcoal-900) 0%, rgba(24,24,26,0) 22%,
                    rgba(24,24,26,0) 78%, var(--charcoal-900) 100%);
  pointer-events: none;
}

/* Corda + descensor */
/* A corda corre logo à esquerda da coluna de conteúdo, para ficar
   visível o tempo todo em vez de sumir atrás dos cards. O piso de
   64px evita colidir com o trilho de cota (que vive em left:24px). */
.descent__rope {
  position: absolute;
  top: -10vh; bottom: -10vh;
  left: max(64px, calc(50% - 628px));
  width: 2px;
  background: var(--orange-700);
}
.descent__rig {
  position: absolute;
  left: -13px;
  top: 0;
  width: 28px; height: 34px;
  border: 2px solid var(--orange-500);
  border-radius: var(--radius-sm);
  background: var(--charcoal-900);
  display: grid; place-items: center;
  will-change: transform;
}
.descent__rig::before {
  content: "";
  width: 10px; height: 10px;
  border: 2px solid var(--orange-500);
  border-radius: 50%;
}
.descent__rig::after {
  content: attr(data-cota);
  position: absolute;
  left: 38px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  color: var(--orange-500);
  white-space: nowrap;
}

/* Conteúdo puxado por cima do palco */
.descent__flow {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
}
.descent__intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: 88px var(--space-8) 0;
  min-height: 40vh;
}
.descent__intro .lead { max-width: 52ch; }

/* 46vh por plataforma: sobra estrutura visível entre um ponto e outro
   sem virar campo vazio. A 78vh a seção lia como buraco no layout. */
.platform {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--space-8);
  min-height: 46vh;
  display: flex;
  align-items: center;
}
/* nth-of-type e não nth-child: o <header> da intro é irmão das
   plataformas e deslocaria a contagem. */
.platform:nth-of-type(even) { justify-content: flex-end; }

/* A chapa de aço pendurada fora do card lia como elemento quebrado.
   Agora o piso é a própria base do card: faixa de risco encostada
   na borda inferior, dentro do contorno. */
.platform__card {
  position: relative;
  width: 100%;
  max-width: 468px;
  background: rgba(24, 24, 26, 0.95);
  border: 1px solid var(--charcoal-700);
  border-left: 3px solid var(--orange-500);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8) var(--space-10);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.platform__card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(-45deg,
    var(--orange-500) 0, var(--orange-500) 8px,
    var(--charcoal-900) 8px, var(--charcoal-900) 16px);
  opacity: 0.85;
}
.platform__cota {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  color: var(--orange-500);
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.platform__cota::after {
  content: "";
  flex: 1; height: 1px;
  background: var(--charcoal-600);
}
.platform h3 {
  font-size: var(--text-3xl);
  color: var(--white);
  margin-bottom: var(--space-4);
}
.platform p {
  margin: 0;
  color: var(--steel-400);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   2. PLANTA ISOMÉTRICA
   ============================================================ */
.plant {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-10);
  align-items: center;
}
.plant__stage {
  position: relative;
  perspective: 1400px;
}
.plant__scene {
  width: 100%;
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.plant__scene svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Faces isométricas: topo claro, lateral média, frente escura.
   Preenchimento chapado, sem gradiente — como manda a marca. */
.iso-top    { fill: var(--charcoal-500); stroke: var(--charcoal-800); stroke-width: 1.5; }
.iso-left   { fill: var(--charcoal-700); stroke: var(--charcoal-800); stroke-width: 1.5; }
.iso-right  { fill: var(--charcoal-800); stroke: var(--charcoal-900); stroke-width: 1.5; }
.iso-steel  { }
.iso-steel.iso-top   { fill: var(--steel-600); }
.iso-steel.iso-left  { fill: var(--steel-700); }
.iso-steel.iso-right { fill: var(--steel-800); }
.iso-roof-a { fill: var(--charcoal-500); stroke: var(--charcoal-800); stroke-width: 1.5; }
.iso-roof-b { fill: var(--charcoal-600); stroke: var(--charcoal-800); stroke-width: 1.5; }
.iso-gable  { fill: var(--charcoal-700); stroke: var(--charcoal-800); stroke-width: 1.5; }
.iso-slope  { fill: var(--charcoal-800); stroke: var(--charcoal-700); stroke-width: 1.5; }
.iso-line   { fill: none; stroke: var(--charcoal-800); stroke-width: 1.5; }
.iso-grid   { fill: none; stroke: var(--charcoal-800); stroke-width: 1; opacity: 0.55; }

/* Pontos de ancoragem */
.hot { cursor: pointer; }
.hot__ring {
  fill: rgba(242, 111, 31, 0.14);
  stroke: var(--orange-500);
  stroke-width: 2;
  transition: r var(--dur-base) var(--ease-standard),
              fill var(--dur-base) var(--ease-standard);
}
.hot__dot { fill: var(--orange-500); }
.hot__hit { fill: transparent; stroke: none; }
.hot__pin { stroke: var(--orange-500); stroke-width: 2; }
.hot__label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--steel-400);
  letter-spacing: 0.06em;
  transition: fill var(--dur-base) var(--ease-standard);
}
.hot:hover .hot__ring,
.hot:focus-visible .hot__ring,
.hot.is-active .hot__ring { fill: rgba(242, 111, 31, 0.42); r: 15; }
.hot:hover .hot__label,
.hot.is-active .hot__label { fill: var(--white); }
.hot:focus-visible { outline: none; }
.hot:focus-visible .hot__ring { stroke: var(--white); }

/* Chamada de atenção: uma única passada quando a seção entra em cena.
   Sem loop — a marca não usa animação contínua. */
@keyframes hot-ping {
  0%   { r: 10; opacity: 1; }
  100% { r: 26; opacity: 0; }
}
.plant.is-live .hot__ping {
  fill: none;
  stroke: var(--orange-500);
  stroke-width: 2;
  animation: hot-ping 900ms var(--ease-out) 1 both;
}
.plant.is-live .hot:nth-of-type(2) .hot__ping { animation-delay: 120ms; }
.plant.is-live .hot:nth-of-type(3) .hot__ping { animation-delay: 240ms; }
.plant.is-live .hot:nth-of-type(4) .hot__ping { animation-delay: 360ms; }
.plant.is-live .hot:nth-of-type(5) .hot__ping { animation-delay: 480ms; }
.plant.is-live .hot:nth-of-type(6) .hot__ping { animation-delay: 600ms; }

/* Painel lateral */
.plant__panel {
  background: var(--charcoal-800);
  border: 1px solid var(--charcoal-700);
  border-top: 3px solid var(--orange-500);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 300px;
}
.plant__panel .platform__cota { margin-bottom: var(--space-4); }
.plant__panel h3 {
  font-size: var(--text-2xl);
  color: var(--white);
  margin-bottom: var(--space-3);
}
.plant__panel p {
  margin: 0 0 var(--space-5);
  color: var(--steel-400);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.plant__meta {
  display: grid; gap: var(--space-3);
  border-top: 1px solid var(--charcoal-700);
  padding-top: var(--space-5);
}
.plant__meta div {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  color: var(--steel-500);
}
.plant__meta b { color: var(--steel-300); font-weight: 500; }
.plant__hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel-600);
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-5);
}

/* ============================================================
   3. MICROINTERAÇÕES
   ============================================================ */

/* --- Mosquetão nos CTAs primários ---
   Corpo em D com portão no topo. Precisa de tamanho para ler como
   mosquetão: a 14px virava um risco branco sem forma. */
.btn__carabiner {
  width: 17px; height: 19px;
  flex: none;
  margin-right: 2px;
  overflow: visible;
}
.btn__carabiner .cb-body,
.btn__carabiner .cb-gate {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
/* Dobradiça na base do portão: a ponta de cima descreve um arco largo. */
.btn__carabiner .cb-gate {
  transform-origin: 9px 15.5px;
  transform: rotate(28deg);
  transition: transform var(--dur-slow) var(--ease-standard);
}
.btn:hover .btn__carabiner .cb-gate,
.btn:focus-visible .btn__carabiner .cb-gate { transform: rotate(0deg); }

/* Tensão da corda: uma passada rápida no clique */
@keyframes rope-tension {
  0%   { transform: scaleX(0); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.btn { position: relative; overflow: hidden; }
.btn .btn__tension {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.btn.is-pulled .btn__tension { animation: rope-tension 320ms var(--ease-out) 1 both; }

/* --- Chegada por queda ao navegar entre seções --- */
@keyframes drop-in {
  0%   { transform: translateY(-44px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.is-dropping > .wrap,
.is-dropping > .stats__grid,
.is-dropping > .descent__flow { animation: drop-in 320ms var(--ease-out) 1 both; }

/* ============================================================
   Acessibilidade e responsivo
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .descent__svg, .descent__rig { transform: none !important; }
  .plant__scene { transform: none !important; }
  .plant.is-live .hot__ping { animation: none; opacity: 0; }
  .btn.is-pulled .btn__tension { animation: none; }
  .is-dropping > .wrap,
  .is-dropping > .stats__grid,
  .is-dropping > .descent__flow { animation: none; }
}

@media (max-width: 1080px) {
  .plant { grid-template-columns: 1fr; gap: var(--space-6); }
  .plant__panel { min-height: 0; }
}

/* A cena encolhe no celular; o alvo de toque cresce junto para
   continuar acertável com o dedo. */
@media (max-width: 640px) {
  .hot__hit { r: 44; }
}

/* No celular o palco fixo custa caro e rende pouco:
   a estrutura vira fundo estático e as plataformas empilham. */
@media (max-width: 860px) {
  .descent__stage { position: absolute; top: 0; left: 0; right: 0; height: 100%; }
  .descent__svg { width: 900px; margin-left: -450px; opacity: 0.5; }
  .descent__flow { margin-top: 0; }
  .descent__rope { left: 8%; }
  .descent__rig { display: none; }
  .descent__intro { padding-top: 64px; min-height: 0; }
  .platform { min-height: 0; padding-block: var(--space-10); }
  .platform:nth-of-type(even) { justify-content: flex-start; }
  .platform__card { max-width: none; }
  .descent__vignette { display: none; }
}