/*
 * NZC SVG Wavefield v2 — CSS-only
 * Long scalable curves for 4K / 5K / ultrawide screens.
 * No JavaScript, canvas or WebGL.
 */

:root {
  --nzc-bg: #071C24 ;
  --nzc-radial-a: rgba(38, 62, 72, .3) /* rgba(11, 38, 48, 0.18) */;
  --nzc-radial-b: rgba(22,99,90,.35) /* rgba(24, 51, 62, 0.20) */;
  --nzc-wave-opacity: 1;
  --nzc-wave-line-opacity: 1;
}

html {
  min-height: 100%;
  background-color: var(--nzc-bg);
  background-image:
    radial-gradient(circle at 14% 12%, var(--nzc-radial-a) 0, transparent 38%),
    radial-gradient(circle at 86% 78%, var(--nzc-radial-b) 0, transparent 44%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body {
  min-height: 100%;
  margin: 0;
  background: transparent;

  /*
   * Creates a local stacking context.
   * Without this, a fixed element with a negative z-index can fall behind
   * the root/html background and become completely invisible.
   */
  position: relative;
  isolation: isolate;
}

.nzc-wavefield {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;

  /*
   * Behind all normal body content, but still inside body's stacking context
   * and therefore above the html background.
   */
  z-index: -1;
}

.nzc-wavefield__svg {
  position: absolute;
  left: -12%;
  bottom: -5%;
  width: 124%;
  height: 96%;
  overflow: visible;
}

/* Outer groups: slow rocking / vertical drift / angle changes. */
.nzc-wave-layer {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

/* Inner paths: horizontal flow and subtle shape stretching. */
.nzc-wave {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.nzc-wave--fill {
  opacity: var(--nzc-wave-opacity);
}

.nzc-wave--line {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--nzc-wave-line-opacity);
}

/* Far oceanic base — longest and softest. */
.nzc-wave-layer--far {
  animation: nzc-rock-far 47s ease-in-out infinite alternate;
}
.nzc-wave--fill-far {
  animation:
    nzc-flow-far 43s ease-in-out infinite alternate,
    nzc-opacity-far 31s ease-in-out infinite alternate;
}

/* Mid wave — more active. */
.nzc-wave-layer--mid {
  animation: nzc-rock-mid 23s ease-in-out infinite alternate;
}
.nzc-wave--fill-mid {
  animation:
    nzc-flow-mid 17s ease-in-out infinite alternate,
    nzc-opacity-mid 13s ease-in-out infinite alternate;
}

/* Near wave — quickest full layer. */
.nzc-wave-layer--near {
  animation: nzc-rock-near 19s ease-in-out infinite alternate;
}
.nzc-wave--fill-near {
  animation:
    nzc-flow-near 11s ease-in-out infinite alternate,
    nzc-opacity-near 17s ease-in-out infinite alternate;
}

/* Three close reflection / data-flow lines. */
.nzc-wave-layer--line-a {
  animation: nzc-rock-line-a 17s ease-in-out infinite alternate;
}
.nzc-wave-layer--line-b {
  animation: nzc-rock-line-b 19s ease-in-out infinite alternate;
}
.nzc-wave-layer--line-c {
  animation: nzc-rock-line-c 23s ease-in-out infinite alternate;
}

.nzc-wave--line-a {
  stroke-width: 1px;
  animation:
    nzc-flow-line-a 7s ease-in-out infinite alternate,
    nzc-line-tone-a 11s ease-in-out infinite alternate;
}
.nzc-wave--line-b {
  stroke-width: 0.8px;
  animation:
    nzc-flow-line-b 9s ease-in-out infinite alternate,
    nzc-line-tone-b 13s ease-in-out infinite alternate;
}
.nzc-wave--line-c {
  stroke-width: 0.65px;
  animation:
    nzc-flow-line-c 11s ease-in-out infinite alternate,
    nzc-line-tone-c 17s ease-in-out infinite alternate;
}

@keyframes nzc-rock-far {
  from { transform: translate3d(-0.6%, 1.2%, 0) rotate(-0.18deg); }
  to   { transform: translate3d(0.8%, -1.3%, 0) rotate(0.22deg); }
}

@keyframes nzc-flow-far {
  from { transform: translate3d(-2.2%, 0, 0) scaleX(1.025) scaleY(0.97); }
  to   { transform: translate3d(2.1%, -0.4%, 0) scaleX(0.99) scaleY(1.035); }
}

@keyframes nzc-opacity-far {
  from { opacity: 0.52; }
  to   { opacity: 0.78; }
}

@keyframes nzc-rock-mid {
  from { transform: translate3d(0.5%, 1.4%, 0) rotate(0.34deg); }
  to   { transform: translate3d(-0.8%, -1.8%, 0) rotate(-0.42deg); }
}

@keyframes nzc-flow-mid {
  from { transform: translate3d(3.2%, 0.5%, 0) scaleX(0.985) scaleY(0.94); }
  to   { transform: translate3d(-3.4%, -0.7%, 0) scaleX(1.035) scaleY(1.075); }
}

@keyframes nzc-opacity-mid {
  from { opacity: 0.48; }
  to   { opacity: 0.88; }
}

@keyframes nzc-rock-near {
  from { transform: translate3d(-0.7%, 1.7%, 0) rotate(-0.48deg); }
  to   { transform: translate3d(0.9%, -1.6%, 0) rotate(0.56deg); }
}

@keyframes nzc-flow-near {
  from { transform: translate3d(-4.2%, 0.6%, 0) scaleX(1.04) scaleY(0.91); }
  to   { transform: translate3d(4.4%, -0.8%, 0) scaleX(0.98) scaleY(1.095); }
}

@keyframes nzc-opacity-near {
  from { opacity: 0.36; }
  to   { opacity: 0.76; }
}

@keyframes nzc-rock-line-a {
  from { transform: translate3d(-0.4%, 0.8%, 0) rotate(-0.3deg); }
  to   { transform: translate3d(0.5%, -0.7%, 0) rotate(0.35deg); }
}

@keyframes nzc-rock-line-b {
  from { transform: translate3d(0.5%, 0.5%, 0) rotate(0.24deg); }
  to   { transform: translate3d(-0.6%, -0.9%, 0) rotate(-0.3deg); }
}

@keyframes nzc-rock-line-c {
  from { transform: translate3d(-0.3%, 0.9%, 0) rotate(-0.2deg); }
  to   { transform: translate3d(0.7%, -0.5%, 0) rotate(0.27deg); }
}

@keyframes nzc-flow-line-a {
  from { transform: translate3d(-5.5%, 0, 0) scaleX(1.03) scaleY(0.96); }
  to   { transform: translate3d(5.5%, -0.35%, 0) scaleX(0.985) scaleY(1.04); }
}

@keyframes nzc-flow-line-b {
  from { transform: translate3d(5%, 0.25%, 0) scaleX(0.99) scaleY(1.025); }
  to   { transform: translate3d(-5.2%, -0.2%, 0) scaleX(1.035) scaleY(0.97); }
}

@keyframes nzc-flow-line-c {
  from { transform: translate3d(-4.4%, -0.15%, 0) scaleX(1.025) scaleY(0.98); }
  to   { transform: translate3d(4.8%, 0.3%, 0) scaleX(0.99) scaleY(1.035); }
}

/* Colour shifts are achieved by crossfading gradient stops through opacity,
   avoiding animated filters and expensive repaint-heavy effects. */
@keyframes nzc-line-tone-a {
  from { opacity: 0.34; }
  to   { opacity: 0.92; }
}
@keyframes nzc-line-tone-b {
  from { opacity: 0.24; }
  to   { opacity: 0.72; }
}
@keyframes nzc-line-tone-c {
  from { opacity: 0.18; }
  to   { opacity: 0.58; }
}

@media (min-aspect-ratio: 21 / 9) {
  .nzc-wavefield__svg {
    left: -7%;
    width: 114%;
    height: 90%;
  }
}

@media (max-aspect-ratio: 4 / 3) {
  .nzc-wavefield__svg {
    left: -42%;
    width: 184%;
    height: 88%;
  }
}

/* Manual low-power mode. */
html.nzc-wavefield-lite .nzc-wave-layer--near,
html.nzc-wavefield-lite .nzc-wave-layer--line-c {
  display: none;
}

html.nzc-wavefield-lite .nzc-wave-layer,
html.nzc-wavefield-lite .nzc-wave {
  animation-duration: 37s;
}

@media (max-width: 782px) {
  /*
   * Mobile browsers handle a fixed background on the root element
   * inconsistently. Keep the colour composition inside the same fixed,
   * viewport-sized layer as the SVG instead.
   */
  html {
    background-image: none;
  }

  .nzc-wavefield::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse 110% 78% at 5% 14%,
        var(--nzc-radial-a) 0,
        transparent 68%
      ),
      radial-gradient(
        ellipse 120% 88% at 95% 84%,
        var(--nzc-radial-b) 0,
        transparent 72%
      );
  }

  .nzc-wavefield__svg {
    left: -58%;
    width: 216%;
    height: 78%;
  }

  .nzc-wave-layer--near,
  .nzc-wave-layer--line-c {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nzc-wave-layer,
  .nzc-wave {
    animation: none !important;
  }
}