/* Inner-page header with the decorative waveform. */

.phead {
  padding: clamp(48px, 7vw, 96px) 0 clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;

  & .container {
    position: relative;
    z-index: 1;
  }

  & h1 {
    max-width: 18ch;
  }
}

.phead__rooms {
  margin-left: 0.5em;
}

.phead .wave {
  display: block;
  width: 70%;
  height: 56px;
  margin: 18px var(--gutter) 0 auto;
  color: var(--accent);
  opacity: 0.4;
  pointer-events: none;
}

@media (min-width: 768px) {
  .phead .wave {
    position: absolute;
    right: var(--gutter);
    bottom: -1px;
    width: min(46%, 520px);
    height: 120px;
    margin: 0;
    opacity: 0.5;
  }
}

/* waveform draws itself in once revealed */
.wave path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.js .rv .wave path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s cubic-bezier(0.3, 0.6, 0.2, 1) 0.2s;
}

.js .rv.in .wave path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js .rv .wave path {
    stroke-dashoffset: 0;
  }
}