/* ============================================================
 * Custom styles to complement Tailwind
 * ============================================================ */

/* Smooth scrolling for in-page anchors */
html { scroll-behavior: smooth; }

/* Selection */
::selection { background: #4f46e5; color: #fff; }

/* Scrollbar — webkit only */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #818cf8; }

/* Line clamp helpers */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Hide details default marker */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Focus visible */
:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; border-radius: 6px; }

/* Code-block-like pre in hero */
pre code { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ============================================================
 * Sticky header — shadow grows after scroll
 * ============================================================ */
header.sticky { transition: box-shadow .25s ease, background-color .25s ease; }
header.sticky.is-scrolled { box-shadow: 0 10px 30px -10px rgba(15, 23, 42, .15); }

/* ============================================================
 * Reveal-on-scroll animations
 * Usage:
 *   <div class="reveal">…</div>   (legacy)
 *   <div data-reveal>…</div>
 *   <div data-reveal="left">…</div>
 *   <div data-reveal="right">…</div>
 *   <div data-reveal="scale">…</div>
 *   <ul data-reveal-group><li data-reveal>…</li>…</ul>  (auto-stagger)
 * ============================================================ */
.reveal,
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.21,.6,.35,1), transform .7s cubic-bezier(.21,.6,.35,1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX( 40px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="fade"]  { transform: none; }

.reveal.is-visible,
[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
 * Card hover lift + shine
 * ============================================================ */
.card-lift { transition: transform .35s cubic-bezier(.21,.6,.35,1), box-shadow .35s ease, border-color .25s ease; }
.card-lift:hover { transform: translateY(-6px); }

.card-shine { position: relative; overflow: hidden; }
.card-shine::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .9s ease;
  pointer-events: none;
}
.card-shine:hover::before { transform: translateX(120%); }

/* ============================================================
 * Button micro-interactions
 * ============================================================ */
.btn-press { transition: transform .15s ease, box-shadow .25s ease; }
.btn-press:active { transform: scale(.97); }

/* Ripple effect for [data-ripple] elements */
[data-ripple] { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(0);
  animation: ripple-anim .7s ease-out;
  pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(2.4); opacity: 0; } }

/* ============================================================
 * Extra keyframe animations
 * ============================================================ */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.animate-shimmer-text {
  background: linear-gradient(90deg, #1e1b4b 0%, #4f46e5 25%, #a5b4fc 50%, #4f46e5 75%, #1e1b4b 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

@keyframes gradient-pan {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-pan 8s ease infinite;
}

@keyframes float-slow { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
.animate-float-slow { animation: float-slow 7s ease-in-out infinite; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0    rgba(99,102,241,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0    rgba(99,102,241,0); }
}
.animate-pulse-ring { animation: pulse-ring 2.4s ease-out infinite; }

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-6deg); }
  75%      { transform: rotate( 6deg); }
}
.hover-wiggle:hover { animation: wiggle .4s ease-in-out; }

/* Mobile menu icon morph */
.is-open svg { transform: rotate(90deg); transition: transform .25s ease; }

/* Image zoom on hover */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .6s cubic-bezier(.21,.6,.35,1); }
.img-zoom:hover img { transform: scale(1.06); }

/* Hide default reCAPTCHA badge (allowed by Google if credit text is shown) */
.grecaptcha-badge { visibility: hidden !important; }

/* Nav link underline */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute; left: 50%; bottom: 4px;
  width: 0; height: 2px;
  background: currentColor;
  transition: width .25s ease, left .25s ease;
  border-radius: 999px;
}
.nav-link:hover::after { width: calc(100% - 2rem); left: 1rem; }