/* CORNER by Levishko — рух і мікровзаємодії (етап 4б).
   Поведінка — за заміром зразка Release (секції 300 мс, фото 600 мс, перший екран 850–1150 мс);
   правила — ui-ux-pro-max: поява 300–450 мс зі зсувом 12 px, вихід швидший за вхід,
   без JS нічого не ховається (клас .js на <html>), prefers-reduced-motion поважаємо. */

/* ---------------------------------------------------------------- поява при прокрутці */
.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-shift)); }
.js [data-reveal].is-revealed {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* фото проявляються, коли завантажились */
.js img.is-fading { opacity: 0; }
.js img.is-fading.is-loaded { opacity: 1; transition: opacity var(--t-image) var(--ease); }

/* Запобіжник: якщо скрипт появи не запустився (помилка, старий браузер), прихований елемент
   усе одно з'являється через 2.5 с. Лише тоді: shop.js ставить .reveal-on на <html>, коли
   спостерігач запущено. Раніше запобіжник діяв завжди й через 2.5 с показував усе нижче екрана
   без руху — поява при прокрутці працювала лише перші секунди (знайдено 14.10). */
@keyframes reveal-safety { to { opacity: 1; transform: none; } }
.js:not(.reveal-on) [data-reveal]:not(.is-revealed) { animation: reveal-safety 0.01s linear 2.5s forwards; }

/* ---------------------------------------------------------------- перший екран */
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: none; } }
.hero img { animation: hero-settle 2.4s var(--ease-out) both; }
.hero__content { overflow: hidden; padding: 4px; }
.hero__content .btn { animation: rise var(--t-hero) var(--ease-out) 0.2s both; }

/* ---------------------------------------------------------------- посилання */
.u-link, .breadcrumbs a, .footer__list a, .nav__dropdown a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--t-base) var(--ease-out);
}
.footer__list a, .nav__dropdown a { background-size: 0 1px; }
.u-link:hover, .breadcrumbs a:hover { background-size: 0 1px; background-position: 100% 100%; }
.footer__list a:hover, .nav__dropdown a:hover { background-size: 100% 1px; text-decoration: none; }
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--t-base) var(--ease-out);
}
.nav__item > .nav__link::after { right: 14px; }
.nav__link:hover { text-decoration: none; }
.nav__link:hover::after, .nav__item:focus-within > .nav__link::after { transform: scaleX(1); transform-origin: left; }

/* кнопки: заливка змінюється плавно (у зразку 300 мс) */
.btn { transition-duration: var(--t-base); }

/* ---------------------------------------------------------------- панелі */
/* вхід 400 мс з гальмуванням, вихід 250 мс із прискоренням */
.drawer { transition: visibility 0s linear 0.25s; }
.drawer.is-open { transition: visibility 0s; }
.drawer.is-open .drawer__panel { transition: transform 0.4s var(--ease-out); }
.drawer:not(.is-open) .drawer__panel { transition: transform 0.25s var(--ease-in); }
.drawer.is-open .drawer__overlay { transition: opacity 0.4s var(--ease-out); }
.drawer:not(.is-open) .drawer__overlay { transition: opacity 0.25s var(--ease-in); }
/* на телефоні панелі кошика виїжджають знизу, як у зразку */
@media (max-width: 989px) {
  .drawer--right .drawer__panel { top: auto; height: min(88vh, 100%); width: 100%; transform: translateY(100%); border-radius: 12px 12px 0 0; }
}

/* лічильник кошика «підстрибує», коли додали товар */
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.cart-count.is-bumped { animation: bump 0.45s var(--ease-out); }

/* акордеони відкриваються плавно (висоту веде JS) */
.accordion__body, .story__more > .rte { overflow: hidden; }

/* ---------------------------------------------------------------- картка */
.card__visual { position: relative; }
.card__quick {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 2;
  width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-fg); color: var(--c-bg); border-radius: var(--radius-badge);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), background var(--t-fast);
}
.card__quick svg { width: 18px; height: 18px; }
.card__quick:hover { background: #333; }
.card:hover .card__quick, .card__quick:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .card__quick { opacity: 1; transform: none; } }
@media (hover: hover) {
  .card__media img { transition: opacity var(--t-slow) var(--ease), transform 1.2s var(--ease-out); }
  .card:hover .card__media img { transform: scale(1.02); }
}

.quick { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); padding-bottom: var(--space-5); }
.quick__img { aspect-ratio: var(--photo-ratio); width: 120px; object-fit: cover; background: var(--c-photo-bg); }
.quick__name { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-card); text-transform: uppercase; margin-bottom: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js img.is-fading { opacity: 1 !important; transform: none !important; }
  .hero img, .hero__content .btn { animation: none !important; }
}