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

/* ---- 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, background .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); }
.purpose-section .blog-hero-cta { animation: lvPulse 2.8s ease-in-out infinite; }
@keyframes lvPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 20, 120, 0); } 50% { box-shadow: 0 0 0 9px rgba(59, 20, 120, .12); } }

/* ---- content sections ---- */
.purpose-section { position: relative; overflow: hidden; }
.purpose-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: 6%; right: 3%; background: radial-gradient(circle, rgba(41, 171, 226, .30), rgba(41, 171, 226, 0) 70%); }
.lv-blob-b { top: 44%; left: 2%; background: radial-gradient(circle, rgba(255, 90, 43, .18), rgba(255, 90, 43, 0) 70%); animation-delay: -5s; }
.lv-blob-c { bottom: 4%; right: 8%; background: radial-gradient(circle, rgba(34, 197, 122, .24), 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); } }

.purpose-title::after { content: ""; display: block; width: 0; height: 4px; margin-top: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--coral, #FF5A2B), var(--yellow, #ffc107)); transition: width .8s cubic-bezier(.2, .7, .2, 1) .35s; }
.purpose-title.lv-in::after { width: 60px; }
.purpose-photo { transition: scale .5s ease, filter .5s ease; }
.purpose-photo:hover { scale: 1.035; }

@media (prefers-reduced-motion: reduce) {
  .lv { opacity: 1; transform: none; transition: none; }
  .blog-hero-media img, .blog-hero-text > *, .lv-hblob, .lv-blob, .purpose-section .blog-hero-cta { animation: none; }
  .purpose-title::after { width: 60px; transition: none; }
}