/* ============================================================
   LLM Wiki — Custom Styles
   Animations · Mobile optimizations · Accessibility fixes
   ============================================================ */

/* ── Keyframe animations ───────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.25); }
  50%       { box-shadow: 0 0 20px 2px rgba(99, 102, 241, 0.35); }
}
@keyframes flow-dash {
  to { stroke-dashoffset: -24; }
}

/* ── Hero entrance ─────────────────────────────────────────── */
.anim-nav    { animation: fade-in 0.5s ease-out 0.3s both; }
.anim-badge  { animation: fade-up 0.6s ease-out 0.1s both; }
.anim-title  { animation: fade-up 0.6s ease-out 0.2s both; }
.anim-sub    { animation: fade-up 0.6s ease-out 0.3s both; }
.anim-cta    { animation: fade-up 0.6s ease-out 0.4s both; }
.anim-visual { animation: fade-in 0.8s ease-out 0.5s both; }

/* ── Repeating effects ─────────────────────────────────────── */
.badge-pulse { animation: pulse-glow 3s ease-in-out infinite; }
.flow-line   { stroke-dasharray: 8 4; animation: flow-dash 1.2s linear infinite; }

/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Mobile drawer ─────────────────────────────────────────── */
.drawer-open { transform: translateX(0) !important; }
#mobile-drawer {
  transform: translateX(100%);
  transition: transform 0.3s ease;
  /* Extra bottom padding for home indicator on iPhones */
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* ── Horizontal overflow guard ─────────────────────────────── */
html, body { overflow-x: hidden; }

/* ── Safe-area padding for notched phones ──────────────────── */
@supports (padding: env(safe-area-inset-left)) {
  nav#navbar {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  footer {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
  }
}

/* ── iOS input zoom prevention (font-size must be ≥ 16px) ──── */
input[type="email"],
input[type="text"],
input[type="search"] {
  font-size: 16px;
}

/* ── Icon-only touch targets (min 44 × 44 px) ─────────────── */
.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Modal scrollable inner on small screens ───────────────── */
.modal-inner {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Mobile-specific tweaks ────────────────────────────────── */
@media (max-width: 767px) {
  /* Nav drawer links: comfortable tap height */
  #mobile-drawer nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Primary / secondary CTA buttons */
  .cta-button {
    min-height: 48px;
  }

  /* FAQ & accordion trigger buttons */
  .faq-btn,
  .uc-acc-btn {
    min-height: 52px;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .anim-nav, .anim-badge, .anim-title, .anim-sub,
  .anim-cta, .anim-visual, .badge-pulse, .flow-line {
    animation: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #mobile-drawer {
    transition: none;
  }
}