.sr { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.sr.sr-visible { opacity: 1; transform: translateY(0); }
.sr-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.sr-left.sr-visible { opacity: 1; transform: translateX(0); }
.sr-right { opacity: 0; transform: translateX(50px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.sr-right.sr-visible { opacity: 1; transform: translateX(0); }
.sr-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.sr-scale.sr-visible { opacity: 1; transform: scale(1); }
.sr-line { position: relative; }
.sr-line::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--primary, #15d18a), rgba(21,209,138,0.2)); transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
.sr-line.sr-visible::after { width: 100%; }
.sr-bar { position: relative; overflow: hidden; }
.sr-bar::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, var(--primary, #15d18a), transparent); transform: translateX(-100%); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.sr-bar.sr-visible::before { transform: translateX(100%); }
.sr-d1 { transition-delay: 0.05s !important; }
.sr-d2 { transition-delay: 0.1s !important; }
.sr-d3 { transition-delay: 0.15s !important; }
.sr-d4 { transition-delay: 0.2s !important; }
.sr-d5 { transition-delay: 0.25s !important; }
.sr-d6 { transition-delay: 0.3s !important; }
.sr-d7 { transition-delay: 0.35s !important; }
.sr-d8 { transition-delay: 0.4s !important; }
.sr-d9 { transition-delay: 0.45s !important; }
.sr-d10 { transition-delay: 0.5s !important; }
.sr-d11 { transition-delay: 0.55s !important; }
.sr-d12 { transition-delay: 0.6s !important; }
@media (prefers-reduced-motion: reduce) {
  .sr, .sr-left, .sr-right, .sr-scale { opacity: 1; transform: none; transition: none; }
  .sr-line::after { width: 100%; transition: none; }
  .sr-bar::before { transform: none; transition: none; }
}