/* ============================================================
   INTERACTIONS — hover-эффекты и idle-анимации.

   Принципы:
   - Idle motion subtle: 4-8s длительность, easing ease-in-out,
     амплитуда минимальна (≤6px / ≤1.05 scale).
   - Hover — мгновенная обратная связь, transition 150-400ms.
   - prefers-reduced-motion: idle-keyframes выключаются, hover
     оставляем (это функциональный feedback, не декор).
   ============================================================ */

/* ============================================================
   HERO — idle effects
   ============================================================ */

/* Title-mark: лаймовая плашка subtle pulse */
@keyframes mark-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 var(--border-w) var(--accent),
                0 6px 22px -10px var(--accent-glow);
  }
  50% {
    box-shadow: 0 0 0 var(--border-w) var(--accent),
                0 10px 38px -8px var(--accent-glow);
  }
}
.hero__title-mark {
  animation: mark-glow-pulse 3.6s ease-in-out infinite;
}

/* Decor cube — медленное покачивание */
@keyframes cube-sway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(-1deg); }
}
.hero__decor--cube {
  animation: cube-sway 7s ease-in-out infinite;
}

/* Decor circle — лёгкое дыхание */
@keyframes circle-breath {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.04); opacity: 0.9; }
}
.hero__decor--circle {
  animation: circle-breath 5.5s ease-in-out infinite;
  transform-origin: center;
}

/* Barcode — scan-эффект opacity */
@keyframes barcode-scan {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.28; }
}
.hero__barcode { animation: barcode-scan 4s ease-in-out infinite; }
[data-theme="dark"] .hero__barcode { animation-name: barcode-scan-dark; }
@keyframes barcode-scan-dark {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.15; }
}

/* Hero products — лёгкое плавание (idle bob).
   GSAP 3.12+ использует CSS `translate` (individual property),
   поэтому `transform: translateY` не конфликтует с parallax. */
@keyframes product-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero__product--center,
.hero__product--left,
.hero__product--right { position: relative; }
.hero__product--center { animation: product-bob 5.5s ease-in-out infinite; }
.hero__product--left   { animation: product-bob 6.5s ease-in-out infinite 0.4s; }
.hero__product--right  { animation: product-bob 7.5s ease-in-out infinite 0.9s; }

/* Hero meta-top — точечный «scroll-by» текст справа */
@keyframes meta-blink {
  0%, 92% { opacity: 0.55; }
  96%     { opacity: 1; }
  100%    { opacity: 0.55; }
}
.hero__meta-top > span:first-child {
  animation: meta-blink 4s steps(1) infinite;
}

/* ============================================================
   ABOUT / LABEL CARDS — hover lift + accent edge
   ============================================================ */

.label-card {
  transition: transform 0.35s var(--ease),
              border-color 0.25s var(--ease),
              box-shadow 0.35s var(--ease);
}
.label-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 18px 36px -22px var(--accent-glow),
              0 0 0 var(--border-w) var(--accent) inset;
}
.label-card__icon {
  transition: transform 0.4s var(--ease), color 0.25s var(--ease);
}
.label-card:hover .label-card__icon {
  transform: rotate(15deg) scale(1.1);
}
.label-card:hover .label-card__lot {
  color: var(--text);
}
.label-card__lot { transition: color 0.25s var(--ease); }

@keyframes label-icon-spin {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.12); }
  to   { transform: rotate(360deg) scale(1); }
}

@media (hover: none) and (pointer: coarse) {
  .label-card__icon {
    width: 54px;
    height: 54px;
    color: var(--accent);
    animation: label-icon-spin 10s ease-in-out infinite;
  }
  .label-card:nth-child(2) .label-card__icon { animation-delay: -2.5s; }
  .label-card:nth-child(3) .label-card__icon { animation-delay: -5s; }
  .label-card:nth-child(4) .label-card__icon { animation-delay: -7.5s; }
}

/* ============================================================
   CAROUSEL
   ============================================================ */

.carousel__slide { position: relative; }

/* SVG-mockup в активном — micro-breath */
@keyframes svg-breath {
  0%, 100% { transform: scale(1.02); }
  50%      { transform: scale(1.06); }
}
.carousel__slide.is-active .carousel__slide-media svg,
.carousel__slide.is-active .carousel__slide-product-img {
  animation: svg-breath 4.5s ease-in-out infinite;
}

/* Hover на неактивный слайд — лёгкое поднятие opacity */
.carousel__slide:not(.is-active):hover {
  opacity: 0.55;
  cursor: pointer;
}
.carousel__slide:not(.is-active):hover .carousel__slide-media svg,
.carousel__slide:not(.is-active):hover .carousel__slide-product-img {
  transform: scale(1.04);
  transition: transform 0.3s var(--ease);
}

/* Carousel media — hover тэг сдвигается слегка */
.carousel__slide-media-tag,
.carousel__slide-media-lot {
  transition: transform 0.3s var(--ease);
}
.carousel__slide:hover .carousel__slide-media-tag {
  transform: translateX(2px) translateY(-2px);
}
.carousel__slide:hover .carousel__slide-media-lot {
  transform: translateX(2px) translateY(2px);
}

