/* Logo Icon · Animações (para uso no motion-export)
   Duplicadas de logo-animations.html para ficarem reutilizáveis.
   Todos os seletores usam :hover — o motion-export injeta alias .is-hover. */

:root{
  --icon-purple: var(--xami-purple-500, #7543FF);
  --icon-lavender: var(--xami-lavender-100, #E6EAFF);
}

/* Base tile */
.icon-tile{
  width:160px;height:160px;border-radius:23.87%;
  background:var(--icon-purple);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.icon-tile svg{width:115px;height:115px;display:block}
.icon-tile svg path{fill:var(--icon-lavender)}

/* ─── 01 Draw X ─── */
.card-icon-draw .icon-tile svg path{
  fill:none;stroke:var(--icon-lavender);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:290;stroke-dashoffset:290;fill-opacity:0;
}
.card-icon-draw:hover .icon-tile svg path{animation:iconDrawX 1400ms ease-out forwards}
@keyframes iconDrawX{
  0%{stroke-dashoffset:290;fill-opacity:0}
  65%{stroke-dashoffset:0;fill-opacity:0}
  100%{stroke-dashoffset:0;fill-opacity:1;stroke-width:0;fill:var(--icon-lavender)}
}

/* ─── 02 Pulse ─── */
.card-icon-pulse:hover .icon-tile{animation:iconTilePulse 1600ms ease-in-out infinite}
@keyframes iconTilePulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(117,67,255,.5)}
  50%{transform:scale(1.08);box-shadow:0 0 0 40px rgba(117,67,255,0)}
}

/* ─── 03 Rotate-in ─── */
.card-icon-rotate:hover .icon-tile{animation:iconRotateIn 900ms cubic-bezier(.2,.7,.1,1) both}
@keyframes iconRotateIn{
  from{transform:rotate(-90deg) scale(.3);border-radius:50%;opacity:0}
  to{transform:rotate(0) scale(1);border-radius:23.87%;opacity:1}
}

/* ─── 04 Morph ─── */
.card-icon-morph:hover .icon-tile{animation:iconMorphRadius 2000ms ease-in-out infinite}
@keyframes iconMorphRadius{
  0%,100%{border-radius:23.87%;transform:rotate(0)}
  50%{border-radius:50%;transform:rotate(45deg)}
}
.card-icon-morph:hover .icon-tile svg{animation:iconCounterRot 2000ms ease-in-out infinite}
@keyframes iconCounterRot{0%,100%{transform:rotate(0)}50%{transform:rotate(-45deg)}}

/* ─── 05 Glow bloom ─── */
.card-icon-glow .icon-tile{transition:transform 400ms ease,box-shadow 400ms ease}
.card-icon-glow:hover .icon-tile{transform:scale(1.06);box-shadow:0 0 0 2px rgba(117,67,255,.3), 0 14px 40px -6px rgba(117,67,255,.8),0 0 60px rgba(117,67,255,.5)}
.card-icon-glow .bloom{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(117,67,255,.5),transparent 60%);opacity:0;pointer-events:none}
.card-icon-glow:hover .bloom{animation:iconBloom 1400ms ease-out infinite}
@keyframes iconBloom{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.4);opacity:0}}

/* ─── 06 Split halves ─── */
.card-icon-split .icon-tile{background:transparent}
.card-icon-split .icon-tile svg{transition:opacity 300ms ease 350ms,transform 300ms ease 350ms}
.card-icon-split .half{position:absolute;top:0;bottom:0;width:50%;background:var(--icon-purple);transition:transform 600ms cubic-bezier(.7,0,.2,1)}
.card-icon-split .half.l{left:0;border-radius:23.87% 0 0 23.87%}
.card-icon-split .half.r{right:0;border-radius:0 23.87% 23.87% 0}
.card-icon-split:hover .half.l{transform:translateX(-110%)}
.card-icon-split:hover .half.r{transform:translateX(110%)}
.card-icon-split .icon-tile svg{position:relative;z-index:1;opacity:0;transform:scale(.7)}
.card-icon-split:hover .icon-tile svg{opacity:1;transform:scale(1)}
.card-icon-split .icon-tile svg path{fill:var(--icon-purple)}

/* ─── 07 Shine sweep ─── */
.card-icon-shine .icon-tile::before{
  content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55),transparent 70%);
  transform:translateX(-150%) rotate(15deg);pointer-events:none;
}
.card-icon-shine:hover .icon-tile::before{animation:iconShine 1100ms ease-in-out}
@keyframes iconShine{
  0%{transform:translateX(-150%) rotate(15deg)}
  100%{transform:translateX(350%) rotate(15deg)}
}

/* ─── 08 Wordmark wipe ─── */
.card-icon-wipe .wm{display:flex;align-items:center;gap:24px}
.card-icon-wipe .wm .icon-tile{width:120px;height:120px}
.card-icon-wipe .wm .icon-tile svg{width:86px;height:86px}
.card-icon-wipe .word-wrap{position:relative;overflow:hidden;height:80px;display:flex;align-items:center}
.card-icon-wipe .word-wrap img{display:block;height:80px}
.card-icon-wipe .word-wrap::after{content:"";position:absolute;inset:0;background:#0a0820;transform-origin:right center;transition:transform 800ms cubic-bezier(.7,0,.2,1) 100ms}
.card-icon-wipe:hover .word-wrap::after{transform:scaleX(0)}
.card-icon-wipe:hover .icon-tile svg path{
  fill:none;stroke:var(--icon-lavender);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:290;stroke-dashoffset:290;fill-opacity:0;
  animation:iconDrawX 1200ms ease-out forwards;
}
</content>