/* Media art — 배경·캔버스·커서 (pm 디자인 레이어) */

:root {
  /* 심플·우아: 선명한 액센트 + 잉크 텍스트용 슬레이트 */
  --warm-1: #ea580c;
  --warm-2: #fb923c;
  --cool-1: #0d9488;
  --cool-2: #64748b;
  --cool-3: #0f172a;
  --rotation-speed: 140s;
  --distortion: 0.06;
  --mx: 0;
  --my: 0;
  --scroll: 0;
  /* 폴백 배경 — 라벤더·스카이 그라데이션 (테마 JSON에서 덮어씀) */
  --bg-a: url("https://images.unsplash.com/photo-1557682224-5b859f2a0b51?auto=format&fit=crop&w=2400&q=85");
  --bg-b: url("https://images.unsplash.com/photo-1557682260-96773ebf0d4d?auto=format&fit=crop&w=2400&q=85");
  --bg-accent: url("https://images.unsplash.com/photo-1557682224-5b859f2a0b51?auto=format&fit=crop&w=2400&q=85");
}

body.media-portfolio *:focus-visible {
  outline: 2px solid var(--cool-1);
  outline-offset: 3px;
}

/* 검정 단색 + 미세 방사형 (참고: #universe-bg) — 성운 사진 대신 전역 우주 베이스 */
.media-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at center, #0a0c14 0%, #050608 100%);
}

.photo-layer {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  will-change: transform, opacity;
  transition: opacity 1.2s ease-in-out;
}

.photo-layer--a {
  background-image: var(--bg-a);
  opacity: 0;
  transform: translate3d(calc(var(--mx) * 4px), calc(var(--my) * 3px + var(--scroll) * -0.04px), 0) scale(1.02);
  filter: saturate(1.1) contrast(1.08) brightness(0.55);
  mix-blend-mode: normal;
}

.photo-layer--b {
  background-image: var(--bg-b);
  mix-blend-mode: soft-light;
  opacity: 0;
  transform: translate3d(calc(var(--mx) * -3px), calc(var(--my) * -2px + var(--scroll) * -0.02px), 0) scale(1.03);
}

.photo-layer--accent {
  background-image: var(--bg-accent);
  mix-blend-mode: soft-light;
  opacity: 0;
  transform: translate3d(calc(var(--mx) * 5px), calc(var(--my) * 4px), 0) scale(1.03);
}

/* 컬러 성운 제거 — 베이스는 .media-stage 배경만 사용 */
.photo-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  mix-blend-mode: normal;
  pointer-events: none;
}

/* 작은 별 — 참고 HTML PointsMaterial opacity ~0.6에 맞춤, 본문(z≥20)보다 뒤 */
.media-stage .starfield-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.58;
  mix-blend-mode: normal;
}

.photo-vignette {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: radial-gradient(ellipse 88% 75% at 50% 50%, transparent 20%, rgba(2, 6, 23, 0.55) 100%);
  pointer-events: none;
}

.photo-noise {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

.chromatic-edges {
  display: none;
}

.scanlines {
  display: none;
}

.lens-flare {
  position: absolute;
  top: -15%;
  right: 8%;
  z-index: 4;
  width: min(70vw, 520px);
  height: min(70vw, 520px);
  border-radius: 50%;
  background: transparent;
  filter: none;
  pointer-events: none;
  transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 6px), 0);
  opacity: 0;
}

body.media-portfolio .ambient {
  position: fixed;
  inset: -40%;
  z-index: 1;
  pointer-events: none;
  background: transparent;
  animation: none;
  filter: none;
  mix-blend-mode: normal;
  opacity: 0;
}

@keyframes media-drift {
  from {
    transform: rotate(0deg) scale(1.08);
  }
  to {
    transform: rotate(360deg) scale(1.08);
  }
}

body.media-portfolio .distortion-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: calc(var(--distortion) * 0.12);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

#particles-canvas,
#fluid-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

#fluid-canvas {
  z-index: -1;
  mix-blend-mode: multiply;
  opacity: 0.04;
}

/* 검정+별 전용: 테마 파티클·플루이드는 색 얼룩 방지를 위해 숨김 */
body.media-portfolio #particles-canvas,
body.media-portfolio #fluid-canvas {
  opacity: 0 !important;
}

/* 저사양·모바일: JS가 .media-portfolio--lite 부여 */
body.media-portfolio.media-portfolio--lite .ambient {
  filter: none;
  opacity: 0;
  animation: none;
}

body.media-portfolio.media-portfolio--lite .lens-flare {
  filter: none;
  opacity: 0;
}

body.media-portfolio.media-portfolio--lite .photo-layer {
  will-change: auto;
}

@media (max-width: 768px) {
  body.media-portfolio .ambient {
    opacity: 0;
  }

  body.media-portfolio .lens-flare {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-stage .starfield-canvas {
    opacity: 0.32;
  }

  .photo-layer--b,
  .photo-layer--accent,
  .media-art .ambient,
  .lens-flare {
    animation: none !important;
  }

}