/* Non-Critical CSS - Deferred Loading for Performance Optimization */
/* This file contains all styles not needed for above-the-fold rendering */

/* Animation delay utilities for hydration-safe animations */
.animation-delay-0 { animation-delay: 0s; }
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-2000 { animation-delay: 2s; }

/* Animated underline utility for links */
.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  text-decoration: none;
  transition: background-size 200ms ease, color 200ms ease;
}
.link-underline:hover { background-size: 100% 2px; }

/* Gradient variant for special links */
.link-underline-gradient {
  --link-grad-from: hsl(var(--primary) / 0.9);
  --link-grad-to: hsl(var(--accent) / 0.9);
  position: relative;
  text-decoration: none;
  transition: color 220ms ease;
}
.link-underline-gradient::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0%;
  background-image: linear-gradient(90deg, var(--link-grad-from), var(--link-grad-to));
  transition: width 220ms ease;
}
.link-underline-gradient:hover::after,
.link-underline-gradient:focus-visible::after { width: 100%; }
.link-underline-gradient:hover,
.link-underline-gradient:focus-visible {
  background-image: linear-gradient(90deg, var(--link-grad-from), var(--link-grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Capacitor-native app presentation tweaks */
.is-capacitor-app #site-header { display: none !important; }
.is-capacitor-app body { background-color: hsl(var(--background)); }
.is-capacitor-app #app-content {
  padding-top: 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.is-capacitor-app footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
.is-capacitor-app.app-tabbar-visible footer {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Prose styling for blog content */
.prose {
  font-size: 0.875rem;
  line-height: 1.625;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-weight: 600;
  letter-spacing: -0.025em;
}
.prose h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}
.prose h2 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  margin-top: 1.25rem;
}
.prose h3 {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
  margin-top: 1.25rem;
}
.prose p { margin-bottom: 1rem; }
.prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
}
.prose a:hover { text-decoration: none; }
.prose ul, .prose ol {
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-bottom: 0.375rem; }
.prose blockquote {
  padding-left: 0.75rem;
  font-style: italic;
  border-left: 4px solid hsl(var(--muted-foreground) / 0.5);
  color: hsl(var(--muted-foreground));
  margin: 1rem 0;
}
.prose code:not(pre > code) {
  padding: 0.125rem 0.25rem;
  background-color: hsl(var(--muted));
  border-radius: 0.125rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.75rem;
  color: hsl(var(--foreground));
}
.prose pre {
  background-color: hsl(var(--muted));
  padding: 0.75rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  margin: 1rem 0;
  font-size: 0.75rem;
  color: hsl(var(--foreground));
}
.prose pre code {
  background-color: transparent;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.75rem;
  color: hsl(var(--foreground));
}
.prose img {
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin: 1.25rem 0;
}
.prose audio {
  width: 100%;
  border-radius: 0.5rem;
  margin: 1.25rem 0;
}
.prose hr {
  margin: 1.75rem 0;
  border-color: hsl(var(--border));
}

/* Dark mode prose adjustments */
.dark .prose a { color: hsl(var(--primary)); }
.dark .prose blockquote {
  border-color: hsl(var(--muted-foreground) / 0.7);
  color: hsl(var(--muted-foreground));
}
.dark .prose code:not(pre > code) {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.dark .prose pre {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.dark .prose pre code {
  background-color: transparent;
  color: hsl(var(--secondary-foreground));
}

/* Highlight style for search terms */
mark {
  background-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--primary-foreground));
  border-radius: 0.125rem;
  padding: 0 0.125rem;
}

/* Tiptap specific styles */
.tiptap {
  max-width: none;
  padding: 0.75rem;
}
.tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  height: 0;
}
.tiptap:focus-visible { outline: none; }

/* Marquee styles */
.marquee-container::before,
.marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3rem;
  z-index: 2;
  pointer-events: none;
}
.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, hsl(var(--background)), transparent);
}
.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, hsl(var(--background)), transparent);
}
.marquee-content {
  display: inline-block;
  animation: marquee-animation 120s linear infinite;
  animation-play-state: running;
}
.marquee-container:hover .marquee-content { animation-play-state: paused; }
.marquee-text-segment { display: inline-block; }

@keyframes marquee-animation {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}

/* Custom shadow for Tool of the Day */
.shadow-primary-glow {
  box-shadow: 0 0 25px 0 rgba(var(--primary-rgb), 0.25), 0 0 45px -10px rgba(var(--primary-rgb), 0.2);
}
.dark .shadow-primary-glow {
  box-shadow: 0 0 30px 0 rgba(var(--primary-rgb), 0.3), 0 0 50px -15px rgba(var(--primary-rgb), 0.25);
}

/* Additional Keyframes for animations */
@keyframes pop-in {
  0% { transform: scale(0.9); opacity: 0.7; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes focus-glow {
  from { box-shadow: 0 0 0 0px rgba(var(--primary-rgb), 0.3), 0 0 0 0px rgba(var(--primary-rgb), 0.2); }
  to { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0), 0 0 0 12px rgba(var(--primary-rgb), 0); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 35px -5px rgba(var(--primary-rgb), 0.2); }
  50% { box-shadow: 0 0 45px 0px rgba(var(--primary-rgb), 0.3); }
}
@keyframes pulse-subtle {
  50% { opacity: 0.8; transform: scale(1.08); }
}
@keyframes draw-line-vertical {
  to { stroke-dashoffset: 0; }
}
@keyframes genesis-pulse {
  0% { transform: scale(0.1); opacity: 0; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Animation utilities */
.animate-pulse-glow { animation: pulse-glow 3.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-pulse-subtle { animation: pulse-subtle 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-draw-line { animation: draw-line 0.5s ease-out forwards; }
.animate-draw-line-vertical { animation: draw-line-vertical 0.5s ease-out forwards; }
.animate-pop-in { animation: pop-in 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.animate-genesis-pulse { animation: genesis-pulse 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

/* Motion-safe fade-in up and stagger utilities */
@media (prefers-reduced-motion: no-preference) {
  .fade-in-up {
    opacity: 0;
    animation: fade-in-up 0.5s ease-out both;
  }
  .stagger-grid > * .card-inner { animation-delay: 0.02s; }
  .stagger-grid > *:nth-child(2) .card-inner { animation-delay: 0.08s; }
  .stagger-grid > *:nth-child(3) .card-inner { animation-delay: 0.14s; }
  .stagger-grid > *:nth-child(4) .card-inner { animation-delay: 0.20s; }
  .stagger-grid > *:nth-child(5) .card-inner { animation-delay: 0.26s; }
  .stagger-grid > *:nth-child(6) .card-inner { animation-delay: 0.32s; }
  .stagger-grid > * { animation: fade-in-up 0.5s ease-out both; }
  .stagger-grid > *:nth-child(2) { animation-delay: 0.08s; }
  .stagger-grid > *:nth-child(3) { animation-delay: 0.14s; }
  .stagger-grid > *:nth-child(4) { animation-delay: 0.20s; }
}

/* Thin scrollbar for specific elements */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground)/0.5) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground)/0.3);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground)/0.5);
}

/* Responsive Typography for Prose */
@media (max-width: 640px) {
  .prose {
    font-size: 0.75rem;
    line-height: 1.5;
  }
  .prose h1 { font-size: 1.25rem; }
  .prose h2 { font-size: 1.125rem; }
  .prose h3 { font-size: 1rem; }
  .prose code:not(pre > code), .prose pre, .prose pre code {
    font-size: 0.6875rem;
  }
}