/* ============================================================
   The Bible API - Global UX Motion System
   Smooth micro-interactions, ambient motion, scroll progress
   ============================================================ */

/* ------------------ Scroll Progress Bar ------------------
   Sits flush against the bottom edge of the site header with
   zero spacing. scroll-progress.js appends the wrap inside
   .site-header and positions it absolutely at bottom:0, so the
   bar visually "attaches" to the navbar with no gap.

   IMPORTANT: .site-header uses position: fixed (see styles.css)
   so the navbar always remains visible at the top of the viewport.
   We do NOT override its position here because doing so would
   break the fixed navbar behavior. position: fixed establishes
   its own containing block for absolute children, so the
   progress bar still anchors correctly to the header. */

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
  z-index: 45;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  overflow: visible;
}

.scroll-progress__bar {
  position: relative;
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary) 85%, transparent) 0%,
    var(--color-primary) 45%,
    var(--color-accent) 100%
  );
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-primary) 45%, transparent);
  transform-origin: left center;
  transition: width 0.08s linear;
  border-radius: 0 2px 2px 0;
}

/* Reading-completion "leading edge" glow.
   Soft gradient halo that follows the right edge of the fill,
   gently fades outward, and adapts to light/dark theme via
   CSS variables. Pure CSS - no JS loops. */
.scroll-progress__bar::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 22px;
  height: 14px;
  transform: translateY(-50%);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--color-accent) 85%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 45%, transparent) 35%,
    transparent 75%
  );
  filter: blur(3px);
  opacity: 0.9;
  pointer-events: none;
  border-radius: 50%;
  transition: opacity 0.2s ease;
}

/* Hide the leading glow when the bar has zero progress (short pages). */
.scroll-progress__bar[style*="width: 0%"]::after,
.scroll-progress__bar[style*="width: 0.00%"]::after {
  opacity: 0;
}

/* Dark theme: slightly warmer/softer glow using the accent variable. */
[data-theme="dark"] .scroll-progress__bar::after {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--color-accent) 90%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 50%, transparent) 35%,
    transparent 75%
  );
  opacity: 0.85;
}

@media (max-width: 720px) {
  .scroll-progress {
    height: 2px;
  }
  .scroll-progress__bar::after {
    width: 16px;
    height: 10px;
    right: -4px;
  }
}

/* ------------------ Button micro-interactions ------------------ */
.btn,
button.btn,
.pg-mini-btn,
.pg-preset-btn,
.pg-toggle-btn,
.nav-toggle,
.theme-toggle {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease-out,
    border-color 220ms ease-out,
    color 220ms ease-out !important;
  will-change: transform;
}

.btn:hover,
.pg-mini-btn:hover,
.pg-preset-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-md);
}

.btn:active,
.pg-mini-btn:active,
.pg-preset-btn:active,
.pg-toggle-btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 100ms;
}

.btn-primary:hover {
  box-shadow:
    var(--shadow-md),
    0 0 0 5px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.theme-toggle:hover,
.nav-toggle:hover {
  transform: scale(1.1);
}

/* ------------------ Card / panel lift ------------------ */
.card,
.feature-card,
.docs-card,
.pg-panel,
.pg-docs-cta {
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease-out;
}

.card:hover,
.feature-card:hover,
.docs-card:hover,
.pg-docs-cta:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(
    in srgb,
    var(--color-primary) 40%,
    var(--color-border)
  );
}

/* ------------------ Link smooth transitions ------------------ */
a {
  transition:
    color 220ms ease-out,
    opacity 220ms ease-out,
    text-decoration-color 220ms ease-out;
}

a:hover {
  opacity: 0.85;
}

.nav-list a,
.footer-links a,
.sidebar-title + ul a {
  position: relative;
  transition: color 220ms ease-out;
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1.5px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ------------------ Input / select focus ------------------ */
.pg-input,
.pg-select,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
select,
textarea {
  transition:
    border-color 220ms ease-out,
    box-shadow 220ms ease-out,
    background-color 220ms ease-out,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.pg-input:hover,
.pg-select:hover {
  border-color: color-mix(
    in srgb,
    var(--color-primary) 50%,
    var(--color-border)
  );
}

.pg-input:focus,
.pg-select:focus,
.pg-input:focus-visible,
.pg-select:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent),
    0 6px 18px color-mix(in srgb, var(--color-primary) 16%, transparent) !important;
}

