/* Homepage-only 3D wave layer.
   It deliberately uses just two transformed visual sheets so the hero feels
   alive without reintroducing the heavy canvas, particle, or filter effects
   that previously caused lag on phones. */
.signature-hero .wave-field {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  isolation: isolate;
}

.signature-hero .wave-field::before,
.signature-hero .wave-field::after {
  content: "";
  position: absolute;
  width: 118%;
  height: 84%;
  left: -9%;
  border-radius: 48% 52% 43% 57% / 54% 39% 61% 46%;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
}

/* The nearer sheet is a chrome-blue ribbon with a thin illuminated edge. */
.signature-hero .wave-field::before {
  top: 28%;
  border: 1px solid rgba(152, 223, 255, .25);
  background:
    linear-gradient(104deg,
      rgba(4, 12, 22, 0) 0%,
      rgba(16, 92, 140, .08) 27%,
      rgba(120, 214, 255, .24) 47%,
      rgba(13, 61, 100, .12) 65%,
      rgba(2, 8, 14, 0) 100%);
  box-shadow:
    inset 0 1px 0 rgba(221, 247, 255, .18),
    0 -1px 28px rgba(64, 181, 244, .09),
    0 24px 55px rgba(0, 0, 0, .26);
  transform: perspective(920px) rotateX(62deg) rotateZ(-8deg) translate3d(-1%, 6%, 0);
  animation: ace-wave-near 18s ease-in-out infinite alternate;
}

/* A wider, darker sheet behind it supplies depth rather than a busy pattern. */
.signature-hero .wave-field::after {
  top: -20%;
  width: 132%;
  left: -16%;
  border: 1px solid rgba(85, 167, 220, .13);
  background:
    radial-gradient(ellipse at 52% 46%, rgba(128, 221, 255, .12), transparent 34%),
    linear-gradient(76deg,
      rgba(2, 6, 11, 0) 8%,
      rgba(19, 64, 98, .18) 39%,
      rgba(82, 181, 235, .12) 54%,
      rgba(2, 7, 13, 0) 86%);
  box-shadow: inset 0 -1px 0 rgba(206, 242, 255, .12);
  transform: perspective(1100px) rotateX(68deg) rotateZ(12deg) translate3d(2%, -3%, 0);
  animation: ace-wave-far 26s ease-in-out infinite alternate;
}

@keyframes ace-wave-near {
  from { transform: perspective(920px) rotateX(62deg) rotateZ(-8deg) translate3d(-2%, 5%, 0) scale(1.01); }
  to { transform: perspective(920px) rotateX(58deg) rotateZ(-3deg) translate3d(2%, -2%, 0) scale(1.05); }
}

@keyframes ace-wave-far {
  from { transform: perspective(1100px) rotateX(68deg) rotateZ(12deg) translate3d(2%, -3%, 0) scale(1); }
  to { transform: perspective(1100px) rotateX(64deg) rotateZ(7deg) translate3d(-2%, 3%, 0) scale(1.04); }
}

/* Keep the existing hero layers above the decorative waves without changing
   any of their established positioning rules. */
.signature-hero > .eyebrow,
.signature-hero > .hero-copy,
.signature-hero > .lightshow-keyboard,
.signature-hero > .hero-mark,
.signature-hero > .scroll-note,
.signature-hero > .hero-journey-copy,
.signature-hero > .signature-pen-stage {
  z-index: 2;
}

@media (max-width: 750px) {
  .signature-hero .wave-field::before {
    width: 155%;
    left: -28%;
    top: 36%;
    opacity: .82;
    animation-duration: 24s;
  }

  .signature-hero .wave-field::after {
    width: 170%;
    left: -35%;
    top: -12%;
    opacity: .72;
    animation-duration: 32s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature-hero .wave-field::before,
  .signature-hero .wave-field::after { animation: none; }
}