/* Живой портрет — база + персонажные эффекты (dossier psyche block) */

.portrait-live {
  --portrait-accent: #d6a34e;
  --portrait-glow: rgba(214, 163, 78, 0.22);
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

.portrait-live__stage {
  position: relative;
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transition: transform 0.45s ease;
  will-change: transform;
}

.portrait-live__stage img {
  display: block;
  width: 100%;
  transform-origin: 50% 55%;
  animation: portrait-breathe 7s ease-in-out infinite;
}

.portrait-live__scan {
  position: absolute;
  z-index: 4;
  left: 4%;
  right: 4%;
  height: 1px;
  top: 8%;
  background: linear-gradient(90deg, transparent, var(--portrait-accent), transparent);
  box-shadow: 0 0 14px var(--portrait-glow);
  opacity: 0;
  pointer-events: none;
}

.portrait-live--inview .portrait-live__scan {
  animation: portrait-scan 7.5s ease-in-out infinite;
}

.portrait-live__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 78% 58% at 50% 42%, var(--portrait-glow), transparent 72%);
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: portrait-glow-pulse 7s ease-in-out infinite;
}

.portrait-live__fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* —— Персонажные акценты —— */

.portrait-live[data-portrait="gard"] {
  --portrait-accent: #d6a34e;
  --portrait-glow: rgba(214, 163, 78, 0.24);
}

.portrait-live[data-portrait="gard"] .portrait-live__fx {
  opacity: 0.12;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px);
  animation: portrait-grain 9s steps(6) infinite;
}

.portrait-live[data-portrait="garm"] {
  --portrait-accent: #b498ff;
  --portrait-glow: rgba(139, 108, 240, 0.32);
}

.portrait-live[data-portrait="garm"] .portrait-live__fx {
  background:
    radial-gradient(ellipse 38% 16% at 36% 24%, rgba(180, 152, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 38% 16% at 64% 24%, rgba(180, 152, 255, 0.55), transparent 70%);
  animation: portrait-fear-pulse 4.2s ease-in-out infinite;
}

.portrait-live[data-portrait="ken-ken"] {
  --portrait-accent: #c9a0ff;
  --portrait-glow: rgba(185, 140, 255, 0.28);
}

.portrait-live[data-portrait="ken-ken"] .portrait-live__fx {
  background: linear-gradient(115deg, transparent 42%, rgba(185, 140, 255, 0.14) 50%, transparent 58%);
  opacity: 0;
}

.portrait-live[data-portrait="kli-kli"] {
  --portrait-accent: #d4a24a;
  --portrait-glow: rgba(212, 162, 74, 0.22);
}

.portrait-live[data-portrait="kli-kli"] .portrait-live__fx {
  background: repeating-linear-gradient(
    180deg,
    transparent 0 14px,
    rgba(212, 162, 74, 0.05) 14px 15px
  );
  animation: portrait-scroll-drift 14s linear infinite;
}

.portrait-live[data-portrait="red-rag"] {
  --portrait-accent: #e04a3a;
  --portrait-glow: rgba(224, 74, 58, 0.28);
  animation: portrait-ring-frame 3.6s ease-in-out infinite;
}

.portrait-live[data-portrait="arash"] {
  --portrait-accent: #1f9d72;
  --portrait-glow: rgba(31, 157, 114, 0.26);
}

.portrait-live[data-portrait="arash"] .portrait-live__fx {
  background:
    radial-gradient(ellipse 130% 45% at 50% 105%, rgba(31, 157, 114, 0.28), transparent 62%),
    radial-gradient(circle at 30% 80%, rgba(64, 196, 160, 0.12) 0 8%, transparent 9%),
    radial-gradient(circle at 70% 88%, rgba(64, 196, 160, 0.1) 0 6%, transparent 7%);
  animation: portrait-water 5.5s ease-in-out infinite;
}

.portrait-live[data-portrait="taiko"] {
  --portrait-accent: #e8a040;
  --portrait-glow: rgba(232, 160, 64, 0.26);
}

.portrait-live[data-portrait="tetsu"] {
  --portrait-accent: #c45c5c;
  --portrait-glow: rgba(196, 92, 92, 0.24);
}

.portrait-live[data-portrait="zogan"] {
  --portrait-accent: #d4882a;
  --portrait-glow: rgba(212, 136, 42, 0.22);
}

.portrait-live[data-portrait="u-sen"] {
  --portrait-accent: #c9a84a;
  --portrait-glow: rgba(201, 168, 74, 0.26);
}

.portrait-live[data-portrait="u-sen"] .portrait-live__fx {
  background:
    radial-gradient(circle at 22% 38%, rgba(201, 168, 74, 0.18) 0 9%, transparent 10%),
    radial-gradient(circle at 78% 38%, rgba(201, 168, 74, 0.18) 0 9%, transparent 10%),
    repeating-linear-gradient(
      180deg,
      transparent 0 16px,
      rgba(201, 168, 74, 0.05) 16px 17px
    );
  animation: portrait-scroll-drift 16s linear infinite;
}

.portrait-live[data-portrait="taiko"] .portrait-live__fx,
.portrait-live[data-portrait="tetsu"] .portrait-live__fx {
  background: linear-gradient(0deg, rgba(255, 110, 50, 0.22) 0%, transparent 48%);
  animation: portrait-heat 4.5s ease-in-out infinite;
}

/* Усиление на hover (только устройства с мышью) */
@media (hover: hover) and (pointer: fine) {
  .portrait-live[data-portrait="arash"]:hover .portrait-live__stage img {
    filter: url(#portrait-ripple) saturate(1.06);
  }

  .portrait-live[data-portrait="ken-ken"]:hover .portrait-live__stage img {
    animation: portrait-breathe 7s ease-in-out infinite, portrait-glitch-shift 0.12s steps(2) infinite;
  }

  .portrait-live[data-portrait="ken-ken"]:hover .portrait-live__fx {
    opacity: 0.85;
    animation: portrait-chaos-sweep 1.2s linear infinite;
  }

  .portrait-live[data-portrait="garm"]:hover .portrait-live__fx {
    animation-duration: 2.2s;
  }

  .portrait-live[data-portrait="red-rag"]:hover {
    animation-duration: 1.8s;
  }
}

/* —— Keyframes —— */

@keyframes portrait-breathe {
  0%, 100% {
    transform: scale(1);
    filter: saturate(0.92);
  }
  50% {
    transform: scale(1.014);
    filter: saturate(1);
  }
}

@keyframes portrait-scan {
  0%, 18%, 100% {
    top: 10%;
    opacity: 0;
  }
  22% {
    opacity: 0.75;
  }
  55% {
    top: 88%;
    opacity: 0.55;
  }
  70% {
    opacity: 0;
  }
}

@keyframes portrait-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.72; }
}

