.mosaic-header {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Playfair Display', serif;
}

.mosaic-header .overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
  z-index: 2;
}

.mosaic-header .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 3s ease;
}

.mosaic-header .layer.sketch {
  filter: grayscale(100%) contrast(1.3) brightness(0.9);
  opacity: 1;
  animation: fadeInColor 6s ease forwards;
}

.mosaic-header .layer.color {
  opacity: 0;
  animation: fadeInColor 6s ease 1.5s forwards;
}

@keyframes fadeInColor {
  to { opacity: 1; }
}

.mosaic-header .title {
  position: relative;
  z-index: 3;
  text-align: center;
  animation: slideUp 2s ease 1.2s forwards;
  opacity: 0;
}

.mosaic-header h1 {
  font-size: 3.2rem;
  margin: 0;
}

.mosaic-header p {
  font-size: 1.5rem;
  margin-top: 0.5rem;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(-10px);
  }
}