/* Entire map section is clean and edge-to-edge */
#map-area {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;

  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#map-area.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Full width wrapper */
.map-frame-wrap {
  position: relative;
  width: 100%;
  height: 420px;          /* adjustable worldwide map height */
  overflow: hidden;
}

/* Embed map */
.tenmet-map-iframe {
  border: none;
  width: 100%;
  height: 100%;
  display: block;
}

/* Wave overlay */
.map-wave-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(circle at 0% 120%, rgba(14, 117, 194, 0.12) 0, transparent 55%),
    radial-gradient(circle at 100% -20%, rgba(75, 180, 230, 0.15) 0, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='160' height='80' viewBox='0 0 160 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40 Q40 20 80 40 T160 40 V80 H0 Z' fill='rgba(14,117,194,0.16)'/%3E%3C/svg%3E");

  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left bottom, right top, 0 100%;
  background-size: 50% 50%, 45% 45%, 260px 130px;

  animation: waveSlide 16s linear infinite;
  opacity: 0.75;
}

@keyframes waveSlide {
  0%   { background-position: left bottom, right top,   0 100%; }
  50%  { background-position: left 20% bottom, right 10% top, -130px 100%; }
  100% { background-position: left bottom, right top,   0 100%; }
}

/* Responsive */
@media (max-width: 680px) {
  .map-frame-wrap {
    height: 320px;
  }
}
@media (max-width: 480px) {
  .map-frame-wrap {
    height: 260px;
  }
}