/* yunji/css/visual.css — Three-layer visual: watercolor wash + kanji totem + SVG icon */

/* ══════════ Project Visual Container ══════════ */
.proj-vis {
  border-radius: var(--r-visual);
  min-height: 340px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════ Layer 1: Watercolor Wash ══════════ */
.proj-vis .wash {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}

/* ══════════ Layer 2+3: Kanji + SVG Group ══════════ */
.icon-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-group .kanji {
  font-family: var(--ff-serif);
  font-weight: var(--fw-thin);
  font-size: 160px;
  line-height: 1;
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
  display: block;
}

.icon-group .icon-svg {
  position: absolute;
  bottom: -26px;
  right: -22px;
  width: 88px;
  height: 88px;
  opacity: 0.35;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.1;
}

/* ══════════ Hero Background Grain ══════════ */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: multiply;
}