/* Gabriel Vieira Costa — efeitos da home nas páginas de fotos das viagens
   (Cocos, Mar Vermelho, Mariana; a de Tulum usa uma cópia deste arquivo no site dela).
   Acompanha o viagens-efeitos.js. Cada página mantém a própria paleta: a cor da malha
   vem de --fx-rgb, que o script lê do atributo data-cor. */

/* ---------- fundo vivo ---------- */
/* o canvas fica atrás de tudo (z-index -1); pra aparecer, o degradê do body passa pro html.
   Só vale depois que o fundo montou (classe fx-on): sem WebGL a página fica como era. */
html.fx-on body { background: transparent; }
.bg-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ---------- malha nas fotos ---------- */
.fold-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}
/* capa: caixa do tamanho da foto inteira (o script posiciona igual ao background da capa);
   fica acima do degradê da capa e abaixo do título */
.fx-hero-mesh { position: absolute; z-index: 1; pointer-events: none; }
/* a capa espera a malha chegar pra não piscar; se o script não rodar, ela aparece sozinha */
html.fx-hero .hero-img, html.fx-hero img[data-malha-capa] { opacity: 0; animation: fx-hero-in .5s ease 2.4s forwards; }
/* capa em <img> (venda das masterclasses): recorte do tamanho da foto, posto pelo script */
.fx-hero-clip { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
@keyframes fx-hero-in { to { opacity: 1; } }

/* ---------- textura de grão ---------- */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/></svg>");
}

/* ---------- cursor: a mesma seta de linha de caverna em malha da home (/assets/img/cursor) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.gvc-seta, html.gvc-seta body {
    cursor: url(assets/img/cursor/seta.png) 5 5, auto;
    cursor: -webkit-image-set(url(assets/img/cursor/seta.png) 1x, url(assets/img/cursor/seta@2x.png) 2x) 5 5, auto;
    cursor: image-set(url(assets/img/cursor/seta.png) 1x, url(assets/img/cursor/seta@2x.png) 2x) 5 5, auto;
  }
  html.gvc-seta :is(a, button, [role="button"], .grid figure, .site-card, .cenote-card, .cert, label, summary), html.gvc-seta .gvc-seta-on {
    cursor: url(assets/img/cursor/seta-on.png) 5 5, pointer;
    cursor: -webkit-image-set(url(assets/img/cursor/seta-on.png) 1x, url(assets/img/cursor/seta-on@2x.png) 2x) 5 5, pointer;
    cursor: image-set(url(assets/img/cursor/seta-on.png) 1x, url(assets/img/cursor/seta-on@2x.png) 2x) 5 5, pointer;
  }
  html.gvc-seta :is(input, textarea, select, [contenteditable]) { cursor: text; }
}

/* ---------- régua de profundidade em malha ---------- */
/* a mesma fita de triângulos da home, em versão estreita: aqui a galeria começa perto da
   margem, então a régua cabe na faixa livre e a leitura vai embaixo, não ao lado. */
@property --gp { syntax: '<number>'; inherits: true; initial-value: 0; }
.depth-gauge {
  --mesh: rgb(var(--fx-rgb, 92, 189, 255));
  position: fixed;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 50;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
.gauge-rail {
  position: relative;
  width: 24px;
  height: min(58vh, 620px);
  transition: --gp .6s cubic-bezier(.2, .8, .2, 1);
}
.gauge-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}
.gauge-mesh path { vector-effect: non-scaling-stroke; stroke-linecap: round; }
/* malha apagada: o caminho que ainda falta descer */
.gauge-mesh.base .e { stroke: rgba(var(--fx-rgb, 92, 189, 255), .20); stroke-width: .6; }
.gauge-mesh.base .n { stroke: rgba(var(--fx-rgb, 92, 189, 255), .34); stroke-width: 1.7; }
/* malha acesa: do topo até a profundidade atual, mais forte perto da frente */
.gauge-mesh.lit {
  filter: drop-shadow(0 0 3px rgba(var(--fx-rgb, 92, 189, 255), .5));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.40) calc(var(--gp) * 100% - 28%), #000 calc(var(--gp) * 100%), transparent calc(var(--gp) * 100% + 1.4%));
          mask-image: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.40) calc(var(--gp) * 100% - 28%), #000 calc(var(--gp) * 100%), transparent calc(var(--gp) * 100% + 1.4%));
}
.gauge-mesh.lit .e { stroke: var(--mesh); stroke-width: .7; }
.gauge-mesh.lit .n { stroke: var(--mesh); stroke-width: 2; }
/* frente: a faixa clara onde a malha está se desenhando */
.gauge-mesh.hot {
  filter: drop-shadow(0 0 5px rgba(var(--fx-rgb, 92, 189, 255), .9));
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--gp) * 100% - 7%), #000 calc(var(--gp) * 100%), transparent calc(var(--gp) * 100% + 1.4%));
          mask-image: linear-gradient(180deg, transparent calc(var(--gp) * 100% - 7%), #000 calc(var(--gp) * 100%), transparent calc(var(--gp) * 100% + 1.4%));
  animation: gauge-breathe 3.2s ease-in-out infinite;
}
.gauge-mesh.hot .e { stroke: #fff; stroke-width: .8; opacity: .85; }
.gauge-mesh.hot .n { stroke: #fff; stroke-width: 2.4; }
@keyframes gauge-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* graduação: um traço fino atravessando a fita a cada 20 m */
.gauge-ticks span {
  position: absolute;
  left: -4px;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mesh), transparent);
  opacity: .22;
  transition: opacity .5s;
}
.gauge-ticks span.on { opacity: .6; }

/* ponta dos 106 m: acende quando chega ao fim */
.gauge-record {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(var(--fx-rgb, 92, 189, 255), .4);
  transition: border-color .6s, box-shadow .6s, background .6s;
}
.at-record .gauge-record {
  border-color: var(--mesh);
  background: rgba(var(--fx-rgb, 92, 189, 255), .25);
  box-shadow: 0 0 14px rgba(var(--fx-rgb, 92, 189, 255), .8);
}

/* marcador: nó aceso na profundidade atual */
.gauge-marker {
  position: absolute;
  left: -6px;
  top: calc(var(--gp) * 100%);
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--fx-rgb, 92, 189, 255), .75) 30%, rgba(var(--fx-rgb, 92, 189, 255), .75) 70%, transparent 100%);
}
.gauge-marker i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px; height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(var(--fx-rgb, 92, 189, 255), .35), 0 0 14px 2px var(--mesh);
}
.gauge-marker i::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--mesh);
  animation: gauge-ping 2.6s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes gauge-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }

/* leitura: só o número, embaixo da fita */
.gauge-readout {
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  color: #f5f7fa;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(var(--fx-rgb, 92, 189, 255), .55), 0 0 3px rgba(0, 0, 0, .9);
}
@media (prefers-reduced-motion: reduce) {
  .gauge-rail { transition: none; }
  .gauge-mesh.hot, .gauge-marker i::after { animation: none; }
}
/* abaixo de 1100px a margem da galeria fica menor que a régua */
@media (max-width: 1099px) { .depth-gauge { display: none; } }