/* ============================================================
   Zeus Agency — vizuelni efekti (dodatni sloj)
   Učitava se NAKON site.css, pa je sve ovdje opcionalno:
   ako se ovaj fajl obriše, sajt i dalje radi, samo bez efekata.
   ============================================================ */

/* ---------- 1. Traka napretka čitanja ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:300;
  pointer-events:none;background:rgba(255,255,255,.04);
}
.progress i{
  display:block;height:100%;width:100%;transform-origin:0 50%;
  transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--accent),var(--accent-lt));
  box-shadow:0 0 12px rgba(232,185,58,.6);
}

/* ---------- 2. Scena: video pozadina ---------- */
.stage{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  /* video blijedi kad se skroluje iz hero sekcije */
  opacity:var(--stageFade,1);
  transition:opacity .5s linear;
}
.stage-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.5;
  transform:scale(1.06);
}
.stage-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 50% 0%,transparent 30%,var(--bg) 92%),
    linear-gradient(180deg,rgba(5,6,11,.55),rgba(5,6,11,.9));
}

/* ---------- 3. Mreža pozadine (ilustracija) ---------- */
.stage-grid{
  position:absolute;inset:0;opacity:.4;
  background-image:
    linear-gradient(rgba(232,185,58,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,185,58,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 25%,#000,transparent 78%);
  mask-image:radial-gradient(90% 70% at 50% 25%,#000,transparent 78%);
}

/* ---------- 4. Konstelacija (SVG animacija) ---------- */
.stage-mesh{
  position:absolute;inset:0;width:100%;height:100%;opacity:.5;
}
.stage-mesh line{
  stroke:rgba(232,185,58,.16);stroke-width:1;
  stroke-dasharray:5 9;animation:march 22s linear infinite;
}
.stage-mesh circle{fill:rgba(232,185,58,.5);animation:pulse 5s ease-in-out infinite}
.stage-mesh circle:nth-child(2n){animation-delay:-1.6s}
.stage-mesh circle:nth-child(3n){animation-delay:-3.1s}
@keyframes march{to{stroke-dashoffset:-280}}
@keyframes pulse{
  0%,100%{opacity:.18;r:2.5}
  50%{opacity:.85;r:4.5}
}

/* ---------- 5. Orbitalni ornament u heroju (ilustracija) ---------- */
.hero-ornament{
  position:absolute;z-index:-1;pointer-events:none;
  right:-8%;top:50%;transform:translateY(-50%);
  width:min(620px,80vw);aspect-ratio:1;opacity:.5;
}
.hero-ornament svg{width:100%;height:100%;overflow:visible}
.orb-ring,.orb-orbit{
  fill:none;stroke:rgba(232,185,58,.22);stroke-width:1;
  transform-box:view-box;transform-origin:100px 100px;
}
.orb-ring.r1{stroke-dasharray:2 10;animation:spin 68s linear infinite}
.orb-ring.r2{stroke-dasharray:44 26;stroke:rgba(232,185,58,.16);animation:spin 44s linear infinite reverse}
.orb-ring.r3{stroke:rgba(232,185,58,.1);stroke-dasharray:1 6;animation:spin 96s linear infinite}
.orb-orbit{animation:spin 26s linear infinite}
.orb-orbit.orb-slow{animation-duration:41s;animation-direction:reverse}
.orb-dot{fill:var(--accent)}
.orb-cross{stroke:rgba(232,185,58,.3);stroke-width:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 6. Dekoracija unutar sekcija ---------- */
.deco{
  position:absolute;inset:0;max-width:none;margin:0;
  pointer-events:none;z-index:-1;overflow:hidden;
}
.deco-blob{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
}
.deco-blob.b1{
  width:520px;height:520px;top:-14%;right:-8%;
  background:radial-gradient(circle,rgba(232,185,58,.16),transparent 68%);
  animation:drift 26s ease-in-out infinite;
}
.deco-blob.b2{
  width:440px;height:440px;bottom:-18%;left:-10%;
  background:radial-gradient(circle,rgba(74,88,180,.14),transparent 68%);
  animation:drift 32s ease-in-out infinite reverse;
}
.deco-line{
  position:absolute;left:50%;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(232,185,58,.16),transparent);
}

/* ---------- 7. Navigacija ---------- */
.nav-links a{position:relative;transition:color .25s ease}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------- 8. Kartice ---------- */
.card{
  transform-style:preserve-3d;
  transition:transform .45s var(--ease),border-color .35s ease,box-shadow .45s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(232,185,58,.34);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.9),0 0 0 1px rgba(232,185,58,.1);
}
.card-icon{
  transition:transform .45s var(--ease),stroke .35s ease;
}
.card:hover .card-icon{transform:translateY(-3px) scale(1.08);stroke:var(--accent)}

/* ---------- 9. Projekti ---------- */
.work-media{overflow:hidden;position:relative}
/* scale daje prostora za parallax; --py postavlja JS, transform ostaje ovdje
   da ne preuzme hover zoom u .work-item:hover */
.work-media img{
  transform:scale(1.12) translate3d(0,var(--py,0px),0);
  transition:transform .8s var(--ease),filter .8s var(--ease);
}
.work-item:hover .work-media img{transform:scale(1.18) translate3d(0,var(--py,0px),0)}
/* sjaj koji prelazi preko slike */
.work-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
}
.work-item:hover .work-media::after{transform:translateX(120%)}
.work-media::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  border:1px solid rgba(232,185,58,0);transition:border-color .4s ease;
}
.work-item:hover .work-media::before{border-color:rgba(232,185,58,.4)}

