/* ==========================================================================
   Хрумстик — анімації та мікровзаємодії
   Підключати ПІСЛЯ assets/css/styles.css:
     <link rel="stylesheet" href="assets/css/animations.css">
   Файл нічого не перевизначає силоміць — лише додає рух.

   Джерело: handoff/assets/css/animations.css
   Дві відмінності від джерела, обидві навмисні:

   1. Полям вводу повернуто текстовий курсор. Без каретки не видно,
      куди потрапить символ, а від заповнення форми залежить весь тест.
   2. Стиснення курсора при натисканні перенесено на вкладену іконку
      (.hr-paw__icon). У джерелі scale стояв на тому ж елементі, що й
      transform із позицією, — і курсор при кліку відлітав до лівого
      верхнього кута. Це виправлення помилки, а не смак: якщо дизайн
      передадуть заново, його треба буде застосувати ще раз.
   ========================================================================== */

/* ------------------------------------------------------------- keyframes */

@keyframes hr-rise      { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hr-rise-soft { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hr-pop       { from { opacity: 0; transform: scale(.9); }        to { opacity: 1; transform: none; } }
@keyframes hr-float     { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(-1.2deg); } }
@keyframes hr-hop       { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes hr-wag       { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
@keyframes hr-row-in    { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

@keyframes hr-paw-trail { 0% { opacity: .55; transform: var(--tf) scale(.62); } 100% { opacity: 0; transform: var(--tf) scale(1); } }
@keyframes hr-fly-cart  { 0% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
                          70% { opacity: 1; }
                          100% { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(28deg); opacity: 0; } }

/* Собака, що радіє */
@keyframes hr-joy-enter  { 0% { transform: translateY(150px); } 18% { transform: translateY(-18px); } 30% { transform: translateY(0); }
                           44% { transform: translateY(-34px); } 58% { transform: translateY(0); }
                           70% { transform: translateY(-16px); } 80% { transform: translateY(0); } 100% { transform: translateY(150px); } }
@keyframes hr-joy-squash { 0%, 100% { transform: scale(1, 1) rotate(0); } 26% { transform: scale(1.07, .91) rotate(-3deg); }
                           34% { transform: scale(.96, 1.05) rotate(2deg); } 56% { transform: scale(1.07, .91) rotate(3deg); }
                           64% { transform: scale(.97, 1.04) rotate(-2deg); } }
@keyframes hr-joy-wag    { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(24deg); } }
@keyframes hr-ear-l      { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(9deg); } }
@keyframes hr-ear-r      { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-9deg); } }
@keyframes hr-bubble     { 0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.7); }
                           16% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
                           76% { opacity: 1; }
                           100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.9); } }

/* ------------------------------------------------------ вхід першого екрана */

.hero__text > * { animation: hr-rise 620ms cubic-bezier(.2, .8, .2, 1) both; }
.hero__text .pill        { animation: hr-pop 460ms cubic-bezier(.2, .8, .2, 1) both; }
.hero__text h1           { animation-delay: 80ms; }
.hero__text .lead        { animation-delay: 170ms; }
.hero__actions           { animation-delay: 250ms; }
.hero__meta              { animation-delay: 320ms; }
.hero__media             { animation: hr-pop 700ms cubic-bezier(.2, .8, .2, 1) 220ms both; }
.hero__media img         { animation: hr-float 9s ease-in-out infinite; }

/* --------------------------------------------- прояв блоків при прокручуванні
   Чистий CSS, без JS. Діапазон завершується, щойно блок повністю у в'юпорті,
   інакше нижні блоки сторінки застигають напівпрозорими. */

@supports (animation-timeline: view()) {
  .section__title,
  .section__sub,
  .notice__inner,
  .cat-tile,
  .grid > .card,
  .set,
  .features > .feature,
  .steps > .step,
  .faq,
  .cta-band > .container {
    animation: hr-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  .section__title,
  .section__sub,
  .notice__inner,
  .faq { animation-name: hr-rise-soft; }
}

/* ------------------------------------------------------------ мікровзаємодії */

.header { transition: padding 240ms cubic-bezier(.2, .8, .2, 1), box-shadow 240ms ease; }
.header.is-stuck { box-shadow: 0 6px 20px rgba(36, 26, 18, .07); }
.header.is-stuck .header__inner { padding-top: 8px; padding-bottom: 8px; }
.header__inner { transition: padding 240ms cubic-bezier(.2, .8, .2, 1); }

.logo__mark { display: inline-block; transform-origin: 50% 80%; animation: hr-wag 2.4s ease-in-out infinite; }

.nav a { border-bottom: 2px solid transparent; transition: color 160ms ease, border-color 160ms ease; }
.nav a:hover { border-bottom-color: var(--c-accent); }

.btn { transition: transform 180ms cubic-bezier(.34, 1.4, .64, 1), background 180ms ease, box-shadow 180ms ease; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px) scale(.99); }

