/* Small, functional brand objects. Original artwork stays in /img/mark.svg. */
.home-service .service-object {
  --object-ease: cubic-bezier(.22, .7, .25, 1);
  display: block;
  position: relative;
  width: 168px;
  max-width: 100%;
  aspect-ratio: 180 / 126;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.service-object > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.service-object:focus-visible { outline: 2px solid #94191e; outline-offset: 3px; }
.service-object__card {
  transform-origin: 90px 65px;
  transform: rotate(-5deg);
  transition: transform 550ms var(--object-ease);
}
.service-object__box { transform-origin: 90px 104px; transition: transform 550ms var(--object-ease); }
.service-object__lid {
  transform-origin: 25px 50px;
  transition: transform 550ms var(--object-ease);
}
.service-object__shadow {
  transform-origin: 90px 108px;
  transition: opacity 550ms ease, transform 550ms var(--object-ease);
}
.service-object__contactless path { opacity: .35; transition: opacity 250ms ease; }
.service-object__contactless path:nth-child(2) { transition-delay: 70ms; }
.service-object__contactless path:nth-child(3) { transition-delay: 140ms; }
/* Existing text actions and the objects share the same interaction state. */
.home-service:focus-within .service-object__card { transform: translate(2px, -6px) rotate(-1deg); }
.home-service:focus-within .service-object__contactless path { opacity: 1; }
.home-service:focus-within .service-object__box { transform: translateY(-2px); }
.home-service:focus-within .service-object__lid { transform: translateY(-5px); }
.home-service:focus-within .service-object__shadow { opacity: .06; transform: scaleX(.9); }
@media (hover: hover) and (pointer: fine) {
  .home-service:hover .service-object__card { transform: translate(2px, -6px) rotate(-1deg); }
  .home-service:hover .service-object__contactless path { opacity: 1; }
  .home-service:hover .service-object__box { transform: translateY(-2px); }
  .home-service:hover .service-object__lid { transform: translateY(-5px); }
  .home-service:hover .service-object__shadow { opacity: .06; transform: scaleX(.9); }
}
/* Keep narrow columns quiet; only place objects beside copy when there is room. */
@media (min-width: 1180px) {
  .home-service:has(> .service-object) { display: flow-root; }
  .home-service .service-object { float: right; margin: 0 0 12px 20px; }
  .home-service .card-presenter { clear: both; }
}
/* No hidden initial state: unavailable JS/IntersectionObserver leaves usable art. */
.service-object.is-revealed > svg { animation: service-object-arrive 650ms var(--object-ease) both; }
@keyframes service-object-arrive {
  from { opacity: .45; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .service-object.is-revealed > svg { animation: none; }
  .service-object__card, .service-object__box, .service-object__lid,
  .service-object__shadow, .service-object__contactless path { transition: none; }
  .home-service .service-object__card { transform: rotate(-5deg); }
  .home-service .service-object__box, .home-service .service-object__lid,
  .home-service .service-object__shadow { transform: none; }
}

/* Desktop interaction feedback. */
@media (prefers-reduced-motion:no-preference) {
  .home-service:focus-within .service-object__contactless path {animation:contactless-signal 900ms ease both;animation-delay:calc(var(--wave,0) * 110ms)}
  .service-object__contactless path:nth-child(2){--wave:1}
  .service-object__contactless path:nth-child(3){--wave:2}
  @keyframes contactless-signal{0%,100%{opacity:.35}45%{opacity:1}}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .home-service:hover .service-object__contactless path{animation:contactless-signal 900ms ease both;animation-delay:calc(var(--wave,0) * 110ms)}
}
/* Brief mobile gestures, followed by more than six seconds of stillness.
   Keep the hit area stationary; only the SVG artwork moves. */
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
  .service-object__card {animation:service-card-sway 8s ease-in-out .8s infinite both paused}
  .service-object__box {animation:service-box-sway 8s ease-in-out 1.8s infinite both paused}
  .service-object__lid {animation:service-lid-peek 8s ease-in-out 1.8s infinite both paused}
  .service-object .service-object__contactless path {animation:service-card-signal 8s ease-in-out infinite both paused;animation-delay:calc(.8s + var(--wave,0) * 110ms)}
  .service-object.is-motion-active :is(.service-object__card,.service-object__box,.service-object__lid,.service-object__contactless path) {animation-play-state:running}
  .home-service:focus-within .service-object :is(.service-object__card,.service-object__box,.service-object__lid,.service-object__contactless path) {animation:none}
  @keyframes service-card-sway {
    0%,20%,100%{transform:rotate(-5deg)}
    5%{transform:translateY(-2px) rotate(-8deg)}
    10%{transform:translateY(-2px) rotate(-2deg)}
    15%{transform:rotate(-6deg)}
  }
  @keyframes service-box-sway {
    0%,20%,100%{transform:none}
    5%{transform:translateY(-1px) rotate(-2deg)}
    10%{transform:rotate(1.5deg)}
    15%{transform:rotate(-.5deg)}
  }
  @keyframes service-lid-peek {
    0%,2%,20%,100%{transform:none}
    7%,11%{transform:translateY(-5px) rotate(-1deg)}
    16%{transform:translateY(-1px)}
  }
  @keyframes service-card-signal {
    0%,2%,20%,100%{opacity:.35}
    8%,12%{opacity:1}
  }
}