/*
 * Persona Gradient Styles
 * 
 * 6종 DX 페르소나별 고유 그라디언트 정의
 */

/* ========================================
   6종 페르소나 그라디언트
   ======================================== */

/* 1. AI마스터 (Cyan to Navy) */
.tech-gradient-1,
.persona-gradient-ai-master {
  background: linear-gradient(135deg, #00d0ff 0%, #1b2e50 100%);
}

/* 2. 미래예측가 (Purple to Navy) */
.tech-gradient-2,
.persona-gradient-future-predictor {
  background: linear-gradient(135deg, #7000ff 0%, #1b2e50 100%);
}

/* 3. 트렌드메이커 (Green to Navy) */
.tech-gradient-3,
.persona-gradient-trend-maker {
  background: linear-gradient(135deg, #00ff88 0%, #1b2e50 100%);
}

/* 4. 스마트크리에이터 (Orange to Navy) */
.tech-gradient-4,
.persona-gradient-smart-creator {
  background: linear-gradient(135deg, #ff8800 0%, #1b2e50 100%);
}

/* 5. 타임세이버 (Pink to Navy) */
.tech-gradient-5,
.persona-gradient-time-saver {
  background: linear-gradient(135deg, #ff0055 0%, #1b2e50 100%);
}

/* 6. 비전아티스트 (Blue to Navy) */
.tech-gradient-6,
.persona-gradient-vision-artist {
  background: linear-gradient(135deg, #0055ff 0%, #1b2e50 100%);
}


/* ========================================
   그라디언트 텍스트 효과
   ======================================== */

/* 텍스트에 그라디언트 적용 */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
}

.gradient-text-ai-master {
  background-image: linear-gradient(135deg, #00d0ff 0%, #1b2e50 100%);
}

.gradient-text-future-predictor {
  background-image: linear-gradient(135deg, #7000ff 0%, #1b2e50 100%);
}

.gradient-text-trend-maker {
  background-image: linear-gradient(135deg, #00ff88 0%, #1b2e50 100%);
}

.gradient-text-smart-creator {
  background-image: linear-gradient(135deg, #ff8800 0%, #1b2e50 100%);
}

.gradient-text-time-saver {
  background-image: linear-gradient(135deg, #ff0055 0%, #1b2e50 100%);
}

.gradient-text-vision-artist {
  background-image: linear-gradient(135deg, #0055ff 0%, #1b2e50 100%);
}


/* ========================================
   그라디언트 보더 효과
   ======================================== */

/* 그라디언트 테두리 */
.gradient-border {
  position: relative;
  border-radius: var(--radius-lg, 1rem);
  background-clip: padding-box;
  border: 2px solid transparent;
}

.gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -2px;
  border-radius: inherit;
  background: inherit;
}

.gradient-border-ai-master::before {
  background: linear-gradient(135deg, #00d0ff 0%, #1b2e50 100%);
}

.gradient-border-future-predictor::before {
  background: linear-gradient(135deg, #7000ff 0%, #1b2e50 100%);
}

.gradient-border-trend-maker::before {
  background: linear-gradient(135deg, #00ff88 0%, #1b2e50 100%);
}

.gradient-border-smart-creator::before {
  background: linear-gradient(135deg, #ff8800 0%, #1b2e50 100%);
}

.gradient-border-time-saver::before {
  background: linear-gradient(135deg, #ff0055 0%, #1b2e50 100%);
}

.gradient-border-vision-artist::before {
  background: linear-gradient(135deg, #0055ff 0%, #1b2e50 100%);
}


/* ========================================
   그라디언트 애니메이션 (선택 사항)
   ======================================== */

/* 그라디언트 이동 애니메이션 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}


/* ========================================
   그라디언트 오버레이 효과
   ======================================== */

/* 카드 상단에 그라디언트 오버레이 */
.gradient-overlay {
  position: relative;
  overflow: hidden;
}

.gradient-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-lg, 1rem) var(--radius-lg, 1rem) 0 0;
}

.gradient-overlay-ai-master::after {
  background: linear-gradient(90deg, #00d0ff 0%, #1b2e50 100%);
}

.gradient-overlay-future-predictor::after {
  background: linear-gradient(90deg, #7000ff 0%, #1b2e50 100%);
}

.gradient-overlay-trend-maker::after {
  background: linear-gradient(90deg, #00ff88 0%, #1b2e50 100%);
}

.gradient-overlay-smart-creator::after {
  background: linear-gradient(90deg, #ff8800 0%, #1b2e50 100%);
}

.gradient-overlay-time-saver::after {
  background: linear-gradient(90deg, #ff0055 0%, #1b2e50 100%);
}

.gradient-overlay-vision-artist::after {
  background: linear-gradient(90deg, #0055ff 0%, #1b2e50 100%);
}


/* ========================================
   접근성: 애니메이션 감소
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .gradient-animated {
    animation: none;
  }
}