/* cookbro: zápisník jedál. Súrodenec appky Zápisník: papier, atrament, písané písmo, žiadne karty a tiene.
   Farba je len v guličke náročnosti. */

/* Pangolin (SIL OFL) je priamo v appke: funguje offline a nič sa neťahá z cudzích serverov. */
@font-face { font-family: 'Pangolin'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/pangolin-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Pangolin'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/pangolin-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #EFECE2;
  --paper-deep: #E4DFD2; /* zástupca fotky, pilulka */
  --ink: #141414;
  --muted: #6A665D;
  --l1: #4F9D55; /* do 30 min */
  --l2: #E8A23A; /* do hodiny */
  --l3: #E5372B; /* dlhšie */
  --gut: 20px;
  --dock: 76px; /* výška spodnej navigácie bez bezpečného okraja */
}
@media (min-width: 400px) { :root { --gut: 24px; } }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: 'Pangolin', 'Patrick Hand', 'Comic Sans MS', cursive;
  font-size: 18px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; } /* nič v appke nie je podčiarknuté */

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

h1, h2, h3, p, ul, ol { margin: 0; padding: 0; font-weight: 400; }
ul, ol { list-style: none; }
img { display: block; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
#app:focus { outline: none; }

.page {
  position: relative;
  max-width: 460px;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top) + 22px)
    max(var(--gut), env(safe-area-inset-right))
    calc(var(--dock) + env(safe-area-inset-bottom) + 36px)
    max(var(--gut), env(safe-area-inset-left));
}

.muted { color: var(--muted); }
.empty { margin-top: 10px; color: var(--muted); }
.none { margin: 18px 0; color: var(--muted); }

/* ---------- spoločné prvky ---------- */

.dot {
  flex: none;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
}
.dot.l1 { background: var(--l1); }
.dot.l2 { background: var(--l2); }
.dot.l3 { background: var(--l3); }

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  font-size: 18px;
}
.link.quiet { color: var(--muted); font-size: 17px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 20px;
}

/* fotka, náhľad: papierový podklad, aby bol zástupca tichý a obrázok sa neukázal rozbitý */
.thumb, .photo { position: relative; overflow: hidden; background: var(--paper-deep); }
.thumb img, .photo img { width: 100%; height: 100%; object-fit: cover; }
.thumb img { opacity: 0; transition: opacity 200ms var(--ease-out); }
.thumb img.ok { opacity: 1; }
.ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--paper-deep);
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
}
.photo .ph { font-size: 100px; }
.thumb { flex: none; width: 56px; height: 56px; border-radius: 14px; }

/* ---------- Jedlá ---------- */

.brand {
  margin: 0 0 2px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--muted);
  transform: rotate(-2deg);
  transform-origin: left center;
  width: max-content;
}

/* hľadanie: len čiara pod veľkým textom */
.search {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 6px;
  border-bottom: 1.5px solid var(--ink);
}
.search input {
  flex: 1;
  min-width: 0;
  height: 60px;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: clamp(30px, 9.4vw, 38px);
  line-height: 60px;
  color: var(--ink);
  caret-color: var(--ink);
}
.search input::placeholder { color: var(--muted); opacity: 0.8; }
.search input::-webkit-search-cancel-button { display: none; }
.search .clear { flex: none; margin-right: -10px; color: var(--muted); }
.search .clear[hidden] { display: none; }

/* návrhy surovín a vybrané suroviny: pilulkové značky */
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.pills:empty { display: none; }
.sugs { margin-top: 10px; }
.picked { margin-top: 6px; }
.pills li { display: flex; align-items: center; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1.2;
}
.pill.ghost { border: 1.5px solid var(--ink); padding: 0 14px; }
.pill.solid { background: var(--ink); color: var(--paper); }
.pill.solid svg { flex: none; margin-right: -4px; }

