/**
 * =====================================================
 * 2026 VIVEN 레벨디자인 해커톤 - 데코레이션 시스템
 * =====================================================
 * GeometricShapes SVG를 활용한 임팩트있는 배경 장식
 */

/* =====================================================
 * 기본 데코 스타일 (오버라이드)
 * ===================================================== */

.deco {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s ease;
}

.deco img,
.deco svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =====================================================
 * 사이즈 시스템
 * ===================================================== */

.deco--xs { width: 32px; height: 32px; }
.deco--sm { width: 48px; height: 48px; }
.deco--md { width: 80px; height: 80px; }
.deco--lg { width: 120px; height: 120px; }
.deco--xl { width: 180px; height: 180px; }
.deco--2xl { width: 280px; height: 280px; }
.deco--hero { width: 400px; height: 400px; }
.deco--giant { width: 600px; height: 600px; }

/* =====================================================
 * 컬러 필터
 * ===================================================== */

/* 시안 (메인 포인트) */
.deco--cyan img,
.deco--cyan svg {
  filter: brightness(0) saturate(100%)
          invert(75%) sepia(30%) saturate(500%)
          hue-rotate(152deg) brightness(95%) contrast(90%);
}

/* 퍼플 (서브 포인트) */
.deco--purple img,
.deco--purple svg {
  filter: brightness(0) saturate(100%)
          invert(50%) sepia(20%) saturate(800%)
          hue-rotate(220deg) brightness(90%) contrast(90%);
}

/* 화이트 (뉴트럴) */
.deco--white img,
.deco--white svg {
  filter: brightness(0) saturate(100%) invert(100%);
}

/* 골드 (시상식) */
.deco--gold img,
.deco--gold svg {
  filter: brightness(0) saturate(100%)
          invert(75%) sepia(50%) saturate(600%)
          hue-rotate(10deg) brightness(100%) contrast(90%);
}

/* 그린 (성공/진행) */
.deco--green img,
.deco--green svg {
  filter: brightness(0) saturate(100%)
          invert(70%) sepia(50%) saturate(500%)
          hue-rotate(70deg) brightness(95%) contrast(90%);
}

/* =====================================================
 * 투명도
 * ===================================================== */

.deco--opacity-08 { opacity: 0.08; }
.deco--opacity-10 { opacity: 0.1; }
.deco--opacity-12 { opacity: 0.12; }
.deco--opacity-15 { opacity: 0.15; }
.deco--opacity-20 { opacity: 0.2; }
.deco--opacity-25 { opacity: 0.25; }
.deco--opacity-30 { opacity: 0.3; }
.deco--opacity-35 { opacity: 0.35; }
.deco--opacity-40 { opacity: 0.4; }
.deco--opacity-50 { opacity: 0.5; }

/* =====================================================
 * 글로우 효과
 * ===================================================== */

.deco--glow-cyan {
  filter: drop-shadow(0 0 20px rgba(106, 171, 191, 0.5))
          drop-shadow(0 0 40px rgba(106, 171, 191, 0.3));
}

.deco--glow-cyan img,
.deco--glow-cyan svg {
  filter: brightness(0) saturate(100%)
          invert(75%) sepia(30%) saturate(500%)
          hue-rotate(152deg) brightness(95%) contrast(90%)
          drop-shadow(0 0 15px rgba(106, 171, 191, 0.6));
}

.deco--glow-purple {
  filter: drop-shadow(0 0 20px rgba(123, 107, 158, 0.5))
          drop-shadow(0 0 40px rgba(123, 107, 158, 0.3));
}

.deco--glow-purple img,
.deco--glow-purple svg {
  filter: brightness(0) saturate(100%)
          invert(50%) sepia(20%) saturate(800%)
          hue-rotate(220deg) brightness(90%) contrast(90%)
          drop-shadow(0 0 15px rgba(123, 107, 158, 0.6));
}

.deco--glow-gold {
  filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.6))
          drop-shadow(0 0 50px rgba(212, 175, 55, 0.3));
}

/* =====================================================
 * 애니메이션
 * ===================================================== */

/* 플로팅 (상하 움직임) */
.deco--float {
  animation: decoFloat 6s ease-in-out infinite;
}

@keyframes decoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(3deg); }
}

/* 느린 플로팅 (큰 도형용) */
.deco--float-slow {
  animation: decoFloatSlow 10s ease-in-out infinite;
}

@keyframes decoFloatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-30px) rotate(5deg) scale(1.02); }
}