/* ------------------ Ambient motion (subtle but visible) ------------------ */
@keyframes motionFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes motionFloatLogo {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes motionHeroDrift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes motionBreathShadow {
  0%,
  100% {
    box-shadow:
      var(--shadow-sm),
      0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent);
  }
  50% {
    box-shadow:
      var(--shadow-md),
      0 0 24px 4px color-mix(in srgb, var(--color-primary) 22%, transparent);
  }
}

@keyframes motionBgDrift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes motionCardIdleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* Navbar logo: slow, very subtle continuous lift */
.brand-icon {
  animation: motionFloatLogo 6s ease-in-out infinite;
  will-change: transform;
}

/* Hero section inner elements get a slow vertical drift (1-3px) */
.hero .eyebrow,
.hero h1,
.hero .hero-title,
.hero .lead,
.hero .hero-subtitle,
.playground-header,
.docs-hero,
.docs-hero .eyebrow,
.docs-hero h1 {
  animation: motionHeroDrift 7s ease-in-out infinite;
  will-change: transform;
}

.hero h1,
.hero .hero-title,
.docs-hero h1 {
  animation-delay: 0.4s;
}

.hero .lead,
.hero .hero-subtitle {
  animation-delay: 0.8s;
}

/* Breathing accent on primary CTAs (clearly noticeable but soft) */
.hero .btn-primary,
.pg-run-btn.btn-primary,
.pg-docs-cta .btn-primary,
.playground-header ~ * .btn-primary {
  animation: motionBreathShadow 4.5s ease-in-out infinite;
}

/* Subtle background drift on hero / large CTA sections */
.hero,
.pg-docs-cta {
  background-size: 200% 200%;
  animation: motionBgDrift 18s ease-in-out infinite;
}

/* Cards / panels: gentle idle float (very subtle but visible).
   Disabled on hover so the hover lift still feels crisp. */
.feature-card,
.docs-card,
.pg-panel {
  animation: motionCardIdleFloat 8s ease-in-out infinite;
  will-change: transform;
}

.feature-card:nth-child(2),
.docs-card:nth-child(2) {
  animation-delay: 1.2s;
}

.feature-card:nth-child(3),
.docs-card:nth-child(3) {
  animation-delay: 2.4s;
}

.feature-card:nth-child(4),
.docs-card:nth-child(4) {
  animation-delay: 3.6s;
}

.feature-card:hover,
.docs-card:hover,
.pg-panel:hover {
  animation-play-state: paused;
}

/* Slow shimmer on status loading badge (respects existing spinner) */
.pg-status-badge.is-loading {
  animation: motionBreathShadow 3s ease-in-out infinite;
}

/* ------------------ Reveal smoothing ------------------ */
.reveal {
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------ Reduced motion ------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-progress__bar {
    transition: none !important;
  }

  .scroll-progress__bar::after {
    filter: none !important;
    opacity: 0.6 !important;
  }

  .btn:hover,
  .pg-mini-btn:hover,
  .pg-preset-btn:hover,
  .card:hover,
  .feature-card:hover,
  .docs-card:hover,
  .pg-panel:hover,
  .pg-docs-cta:hover,
  .theme-toggle:hover,
  .nav-toggle:hover {
    transform: none !important;
  }

  .brand-icon,
  .hero,
  .pg-docs-cta,
  .hero .btn-primary,
  .pg-run-btn.btn-primary,
  .pg-docs-cta .btn-primary,
  .pg-status-badge.is-loading,
  .feature-card,
  .docs-card,
  .pg-panel,
  .hero .eyebrow,
  .hero h1,
  .hero .hero-title,
  .hero .lead,
  .hero .hero-subtitle,
  .playground-header,
  .docs-hero,
  .docs-hero .eyebrow,
  .docs-hero h1 {
    animation: none !important;
  }
}