/* Loader progress typography */
.loader-progress-number {
  letter-spacing: 1px;
}
.loader-progress-caption {
  opacity: 0.9;
  white-space: nowrap;
  /* font-family: var(--font-compact); */
  font-weight: 600;
  /* margin-top: -1em; */
}

/* Animations utilities aligned with design.mdc */
/* Note: Tokens (--easing, --dur-*, --color-primary) are defined in tokens.css */

.anim-fade-in{ animation: fade-in var(--dur) var(--easing) both; }
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }

.anim-slide-up{ animation: slide-up var(--dur) var(--easing) both; }
@keyframes slide-up{ from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform:none } }

.anim-press:active{ transform: scale(.98); }

.anim-underline{ position:relative; }
.anim-underline::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:3px; background: rgb(var(--color-primary)); transition: right var(--dur-fast) var(--easing); }
.anim-underline:hover::after, .anim-underline.is-active::after{ right:0; }

.anim-pulse{ animation: pulse-soft 1.4s var(--easing) infinite; }
@keyframes pulse-soft{ 0%{ box-shadow: 0 0 0 0 rgba(var(--color-primary-active), .25) } 70%{ box-shadow: 0 0 0 8px rgba(var(--color-primary-active), 0) } 100%{ box-shadow: 0 0 0 0 rgba(var(--color-primary-active), 0) } }

/* subtle wiggle for the search play icon */
@keyframes play-wiggle {
  0%   { transform: rotate(0deg) scale(1); }
  10%  { transform: rotate(-12deg) scale(1.02); }
  20%  { transform: rotate(10deg) scale(1.02); }
  30%  { transform: rotate(-8deg) scale(1.01); }
  40%  { transform: rotate(6deg) scale(1.01); }
  50%  { transform: rotate(-4deg); }
  60%  { transform: rotate(3deg); }
  70%  { transform: rotate(-2deg); }
  80%  { transform: rotate(1deg); }
  90%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg) scale(1); }
}

/* micro vibration for CTA button (one-shot) */
@keyframes vibrate-soft {
  0%   { transform: translate3d(0,0,0) }
  15%  { transform: translate3d(-1px, 0, 0) }
  30%  { transform: translate3d(1px, 0, 0) }
  45%  { transform: translate3d(-1px, 0, 0) }
  60%  { transform: translate3d(1px, 0, 0) }
  75%  { transform: translate3d(-0.5px, 0, 0) }
  90%  { transform: translate3d(0.5px, 0, 0) }
  100% { transform: translate3d(0,0,0) }
}

/* modern animated gradient + sheen */
@keyframes gradient-shift{
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

@keyframes sheen{
  0%   { transform: translateX(-120%); opacity: .0 }
  10%  { opacity: .85 }
  50%  { transform: translateX(120%); opacity: .0 }
  100% { transform: translateX(120%); opacity: .0 }
}

.dropdown-menu{ transform: translateY(4px); opacity:0; transition: transform var(--dur-fast) var(--easing), opacity var(--dur-fast) var(--easing); }
.dropdown-menu.show{ transform:none; opacity:1; }

@media (prefers-reduced-motion: reduce){
  .anim-fade-in, .anim-slide-up, .anim-pulse{ animation:none !important }
  .dropdown-menu{ transition:none; transform:none !important; opacity:1 !important; }
}