/* Top identity banner — shared by the landing-page concepts.
   Explains the People Make Things, Inc. <-> Waltoa two-name situation, which is
   the name confusion that actually exists (see terms.html / privacy.html).
   Each page can override the three variables below to match its palette. */

.wt-banner{
  --wtb-bg:#241f18;
  --wtb-fg:#f3ece0;
  --wtb-accent:#d9a441;

  position:relative;
  background:var(--wtb-bg);
  color:var(--wtb-fg);
  font:500 13.5px/1.45 inherit;
  overflow:hidden;
  transform:translateY(-100%);
  animation:wtb-drop .55s cubic-bezier(.22,1,.36,1) .15s forwards;
}
@keyframes wtb-drop{ to{ transform:translateY(0); } }

/* slow light sweep across the bar */
.wt-banner::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    transparent 0%, transparent 38%,
    rgba(255,255,255,.10) 50%,
    transparent 62%, transparent 100%);
  transform:translateX(-100%);
  animation:wtb-sweep 6.5s ease-in-out 1.1s infinite;
  pointer-events:none;
}
@keyframes wtb-sweep{
  0%{ transform:translateX(-100%); }
  55%,100%{ transform:translateX(100%); }
}

.wt-banner .wtb-inner{
  max-width:1180px; margin:0 auto;
  padding:11px 46px 11px 26px;
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:nowrap; text-align:center;
}
.wt-banner .wtb-dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--wtb-accent);
  animation:wtb-pulse 2.4s ease-in-out infinite;
}
@keyframes wtb-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.45; transform:scale(.78); }
}
.wt-banner b{ font-weight:700; color:var(--wtb-accent); letter-spacing:.01em; }
.wt-banner a{ color:var(--wtb-fg); text-decoration:underline; text-underline-offset:2px; }
.wt-banner a:hover{ color:var(--wtb-accent); }

.wt-banner .wtb-close{
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; line-height:1;
  color:var(--wtb-fg); opacity:.55; font-size:19px; padding:4px 7px;
  font-family:inherit;
}
.wt-banner .wtb-close:hover{ opacity:1; }

@media (max-width:620px){
  .wt-banner{ font-size:13px; }
  .wt-banner .wtb-inner{ padding:10px 40px 10px 18px; }
}
@media (prefers-reduced-motion: reduce){
  .wt-banner{ transform:none; animation:none; }
  .wt-banner::after{ animation:none; opacity:0; }
  .wt-banner .wtb-dot{ animation:none; }
}