/* ============================================================
   SLIDE-ANIM.CSS — Dragon Lab × VIFC-DN Presentation Kit
   Global visual enhancements: animations, card depth, indicators
   ============================================================ */

/* ── 1. Entry Animations ────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.header,
.header-info {
  animation: fadeSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.main-content {
  animation: fadeSlideUp 0.65s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bottom,
.bottom-stats,
.bottom-info,
.stats-bar {
  animation: fadeSlideUp 0.5s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 2. Slide Number Indicator ──────────────────────────── */
.slide-num-indicator {
  position: absolute;
  bottom: 16px;
  right: 26px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.12);
  letter-spacing: 2.5px;
  z-index: 50;
  pointer-events: none;
  user-select: none;
  animation: fadeIn 0.6s 0.5s ease both;
  line-height: 1;
}
.slide-num-indicator .sn-cur {
  font-size: 13px;
  color: rgba(0, 212, 255, 0.4);
  font-weight: 800;
}

/* ── 3. Ambient Background Pulse ────────────────────────── */
@keyframes ambientPulse {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}
.slide-container::before {
  animation: ambientPulse 7s ease-in-out infinite alternate !important;
}

/* ── 4. Card Color Depth System ─────────────────────────── */
/*
  Applied via nth-child in each slide's isolated iframe context.
  Scheme:
    1st → Cyan    #00d4ff
    2nd → Emerald #00ff88
    3rd → Violet  #a78bfa
    4th → Amber   #fbbf24
*/

