/* ==========================================================================
   Fun layer — playful extras on every page (see assets/js/fun.js).
   Everything here switches off for "reduce motion"; hover-only bits skip touch screens.
   ========================================================================== */

/* ---------- scroll progress ---------- */
.fx-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 80; pointer-events: none;
  background: linear-gradient(90deg, #b53033, #f2d34b); transform-origin: left; transform: scaleX(0);
  box-shadow: 0 0 10px rgba(242, 211, 75, .6);
}

/* ---------- cursor ring + sparkle trail (mouse only) ---------- */
.fx-ring, .fx-dot { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; border-radius: 50%; will-change: transform; }
.fx-ring {
  width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid #b53033;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.35);
  transition: width .3s cubic-bezier(.2,1.4,.4,1), height .3s cubic-bezier(.2,1.4,.4,1), margin .3s cubic-bezier(.2,1.4,.4,1), background .3s, border-color .3s, opacity .3s;
}
.fx-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #b53033; box-shadow: 0 0 0 1.5px rgba(255,255,255,.6); transition: opacity .3s; }
.fx-ring.is-hot { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(242, 211, 75, .18); border-color: #f2d34b; }
.fx-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.fx-ring.is-hidden, .fx-dot.is-hidden { opacity: 0; }
.fx-trail { position: fixed; left: 0; top: 0; z-index: 119; pointer-events: none; font-size: 12px; line-height: 1; }

/* ---------- click bursts / confetti ---------- */
.fx-bit {
  position: fixed; left: 0; top: 0; z-index: 130; pointer-events: none; line-height: 1; font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 8px rgba(255,255,255,.45); will-change: transform, opacity;
}
.fx-toast {
  position: fixed; left: 50%; top: 22%; z-index: 131; pointer-events: none; translate: -50% 0;
  font-family: var(--serif); font-size: clamp(48px, 10vw, 110px); color: #fff; text-shadow: 0 6px 30px rgba(181,48,51,.8), 0 0 2px #000;
  animation: fxToast 2.2s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes fxToast { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 15% { opacity: 1; transform: scale(1.08) rotate(3deg); } 25% { transform: scale(1) rotate(-2deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(.96); } }

/* ---------- hover letters: big headlines hop letter by letter ---------- */
.fx-lt, .split.fx-settled .ch { display: inline-block; transition: transform .35s cubic-bezier(.2, 1.9, .4, 1), color .25s; }
.split.fx-settled .ch { animation: none !important; opacity: 1; filter: none; transform: none; }
@media (hover: hover) {
  .fx-lt:hover, .split.fx-settled .ch:hover { transform: translateY(-.14em) rotate(-7deg) scale(1.14); color: var(--fx-pop, #f2d34b); transition-duration: .12s; }
}
.fx-lt.is-kick, .split.fx-settled .ch.is-kick { animation: fxKick .5s cubic-bezier(.2, 1.9, .4, 1); }
@keyframes fxKick { 30% { transform: translateY(-.22em) rotate(-10deg) scale(1.18); color: var(--fx-pop, #f2d34b); } }
/* headings on cream need a dark pop colour */
.ct-title, .m-collab h2, .h-marquee, .sh-merch h2 { --fx-pop: #111; }

/* ---------- 3D tilt + glare ---------- */
.fx-tilt { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .9, .3, 1); will-change: transform; }
.fx-tilt.is-tilting { transition-duration: .12s; }
.fx-glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: inherit; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.38), rgba(255,255,255,0) 55%);
  mix-blend-mode: overlay;
}
.fx-tilt.is-tilting .fx-glare { opacity: 1; }

/* ---------- doodles float, wiggle, spin ---------- */
.fx-doodle { pointer-events: auto !important; cursor: pointer; animation: fxFloat var(--fx-float, 4s) ease-in-out var(--fx-delay, 0s) infinite alternate; }
@keyframes fxFloat { from { translate: 0 -4px; } to { translate: 0 4px; } }
@media (hover: hover) { .fx-doodle:hover { animation: fxWiggle .5s ease-in-out infinite; } }
@keyframes fxWiggle { 0%, 100% { rotate: 0deg; scale: 1.08; } 25% { rotate: -12deg; } 75% { rotate: 12deg; } }
.fx-doodle.is-spin { animation: fxSpin .8s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fxSpin { 0% { rotate: 0deg; scale: 1; } 50% { scale: 1.4; } 100% { rotate: 360deg; scale: 1; } }

/* ---------- footer icons jiggle ---------- */
@media (hover: hover) { .social-icons a:hover svg { animation: fxJelly .6s cubic-bezier(.2, 1.6, .4, 1); } }
@keyframes fxJelly { 30% { transform: scale(1.35, .75); } 50% { transform: scale(.8, 1.25); } 70% { transform: scale(1.12, .92); } 100% { transform: none; } }

/* ---------- yellow-tape highlights in the bio ---------- */
.fx-hl {
  background: linear-gradient(transparent 12%, #f2d34b 12%, #f2d34b 88%, transparent 88%) no-repeat left center / 0% 100%;
  color: inherit; padding: 0 .12em; margin: 0 -.06em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size .9s cubic-bezier(.7, 0, .2, 1), color .5s .3s;
}
.fx-hl.in { background-size: 100% 100%; color: #111; }

/* ---------- reduce motion: keep it all still ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-ring, .fx-dot, .fx-trail, .fx-bit, .fx-toast { display: none !important; }
  .fx-doodle { animation: none !important; }
  .fx-hl { transition: none; }
}

/* ---------- glowing words → scripture popup (assets/js/scripture.js) ---------- */
.sw {
  display: inline-block; cursor: pointer; border-radius: 4px; outline-offset: 4px; position: relative; --sw: 255, 59, 63;
  transition: color .3s, text-shadow .3s, transform .45s cubic-bezier(.2, 1.6, .4, 1);
}
.sw:hover, .sw:focus-visible { transform: scale(1.1); z-index: 2; }
.sw.is-chosen {
  transform: scale(1.32); z-index: 3; color: rgb(var(--sw)); transition-duration: .3s, .3s, .42s;
  text-shadow: 0 0 10px rgba(var(--sw), 1), 0 0 30px rgba(var(--sw), .9), 0 0 70px rgba(var(--sw), .7) !important;
}
.fx-hl .sw.is-chosen { color: #b3141a; }
/* the rest of the line melts away while the chosen word grows */
.sw-rest, .split.fx-settled .ch { transition: transform .35s cubic-bezier(.2, 1.9, .4, 1), color .25s, filter .38s ease, opacity .38s ease; }
.sw-dim, .split.fx-settled .ch.sw-dim, .split .ch.sw-dim { filter: blur(5px) !important; opacity: .4 !important; animation: none !important; }
.sw--yahweh { --sw: 255, 214, 74; }
.split.fx-settled .sw .ch:hover, .sw .fx-lt:hover { color: inherit; }   /* the whole word glows instead of one letter */
.sw:hover, .sw:focus-visible {
  color: rgb(var(--sw));
  text-shadow: 0 0 6px rgba(var(--sw), .9), 0 0 18px rgba(var(--sw), .75), 0 0 42px rgba(var(--sw), .55);
  animation: swPulse 1.6s ease-in-out infinite, swFloat 3.4s ease-in-out infinite;
}
/* lazy float with a gentle sway while hovered */
@keyframes swFloat {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: 0 -.07em; rotate: -2.5deg; }
  50% { translate: 0 -.12em; rotate: 0deg; }
  75% { translate: 0 -.06em; rotate: 2.5deg; }
}
.fx-hl .sw:hover { color: #b3141a; text-shadow: 0 0 8px rgba(255, 40, 46, .85), 0 0 22px rgba(255, 40, 46, .5); }
@keyframes swPulse { 50% { text-shadow: 0 0 10px rgba(var(--sw), 1), 0 0 28px rgba(var(--sw), .9), 0 0 64px rgba(var(--sw), .7); } }
/* touch screens can't hover, so give the words a soft breathing glow to show they're tappable */
@media (hover: none) { .h-hero .sw { animation: swHint 3.2s ease-in-out infinite; } }
@keyframes swHint { 50% { text-shadow: 0 0 14px rgba(var(--sw), .8); } }

html.sc-open { overflow: hidden; }
.sc-lb { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; --sw: 255, 59, 63; --sw-deep: 181, 48, 51; }
.sc-lb[data-kind="yahweh"] { --sw: 255, 214, 74; --sw-deep: 196, 142, 22; }
.sc-lb[hidden] { display: none; }
.sc-lb__veil { position: absolute; inset: 0; background: rgba(10, 8, 8, .45); opacity: 0; transition: opacity .38s, backdrop-filter .38s; }
.sc-lb.is-open .sc-lb__veil { opacity: 1; backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); }
.sc-lb__card {
  position: relative; width: min(560px, 100%); max-height: calc(100svh - 40px); overflow-x: hidden; overflow-y: auto; padding: 44px 40px 32px;
  background: linear-gradient(160deg, #1d1a1a, #121010); color: #f3ede3; border-radius: 18px; text-align: center;
  border: 1px solid rgba(var(--sw), .45);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(var(--sw), .28);
  opacity: 0; transform: scale(.94); transition: opacity .38s, transform .38s var(--ease-out, ease);
}
.sc-lb.is-open .sc-lb__card { opacity: 1; transform: none; }
.sc-lb__halo { position: absolute; inset: -40% -20% auto; height: 80%; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--sw), .28), transparent); animation: scHalo 5s ease-in-out infinite alternate; }
@keyframes scHalo { to { transform: translateY(12%) scale(1.15); opacity: .7; } }
.sc-lb__card > :not(.sc-lb__halo) { position: relative; transition: opacity .22s, transform .22s; }
.sc-lb__card.is-swap > :not(.sc-lb__halo):not(.sc-lb__x) { opacity: 0; transform: translateY(8px); }
.sc-lb__x { position: absolute !important; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, transform .3s; }
.sc-lb__x:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); }
.sc-lb__kicker { margin: 0 0 6px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--sw)); font-weight: 700; }
.sc-lb__name { margin: 0 0 14px; font-family: var(--serif); font-size: 20px; color: rgb(var(--sw)); text-shadow: 0 0 18px rgba(var(--sw), .55); }
.sc-lb__name[hidden] { display: none; }
.sc-lb__text { margin: 10px 0 18px; font-family: var(--serif); font-size: clamp(22px, 4.2vw, 30px); line-height: 1.32; quotes: "“" "”"; }
.sc-lb__text::before { content: open-quote; } .sc-lb__text::after { content: close-quote; }
.sc-lb[data-kind="christ"] .sc-lb__text { color: #ff6b6e; }   /* red letters, like a red-letter Bible */
.sc-lb__lord { font-variant: small-caps; color: rgb(var(--sw)); letter-spacing: .04em; }
.sc-lb__ref { margin: 0; font-weight: 700; font-size: 15px; opacity: .85; }
.sc-lb__note { margin: 8px 0 0; font-size: 12.5px; opacity: .55; }
.sc-lb__note:empty { display: none; }
.sc-lb__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.sc-lb__read, .sc-lb__again {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; font: 700 15px/1 var(--body);
  text-decoration: none; cursor: pointer; transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), box-shadow .25s, background .25s;
}
.sc-lb__read { background: rgb(var(--sw-deep)); color: #fff; border: 0; box-shadow: 0 6px 24px rgba(var(--sw), .35); }
.sc-lb[data-kind="yahweh"] .sc-lb__read { background: rgb(var(--sw)); color: #1a1408; }
.sc-lb__again { background: transparent; color: #f3ede3; border: 1.5px solid rgba(255,255,255,.3); }
.sc-lb__read:hover, .sc-lb__again:hover { transform: translateY(-2px) scale(1.04); }
.sc-lb__read:hover { box-shadow: 0 10px 34px rgba(var(--sw), .55); }
.sc-lb__again:hover { background: rgba(255,255,255,.08); }
.sc-lb__again:hover span { display: inline-block; animation: fxSpin .6s; }
@media (max-width: 520px) { .sc-lb__card { padding: 40px 22px 24px; } .sc-lb__actions > * { flex: 1 1 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .sw:hover, .sw:focus-visible, .h-hero .sw, .sc-lb__halo { animation: none !important; } .sc-lb__card, .sc-lb__veil { transition: none; } }
.sc-lb__credit { margin: 22px 0 0; font-size: 10.5px; line-height: 1.45; opacity: .38; }