/* Decalques do hero: a mão como lâmina de atlas. Moldura com régua e marcas
   de registro, legenda da lâmina, gravuras apagadas no fundo e rótulos com
   guia que aparecem quando a luz passa pela anatomia. */

/* ---------- rótulos presos à foto ---------- */

.m-rotulos {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.m-rot {
  position: absolute;
  width: 0;
  height: 0;
}

.m-rot.fora {
  display: none;
}

.m-rot-ponto {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #f1d9ae;
  background: rgba(10, 30, 46, 0.75);
  box-shadow: 0 0 0 2px rgba(10, 30, 46, 0.55), 0 0 14px rgba(226, 192, 138, 0.6);
  opacity: 0;
  transform: scale(0.3);
  transition:
    opacity 0.25s,
    transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.m-rot-guia {
  position: absolute;
  left: 0;
  top: 0;
  filter: drop-shadow(0 0 1.5px rgba(10, 30, 46, 0.95)) drop-shadow(0 0 6px rgba(10, 30, 46, 0.6));
}

.m-rot-guia path {
  fill: none;
  stroke: #f1d9ae;
  stroke-width: 1.25;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.m-rot-texto {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  white-space: nowrap;
  font-family: var(--serifa);
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  color: #f1e3c8;
  padding: 5px 9px 6px;
  border-radius: 6px;
  background: rgba(10, 30, 46, 0.72);
  box-shadow: 0 0 0 1px rgba(226, 192, 138, 0.22) inset;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition:
    opacity 0.25s,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.m-rot.esq .m-rot-texto {
  transform: translate(calc(-100% - 4px), -50%) translateX(6px);
}

.m-rot.dir .m-rot-texto {
  transform: translate(4px, -50%) translateX(-6px);
}

.m-rot.on .m-rot-ponto {
  opacity: 1;
  transform: none;
}

.m-rot.on .m-rot-guia path {
  stroke-dashoffset: 0;
  transition-delay: 0.08s;
  transition-duration: 0.55s;
}

.m-rot.on .m-rot-texto {
  opacity: 1;
  transition-delay: 0.38s;
}

.m-rot.esq.on .m-rot-texto {
  transform: translate(calc(-100% - 4px), -50%);
}

.m-rot.dir.on .m-rot-texto {
  transform: translate(4px, -50%);
}

/* ---------- a moldura da lâmina ---------- */

.m-placa {
  position: absolute;
  inset: 0;
  z-index: 36;
  pointer-events: none;
}

/* régua na borda esquerda e na de baixo: risco a cada 8px, maior a cada 40 */
.m-regua-v,
.m-regua-h {
  position: absolute;
  opacity: 0.5;
}

.m-regua-v {
  left: 20px;
  top: 120px;
  bottom: 120px;
  width: 12px;
  background:
    repeating-linear-gradient(180deg, rgba(223, 231, 238, 0.32) 0 1px, transparent 1px 40px) left / 12px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(223, 231, 238, 0.18) 0 1px, transparent 1px 8px) left / 6px 100% no-repeat;
}

.m-regua-h {
  left: 120px;
  right: 120px;
  bottom: 20px;
  height: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(223, 231, 238, 0.32) 0 1px, transparent 1px 40px) bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(223, 231, 238, 0.18) 0 1px, transparent 1px 8px) bottom / 100% 6px no-repeat;
}

/* marcas de registro nos quatro cantos */
.m-registro {
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: 0.45;
}

.m-registro::before,
.m-registro::after {
  content: "";
  position: absolute;
  background: rgba(223, 231, 238, 0.55);
}

.m-registro::before {
  left: 10px;
  top: 0;
  width: 1px;
  height: 22px;
}

.m-registro::after {
  left: 0;
  top: 10px;
  width: 22px;
  height: 1px;
}

.m-registro.r1 {
  left: 16px;
  top: 96px;
}

.m-registro.r2 {
  right: 16px;
  top: 96px;
}

.m-registro.r3 {
  left: 16px;
  bottom: 16px;
}

.m-registro.r4 {
  right: 16px;
  bottom: 16px;
}

/* legenda vertical na borda direita */
.m-legenda-placa {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--serifa);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(226, 192, 138, 0.62);
  white-space: nowrap;
}

/* escala: 2 cm */
.m-escala {
  position: absolute;
  right: 148px;
  bottom: 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--serifa);
  font-style: italic;
  font-size: 12px;
  color: rgba(223, 231, 238, 0.5);
}

.m-escala i {
  display: block;
  width: 80px;
  height: 5px;
  border: 1px solid rgba(223, 231, 238, 0.45);
  border-top: 0;
  background: linear-gradient(90deg, rgba(223, 231, 238, 0.45) 50%, transparent 50%) bottom / 100% 1px no-repeat;
}

/* gravuras apagadas no fundo, em tinta clara e blend screen */
.m-gravura {
  position: absolute;
  height: auto;
  z-index: 34;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  animation: m-gravura 2.4s ease-out 0.9s forwards;
}

@keyframes m-gravura {
  to {
    opacity: var(--o, 0.12);
  }
}

.m-gravura.g-neurona {
  --o: 0.16;
  left: -2%;
  top: 14%;
  width: min(30vw, 420px);
}

.m-gravura.g-corazon {
  --o: 0.1;
  right: 3%;
  top: 9%;
  width: min(22vw, 320px);
}

@media (max-width: 899px) {
  .m-regua-h,
  .m-escala {
    display: none;
  }
  .m-gravura.g-corazon {
    display: none;
  }
}

@media (max-width: 639px) {
  .m-regua-v,
  .m-legenda-placa,
  .m-registro.r1,
  .m-registro.r2 {
    display: none;
  }
  .m-rot-texto {
    font-size: 13px;
  }
  .m-gravura.g-neurona {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-gravura {
    animation: none;
    opacity: var(--o, 0.12);
  }
}