/* ▸ Card 1 — Cyan (existing, enhanced gradient) */
.key-card:nth-child(1)::before,
.value-card:nth-child(1)::before,
.impact-card:nth-child(1)::before,
.step-card:nth-child(1)::before,
.key-point:nth-child(1)::before {
  background: linear-gradient(135deg, #00d4ff, #0088cc) !important;
}

/* ▸ Card 2 — Emerald */
.key-card:nth-child(2)::before,
.value-card:nth-child(2)::before,
.impact-card:nth-child(2)::before,
.step-card:nth-child(2)::before,
.key-point:nth-child(2)::before {
  background: linear-gradient(135deg, #00ff88, #009952) !important;
}
.key-card:nth-child(2) .card-icon,
.value-card:nth-child(2) .card-icon,
.impact-card:nth-child(2) .card-icon {
  background: rgba(0, 255, 136, 0.1) !important;
  color: #00ff88 !important;
}
.key-card:nth-child(2):hover,
.value-card:nth-child(2):hover,
.impact-card:nth-child(2):hover {
  background: rgba(0, 255, 136, 0.07) !important;
  border-color: rgba(0, 255, 136, 0.4) !important;
  box-shadow: 0 12px 32px rgba(0, 255, 136, 0.15) !important;
}
.key-card:nth-child(2):hover .card-icon,
.value-card:nth-child(2):hover .card-icon,
.impact-card:nth-child(2):hover .card-icon {
  background: rgba(0, 255, 136, 0.25) !important;
  color: #fff !important;
}
.key-card:nth-child(2),
.value-card:nth-child(2),
.impact-card:nth-child(2) {
  box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 1px 0 rgba(0, 255, 136, 0.06);
}

/* ▸ Card 3 — Violet */
.key-card:nth-child(3)::before,
.value-card:nth-child(3)::before,
.impact-card:nth-child(3)::before,
.step-card:nth-child(3)::before,
.key-point:nth-child(3)::before {
  background: linear-gradient(135deg, #a78bfa, #5b1ce0) !important;
}
.key-card:nth-child(3) .card-icon,
.value-card:nth-child(3) .card-icon,
.impact-card:nth-child(3) .card-icon {
  background: rgba(167, 139, 250, 0.12) !important;
  color: #a78bfa !important;
}
.key-card:nth-child(3):hover,
.value-card:nth-child(3):hover,
.impact-card:nth-child(3):hover {
  background: rgba(167, 139, 250, 0.07) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 0 12px 32px rgba(167, 139, 250, 0.15) !important;
}
.key-card:nth-child(3):hover .card-icon,
.value-card:nth-child(3):hover .card-icon,
.impact-card:nth-child(3):hover .card-icon {
  background: rgba(167, 139, 250, 0.25) !important;
  color: #fff !important;
}
.key-card:nth-child(3),
.value-card:nth-child(3),
.impact-card:nth-child(3) {
  box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 1px 0 rgba(167, 139, 250, 0.06);
}

/* ▸ Card 4 — Amber */
.key-card:nth-child(4)::before,
.value-card:nth-child(4)::before,
.impact-card:nth-child(4)::before,
.key-point:nth-child(4)::before {
  background: linear-gradient(135deg, #fbbf24, #b45306) !important;
}
.key-card:nth-child(4) .card-icon,
.value-card:nth-child(4) .card-icon,
.impact-card:nth-child(4) .card-icon {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fbbf24 !important;
}
.key-card:nth-child(4):hover,
.value-card:nth-child(4):hover,
.impact-card:nth-child(4):hover {
  background: rgba(251, 191, 36, 0.07) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  box-shadow: 0 12px 32px rgba(251, 191, 36, 0.15) !important;
}
.key-card:nth-child(4):hover .card-icon,
.value-card:nth-child(4):hover .card-icon,
.impact-card:nth-child(4):hover .card-icon {
  background: rgba(251, 191, 36, 0.25) !important;
  color: #fff !important;
}
.key-card:nth-child(4),
.value-card:nth-child(4),
.impact-card:nth-child(4) {
  box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 1px 0 rgba(251, 191, 36, 0.06);
}

/* ── 5. Hub & Spoke — Slide 7 ───────────────────────────── */
@keyframes hubGlow {
  from {
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.45);
  }
  to {
    box-shadow:
      0 0 100px rgba(0, 212, 255, 0.9),
      0 0 50px rgba(0, 255, 136, 0.35),
      0 0 20px rgba(0, 212, 255, 0.6);
  }
}
.hub-center {
  animation: hubGlow 3.5s ease-in-out infinite alternate !important;
}

@keyframes nodeFloat {
  from { transform: translateY(0px); }
  to   { transform: translateY(-6px); }
}
.partner-wrapper.p1 .partner-node { animation: nodeFloat 3.5s ease-in-out infinite alternate; }
.partner-wrapper.p2 .partner-node { animation: nodeFloat 3.5s 0.7s ease-in-out infinite alternate; }
.partner-wrapper.p3 .partner-node { animation: nodeFloat 3.5s 1.4s ease-in-out infinite alternate; }
.partner-wrapper.p4 .partner-node { animation: nodeFloat 3.5s 2.1s ease-in-out infinite alternate; }
.partner-wrapper.p5 .partner-node { animation: nodeFloat 3.5s 2.8s ease-in-out infinite alternate; }

/* Freeze float on hover so scale(1.15) takes over cleanly */
.partner-node:hover {
  animation-play-state: paused !important;
}

/* ── 6. CTA Button — Slide 13 ───────────────────────────── */
@keyframes ctaBounce {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.35);
  }
  50% {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 212, 255, 0.65);
  }
}
.cta-button {
  animation: ctaBounce 2.8s ease-in-out infinite !important;
  cursor: pointer;
}

/* ── 7. Urgency Badge — Slide 12 ────────────────────────── */
@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 0 0px rgba(255, 68, 68, 0); }
  50%       { box-shadow: 0 0 14px rgba(255, 68, 68, 0.55), 0 0 30px rgba(255, 68, 68, 0.2); }
}
.check-status.red {
  animation: urgentPulse 1.8s ease-in-out infinite !important;
}

/* ── 8. Red Badge Glow — Slide 4 ────────────────────────── */
.badge-red {
  box-shadow: 0 0 22px rgba(255, 68, 68, 0.22) !important;
}

