/* ==========================================================================
   StaffiQ — Adopted motion language
   Every value here is taken from the TaskPulse redesign reference project so
   both sites move identically: the same 3D tilt maths, the same scroll reveal
   curve and distances, the same icon balls with their pulse ring, and the same
   glow on approach. Loaded last so it wins.
   ========================================================================== */

/* ── Resting state: blurred, always ────────────────────────────────────────
   A name is only ever legible while it is the one under the cursor. This is
   the floor, so it holds in every motion mode and before any script runs. */
.lens-node__name  { filter: blur(calc((1 - var(--near, 0)) * 3.6px)) }
.lens-node__role  { filter: blur(calc((1 - var(--near, 0)) * 3px)) }
.lens-node__pct   { opacity: calc(0.25 + var(--near, 0) * 0.75) }
@media (prefers-reduced-motion: reduce) {
  .lens-node__name { filter: blur(calc((1 - var(--near, 0)) * 3.6px)); color: inherit }
  .lens-node__role { filter: blur(calc((1 - var(--near, 0)) * 3px)) }
}

/* ── Idle: names hold as distant stars ─────────────────────────────────────
   With the pointer off screen every name stays blurred and simply breathes,
   each on its own cycle, so the field reads as a slow sky rather than a list. */
.lens-hero[data-idle="true"] .lens-node__name,
.lens-hero[data-idle="true"] .lens-node__role {
  filter: blur(3.6px);
}
.lens-hero[data-idle="true"] .lens-node {
  animation: sqTwinkle 5.6s ease-in-out infinite;
  animation-delay: var(--delay, 1.5s);
}
.lens-hero[data-idle="true"] .lens-node::before {
  animation: sqTwinkleGlow 5.6s ease-in-out infinite;
  animation-delay: var(--delay, 1.5s);
}
@keyframes sqTwinkle {
  0%, 100% { opacity: .5 }
  50%      { opacity: .92 }
}
@keyframes sqTwinkleGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 242, 78, 0) }
  50%      { box-shadow: 0 0 18px 0 rgba(198, 242, 78, .22) }
}

/* ── The reference 3D tilt, exactly ────────────────────────────────────────
   rotateX (y-0.5)*-6, rotateY (x-0.5)*10, lift 6px, settling in 0.1s so the
   card tracks the cursor instead of trailing it. */
.card, .price-card, .lens-panel, .pricing-card {
  transition: transform 1.5s ease, box-shadow 1.5s ease, border-color 1.5s ease;
  transform-style: preserve-3d;
}
.card:hover, .price-card:hover, .pricing-card:hover {
  border-color: var(--sq-lime, #7FAF12);
  box-shadow: 0 28px 60px rgba(10, 31, 23, .12), 0 0 50px rgba(198, 242, 78, .28);
}

/* ── The reference scroll reveal, exactly ──────────────────────────────────
   50px rise, 0.88 scale, 0.9s on the same easing curve. */
[data-sqp-in] {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.5s cubic-bezier(.16, 1, .3, 1), transform 1.5s cubic-bezier(.16, 1, .3, 1);
}
[data-sqp-in="scale"] { transform: scale(.88) }
[data-sqp-in][data-shown="true"] { opacity: 1; transform: none }

/* ── Icon balls, glossy ────────────────────────────────────────────────────
   The reference ball at 60px with its soft tint and hairline, kept glassy with
   an inset highlight and a blurred backdrop, and the ring that pulses on
   approach. */
.card .icon,
.card > svg:first-child {
  position: relative;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .5), rgba(198, 242, 78, .16)),
    var(--sq-tint, #E6F4F0);
  border: 1.5px solid rgba(127, 175, 18, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 8px 20px rgba(10, 31, 23, .08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--sq-brand, #004331);
  transition: transform 1.5s cubic-bezier(.16, 1, .3, 1), background 1.5s ease, border-color 1.5s ease;
}
.card .icon svg { width: 26px; height: 26px }
.card .icon .naira-mark { font-size: 1.5rem; font-weight: 800; line-height: 1 }
.card .icon::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--sq-lime, #7FAF12);
  opacity: 0; transition: opacity 1.5s ease;
}
.card:hover .icon { transform: scale(1.06) rotate(-4deg) }
.card:hover .icon::after { opacity: 1; animation: sqPulseRing 2s ease-in-out infinite }
@keyframes sqPulseRing {
  0%, 100% { transform: scale(1);    opacity: .3 }
  50%      { transform: scale(1.18); opacity: .7 }
}

/* The lime feature cards keep their accent inside the ball. */
.card.feature-lime .icon {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .5), rgba(198, 242, 78, .3)),
    rgba(198, 242, 78, .16);
  border-color: rgba(127, 175, 18, .34);
}

[data-sq-theme="dark"] .card .icon {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(198, 242, 78, .12)),
    rgba(143, 233, 196, .1);
  border-color: rgba(198, 242, 78, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 20px rgba(0, 0, 0, .4);
  color: var(--sq-lime, #C6F24E);
}

@media (prefers-reduced-motion: reduce) {
  .lens-hero[data-idle="true"] .lens-node,
  .lens-hero[data-idle="true"] .lens-node::before,
  .card:hover .icon::after { animation: none !important }
  [data-sqp-in] { opacity: 1; transform: none }
}

/* ══════════════════════════════════════════════════════════════════════════
   Slow motion pass, 31 July 2026
   Every transition and animation on the site now runs at 1.5s or longer, so
   nothing snaps. The one deliberate exception is transform on the handful of
   elements that physically follow the cursor. A 1.5s transform there would
   leave the card a second and a half behind the pointer, which reads as lag
   rather than luxury. Their colour, shadow and glow still move at 1.5s.
   ══════════════════════════════════════════════════════════════════════════ */
.card,
.price-card,
.pricing-card,
.lens-panel {
  transition:
    transform .12s ease-out,
    box-shadow 1.5s cubic-bezier(.4, 0, .2, 1),
    border-color 1.5s cubic-bezier(.4, 0, .2, 1),
    background 1.5s cubic-bezier(.4, 0, .2, 1);
}
.sqp-mag           { transition: transform 1.5s cubic-bezier(.4, 0, .2, 1) }
.sqp-mag[data-pull="on"] { transition: transform .12s ease-out }
.lens-core__mark   { transition: transform .28s ease-out, filter 1.5s cubic-bezier(.4, 0, .2, 1) }
.lens-core__halo   { transition: transform .28s ease-out, filter 1.5s cubic-bezier(.4, 0, .2, 1) }
.lens-core__ring   { transition: transform .3s ease-out, border-color 1.5s cubic-bezier(.4, 0, .2, 1) }