/* ==========================================================
   Urotrex landing page - animations layer
   Uses the individual `translate` / `scale` properties so it
   never overrides existing `transform` rules in style.css
   ========================================================== */

/* ---------- Scroll reveal ---------- */
.js-anim [data-reveal] {
  opacity: 0;
  translate: 0 36px;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, translate;
}
.js-anim [data-reveal="zoom"] { translate: 0 0; scale: 0.88; }
.js-anim [data-reveal="left"] { translate: -48px 0; }
.js-anim [data-reveal="right"] { translate: 48px 0; }
.js-anim [data-reveal="fade"] { translate: 0 0; }

.js-anim [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* ---------- Hero entrance (on load) ---------- */
@keyframes heroIn {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}
.js-anim .main-inner__title,
.js-anim .main-inner__descr,
.js-anim .main-inner__list li,
.js-anim .main__form {
  opacity: 0;
  animation: heroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.js-anim .main-inner__title { animation-delay: 0.1s; }
.js-anim .main-inner__descr { animation-delay: 0.3s; }
.js-anim .main-inner__list li:nth-child(1) { animation-delay: 0.5s; }
.js-anim .main-inner__list li:nth-child(2) { animation-delay: 0.7s; }
.js-anim .main-inner__list li:nth-child(3) { animation-delay: 0.9s; }
.js-anim .main__form { animation-delay: 0.6s; }

/* ---------- Floating product images ---------- */
@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
.js-anim .container__product,
.js-anim .main-inner__mobile-product,
.js-anim .main-inner__mobile-product--sm,
.js-anim .bottom__text-product,
.js-anim .bottom__product-mobile,
.js-anim .farmaprost__image img {
  animation: floaty 4.5s ease-in-out infinite;
}

/* ---------- Order button: glow pulse + shine sweep ---------- */
@keyframes btnPulse {
  0%   { box-shadow: 0 18px 20px rgba(59, 175, 147, 0.35), 0 0 0 0 rgba(59, 175, 147, 0.45); }
  70%  { box-shadow: 0 18px 20px rgba(59, 175, 147, 0.35), 0 0 0 18px rgba(59, 175, 147, 0); }
  100% { box-shadow: 0 18px 20px rgba(59, 175, 147, 0.35), 0 0 0 0 rgba(59, 175, 147, 0); }
}
@keyframes btnShine {
  0%   { left: -80%; }
  60%, 100% { left: 130%; }
}
.js-anim .button {
  position: relative;
  overflow: hidden;
  animation: btnPulse 2.2s ease-out infinite;
}
.js-anim .button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: btnShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
.js-anim .button:hover { translate: 0 -3px; }
.js-anim .button:active { translate: 0 1px; scale: 0.98; }

/* ---------- Timer digits tick ---------- */
@keyframes tick {
  0%   { translate: 0 -6px; opacity: 0.4; }
  100% { translate: 0 0; opacity: 1; }
}
.timer__item.tick { animation: tick 0.35s ease-out; }

/* ---------- Price / discount ---------- */
@keyframes pop {
  0%   { scale: 1; }
  50%  { scale: 1.12; }
  100% { scale: 1; }
}
.js-anim .main__form-subtitle span,
.js-anim .price__new {
  display: inline-block;
  animation: pop 2.4s ease-in-out infinite;
}

/* ---------- Symptom / advantage cards hover ---------- */
.symptoms__item-inner,
.advantages__item,
.advantages__footer-item,
.main-inner__list-item {
  transition: translate 0.35s ease, filter 0.35s ease;
}
.symptoms__item-inner:hover,
.advantages__footer-item:hover,
.main-inner__list-item:hover {
  translate: 0 -6px;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.12));
}
.advantages__item-image-wrapper img,
.symptoms__item .image-block img {
  transition: scale 0.5s ease, rotate 0.5s ease;
}
.advantages__item:hover .advantages__item-image-wrapper img,
.symptoms__item:hover .image-block img {
  scale: 1.08;
  rotate: -2deg;
}

/* ---------- Arrow down bounce ---------- */
@keyframes bounceDown {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 10px; }
}
.js-anim .arrow-down__inner { animation: bounceDown 1.4s ease-in-out infinite; }

/* ---------- Form fields focus ---------- */
.form-top__input { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.form-top__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 175, 147, 0.35);
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(to right, #3BAF93, #5BC9AE);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}

/* ---------- Button click ripple ---------- */
@keyframes rippleGrow {
  from { transform: scale(0); opacity: 0.5; }
  to   { transform: scale(1); opacity: 0; }
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: rippleGrow 0.6s ease-out forwards;
  pointer-events: none;
}

/* ---------- Review card hover ---------- */
.reviews .swiper-slide {
  transition: filter 0.4s ease, translate 0.4s ease;
}
.reviews .swiper-slide:hover {
  translate: 0 -6px;
  filter: drop-shadow(0 14px 22px rgba(59, 175, 147, 0.15));
}

/* ---------- Timer badge glow when urgent ---------- */
@keyframes urgentGlow {
  0%, 100% { box-shadow: 0 10px 22px rgba(59, 175, 147, 0.25); }
  50%      { box-shadow: 0 10px 22px rgba(59, 175, 147, 0.4); }
}
.js-anim .timer__title { animation: urgentGlow 2s ease-in-out infinite; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal],
  .js-anim .main-inner__title,
  .js-anim .main-inner__descr,
  .js-anim .main-inner__list li,
  .js-anim .main__form {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  .js-anim .container__product,
  .js-anim .main-inner__mobile-product,
  .js-anim .main-inner__mobile-product--sm,
  .js-anim .bottom__text-product,
  .js-anim .bottom__product-mobile,
  .js-anim .farmaprost__image img,
  .js-anim .button,
  .js-anim .button::after,
  .js-anim .arrow-down__inner,
  .js-anim .main__form-subtitle span,
  .js-anim .price__new,
  .js-anim .timer__title { animation: none !important; }
  .ripple { display: none; }
}