/* Blog page extras: gentle motion and colour. Loaded only by blog.php; style.css is not changed.
   To switch it off, remove the blog-lively link and script tags from blog.php. */

/* ---- scroll reveal (classes are added by services-lively.js) ---- */
.lv { opacity: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--lv-d, 0s); }
.lv-up { transform: translateY(28px); }
.lv-left { transform: translateX(-40px); }
.lv-right { transform: translateX(40px); }
.lv-zoom { transform: scale(.93); }
.lv.lv-in { opacity: 1; transform: none; }

/* ---- hero ---- */
.blog-hero { isolation: isolate; }
.blog-hero-text, .blog-hero-media { position: relative; z-index: 1; }
.blog-hero-media img { animation: lvSettle 1.8s cubic-bezier(.2, .7, .2, 1) both; transition: scale .6s ease; }
.blog-hero-media:hover img { scale: 1.04; }
@keyframes lvSettle { from { transform: scale(1.12); } to { transform: scale(1); } }
.blog-hero-text > * { animation: lvRise .8s cubic-bezier(.2, .7, .2, 1) both; }
.blog-hero-text > :nth-child(2) { animation-delay: .12s; } .blog-hero-text > :nth-child(3) { animation-delay: .24s; } .blog-hero-text > :nth-child(4) { animation-delay: .36s; }
@keyframes lvRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.lv-hblob { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(40px); animation: lvDrift 14s ease-in-out infinite; }
.lv-hblob-a { width: 300px; height: 300px; top: -90px; right: 18%; background: radial-gradient(circle, rgba(41, 171, 226, .38), rgba(41, 171, 226, 0) 70%); }
.lv-hblob-b { width: 260px; height: 260px; bottom: -90px; left: 6%; background: radial-gradient(circle, rgba(255, 90, 43, .26), rgba(255, 90, 43, 0) 70%); animation-delay: -6s; }

/* ---- buttons ---- */
.blog-hero-cta { transition: transform .2s ease, box-shadow .2s ease; }
.blog-hero-cta::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .25s ease; }
.blog-hero-cta:hover::after { transform: translateX(6px); }
.blog-hero-badge { position: relative; }
.blog-hero-badge::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--mint, #22C57A); animation: lvBlink 1.8s ease-in-out infinite; vertical-align: middle; }
@keyframes lvBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---- sections and cards ---- */
.blog-section { position: relative; overflow: hidden; }
.blog-section > .container { position: relative; z-index: 1; }
.lv-blob { position: absolute; z-index: 0; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; filter: blur(36px); opacity: .55; animation: lvDrift 15s ease-in-out infinite; }
.lv-blob-a { top: 38%; right: 2%; background: radial-gradient(circle, rgba(41, 171, 226, .26), rgba(41, 171, 226, 0) 70%); }
.lv-blob-b { top: 62%; left: 1%; background: radial-gradient(circle, rgba(255, 90, 43, .16), rgba(255, 90, 43, 0) 70%); animation-delay: -5s; }
.lv-blob-c { bottom: 3%; right: 12%; background: radial-gradient(circle, rgba(34, 197, 122, .22), rgba(34, 197, 122, 0) 70%); animation-delay: -9s; }
@keyframes lvDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-22px, 18px) scale(1.08); } }

.blog-heading::after { content: ""; display: block; width: 0; height: 4px; margin: 12px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--coral, #FF5A2B), var(--yellow, #ffc107)); transition: width .8s cubic-bezier(.2, .7, .2, 1) .35s; }
.blog-group-header.lv-in .blog-heading::after { width: 60px; }
.blog-card { transition: translate .3s ease, box-shadow .3s ease; }
.blog-card:hover { translate: 0 -8px; box-shadow: 0 20px 36px -16px rgba(59, 20, 120, .35); }
.blog-card-photo img { transition: scale .6s ease; }
.blog-card:hover .blog-card-photo img { scale: 1.07; }
.blog-card-title { transition: color .25s ease; }
.blog-card:hover .blog-card-title { color: var(--dark-purple, #3b1478); }
.blog-card-date::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; border-radius: 3px; background: var(--coral, #FF5A2B); vertical-align: middle; transition: width .3s ease; }
.blog-card:hover .blog-card-date::before { width: 30px; }
.blog-pager-btn { transition: transform .2s ease, box-shadow .2s ease; }
.blog-pager-btn:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 10px 18px -8px rgba(59, 20, 120, .4); }

/* ---- next / previous cards swap in place ---- */
.blog-grid { transition: opacity .22s ease; }
.blog-grid.lv-swap-out { opacity: 0; }
.blog-grid.lv-swap-in .blog-card { animation: lvCardIn .55s cubic-bezier(.2, .7, .2, 1) both; }
.blog-grid.lv-swap-in .blog-card:nth-child(2) { animation-delay: .08s; } .blog-grid.lv-swap-in .blog-card:nth-child(3) { animation-delay: .16s; }
@keyframes lvCardIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .blog-grid.lv-swap-in .blog-card { animation: none; }
  .lv { opacity: 1; transform: none; transition: none; }
  .blog-hero-media img, .blog-hero-text > *, .lv-hblob, .lv-blob, .blog-hero-badge::before { animation: none; }
  .blog-heading::after { width: 60px; transition: none; }
}