:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shimmer-dur: 2000ms;
  --shimmer-base: #494552;
  --shimmer-highlight: #230060;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger-line--5 { transition-delay: calc(var(--stagger-stagger) * 4); }
.t-stagger-line--6 { transition-delay: calc(var(--stagger-stagger) * 5); }
.t-stagger-line--7 { transition-delay: calc(var(--stagger-stagger) * 6); }
.t-stagger-line--8 { transition-delay: calc(var(--stagger-stagger) * 7); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.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: 0s;
}

.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

.t-input {
  transition: border-color 150ms ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear 0s;
}
.t-input.is-shaking {
  animation: t-input-shake calc(
      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
    ) linear;
}
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}

.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

.t-motion-reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(3px);
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
.t-motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.t-motion-card {
  transition:
    transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 250ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 250ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 250ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.t-motion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(59, 14, 140, 0.10);
}
.t-motion-button {
  transition:
    transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 150ms ease-out,
    border-color 150ms ease-out,
    box-shadow 150ms ease-out,
    color 150ms ease-out;
}
.t-motion-button:hover { transform: translateY(-1px); }
.t-motion-button:active { transform: translateY(0); }
.t-motion-media {
  overflow: hidden;
}
.t-motion-media img,
.t-motion-media video {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.t-motion-media:hover img,
.t-motion-media:hover video {
  transform: scale(1.035);
  filter: saturate(1.05);
}
.t-status-dot {
  animation: t-status-pulse 2000ms ease-in-out infinite;
}
@keyframes t-status-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.45); opacity: .55; }
}
.t-success-message {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.t-input.is-error,
.field.is-error {
  border-color: #ba1a1a !important;
  box-shadow: 0 0 0 2px rgba(186, 26, 26, 0.16) !important;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line,
  .t-motion-reveal,
  .t-motion-card,
  .t-motion-button,
  .t-motion-media img,
  .t-motion-media video {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .t-shimmer::before,
  .t-input,
  .t-status-dot,
  .t-success-check,
  .t-success-check svg path {
    animation: none !important;
  }
  .t-success-check { opacity: 1; }
  .t-success-check svg path { stroke-dashoffset: 0 !important; }
}