

/* ---------- Scroll-reveal + micro-interactions ---------- */
[data-reveal]{opacity:0;transform:translateY(var(--motion-distance-md));transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}

[data-reveal].in{opacity:1;transform:none}

.grid4>[data-reveal]:nth-child(2){transition-delay:.07s}
.grid4>[data-reveal]:nth-child(3){transition-delay:.14s}
.grid4>[data-reveal]:nth-child(4){transition-delay:.21s}

.grid3>[data-reveal]:nth-child(2){transition-delay:.1s}
.grid3>[data-reveal]:nth-child(3){transition-delay:.2s}

.trust .row>[data-reveal]:nth-child(2){transition-delay:.08s}
.trust .row>[data-reveal]:nth-child(3){transition-delay:.16s}
.trust .row>[data-reveal]:nth-child(4){transition-delay:.24s}

.cat6>[data-reveal]:nth-child(2){transition-delay:.07s}
.cat6>[data-reveal]:nth-child(3){transition-delay:.14s}
.cat6>[data-reveal]:nth-child(4){transition-delay:.21s}
.cat6>[data-reveal]:nth-child(5){transition-delay:.28s}

.btn .i{transition:transform var(--dur-fast) var(--ease-out)}

.btn:hover{transform:translateY(-1px)}
 .btn:active{transform:translateY(1px)}

.btn.primary:hover,.btn.secondary:hover{box-shadow:var(--shadow-md)}

/* Ovdje je stajalo `.btn:hover .i:last-child{transform:translateX(3px)}` — pomak zamišljen za
     strelicu IZA natpisa („Pogledaj ponudu →"). Takvog gumba u projektu nema nijednog
     (prebrojano): svaka ikona u gumbu natpis VODI. Pravilo zato nikad nije radilo ono zbog
     čega je napisano, a uvijek je gurkalo ikonu koja vodi — na kartici proizvoda se vidjelo
     kao klizanje košarice unutar gumba, i klijent je to prijavio.
     Ako gumb sa strelicom na kraju ikad zatreba, vrati pravilo uz `:not(:first-child)`. */

.pg-nav::after{content:"";position:absolute;left:0;bottom:1px;height:2px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}

.pg-nav{position:relative}
 .pg-nav:hover::after{transform:scaleX(1)}

.ctile .arw{transition:transform var(--dur-base) var(--ease-out)}
 .ctile:hover .arw{transform:translateX(3px)}

.trust .it .i{transition:transform var(--dur-base) var(--ease-settle)}
 .trust .it:hover .i{transform:translateY(-3px)}

.chip{transition:var(--transition-control),transform var(--dur-fast)}
 .chip:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){

  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}

  [data-reveal]{opacity:1;transform:none}

  .hero-track{transition:none}

  .trust .row{transition:none}
}
@media (hover:none){

  .btn:hover,.pcard:hover,.ctile:hover,.enccard:hover,.artcard:hover,.chip:hover,.kg-card:hover,.bc-card:hover{transform:none}

  .pcard:hover .ph img,.kg-card:hover .kg-photo img,.bc-card:hover .bc-photo img{transform:none}
}