.moods { margin: 12px 0 0 -4px; max-width: calc(100% + 4px + max(var(--gut), env(safe-area-inset-right))); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.moods::-webkit-scrollbar { display: none; }
@media (hover: hover) { .moods { overflow: visible; } } /* tooltip nad myšou sa nesmie orezať */
.moods .mnav-link { font-size: 17px; padding: 0 10px; white-space: nowrap; }

.list { margin-top: 10px; }

/* priečinok: názov, počet, šípka; výška cez grid-template-rows */
.fold-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  text-align: left;
  transform-origin: left center;
}
.fold-title { flex: 1; min-width: 0; font-size: 23px; line-height: 1.25; }
.fold-n { flex: none; color: var(--muted); font-size: 17px; }
.chev { flex: none; display: flex; color: var(--muted); }
.fold-body { display: grid; grid-template-rows: 0fr; }
.fold.open .fold-body { grid-template-rows: 1fr; }
.fold-clip { overflow: hidden; min-height: 0; visibility: hidden; }
.fold.open .fold-clip { visibility: visible; }

.rows { padding-bottom: 8px; }
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 6px 0;
}
.rt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.row .name { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.row .sub { font-size: 16px; color: var(--muted); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 26px;
  font-size: 15px;
  color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 7px; }
.legend .dot { width: 10px; height: 10px; }

/* ---------- Detail ---------- */

.bar { display: flex; align-items: center; height: 44px; margin: -10px 0 4px -10px; }
.photo { width: 100%; aspect-ratio: 1; border-radius: 22px; }
.title { margin-top: 18px; font-size: clamp(28px, 8.6vw, 34px); font-weight: 400; line-height: 1.2; text-wrap: balance; }
.meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; color: var(--muted); }
.tip { margin-top: 10px; color: var(--muted); font-size: 17px; line-height: 1.35; }

.label { margin: 28px 0 4px; font-size: 24px; font-weight: 400; line-height: 1.2; }
.part + .part { margin-top: 14px; }
.part-t { margin: 10px 0 0; font-size: 17px; font-weight: 400; color: var(--muted); }
.ing { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; }
.ing .n { min-width: 0; font-size: 20px; line-height: 1.25; }
.ing .q { flex: none; max-width: 48%; text-align: right; color: var(--muted); font-size: 17px; }
.ing.b .n { color: var(--muted); }
.ing.b .q { opacity: 0.85; }

.steps .step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 9px 0;
  text-align: left;
  font-size: 19px;
  line-height: 1.4;
}
.num { flex: none; min-width: 28px; }
.num-t { position: relative; display: inline-block; }
.num-t .strike { position: absolute; left: -3px; top: 54%; width: calc(100% + 6px); height: 6px; margin-top: -3px; }
.st { min-width: 0; }

/* hlavná akcia: tmavá pilulka v riadku nadpisu Suroviny (nič neprekrýva) */
.ings-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 28px 0 4px; }
.ings-head .label { margin: 0; }
.cart-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 18px;
  transform-origin: right center;
}
.cb-in { display: inline-flex; align-items: center; gap: 8px; }
.cart-btn .tick { margin-left: -2px; }

/* ---------- Nákup ---------- */

.h1 { margin-top: 4px; font-size: 34px; font-weight: 400; line-height: 1.2; }
.count-line { margin-top: 2px; color: var(--muted); }
.count-line[hidden] { display: none; }

.minis {
  display: flex;
  gap: 8px;
  margin: 14px calc(-1 * max(var(--gut), env(safe-area-inset-right))) 0 calc(-1 * max(var(--gut), env(safe-area-inset-left)));
  padding: 0 max(var(--gut), env(safe-area-inset-right)) 0 max(var(--gut), env(safe-area-inset-left));
  overflow-x: auto;
  scrollbar-width: none;
}
.minis::-webkit-scrollbar { display: none; }
.mini { flex: none; display: flex; align-items: center; max-width: 82%; min-height: 44px; border-radius: 999px; background: var(--paper-deep); }
.mini-a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px; min-width: 0; }
.mini-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 1.2; padding-right: 2px; }
.thumb.s { width: 36px; height: 36px; border-radius: 12px; background: var(--paper); }
.thumb.s .ph { font-size: 18px; background: var(--paper); }
.mini-x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; color: var(--muted); }

