/* 04-illustrator-portfolio — 王小糖 · 插画师 */

:root {
  --primary: #4F46E5;
  --cta: #F97316;
  --bg: #EEF2FF;
  --text: #1E1B4B;
  --primary-light: #818CF8;
  --cta-light: #FDBA74;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4, .font-display {
  font-family: 'Fredoka', sans-serif;
}

/* Bouncy hover */
.bounce-hover {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bounce-hover:hover {
  transform: translateY(-6px) scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .bounce-hover:hover { transform: none; }
}

/* Floating blobs */
.blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: blob-morph 8s ease-in-out infinite;
}
.blob-2 { animation-delay: -4s; }
@keyframes blob-morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

/* Wiggle on hover */
.wiggle:hover {
  animation: wiggle 0.5s ease-in-out;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

/* Card styles */
.illust-card {
  border-radius: 2rem;
  overflow: hidden;
  background: white;
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.12);
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.illust-card:hover {
  box-shadow: 0 16px 48px rgba(79, 70, 229, 0.2);
  transform: translateY(-8px);
}
@media (prefers-reduced-motion: reduce) {
  .illust-card:hover { transform: none; }
}

/* Gradient placeholders for artwork */
.art-placeholder {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.25rem;
  color: white;
  font-weight: 600;
}

/* Nav active */
.nav-link {
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  transition: background 0.2s;
}
.nav-link:hover { background: rgba(79, 70, 229, 0.1); }
.nav-link.active { background: var(--primary); color: white; }
.nav-link:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 2px;
}

/* Buttons */
.btn-primary {
  background: var(--primary);
  color: white;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}
.btn-primary:hover { background: #4338CA; transform: scale(1.05); }
.btn-primary:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; }

.btn-cta {
  background: var(--cta);
  color: white;
  border-radius: 9999px;
  padding: 0.75rem 2rem;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}
.btn-cta:hover { background: #EA580C; transform: scale(1.05); }
.btn-cta:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-cta:hover { transform: none; }
}

/* Category pills */
.category-pill {
  border-radius: 9999px;
  padding: 0.35rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
}

/* Form */
.form-input {
  border: 3px solid rgba(79, 70, 229, 0.2);
  border-radius: 1rem;
  padding: 0.875rem 1.25rem;
  width: 100%;
  background: white;
  transition: border-color 0.2s;
}
.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

/* Timeline */
.timeline-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--cta);
  border: 3px solid white;
  box-shadow: 0 0 0 3px var(--primary);
  flex-shrink: 0;
}

/* Hero float */
.hero-float {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Stagger fade-in */
.fade-in {
  animation: fadeInUp 0.6s ease-out both;
}
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}