/* ==========================================================================
   마이크로닉스 CLASSIC II 풀체인지 실버 그랜드 페스티벌 - 커스텀 스타일
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Noto+Sans+KR:wght@300;400;500;700;900&family=Orbitron:wght@700;900&display=swap');

:root {
  --color-bg-dark: #07080a;
  --color-bg-card: #101217;
  --color-bg-card-hover: #161920;
  --color-gold-light: #fef08a;
  --color-gold-main: #eab308;
  --color-gold-dark: #a16207;
  --color-silver-light: #f8fafc;
  --color-silver-main: #94a3b8;
  --color-silver-dark: #475569;
  --color-emerald-deep: #064e3b;
  --color-emerald-accent: #10b981;
  --color-burgundy-deep: #450a0a;
  --color-burgundy-accent: #ef4444;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  background-color: var(--color-bg-dark);
  color: #f1f5f9;
  overflow-x: hidden;
  letter-spacing: -0.02em;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

.font-orbitron {
  font-family: 'Orbitron', 'Montserrat', sans-serif;
}

/* 럭셔리 골드 텍스트 그라데이션 */
.text-gold-gradient {
  background: linear-gradient(135deg, #fff2a3 0%, #facc15 35%, #eab308 65%, #ca8a04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* 프리미엄 실버 텍스트 그라데이션 */
.text-silver-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 45%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* 골드 보더 글로우 효과 */
.border-gold-glow {
  border: 1px solid rgba(234, 179, 8, 0.35);
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.12), inset 0 0 15px rgba(234, 179, 8, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.border-gold-glow:hover {
  border-color: rgba(250, 204, 21, 0.7);
  box-shadow: 0 0 30px rgba(234, 179, 8, 0.28), inset 0 0 20px rgba(234, 179, 8, 0.1);
  transform: translateY(-3px);
}

/* 실버 카드 보더 글로우 */
.border-silver-glow {
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.border-silver-glow:hover {
  border-color: rgba(226, 232, 240, 0.6);
  box-shadow: 0 0 25px rgba(226, 232, 240, 0.18);
  transform: translateY(-3px);
}

/* 딥 골드 배경 방사형 그라데이션 및 와이드 배경 */
.danawa-wide-hero-bg {
  background-color: #07080a;
  background-image: url('../assets/bg_hero_wide.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 2200px auto;
}

@media (min-width: 1920px) {
  .danawa-wide-hero-bg {
    background-size: 100% auto;
  }
}

.hero-stage-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 580px;
  margin: 0 auto;
}

.obj-stage {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 680px;
  max-width: 90%;
  z-index: 1;
}

.obj-gifts {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 780px;
  max-width: 95%;
  z-index: 2;
}

.obj-psu {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  max-width: 75%;
  z-index: 3;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.95));
  transition: transform 0.4s ease;
}

.obj-psu:hover {
  transform: translateX(-50%) translateY(-8px) scale(1.02);
}

/* 부유하는 금빛 파티클 캔버스 */
#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

/* 자연스럽게 흐르는 골드 오로라 라이트 */
@keyframes aurora-flow {
  0% {
    background-position: 0% 50%;
    opacity: 0.4;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.7;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0.4;
  }
}

.ambient-aurora-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(234, 179, 8, 0.28) 0%, rgba(202, 138, 4, 0.12) 45%, transparent 70%);
  background-size: 200% 200%;
  animation: aurora-flow 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
  filter: blur(40px);
}

/* 무대 위 파워서플라이 미세 부유 애니메이션 */
@keyframes subtle-float {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-12px);
  }
}

.obj-stage-psu-floating {
  animation: subtle-float 5s ease-in-out infinite;
}

/* 버튼 스타일 */
.btn-gold {
  background: linear-gradient(135deg, #fde047 0%, #eab308 50%, #ca8a04 100%);
  color: #0b0c10;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(234, 179, 8, 0.35);
  transition: all 0.25s ease;
}

.btn-gold:hover {
  background: linear-gradient(135deg, #fef08a 0%, #facc15 50%, #d97706 100%);
  box-shadow: 0 6px 28px rgba(234, 179, 8, 0.55);
  transform: translateY(-2px);
}

.btn-gold:active {
  transform: translateY(0);
}

/* 주차별 릴레이 타임라인 라인 */
.timeline-track {
  position: relative;
}

.timeline-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #059669 0%, #10b981 50%, #047857 100%);
  z-index: 0;
}

/* 파일 업로드 드래그 영역 */
.dropzone-area {
  border: 2px dashed rgba(148, 163, 184, 0.3);
  transition: all 0.2s ease;
}

.dropzone-area.drag-over {
  border-color: #eab308;
  background-color: rgba(234, 179, 8, 0.05);
}

/* 커스텀 스크롤바 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0b0c10;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ca8a04;
}

/* 빛나는 펄스 애니메이션 */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 3s infinite ease-in-out;
}

/* 모달 애니메이션 */
@keyframes modal-fade {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-content-animated {
  animation: modal-fade 0.25s ease-out forwards;
}

/* ==========================================================================
   EVENT 4 스페셜 인트로 & 럭셔리 앰비언트 이펙트
   ========================================================================== */
.danawa-event4-section {
  position: relative;
  background: radial-gradient(circle at 50% 40%, #3a080f 0%, #200408 45%, #0e0204 80%, #07080a 100%);
  overflow: hidden;
}

/* 회전하는 은은한 럭셔리 라이트 빔 */
@keyframes event4-ray-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.event4-light-rays {
  position: absolute;
  top: 52%;
  left: 50%;
  width: 1300px;
  height: 1300px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(244, 63, 94, 0.08) 25deg,
    transparent 55deg,
    rgba(234, 179, 8, 0.07) 90deg,
    transparent 125deg,
    rgba(244, 63, 94, 0.08) 170deg,
    transparent 205deg,
    rgba(234, 179, 8, 0.07) 250deg,
    transparent 285deg,
    rgba(244, 63, 94, 0.08) 330deg,
    transparent 360deg
  );
  filter: blur(50px);
  animation: event4-ray-spin 70s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* 앰비언트 버건디-골드 오로라 펄스 */
@keyframes event4-aurora {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

.event4-aurora-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 580px;
  background: radial-gradient(ellipse, rgba(225, 29, 72, 0.28) 0%, rgba(234, 179, 8, 0.16) 42%, transparent 70%);
  filter: blur(65px);
  animation: event4-aurora 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* 카드 부유 애니메이션 */
@keyframes event4-card-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.event4-card-container {
  animation: event4-card-float 6s ease-in-out infinite;
  position: relative;
  z-index: 10;
}


/* 카드 프레임 외곽 럭셔리 골드-버건디 보더 아우라 */
.event4-card-frame {
  position: relative;
  border-radius: 1.75rem;
  box-shadow: 
    0 0 35px rgba(225, 29, 72, 0.35),
    0 0 70px rgba(234, 179, 8, 0.2),
    0 30px 60px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}

/* 카드 표면을 잔잔하게 스쳐 지나가는 럭셔리 글래스 씬(Sheen) 효과 */
@keyframes event4-sheen-sweep {
  0%, 25% {
    transform: translateX(-160%) skewX(-25deg);
    opacity: 0;
  }
  38% {
    opacity: 0.55;
  }
  55%, 100% {
    transform: translateX(260%) skewX(-25deg);
    opacity: 0;
  }
}

.event4-sheen-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 20%,
    rgba(254, 240, 138, 0.2) 50%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent 100%
  );
  pointer-events: none;
  animation: event4-sheen-sweep 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  z-index: 15;
  border-radius: 1.75rem;
}