/* =========================================
   Profile Hero Avatar Overlap (Mobile)
   ========================================= */

/* Wrapper for hero + profile */
.profile-hero-wrap {
  position: relative;
}

/* Mobile avatar positioning */
.profile-avatar {
  position: absolute;
  left: 50%;
  top: calc(1% - 140px); /* half of 144px avatar */
  transform: translateX(-50%);
  z-index: 10;
}

/* Reset avatar positioning on large screens */
@media (min-width: 1024px) {
  .profile-avatar {
    position: static;
    transform: none;
  }
}

/* Push content down on mobile so it clears avatar */
.profile-content {
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .profile-content {
    margin-top: 0;
  }
}
.profile-avatar img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* =========================================
   Explore Cards
   ========================================= */
/* Fuzz-card container */
.fuzz-card {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  cursor: pointer;
  background-color: #000;
}

/* Inner wrapper for aspect ratio */
.fuzz-card-inner {
  position: relative;
  width: 100%;
  padding-top: 66.6667%; /* 2:3 aspect ratio */
}

/* Image */
.fuzz-card-inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: blur(0);
}

/* Dark overlay */
.fuzz-card-dark {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* Hover text overlay */
.fuzz-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  padding: 0 1rem;
}

/* Text content max width */
.fuzz-card-overlay div {
  max-width: 90%;
}

/* Hover effects */
.fuzz-card:hover img {
  filter: blur(6px);
  transform: scale(1.05);
}

.fuzz-card:hover .fuzz-card-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Text container inside overlay */
.fuzz-card .fuzz-card-overlay div {
  max-width: 90%;
}

/* Hover effect */
.fuzz-card:hover img {
  filter: blur(6px);
  opacity: .7;
  background-color: rgba(0,0,0,0.8);
  transform: scale(1.05);
}

.fuzz-card:hover .fuzz-card-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
.fuzz-card[data-variant="soft"] img {
  --blur: 4px;
  --scale: 1.03;
}

.fuzz-card[data-variant="strong"] img {
  --blur: 10px;
  --scale: 1.08;
}

/* Optional mobile fallback */
@media (hover: none) {
  .fuzz-card .fuzz-card-overlay {
    opacity: 1 !important;
    transform: none !important;
  }
  .fuzz-card img {
    filter: none !important;
  }
}