/* Logo waves: one component for the menu overlay (script.js, html.nav-waves) and the page transition
   main <-> menu (bands.js, html.page-bands). Five full-screen layers in the overlay's colours (ochre,
   charcoal, ochre, charcoal, ivory), each topped with the logo band's wavy edge. Adding .is-on rolls
   them up from below one after another until the ivory one covers the screen; removing it rolls them
   back down, ivory first. Either way can be reversed at any moment (plain CSS transitions).
   transform only, one easing, 780ms per layer, 70ms apart (about 1060ms in all).
   Shared by index.html and menu.html: self-contained tokens, nothing taken from styles.css/menu.css. */
.waves {
  --w-ochre: #B39A57;
  --w-charcoal: #2C2B29;
  --w-ivory: #F1EBE1;
  --w-ink: #0E0E0D;
  --w-ease: cubic-bezier(.65, 0, .35, 1);
  --w-wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V5C66 1 34 9 0 4Z'/%3E%3C/svg%3E");
  --w-wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V4C66 9 34 1 0 5Z'/%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* idle (script sets hidden once a roll has ended): out of the page entirely */
.waves[hidden] { display: none; }
.waves i {
  position: absolute;
  inset: 0;
  /* each layer is its own stacking context, so its gap line (below) sits under its own edge only */
  z-index: 0;
  background: var(--w-ochre);
  transform: translate3d(0, calc(100% + 11vh), 0);
  transition: transform 780ms var(--w-ease) calc(160ms + var(--r) * 70ms);
}
/* the wavy edge: the logo band's curve flipped so the wave is on top */
.waves i::before, .waves i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: 10vh;
  -webkit-mask: var(--w-wave-a) 0 0 / 100% 100% no-repeat;
  mask: var(--w-wave-a) 0 0 / 100% 100% no-repeat;
}
.waves i::before { background: inherit; transform: scaleY(-1); }
.waves i::after { display: none; }
.waves i:nth-child(even)::before, .waves i:nth-child(even)::after { -webkit-mask-image: var(--w-wave-b); mask-image: var(--w-wave-b); }
.waves i:nth-child(1) { --i: 0; --r: 4; }
.waves i:nth-child(2) { --i: 1; --r: 3; background: var(--w-charcoal); }
.waves i:nth-child(3) { --i: 2; --r: 2; }
.waves i:nth-child(4) { --i: 3; --r: 1; background: var(--w-charcoal); }
.waves i:nth-child(5) { --i: 4; --r: 0; background: var(--w-ivory); }
.waves.is-on i {
  transform: none;
  transition-delay: calc(var(--i) * 70ms);
}
.waves.is-moving i { will-change: transform; }
/* placed already covering, with no transition (an arriving page) */
.waves.is-set i { transition: none; }

/* (2) Separate bands like the logo (html.waves-gaps; remove the class for joined waves): each wave
   carries a thin dark line along its own edge, the same curve drawn 5px higher in basalt and laid
   under the coloured edge, so a dark gap shows between neighbouring bands while they move. */
.waves-gaps .waves i::after {
  display: block;
  z-index: -1;
  background: var(--w-ink);
  transform: translateY(-5px) scaleY(-1);
}

@media (prefers-reduced-motion: reduce) {
  /* a plain fade instead of the rolling waves */
  .waves i { transform: none !important; transition: none !important; }
  .waves { opacity: 0; transition: opacity 300ms linear !important; }
  .waves.is-on { opacity: 1; }
  .waves.is-set { transition: none !important; }
}