/* =====================================================
   ГазМне01 — Animations & Transitions
   Scroll-reveal, hover effects, pulse, toast
   ===================================================== */

/* =====================================================
   Scroll Reveal Animations
   ===================================================== */

/* Base state for elements that will animate in */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal--left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal--right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal--scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Active state when element is in viewport */
.scroll-reveal--visible,
.scroll-reveal--left.scroll-reveal--visible,
.scroll-reveal--right.scroll-reveal--visible,
.scroll-reveal--scale.scroll-reveal--visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays for sequential animations */
.scroll-reveal--delay-1 {
  transition-delay: 0.1s;
}

.scroll-reveal--delay-2 {
  transition-delay: 0.2s;
}

.scroll-reveal--delay-3 {
  transition-delay: 0.3s;
}

.scroll-reveal--delay-4 {
  transition-delay: 0.4s;
}

.scroll-reveal--delay-5 {
  transition-delay: 0.5s;
}

/* =====================================================
   Card Hover Effects
   ===================================================== */

.card {
  position: relative;
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  opacity: 0;
  box-shadow: 0 20px 40px rgba(2, 132, 199, 0.15);
  transition: opacity 0.3s ease;
}

.card:hover::before {
  opacity: 1;
}

.card:hover {
  transform: translateY(-8px);
  border-color: rgba(2, 132, 199, 0.3);
}

.card__image {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover .card__image {
  transform: scale(1.05);
}

/* Feature card hover */
.feature {
  position: relative;
  overflow: hidden;
}

.feature::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0284C7, #22D3EE);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature:hover::after {
  transform: translateX(0);
}

.feature__icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature:hover .feature__icon {
  transform: scale(1.1) rotate(5deg);
}

/* =====================================================
   Button Animations
   ===================================================== */

.btn {
  position: relative;
  overflow: hidden;
  transform: translateY(0);
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Ripple effect on click */
@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

.btn--ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

.btn--ripple:active::after {
  animation: ripple 0.6s ease-out;
}

/* =====================================================
   Pulse Animation (Badge "Отгрузка 24/7")
   ===================================================== */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.badge--pulse .badge__dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  position: relative;
}

.badge--pulse .badge__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: inherit;
  transform: translate(-50%, -50%);
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Entire badge pulse on hover */
.badge--pulse:hover {
  animation: pulse 0.6s ease-in-out;
}

/* =====================================================
   Toast Slide-In Animation
   ===================================================== */

@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

.toast {
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast--hide {
  animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Toast shake on error */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

.toast--error {
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1), shake 0.5s ease-in-out 0.4s;
}

/* =====================================================
   Modal Fade & Scale Animation
   ===================================================== */

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideUp {
  from {
    transform: translateY(50px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes modalSlideDown {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(50px) scale(0.95);
    opacity: 0;
  }
}

.modal--active .modal__overlay {
  animation: modalFadeIn 0.3s ease-out;
}

.modal--active .modal__content {
  animation: modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal--closing .modal__overlay {
  animation: modalFadeOut 0.2s ease-out;
}

.modal--closing .modal__content {
  animation: modalSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================
   Loading Spinner
   ===================================================== */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(2, 132, 199, 0.2);
  border-top-color: #0284C7;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner--small {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner--large {
  width: 60px;
  height: 60px;
  border-width: 6px;
}

/* =====================================================
   Icon Hover Effects
   ===================================================== */

.icon-hover {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), fill 0.3s ease;
}

.icon-hover:hover {
  transform: scale(1.15);
}

/* Phone icon bounce */
@keyframes phoneBounce {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(15deg);
  }
}

.header__phone:hover .header__phone-icon {
  animation: phoneBounce 0.6s ease-in-out;
}

/* =====================================================
   Progress Bar Animation
   ===================================================== */

@keyframes progressLoad {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.progress-bar {
  height: 4px;
  background-color: rgba(2, 132, 199, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #0284C7, #22D3EE);
  border-radius: inherit;
  animation: progressLoad 1.5s ease-out;
}

/* =====================================================
   Skeleton Loading
   ===================================================== */

@keyframes skeleton {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #E2E8F0 25%,
    #F1F5F9 50%,
    #E2E8F0 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton--text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton--title {
  height: 2em;
  width: 60%;
  margin-bottom: 1em;
}

.skeleton--card {
  height: 300px;
  border-radius: 12px;
}

/* =====================================================
   Fade In/Out Utilities
   ===================================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-in {
  animation: fadeIn 0.4s ease-out;
}

.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

/* =====================================================
   Form Input Focus Effects
   ===================================================== */

.form-input,
.form-textarea,
.form-select {
  position: relative;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  animation: inputFocus 0.3s ease-out;
}

@keyframes inputFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.4);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1);
  }
}

/* =====================================================
   Hover Glow Effect
   ===================================================== */

.glow-on-hover {
  position: relative;
}

.glow-on-hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  opacity: 0;
  box-shadow: 0 0 20px rgba(2, 132, 199, 0.6);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.glow-on-hover:hover::after {
  opacity: 1;
}

/* =====================================================
   Number Counter Animation
   ===================================================== */

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.counter {
  animation: countUp 0.6s ease-out;
}

/* =====================================================
   Typing Indicator (для будущего чата)
   ===================================================== */

@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
}

.typing-indicator {
  display: flex;
  gap: 4px;
}

.typing-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0284C7;
  animation: typingDot 1.4s infinite;
}

.typing-indicator__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator__dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* =====================================================
   Bounce Animation
   ===================================================== */

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* =====================================================
   Slide In Animations (for future elements)
   ===================================================== */

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-up {
  animation: slideInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================
   Stagger Animation Delays
   ===================================================== */

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* =====================================================
   Reduced Motion Support
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-reveal,
  .scroll-reveal--left,
  .scroll-reveal--right,
  .scroll-reveal--scale {
    opacity: 1;
    transform: none;
  }
}