/* css/refined/motion.css -- owner R1-RF-MOTION (REFINE-COMMON). Every rule is scoped under body.rf. */
/* Motion with a purpose: 120-250 ms, transform and opacity only, ease-out, nothing loops. Under prefers-reduced-motion
   nothing moves: the page changes cut, the pressed state dims instead of shrinking, the rest simply appears.
   The hooks motion.js sets: .rf-roll (a figure that changed), .rf-added (the add button's "Dodano"), img.rf-wait (a picture
   still loading). The segmented control's pill glides by the page change: motion.js names the current tab on both pages. */

/* Pressed: every tappable thing answers the finger. Reduced motion: it dims instead. */
body.rf :is(a,button,summary,label,[role="button"],input[type="submit"]):active{opacity:.8}

@media (prefers-reduced-motion:no-preference){
  /* Page changes cross-fade; the product's name and picture travel from its row to its page and back (motion.js names them). */
  @view-transition{navigation:auto}
  /* The product page has one head and one "Gdje" control: named here, as motion.js (deferred) may run after the page is revealed. */
  body.rf .layout-product .product-head__title{view-transition-name:rf-name}
  body.rf .layout-product .product-head .snap{view-transition-name:rf-img}
  body.rf .pdp-tabs .tab[aria-current="true"]{view-transition-name:rf-pill}

  body.rf :is(a,button,summary,label,[role="button"],input[type="submit"]):active{opacity:1;transform:scale(.97)}
  body.rf :is(a,button,summary,label,[role="button"],input[type="submit"]){transition:transform 120ms cubic-bezier(.2,.8,.2,1)}

  /* A price, a total or the basket count that changed rolls in once. */
  body.rf .rf-roll{display:inline-block;animation:rf-roll 200ms cubic-bezier(.2,.8,.2,1)}

  /* The add button turning into "Dodano". */
  body.rf .rf-added > *{animation:rf-pop 180ms cubic-bezier(.2,.8,.2,1)}

  /* Sheets and dialogs rise and fade in over a fading scrim; toasts slide up. */
  body.rf dialog[open]{animation:rf-rise 220ms cubic-bezier(.2,.8,.2,1)}
  body.rf dialog[open]::backdrop{animation:rf-fade 220ms cubic-bezier(.2,.8,.2,1)}
  body.rf .notice--toast{animation:rf-rise 200ms cubic-bezier(.2,.8,.2,1)}

  /* A loading placeholder (the skeleton, a picture's tinted box) cross-fades into the content. */
  body.rf .skeleton{animation:rf-fade 200ms cubic-bezier(.2,.8,.2,1)}
  body.rf img{transition:opacity 200ms cubic-bezier(.2,.8,.2,1)}
  body.rf img.rf-wait{opacity:0}
}

@keyframes rf-roll{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@keyframes rf-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes rf-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rf-fade{from{opacity:0}to{opacity:1}}