/* ══════════════════════════════════════
   Motion — keyframes, utilities, view transitions
   ══════════════════════════════════════ */

@keyframes word-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes ambient-pulse {
  0%   { opacity: 0.45; transform: scale(0.96); }
  100% { opacity: 0.95; transform: scale(1.04); }
}

@keyframes glass-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.005); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes ripple-out {
  0% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.4);
  }
}

@keyframes nav-indicator-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Skeleton shimmer utility ── */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 6px;
}

/* ── Stagger-children utility (set --i on each child) ── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(8px);
  animation: word-reveal 540ms var(--ease-out-soft) forwards;
  animation-delay: calc(30ms * var(--i, 0));
}

/* ── Magnetic cursor spotlight (CSS hook; JS sets --mx, --my, --has-pointer) ── */
@media (hover: hover) {
  .glass {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .glass::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      280px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, 0.08),
      transparent 60%
    );
    opacity: var(--has-pointer, 0);
    transition: opacity var(--dur-med) var(--ease-out-soft);
    z-index: 2;
    mix-blend-mode: screen;
  }
}

/* ── Tap ripple (.glass-btn gets the dot via JS, this animates it) ── */
.glass-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.glass-btn .ripple-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 3;
  animation: ripple-out 540ms var(--ease-out-soft) forwards;
}

/* ── Magnetic button: JS sets --magnet-x, --magnet-y on hover ── */
[data-magnetic] {
  transition: transform var(--dur-fast) var(--ease-out-soft);
  will-change: transform;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-magnetic] {
    transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
  }
}

/* ── Glass breathing on quiet pages (subtle) ── */
@media (prefers-reduced-motion: no-preference) {
  .glass-verse {
    animation: glass-breathe var(--dur-ambient) ease-in-out infinite;
  }
}

/* ── Language toggle: globe spin ── */
.nav-lang i {
  display: inline-block;
  transition: transform 480ms var(--ease-spring);
}

.nav-lang.spinning i {
  transform: rotate(360deg);
}

/* ── Scroll-reveal verses ── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(2px);
  transition:
    opacity var(--dur-slow) var(--ease-out-soft),
    transform var(--dur-slow) var(--ease-out-soft),
    filter var(--dur-slow) var(--ease-out-soft);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── View transitions on /bible content area ── */
.bible-view {
  view-transition-name: bible-content;
}

@keyframes slide-out-left {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-3%); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(3%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-out-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(3%); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-3%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scale-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.02); }
}
@keyframes scale-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

::view-transition-old(bible-content) {
  animation: scale-fade-out 240ms var(--ease-in-out-smooth) forwards;
}
::view-transition-new(bible-content) {
  animation: scale-fade-in 320ms var(--ease-in-out-smooth) forwards;
}

html[data-direction="forward"] ::view-transition-old(bible-content) {
  animation: slide-out-left 280ms var(--ease-in-out-smooth) forwards;
}
html[data-direction="forward"] ::view-transition-new(bible-content) {
  animation: slide-in-right 320ms var(--ease-in-out-smooth) forwards;
}
html[data-direction="back"] ::view-transition-old(bible-content) {
  animation: slide-out-right 280ms var(--ease-in-out-smooth) forwards;
}
html[data-direction="back"] ::view-transition-new(bible-content) {
  animation: slide-in-left 320ms var(--ease-in-out-smooth) forwards;
}