/* ── 9. Step card stagger — Slide 11 ────────────────────── */
.step-card:nth-child(1) { animation-delay: 0.08s; }
.step-card:nth-child(2) { animation-delay: 0.18s; }
.step-card:nth-child(3) { animation-delay: 0.28s; }

/* ── 10. Partner card stagger — Slide 8 ─────────────────── */
.partner-card:nth-child(1) { animation-delay: 0.06s; }
.partner-card:nth-child(2) { animation-delay: 0.14s; }
.partner-card:nth-child(3) { animation-delay: 0.22s; }
.partner-card:nth-child(4) { animation-delay: 0.30s; }
.partner-card:nth-child(5) { animation-delay: 0.38s; }

/* ── 11. Partner card color accents — Slide 8 ───────────── */
.partner-card.pc-circle  .partner-icon { color: #00d4ff !important; background: rgba(0,212,255,0.1) !important; }
.partner-card.pc-dlocal  .partner-icon { color: #00ff88 !important; background: rgba(0,255,136,0.1) !important; border-color: rgba(0,255,136,0.2) !important; }
.partner-card.pc-baokim  .partner-icon { color: #a78bfa !important; background: rgba(167,139,250,0.1) !important; border-color: rgba(167,139,250,0.2) !important; }
.partner-card.pc-hello   .partner-icon { color: #fbbf24 !important; background: rgba(251,191,36,0.1) !important; border-color: rgba(251,191,36,0.2) !important; }
.partner-card.pc-gaian   .partner-icon { color: #00ffaa !important; background: rgba(0,255,170,0.1) !important; border-color: rgba(0,255,170,0.2) !important; }

.partner-card.pc-circle::before  { background: linear-gradient(180deg, #00d4ff, #0088cc) !important; }
.partner-card.pc-dlocal::before  { background: linear-gradient(180deg, #00ff88, #009952) !important; }
.partner-card.pc-baokim::before  { background: linear-gradient(180deg, #a78bfa, #5b1ce0) !important; }
.partner-card.pc-hello::before   { background: linear-gradient(180deg, #fbbf24, #b45306) !important; }
.partner-card.pc-gaian::before   { background: linear-gradient(180deg, #00ffaa, #00997a) !important; }

/* ── 12. key-point s13 hover colors ─────────────────────── */
.key-point:nth-child(1):hover { background: rgba(0,212,255,0.07) !important; border-color: rgba(0,212,255,0.4) !important; box-shadow: 0 12px 32px rgba(0,212,255,0.15) !important; }
.key-point:nth-child(2):hover { background: rgba(0,255,136,0.07) !important; border-color: rgba(0,255,136,0.4) !important; box-shadow: 0 12px 32px rgba(0,255,136,0.15) !important; }
.key-point:nth-child(3):hover { background: rgba(167,139,250,0.07) !important; border-color: rgba(167,139,250,0.4) !important; box-shadow: 0 12px 32px rgba(167,139,250,0.15) !important; }

.key-point:nth-child(1) .point-icon { color: #00d4ff !important; }
.key-point:nth-child(2) .point-icon { color: #00ff88 !important; background: rgba(0,255,136,0.1) !important; }
.key-point:nth-child(3) .point-icon { color: #a78bfa !important; background: rgba(167,139,250,0.1) !important; }
.key-point:nth-child(2):hover .point-icon { background: rgba(0,255,136,0.25) !important; color: #fff !important; }
.key-point:nth-child(3):hover .point-icon { background: rgba(167,139,250,0.25) !important; color: #fff !important; }

/* ── 13. stat-item card hover (s1) ──────────────────────── */
.stat-item:nth-child(2):hover { background: rgba(0,255,136,0.07) !important; border-color: rgba(0,255,136,0.35) !important; }
.stat-item:nth-child(3):hover { background: rgba(167,139,250,0.07) !important; border-color: rgba(167,139,250,0.35) !important; }
.stat-item:nth-child(4):hover { background: rgba(251,191,36,0.07) !important; border-color: rgba(251,191,36,0.35) !important; }