/* =====================================================================
   Učenje zate — sistem animacij
   Vse animacije se izklopijo pri "prefers-reduced-motion: reduce"
   (glej zadnji blok datoteke).
   ===================================================================== */

:root {
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-dur: 0.75s;
}

/* ---------------------------------------------------------------------
   1. RAZKRIVANJE OB SCROLLU
   Element dobi data-anim="…", JS mu ob vstopu v vidno polje doda .is-in.
   Zamik nastaviš z data-delay="200" (ms) ali s CSS spremenljivko --d.
   --------------------------------------------------------------------- */
[data-anim] {
  opacity: 0;
  transition:
    opacity var(--anim-dur) var(--ease-soft),
    transform var(--anim-dur) var(--ease-soft),
    clip-path 0.9s var(--ease-soft),
    filter var(--anim-dur) var(--ease-soft);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}

[data-anim="fade-up"]     { transform: translate3d(0, 34px, 0); }
[data-anim="fade-down"]   { transform: translate3d(0, -28px, 0); }
[data-anim="fly-left"]    { transform: translate3d(-56px, 0, 0); }
[data-anim="fly-right"]   { transform: translate3d(56px, 0, 0); }
[data-anim="zoom"]        { transform: scale(0.92); }
[data-anim="pop"]         { transform: translate3d(0, 24px, 0) scale(0.94); transition-timing-function: var(--ease-back); }
[data-anim="flip"]        { transform: perspective(1000px) rotateX(-72deg); transform-origin: 50% 0%; transition-timing-function: var(--ease-back); }
[data-anim="blur"]        { transform: translate3d(0, 20px, 0); filter: blur(10px); }
[data-anim="wipe"]        { opacity: 1; clip-path: inset(0 0 102% 0); }
[data-anim="curtain"]     { opacity: 1; clip-path: inset(0 100% 0 0); }

[data-anim].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}
/* filter resetiramo samo tam, kjer smo ga za animacijo uporabili */
[data-anim="blur"].is-in { filter: none; }

/* Zamiki po vrsti (stagger) za skupine elementov */
.features .feature:nth-child(2) { --d: 90ms; }
.features .feature:nth-child(3) { --d: 180ms; }
.features .feature:nth-child(4) { --d: 270ms; }

.partners img:nth-child(2) { --d: 60ms; }
.partners img:nth-child(3) { --d: 120ms; }
.partners img:nth-child(4) { --d: 180ms; }
.partners img:nth-child(5) { --d: 240ms; }
.partners img:nth-child(6) { --d: 300ms; }
.partners img:nth-child(7) { --d: 360ms; }
.partners img:nth-child(8) { --d: 420ms; }

.slider .testimonial:nth-child(2) { --d: 140ms; }
.slider .testimonial:nth-child(3) { --d: 280ms; }

.steps .step:nth-child(2) { --d: 120ms; }
.steps .step:nth-child(3) { --d: 240ms; }
.steps .step:nth-child(4) { --d: 360ms; }

.service__list li,
.experience__list li,
.bullets li {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
}
.is-in .service__list li,
.is-in .experience__list li,
.is-in .bullets li { opacity: 1; transform: none; }
.is-in .service__list li:nth-child(2),
.is-in .experience__list li:nth-child(2),
.is-in .bullets li:nth-child(2) { transition-delay: 80ms; }
.is-in .service__list li:nth-child(3),
.is-in .experience__list li:nth-child(3),
.is-in .bullets li:nth-child(3) { transition-delay: 160ms; }
.is-in .service__list li:nth-child(4),
.is-in .experience__list li:nth-child(4),
.is-in .bullets li:nth-child(4) { transition-delay: 240ms; }
.is-in .experience__list li:nth-child(5) { transition-delay: 320ms; }
.is-in .experience__list li:nth-child(6) { transition-delay: 400ms; }

/* Zvezdice se “narišejo” od leve proti desni */
.testimonial__stars { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s 0.25s var(--ease-soft); }
.is-in .testimonial__stars { clip-path: inset(0 0 0 0); }

