/* Home page extras: gentle motion and colour. Loaded only by index.php; nothing in style.css is changed.
   To switch it all off, remove the home-lively link and script tags and the "lv-stats" block from index.php. */

/* ---- scroll reveal (classes are added by home-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(-36px); }
.lv-right { transform: translateX(36px); }
.lv-zoom { transform: scale(.94); }
.lv.lv-in { opacity: 1; transform: none; }

/* ---- stats band ---- */
.lv-stats { background: #fff; padding: 34px 0 6px; }
.lv-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lv-stat { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 20px; background: var(--bg-light, #E9F1FC); transition: translate .3s ease, box-shadow .3s ease; }
.lv-stat:hover { translate: 0 -5px; box-shadow: 0 16px 30px -12px rgba(59, 20, 120, .28); }
.lv-stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.7vw, 2.2rem); line-height: 1; color: var(--dark-purple, #3b1478); white-space: nowrap; }
.lv-stat-num i { font-style: normal; color: var(--coral, #FF5A2B); }
.lv-stat-label { min-width: 0; font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--ink, #0F1B1A); }
.lv-stat-label small { display: block; font-weight: 500; color: var(--gray-600, #5b6472); margin-top: 2px; }
.lv-stat:has(.lv-live) { padding-right: 38px; }
.lv-live { position: absolute; top: 50%; right: 16px; margin-top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint, #22C57A); }
.lv-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint, #22C57A); animation: lvPing 2s ease-out infinite; }
@keyframes lvPing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
@media (max-width: 800px) { .lv-stats-row { grid-template-columns: 1fr; } }

/* ---- floating accents and soft colour shapes ---- */
.recruiter-plus { animation: lvFloat 5s ease-in-out infinite; }
.recruiter-check { animation: lvGlow 3.2s ease-in-out infinite; }
.recruiter-list li:nth-child(2) .recruiter-check { animation-delay: .5s; }
.recruiter-list li:nth-child(3) .recruiter-check { animation-delay: 1s; }
@keyframes lvFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(10deg); } }
@keyframes lvGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 122, 0); } 50% { box-shadow: 0 0 0 7px rgba(34, 197, 122, .16); } }

.lv-host { position: relative; }
.lv-host > .container { position: relative; z-index: 1; }
.lv-blob { position: absolute; z-index: 0; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; filter: blur(34px); opacity: .55; animation: lvDrift 14s ease-in-out infinite; }
.lv-blob-a { top: 36px; right: 5%; background: radial-gradient(circle, rgba(41, 171, 226, .30), rgba(41, 171, 226, 0) 70%); }
.lv-blob-b { bottom: 36px; left: 4%; width: 240px; height: 240px; background: radial-gradient(circle, rgba(255, 90, 43, .20), rgba(255, 90, 43, 0) 70%); animation-delay: -6s; }
.lv-blob-c { top: 50%; left: 46%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(34, 197, 122, .24), rgba(34, 197, 122, 0) 70%); animation-delay: -3s; }
@keyframes lvDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-22px, 18px) scale(1.08); } }

/* ---- hover touches ---- */
.stat-card { transition-property: opacity, transform, box-shadow, translate; }
.stat-card:hover { translate: 0 -6px; box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .45); }
.text-link .arrow { display: inline-block; transition: transform .25s ease; }
.text-link:hover .arrow { transform: translateX(6px); }
.recruiter-photo { transition: scale .5s ease; }
.recruiter-photo-wrap:hover .recruiter-photo { scale: 1.035; }
.app-badge { transition: translate .25s ease, box-shadow .25s ease; }
.app-badge:hover { translate: 0 -4px; box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .5); }
.hero-dot { transition: transform .25s ease; }
.hero-dot:hover { transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .lv { opacity: 1; transform: none; transition: none; }
  .lv-blob, .lv-live::after, .recruiter-plus, .recruiter-check { animation: none; }
}