/* ksim.pro - custom styles on top of Tailwind Play CDN */

::selection {
  background-color: rgba(29, 111, 165, 0.4);
  color: #ffffff;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "ss01", "cv11";
}

.quiet-link {
  transition: color 200ms ease;
}

/* card glow on hover (for FourLetters cards) */
.group:hover .card-glow {
  opacity: 1;
  background: radial-gradient(circle, rgba(29, 111, 165, 0.18), transparent 70%);
}
.card-art { opacity: 0.18; }
.group:hover .card-art { opacity: 0.32; }

/* ----------------------------------------------------------------
   Hero ambient: two slow-orbiting blobs in counter-phase
   ---------------------------------------------------------------- */
@keyframes hero-orbit-a {
  0%   { transform: translate(0, 0)         scale(1);    }
  50%  { transform: translate(-90px, 60px)  scale(1.08); }
  100% { transform: translate(0, 0)         scale(1);    }
}
@keyframes hero-orbit-b {
  0%   { transform: translate(0, 0)         scale(1);   }
  50%  { transform: translate(80px, -70px)  scale(1.1); }
  100% { transform: translate(0, 0)         scale(1);   }
}
.hero-orbit-a {
  transform-origin: 1200px 220px;
  animation: hero-orbit-a 38s ease-in-out infinite;
  will-change: transform;
}
.hero-orbit-b {
  transform-origin: 320px 780px;
  animation: hero-orbit-b 46s ease-in-out infinite;
  will-change: transform;
}

/* ----------------------------------------------------------------
   Card art animations (FourLetters)
   ---------------------------------------------------------------- */
@keyframes art-breathe-slow {
  0%, 100% { transform: translateY(0)    scaleY(1);    }
  50%      { transform: translateY(-3px) scaleY(1.05); }
}
@keyframes art-breathe-slower {
  0%, 100% { transform: translateY(0)    scaleY(1);    }
  50%      { transform: translateY(3px)  scaleY(0.95); }
}
@keyframes art-pulse-dots {
  0%, 100% { opacity: 1;    }
  50%      { opacity: 0.4;  }
}
.art-breathe-slow   { transform-origin: 100px 100px; animation: art-breathe-slow   11s ease-in-out infinite; }
.art-breathe-slower { transform-origin: 100px 100px; animation: art-breathe-slower 14s ease-in-out infinite; }
.art-pulse-dots     { animation: art-pulse-dots 6s ease-in-out infinite; }

@keyframes art-dot-wave {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.7); opacity: 0.35; }
}
.art-dot-wave {
  transform-origin: center;
  transform-box: fill-box;
  animation: art-dot-wave 4.5s ease-in-out infinite;
}

@keyframes art-drift-a { 0%,100% { transform: translate(0,0); }    50% { transform: translate(2px,-2px); } }
@keyframes art-drift-b { 0%,100% { transform: translate(0,0); }    50% { transform: translate(-3px,2px); } }
@keyframes art-drift-c { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(2px,2px) rotate(0.6deg); } }
.art-drift-a { transform-origin: 100px 100px; animation: art-drift-a 13s ease-in-out infinite; }
.art-drift-b { transform-origin: 100px 100px; animation: art-drift-b  9s ease-in-out infinite; }
.art-drift-c { transform-origin: 100px 100px; animation: art-drift-c  7s ease-in-out infinite; }

@keyframes art-arc-a { 0%,100% { transform: scale(1);    opacity: 1;    } 50% { transform: scale(1.06); opacity: 0.85; } }
@keyframes art-arc-b { 0%,100% { transform: scale(1);    opacity: 1;    } 50% { transform: scale(1.04); opacity: 0.8;  } }
@keyframes art-arc-c { 0%,100% { transform: scale(1);    opacity: 1;    } 50% { transform: scale(1.02); opacity: 0.75; } }
.art-arc-a { transform-origin: 100px 100px; animation: art-arc-a  8s ease-in-out infinite; }
.art-arc-b { transform-origin: 100px 100px; animation: art-arc-b 12s ease-in-out infinite; animation-delay: -2s; }
.art-arc-c { transform-origin: 100px 100px; animation: art-arc-c 16s ease-in-out infinite; animation-delay: -4s; }

@media (prefers-reduced-motion: reduce) {
  .hero-orbit-a, .hero-orbit-b,
  .art-breathe-slow, .art-breathe-slower, .art-pulse-dots,
  .art-dot-wave,
  .art-drift-a, .art-drift-b, .art-drift-c,
  .art-arc-a, .art-arc-b, .art-arc-c {
    animation: none !important;
  }
}

/* ----------------------------------------------------------------
   Article typography (used by blog/article.php)
   ---------------------------------------------------------------- */
.prose-article {
  color: #F2F2F0;
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.prose-article > * + * { margin-top: 1.25rem; }
.prose-article h2 { margin-top: 3.5rem; margin-bottom: 1.25rem; font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; }
.prose-article h3 { margin-top: 2.5rem; margin-bottom: 1rem;    font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }
.prose-article a { color: #1D6FA5; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose-article a:hover { text-decoration-thickness: 2px; }
.prose-article ul, .prose-article ol { margin: 1.25rem 0; padding-left: 1.5rem; }
.prose-article ul { list-style: disc; }
.prose-article ol { list-style: decimal; }
.prose-article li { margin: 0.5rem 0; }
.prose-article li::marker { color: rgba(242, 242, 240, 0.4); }
.prose-article blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid #1D6FA5;
  color: #8E949E;
  font-style: italic;
}
.prose-article code {
  background: rgba(255, 255, 255, 0.06);
  color: #e8e8e6;
  border-radius: 4px;
  padding: 0.125rem 0.375rem;
  font-size: 0.92em;
  font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.prose-article pre {
  background: #0a0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  padding: 1.25rem;
  overflow-x: auto;
  font-size: 0.9rem;
  margin: 1.5rem 0;
}
.prose-article pre code { background: transparent; padding: 0; }
.prose-article strong { color: #ffffff; font-weight: 600; }
.prose-article hr { margin: 2.5rem 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* soft scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); }