/* Vrstice cenika pridrsijo ena za drugo */
.price-table tbody tr {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft), background 0.2s ease;
}
.is-in .price-table tbody tr { opacity: 1; transform: none; }
.is-in .price-table tbody tr:nth-child(2) { transition-delay: 100ms; }
.is-in .price-table tbody tr:nth-child(3) { transition-delay: 200ms; }
.price-table tbody tr:hover { background: var(--light-blue-25); }

/* ---------------------------------------------------------------------
   2. HERO — vstopna animacija ob nalaganju strani
   --------------------------------------------------------------------- */
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.7em, 0) rotate(4deg);
  animation: wordIn 0.8s var(--ease-back) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes wordIn {
  to { opacity: 1; transform: none; }
}

.hero__text,
.hero .btn-row,
.subhero__text {
  opacity: 0;
  animation: riseIn 0.9s var(--ease-soft) forwards;
}
.hero__text { animation-delay: 0.45s; }
.hero .btn-row { animation-delay: 0.6s; }
.subhero__text { animation-delay: 0.35s; }

@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: none; }
}

.hero__photo {
  opacity: 0;
  animation: photoIn 1.1s 0.35s var(--ease-soft) forwards;
}
@keyframes photoIn {
  from { opacity: 0; transform: translate3d(0, 60px, 0) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* Rumena oblika rahlo plava in se vrti */
.hero__blob { animation: blobFloat 12s ease-in-out infinite; transform-origin: 60% 80%; }
@keyframes blobFloat {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-14px); }
}

/* Mrežasti vzorec se počasi razkrije */
.hero__pattern,
.subhero__pattern { animation: patternIn 1.6s var(--ease-soft) both; }
@keyframes patternIn {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 0.5; transform: none; }
}

/* Dekorativna oblika na podstraneh zaplava */
.subhero__shape { animation: shapeIn 1s 0.2s var(--ease-back) both, blobFloat 14s 1.2s ease-in-out infinite; }
@keyframes shapeIn {
  from { opacity: 0; transform: translate3d(40px, 0, 0) scale(0.9); }
  to { opacity: 0.9; transform: none; }
}

/* Rahel parallax ob premiku miške (vrednosti nastavlja JS) */
.hero__photo,
.hero__blob,
.hero__pattern {
  translate: var(--px, 0) var(--py, 0);
  transition: translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------
   3. GUMBI — svetlobni odsev in premik ikone
   --------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--ease-soft);
  z-index: -1;
}
.btn:hover::after { transform: translateX(130%); }
.btn__icon { transition: transform 0.3s var(--ease-back); }
.btn:hover .btn__icon { transform: translateY(3px) scale(1.1); }

/* “Magnetni” gumb — sledi kazalcu (JS nastavi --mx / --my) */
.btn--magnetic { transition: transform 0.25s var(--ease-soft), box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; }
.btn--magnetic:hover { transform: translate(var(--mx, 0), calc(var(--my, 0px) - 2px)); }

/* ---------------------------------------------------------------------
   4. NAVIGACIJA
   --------------------------------------------------------------------- */
.header { transition: box-shadow 0.25s ease, background 0.25s ease, transform 0.35s var(--ease-soft); }
.header.is-hidden { transform: translateY(-100%); }

/* Vrstica napredka branja pod glavo */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--light-blue) 55%, var(--yellow));
  pointer-events: none;
}

.mobile-menu__link {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
}
.mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 60ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 120ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 180ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 240ms; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: 300ms; }
.mobile-menu__contact { opacity: 0; transition: opacity 0.5s 0.32s ease; }
.mobile-menu.is-open .mobile-menu__contact { opacity: 1; }

.mobile-menu__top { opacity: 0; transition: opacity 0.3s 0.05s ease; }
.mobile-menu.is-open .mobile-menu__top { opacity: 1; }

/* ---------------------------------------------------------------------
   5. PARTNERJI — barva in dvig ob hoverju + neskončni trak na mobilnem
   --------------------------------------------------------------------- */
.partners img {
  transition: filter 0.35s ease, transform 0.35s var(--ease-back), opacity 0.35s ease;
}
.partners img:hover {
  filter: grayscale(0) contrast(1);
  transform: translateY(-6px) scale(1.12);
}

/* Neskončni trak logotipov — na vseh velikostih zaslona.
   Safari: animiran otrok znotraj zaobljenega "overflow: hidden" vsebnika zna
   pobarvati izrezano območje sivo. Zato ima trak izrecno belo podlago, svojo
   risalno plast (translateZ) in maskirano zaobljenost (-webkit-mask). */