.aisle-h { margin: 22px 0 0; font-size: 16px; font-weight: 400; color: var(--muted); }
.item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 6px 0;
  text-align: left;
  transform-origin: left center;
}
.box { flex: none; display: flex; width: 28px; height: 28px; }
.box svg { overflow: visible; }
.nm { position: relative; flex: 0 1 auto; min-width: 0; margin-right: auto; align-self: center; }
.nm-t { font-size: 20px; line-height: 1.25; transition: color 160ms var(--ease-out); }
.nm .strike { position: absolute; left: -3px; top: 54%; width: calc(100% + 6px); height: 6px; margin-top: -3px; pointer-events: none; }
.qty { flex: none; max-width: 42%; text-align: right; font-size: 17px; line-height: 1.2; color: var(--muted); }

.basics { margin-top: 18px; }
.basics .fold-head { min-height: 52px; }
.basics .fold-title { font-size: 20px; color: var(--muted); }

.done-note { margin-top: 18px; text-align: center; }
.done-note[hidden] { display: none; }
.done-note p { font-size: 22px; }
.squiggle { display: block; margin: 8px auto 0; }

.shop-acts { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.shop-acts [hidden] { display: none; }
.shop-acts .link { padding: 0; }
.shop-acts [data-act="clear"] { margin-left: auto; }

/* ---------- oznam ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock) + env(safe-area-inset-bottom) + 20px);
  z-index: 40;
  max-width: min(360px, calc(100vw - 40px));
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 17px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.14s var(--ease-in), transform 0.14s var(--ease-in);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out); }

/* ---------- spodná navigácia a Morph nav ---------- */
/* Morph nav: jedna pilulka a jeden tooltip na celú navigáciu (pružiny sú v js/morph.js). Farby sú tokeny appky. */

.mnav {
  --mnav-hl: var(--paper-deep);
  --mnav-tip-bg: var(--ink);
  --mnav-tip-fg: var(--paper);
  --mnav-radius: 999px;
  --mnav-gap: 10px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  padding: 4px;
  border-radius: 999px;
}
.mnav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  color: var(--ink);
  opacity: 0.72;
  transition: opacity 0.18s var(--ease-out);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.mnav-link:hover, .mnav-link[aria-current="page"], .mnav-link[aria-pressed="true"] { opacity: 1; }
.mnav-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; border-radius: 999px; }
.mnav-link > * { will-change: transform; }
.mnav-hl {
  position: absolute;
  left: 0;
  top: 4px;
  height: 44px;
  border-radius: 999px;
  background: var(--mnav-hl);
  opacity: 0;
  pointer-events: none;
  will-change: transform, width, opacity;
}
/* prepínač nálad je bez tooltipu (prekrýval by prvý priečinok), tooltip má len spodná navigácia */
.moods .mnav-tip, .moods .mnav-tail { display: none; }
.mnav-tip {
  position: absolute;
  left: 0;
  top: calc(100% + var(--mnav-gap));
  z-index: 20;
  height: 34px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mnav-tip-bg);
  color: var(--mnav-tip-fg);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% -40%;
  will-change: transform, width, opacity;
}
.mnav-lab {
  position: absolute;
  left: 50%;
  top: 0;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  white-space: nowrap;
  font-size: 16px;
  opacity: 0;
  will-change: transform, opacity;
}
.mnav-tail {
  position: absolute;
  left: 0;
  top: calc(100% + var(--mnav-gap) - 3px);
  z-index: 19;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--mnav-tip-bg);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
