.wave-canvas-section {
  width: 100%;
  overflow: hidden;
}

.wave-canvas-section .page-width {
  position: relative;
}

.wave-canvas {
  width: 100%;
  max-width: 1200px;
  height: var(--wave-canvas-height, 360px);
  display: block;
  margin: 0 auto;
  
  /* Fade mask on sides */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 120px,
    black calc(100% - 120px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 120px,
    black calc(100% - 120px),
    transparent 100%
  );
}

@media screen and (max-width: 749px) {
  .wave-canvas {
    height: var(--wave-canvas-height-mobile, 500px);
    
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 60px,
      black calc(100% - 60px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 60px,
      black calc(100% - 60px),
      transparent 100%
    );
  }
}

/* Wave text overlay */
.wave-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  font-size: clamp(2.2rem, 6.5vw, 7rem);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: rgb(var(--color-foreground));
  white-space: nowrap;
  text-align: center;
  z-index: 2;
  transition: opacity 0.1s ease;
}

@media screen and (max-width: 749px) {
  .wave-text {
    font-size: var(--wave-text-size-mobile, 3.5rem);
    white-space: normal;
    word-break: break-word;
    max-width: 85vw;
    text-align: center;
  }
}

.wave-text__light {
  font-weight: 300;
}

.wave-text__bold {
  font-weight: 700;
}

/* Section padding */
.section-template--padding {
  padding-top: 200px;
  padding-bottom: 10px;
}

@media screen and (min-width: 750px) {
  .section-template--padding {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}


/* Overlay card styled like testimonials */
.wave-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(12px) scale(0.92);
  opacity: 0;
  pointer-events: none;
  width: 100%;
  max-width: var(--wave-card-max-width, 420px);
  text-align: center;
  transition: backdrop-filter 300ms ease, box-shadow 300ms ease, transform 240ms ease, opacity 240ms ease, border-color 300ms ease;

  /* Скопировано со стиля .input-card (Fulfillment) */
  position: absolute;
  overflow: hidden;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, calc(var(--button-glass-opacity) * 1.8)), 
    rgba(255, 255, 255, calc(var(--button-glass-opacity) * 1.2))
  );
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1.6rem;
  padding: 1.2rem 1.8rem 1.4rem 1.8rem;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.10), 
              0px 2px 4px 0px rgba(0, 0, 0, 0.08),
              inset 0px 1px 0px rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(calc(var(--button-glass-blur) * 1.5));
  -webkit-backdrop-filter: blur(calc(var(--button-glass-blur) * 1.5));
}

.wave-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 32%;
  height: 32%;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  border-top-left-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  transition: border-width 300ms ease, opacity 300ms ease;
}

.wave-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
  background: linear-gradient(135deg, 
    rgba(var(--button-glass-shine-color), calc(var(--button-glass-shine-opacity) * 1.5)) 0%, 
    rgba(var(--button-glass-shine-color), calc(var(--button-glass-shine-opacity) * 0.8)) 30%,
    transparent 60%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
  transition: opacity 300ms ease;
}

.wave-canvas-section:hover .wave-card {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px) scale(0.92);
  backdrop-filter: blur(calc(var(--button-glass-blur) * 2));
  -webkit-backdrop-filter: blur(calc(var(--button-glass-blur) * 2));
  box-shadow: 0px 9px 22px 0px rgba(0, 0, 0, 0.14), 
              0px 3px 8px 0px rgba(0, 0, 0, 0.10),
              inset 0px 1px 0px rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.3);
}

.wave-canvas-section:hover .wave-card::before {
  border-top-width: 3px;
  border-left-width: 3px;
  opacity: 1;
}

.wave-canvas-section:hover .wave-card::after {
  opacity: 1;
  background: linear-gradient(135deg, 
    rgba(var(--button-glass-shine-color), calc(var(--button-glass-shine-opacity) * 2)) 0%, 
    rgba(var(--button-glass-shine-color), var(--button-glass-shine-opacity)) 30%,
    transparent 60%
  );
}

@media screen and (max-width: 749px) {
  .wave-card {
    max-width: var(--wave-card-max-width-mobile, 320px);
  }
}