/* ==========================================================================
   Services · hero + four animated service cards
   ========================================================================== */
html, body { min-height: 100%; overflow-x: clip; }
body { overflow-x: hidden; }

/* ---------- Page ---------- */
.services-main {
  position: relative;
  min-height: calc(100dvh - 56px);           /* leaves room for the footer row */
  display: flex; flex-direction: column; justify-content: center;
  gap: 80px;
  padding: 136px var(--side) 96px;
  max-width: var(--max-w); margin: 0 auto;
  transition: transform .7s var(--ease);
}
.services-main .lamp { z-index: -1; }

.hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
/* Type: h1 = t-h1, .svc h2 = t-h3, .svc p = t-body (see site.css) */
.rise { opacity: 0; transform: translateY(24px); filter: blur(8px); }
.is-ready .rise { animation: rise 1s var(--ease) forwards; animation-delay: calc(.3s + var(--r, 0) * 120ms); }

.view-btn { flex: none; opacity: 0; transform: translateY(16px) scale(.85); }
.is-ready .view-btn { animation: pop .8s var(--ease) .7s forwards; }
.view-btn.in { opacity: 1; transform: none; animation: none; }

/* ---------- Service cards ---------- */
.cards {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.svc { --d: 0s; }
.svc .card {
  position: relative;
  aspect-ratio: 302 / 280;
  background: var(--fg);
  border-radius: var(--radius);
  display: grid; place-items: center;
  box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(16px) scale(.85);
}
.is-ready .svc.seen .card { animation: pop .8s var(--ease) var(--d) forwards; }
.is-ready .svc .card.in { opacity: 1; transform: none; animation: none; }
.art { width: 66%; max-width: 224px; aspect-ratio: 1; }
.art svg { width: 100%; height: 100%; display: block; overflow: visible; }

.svc .txt { opacity: 0; transform: translateY(16px); filter: blur(8px); }
.is-ready .svc.seen .txt { animation: rise .9s var(--ease) calc(var(--d) + .25s) forwards; }
.svc h2 { margin: 32px 0 24px; }
.svc p { color: var(--soft); max-width: 30ch; }

/* ---------- SVG motion ----------
   Every card: line work draws in, shapes pop in, then each settles into its own idle loop.
   --d = card's entrance delay, --k = per-element stagger. */
.art .t { transform-box: fill-box; transform-origin: center; }
.art .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.is-ready .seen .art .draw { animation: draw 1.1s var(--ease) calc(var(--d) + .35s + var(--k, 0) * 70ms) both; }
.is-ready .seen .art .pop-in { animation: popIn .7s var(--ease) calc(var(--d) + .5s + var(--k, 0) * 90ms) both; }
.is-ready .seen .art .rise-in { animation: riseIn .8s var(--ease) calc(var(--d) + .45s + var(--k, 0) * 90ms) both; }

/* Product: two screens float in counter-phase */
.is-ready .seen .p-sq1 { animation: popIn .7s var(--ease) calc(var(--d) + .5s) both, floatA 5s ease-in-out calc(var(--d) + 1.3s) infinite; }
.is-ready .seen .p-sq2 { animation: popIn .7s var(--ease) calc(var(--d) + .62s) both, floatB 5s ease-in-out calc(var(--d) + 1.3s) infinite; }

/* Design system: plus turns, toggle flips, the "A" bobs */
.is-ready .seen .ds-plus { animation: spin 4s var(--ease) calc(var(--d) + 1.4s) infinite; }
.is-ready .seen .ds-knob { animation: knob 4s var(--ease) calc(var(--d) + 1.4s) infinite; }
.is-ready .seen .ds-fill { animation: fillOff 4s var(--ease) calc(var(--d) + 1.4s) infinite; }
.is-ready .seen .ds-a { animation: riseIn .8s var(--ease) calc(var(--d) + .6s) both, bob 5s ease-in-out calc(var(--d) + 1.4s) infinite; }

/* Branding: cursor reaches for the bolt, clicks, the bolt zaps */
.art .b-cursor { transform-origin: 0 0; }
.is-ready .seen .b-bolt { animation: popIn .7s var(--ease) calc(var(--d) + .55s) both, zap 4s var(--ease) calc(var(--d) + 1.5s) infinite; }
.is-ready .seen .b-cursor { animation: cursorIn .8s var(--ease) calc(var(--d) + .75s) both, tap 4s var(--ease) calc(var(--d) + 1.5s) infinite; }

/* Website: the four selection handles pulse together, the lens (inner circle) focuses, status light blinks */
.is-ready .seen .w-h { animation: popIn .6s var(--ease) calc(var(--d) + .7s) both, handle 3.2s ease-in-out calc(var(--d) + 1.6s) infinite; }
.is-ready .seen .w-dot { animation: popIn .6s var(--ease) calc(var(--d) + .9s) both, pulse 3.2s ease-in-out calc(var(--d) + 1.5s) infinite; }
.is-ready .seen .w-pill { animation: blink 1.6s steps(1, end) calc(var(--d) + 1.5s) infinite; }

/* ---------- Page transition: content pushes in behind the curtain ---------- */
.is-leaving .services-main { transform: scale(1.04); }

/* ---------- Footer placement: full-width corner row, in flow so it never covers content ---------- */
.site-foot--page { padding: 0 var(--gutter) calc(var(--gutter) - 12px + env(safe-area-inset-bottom)); }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .services-main { padding-top: 128px; padding-bottom: 72px; gap: 64px; }
  .services-main h1 { font-size: var(--fs-h2); line-height: 40px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
@media (max-width: 768px) {
  .services-main {
    min-height: 0;
    padding-top: 112px; padding-bottom: calc(48px + env(safe-area-inset-bottom));
    gap: 48px; justify-content: flex-start;
  }
  .hero { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cards { grid-template-columns: 1fr; gap: 40px; }
  .svc .card { aspect-ratio: 4 / 3; }
  .art { width: 52%; }
  .svc h2 { margin: 24px 0 12px; }
  .site-foot--page { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1201px) and (max-height: 816px) {   /* scale-ok: complement of 1200 */
  .services-main { gap: 56px; padding-top: 112px; padding-bottom: 56px; }
  .svc h2 { margin: 24px 0 16px; }
}

/* ---------- Keyframes (service art) ---------- */
@keyframes draw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes popIn  {
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: none; }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes floatA { 0%,100% { transform: none; } 50% { transform: translateY(-7px) rotate(-4deg); } }
@keyframes floatB { 0%,100% { transform: none; } 50% { transform: translateY(6px) rotate(4deg); } }
@keyframes spin   { 0%,15% { transform: rotate(0); } 40%,100% { transform: rotate(90deg); } }
@keyframes knob   { 0%,35% { transform: none; } 50%,85% { transform: translateX(-38px); } 100% { transform: none; } }
@keyframes fillOff{ 0%,35% { opacity: 1; } 50%,85% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bob    { 0%,100% { transform: none; } 50% { transform: translateY(-5px); } }
@keyframes zap {
  0%,66%  { transform: none; filter: none; }
  72%     { transform: scale(1.12) rotate(-5deg); filter: brightness(1.15) saturate(1.2); }
  80%     { transform: scale(.96) rotate(2deg); }
  90%,100%{ transform: none; filter: none; }
}
@keyframes cursorIn { from { opacity: 0; transform: translate(26px, 26px); } to { opacity: 1; transform: none; } }
@keyframes tap {
  0%      { transform: none; }
  52%,62% { transform: translate(-12px, -14px); }
  67%     { transform: translate(-12px, -14px) scale(.82); }
  74%     { transform: translate(-12px, -14px); }
  100%    { transform: none; }
}
@keyframes handle { 0%,60%,100% { transform: none; } 75% { transform: scale(1.35); } }
@keyframes pulse  { 0%,100% { transform: none; } 50% { transform: scale(1.25); } }
@keyframes blink  { 0% { opacity: 1; } 50% { opacity: .25; } }