.cart-btn { transition: transform 180ms cubic-bezier(.34, 1.4, .64, 1), border-color 180ms ease; }
.cart-btn:hover { transform: translateY(-2px); }
.cart-btn__count { transition: transform 200ms cubic-bezier(.34, 1.6, .64, 1); }
.cart-btn__count.is-bumped { transform: scale(1.55); }

.card { transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease; }
.card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(36, 26, 18, .14); }
.card__media { overflow: hidden; }
.card__media img { transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
.card:hover .card__media img { transform: scale(1.07); }

.cat-tile { transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease, border-color 220ms ease; }
.cat-tile:hover { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(36, 26, 18, .12); border-color: var(--c-accent); }
.cat-tile__n { transition: transform 180ms ease; display: inline-block; }
.cat-tile:hover .cat-tile__n { transform: translateX(4px); }

.feature, .step { transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease; }
.feature:hover, .step:hover { transform: translateY(-6px); }

.link-btn { display: inline-block; transition: transform 180ms ease; }
.link-btn:hover { transform: translateX(4px); }

.set__media img { animation: hr-float 10s ease-in-out infinite; }

.faq { transition: border-color 200ms ease; }
.faq:hover { border-color: var(--c-accent); }
.faq summary { transition: color 160ms ease; }
.faq[open] > *:not(summary) { animation: hr-rise-soft 280ms cubic-bezier(.2, .8, .2, 1) both; }

/* Кошик */
.cart__table tbody tr { animation: hr-row-in 320ms cubic-bezier(.2, .8, .2, 1) both; }
.qty__btn { transition: background 150ms ease, transform 150ms ease; }
.qty__btn:hover { transform: scale(1.08); }
.icon-btn { transition: color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.icon-btn:hover { transform: rotate(90deg); }

/* Тост — у правий нижній кут, щоб не перекривати собаку */
.toast { transition: transform 260ms cubic-bezier(.34, 1.5, .64, 1), opacity 200ms ease; }
.toast.is-visible { animation: hr-pop 260ms cubic-bezier(.34, 1.5, .64, 1) both; }

/* ------------------------------------------------ курсор-лапка та її слід */

@media (hover: hover) and (pointer: fine) {
  html.hr-paw-cursor,
  html.hr-paw-cursor body,
  html.hr-paw-cursor a,
  html.hr-paw-cursor button,
  html.hr-paw-cursor label,
  html.hr-paw-cursor select,
  html.hr-paw-cursor summary { cursor: none; }

  /* Полям вводу курсор повертаємо: без каретки не видно, куди
     потрапить символ, а від заповнення цієї форми залежить увесь тест.
     Лапка над полем усе одно лишається — вона малюється окремим шаром. */
  html.hr-paw-cursor input:not([type="checkbox"]):not([type="radio"]),
  html.hr-paw-cursor textarea { cursor: text; }
  html.hr-paw-cursor input[type="checkbox"],
  html.hr-paw-cursor input[type="radio"] { cursor: none; }
}

.hr-paw-layer { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.hr-paw { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; color: var(--c-accent); }
.hr-paw--trail { animation: hr-paw-trail 900ms ease-out forwards; }
.hr-paw--cursor { width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--c-accent-dk); }

/* Сжатие при нажатии живёт на вкладеной иконке, а не на самому курсорі.
   На одному елементі scale домножив би translate із transform — і курсор
   при кліку відлітав би до лівого верхнього кута. */
.hr-paw__icon { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; transition: scale 160ms ease; }
.hr-paw svg { display: block; width: 100%; height: 100%; }

.hr-fly { position: fixed; z-index: 96; pointer-events: none; color: var(--c-accent); width: 34px; height: 34px;
          animation: hr-fly-cart 660ms cubic-bezier(.35, .02, .6, 1) forwards; }
.hr-fly svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------- собака-радість */

.hr-joy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 94; display: flex; justify-content: center; pointer-events: none; }
.hr-joy__stage { position: relative; width: 260px; height: 200px; animation: hr-joy-enter 1900ms cubic-bezier(.3, .7, .4, 1) forwards; }
.hr-joy__bubble { position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
                  background: var(--c-ink); color: var(--c-bg); font-weight: 800; font-size: 15px;
                  padding: 9px 15px; border-radius: 14px; white-space: nowrap;
                  animation: hr-bubble 1900ms ease-out forwards; }

.hr-dog { position: absolute; left: 0; right: 0; bottom: 0; height: 172px; transform-origin: 50% 100%; }
.hr-joy .hr-dog { animation: hr-joy-squash 1900ms cubic-bezier(.3, .7, .4, 1) forwards; }
.hr-dog i { position: absolute; display: block; }

.hr-dog .d-shadow { left: 56px; bottom: 0; width: 148px; height: 13px; border-radius: 50%; background: rgba(36, 26, 18, .13); filter: blur(3px); }
.hr-dog .d-tail   { left: 182px; bottom: 30px; width: 15px; height: 50px; border-radius: 8px; background: #b9793f;
                    transform-origin: 50% 100%; animation: hr-joy-wag 200ms ease-in-out infinite; }
.hr-dog .d-body   { left: 70px; bottom: 6px; width: 120px; height: 80px; border-radius: 44px 44px 32px 32px; background: #d59a63; }
.hr-dog .d-paw-l  { left: 80px; bottom: 4px; width: 32px; height: 22px; border-radius: 12px; background: #efc79a; }
.hr-dog .d-paw-r  { left: 148px; bottom: 4px; width: 32px; height: 22px; border-radius: 12px; background: #efc79a; }
.hr-dog .d-ear-l  { left: 54px; bottom: 80px; width: 36px; height: 70px; border-radius: 18px 18px 20px 20px; background: #b9793f;
                    transform-origin: 50% 6%; animation: hr-ear-l 200ms ease-in-out infinite; }
.hr-dog .d-ear-r  { left: 170px; bottom: 80px; width: 36px; height: 70px; border-radius: 18px 18px 20px 20px; background: #b9793f;
                    transform-origin: 50% 6%; animation: hr-ear-r 200ms ease-in-out infinite; }
.hr-dog .d-head   { left: 72px; bottom: 62px; width: 116px; height: 98px; border-radius: 52px 52px 46px 46px; background: #e3ab74; }
.hr-dog .d-muzzle { left: 102px; bottom: 60px; width: 56px; height: 44px; border-radius: 26px 26px 24px 24px; background: #efc79a; }
.hr-dog .d-nose   { left: 119px; bottom: 88px; width: 22px; height: 15px; border-radius: 11px; background: var(--c-ink); }
.hr-dog .d-tongue { left: 121px; bottom: 52px; width: 18px; height: 16px; border-radius: 0 0 9px 9px; background: #c2607a; }
.hr-dog .d-eye-l  { left: 96px; bottom: 120px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-ink); }
.hr-dog .d-eye-r  { left: 152px; bottom: 120px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-ink); }

/* Той самий пес у порожньому кошику — спокійно дихає і чекає */
.hr-dog--idle { position: relative; width: 260px; height: 172px; margin: 0 auto; inset: auto;
                animation: hr-hop 2s ease-in-out infinite; }
.hr-dog--idle .d-tail  { animation-duration: 420ms; }
.hr-dog--idle .d-ear-l { animation-duration: 900ms; }
.hr-dog--idle .d-ear-r { animation-duration: 900ms; }

/* Пес, що пробігає під першим екраном */
@keyframes hr-trot { 0% { transform: translateX(-14vw) scaleX(1); } 48% { transform: translateX(104vw) scaleX(1); }
                     52% { transform: translateX(104vw) scaleX(-1); } 100% { transform: translateX(-14vw) scaleX(-1); } }
.hr-trot-strip { position: relative; height: 56px; margin-top: 22px; pointer-events: none; overflow: hidden; }
.hr-trot { position: absolute; left: 0; bottom: 0; animation: hr-trot 26s linear infinite; }
.hr-trot__inner { display: flex; align-items: flex-end; gap: 6px; opacity: .5; animation: hr-hop 620ms ease-in-out infinite; }
.hr-trot__paw { display: inline-flex; width: 20px; height: 20px; color: var(--c-accent);
                transform-origin: 50% 90%; animation: hr-wag 320ms ease-in-out infinite; }
.hr-trot__label { font-size: 12px; font-weight: 700; color: #a8968a; letter-spacing: .04em; }

/* ----------------------------------------------------- повага до налаштувань */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .hr-paw-layer, .hr-joy, .hr-trot-strip { display: none !important; }
  html.hr-paw-cursor, html.hr-paw-cursor * { cursor: auto !important; }
}