.hanly-asset-card {
  --hanly-icon-stage-height: 130px;
  --hanly-icon-max-width: 180px;
  --hanly-icon-max-height: 120px;
  --hanly-icon-gap: 28px;
  --hanly-icon-scale: 100;
  --hanly-title-min-height: 52px;
  --hanly-title-gap: 18px;
  --hanly-body-max-width: 320px;
  --hanly-card-align: center;
  --hanly-icon-color: #b6842f;
  --hanly-card-surface-bg: #ffffff;
  --hanly-card-surface-opacity: 1;
  --hanly-card-surface-blur: 16px;
  --hanly-card-surface-border-color: transparent;
  --hanly-card-surface-border-width: 0px;
  --hanly-card-surface-radius: 0px;
  --hanly-card-surface-padding: 0px;

  text-align: var(--hanly-card-align);
  width: 100%;
}

.hanly-asset-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  isolation: isolate;
  padding: var(--hanly-card-surface-padding);
}

.hanly-asset-card__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent;
  border: var(--hanly-card-surface-border-width) solid var(--hanly-card-surface-border-color);
  border-radius: var(--hanly-card-surface-radius);
  box-sizing: border-box;
}

.hanly-asset-card__inner > * {
  position: relative;
  z-index: 1;
}

.hanly-asset-card[data-surface="solid"] .hanly-asset-card__inner::before,
.hanly-asset-card[data-surface="glass"] .hanly-asset-card__inner::before {
  background: var(--hanly-card-surface-bg);
  opacity: var(--hanly-card-surface-opacity);
}

.hanly-asset-card[data-surface="glass"] .hanly-asset-card__inner::before {
  -webkit-backdrop-filter: blur(var(--hanly-card-surface-blur));
  backdrop-filter: blur(var(--hanly-card-surface-blur));
}

.hanly-asset-card[data-align="left"] { --hanly-card-align: left; }
.hanly-asset-card[data-align="left"] .hanly-asset-card__inner { align-items: flex-start; }
.hanly-asset-card[data-align="right"] { --hanly-card-align: right; }
.hanly-asset-card[data-align="right"] .hanly-asset-card__inner { align-items: flex-end; }

.hanly-asset-card__icon-stage {
  height: var(--hanly-icon-stage-height);
  min-height: var(--hanly-icon-stage-height);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hanly-icon-color);
  margin-bottom: var(--hanly-icon-gap);
  contain: layout paint;
}

.hanly-asset-card[data-align="left"] .hanly-asset-card__icon-stage { justify-content: flex-start; }
.hanly-asset-card[data-align="right"] .hanly-asset-card__icon-stage { justify-content: flex-end; }

.hanly-asset-card__icon-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hanly-icon-max-width);
  max-width: 100%;
  height: var(--hanly-icon-max-height);
  max-height: var(--hanly-icon-max-height);
  transform: translateZ(0) scale(calc(var(--hanly-icon-scale) / 100));
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout paint;
}

.hanly-asset-card__icon {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 180ms ease, transform 220ms ease;
  transform: translateZ(0);
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hanly-asset-card__icon--hover {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
}

.hanly-asset-card--has-hover-media:hover .hanly-asset-card__icon--default,
.hanly-asset-card--has-hover-media:focus-within .hanly-asset-card__icon--default {
  opacity: 0;
}

.hanly-asset-card--has-hover-media:hover .hanly-asset-card__icon--hover,
.hanly-asset-card--has-hover-media:focus-within .hanly-asset-card__icon--hover {
  opacity: 1;
}

.hanly-asset-card__icon-stage svg,
.hanly-asset-card__icon-stage img {
  color: currentColor;
  contain: paint;
}

.hanly-asset-card__title {
  min-height: var(--hanly-title-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--hanly-title-gap);
  width: 100%;
}

.hanly-asset-card[data-align="left"] .hanly-asset-card__title { justify-content: flex-start; }
.hanly-asset-card[data-align="right"] .hanly-asset-card__title { justify-content: flex-end; }

.hanly-asset-card__title a {
  color: inherit;
  text-decoration: none;
}

.hanly-asset-card__content {
  max-width: var(--hanly-body-max-width);
  margin: 0 auto;
}

.hanly-asset-card[data-align="left"] .hanly-asset-card__content { margin-left: 0; }
.hanly-asset-card[data-align="right"] .hanly-asset-card__content { margin-right: 0; }

.hanly-asset-card__content p:last-child {
  margin-bottom: 0;
}


/* Hanly Core hover motion presets.
   0.1.7: wheel motion separated into two layers.
   The frame handles subtle scale / tiny bump, while the icon itself spins linearly.
   This avoids the previous stop/start rotation feeling. */
.hanly-asset-card[data-hover-animation="subtle-zoom"] .hanly-asset-card__icon-frame,
.hanly-asset-card[data-hover-animation="wheel-roll"] .hanly-asset-card__icon-frame,
.hanly-asset-card[data-hover-animation="shock-compress"] .hanly-asset-card__icon-frame,
.hanly-asset-card[data-hover-animation="diagnostic-pulse"] .hanly-asset-card__icon-frame {
  transform-origin: center center;
  will-change: transform;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}

.hanly-asset-card[data-hover-animation="subtle-zoom"]:hover .hanly-asset-card__icon-frame,
.hanly-asset-card[data-hover-animation="subtle-zoom"]:focus-within .hanly-asset-card__icon-frame {
  transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.045));
}

/* Wheel: frame scales/breathes; the icon spins at a constant linear speed. */
.hanly-asset-card[data-hover-animation="wheel-roll"]:hover .hanly-asset-card__icon-frame,
.hanly-asset-card[data-hover-animation="wheel-roll"]:focus-within .hanly-asset-card__icon-frame {
  animation: hanly-wheel-float 1800ms cubic-bezier(.45,0,.25,1) infinite;
}

