:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
}

.t-stagger-line {
  display: block;
  --stagger-order: 0;
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter var(--stagger-dur) var(--stagger-ease);
  transition-delay: calc(var(--stagger-stagger) * var(--stagger-order));
}

.t-stagger-line--2 { --stagger-order: 1; }
.t-stagger-line--3 { --stagger-order: 2; }
.t-stagger-line--4 { --stagger-order: 3; }

/* Content remains visible before initialization and while waiting to enter. */
.t-stagger[data-stagger-ready] .t-stagger-line {
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
}

.t-stagger[data-stagger-active] .t-stagger-line {
  will-change: transform, opacity, filter;
}

.t-stagger[data-stagger-preparing] .t-stagger-line {
  transition: none;
}

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Reusable exit state; no scrolling or unrelated control triggers an exit. */
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 200ms ease, transform 0s linear, filter 0s linear;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger .t-stagger-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Portrait sizes, borders and overlap remain owned by the existing group. */
.t-avatar-group { isolation: isolate; }
.t-avatar {
  position: relative;
  transform-origin: center;
  transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1));
  transition: transform var(--avatar-dur) var(--avatar-ease-in);
  will-change: transform;
}
.t-avatar[data-avatar-active] { z-index: 1; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .t-avatar { transition: none !important; transform: none !important; will-change: auto; }
}