@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root {
  --pitch-black: #020306;
  --neon-emerald: #00ffa3;
  --neon-cyan: #00e5ff;
  --spotlight-x: 50vw;
  --spotlight-y: 50vh;
}

* {
  box-sizing: border-box;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}

html {
  scroll-behavior: smooth;
  background-color: #020306;
  color: #ffffff;
}

body {
  background-color: #020306;
  color: #ffffff;
  overflow-x: hidden;
  cursor: default;
}

/* Custom Minimal Scrollbar */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #020306;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}

/* 마우스 커서를 따라다니는 핀 조명(손전등) 효과 */
.CursorSpotlight {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: radial-gradient(
    520px circle at var(--spotlight-x) var(--spotlight-y),
    rgba(0, 255, 163, 0.09),
    rgba(0, 229, 255, 0.04) 40%,
    transparent 75%
  );
  transition: background 0.05s linear;
}

/* 마우스 손전등이 비출 때만 선명해지는 배경 숨은 단서 레이어 */
.HiddenClueLayer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  user-select: none;
  mask-image: radial-gradient(
    300px circle at var(--spotlight-x) var(--spotlight-y),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.25) 55%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    300px circle at var(--spotlight-x) var(--spotlight-y),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.25) 55%,
    transparent 100%
  );
}

/* 중앙 미스터리 코어 오브제 */
@keyframes coreFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-14px) rotate(4deg) scale(1.04); }
}

@keyframes corePulse {
  0%, 100% {
    box-shadow: 0 0 60px 10px rgba(0, 255, 163, 0.22),
                0 0 120px 30px rgba(0, 229, 255, 0.12),
                inset 0 0 40px rgba(0, 255, 163, 0.35);
  }
  50% {
    box-shadow: 0 0 90px 25px rgba(0, 255, 163, 0.38),
                0 0 160px 50px rgba(0, 229, 255, 0.22),
                inset 0 0 60px rgba(0, 229, 255, 0.5);
  }
}

@keyframes orbitSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes orbitSpinReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

.MysteryOrb {
  animation: coreFloat 6s ease-in-out infinite, corePulse 4s ease-in-out infinite;
}

.OrbitRing1 {
  animation: orbitSpin 22s linear infinite;
}

.OrbitRing2 {
  animation: orbitSpinReverse 30s linear infinite;
}

