/* =========================================================
   Animacije in prehodi – vse nežne in kratke.
   Pri "prefers-reduced-motion: reduce" se ne izvajajo.
   ========================================================= */
:root { --ease-mehko: cubic-bezier(.22, .61, .36, 1); }

@media (prefers-reduced-motion: no-preference) {

  /* --- Pojav ob drsenju (razred doda animacije.js) --- */
  .anim-pripravljeno [data-anim] {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity .9s var(--ease-mehko), transform 1s var(--ease-mehko);
    transition-delay: var(--anim-zamik, 0s);
  }
  .anim-pripravljeno [data-anim="povecaj"] { transform: scale(.94); }
  .anim-pripravljeno [data-anim].je-vidno { opacity: 1; transform: none; }

  /* --- Vstop heroja ob nalaganju --- */
  .uvod__vsebina > *, .pasica__vsebina > * { animation: orel-vstop .9s var(--ease-mehko) both; }
  .uvod__vsebina > :nth-child(2), .pasica__vsebina > :nth-child(3) { animation-delay: .12s; }
  .uvod__vsebina > :nth-child(3), .pasica__vsebina > :nth-child(4) { animation-delay: .24s; }
  .pasica__vsebina > :nth-child(2) { animation-delay: .06s; }
  /* Povečava je pripeta na spodnji rob (transform-origin spodaj): slika se ne razširi pod valovito
     masko in ne pokuka v naslednjo sekcijo. Zgornji presežek je pod glavo, stranski je odrezan. */
  .uvod__slika > img, .pasica__slika > img { transform-origin: 50% 100%; animation: orel-povecava 2.6s ease-out both; }

  @keyframes orel-vstop { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
  @keyframes orel-povecava { from { transform: scale(1.06); } }

  /* --- Izbirnik: nežna menjava fotografij in besedila --- */
  .izdelek__slika img {
    transition: opacity .3s ease, transform .5s var(--ease-mehko);
  }
  .izdelek__slika img.je-menjava { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); }
  .embalaza__kartica img { transition: opacity .28s ease, transform .4s var(--ease-mehko); }
  .embalaza__kartica img.je-menjava { opacity: 0; transform: scale(.94); }
  .je-osvezeno { animation: orel-osvezi .5s var(--ease-mehko) both; }
  @keyframes orel-osvezi { from { opacity: 0; transform: translate3d(0, 6px, 0); } }

  /* --- Mikro interakcije --- */
  .izbira:hover .embalaza__kartica { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(120, 60, 0, .08); }
  .izbira input:checked + .embalaza__kartica { transform: translateY(-2px); }
  /* Izbira vrste: samo mehka sprememba barve, brez premika (premik je rahlo zameglil besedilo) */
  .vrsta__oznaka { transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
  .gumb--poln:hover, .gumb--rumen:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(160, 70, 0, .22); }
  .gumb .ikona { transition: transform .3s var(--ease-mehko); }
  .gumb:hover .ikona { transform: translateX(3px); }
  .prednosti li { transition: transform .3s var(--ease-mehko), box-shadow .3s ease; }
  .prednosti li:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(120, 60, 0, .1); }
  .maska img { transition: transform 1.2s var(--ease-mehko); }
  .maska:hover img { transform: scale(1.04); }
}

/* Stranski presežek povečane fotografije ne sme povzročiti vodoravnega drsenja */
.uvod__slika, .pasica__slika { overflow-x: clip; }