/* =============================================
   AI-ModelCraft - Effects CSS v2
   블루 주색상 / 레드+블랙 포인트
   ============================================= */

/* ---- Section Background Accents ---- */
.section-overview::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(21,101,192,0.15), transparent);
}
.section-process::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(21,101,192,0.1), transparent);
}

/* ---- Scroll Progress Bar ---- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(to right, #1565C0, #1E88E5, #C62828);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}

/* ---- Pricing Pulse ---- */
@keyframes pricing-pulse {
  0%,100% { box-shadow: 0 8px 32px rgba(21,101,192,0.3); }
  50%      { box-shadow: 0 8px 48px rgba(21,101,192,0.5); }
}
.pricing-card.featured {
  animation: pricing-pulse 3s ease-in-out infinite;
}
.pricing-card.featured:hover {
  animation: none;
  box-shadow: 0 20px 60px rgba(21,101,192,0.4);
}

/* ---- Hero floating orbs ---- */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: orb-float ease-in-out infinite;
}
.hero-orb-1 { width: 160px; height: 160px; top: 20%; right: 18%; background: rgba(21,101,192,0.06); filter: blur(40px); animation-duration: 9s; }
.hero-orb-2 { width: 80px;  height: 80px;  top: 65%; right: 32%; background: rgba(198,40,40,0.05);  filter: blur(20px); animation-duration: 7s; animation-delay: 2s; }
.hero-orb-3 { width: 50px;  height: 50px;  top: 40%; right: 45%; background: rgba(30,136,229,0.08); filter: blur(15px); animation-duration: 11s; animation-delay: 4s; }

@keyframes orb-float {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-18px) scale(1.05); }
}

/* ---- Table hover highlight ---- */
.spec-table tbody tr:not(.spec-category) {
  transition: background 0.18s;
}

/* ---- Section number color for dark ---- */
.section-header.light .section-num {
  color: rgba(21,101,192,0.15);
}

/* ---- Glowing border on compare recommended ---- */
@keyframes border-glow {
  0%,100% { box-shadow: 0 8px 32px rgba(21,101,192,0.3), 0 0 0 1px rgba(21,101,192,0.4); }
  50%      { box-shadow: 0 12px 48px rgba(21,101,192,0.5), 0 0 0 2px rgba(21,101,192,0.5); }
}
.compare-card.recommended {
  animation: border-glow 4s ease-in-out infinite;
}
.compare-card.recommended:hover {
  animation: none;
}

/* ---- Screenshot label gradient ---- */
.screenshot-label {
  background: linear-gradient(135deg, rgba(21,101,192,0.88), rgba(13,71,161,0.88));
}

/* ---- Active nav link indicator ---- */
.top-nav .nav-links a.active {
  color: #42A5F5;
  position: relative;
}
.top-nav .nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: #42A5F5;
  border-radius: 1px;
}

/* ---- Stagger animations ---- */
.value-card:nth-child(1) { transition-delay: 0.05s; }
.value-card:nth-child(2) { transition-delay: 0.12s; }
.value-card:nth-child(3) { transition-delay: 0.19s; }
.value-card:nth-child(4) { transition-delay: 0.26s; }

.feature-card:nth-child(1) { transition-delay: 0.05s; }
.feature-card:nth-child(2) { transition-delay: 0.1s; }
.feature-card:nth-child(3) { transition-delay: 0.15s; }
.feature-card:nth-child(4) { transition-delay: 0.05s; }
.feature-card:nth-child(5) { transition-delay: 0.1s; }
.feature-card:nth-child(6) { transition-delay: 0.15s; }

.effect-card:nth-child(1) { transition-delay: 0.05s; }
.effect-card:nth-child(2) { transition-delay: 0.12s; }
.effect-card:nth-child(3) { transition-delay: 0.19s; }
.effect-card:nth-child(4) { transition-delay: 0.26s; }

.pipeline-step:nth-child(1) { transition-delay: 0.05s; }
.pipeline-step:nth-child(2) { transition-delay: 0.12s; }
.pipeline-step:nth-child(3) { transition-delay: 0.19s; }
.pipeline-step:nth-child(4) { transition-delay: 0.26s; }
.pipeline-step:nth-child(5) { transition-delay: 0.33s; }

/* ---- Process steps stagger ---- */
.process-step:nth-child(1) { transition-delay: 0.05s; }
.process-step:nth-child(2) { transition-delay: 0.1s; }
.process-step:nth-child(3) { transition-delay: 0.15s; }
.process-step:nth-child(4) { transition-delay: 0.2s; }
.process-step:nth-child(5) { transition-delay: 0.25s; }

/* ---- Arch boxes stagger ---- */
.arch-box { transition: opacity 0.5s ease, transform 0.5s ease; }

/* ---- Value card hover color match ---- */
.value-card:hover .value-icon {
  transform: scale(1.08) rotate(-3deg);
  transition: transform 0.3s ease;
}

/* ---- App screenshot hover zoom ---- */
.app-screenshot-wrap:hover .app-screenshot {
  transform: scale(1.01);
  transition: transform 0.4s ease;
}
.app-screenshot {
  transition: transform 0.4s ease;
}

/* ---- Prompt list hover ---- */
.pl-item {
  transition: all 0.18s ease;
}

/* ---- Context menu shadow ---- */
.context-menu-preview {
  position: relative;
}

/* ---- Reference box hover ---- */
.reference-box {
  transition: border-color 0.3s, box-shadow 0.3s;
}
.reference-box:hover {
  border-left-color: var(--blue-bright);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* ---- Client logo hover ---- */
.client-logo img {
  transition: opacity 0.3s, filter 0.3s;
}
.client-logo:hover img {
  opacity: 0.9;
  filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(185deg);
}

/* ---- Scroll anchor offset ---- */
section[id] { scroll-margin-top: 70px; }

/* ---- Input focus ring animation ---- */
@keyframes focus-ring {
  0%   { box-shadow: 0 0 0 0 rgba(21,101,192,0.3); }
  100% { box-shadow: 0 0 0 4px rgba(21,101,192,0.1); }
}
.form-group input:focus,
.form-group textarea:focus {
  animation: focus-ring 0.2s forwards;
}