/* 스크롤 시 Blur -> Focus */
.progressive-clue {
  filter: blur(16px);
  opacity: 0.12;
  transform: translateY(36px) scale(0.97);
  transition: filter 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.progressive-clue.in-focus {
  filter: blur(0px);
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 다음 줄에 단독으로 나타나는 손전등(마우스 호버/터치) 암호화 블러 박스 */
.flashlight-reveal-box {
  display: inline-block;
  margin-top: 14px;
  padding: 16px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  cursor: crosshair;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.flashlight-reveal-box .flashlight-text {
  display: block;
  filter: blur(10px);
  opacity: 0.28;
  transition: filter 0.45s ease, opacity 0.45s ease, color 0.45s ease, transform 0.45s ease;
}

.flashlight-reveal-box:hover,
.flashlight-reveal-box.revealed {
  background: rgba(0, 255, 163, 0.07);
  border-color: rgba(0, 255, 163, 0.5);
  box-shadow: 0 0 35px -5px rgba(0, 255, 163, 0.25);
}

.flashlight-reveal-box:hover .flashlight-text,
.flashlight-reveal-box.revealed .flashlight-text {
  filter: blur(0px);
  opacity: 1;
  color: #00ffa3;
  transform: scale(1.02);
}

/* 자물쇠 / 시크릿 볼트 카드 */
.VaultBox {
  background: linear-gradient(180deg, rgba(12, 16, 28, 0.85) 0%, rgba(4, 6, 12, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(24px);
}

.VaultBox.unlocked {
  border-color: rgba(0, 255, 163, 0.45);
  box-shadow: 0 0 70px -15px rgba(0, 255, 163, 0.2);
}

@keyframes lockShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

.lock-trigger:hover .lock-icon {
  animation: lockShake 0.4s ease-in-out infinite;
}

/* 설문 옵션 버튼 */
.survey-option-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.survey-option-btn:hover {
  border-color: rgba(0, 255, 163, 0.6);
  background: rgba(0, 255, 163, 0.06);
  transform: translateX(4px);
}

.survey-option-btn.selected {
  border-color: #00ffa3;
  background: rgba(0, 255, 163, 0.13);
  box-shadow: 0 0 25px -5px rgba(0, 255, 163, 0.3);
}

.survey-option-btn.selected .option-check {
  background-color: #00ffa3;
  border-color: #00ffa3;
  color: #020306;
}

/* 척도형 1~5 버튼 */
.scale-btn {
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.scale-btn:hover {
  border-color: rgba(0, 255, 163, 0.6);
  background: rgba(0, 255, 163, 0.07);
}

.scale-btn.selected {
  background-color: #00ffa3;
  border-color: #00ffa3;
  color: #020306;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -4px rgba(0, 255, 163, 0.45);
}

/* =====================================================================
   [비교 섹터 A - 컨셉 2] 3D 인터랙티브 시크릿 블랙 멤버십 카드 (Toss / Arc 스타일)
   ===================================================================== */
.perspective-stage {
  perspective: 1200px;
}

.secret-black-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1.586 / 1;
  border-radius: 24px;
  background: 
    radial-gradient(circle at 85% 15%, rgba(0, 255, 163, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(0, 229, 255, 0.12) 0%, transparent 45%),
    linear-gradient(135deg, #111622 0%, #05070c 55%, #0a0e17 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 30px 60px -12px rgba(0, 0, 0, 0.95),
    0 0 40px -10px rgba(0, 255, 163, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out, box-shadow 0.3s ease;
  overflow: hidden;
  cursor: grab;
}

.secret-black-card:hover {
  border-color: rgba(0, 255, 163, 0.55);
  box-shadow: 
    0 35px 70px -12px rgba(0, 0, 0, 0.98),
    0 0 55px -5px rgba(0, 255, 163, 0.35),
    inset 0 1px 2px rgba(0, 255, 163, 0.4);
}

/* 카드 미세 카본/메탈 패턴 */
.secret-black-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.45;
  pointer-events: none;
}

/* 마우스 움직임에 반응하는 홀로그램 광택 레이어 */
.card-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    320px circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255, 255, 255, 0.22) 0%,
    rgba(0, 255, 163, 0.12) 30%,
    transparent 70%
  );
  mix-blend-mode: screen;
}

/* =====================================================================
   [비교 섹터 B - 컨셉 1] 시네마틱 3줄 교차 무한 글래스 마키 월 (Apple / Linear 스타일)
   ===================================================================== */
.marquee-wall-mask {
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

@keyframes scrollLeftInfinite {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollRightInfinite {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.marquee-row-left {
  display: flex;
  width: max-content;
  padding-top: 14px;
  padding-bottom: 18px;
  animation: scrollLeftInfinite 46s linear infinite;
}

.marquee-row-right {
  display: flex;
  width: max-content;
  padding-top: 14px;
  padding-bottom: 18px;
  animation: scrollRightInfinite 52s linear infinite;
}

.marquee-row-left:hover,
.marquee-row-right:hover {
  animation-play-state: paused;
}

.contributor-glass-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
  transition: all 0.25s ease;
}

.contributor-glass-card:hover {
  border-color: rgba(0, 255, 163, 0.55);
  background: rgba(0, 255, 163, 0.07);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -8px rgba(0, 255, 163, 0.25);
}

.contributor-glass-card.is-mine-card {
  border-color: #00ffa3;
  background: linear-gradient(135deg, rgba(0, 255, 163, 0.18) 0%, rgba(6, 182, 212, 0.08) 100%);
  box-shadow: 0 0 35px -5px rgba(0, 255, 163, 0.45);
}

/* 하단 실시간 FOMO 알림 */
.social-toast {
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(140%);
  opacity: 0;
}
.social-toast.show {
  transform: translateY(0);
  opacity: 1;
}