/* ============================================================
 *  기억이음(MemoryLink) — Cinematic CSS Animations v1.0
 * ============================================================
 *  체험관(5대 매체) 몰입형 시각 이펙트
 *  파티클, 물결, 안개, 홀로그램, 펄스 효과
 * ============================================================ */

/* ────── 공통 변수 ────── */
:root {
  --cin-glow-amber: rgba(245, 158, 11, 0.15);
  --cin-glow-blue: rgba(59, 130, 246, 0.12);
  --cin-glow-green: rgba(34, 197, 94, 0.10);
  --cin-glow-purple: rgba(168, 85, 247, 0.12);
}

/* ════════════════════════════════════════════
 *  1. 파티클 (빛 먼지) — 체험관 모달 배경
 * ════════════════════════════════════════════ */

.cin-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cin-particles .particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.6);
  animation: cin-float 8s ease-in-out infinite;
  opacity: 0;
}

.cin-particles .particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 7s; }
.cin-particles .particle:nth-child(2) { left: 25%; animation-delay: 1.2s; animation-duration: 9s; }
.cin-particles .particle:nth-child(3) { left: 40%; animation-delay: 0.5s; animation-duration: 6s; }
.cin-particles .particle:nth-child(4) { left: 55%; animation-delay: 2.1s; animation-duration: 10s; }
.cin-particles .particle:nth-child(5) { left: 70%; animation-delay: 1.8s; animation-duration: 8s; }
.cin-particles .particle:nth-child(6) { left: 85%; animation-delay: 0.8s; animation-duration: 7.5s; }
.cin-particles .particle:nth-child(7) { left: 15%; animation-delay: 3s; animation-duration: 11s; }
.cin-particles .particle:nth-child(8) { left: 60%; animation-delay: 2.5s; animation-duration: 6.5s; }

@keyframes cin-float {
  0% {
    transform: translateY(100%) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  50% {
    transform: translateY(40%) scale(1);
    opacity: 0.5;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translateY(-10%) scale(0.3);
    opacity: 0;
  }
}

/* ════════════════════════════════════════════
 *  2. 파도/물결 효과 — 메타버스 (경포대)
 * ════════════════════════════════════════════ */

.cin-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cin-waves .wave {
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 60px;
  background: linear-gradient(to top, rgba(59, 130, 246, 0.08), transparent);
  border-radius: 50% 50% 0 0;
  animation: cin-wave-motion 6s ease-in-out infinite;
}

.cin-waves .wave:nth-child(2) {
  height: 45px;
  animation-duration: 8s;
  animation-delay: -2s;
  background: linear-gradient(to top, rgba(59, 130, 246, 0.05), transparent);
}

.cin-waves .wave:nth-child(3) {
  height: 30px;
  animation-duration: 5s;
  animation-delay: -4s;
  background: linear-gradient(to top, rgba(147, 197, 253, 0.06), transparent);
}

@keyframes cin-wave-motion {
  0%, 100% { transform: translateX(-2%) scaleY(1); }
  50% { transform: translateX(2%) scaleY(1.3); }
}

/* ════════════════════════════════════════════
 *  3. 안개/빛줄기 — 추모비 (기억의 정원)
 * ════════════════════════════════════════════ */

.cin-mist {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cin-mist::before,
.cin-mist::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  border-radius: 50%;
  animation: cin-mist-drift 15s ease-in-out infinite;
}

.cin-mist::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(245, 158, 11, 0.06), transparent 60%);
}

.cin-mist::after {
  background: radial-gradient(ellipse at 70% 40%, rgba(167, 139, 250, 0.05), transparent 60%);
  animation-delay: -7s;
  animation-duration: 18s;
}

@keyframes cin-mist-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(3%, -2%) rotate(2deg); }
  66% { transform: translate(-2%, 3%) rotate(-1deg); }
}

/* 빛줄기 */
.cin-light-ray {
  position: absolute;
  top: -20%;
  width: 2px;
  height: 140%;
  background: linear-gradient(to bottom, rgba(245, 158, 11, 0.15), transparent 70%);
  pointer-events: none;
  animation: cin-ray-shimmer 4s ease-in-out infinite;
  transform-origin: top center;
}

.cin-light-ray:nth-child(1) { left: 20%; animation-delay: 0s; width: 3px; }
.cin-light-ray:nth-child(2) { left: 45%; animation-delay: 1.5s; width: 1px; }
.cin-light-ray:nth-child(3) { left: 75%; animation-delay: 3s; width: 2px; }

@keyframes cin-ray-shimmer {
  0%, 100% { opacity: 0.3; transform: scaleX(1) rotate(-2deg); }
  50% { opacity: 0.7; transform: scaleX(1.5) rotate(1deg); }
}

/* ════════════════════════════════════════════
 *  4. 홀로그램 효과 — AR 안경
 * ════════════════════════════════════════════ */

.cin-hologram {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cin-hologram::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(59, 130, 246, 0.03) 2px,
    rgba(59, 130, 246, 0.03) 4px
  );
  animation: cin-scanline 8s linear infinite;
}

@keyframes cin-scanline {
  0% { transform: translateY(0); }
  100% { transform: translateY(20px); }
}

/* 홀로그램 글로우 테두리 */
.cin-holo-glow {
  box-shadow:
    0 0 15px rgba(59, 130, 246, 0.1),
    0 0 30px rgba(59, 130, 246, 0.05),
    inset 0 0 15px rgba(59, 130, 246, 0.03);
  animation: cin-holo-pulse 3s ease-in-out infinite;
}

