/* Iceberg: o vídeo levado pela rolagem. A seção é alta e a cena fica presa na tela; os cartões saem do meio do iceberg. */
.js .iceberg:not(.parado) { height: 460vh; }
.js .iceberg:not(.parado) .ice-pino { position: sticky; top: 0; }
.ice-video { opacity: 0; transition: opacity 500ms ease; }
.iceberg.video-pronto .ice-video { opacity: 1; }
.ice-fundo { opacity: 0; background: linear-gradient(180deg, rgba(4,16,31,0) 30%, var(--mar) 92%); pointer-events: none; }
.ice-cima { will-change: opacity, transform; }

/* os cartões: cada um nasce pequeno do meio do iceberg (o JS move e aproxima) */
.js .iceberg:not(.parado) .ice-cartoes { position: absolute; inset: 0; display: block; width: auto; margin: 0; padding: 0; pointer-events: none; }
.js .iceberg:not(.parado) .ice-cartao { position: absolute; left: 0; top: 0; width: min(450px, calc(100% - 2 * var(--gut))); padding: 22px 24px 24px; opacity: 0;
  transform-origin: 50% 50%; will-change: transform, opacity; }
@media (min-width: 701px) { .js .iceberg:not(.parado) .ice-cartao h3 { font-size: clamp(28px, 2.6vw, 36px); } .js .iceberg:not(.parado) .ice-cartao p { font-size: 16.5px; } }
.ice-cartao { box-shadow: 0 30px 80px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(153,200,255,.08), 0 0 60px -20px rgba(90,162,255,.45), inset 0 1px 0 rgba(255,255,255,.07); }

/* medidor de profundidade */
.js .iceberg:not(.parado) .ice-prof { display: grid; justify-items: end; gap: 10px; opacity: 0; }
.ice-regua { display: block; width: 26px; height: 44vh; border-right: 1px solid rgba(153,200,255,.35);
  background: repeating-linear-gradient(180deg, rgba(153,200,255,.55) 0 1px, transparent 1px 12px) right / 10px 100% no-repeat,
              repeating-linear-gradient(180deg, rgba(153,200,255,.9) 0 1px, transparent 1px 60px) right / 22px 100% no-repeat;
  background-position: right calc(var(--m, 0) * 12px), right calc(var(--m, 0) * 12px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); }
.ice-m { font-family: var(--mono); font-size: 15px; color: var(--azul-sel); font-variant-numeric: tabular-nums; letter-spacing: .02em; padding: 4px 9px; border-radius: 8px; background: rgba(4,16,31,.6); border: 1px solid rgba(153,200,255,.25); }

@media (max-width: 700px) {
  .js .iceberg:not(.parado) { height: 420vh; }
  .ice-prof { top: calc(var(--topo-h) + 16px); transform: none; }
  .ice-regua { display: none; }
  .ice-m { font-size: 13px; }
  .ice-cartao h3 { font-size: 24px; }
}

/* parado (movimento reduzido ou sem Motion): a foto e os cartões em grade */
.js .iceberg.parado .ice-pino { height: auto; min-height: 100svh; }
.js .iceberg.parado .ice-video { display: none; }