.hanly-asset-card[data-hover-animation="wheel-roll"]:hover .hanly-asset-card__icon,
.hanly-asset-card[data-hover-animation="wheel-roll"]:focus-within .hanly-asset-card__icon {
  animation: hanly-wheel-spin 1800ms linear infinite;
  transform-origin: center center;
}

/* Shock: this is still whole-icon CSS motion, so keep it subtle. True spring-only compression needs grouped SVG/Rive. */
.hanly-asset-card[data-hover-animation="shock-compress"] .hanly-asset-card__icon-frame {
  transform-origin: 50% 63%;
}

.hanly-asset-card[data-hover-animation="shock-compress"]:hover .hanly-asset-card__icon-frame,
.hanly-asset-card[data-hover-animation="shock-compress"]:focus-within .hanly-asset-card__icon-frame {
  animation: hanly-shock-compress 880ms cubic-bezier(.34,.04,.2,1) infinite;
}

/* Diagnostic: keep the device still. Cover the existing heartbeat line, then draw a thinner one over it.
   The cover uses a soft off-white default; override --hanly-diagnostic-screen-bg if a section needs it. */
.hanly-asset-card[data-hover-animation="diagnostic-pulse"] .hanly-asset-card__icon-frame::before,
.hanly-asset-card[data-hover-animation="diagnostic-pulse"] .hanly-asset-card__icon-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hanly-asset-card[data-hover-animation="diagnostic-pulse"] .hanly-asset-card__icon-frame::before {
  left: 29%;
  top: 38%;
  width: 42%;
  height: 24%;
  background: var(--hanly-diagnostic-screen-bg, #f8f5ef);
  opacity: 0;
}

.hanly-asset-card[data-hover-animation="diagnostic-pulse"] .hanly-asset-card__icon-frame::after {
  left: 31%;
  top: 41%;
  width: 38%;
  height: 18%;
  background-color: currentColor;
  opacity: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M2 21 H28 L34 16 L42 27 L53 8 L66 31 L76 21 H118' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M2 21 H28 L34 16 L42 27 L53 8 L66 31 L76 21 H118' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  clip-path: inset(0 100% 0 0);
}

.hanly-asset-card[data-hover-animation="diagnostic-pulse"]:hover .hanly-asset-card__icon-frame,
.hanly-asset-card[data-hover-animation="diagnostic-pulse"]:focus-within .hanly-asset-card__icon-frame {
  transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.025));
}

.hanly-asset-card[data-hover-animation="diagnostic-pulse"]:hover .hanly-asset-card__icon-frame::before,
.hanly-asset-card[data-hover-animation="diagnostic-pulse"]:focus-within .hanly-asset-card__icon-frame::before {
  opacity: 1;
}

.hanly-asset-card[data-hover-animation="diagnostic-pulse"]:hover .hanly-asset-card__icon-frame::after,
.hanly-asset-card[data-hover-animation="diagnostic-pulse"]:focus-within .hanly-asset-card__icon-frame::after {
  animation: hanly-heartbeat-draw 1250ms ease-in-out infinite;
}

@keyframes hanly-wheel-float {
  0%, 100% { transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.02)) translateY(0); }
  44%      { transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.035)) translateY(-1.5px); }
  58%      { transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.032)) translateY(-2.25px); }
  72%      { transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.025)) translateY(-.75px); }
}

@keyframes hanly-wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes hanly-shock-compress {
  0%, 100% { transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.02)) scaleY(1) scaleX(1) rotate(0deg); }
  26%      { transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.025)) scaleY(.965) scaleX(1.006) rotate(-.18deg); }
  42%      { transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.03)) scaleY(.94) scaleX(1.012) rotate(-.28deg); }
  62%      { transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.025)) scaleY(.982) scaleX(1.004) rotate(.12deg); }
  78%      { transform: scale(calc(var(--hanly-icon-scale) / 100 * 1.02)) scaleY(.995) scaleX(1) rotate(0deg); }
}

@keyframes hanly-heartbeat-draw {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  12%  { opacity: 1; clip-path: inset(0 100% 0 0); }
  46%  { opacity: 1; clip-path: inset(0 0 0 0); }
  68%  { opacity: .85; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hanly-asset-card[data-hover-animation="subtle-zoom"]:hover .hanly-asset-card__icon-frame,
  .hanly-asset-card[data-hover-animation="subtle-zoom"]:focus-within .hanly-asset-card__icon-frame,
  .hanly-asset-card[data-hover-animation="wheel-roll"]:hover .hanly-asset-card__icon-frame,
  .hanly-asset-card[data-hover-animation="wheel-roll"]:focus-within .hanly-asset-card__icon-frame,
  .hanly-asset-card[data-hover-animation="shock-compress"]:hover .hanly-asset-card__icon-frame,
  .hanly-asset-card[data-hover-animation="shock-compress"]:focus-within .hanly-asset-card__icon-frame,
  .hanly-asset-card[data-hover-animation="diagnostic-pulse"]:hover .hanly-asset-card__icon-frame,
  .hanly-asset-card[data-hover-animation="diagnostic-pulse"]:focus-within .hanly-asset-card__icon-frame,
  .hanly-asset-card[data-hover-animation="diagnostic-pulse"]:hover .hanly-asset-card__icon-frame::after,
  .hanly-asset-card[data-hover-animation="diagnostic-pulse"]:focus-within .hanly-asset-card__icon-frame::after {
    animation: none;
    transform: scale(calc(var(--hanly-icon-scale) / 100));
  }
}