/* ==========================================================================
   Грид · Граждане и отделы — Живая анимация письма мазками (Disco Elysium)
   Художник Аватаров (Avatar Artist) · Модуль стилей живописи маслом
   Соответствует Закону Модульности (Статья XIX): файл < 800 строк
   ========================================================================== */

/* Контейнер холста в процессе написания */
.face-container.painting {
  background: radial-gradient(circle at 50% 40%, var(--card2) 0%, var(--bg) 100%);
  border: 1px solid var(--violet-alpha-40);
  box-shadow: inset 0 0 25px var(--black-alpha-80), 0 0 15px var(--violet-alpha-20);
  position: relative;
  overflow: hidden;
}

/* Арт-борд и холст */
.canvas-art-board {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Генеративный холст динамических масляных мазков */
.generative-oil-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}

/* Текстура льняного холста */
.canvas-texture {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(var(--white-alpha-04) 1px, transparent 1px),
    radial-gradient(var(--violet-alpha-04) 1px, transparent 1px);
  background-size: 8px 8px, 12px 12px;
  background-position: 0 0, 4px 4px;
  opacity: 0.85;
  pointer-events: none;
  animation: canvasPulse var(--dur-pulse) var(--ease-in-out) infinite alternate;
}

@keyframes canvasPulse {
  0% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.02); }
  100% { opacity: 0.7; transform: scale(1); }
}

/* Проступающий силуэт гражданина */
.oil-emerging-silhouette {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, var(--violet-alpha-30) 0%, var(--blue-alpha-15) 50%, transparent 70%);
  filter: blur(4px);
  animation: silhouetteEmerge var(--dur-pulse) var(--ease-in-out) infinite alternate;
  z-index: 1;
}

.oil-emerging-silhouette .silhouette-emoji {
  font-size: var(--fs-4xl);
  opacity: 0.55;
  filter: drop-shadow(0 0 12px var(--violet-alpha-80));
  animation: emojiFloat var(--dur-pulse) var(--ease-in-out) infinite alternate;
}

@keyframes silhouetteEmerge {
  0% { transform: scale(0.92); opacity: 0.4; filter: blur(6px); }
  50% { transform: scale(1.05); opacity: 0.75; filter: blur(3px); }
  100% { transform: scale(0.95); opacity: 0.5; filter: blur(5px); }
}

@keyframes emojiFloat {
  0% { transform: translateY(2px) rotate(-3deg); }
  100% { transform: translateY(-3px) rotate(3deg); }
}

/* Слои мазков масляной живописи (Disco Elysium brush strokes) */
.oil-brush-layer {
  position: absolute;
  pointer-events: none;
  border-radius: var(--r-brush);
  mix-blend-mode: screen;
  filter: blur(1px);
}

.oil-brush-layer.layer-1 {
  width: 140%;
  height: 38px;
  top: 18%;
  left: -20%;
  background: linear-gradient(90deg, transparent 0%, var(--amber-alpha-60) 30%, var(--red-alpha-70) 60%, transparent 100%);
  transform: rotate(-14deg);
  animation: strokeSwipe1 var(--dur-pulse) var(--ease-in-out) infinite;
}

.oil-brush-layer.layer-2 {
  width: 130%;
  height: 44px;
  bottom: 22%;
  right: -15%;
  background: linear-gradient(90deg, transparent 0%, var(--violet-alpha-70) 25%, var(--blue-alpha-80) 70%, transparent 100%);
  transform: rotate(18deg);
  animation: strokeSwipe2 var(--dur-pulse) var(--ease-in-out) infinite var(--dur-slow);
}

.oil-brush-layer.layer-3 {
  width: 90px;
  height: 90px;
  top: 30%;
  left: 20%;
  background: radial-gradient(circle, var(--purple-alpha-80) 0%, var(--pink-alpha-50) 50%, transparent 80%);
  transform: rotate(45deg);
  animation: strokeDab3 var(--dur-pulse) var(--ease-in-out) infinite var(--dur-normal);
}

.oil-brush-layer.layer-4 {
  width: 150%;
  height: 30px;
  top: 52%;
  left: -25%;
  background: linear-gradient(90deg, transparent 0%, var(--emerald-alpha-60) 35%, var(--blue-alpha-70) 65%, transparent 100%);
  transform: rotate(-8deg);
  animation: strokeSwipe4 var(--dur-pulse) var(--ease-in-out) infinite var(--dur-slow);
}

