/* ---------- Masthead navbar (Virtual Designer Market) ---------- */

.masthead {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.9rem, 3vw, 1.4rem) clamp(1.1rem, 4vw, 2.2rem);
  border-bottom: 1px solid rgba(244, 243, 239, 0.12);
  background: rgba(11, 11, 10, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 50;
  opacity: 0;
  transform: translateY(-8px);
  animation: mastheadIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 2.9s;
}

.masthead .wordmark {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(0.85rem, 2.6vw, 1rem);
  letter-spacing: 0.14em;
  color: rgba(244, 243, 239, 0.85);
}

.masthead a {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.66rem, 2vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 243, 239, 0.6);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color 0.3s ease;
}

.masthead a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #f4f3ef;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.masthead a:hover,
.masthead a:focus-visible {
  color: #f4f3ef;
}

.masthead a:hover::after,
.masthead a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

@keyframes mastheadIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .masthead {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}