/* Outline icon tiles with a playful hover effect (Tabler outline icons) */
.td-card-icon,
.am .am-ico{
  --ico-gold:#f2b01e;--ico-ink:#162235;
  position:relative;display:inline-grid;place-items:center;flex:0 0 auto;
  width:52px;height:52px;border-radius:16px;
  background:#fff;border:1.5px solid rgba(242,176,30,.6);
  color:var(--ico-ink);font-size:1.55rem;line-height:1;
  box-shadow:0 6px 16px rgba(242,176,30,.2);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,border-color .25s,box-shadow .25s;
}
.td-card-icon{margin-bottom:14px}
.td-card-icon .ti,.am .am-ico .ti{display:block;line-height:1;transition:color .25s}

/* sparkle that pops in on hover */
.td-card-icon::after,
.am .am-ico::after{
  content:"\2726";position:absolute;top:-9px;right:-8px;
  color:var(--ico-gold);font-size:.8rem;line-height:1;
  opacity:0;transform:scale(0) rotate(-45deg);
  transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* hover on the whole card / tile */
.td-card:hover .td-card-icon,
.am-highlights li:hover .am-ico,
.am-zone:hover .am-ico{
  transform:translateY(-4px) rotate(-6deg) scale(1.08);
  background:#fff6dc;border-color:var(--ico-gold);
  box-shadow:0 12px 24px rgba(242,176,30,.32);
}
.td-card:hover .td-card-icon .ti,
.am-highlights li:hover .am-ico .ti,
.am-zone:hover .am-ico .ti{animation:ti-wiggle .7s ease-in-out}
.td-card:hover .td-card-icon::after,
.am-highlights li:hover .am-ico::after,
.am-zone:hover .am-ico::after{opacity:1;transform:scale(1) rotate(0)}

@keyframes ti-wiggle{
  0%{transform:rotate(0) scale(1)}
  25%{transform:rotate(12deg) scale(1.15)}
  50%{transform:rotate(-10deg) scale(1.1)}
  75%{transform:rotate(6deg) scale(1.12)}
  100%{transform:rotate(0) scale(1)}
}

/* small inline icons (buttons and links) */
.towers-plan-pdf .ti,.towers-plan-hint .ti{font-size:1.1em;line-height:1;vertical-align:-.12em}

@media (max-width:700px){
  .td-card-icon,.am .am-ico{width:46px;height:46px;font-size:1.4rem;border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .td-card-icon,.am .am-ico,.td-card-icon::after,.am .am-ico::after{transition:none}
  .td-card:hover .td-card-icon .ti,.am-highlights li:hover .am-ico .ti,.am-zone:hover .am-ico .ti{animation:none}
  .td-card:hover .td-card-icon,.am-highlights li:hover .am-ico,.am-zone:hover .am-ico{transform:none}
}