/* ============================================================
   ANIMATIONS — suptilne premium animacije.
   Sve je nežno i elegantno, u skladu sa wedding estetikom.
   Poštuje prefers-reduced-motion (na dnu fajla).
   ============================================================ */

/* ---------- 1) HERO ulazak (fade + blur + slide) ---------- */
@keyframes heroFadeUp{
  0%{opacity:0;transform:translateY(28px);filter:blur(6px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
.hero-copy .h-eyebrow{animation:heroFadeUp 900ms ease both}
.hero-copy .h1{animation:heroFadeUp 900ms ease .12s both}
.hero-copy .lead{animation:heroFadeUp 900ms ease .24s both}
.hero-copy .hero-btns{animation:heroFadeUp 900ms ease .36s both}
.hero-copy .hero-tags{animation:heroFadeUp 900ms ease .48s both}

/* hero slika — nežan zoom-in pri učitavanju */
@keyframes heroImageIn{
  0%{opacity:0;transform:scale(1.08)}
  100%{opacity:1;transform:scale(1)}
}
.hero-media .frame img{animation:heroImageIn 1400ms cubic-bezier(.22,.61,.36,1) both}

/* hero badge — blago uleti sa dole uz odloženo pojavljivanje */
@keyframes badgePop{
  0%{opacity:0;transform:translateY(14px) scale(.94)}
  100%{opacity:1;transform:none}
}
.hero-badge{animation:badgePop 700ms ease 1s both}

/* ---------- 2) Lebdeći/plutajući efekat (hero badge, QR kartica) ---------- */
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.hero-badge{animation:badgePop 700ms ease 1s both, floaty 5s ease-in-out 1.7s infinite}
.qr-card{animation:floaty 6s ease-in-out infinite}
.qr-card:hover{animation-play-state:paused}

/* ---------- 3) Reveal varijante (scale, slide levo/desno) ---------- */
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity 800ms ease,transform 800ms cubic-bezier(.22,.61,.36,1)}
.reveal-scale.is-visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity 800ms ease,transform 800ms cubic-bezier(.22,.61,.36,1)}
.reveal-left.is-visible{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity 800ms ease,transform 800ms cubic-bezier(.22,.61,.36,1)}
.reveal-right.is-visible{opacity:1;transform:none}

/* ---------- 4) Staggered ulazak kartica (JS dodaje --i) ---------- */
.stagger-in{opacity:0;transform:translateY(26px);transition:opacity 650ms ease,transform 650ms cubic-bezier(.22,.61,.36,1)}
.stagger-in.is-visible{opacity:1;transform:none;transition-delay:calc(var(--i, 0) * 90ms)}

/* ---------- 5) Dugmad — sjajni "shine" prelaz na hover ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform 650ms ease;
}
.btn:hover::before{transform:translateX(120%)}
.btn-primary:active,.btn-outline:active{transform:translateY(0) scale(.98)}

/* ---------- 6) Naslovi sekcija — nežno "razmicanje" slova ---------- */
@keyframes eyebrowIn{
  0%{opacity:0;letter-spacing:.5em}
  100%{opacity:1;letter-spacing:.32em}
}
.section-head.is-visible .h-eyebrow{animation:eyebrowIn 900ms ease both}

/* ---------- 7) Kartice proizvoda/kolekcija — sjaj i podizanje ---------- */
.product-card,.collection-card,.related-card,.combo-card{will-change:transform}
.product-card .frame,.collection-card .frame{position:relative}
.product-card .frame::before,.collection-card .frame::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform 750ms ease;opacity:0;
}
.product-card:hover .frame::before,.collection-card:hover .frame::before{transform:translateX(100%);opacity:1}

/* ---------- 8) Nav linkovi — postojeći underline + blagi lift ---------- */
.main-nav a:not(.btn){transition:color 300ms ease,transform 300ms ease}
.main-nav a:not(.btn):hover{transform:translateY(-1px)}

/* ---------- 9) Mobilni meni — staggered ulazak stavki ---------- */
.mobile-menu.is-open a{animation:mobileItemIn 500ms ease both}
.mobile-menu.is-open a:nth-child(1){animation-delay:.05s}
.mobile-menu.is-open a:nth-child(2){animation-delay:.10s}
.mobile-menu.is-open a:nth-child(3){animation-delay:.15s}
.mobile-menu.is-open a:nth-child(4){animation-delay:.20s}
.mobile-menu.is-open a:nth-child(5){animation-delay:.25s}
.mobile-menu.is-open a:nth-child(6){animation-delay:.30s}
.mobile-menu.is-open a:nth-child(7){animation-delay:.35s}
.mobile-menu.is-open a:nth-child(8){animation-delay:.40s}
@keyframes mobileItemIn{
  0%{opacity:0;transform:translateY(16px)}
  100%{opacity:1;transform:none}
}

/* ---------- 10) Back-to-top — pulsirajući prsten ---------- */
.back-top.is-visible{animation:btIn 400ms ease both}
@keyframes btIn{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}

/* ---------- 11) QR kod — nežno svetlucanje ---------- */
@keyframes qrGlow{
  0%,100%{box-shadow:0 40px 70px -45px rgba(62,53,55,.45)}
  50%{box-shadow:0 40px 80px -40px rgba(223,169,184,.55)}
}
.qr-card{animation:floaty 6s ease-in-out infinite, qrGlow 4s ease-in-out infinite}

/* ---------- 12) Dekorativni ❀ — nežna rotacija ---------- */
.divider-dot{transition:color 400ms ease}
@keyframes bloom{
  0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(180deg) scale(1.15)}
  100%{transform:rotate(360deg) scale(1)}
}
.split:hover .divider-dot,.ec-content:hover .divider-dot{color:var(--color-rose-dark)}

/* ---------- 13) Slike u frame-ovima — nežan "ken burns" na hover ---------- */
.split .frame img,.ec-media img{will-change:transform}

/* ---------- 14) Editorial kolekcije — alternirajući slide ---------- */
.editorial-collection.reveal{opacity:0;transform:translateY(40px)}
.editorial-collection.reveal.is-visible{opacity:1;transform:none;transition:opacity 900ms ease,transform 900ms cubic-bezier(.22,.61,.36,1)}

/* ---------- Poštovanje prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero-badge,.qr-card{animation:none !important}
}