/* Wrapper */
.gl-thw{ display:block; width:100%; }
.gl-thw__row{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; margin-bottom:1.25rem; }
.gl-thw__thumb{ background:transparent; border:0; padding:0; margin-right:12px; cursor:pointer; outline:none; border-radius:999px; }
.gl-thw__thumb:last-child{ margin-right:0; }

.gl-thw__avatar{ display:block; width:56px; height:56px; background-size:cover; background-position:center; border-radius:50%; transition:opacity .25s ease; }

/* Panels area (fade-down animation) */
.gl-thw__panels{ position:relative; height:300px; } /* can be overridden by inline style from control */
.gl-thw__panel{ position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transform: translateY(-20px);
  transition:
    opacity var(--gl-thw-ms,350ms) ease,
    transform var(--gl-thw-ms,350ms) ease,
    visibility 0s linear var(--gl-thw-ms,350ms);
  text-align:center; padding:0 12px; }
.gl-thw__panel.is-active{ opacity:1; visibility:visible; transform: translateY(0); }
.gl-thw__inner{ width:100%; max-width:900px; margin:0 auto; }


/* Text */
.gl-thw__quote{ font-size:1.05rem; line-height:1.75; margin:0; }
.gl-thw__meta{ margin-top:.75rem; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; opacity:.85; }
.gl-thw__name{ font-weight:600; }
.gl-thw__role{ font-size:.75rem; margin-top:.25rem; opacity:.75; }

/* Stars */
.gl-thw__stars{ display:flex; align-items:center; justify-content:center; gap:4px; margin-bottom:.6rem; color:currentColor; }
.gl-thw__stars svg{ width:16px; height:16px; display:block; }

/* Focus */
.gl-thw__thumb:focus-visible{ box-shadow:0 0 0 3px rgba(100,150,255,.6); border-radius:999px; }


/* === Active avatar animation (bigger, jump up, radiating) === */
.gl-thw__thumb{ position:relative; transition: transform .25s ease; }
.gl-thw__avatar{ position:relative; transition: transform .28s ease, box-shadow .28s ease, opacity .25s ease; }

.gl-thw__thumb.is-active{ transform: translateY(-6px); }
.gl-thw__thumb.is-active .gl-thw__avatar{
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Radiating pulse ring from active avatar */
.gl-thw__thumb.is-active .gl-thw__avatar::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;

  border: 2px solid rgba(0,0,0,.15);
  animation: gl-thw-pulse 1.6s ease-out infinite;
  pointer-events:none;
}

@keyframes gl-thw-pulse{
  0%   { transform: scale(1);   opacity:.45; }
  70%  { transform: scale(1.25); opacity:.08; }
  100% { transform: scale(1.35); opacity:0; }
}