.sparkle-delay-600 {
  animation-delay: 0.6s;
}

.sparkle-delay-1100 {
  animation-delay: 1.1s;
}

@keyframes svc-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.svc-card {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .svc-card.svc-visible {
    animation: svc-fade-up 0.45s ease-out forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Presentation page polish — uses theme tokens so light/dark stay legible */
#main-content section {
  position: relative;
}

#main-content .card,
#main-content .svc-card > a,
#main-content .svc-card > div[role="article"] {
  box-shadow: 0 10px 30px oklch(var(--bc) / 0.08);
}

#main-content .card:hover,
#main-content .svc-card > a:hover {
  box-shadow: 0 18px 38px oklch(var(--bc) / 0.16);
}

#main-content p {
  text-wrap: pretty;
}

#main-content .btn {
  letter-spacing: 0.01em;
}

/* Form controls inherit DaisyUI theme styling. We only fine-tune the
   focus ring so it matches the brand purple accent on either theme. */
#main-content .input:focus,
#main-content .select:focus,
#main-content .textarea:focus {
  border-color: #5B21B6;
  box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.20);
}

[data-theme="dracula"] #main-content .input:focus,
[data-theme="dracula"] #main-content .select:focus,
[data-theme="dracula"] #main-content .textarea:focus {
  border-color: #C4B5FD;
  box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.25);
}