/* ---------- 10. Uzneseni plan ---------- */
.plan-featured{
  border-color:rgba(232,185,58,.34);
  background-image:
    linear-gradient(var(--surface),var(--surface)),
    linear-gradient(135deg,var(--accent),#7c5cf0,var(--accent));
  background-size:100% 100%,300% 300%;
  background-position:0 0,0% 50%;
  animation:borderFlow 9s ease infinite;
}
@keyframes borderFlow{
  0%,100%{background-position:0 0,0% 50%}
  50%{background-position:0 0,100% 50%}
}

/* ---------- 11. Sjena koja prati kursor ---------- */
/* max-width/margin override je obavezan: `.section > *` u site.css daje
   max-width:1280px + margin-inline:auto, pa bi se sjena ograničila na
   širinu kontejnera i --sx/--sy (izračunati od pune širine sekcije)
   bi pucali na širokim ekranima. Isto vrijedi za .deco gore. */
.spotlight{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  max-width:none;margin:0;
  transition:opacity .4s ease;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),
    rgba(232,185,58,.075),transparent 70%);
}
.section:hover .spotlight{opacity:1}

/* ---------- 12. Kontrolisano pojačanje teksta ---------- */
.kicker{
  background-image:linear-gradient(90deg,var(--accent),var(--accent-lt),var(--accent));
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.btn{
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
.btn::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--bx,50%) var(--by,50%),
    rgba(255,255,255,.3),transparent 55%);
  opacity:0;transition:opacity .35s ease;
}
.btn:hover::before{opacity:1}

/* ---------- 13. Telefon ---------- */
@media (max-width:900px){
  .stage-video{opacity:.38}
  .hero-ornament{opacity:.28;right:-24%;width:min(460px,92vw)}
  .stage-mesh{opacity:.32}
  .deco-blob.b1{width:340px;height:340px}
  .deco-blob.b2{width:300px;height:300px}
  .spotlight{display:none}
}
@media (max-width:560px){
  .stage-grid{background-size:44px 44px}
  .stage-video{opacity:.3}
}

/* ---------- 14. Poštovanje sistemske postavke ---------- */
@media (prefers-reduced-motion:reduce){
  .stage-video,.stage-mesh,.hero-ornament,.deco-blob{display:none}
  .progress{display:none}
  .orb-ring,.orb-dot,.stage-mesh line,.stage-mesh circle,.kicker,.plan-featured{animation:none}
  .plan-featured{background-image:linear-gradient(var(--surface),var(--surface)),none}
  .kicker{color:var(--accent);-webkit-text-fill-color:currentColor}
  .card:hover,.btn,.card-icon,.work-media img{transform:none!important;transition:none}
  .work-item:hover .work-media img{transform:none}
}