@keyframes strokeSwipe1 {
  0% { transform: translateX(-40%) rotate(-14deg); opacity: 0; }
  35% { opacity: 0.9; }
  70% { transform: translateX(20%) rotate(-10deg); opacity: 0.85; }
  100% { transform: translateX(50%) rotate(-6deg); opacity: 0; }
}

@keyframes strokeSwipe2 {
  0% { transform: translateX(40%) rotate(18deg); opacity: 0; }
  30% { opacity: 0.95; }
  65% { transform: translateX(-15%) rotate(14deg); opacity: 0.8; }
  100% { transform: translateX(-45%) rotate(10deg); opacity: 0; }
}

@keyframes strokeDab3 {
  0% { transform: scale(0.6) rotate(45deg); opacity: 0.2; }
  50% { transform: scale(1.15) rotate(55deg); opacity: 0.85; }
  100% { transform: scale(0.8) rotate(40deg); opacity: 0.3; }
}

@keyframes strokeSwipe4 {
  0% { transform: translateX(-35%) rotate(-8deg); opacity: 0; }
  40% { opacity: 0.8; }
  75% { transform: translateX(15%) rotate(-4deg); opacity: 0.75; }
  100% { transform: translateX(40%) rotate(0deg); opacity: 0; }
}

/* Мерцание свежего лака и масляного блика */
.canvas-glimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, var(--white-alpha-20) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: canvasGlimmer var(--dur-pulse) var(--ease-in-out) infinite;
  pointer-events: none;
  z-index: 2;
}

/* Контурный скользящий блик Linear/Elysium (Content-Preserving Shimmer Sweep) */
.face-container.painting::before,
.modal-face-box.painting::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--white-alpha-08) 45%,
    var(--violet-alpha-20) 50%,
    var(--white-alpha-08) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: paintingShimmerSweep var(--dur-pulse) linear infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes paintingShimmerSweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes canvasGlimmer {
  0% { transform: translateX(-120%) rotate(25deg); }
  60% { transform: translateX(140%) rotate(25deg); }
  100% { transform: translateX(140%) rotate(25deg); }
}

/* Плашка активного написания портрета */
.face-painting-badge {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  right: var(--sp-2);
  background: var(--bg-overlay-darker);
  border: 1px solid var(--violet-alpha-50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-md);
  padding: var(--sp-1-5) var(--sp-2-5);
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  z-index: 4;
  box-shadow: 0 4px 14px var(--black-alpha-60), 0 0 10px var(--violet-alpha-20);
  animation: badgeGlow var(--dur-pulse) var(--ease-in-out) infinite alternate;
}

@keyframes badgeGlow {
  0% { border-color: var(--violet-alpha-40); box-shadow: 0 4px 14px var(--black-alpha-60), 0 0 8px var(--violet-alpha-20); }
  100% { border-color: var(--pink-alpha-60); box-shadow: 0 4px 14px var(--black-alpha-60), 0 0 14px var(--pink-alpha-30); }
}

.face-painting-badge .painting-icon {
  font-size: var(--fs-body);
  animation: brushWiggle var(--dur-pulse) var(--ease-in-out) infinite;
  display: inline-block;
}