/* Активная точка — accent pulse-ring */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  60%      { box-shadow: 0 0 0 8px transparent; }
}
.carousel__dot.is-active {
  animation: dot-pulse 2.2s ease-in-out infinite;
}

/* Стрелки навигации — directional hint при hover */
#carousel-prev,
#carousel-next {
  transition: background-color 0.2s var(--ease),
              color 0.2s var(--ease),
              transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
#carousel-prev:hover { transform: translate(-4px, -2px); }
#carousel-next:hover { transform: translate(4px, -2px); }

/* ============================================================
   PARTNERS MARQUEE — extra hover (уже invert в layout.css)
   ============================================================ */

.marquee__item {
  /* существующий :hover уже инвертирует bg/color */
  transition: background-color 0.25s var(--ease),
              color 0.25s var(--ease),
              transform 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.marquee__item:hover {
  transform: scale(1.08);
  border-color: var(--accent);
  z-index: 2;
}
.marquee__item-icon {
  transition: transform 0.4s var(--ease);
}
.marquee__item:hover .marquee__item-icon {
  transform: rotate(-12deg) scale(1.15);
}

/* ============================================================
   HEADER
   ============================================================ */

.header__logo {
  transition: background-color 0.25s var(--ease),
              color 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.header__logo:hover { transform: translate(-1px, -1px); }

.header__nav-link {
  transition: color 0.2s var(--ease);
}
.header__nav-link:hover { color: var(--accent); }

/* Theme-toggle hover invert */
.theme-toggle {
  transition: background-color 0.2s var(--ease),
              color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.theme-toggle:hover {
  background: var(--accent);
  color: var(--accent-ink);
  transform: rotate(15deg);
}

/* Hamburger hover */
.header__hamburger {
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.header__hamburger:hover { color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */

.footer__socials a {
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}
.footer__socials a:hover {
  transform: translateY(-3px) rotate(-5deg);
  color: var(--accent);
}

.footer__col a {
  transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}
.footer__col a:hover {
  color: var(--accent);
  padding-left: 6px;
}

/* Footer h4 — accent dot перед заголовком на section divider */
.footer__col h4 {
  position: relative;
  transition: padding-left 0.3s var(--ease);
}

/* ============================================================
   FORM
   ============================================================ */

/* Field input — расширенный glow на focus поверх accent-glow */
.field__input:focus,
.field__textarea:focus {
  border-color: var(--accent);
}

.field__input:not(:placeholder-shown),
.field__textarea:not(:placeholder-shown) {
  /* Подсветка заполненного поля */
  border-color: var(--text);
}

.field__label {
  transition: color 0.2s var(--ease);
}
.field--focused .field__label {
  color: var(--accent);
}

/* Submit button — extra emphasize */
#form-submit {
  transition: transform 0.18s var(--ease),
              box-shadow 0.3s var(--ease),
              background-color 0.18s var(--ease);
}
#form-submit:hover {
  box-shadow: 0 12px 30px -12px var(--accent-glow);
}

/* ============================================================
   PALETTE
   ============================================================ */

/* Активная точка-индикатор на toggle — pulse */
@keyframes accent-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 4px transparent; }
}
.palette__toggle::after {
  animation: accent-dot-pulse 2.4s ease-in-out infinite;
}

/* Swatch — hover preview эффект (микро-rotation) */
.palette__swatch {
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.palette__swatch:hover {
  transform: scale(1.18) rotate(-3deg);
}

/* Активный swatch — мягкий pulse */
@keyframes swatch-active {
  0%, 100% { box-shadow:
    inset 0 0 0 3px var(--surface),
    inset 0 0 0 5px var(--text); }
  50%      { box-shadow:
    inset 0 0 0 3px var(--surface),
    inset 0 0 0 5px var(--text),
    0 0 0 3px var(--accent-glow); }
}
.palette__swatch.is-active {
  animation: swatch-active 2.4s ease-in-out infinite;
}

/* ============================================================
   ETC
   ============================================================ */

/* link-arrow svg movement (уже есть gap, добавим explicit svg) */
.link-arrow svg {
  transition: transform 0.3s var(--ease);
}
.link-arrow:hover svg {
  transform: translateX(4px);
}

/* eyebrow моно-метка — на hover родителя секции немного fade */
.section h2 {
  transition: letter-spacing 0.4s var(--ease);
}

/* Section divider — chip slight hover (для UX-feel) */
.section-divider__mark {
  transition: transform 0.25s var(--ease);
}
.section-divider:hover .section-divider__mark {
  transform: translateX(2px);
}

/* ============================================================
   REDUCED MOTION — отключаем idle, оставляем hover
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero__title-mark,
  .hero__decor--cube,
  .hero__decor--circle,
  .hero__barcode,
  .hero__product--center,
  .hero__product--left,
  .hero__product--right,
  .hero__meta-top > span:first-child,
  .carousel__slide.is-active .carousel__slide-media svg,
  .carousel__slide.is-active .carousel__slide-product-img,
  .carousel__dot.is-active,
  .palette__toggle::after,
  .palette__swatch.is-active {
    animation: none !important;
  }
}