.home-hero-side {
  position: relative;
  min-width: 0;
  padding-top: clamp(56px, 6.5vw, 88px);
}

.home-hero-art {
  position: absolute;
  z-index: 1;
  top: 4px;
  right: clamp(8px, 1.8vw, 20px);
  width: clamp(168px, 15vw, 210px);
  margin: 0;
  pointer-events: none;
  filter: drop-shadow(0 20px 24px rgba(18, 32, 57, 0.16));
  transform-origin: center;
  animation: home-art-enter 700ms cubic-bezier(.2, .75, .25, 1) both, home-art-float 5s 700ms ease-in-out infinite;
}

.home-hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

.home-quick-panel {
  position: relative;
  z-index: 1;
  animation: home-panel-enter 620ms 120ms cubic-bezier(.2, .75, .25, 1) both;
}

.home-tool-icon {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--cobalt-deep);
  background: var(--surface);
  overflow: hidden;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.home-tool-icon svg { width: 21px; height: 21px; transition: transform 220ms cubic-bezier(.2, .75, .25, 1); }
.home-icon-state { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 260ms ease, transform 320ms cubic-bezier(.2, .75, .25, 1); }
.home-icon-source { opacity: 1; transform: translateX(0) scale(1); }
.home-icon-target { opacity: 0; transform: translateX(10px) scale(.78); }
.home-icon-flow { position: absolute; z-index: 3; top: 50%; left: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--cobalt); opacity: 0; transform: translateY(-50%); box-shadow: 0 0 0 3px rgba(45, 92, 245, .12); }
.home-tool-card:hover .home-tool-icon,
.home-tool-card:focus-visible .home-tool-icon,
.home-quick-link:hover .home-tool-icon,
.home-quick-link:focus-visible .home-tool-icon { border-color: rgba(45, 92, 245, 0.42); color: var(--cobalt); background: var(--cobalt-soft); }

.home-tool-card:hover .is-transforming .home-icon-source,
.home-tool-card:focus-visible .is-transforming .home-icon-source,
.home-quick-link:hover .is-transforming .home-icon-source,
.home-quick-link:focus-visible .is-transforming .home-icon-source { opacity: 0; transform: translateX(-10px) scale(.78); }
.home-tool-card:hover .is-transforming .home-icon-target,
.home-tool-card:focus-visible .is-transforming .home-icon-target,
.home-quick-link:hover .is-transforming .home-icon-target,
.home-quick-link:focus-visible .is-transforming .home-icon-target { opacity: 1; transform: translateX(0) scale(1); }
.home-tool-card:hover .is-transforming .home-icon-flow,
.home-tool-card:focus-visible .is-transforming .home-icon-flow,
.home-quick-link:hover .is-transforming .home-icon-flow,
.home-quick-link:focus-visible .is-transforming .home-icon-flow { animation: home-icon-flow 520ms cubic-bezier(.2, .75, .25, 1); }

.home-quick-link { animation: home-item-enter 480ms cubic-bezier(.2, .75, .25, 1) backwards; }
.home-quick-link:nth-child(1) { animation-delay: 220ms; }
.home-quick-link:nth-child(2) { animation-delay: 280ms; }
.home-quick-link:nth-child(3) { animation-delay: 340ms; }
.home-quick-link:nth-child(4) { animation-delay: 400ms; }
.home-quick-link:nth-child(1) { --transform-demo-delay: 1100ms; }
.home-quick-link:nth-child(2) { --transform-demo-delay: 2450ms; }
.home-quick-link .is-transforming .home-icon-source { animation: home-source-demo 1200ms var(--transform-demo-delay, 1100ms) ease-in-out; }
.home-quick-link .is-transforming .home-icon-target { animation: home-target-demo 1200ms var(--transform-demo-delay, 1100ms) ease-in-out; }
.home-quick-link .is-transforming .home-icon-flow { animation: home-flow-demo 1200ms var(--transform-demo-delay, 1100ms) ease-in-out; }
.home-tool-card { animation: home-item-enter 440ms cubic-bezier(.2, .75, .25, 1) backwards; }
.home-tool-card:nth-child(2n) { animation-delay: 45ms; }
.home-tool-card:nth-child(3n) { animation-delay: 90ms; }

@media (hover: hover) {
  .home-tool-card:hover .home-tool-icon:not(.is-transforming) svg { transform: translateY(-1px) rotate(-4deg) scale(1.08); }
  .home-quick-link:hover .home-tool-icon:not(.is-transforming) svg { transform: translateX(2px) scale(1.06); }
}

@keyframes home-art-enter {
  from { opacity: 0; transform: translate3d(18px, 16px, 0) rotate(8deg) scale(.92); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(2deg) scale(1); }
}

@keyframes home-art-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(-1deg); }
}

@keyframes home-panel-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes home-item-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes home-icon-flow {
  0% { left: 7px; opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { left: 27px; opacity: 0; }
}

@keyframes home-source-demo {
  0%, 20%, 100% { opacity: 1; transform: translateX(0) scale(1); }
  45%, 72% { opacity: 0; transform: translateX(-10px) scale(.78); }
}

@keyframes home-target-demo {
  0%, 20%, 100% { opacity: 0; transform: translateX(10px) scale(.78); }
  45%, 72% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes home-flow-demo {
  0%, 20%, 80%, 100% { left: 7px; opacity: 0; }
  32% { opacity: 1; }
  66% { left: 27px; opacity: 1; }
}

body[data-theme="dark"] .home-hero-art { filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.34)); }

@media (max-width: 1100px) and (min-width: 821px) {
  .home-hero-side { padding-top: 56px; }
  .home-hero-art { right: 8px; width: clamp(148px, 17vw, 176px); }
}

@media (max-width: 820px) {
  .home-hero-side {
    padding-top: 0;
  }
  .home-hero-art { top: 0; right: clamp(12px, 4vw, 28px); width: clamp(164px, 27vw, 210px); }
}

@media (max-width: 680px) {
  .home-hero-art { right: 4px; width: clamp(150px, 43vw, 178px); }
  .home-quick-panel { width: 100%; }
}

@media (max-width: 420px) {
  .home-hero-art { right: -4px; width: 136px; }
}