/* --------------------------------------------------------------------------
   app.css — стили, которые в React-версии жили внутри компонентов
   (React рендерил их тегом <style> прямо в разметку) плюс замена анимаций
   framer-motion и react-fast-marquee.

   style.css рядом — сгенерированный Tailwind, его править не нужно.
   -------------------------------------------------------------------------- */

/* --- GreenButton: блик по кнопке (src/components/ui/GreenButton.tsx) ------- */

@keyframes shimmereffect {
  0%   { left: -150%; }
  50%  { left: 150%; }
  100% { left: 150%; }
}

.btn-glare {
  position: absolute;
  top: 0;
  height: 100%;
  width: 120px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shimmereffect 3s infinite linear;
  pointer-events: none;
}

/* --- Reviews: карусель coverflow (src/app/components/Reviews/Reviews.tsx) -- */

.reviews-coverflow .swiper {
  padding-top: 10px;
  padding-bottom: 10px;
}

.reviews-coverflow .swiper-slide {
  width: 300px;
  transition: filter .45s ease, opacity .45s ease;
  filter: blur(4px);
  opacity: .65;
}

.reviews-coverflow .swiper-slide-active {
  filter: blur(0);
  opacity: 1;
}

@media (max-width: 1023px) {
  .reviews-coverflow .swiper-slide { width: 240px; }
}

@media (max-width: 640px) {
  .reviews-coverflow .swiper-slide { width: 190px; }
}

/* Кнопку play у играющего видео прячет утилита `group-[.is-playing]:hidden`
   из style.css — скрипт лишь вешает класс is-playing на слайд, ровно как React. */

/* --- Companies: бегущая строка (замена react-fast-marquee, speed 50) ------ */

.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  flex-direction: row;
}

.marquee__group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: max-content;
  animation: marquee-scroll var(--marquee-duration, 20s) linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-shift, 100%))); }
}

/* --- Reveal при скролле (замена framer-motion whileInView) ----------------- */

/* Стартовое состояние задано инлайновым style прямо в разметке — ровно тем же,
   какой отдавал сервер в Next. Скрипт снимает его, когда секция входит в экран,
   и переход отрабатывает по этому transition. */
[data-reveal] {
  will-change: opacity, transform;
}

/* Ховер-масштаб карточек: в React это whileHover={{ scale }} */
.hover-scale-102 { transition: transform .2s cubic-bezier(.25, .1, .25, 1); }
.hover-scale-102:hover { transform: scale(1.02); }

.hover-scale-101 { transition: transform .2s cubic-bezier(.25, .1, .25, 1); }
.hover-scale-101:hover { transform: scale(1.01); }

/* --- Hero: бейдж «Mentoría 100% gratuita — Sin costes» ---------------------
   Стоит на месте скрытых кнопок соцсетей. Пилюля в стиле остальных плашек
   хиро (белый фон, rounded-full), акцент — фирменный --color-green. */

.free-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(4, 41, 64, 0.06);
  font-size: 0.875rem;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;
}

.free-badge__accent {
  color: var(--color-green);
  font-weight: 700;
}

.free-badge__muted {
  color: #5c6672;
}

@media (max-width: 640px) {
  .free-badge {
    padding: 6px 12px;
    font-size: 0.8125rem;
  }
}