/* ===========================
   Osnovno
   =========================== */
body{
  margin:0;
  color:#000;
  font-family:monospace!important;
  font-weight:300!important;
  overflow:hidden;
  background-color:#fff!important;
  background:none!important;
}

/* Font */
@font-face{
  font-family:'SportyProBlack';
  src:url('assets/fonts/sporty-pro-black.otf') format('opentype');
  font-weight:900;
  font-style:normal;
}

/* NAV + fancy ćoškovi */
.navbar{ z-index:10; position:relative; background:#fff!important; }
.navbar .nav-link{
  color:#000!important; text-decoration:none; padding:0 8px; transition:color .3s; font-size:18px; position:relative;
}
.fancy-hover .hover-corners {
  text-decoration: none !important;
  color: #000 !important;
}

.fancy-hover {
  text-decoration: none !important;
  color: #000 !important;
}
.fancy-hover{ position:relative; color:#000; text-decoration:none; padding:0 8px; display:inline-block; }
.fancy-hover::before,.fancy-hover::after,.fancy-hover .hover-corners::before,.fancy-hover .hover-corners::after{
  content:''; position:absolute; width:0; height:0; opacity:0; transition:width .4s,height .4s,opacity .4s;
}
.fancy-hover:hover::before,.fancy-hover:hover::after,.fancy-hover:hover .hover-corners::before,.fancy-hover:hover .hover-corners::after{ width:5px; height:5px; opacity:1; }
.fancy-hover::before{ top:-5px; left:-5px; border-top:1px solid #000; border-left:1px solid #000; }
.fancy-hover::after{ top:-5px; right:-5px; border-top:1px solid #000; border-right:1px solid #000; }
.fancy-hover .hover-corners::before{ bottom:-5px; left:-5px; border-bottom:1px solid #000; border-left:1px solid #000; }
.fancy-hover .hover-corners::after{ bottom:-5px; right:-5px; border-bottom:1px solid #000; border-right:1px solid #000; }
.fancy-hover .hover-corners{ position:absolute; top:0; left:0; width:100%; height:100%; }

/* Grid ivice (samo spoljne) */
.container-fluid{ --bs-gutter-x:0!important; }
.row.g-0 > [class*="col-"]{ border:none!important; }
.container-fluid .row.g-0:first-child > .col-md-9{ border-bottom:1px solid #000!important; border-right:1px solid #000!important; }
.container-fluid .row.g-0:first-child > .col-md-3{ border-bottom:1px solid #000!important; border-right:1px solid #000!important; }
.container-fluid .row.g-0:nth-child(2) > .col-md-9{ border-right:1px solid #000!important; }
.container-fluid .row.g-0:nth-child(2) > .col-md-3{ border-right:1px solid #000!important; }
.container-fluid .row.g-0:last-child > .col-md-9{ border-top:1px solid #000!important; border-bottom:1px solid #000; }
.container-fluid .row.g-0:last-child > .col-md-3{ border-left:1px solid #000!important; border-top:1px solid #000!important; border-right:1px solid #000!important; }

/* Naslov */
.display-title{
  font-family:'SportyProBlack',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:6vw; font-weight:900; line-height:1; margin-bottom:0; text-align:center; letter-spacing:-.5px;
}

/* VIDEO CURSOR */
.video-cursor{
  position:fixed; width:450px; height:auto; pointer-events:none;
  transform:translate(-50%,-50%); z-index:2147483647; opacity:1; mix-blend-mode:multiply;
  transition:transform .3s ease, opacity .3s ease; isolation:isolate; background:transparent!important;
}
.video-cursor video{ width:100%; height:100%; object-fit:cover; background:transparent!important; }
.cursor-text{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:30px; font-weight:900; pointer-events:none; mix-blend-mode:difference; }
.video-cursor.hide{ transform:translate(-50%,-50%) scale(.1); opacity:0; }
.video-cursor.show{ transform:translate(-50%,-50%) scale(1); opacity:1; }

/* Custom kružni kursor */
.custom-cursor{
  position:fixed; top:0; left:0; width:24px; height:24px; border:1px solid #ccc; border-radius:50%;
  pointer-events:none; z-index:2147483646; mix-blend-mode:difference;
}

/* SLIDER (osnova) */
.slider-container{ position:relative; width:100%; height:100%; overflow:hidden; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.slider-track{ display:flex; transition:transform .6s ease-in-out; height:100%; }

/* === VAŽNO: nema baznog transform-a; animacija to radi === */
.slider-image{
  flex:0 0 100%;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0;
  transform:none;              /* <- bez rotacije u osnovi */
  animation:none;              /* JS uključuje rotateIn za aktivnu */
  filter:grayscale(0%);
  transition:filter .8s ease, opacity .8s ease;
}

@keyframes rotateIn{
  0%{   opacity:0; transform:rotate(30deg) translate(50%,50%); }
  100%{ opacity:1; transform:rotate(0deg) translate(0,0); }
}

.mono-active .slider-image{ filter:grayscale(100%); opacity:.7; }

/* SCROLL BANNER */
.scroll-banner{ overflow:hidden; background-color:transparent!important; }
@keyframes swingRotate{
  0%{ transform:rotate(-3deg) translateY(-18%) scale(1); }
  50%{ transform:rotate(0deg) translateY(-18%) scale(1.05); }
  100%{ transform:rotate(-3deg) translateY(-18%) scale(1); }
}
.rotated-scroller{
  transform:rotate(-3deg) translateY(-18%);
  position:absolute; width:140%; left:-20%; height:100%;
  display:flex; flex-direction:column; justify-content:space-evenly; align-items:flex-start; gap:0;
  background-color:transparent!important; z-index:1; transform-origin:center center; animation:swingRotate 6s ease-in-out infinite;
}
.scrolling-text-track{
  display:inline-block; white-space:nowrap;
  font-family:'SportyProBlack',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:2.8vw; line-height:1;
}
.bold{ font-weight:900; }
.outline{ font-weight:900; color:#fff; -webkit-text-stroke:1px #000; text-stroke:1px #000; }
@keyframes scrollLeft{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@keyframes scrollRight{ 0%{transform:translateX(-50%);} 100%{transform:translateX(0);} }
.scrolling-text-track.speed-1{ animation:scrollLeft 18s linear infinite; }
.scrolling-text-track.speed-2{ animation:scrollRight 12s linear infinite; }

/* Retina ivice */
.container-fluid .row.g-0 > [class*="col-"]{ border-color:rgba(0,0,0,.9)!important; }

/* ===========================
   MOBILE (≤ 992px)
   =========================== */
:root{ --tap:44px; }

@media (max-width:991.98px){
  body{ overflow:auto!important; }

  /* Stranica teče vertikalno */
  .container-fluid .row.g-0{ height:auto!important; min-height:0!important; }
  .container-fluid .row.g-0 > [class*="col-"]{ padding:16px!important; }

  /* Gornje dvije kolone teksta */
  .top-info{ display:grid!important; grid-template-columns:1fr 1fr; column-gap:12px; align-items:start; }
  .top-info p{ font-size:12px; line-height:1.25; margin-bottom:6px; letter-spacing:.5px; }
  .top-info > div:first-child{ text-align:left; }
  .top-info > div:last-child{ text-align:right; }

  /* Naslov + VIEW SHOWREEL */
  .row.g-0:nth-child(2) .col-md-9{ position:relative; align-items:stretch!important; text-align:left!important; }
  .display-title{ font-size:clamp(26px,8.5vw,30px); margin:6px 0 10px; text-align:center!important; }
  .view-showreel{
    position:absolute; top:8px; right:12px; font-size:12px; letter-spacing:2px;
    text-transform:uppercase; text-decoration:none; color:#000;
  }

  /* Social linkovi u 2 kolone */
  .social-links{
    display:grid!important; grid-template-columns:1fr 1fr; gap:8px 12px; width:100%!important;
    padding:0 2px!important; margin-top:8px!important; text-transform:uppercase; letter-spacing:1.2px;
  }
  .social-links .nav-link{ padding:0; font-size:11px; }

  /* Kvadratni slider 1:1; animacija samo kad je aktivan */
  .row.g-0:nth-child(2) .col-md-3{ padding:0!important; }
  .slider-container{ width:100%; aspect-ratio:1/1; height:auto!important; border-top:1px solid #000; border-bottom:0; }
  .slider-track{ position:absolute; inset:0; }
  .slider-image{
    width:100%; height:100%; object-fit:cover; object-position:center;
    opacity:0; transform:none; animation:none; will-change:transform,opacity; backface-visibility:hidden;
  }
  /* JS postavlja animation na aktivnu; ovo samo osigurava da se vidi */
  .slider-image[style*="rotateIn"]{ opacity:1!important; }

  /* Sakrij gornji brojač i lijevi banner u trećem redu + dupli PREV */
  .row.g-0:last-child .col-md-9{ display:none!important; }
  .row.g-0:first-child > .col-md-3{ display:none!important; }
  #prev-btn{ display:none!important; }

  /* Kursor na touch uređajima */
  .video-cursor,.custom-cursor{ display:none!important; }
}

/* Sitniji telefoni (≤ 576px) */
@media (max-width:575.98px){
  .display-title{ font-size:clamp(24px,9vw,30px); }
  .view-showreel{ font-size:11px; right:8px; top:6px; }
  .rotated-scroller{ animation:swingRotate 10s ease-in-out infinite; }
}

/* Prefer-reduced-motion (fallback bez animacije) */
@media (prefers-reduced-motion:reduce){
  .rotated-scroller{ animation:none!important; }
  .scrolling-text-track.speed-1,.scrolling-text-track.speed-2{ animation-duration:40s!important; }
  .slider-image{ animation:none!important; transform:none!important; }
}

/* ===========================
   Mobile footer (custom)
   =========================== */
.mobile-footer-row{ display:none; }
@media (max-width:991.98px){
  .mobile-footer-row{ display:block; }
  .mobile-footer{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
    padding:10px 12px; border-top:0px solid #000; background:#fff; font-family:monospace; letter-spacing:.02em;
  }
  .mobile-footer .left{ text-transform:uppercase; font-size:11px; line-height:1.1; }
  .mobile-footer .center{ text-align:center; font-size:12px; white-space:nowrap; }
  .mobile-footer .right{ display:flex; justify-content:flex-end; gap:16px; }
  .mobile-footer .right .nav-link{ padding:0; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#000!important; text-decoration:none; }
}