/* Движение Kaymak: курсор-сфера, наклон карточек, ссылки, чекбоксы и переключатели, появление при скролле.
   Подключение: <link rel="stylesheet" href="components/motion.css"> + import { init } from 'components/motion.js'. */

/* Курсор-сфера (только мышь): сливочный шар с мягким объёмом, на кнопках и ссылках увеличивается */
.k-cursor { position: fixed; left: 0; top: 0; z-index: 9998; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; pointer-events: none; background: var(--k-mat-sphere);
  box-shadow: inset -2px -3px 5px rgb(178 120 60 / .35), var(--k-shadow-contact);
  transition: width .35s var(--k-ease-spring), height .35s var(--k-ease-spring), margin .35s var(--k-ease-spring), opacity .2s; }
.k-cursor.is-big { width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: .55; }

/* Наклон карточек: JS пишет --rx/--ry; без бликов */
[data-k-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--k-ease-spring); will-change: transform; }

/* Ссылки: подчёркивание наливается слева, на конце — маленькая сфера */
.k-link { position: relative; color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .5s var(--k-ease-viscous); padding-bottom: 2px; }
.k-link::after { content: ""; position: absolute; right: -8px; bottom: -2px; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  transform: scale(0); transition: transform .4s var(--k-ease-spring) .25s; }
@media (hover: hover) and (pointer: fine) {
  .k-link:hover { background-size: 100% 2px; }
  .k-link:hover::after { transform: scale(1); }
}
.k-link:focus-visible { background-size: 100% 2px; outline: none; }

/* Чекбокс и переключатель: желейный отскок */
.k-check, .k-switch { appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; vertical-align: middle; position: relative; }
.k-check { width: 24px; height: 24px; border-radius: 8px; background: var(--k-cream); box-shadow: inset 0 0 0 2px var(--k-wine); }
.k-check:checked { background: var(--k-red); box-shadow: inset 0 0 0 2px var(--k-red); animation: k-jelly .6s both; }
.k-check:checked::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid var(--k-cream); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.k-switch { width: 52px; height: 30px; border-radius: var(--k-r-pill); background: rgb(122 10 18 / .18); transition: background .3s; }
.k-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--k-mat-sphere);
  box-shadow: var(--k-shadow-contact); transition: transform .5s var(--k-ease-spring); }
.k-switch:checked { background: var(--k-red); }
.k-switch:checked::after { transform: translateX(22px); animation: k-jelly-knob .6s both; }
.k-check:focus-visible, .k-switch:focus-visible { outline: 2px solid var(--k-red); outline-offset: 3px; }
@keyframes k-jelly { 0% { transform: scale(1); } 30% { transform: scale(1.14, .86); } 50% { transform: scale(.9, 1.12); } 70% { transform: scale(1.05, .96); } 100% { transform: scale(1); } }
@keyframes k-jelly-knob { 0% { transform: translateX(22px) scale(1.25, .8); } 50% { transform: translateX(22px) scale(.9, 1.1); } 100% { transform: translateX(22px) scale(1); } }

/* Появление при скролле */
[data-k-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .9s var(--k-ease-spring); }
[data-k-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .k-cursor { display: none; }
  [data-k-tilt] { transform: none !important; transition: none; }
  .k-link, .k-link::after, .k-switch, .k-switch::after { transition: none; }
  .k-check:checked, .k-switch:checked::after { animation: none; }
  [data-k-reveal] { opacity: 1; transform: none; transition: none; }
}