/* ============================================================
   own_scene — 커스텀 스타일 레이어
   ------------------------------------------------------------
   레이아웃 · 간격 · 타이포 · 색은 전부 마크업의 Tailwind 유틸리티에 있다.
   이 파일에는 Tailwind로 표현할 수 없는 것만 남긴다:
     · 배경 은색 판(피사계심도 3단 + 부유 애니메이션)
     · 브러시드 메탈 워드마크(그라디언트 텍스트 클립)
     · 포트폴리오 썸네일의 다층 그라디언트 배경
   값은 reference/own-scene-shutter-hero.html 에서 그대로 옮긴 것이므로
   임의로 바꾸지 말 것.
   ============================================================ */

:root {
  --void: #000000;
  --ghost: #ffffff;
  --fog: #999999;
  --mist: #c6c6c6;
  --dim: #555555;
  --line: #161616;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--void);
  color: var(--ghost);
}

/* ── 배경: 검은 캔버스 위에 흩어진 은색 판들 — depth-of-field 3단 레이어 ── */
.plate-wrap {
  position: absolute;
} /* 등장(entrance) 담당 */

.plate-parallax {
  will-change: transform;
} /* 마우스 패럴랙스 담당 */

.plate {
  border-radius: 3px;
  animation: drift ease-in-out infinite;
  will-change: transform;
} /* 부유(drift) 담당 */

.plate[data-depth='far'] {
  border: 1px solid rgba(200, 206, 212, 0.09);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0) 60%);
  filter: blur(3.5px);
}

.plate[data-depth='mid'] {
  border: 1px solid rgba(203, 209, 214, 0.15);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 55%);
  filter: blur(1.2px);
}

.plate[data-depth='near'] {
  border: 1px solid rgba(214, 219, 224, 0.22);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 50%);
  filter: blur(0);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.42);
}

@keyframes drift {
  0%,
  100% {
    transform: translateY(0) rotate(var(--rot));
  }
  50% {
    transform: translateY(calc(-1 * var(--amp))) rotate(calc(var(--rot) + 1.4deg));
  }
}

/* ── 브러시드 메탈 워드마크 ──
   밝고 어두운 밴드를 촘촘히 섞어 크롬 광택 질감을 만든다.
   GSAP이 background-position을 훑으며 광택을 지나가게 한다. */
.wordmark {
  font-size: clamp(48px, 9vw, 120px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(
    100deg,
    #4d5257 0%,
    #9aa1a7 9%,
    #f2f4f5 16%,
    #6b7278 24%,
    #ffffff 34%,
    #7c848b 42%,
    #c9ced2 50%,
    #454a4f 58%,
    #eef1f3 68%,
    #8b939a 76%,
    #ffffff 85%,
    #565b60 94%,
    #4d5257 100%
  );
  background-size: 340% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: blur(6px);
  text-shadow: 0 0 42px rgba(255, 255, 255, 0.08);
}

.wordmark .u {
  background: none;
  -webkit-text-fill-color: var(--fog);
  color: var(--fog);
}

/* ── 포트폴리오 썸네일 배경(로고 카드의 은색 판 질감을 축소해 재현) ── */
.pf-thumb {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%),
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255, 255, 255, 0.05), transparent 60%),
    #0d0d0d;
}

.pf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 접근성: 모션 최소화를 켠 사용자에게는 셔터 연출 대신 즉시 표시 ──
   (일반 사용자에게 보이는 화면은 전혀 달라지지 않는다) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .plate {
    animation: none;
  }
}