/*
 * IFC — Etapa 2 (v3): underwater aplicado ao contêiner real do tema.
 * Usa .footers-container existente, sem criar wrappers ou reposicionar regiões.
 */

:root {
  /* Cores */
  --ifc-ocean-top-color: #122b43;
  --ifc-ocean-bottom-color: #010711;
  --ifc-ocean-back-color: rgba(3, 26, 37, 0.48);
  --ifc-wave-line-color: rgba(56, 191, 248, 0.43);

  /* Velocidades */
  --ifc-wave-front-speed: 30s;
  --ifc-wave-back-speed: 40s;

  /* Comprimento horizontal de um ciclo completo */
  --ifc-wave-length: 300px;

  /* Distância do meio da onda até a crista ou o vale */
  --ifc-wave-amplitude: 12px;

  /* Espessura real do traço */
  --ifc-wave-line-stroke-width: 2px;

  /* Valor derivado; não precisa ser editado */
  --ifc-wave-height: calc(
    var(--ifc-wave-amplitude) + var(--ifc-wave-amplitude)
  );
}

/*
 * O JS adiciona a classe diretamente ao .footers-container existente.
 * isolation mantém a camada atrás do conteúdo, dentro do contêiner.
 */
body.ifc-has-site-sky .footers-container.ifc-underwater-shell {
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-width: 0;
  background: transparent !important;
}

/* Alinha o meio da onda à borda superior do contêiner. */
#ifc-underwater-layer {
  position: absolute;
  z-index: -1;
  top: calc(0px - var(--ifc-wave-amplitude));
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

#ifc-underwater-layer .ifc-underwater__back,
#ifc-underwater-layer .ifc-underwater__water,
#ifc-underwater-layer .ifc-underwater__edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Onda traseira: movimento horizontal oposto à onda da frente. */
#ifc-underwater-layer .ifc-underwater__back {
  top: calc(var(--ifc-wave-height) - 1px);
  background: var(--ifc-ocean-back-color);
}

#ifc-underwater-layer .ifc-underwater__back::before {
  content: "";
  position: absolute;
  top: calc(1px - var(--ifc-wave-height));
  right: 0;
  left: 0;
  height: var(--ifc-wave-height);
  background: inherit;

  -webkit-mask-image: var(--ifc-wave-mask);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: var(--ifc-wave-length) var(--ifc-wave-height);
  -webkit-mask-position: 0px 0px;

  mask-image: var(--ifc-wave-mask);
  mask-repeat: repeat-x;
  mask-size: var(--ifc-wave-length) var(--ifc-wave-height);
  mask-position: 0px 0px;

  animation: ifc-ocean-wave-back var(--ifc-wave-back-speed) linear infinite;
}

/* Preenchimento contínuo da água principal. */
#ifc-underwater-layer .ifc-underwater__water {
  top: calc(var(--ifc-wave-height) - 1px);
  background: linear-gradient(
    180deg,
    var(--ifc-ocean-top-color) 0%,
    #082034 38%,
    var(--ifc-ocean-bottom-color) 100%
  );
}

#ifc-underwater-layer .ifc-underwater__water::before {
  content: "";
  position: absolute;
  top: calc(1px - var(--ifc-wave-height));
  right: 0;
  left: 0;
  height: var(--ifc-wave-height);
  background: var(--ifc-ocean-top-color);

  -webkit-mask-image: var(--ifc-wave-mask);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: var(--ifc-wave-length) var(--ifc-wave-height);
  -webkit-mask-position: 0px 0px;

  mask-image: var(--ifc-wave-mask);
  mask-repeat: repeat-x;
  mask-size: var(--ifc-wave-length) var(--ifc-wave-height);
  mask-position: 0px 0px;

  animation: ifc-ocean-wave-front var(--ifc-wave-front-speed) linear infinite;
}

/* Contorno da onda da frente. */
#ifc-underwater-layer .ifc-underwater__edge {
  background: var(--ifc-wave-line-color);

  -webkit-mask-image: var(--ifc-wave-edge-mask);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: var(--ifc-wave-length) var(--ifc-wave-height);
  -webkit-mask-position: 0px 0px;

  mask-image: var(--ifc-wave-edge-mask);
  mask-repeat: repeat-x;
  mask-size: var(--ifc-wave-length) var(--ifc-wave-height);
  mask-position: 0px 0px;

  animation: ifc-ocean-wave-front var(--ifc-wave-front-speed) linear infinite;
}

/*
 * Estes são os dois filhos diretos de .footers-container no HTML do tema.
 * Seus fundos precisam ser transparentes para revelar o oceano.
 */
body.ifc-has-site-sky .footers-container > #footer,
body.ifc-has-site-sky .footers-container > #subfooter-top {
  background-color: transparent !important;
  background-image: none !important;
}

/* Frente: movimento horizontal para a esquerda. */
@keyframes ifc-ocean-wave-front {
  from {
    -webkit-mask-position: 0px 0px;
    mask-position: 0px 0px;
  }

  to {
    -webkit-mask-position: calc(0px - var(--ifc-wave-length)) 0px;
    mask-position: calc(0px - var(--ifc-wave-length)) 0px;
  }
}

/* Fundo: movimento horizontal oposto, sem animação vertical. */
@keyframes ifc-ocean-wave-back {
  from {
    -webkit-mask-position: calc(0px - var(--ifc-wave-length)) 0px;
    mask-position: calc(0px - var(--ifc-wave-length)) 0px;
  }

  to {
    -webkit-mask-position: 0px 0px;
    mask-position: 0px 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ifc-underwater-layer .ifc-underwater__back::before,
  #ifc-underwater-layer .ifc-underwater__water::before,
  #ifc-underwater-layer .ifc-underwater__edge {
    animation: none;
  }
}