/* GIZ Interactive Ribbon: transparent artwork; host controls the surface. */
.giz-interactive-ribbon {
  --giz-ribbon-glow: rgba(177, 126, 238, .45);
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  line-height: 0;
}
.giz-interactive-ribbon img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.giz-interactive-ribbon::before,
.giz-interactive-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.giz-interactive-ribbon::before {
  background: url("./ribbon.png") center / contain no-repeat;
}
.giz-interactive-ribbon[data-state="idle"] img {
  animation: giz-ribbon-idle 20s ease-in-out infinite;
}
.giz-interactive-ribbon[data-state="hover"] img {
  animation: giz-ribbon-hover 240ms ease-out both;
}
.giz-interactive-ribbon[data-state="hover"]::after {
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(123,219,240,.44) 0,rgba(178,117,234,.28) 43%,transparent 72%);
  filter: blur(9px);
  animation: giz-ribbon-hover-halo 240ms ease-out both;
}
.giz-interactive-ribbon[data-state="focus"] {
  outline: 2px solid #b98ce9;
  outline-offset: 4px;
  border-radius: 8px;
}
.giz-interactive-ribbon[data-state="press"] img {
  transform: scale(.92);
  transition: transform 120ms ease-out;
}
/* Ribbon sends a brief prism trace, with no paper-plane overlay. */
.giz-interactive-ribbon[data-state="send"] img {
  animation: giz-ribbon-send 520ms cubic-bezier(.18,.72,.27,1) both;
}
.giz-interactive-ribbon[data-state="send"]::before {
  animation: giz-ribbon-send-echo 520ms ease-out both;
}
.giz-interactive-ribbon[data-state="send"]::after {
  inset: 42% 8%;
  height: 14%;
  border-radius: 999px;
  background: linear-gradient(90deg,transparent,rgba(83,223,234,.8),rgba(179,106,241,.85),rgba(250,183,111,.65),transparent);
  filter: blur(6px);
  transform-origin: left;
  animation: giz-ribbon-send-trace 520ms ease-out both;
}
.giz-interactive-ribbon[data-state="thinking"] img {
  animation: giz-ribbon-breathe 2.4s ease-in-out infinite;
}
/* Answer arrives as a colour wave resolving into the ribbon, with no tick. */
.giz-interactive-ribbon[data-state="arrival"] img {
  animation: giz-ribbon-arrival 640ms cubic-bezier(.2,.72,.2,1) both;
}
.giz-interactive-ribbon[data-state="arrival"]::before {
  animation: giz-ribbon-arrival-echo 640ms ease-out both;
}
.giz-interactive-ribbon[data-state="arrival"]::after {
  inset: 17%;
  border: 2px solid rgba(174,113,235,.62);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(75,215,232,.33);
  animation: giz-ribbon-arrival-ring 640ms ease-out both;
}
/* Handoff uses a ribbon echo and moving line, with no arrow. */
.giz-interactive-ribbon[data-state="handoff"] img {
  animation: giz-ribbon-handoff 720ms cubic-bezier(.2,.72,.3,1) both;
}
.giz-interactive-ribbon[data-state="handoff"]::before {
  animation: giz-ribbon-handoff-echo 720ms ease-in-out both;
}
.giz-interactive-ribbon[data-state="handoff"]::after {
  inset: 47% 12%;
  height: 3px;
  background: linear-gradient(90deg,transparent,#74ddea,#b185ed,transparent);
  filter: blur(2px);
  animation: giz-ribbon-handoff-trace 720ms ease-out both;
}
@keyframes giz-ribbon-hover { from { transform: scale(1); filter: none; } to { transform: scale(1.055); filter: drop-shadow(0 0 11px rgba(173,127,238,.48)); } }
@keyframes giz-ribbon-hover-halo { from { opacity: 0; transform: scale(.75); } to { opacity: .58; transform: scale(1.1); } }
@keyframes giz-ribbon-idle { 50% { transform: translateY(-3px) scale(1.015); } }
@keyframes giz-ribbon-breathe { 50% { transform: scale(1.04); filter: drop-shadow(0 0 13px var(--giz-ribbon-glow)); } }
@keyframes giz-ribbon-send { 0% { transform: translateX(-5px) scale(.93); } 42% { transform: translateX(3px) scale(1.06); filter: drop-shadow(0 0 12px var(--giz-ribbon-glow)); } 100% { transform: translateX(9px) scale(.98); filter: none; } }
@keyframes giz-ribbon-send-echo { 0% { opacity: 0; transform: translateX(-18px) scale(.82); } 40% { opacity: .38; } 100% { opacity: 0; transform: translateX(10px) scale(1.1); } }
@keyframes giz-ribbon-send-trace { 0% { opacity: 0; transform: scaleX(.08) translateX(-20%); } 44% { opacity: .72; } 100% { opacity: 0; transform: scaleX(1.25) translateX(18%); } }
@keyframes giz-ribbon-arrival { 0% { opacity: 0; transform: translateY(12px) rotate(-7deg) scale(.78); filter: blur(5px); } 48% { opacity: 1; transform: translateY(-3px) rotate(2deg) scale(1.06); filter: drop-shadow(0 0 16px var(--giz-ribbon-glow)); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes giz-ribbon-arrival-echo { 0% { opacity: 0; transform: scale(.65) rotate(-12deg); } 45% { opacity: .34; } 100% { opacity: 0; transform: scale(1.22) rotate(5deg); } }
@keyframes giz-ribbon-arrival-ring { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: .8; } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes giz-ribbon-handoff { 0% { transform: translateX(-7px) scale(.96); } 38% { transform: translateX(9px) scale(1.03); filter: drop-shadow(0 0 12px rgba(119,215,235,.5)); } 72% { transform: translateX(16px) scale(.98); } 100% { transform: translateX(6px); filter: none; } }
@keyframes giz-ribbon-handoff-echo { 0% { opacity: 0; transform: translateX(-18px); } 38% { opacity: .4; } 78% { opacity: .25; transform: translateX(16px); } 100% { opacity: 0; transform: translateX(25px); } }
@keyframes giz-ribbon-handoff-trace { 0% { opacity: 0; transform: translateX(-35%) scaleX(.2); } 42% { opacity: .9; } 100% { opacity: 0; transform: translateX(45%) scaleX(1.2); } }
.giz-interactive-ribbon[data-state="reduced"] img { animation: none; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .giz-interactive-ribbon img { animation: none !important; transition: none !important; transform: none !important; filter: none !important; }
  .giz-interactive-ribbon::before,.giz-interactive-ribbon::after { animation: none !important; opacity: 0 !important; }
}