/* dock je dole, tooltip ide nad neho */
.mnav-above .mnav-tip { top: auto; bottom: calc(100% + var(--mnav-gap)); transform-origin: 50% 140%; }
.mnav-above .mnav-tail { top: auto; bottom: calc(100% + var(--mnav-gap) - 3px); }
/* tooltipy len tam, kde je myš; na dotyku pilulka aj tak označuje aktuálnu položku */
@media (hover: none) { .mnav-tip, .mnav-tail { display: none; } }

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 8px max(var(--gut), env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left));
  background: var(--paper);
  border-top: 1.5px solid var(--paper-deep);
}
.dock .mnav { height: 60px; padding: 4px; }
.dock .mnav-link { min-width: 132px; min-height: 52px; font-size: 20px; }
.dock .mnav-hl { top: 4px; height: 52px; }
.lnk { display: inline-flex; align-items: center; gap: 8px; }
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  line-height: 1;
}
.count[hidden] { display: none; }

/* ---------- hárok inštalácie ---------- */

.sheet-back {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(20, 20, 20, 0.38);
  opacity: 0;
  transition: opacity 200ms var(--ease-in);
}
.sheet-back.open { opacity: 1; transition: opacity 260ms var(--ease-out); }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  max-width: 460px;
  margin: 0 auto;
  padding: 28px max(var(--gut), env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--paper);
  transform: translateY(100%);
  transition: transform 200ms var(--ease-in);
}
.sheet.open { transform: none; transition: transform 300ms var(--ease-out); }
.sheet h2 { font-size: 26px; font-weight: 400; line-height: 1.2; }
.how { margin-top: 14px; font-size: 20px; line-height: 1.4; }
.how li { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.how svg { flex: none; }
.sheet-acts { display: flex; align-items: center; gap: 12px; margin-top: 22px; }

/* ---------- animácie, tokeny ---------- */
/*
  Zásady: hýbe sa len transform a opacity (výnimky: grid-template-rows pri rozbaľovaní, stroke-dashoffset pri kreslení).
  Čo spustí používateľ, trvá do 300 ms. Stlačenie 90 ms, pustenie 280 ms pružinou. Príchody ease-out, odchody ease-in.
*/
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --press: 90ms;
  --release: 280ms;
}
/* skutočná pružina (tlmenie 0,6, prekmit asi 9 %), kde ju prehliadač vie */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.108 5%, 0.34 10%, 0.594 15%, 0.81 20%, 0.963 25%, 1.052 30%, 1.09 35%, 1.093 40%, 1.076 45%, 1.052 50%, 1.011 60%, 0.993 70%, 0.992 80%, 0.996 90%, 1); }
}