@keyframes brushWiggle {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-15deg) scale(1.1); }
  50% { transform: rotate(10deg) scale(1.15); }
  75% { transform: rotate(-8deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

.face-painting-badge .painting-text {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tx);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.face-painting-badge .painting-dots span {
  animation: dotBlink var(--dur-pulse) infinite;
  opacity: 0;
  color: var(--stage-8);
  font-weight: 700;
}
.face-painting-badge .painting-dots span:nth-child(1) { animation-delay: 0s; }
.face-painting-badge .painting-dots span:nth-child(2) { animation-delay: var(--dur-smooth); }
.face-painting-badge .painting-dots span:nth-child(3) { animation-delay: var(--dur-slow); }

@keyframes dotBlink {
  0% { opacity: 0; }
  40% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

/* Плавный crossfade при появлении готового портрета */
.face-img.face-ready {
  animation: portraitFadeIn var(--dur-slow) var(--ease-spring) forwards;
}

@keyframes portraitFadeIn {
  from {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Модальное окно — крупный блок холста */
.modal-face-box.painting {
  background: radial-gradient(circle at 50% 40%, var(--card2) 0%, var(--bg) 100%);
  border: 1px solid var(--violet-alpha-50);
  box-shadow: inset 0 0 30px var(--black-alpha-80), 0 0 20px var(--violet-alpha-30);
  position: relative;
  overflow: hidden;
}

.modal-face-box.painting .oil-emerging-silhouette {
  width: 110px;
  height: 110px;
}
.modal-face-box.painting .oil-emerging-silhouette .silhouette-emoji {
  font-size: var(--fs-4xl);
}

/* Плавный переход из процесса письма в готовый портрет */
.face-container.transitioning-to-ready {
  border-color: var(--amber-alpha-70);
  box-shadow: 0 0 24px var(--amber-alpha-40), inset 0 0 20px var(--violet-alpha-30);
  transition: all var(--dur-slow) var(--ease-out);
}

.face-container.transitioning-to-ready .canvas-art-board {
  animation: canvasDissolve var(--dur-slow) var(--ease-in-out) forwards;
}

.face-container.transitioning-to-ready .face-painting-badge {
  animation: badgeSlideOut var(--dur-slow) var(--ease-in-out) forwards;
}

.face-container.transitioning-to-ready .face-img.face-reveal {
  animation: portraitReveal var(--dur-slow) var(--ease-spring) forwards;
}

@keyframes canvasDissolve {
  0% { opacity: 1; filter: blur(0); transform: scale(1); }
  100% { opacity: 0; filter: blur(8px); transform: scale(1.06); pointer-events: none; }
}

@keyframes badgeSlideOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(14px); pointer-events: none; }
}

@keyframes portraitReveal {
  0% { opacity: 0; transform: scale(1.08); filter: blur(5px) brightness(1.25); }
  60% { filter: blur(1px) brightness(1.08); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}

/* Модальное окно — плавный переход */
.modal-face-box.transitioning-to-ready .canvas-art-board {
  animation: canvasDissolve var(--dur-slow) var(--ease-in-out) forwards;
}
.modal-face-box.transitioning-to-ready .face-painting-badge {
  animation: badgeSlideOut var(--dur-slow) var(--ease-in-out) forwards;
}
.modal-face-box.transitioning-to-ready .modal-face-img.face-reveal {
  animation: portraitReveal var(--dur-slow) var(--ease-spring) forwards;
}

/* Процедурный векторный аватар в стиле Disco Elysium */
.face-procedural-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-pure-canvas);
}

.face-procedural-fallback .procedural-avatar-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Светлая тема (Light Theme Overrides) ---------- */
html.light-theme .face-container.painting,
html.light-theme .modal-face-box.painting {
  background: radial-gradient(circle at 50% 40%, var(--card2) 0%, var(--bg2) 100%);
  border-color: var(--violet);
  box-shadow: inset 0 0 20px var(--violet-alpha-15), 0 0 12px var(--violet-alpha-20);
}

html.light-theme .face-painting-badge {
  background: var(--slate-900-alpha-90);
  border-color: var(--violet-alpha-50);
  color: var(--white);
}

html.light-theme .face-painting-badge .painting-text {
  color: var(--white);
}

/* ---------- Доступность (Accessibility / Prefers Reduced Motion) ---------- */
@media (prefers-reduced-motion: reduce) {
  .canvas-texture,
  .oil-emerging-silhouette,
  .oil-emerging-silhouette .silhouette-emoji,
  .oil-brush-layer,
  .canvas-glimmer,
  .face-container.painting::before,
  .modal-face-box.painting::before,
  .face-painting-badge,
  .face-painting-badge .painting-icon,
  .face-painting-badge .painting-dots span,
  .face-img.face-ready,
  .face-container.transitioning-to-ready .canvas-art-board,
  .face-container.transitioning-to-ready .face-painting-badge,
  .face-container.transitioning-to-ready .face-img.face-reveal,
  .modal-face-box.transitioning-to-ready .canvas-art-board,
  .modal-face-box.transitioning-to-ready .face-painting-badge,
  .modal-face-box.transitioning-to-ready .modal-face-img.face-reveal {
    animation: none !important;
    transition: none !important;
  }
}