/* 펄스 (크기 변화) */
.deco--pulse {
  animation: decoPulse 4s ease-in-out infinite;
}

@keyframes decoPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.5; }
}

/* 회전 */
.deco--spin {
  animation: decoSpin 30s linear infinite;
}

.deco--spin-slow {
  animation: decoSpin 60s linear infinite;
}

.deco--spin-reverse {
  animation: decoSpinReverse 40s linear infinite;
}

@keyframes decoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes decoSpinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* 글로우 펄스 */
.deco--glow-pulse {
  animation: decoGlowPulse 3s ease-in-out infinite;
}

@keyframes decoGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(106, 171, 191, 0.3));
    opacity: 0.3;
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(106, 171, 191, 0.6));
    opacity: 0.5;
  }
}

/* 드리프트 (좌우 움직임) */
.deco--drift {
  animation: decoDrift 8s ease-in-out infinite;
}

@keyframes decoDrift {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(15px) translateY(-10px); }
  50% { transform: translateX(0) translateY(-20px); }
  75% { transform: translateX(-15px) translateY(-10px); }
}

/* 지연 */
.deco--delay-1 { animation-delay: -1s; }
.deco--delay-2 { animation-delay: -2s; }
.deco--delay-3 { animation-delay: -3s; }
.deco--delay-4 { animation-delay: -4s; }
.deco--delay-5 { animation-delay: -5s; }

/* =====================================================
 * 블러 효과 (배경 도형)
 * ===================================================== */

.deco--blur-sm { filter: blur(2px); }
.deco--blur-md { filter: blur(5px); }
.deco--blur-lg { filter: blur(10px); }

/* 블러 + 컬러 조합 */
.deco--bg-cyan {
  opacity: 0.15;
  filter: blur(3px);
}

.deco--bg-cyan img {
  filter: brightness(0) saturate(100%)
          invert(75%) sepia(30%) saturate(500%)
          hue-rotate(152deg) brightness(95%) contrast(90%);
}

.deco--bg-purple {
  opacity: 0.12;
  filter: blur(3px);
}

.deco--bg-purple img {
  filter: brightness(0) saturate(100%)
          invert(50%) sepia(20%) saturate(800%)
          hue-rotate(220deg) brightness(90%) contrast(90%);
}

/* =====================================================
 * 히어로 데코 (타이틀 슬라이드 배경)
 * ===================================================== */

.deco--hero-bg {
  position: absolute;
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  opacity: 0.08;
  z-index: -1;
}

.deco--hero-bg.deco--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.deco--hero-bg.deco--top-right {
  top: -10%;
  right: -10%;
  transform: rotate(15deg);
}

.deco--hero-bg.deco--bottom-left {
  bottom: -15%;
  left: -10%;
  transform: rotate(-10deg);
}

/* =====================================================
 * 코너 데코 (모서리 장식)
 * ===================================================== */

.deco--corner-tl {
  top: 5%;
  left: 3%;
}

.deco--corner-tr {
  top: 5%;
  right: 3%;
}

.deco--corner-bl {
  bottom: 10%;
  left: 3%;
}

.deco--corner-br {
  bottom: 10%;
  right: 3%;
}

/* =====================================================
 * 섹션별 테마
 * ===================================================== */

/* 개회식 - 별/스파클 강조 */
.slide[data-section="opening"] .deco--theme {
  /* 스파클, 별 모양 강조 */
}

/* 개발시간 - 기하학적, 차분 */
.slide[data-section="development"] .deco {
  opacity: 0.15;
}

/* 발표 - 다이나믹 */
.slide[data-section="presentation"] .deco {
  animation-duration: 4s;
}

/* 시상식 - 골드 글로우 */
.slide[data-section="awards"] .deco--gold {
  opacity: 0.4;
}

/* =====================================================
 * 특수 효과: 파티클 느낌
 * ===================================================== */

.deco-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.deco-particles .deco {
  position: absolute;
}

/* 작은 도형들이 흩뿌려진 느낌 */
.deco-particles .deco:nth-child(odd) {
  animation: decoFloat 6s ease-in-out infinite;
}

.deco-particles .deco:nth-child(even) {
  animation: decoDrift 8s ease-in-out infinite;
}

/* =====================================================
 * 그라데이션 오버레이와 조합
 * ===================================================== */

.slide__background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(106, 171, 191, 0.05) 0%,
    transparent 50%
  ),
  radial-gradient(
    ellipse at 70% 80%,
    rgba(123, 107, 158, 0.05) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
}