@keyframes cin-holo-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.1), 0 0 30px rgba(59, 130, 246, 0.05); }
  50% { box-shadow: 0 0 25px rgba(59, 130, 246, 0.2), 0 0 50px rgba(59, 130, 246, 0.1); }
}

/* ════════════════════════════════════════════
 *  5. 심장박동 펄스 — 로봇 체험
 * ════════════════════════════════════════════ */

.cin-heartbeat {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.cin-heartbeat::before,
.cin-heartbeat::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.3);
  animation: cin-pulse-ring 2s ease-out infinite;
}

.cin-heartbeat::after {
  animation-delay: 0.5s;
}

@keyframes cin-pulse-ring {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
    border-width: 3px;
  }
  100% {
    transform: scale(3);
    opacity: 0;
    border-width: 1px;
  }
}

/* 중심 코어 */
.cin-heartbeat-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: rgba(34, 197, 94, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cin-core-beat 1s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.3);
}

@keyframes cin-core-beat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  15% { transform: translate(-50%, -50%) scale(1.3); }
  30% { transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(1.15); }
}

/* ════════════════════════════════════════════
 *  6. 빗방울 효과 — 스마트홈 (거실)
 * ════════════════════════════════════════════ */

.cin-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cin-rain .drop {
  position: absolute;
  width: 1px;
  height: 15px;
  background: linear-gradient(to bottom, transparent, rgba(148, 163, 184, 0.4));
  animation: cin-rainfall 1.2s linear infinite;
  opacity: 0;
}

.cin-rain .drop:nth-child(1) { left: 8%; animation-delay: 0s; animation-duration: 1.0s; }
.cin-rain .drop:nth-child(2) { left: 18%; animation-delay: 0.3s; animation-duration: 1.3s; }
.cin-rain .drop:nth-child(3) { left: 28%; animation-delay: 0.7s; animation-duration: 0.9s; }
.cin-rain .drop:nth-child(4) { left: 38%; animation-delay: 0.1s; animation-duration: 1.1s; }
.cin-rain .drop:nth-child(5) { left: 48%; animation-delay: 0.5s; animation-duration: 1.4s; }
.cin-rain .drop:nth-child(6) { left: 58%; animation-delay: 0.9s; animation-duration: 1.0s; }
.cin-rain .drop:nth-child(7) { left: 68%; animation-delay: 0.2s; animation-duration: 1.2s; }
.cin-rain .drop:nth-child(8) { left: 78%; animation-delay: 0.6s; animation-duration: 0.8s; }
.cin-rain .drop:nth-child(9) { left: 88%; animation-delay: 1.0s; animation-duration: 1.3s; }
.cin-rain .drop:nth-child(10) { left: 95%; animation-delay: 0.4s; animation-duration: 1.1s; }

@keyframes cin-rainfall {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(calc(100vh));
    opacity: 0;
  }
}

/* ════════════════════════════════════════════
 *  7. 체험 모달 배경 그라데이션 (씬별)
 * ════════════════════════════════════════════ */

.cin-bg-ocean {
  background: linear-gradient(160deg, #0c1445 0%, #1a3a6b 30%, #2563eb 60%, #93c5fd 85%, #f0f9ff 100%) !important;
  color: #e2e8f0 !important;
}

.cin-bg-rain {
  background: linear-gradient(180deg, #1e293b 0%, #334155 40%, #475569 70%, #64748b 100%) !important;
  color: #e2e8f0 !important;
}

.cin-bg-hologram {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #312e81 70%, #1e293b 100%) !important;
  color: #c7d2fe !important;
}

.cin-bg-robot {
  background: linear-gradient(160deg, #0f172a 0%, #064e3b 40%, #065f46 70%, #0d1117 100%) !important;
  color: #d1fae5 !important;
}

.cin-bg-memorial {
  background: linear-gradient(180deg, #fefce8 0%, #fef3c7 20%, #e8d5b7 50%, #d4c4a8 80%, #a8967a 100%) !important;
  color: #44403c !important;
}

/* ════════════════════════════════════════════
 *  8. 오디오 컨트롤 바
 * ════════════════════════════════════════════ */

.cin-audio-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s;
}

.cin-audio-bar:hover {
  background: rgba(0, 0, 0, 0.4);
}

.cin-audio-bar .cin-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.cin-audio-bar .cin-eq span {
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  animation: cin-eq-bounce 0.8s ease-in-out infinite;
}

.cin-audio-bar .cin-eq span:nth-child(1) { height: 4px; animation-delay: 0s; }
.cin-audio-bar .cin-eq span:nth-child(2) { height: 8px; animation-delay: 0.15s; }
.cin-audio-bar .cin-eq span:nth-child(3) { height: 6px; animation-delay: 0.3s; }
.cin-audio-bar .cin-eq span:nth-child(4) { height: 10px; animation-delay: 0.1s; }
.cin-audio-bar .cin-eq span:nth-child(5) { height: 5px; animation-delay: 0.25s; }

@keyframes cin-eq-bounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* 볼륨 슬라이더 */
.cin-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.cin-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* ════════════════════════════════════════════
 *  9. 부드러운 전환 효과
 * ════════════════════════════════════════════ */

.cin-fade-in {
  animation: cin-fadein 0.8s ease-out forwards;
}

@keyframes cin-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.cin-scale-in {
  animation: cin-scalein 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cin-scalein {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* 체험관 카드 호버 효과 강화 */
.cin-experience-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.cin-experience-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245, 158, 11, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.cin-experience-card:hover::before {
  opacity: 1;
}

.cin-experience-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}