/* ==========================================================================
   motion.css — UI pokret: tokeni krivulja i trajanja + recepti za
   komponente koje se otvaraju i zatvaraju (izbornik, tooltip, modal,
   ladica, toast, harmonika, stagger grupe).
   Otkrivanje slike clip-pathom je u scroll-motion (data-sm="wipe-*").

   Scroll efekti su u scroll-motion.css, hover efekti u interactions.css
   (press, hold, tilt...). Ovdje je ono što se pojavljuje i nestaje.

   Vrijednosti: Emil Kowalski, emilkowalski/skills (MIT) — vidi
   motion-craft-skill/SKILL.md. Ne mijenjaj brojke napamet; ako treba
   nova krivulja, uzmi je s easing.dev ili easings.co.
   ========================================================================== */

:root {
  /* Krivulje. Ugrađene CSS krivulje su preslabe za namjeran pokret. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* ulaz/izlaz — zadana */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* pomak elementa koji je već na ekranu */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* ladica / sheet, iOS osjećaj */

  /* Trajanja. UI ostaje ispod 300ms; ladica je jedina iznimka. */
  --dur-press: 140ms;     /* 100–160 */
  --dur-tip: 150ms;       /* 125–200 */
  --dur-menu: 200ms;      /* 150–250 */
  --dur-modal: 250ms;     /* 200–300 */
  --dur-drawer: 450ms;    /* 200–500, krivulja je duga na repu pa djeluje brže */
  --dur-release: 200ms;   /* povratak nakon puštanja — uvijek brz */
}

/* --- 1. izbornik / popover / dropdown -------------------------------------
   Raste IZ gumba koji ga je otvorio, ne iz vlastitog središta.
   Postavi --mc-origin na stranu okidača (npr. "top right" za izbornik
   poravnat desno ispod gumba). Nikad scale(0).
   Otvoreno stanje: [data-open] na elementu, ili :popover-open.
   ------------------------------------------------------------------------ */
[data-mc~="pop"] {
  transform-origin: var(--mc-origin, top left);
  transition:
    opacity var(--dur-menu) var(--ease-out),
    transform var(--dur-menu) var(--ease-out),
    visibility 0s linear var(--dur-menu);
  opacity: 0;
  transform: scale(0.95);
  visibility: hidden;
}
[data-mc~="pop"][data-open],
[data-mc~="pop"]:popover-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

/* --- 2. tooltip -----------------------------------------------------------
   Kao popover, brži. Kad je jedan već otvoren, susjedni se otvaraju
   bez kašnjenja i bez animacije: stavi [data-instant] na grupu.
   ------------------------------------------------------------------------ */
[data-mc~="tip"] {
  transform-origin: var(--mc-origin, bottom center);
  transition:
    opacity var(--dur-tip) var(--ease-out),
    transform var(--dur-tip) var(--ease-out);
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}
[data-mc~="tip"][data-open] { opacity: 1; transform: none; }
[data-instant] [data-mc~="tip"] { transition-duration: 0ms; }

/* --- 3. modal (<dialog>) --------------------------------------------------
   Jedini koji ostaje centriran — nije vezan uz okidač.
   Radi s nativnim <dialog> i showModal(); ulaz preko @starting-style.
   ------------------------------------------------------------------------ */
dialog[data-mc~="modal"] {
  transform-origin: center;
  transition:
    opacity var(--dur-modal) var(--ease-out),
    transform var(--dur-modal) var(--ease-out),
    overlay var(--dur-modal) allow-discrete,
    display var(--dur-modal) allow-discrete;
  opacity: 0;
  transform: scale(0.96);
}
dialog[data-mc~="modal"][open] { opacity: 1; transform: none; }
@starting-style {
  dialog[data-mc~="modal"][open] { opacity: 0; transform: scale(0.96); }
}
dialog[data-mc~="modal"]::backdrop {
  background: rgb(0 0 0 / 0);
  transition:
    background-color var(--dur-modal) var(--ease-out),
    overlay var(--dur-modal) allow-discrete,
    display var(--dur-modal) allow-discrete;
}
dialog[data-mc~="modal"][open]::backdrop { background: rgb(0 0 0 / 0.45); }
@starting-style {
  dialog[data-mc~="modal"][open]::backdrop { background: rgb(0 0 0 / 0); }
}

/* --- 4. ladica / sheet ----------------------------------------------------
   translateY(100%) = vlastita visina, bez obzira na sadržaj.
   Izlazi istim putem kojim je ušla. Za povlačenje prstom: gesture.js.
   ------------------------------------------------------------------------ */