.partners--marquee {
  overflow: hidden;
  flex-wrap: nowrap;
  justify-content: flex-start;
  background: var(--white);
  isolation: isolate;
  /* Safari: brez tega zaobljeni robovi ob animiranem otroku "puščajo".
     Trda meja (100 % → 100 %) pomeni masko brez prehoda, torej brez bledenja. */
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.partners--marquee .marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(30px, 4vw, 64px);
  flex: none;
  background: var(--white);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation: marquee 30s linear infinite;
}
.partners--marquee:hover .marquee__track { animation-play-state: paused; }

/* širši zaslon = daljša pot, zato počasneje */
@media (min-width: 861px) {
  .partners--marquee .marquee__track { animation-duration: 45s; }
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------------------------------------------------------------------
   6. KARTICE STORITEV — slika se približa, ikona se zavrti
   --------------------------------------------------------------------- */
.service {
  transition: transform 0.4s var(--ease-soft), box-shadow 0.4s ease;
}
.service:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.service__media img { transition: transform 0.8s var(--ease-soft); }
.service:hover .service__media img { transform: scale(1.07); }

.service__icon { transition: transform 0.6s var(--ease-back); }
.service:hover .service__icon { transform: rotate(180deg) scale(1.22); }

.service__title { transition: color 0.3s ease, letter-spacing 0.4s var(--ease-soft); }
.service:hover .service__title { letter-spacing: 0.01em; }

/* ---------------------------------------------------------------------
   7. KARTICE PREDNOSTI — 3D nagib + ikona se “sestavi”
   --------------------------------------------------------------------- */
.feature {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s ease;
}
.feature:hover { --ty: -6px; box-shadow: 0 18px 40px rgba(36, 79, 194, 0.14); }

.feature__ic {
  transition: transform 0.7s var(--ease-back), background 0.35s ease;
  transform-style: preserve-3d;
}
.feature:hover .feature__ic {
  transform: rotateY(360deg) scale(1.08);
  background: rgba(147, 177, 239, 0.45);
}
.feature__ic img { transition: transform 0.45s var(--ease-back); }
.feature:hover .feature__ic img { transform: scale(1.15); }
.feature h3 { transition: color 0.3s ease; }
.feature:hover h3 { color: var(--blue); }

/* ---------------------------------------------------------------------
   8. O MENI — okvir se nagne, značka poskoči in plava
   --------------------------------------------------------------------- */
.about__frame,
.split__media { transition: transform 0.6s var(--ease-soft); }
.about__media:hover .about__frame,
.split:hover .split__media { transform: rotate(-2deg) scale(1.01); }
.about__photo { transition: transform 0.7s var(--ease-soft); }
.about__media:hover .about__photo { transform: scale(1.04); }

.badge { animation: badgeFloat 6s ease-in-out infinite; }
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.badge__avatars img { transition: transform 0.35s var(--ease-back); }
.badge:hover .badge__avatars img:nth-child(1) { transform: translateX(-6px) scale(1.1); }
.badge:hover .badge__avatars img:nth-child(3) { transform: translateX(6px) scale(1.1); }

/* ---------------------------------------------------------------------
   9. MNENJA
   --------------------------------------------------------------------- */
.testimonial {
  transition: transform 0.4s var(--ease-soft), box-shadow 0.4s ease;
}
.testimonial:hover { transform: translateY(-8px) rotate(-0.7deg); }
.testimonial__person img { transition: transform 0.5s var(--ease-back); }
.testimonial:hover .testimonial__person img { transform: rotate(-12deg) scale(1.12); }

.filter img { transition: transform 0.45s var(--ease-back); }
.filter:hover img { transform: rotate(90deg) scale(1.2); }
.filter[aria-pressed="true"] img { transform: rotate(180deg); }

.slider-nav button img { transition: transform 0.35s var(--ease-back); }
.slider-nav button:hover img { transform: translateX(4px); }
.slider-nav button:first-child:hover img { transform: scaleX(-1) translateX(4px); }

/* ---------------------------------------------------------------------
   10. CITAT / CTA — besedilo se razkrije, ozadje rahlo diha
   --------------------------------------------------------------------- */
.quote,
.cta { transition: transform 0.5s var(--ease-soft), box-shadow 0.5s ease; }
.quote:hover,
.cta:hover { transform: translateY(-3px); }

.quote__text,
.cta__title { transition: transform 0.6s var(--ease-soft); }
.quote:hover .quote__text,
.cta:hover .cta__title { transform: scale(1.012); }

/* ---------------------------------------------------------------------
   11. KORAKI (lektoriranje) — številka poskoči
   --------------------------------------------------------------------- */
.step__no {
  display: inline-block;
  transition: transform 0.4s var(--ease-back), color 0.3s ease;
}
.step:hover .step__no { transform: scale(1.45) translateY(-2px); }

/* ---------------------------------------------------------------------
   12. OBRAZEC
   --------------------------------------------------------------------- */
.input,
.select,
.textarea { transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-soft); }
.input:focus,
.select:focus,
.textarea:focus { transform: translateY(-2px); }
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.form-status.is-visible { animation: riseIn 0.5s var(--ease-soft) both; }