/* všetko stlačiteľné má rovnaké časy a rovnakú pružinu */
.link, .icon-btn, .btn, .pill, .row, .fold-head, .item, .step, .cart-btn, .mini-x, .mini-a {
  transition: transform var(--release) var(--spring);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.row .thumb, .row .name, .row .sub, .row .dot, .pill svg, .chev, .fold-title, .icon-btn svg, .num, .box {
  transition: transform var(--release) var(--spring), color 160ms var(--ease-out);
}
.row .name, .row .sub, .fold-title { transform-origin: left center; }
.row .sub, .row .dot { transition-delay: 40ms; } /* gulička a čas dobehnú o chvíľu neskôr než názov */
.chev { transition: transform var(--release) var(--spring); }
.fold.open .chev { transform: rotate(90deg); }

@media (hover: hover) and (pointer: fine) {
  .link:hover, .btn:hover { transform: scale(1.06); }
  .pill:hover { transform: scale(1.05); }
  .icon-btn:hover { transform: scale(1.14); }
  .icon-btn.back:hover svg { transform: translateX(-4px) scale(1.06); }
  .icon-btn.clear:hover { transform: rotate(90deg) scale(1.14); }
  .mini-x:hover { transform: scale(1.14); }
  .cart-btn:hover { transform: scale(1.06); }
  .row:hover .thumb { transform: rotate(-3deg) scale(1.06); }
  .row:hover .name, .row:hover .sub { transform: translateX(4px); }
  .row:hover .dot { transform: scale(1.5); }
  .fold-head:hover .fold-title { transform: translateX(4px); }
  .fold-head:hover .chev { transform: scale(1.3); }
  .fold.open .fold-head:hover .chev { transform: rotate(90deg) scale(1.3); }
  .item:hover .box { transform: scale(1.1); }
  .item:hover .nm-t { transform: translateX(3px); }
  .step:hover .num { transform: scale(1.1); }
  .mini-a:hover { transform: scale(1.03); }
}
.nm-t { display: inline-block; transition: transform var(--release) var(--spring), color 160ms var(--ease-out); }

/* stlačenie: rýchle a krátke (0,95 až 0,98), pustenie sa vráti pružinou */
.link:active, .icon-btn:active, .btn:active, .pill:active, .cart-btn:active, .mini-x:active, .mini-a:active {
  transform: scale(0.95);
  transition-duration: var(--press);
  transition-timing-function: var(--ease-out);
}
.row:active, .fold-head:active, .item:active, .step:active {
  transform: scale(0.98);
  transition-duration: var(--press);
  transition-timing-function: var(--ease-out);
}
.row:active .thumb { transform: scale(0.95); transition-duration: var(--press); transition-timing-function: var(--ease-out); }
.mnav-link:active > * { scale: 0.96; transition: scale var(--press) var(--ease-out); }
.mnav-link > * { transition: scale var(--release) var(--spring); }

/* „Do nákupu“: pred vypustením guličky sa tlačidlo stiahne (anticipácia) */
.cart-btn.squash { transform: scale(0.9, 0.86); transition-duration: var(--press); transition-timing-function: var(--ease-out); }
.cb-in { animation: pop var(--release) var(--spring) backwards; }
.page.enter .cb-in { animation: none; }
.cart-btn .tick path, .item .tick, .step .strike path, .item .strike path, .done-note .squiggle path { stroke-dasharray: 1 1.01; }
.cart-btn .tick path { stroke-dashoffset: 0; animation: draw 260ms var(--ease-out) 60ms backwards; }

/* kreslené čiary: jasný začiatok a koniec cez stroke-dashoffset */
.item .tick, .item .ring { transition: stroke-dashoffset 150ms var(--ease-in); }
.item .tick { stroke-dasharray: 1 1.01; stroke-dashoffset: 1; }
.item[aria-checked="true"] .tick { stroke-dashoffset: 0; transition: stroke-dashoffset 220ms var(--ease-out) 70ms; }
.item .strike path, .step .strike path { stroke-dashoffset: 1; transition: stroke-dashoffset 150ms var(--ease-in); }
.item[aria-checked="true"] .strike path, .step[aria-pressed="true"] .strike path { stroke-dashoffset: 0; transition: stroke-dashoffset 260ms var(--ease-out); }
.item[aria-checked="true"] .nm-t, .item[aria-checked="true"] .qty { color: var(--muted); }
.item[aria-checked="true"] .nm-t { opacity: 0.8; }
.step[aria-pressed="true"] .st, .step[aria-pressed="true"] .num-t { color: var(--muted); }
.step .st { transition: color 200ms var(--ease-out); }
.item .nm-t, .item .qty { transition: color 200ms var(--ease-out), transform var(--release) var(--spring); }

/* krúžok sa pri odčiarknutí na okamih splošti a vyskočí späť */
@keyframes box-hop {
  0% { transform: scale(1); }
  30% { transform: scale(1.14, 0.8); animation-timing-function: var(--ease-out); }
  62% { transform: scale(0.92, 1.12); }
  100% { transform: scale(1); }
}
.box.hop { animation: box-hop 300ms var(--ease-out); }

/* počítadlo v navigácii: nadvihne sa, zakýve, alebo sa zmenší */
@keyframes count-bump {
  0% { transform: translateY(0) scale(1) rotate(0); }
  30% { transform: translateY(-6px) scale(1.3) rotate(0); animation-timing-function: var(--ease-in); }
  58% { transform: translateY(0) scale(0.92) rotate(-9deg); animation-timing-function: var(--ease-out); }
  78% { transform: translateY(0) scale(1.04) rotate(6deg); animation-timing-function: var(--ease-out); }
  100% { transform: none; }
}
@keyframes count-shrink {
  0% { transform: scale(1); }
  40% { transform: scale(0.72); animation-timing-function: var(--ease-out); }
  100% { transform: scale(1); }
}
.count.bump { animation: count-bump 520ms var(--ease-out); }
.count.shrink { animation: count-shrink 260ms var(--ease-out); }
.count.show-in { animation: pop var(--release) var(--spring); }

/* letiaca gulička */
.fly { position: fixed; z-index: 60; width: 16px; height: 16px; pointer-events: none; will-change: transform; }
.fly-ball { width: 100%; height: 100%; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); will-change: transform; }

