/* ==========================================================================
   SHABBY MAX — animation library
   ========================================================================== */

/* ---------- Logo intro: letters slide together ---------- */

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-140px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(140px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.logo__part--shabby {
  animation: slide-in-left 900ms var(--ease-out) both;
}

.logo__part--max {
  animation: slide-in-right 900ms var(--ease-out) both;
}

@keyframes flash-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  40% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

.logo__flash.is-flashing {
  animation: flash-pop 500ms ease-out forwards;
}

/* Breathing glow once assembled */
@keyframes breathe {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.25);
  }
}

.logo.is-idle {
  animation: breathe var(--dur-breathe) ease-in-out infinite;
}

/* Rare flicker */
@keyframes flicker {
  0%, 96%, 100% {
    opacity: 1;
  }
  97% {
    opacity: 0.55;
  }
  98% {
    opacity: 1;
  }
  99% {
    opacity: 0.7;
  }
}

.logo.is-idle .logo__part {
  animation: flicker var(--dur-flicker) linear infinite;
}

/* ---------- Generic utility animations ---------- */

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.sun {
  animation: glow-pulse 5s ease-in-out infinite;
}

@keyframes float-y {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes grid-scroll {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 60px, 0 60px;
  }
}

.grid {
  animation: grid-scroll 3.5s linear infinite;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fade-in var(--dur-slow) var(--ease-out) both;
}

@keyframes twinkle {
  0%, 100% {
    opacity: var(--star-opacity, 0.6);
  }
  50% {
    opacity: 0.15;
  }
}

.star {
  position: absolute;
  border-radius: 50%;
  background: var(--color-white);
  animation: twinkle var(--star-duration, 3s) ease-in-out infinite;
  animation-delay: var(--star-delay, 0s);
}

@keyframes shoot {
  0% {
    transform: translate(0, 0) rotate(-30deg);
    opacity: 1;
  }
  100% {
    transform: translate(-420px, 260px) rotate(-30deg);
    opacity: 0;
  }
}

.shooting-star {
  position: absolute;
  width: 140px;
  height: 2px;
  background: linear-gradient(to left, var(--color-white), transparent);
  animation: shoot 1.1s linear forwards;
}

@keyframes particle-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: var(--particle-opacity, 0.7);
  }
  90% {
    opacity: var(--particle-opacity, 0.7);
  }
  100% {
    transform: translateY(-120px) scale(0.6);
    opacity: 0;
  }
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: particle-rise var(--particle-duration, 8s) ease-in-out infinite;
  animation-delay: var(--particle-delay, 0s);
}

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

/* На мобильных — отключаем все избыточные анимации фона */
@media (max-width: 767px) {
  /* Отключаем анимацию сетки (grid-scroll) — постоянные перерисовки */
  .grid {
    animation: none;
  }

  /* Отключаем бесконечную анимацию свечения логотипа */
  .logo__image {
    animation: logoReveal 0.6s ease-out 0.1s forwards;
  }

  /* Отключаем "дыхание" солнца и другие постоянные анимации */
  .sun {
    animation: none;
  }
}