@keyframes portrait-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes portrait-fear-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.95; }
}

@keyframes portrait-scroll-drift {
  0% { background-position: 0 0; }
  100% { background-position: 0 120px; }
}

@keyframes portrait-water {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.65;
  }
  50% {
    transform: translateY(-3px) scale(1.02);
    opacity: 1;
  }
}

@keyframes portrait-heat {
  0%, 100% {
    opacity: 0.45;
    transform: translateY(4px);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-2px);
  }
}

@keyframes portrait-ring-frame {
  0%, 100% {
    box-shadow: inset 0 0 0 0 rgba(224, 74, 58, 0);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(224, 74, 58, 0.35), 0 0 22px rgba(224, 74, 58, 0.12);
  }
}

@keyframes portrait-glitch-shift {
  0% { transform: scale(1.014) translate(0, 0); }
  50% { transform: scale(1.014) translate(-2px, 1px); }
}

@keyframes portrait-chaos-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-live__stage {
    transform: none;
    transition: none;
  }

  .portrait-live__stage img,
  .portrait-live[data-portrait="red-rag"],
  .portrait-live__glow,
  .portrait-live__fx,
  .portrait-live__scan {
    animation: none !important;
  }

  .portrait-live__scan {
    display: none;
  }

  .portrait-live[data-portrait="ken-ken"]:hover .portrait-live__stage img {
    animation: none !important;
    filter: none;
  }

  .portrait-live[data-portrait="arash"]:hover .portrait-live__stage img {
    filter: none;
  }
}

@media (max-width: 760px) {
  .portrait-live__stage {
    transform: none;
  }

  .portrait-live[data-portrait="arash"]:hover .portrait-live__stage img,
  .portrait-live[data-portrait="ken-ken"]:hover .portrait-live__stage img {
    animation: portrait-breathe 7s ease-in-out infinite;
    filter: none;
  }
}