/* DNA Threads (js/dna-threads.js): the animated helix of the Institucional
   page, "Propósito & DNA" (15/10). Ported from the standalone artifact
   "Celero · DNA Threads" as is; what changed for the site: the canvas and the
   labels fill the section's stage (absolute) instead of the whole window, the
   label font is the site's, and the DNA edges fade into the page like the
   image they replace did. The mira cursor only shows over the stage (the
   site's own cursor, js/cursor.js, hides there). */
  .dna-stage { position: relative; }
  .dna-bg { position: absolute; inset: 0; pointer-events: none; }
  /* 16/10: the top/bottom fade is drawn by the shader now (js/dna-threads.js),
     not a CSS mask on the canvas, which cost a compositing pass per frame */
  .dna-bg canvas {
    width: 100% !important; height: 100% !important; display: block;
  }
  /* the site's crosshair gives way to the mira while the pointer is over the DNA */
  html.dna-cursor-on .cx-cursor { opacity: 0 !important; }

  /* ---------- rótulos ligados ao DNA ---------- */
  .dna-labels {
    --green: #50EA9A;
    --title: #FFFFFF;
    --text: #E8E8E8;
    --ease: cubic-bezier(.65, 0, .35, 1);
    position: absolute; inset: 0; pointer-events: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .dna-labels[hidden] { display: none; }

  /* Fechado: só o quadradinho aparece; linha, barra e texto ficam "guardados" nele.
     Abrir = linha sai do quadradinho → barra cresce → texto se revela a partir da barra
     (efeito "aparar caminho"). Fechar = o mesmo caminho ao contrário. */
  .dna-label {
    position: absolute; top: 0;
    color: var(--text); font-weight: 500;
    white-space: nowrap;
    padding: 0.05em 0;
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.4s var(--ease) 0s;
  }
  .dna-group.right .dna-label { clip-path: inset(0 100% 0 0); }
  .dna-label strong { display: block; color: var(--title); font-weight: 700; }
  .dna-group.left  .dna-label { text-align: right; padding-right: 0.85em; }
  .dna-group.right .dna-label { text-align: left;  padding-left: 0.85em; }

  .dna-bar {
    position: absolute; top: 0; width: 3px;
    background: var(--green);
    transform: scaleY(0); transform-origin: center;
    transition: transform 0.22s var(--ease) 0.32s;
  }
  .dna-line {
    position: absolute; top: 0; height: 1px;
    background: var(--green); opacity: 0.9;
    transform: scaleX(0);
    transition: transform 0.42s var(--ease) 0.5s;
  }
  .dna-group.left  .dna-line { transform-origin: right center; }   /* nasce no quadradinho */
  .dna-group.right .dna-line { transform-origin: left center; }

  /* --near: 0 longe → 1 em cima · --ba: força da "respiração" · --br: onda (-1..1) · --bl: piscar (0..1)
     (todas definidas pelo JS a cada quadro, para nenhuma mudança ser brusca) */
  .dna-group { --near: 0; --ba: 0; --br: 0; --bl: 0; }

  /* ---------- marcador / mira ----------
     Estágio 1 (repouso): cantoneiras verdes + miolo escuro.
     Estágio 2 (cursor se aproximando, .is-near): as cantoneiras se abrem conforme a distância,
       surgem cantoneiras brancas externas e marcas laterais, e tudo "respira" esperando a mira.
     Estágio 3 (travamento, .is-locked / .is-open): as cantoneiras fecham no alvo com tranco,
       as brancas encostam nelas, entram barras diagonais verdes e um flash quadrado. */
  .dna-marker {
    position: absolute; top: 0; left: 0;
    width: 22px; height: 22px;
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;   /* 19/10: delay was 0.6s */
  }
  .dna-labels.is-in .dna-marker { opacity: 1; }
  .dna-marker > i { position: absolute; display: block; }

  .mk-core { inset: 0; background: rgba(0, 0, 0, 0.52); }

  .mk-brk {
    --c: var(--green); --a: 6px; --t: 2px;
    inset: calc(-7px * var(--near));
    background:
      linear-gradient(var(--c), var(--c)) left top / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) left top / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) right top / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) right top / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--a) no-repeat;
    filter: drop-shadow(0 0 calc(2px + 4px * var(--near)) rgba(80, 234, 154, 0.85));
    transition: inset 0.25s cubic-bezier(.2, .8, .2, 1);
  }
  .mk-out {
    --c: #FFFFFF; --a: 4px; --t: 1px;
    inset: calc(-6px - 7px * var(--near));
    background:
      linear-gradient(var(--c), var(--c)) left top / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) left top / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) right top / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) right top / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--a) no-repeat;
    opacity: calc(var(--near) * 0.9);
    transition: inset 0.3s cubic-bezier(.2, .8, .2, 1), opacity 0.2s ease;
  }
  .mk-tick {
    --c: #FFFFFF; --a: 5px; --t: 1px;
    inset: calc(-10px - 8px * var(--near));
    background:
      linear-gradient(var(--c), var(--c)) center top / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) center bottom / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) left center / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) right center / var(--a) var(--t) no-repeat;
    opacity: var(--near);
    transition: inset 0.3s cubic-bezier(.2, .8, .2, 1), opacity 0.2s ease;
  }
  .mk-diag {
    --c: var(--green); --a: 5px; --t: 2px;
    inset: -34px; rotate: 45deg;
    background:
      linear-gradient(var(--c), var(--c)) center top / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) center bottom / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) left center / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) right center / var(--a) var(--t) no-repeat;
    filter: drop-shadow(0 0 3px rgba(80, 234, 154, 0.8));
    opacity: 0;
    transition: inset 0.3s ease, opacity 0.25s ease;
  }
  .mk-flash { inset: -2px; border: 1px solid #FFFFFF; opacity: 0; }
  /* cruz verde com ponto branco: fica no marcador enquanto o rótulo está aberto e o cursor não está nele */
  .mk-cross {
    --c: var(--green); --a: 4.5px; --t: 1.5px;
    inset: 4px;
    background:
      radial-gradient(circle, #FFFFFF 0 1px, transparent 1.6px) center / 4px 4px no-repeat,
      linear-gradient(var(--c), var(--c)) center top / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) center bottom / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) left center / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) right center / var(--a) var(--t) no-repeat;
    filter: drop-shadow(0 0 3px rgba(80, 234, 154, 0.85));
    opacity: 0; scale: 1.8; rotate: 45deg;
    transition: opacity 0.2s ease 0.85s, scale 0.2s ease 0.85s, rotate 0.2s ease 0.85s;
  }

  /* estágio 2: esperando a mira — a respiração vem das variáveis do JS (sem animações CSS que
     cortariam de repente no travamento) */
  .mk-brk  { scale: calc(1 + 0.05 * var(--ba) + 0.05 * var(--br)); }
  .mk-out  { scale: calc(1 + 0.04 * var(--ba) - 0.05 * var(--br)); }
  .mk-tick { opacity: calc(var(--near) * (1 - 0.65 * var(--bl))); }

  /* estágio 3: travado (e enquanto o rótulo estiver aberto) */
  .dna-group.is-locked .mk-brk, .dna-group.is-open .mk-brk {
    inset: -1px;
    filter: drop-shadow(0 0 5px rgba(80, 234, 154, 0.95));
    transition: inset 0.22s cubic-bezier(.5, 0, .2, 1.6);
  }
  .dna-group.is-locked .mk-out, .dna-group.is-open .mk-out {
    inset: -5px; opacity: 0.6;
    transition: inset 0.28s cubic-bezier(.5, 0, .2, 1.5) 0.04s, opacity 0.2s ease;
  }
  .dna-group.is-locked .mk-tick, .dna-group.is-open .mk-tick {
    inset: -9px; opacity: 0.85;
    transition: inset 0.25s cubic-bezier(.5, 0, .2, 1.5) 0.06s, opacity 0.2s ease;
  }
  .dna-group.is-locked .mk-diag, .dna-group.is-open .mk-diag {
    inset: -19px; opacity: 0.85;
    transition: inset 0.38s cubic-bezier(.2, .9, .25, 1.25) 0.05s, opacity 0.2s ease 0.05s;
  }
  .dna-group.lock-pulse .mk-flash { animation: mk-flash 0.5s ease-out; }
  @keyframes mk-flash { 0% { opacity: 0.9; scale: 1; } 100% { opacity: 0; scale: 2.4; } }
  .dna-group.is-open .mk-cross {
    opacity: 1; scale: 1; rotate: 0deg;
    transition: opacity 0.12s ease, scale 0.32s cubic-bezier(.3, 1.6, .5, 1), rotate 0.32s cubic-bezier(.3, 1.6, .5, 1);
  }
  .dna-group.is-locked .mk-cross { opacity: 0; transition: opacity 0.08s ease; }

  /* numeração 01–04 ao lado do marcador (some quando o texto aparece) */
  .dna-index {
    position: absolute; top: 0; left: 0;
    font: 600 12px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    letter-spacing: 0.08em;
    color: var(--green);
    text-shadow: 0 0 4px #000, 0 0 2px #000;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .dna-labels.is-in .dna-index { opacity: calc(0.6 + 0.4 * var(--near)); }
  .dna-group.is-open .dna-index { opacity: 0; transition: opacity 0.2s ease; }

  /* ---------- cursor em mira (4 linhas + ponto) ----------
     Cada parte é um elemento próprio: tamanho, posição e cor mudam por transição, nunca de uma vez. */
  .dna-cursor {
    --gap: 4.5px; --len: 8.5px; --t: 1.5px; --c: #FFFFFF; --d: #50EA9A;
    position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 20; pointer-events: none;   /* site: inside the stage */
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.25));
    opacity: 0;
    transition: opacity 0.2s ease, filter 0.3s ease;
    will-change: transform;
  }
  .dna-cursor.is-visible { opacity: 1; }
  .dna-cursor > i {
    position: absolute; left: 0; top: 0; display: block;
    background-color: var(--c);
    transition: background-color 0.3s ease, transform 0.3s cubic-bezier(.25, 1, .5, 1),
                width 0.3s cubic-bezier(.25, 1, .5, 1), height 0.3s cubic-bezier(.25, 1, .5, 1);
  }
  .dna-cursor .ct { width: var(--t); height: var(--len); transform: translate(-50%, calc(-1 * (var(--gap) + var(--len)))); }
  .dna-cursor .cb { width: var(--t); height: var(--len); transform: translate(-50%, var(--gap)); }
  .dna-cursor .cl { width: var(--len); height: var(--t); transform: translate(calc(-1 * (var(--gap) + var(--len))), -50%); }
  .dna-cursor .cr { width: var(--len); height: var(--t); transform: translate(var(--gap), -50%); }
  .dna-cursor .cd { width: 2.4px; height: 2.4px; border-radius: 50%; background-color: var(--d); transform: translate(-50%, -50%); }
  .dna-cursor.is-locked {
    --gap: 2.2px; --len: 4.6px; --c: #50EA9A; --d: #FFFFFF;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(80, 234, 154, 0.9));
  }
  html.dna-cursor-on .dna-stage, html.dna-cursor-on .dna-stage * { cursor: none !important; }

  /* aberto */
  .dna-group.is-open .dna-line  { transform: scaleX(1); transition: transform 0.45s var(--ease) 0s; }
  .dna-group.is-open .dna-bar   { transform: scaleY(1); transition: transform 0.25s var(--ease) 0.4s; }
  .dna-group.is-open .dna-label { clip-path: inset(0 0 0 0); transition: clip-path 0.55s var(--ease) 0.58s; }

  @media (prefers-reduced-motion: reduce) {
    .dna-cursor, .dna-cursor > i, .dna-marker > i, .dna-group .dna-marker > i { transition: none !important; animation: none !important; }
    .dna-label, .dna-line, .dna-bar, .dna-marker, .dna-index,
    .dna-group.is-open .dna-label, .dna-group.is-open .dna-line, .dna-group.is-open .dna-bar { transition: none; }
  }

  /* 17/10 (her comment): the green cross on the DNA markers without the white dot in the middle */
  .mk-cross {
    background:
      linear-gradient(var(--c), var(--c)) center top / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) center bottom / var(--t) var(--a) no-repeat,
      linear-gradient(var(--c), var(--c)) left center / var(--a) var(--t) no-repeat,
      linear-gradient(var(--c), var(--c)) right center / var(--a) var(--t) no-repeat;
  }

/* 19/10 (her comment): like the timeline above it, hovering one of the DNA's values (once
   open) grows that text a little (same size step, 110.5%, and the same Bézier curve), and
   it goes back when the cursor leaves. It grows from the side of its green bar, so it
   moves away from the helix instead of into it */
@media (hover: hover) {
  .dna-group.left  .dna-label { transform-origin: 100% 50%; }
  .dna-group.right .dna-label { transform-origin: 0 50%; }
  .dna-group.is-open .dna-label {
    pointer-events: auto;
    transition: clip-path 0.55s var(--ease) 0.58s, scale .55s cubic-bezier(.22, 1, .36, 1);
  }
  .dna-group.is-open .dna-label:hover { scale: 1.105; }
}