/* príchod obrazovky: obsah vystúpi, zoznamy po riadkoch, drobnosti dobehnú */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes photo-in { from { opacity: 0; transform: scale(0.94); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.page.enter .blk { animation: rise 240ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
/* detail: najprv fotka, potom text (pri View Transition text počká na fotku o niečo dlhšie) */
.page.enter .photo { animation: photo-in var(--release) var(--spring) backwards; }
.page.enter.is-detail .blk { animation-delay: calc(110ms + var(--i, 0) * 28ms); }
.page.enter.vt-on .blk { animation-delay: calc(170ms + var(--i, 0) * 28ms); }
.page.enter.vt-on .photo { animation: none; }
.page.enter .cart-btn { animation: pop var(--release) var(--spring) 260ms backwards; }
.page.enter .done-note .squiggle path { animation: draw 300ms var(--ease-out) 120ms backwards; }
.rows.stagger > li { animation: rise 240ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.pop-in { animation: pop var(--release) var(--spring) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.mini.leaving { opacity: 0; transform: scale(0.9); transition: opacity 150ms var(--ease-in), transform 150ms var(--ease-in); }

/* „Všetko v košíku“: vlnovka sa dokreslí */
.done-note .squiggle path { stroke-dashoffset: 1; }
.done-note.on .squiggle path { stroke-dashoffset: 0; transition: stroke-dashoffset 300ms var(--ease-out) 100ms; }
.done-note.on p { animation: rise 240ms var(--ease-out) backwards; }

/* rozbaľovanie: obsah sa vysunie, šípka sa pootočí pružinou */
.fold-body { transition: grid-template-rows 240ms var(--ease-out); }
.fold-clip { transition: visibility 0s linear 240ms; }
.fold.open .fold-clip { transition-delay: 0s; }

/* View Transitions: náhľad sa plynulo zväčší do veľkej fotky a naopak */
::view-transition-group(recipe-photo) { animation-duration: 300ms; animation-timing-function: var(--ease-out); }
::view-transition-old(recipe-photo), ::view-transition-new(recipe-photo) { height: 100%; object-fit: cover; overflow: clip; }
html.vt .thumb[style*="view-transition-name"], html.vt .photo[style*="view-transition-name"] { border-radius: 0; }
html.vt-open::view-transition-old(recipe-photo) { border-radius: 14px; }
html.vt-open::view-transition-new(recipe-photo) { border-radius: 22px; }
html.vt-back::view-transition-old(recipe-photo) { border-radius: 22px; }
html.vt-back::view-transition-new(recipe-photo) { border-radius: 14px; }
::view-transition-old(root) { animation: 160ms var(--ease-in) both vt-out; }
::view-transition-new(root) { animation: 220ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}