[data-mc~="drawer"] {
  transform: translateY(100%);
  transition: transform var(--dur-drawer) var(--ease-drawer);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
}
[data-mc~="drawer"][data-side="right"] { transform: translateX(100%); }
[data-mc~="drawer"][data-side="left"]  { transform: translateX(-100%); }
[data-mc~="drawer"][data-open] { transform: none; }

/* --- 5. toast -------------------------------------------------------------
   Prijelaz, ne keyframes: toastovi dolaze brzo jedan za drugim, a
   keyframes kreće od nule kad ga se prekine. Malo sporiji i s `ease`
   — toast je element s osobnošću, ne kontrola.
   ------------------------------------------------------------------------ */
[data-mc~="toast"] {
  transition:
    opacity 400ms ease,
    transform 400ms ease;
}
@starting-style {
  [data-mc~="toast"] { opacity: 0; transform: translateY(100%); }
}
[data-mc~="toast"][data-leaving] { opacity: 0; transform: translateY(100%); }

/* --- 6. harmonika (<details>) ---------------------------------------------
   Jedno od rijetkih mjesta gdje se smije animirati visina — nema
   transform ekvivalenta. Kratko, jer svaki frame plaća layout.
   interpolate-size radi u Chromiumu; drugdje se otvori bez animacije.
   ------------------------------------------------------------------------ */
:root { interpolate-size: allow-keywords; }
details[data-mc~="accordion"]::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size var(--dur-menu) var(--ease-out),
    opacity var(--dur-menu) var(--ease-out),
    content-visibility var(--dur-menu) allow-discrete;
}
details[data-mc~="accordion"][open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* --- 7. zamagljeni prijelaz ------------------------------------------------
   Kad se dva stanja (npr. tekst gumba "Pošalji" -> "Poslano") vidljivo
   preklapaju, 2px blura ih spoji u jedan pokret. Nikad iznad 20px.
   ------------------------------------------------------------------------ */
[data-mc~="swap"] {
  transition:
    filter var(--dur-menu) ease,
    opacity var(--dur-menu) ease;
}
[data-mc~="swap"][data-swapping] { filter: blur(2px); opacity: 0.7; }

/* --- 8. stagger grupe ------------------------------------------------------
   Za listu koju posjetitelj vidi povremeno, ne za navigaciju.
   30–80ms između stavki, najviše ~8 vidljivih. Nikad ne blokira klik.
   ------------------------------------------------------------------------ */
[data-mc~="stagger"] > * { animation: mc-in 300ms var(--ease-out) both; }
[data-mc~="stagger"] > :nth-child(2) { animation-delay: 50ms; }
[data-mc~="stagger"] > :nth-child(3) { animation-delay: 100ms; }
[data-mc~="stagger"] > :nth-child(4) { animation-delay: 150ms; }
[data-mc~="stagger"] > :nth-child(5) { animation-delay: 200ms; }
[data-mc~="stagger"] > :nth-child(6) { animation-delay: 250ms; }
[data-mc~="stagger"] > :nth-child(7) { animation-delay: 300ms; }
[data-mc~="stagger"] > :nth-child(n+8) { animation-delay: 350ms; }
@keyframes mc-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* --- 9. materijal za plutajuću traku ---------------------------------------
   Samo za sticky header, donju traku ili sheet ispod kojeg skrola sadržaj.
   NIKAD za kartice — "glassmorphism kartice" su zabranjene u CLAUDE.md.
   Umjesto crte ispod headera: blagi rub svjetla gore. Boja ide na čvrsti
   sloj, nikad na prozirni. Ne slaži prozirno na prozirno.
   ------------------------------------------------------------------------ */
[data-mc~="material"] {
  background: color-mix(in oklab, var(--surface, #fff) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
}
@media (prefers-contrast: more) {
  [data-mc~="material"] {
    background: var(--surface, #fff);
    backdrop-filter: none;
    border-bottom: 1px solid var(--border-strong, currentColor);
  }
}

/* --- reduced motion -------------------------------------------------------
   Manje i nježnije, ne nula: prozirnost ostaje jer objašnjava promjenu,
   pomak, skaliranje i odskok nestaju.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-mc~="pop"],
  [data-mc~="tip"],
  dialog[data-mc~="modal"],
  [data-mc~="toast"] {
    transform: none !important;
    transition-property: opacity, visibility, overlay, display;
  }
  [data-mc~="drawer"] { transition: opacity 200ms ease; }
  [data-mc~="drawer"]:not([data-open]) { opacity: 0; visibility: hidden; }
  [data-mc~="stagger"] > * { animation: mc-fade 200ms ease both; animation-delay: 0s; }
}
@keyframes mc-fade { from { opacity: 0; } }

@media (prefers-reduced-transparency: reduce) {
  [data-mc~="material"] { backdrop-filter: none; background: var(--surface, #fff); }
}