/* About page extras: gentle motion and colour. Loaded only by about-us.php; style.css is not changed.
   To switch it off, remove the about-lively link and script tags from about-us.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; }


/* ---- top banner ---- */
.spotlight-bg { animation: lvSettleBg 2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes lvSettleBg { from { scale: 1.12; } to { scale: 1; } }
.spotlight-info > * { animation: lvRise .9s cubic-bezier(.2, .7, .2, 1) both; }
.spotlight-info > :nth-child(2) { animation-delay: .18s; }
@keyframes lvRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.spotlight-photo { animation: lvPhotoIn 1s cubic-bezier(.2, .7, .2, 1) .1s both, lvBob 6s ease-in-out 1.2s infinite; }
@keyframes lvPhotoIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes lvBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.spotlight-meta-line { transform-origin: left center; animation: lvLine 1s ease .5s both; }
@keyframes lvLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- soft colour shapes ---- */
.lv-host { position: relative; }
.purpose-section.lv-host { overflow: hidden; }
.mv-section.lv-host, .testimonials-section.lv-host { overflow-x: clip; }
.lv-host > .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, .28), rgba(41, 171, 226, 0) 70%); }
.lv-blob-b { bottom: 6%; left: 2%; background: radial-gradient(circle, rgba(255, 90, 43, .17), rgba(255, 90, 43, 0) 70%); animation-delay: -5s; }
@keyframes lvDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-22px, 18px) scale(1.08); } }

/* ---- headings ---- */
.purpose-title::after, .mv-heading::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; }
.mv-header { text-align: center; }
.mv-heading::after { margin-left: auto; margin-right: auto; }
.purpose-title.lv-in::after, .mv-header.lv-in .mv-heading::after { width: 60px; }
.section-head h2::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; }
.section-head.lv-in h2::after { width: 60px; }

/* ---- photos, mission and vision cards ---- */
.purpose-photo { transition: scale .5s ease; }
.purpose-photo:hover { scale: 1.035; }
.mv-photo-card { overflow: hidden; }
.mv-photo-card > img { transition: scale .8s ease; }
.mv-photo-card:hover > img { scale: 1.06; }
.mv-card { transition: translate .3s ease, box-shadow .3s ease; }
.mv-card:hover { translate: 0 -8px; box-shadow: 0 20px 36px -16px rgba(59, 20, 120, .35); }
.mv-icon { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.mv-card:hover .mv-icon { transform: rotate(-10deg) scale(1.12); }
.mv-photo-badge { animation: lvGlow 3s ease-in-out infinite; border-radius: 50%; }
@keyframes lvGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, .16); } }
.partners-heading { transition-property: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .lv { opacity: 1; transform: none; transition: none; }
  .spotlight-bg, .spotlight-info > *, .spotlight-photo, .spotlight-meta-line, .lv-blob, .mv-photo-badge { animation: none; }
  .purpose-title::after, .mv-heading::after, .section-head h2::after { width: 60px; transition: none; }
}