.contact__map img { transition: transform 0.8s var(--ease-soft); }
.contact__map { overflow: hidden; }
.contact__map:hover img { transform: scale(1.06); }

.contact__list li { transition: transform 0.3s var(--ease-soft); }
.contact__list li:hover { transform: translateX(6px); }
.contact__list img { transition: transform 0.4s var(--ease-back); }
.contact__list li:hover img { transform: scale(1.2) rotate(-8deg); }

/* ---------------------------------------------------------------------
   12b. POJAVNO OKNO — vstop, risanje kljukice
   --------------------------------------------------------------------- */
.modal__backdrop { animation: fadeIn 0.3s ease both; }
.modal__card { animation: modalIn 0.5s var(--ease-back) both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

.modal__check { animation: checkPop 0.55s 0.1s var(--ease-back) both; }
@keyframes checkPop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}

.modal__check-circle {
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: draw 0.7s 0.25s var(--ease-soft) forwards;
}
.modal__check-mark {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw 0.4s 0.75s var(--ease-soft) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------------
   12c. OBVESTILO O PIŠKOTKIH — pridrsi z dna
   --------------------------------------------------------------------- */
.cookie {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
}
.cookie.is-in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .cookie { transform: translateY(100%); }
}

/* ---------------------------------------------------------------------
   13. NOGA
   --------------------------------------------------------------------- */
.footer a { transition: color 0.25s ease, transform 0.25s ease; display: inline-block; }
.footer ul a:hover { transform: translateX(4px); }
.footer .logo { transition: transform 0.5s var(--ease-back); }
.footer .logo:hover { transform: scale(1.06) rotate(-2deg); }

/* ---------------------------------------------------------------------
   14. Manj gibanja — spoštuj sistemsko nastavitev
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim].is-in,
  .hero__title .word,
  .hero__text,
  .hero .btn-row,
  .hero__photo,
  .subhero__text,
  .service__list li,
  .experience__list li,
  .bullets li,
  .price-table tbody tr {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  /* filter resetiramo le tam, kjer je bil del animacije (ne posegamo v
     sivinski filter logotipov partnerjev) */
  [data-anim="blur"] { filter: none !important; }
  .testimonial__stars { clip-path: none !important; }
  .hero__pattern, .subhero__pattern { opacity: 0.5 !important; }
  .subhero__shape { opacity: 0.9 !important; }
  .badge,
  .hero__blob { animation: none !important; }

  /* Izjema: trak partnerjev teče naprej, le počasneje in brez tresenja.
     (Če želiš, da se tudi ta ustavi, dodaj sem ".partners--marquee
     .marquee__track { animation: none !important; }") */
  .partners--marquee .marquee__track {
    animation: marquee 90s linear infinite !important;
  }
  .modal__card,
  .modal__backdrop,
  .modal__check { animation: none !important; opacity: 1 !important; transform: none !important; }
  .modal__check-circle,
  .modal__check-mark { stroke-dashoffset: 0 !important; animation: none !important; }
  .cookie { opacity: 1 !important; transform: none !important; }
  * { transition-duration: 0.01ms !important; }
}