/* ============================================================
   STARI DRUGOVI — design tokens pulled from the hero photo:
   dusk sky, amber horizon, ember jacket logos, asphalt night
   ============================================================ */
:root{
  --night:        #060a18;   /* deep space navy */
  --asphalt:      #0c1226;   /* card / section base */
  --asphalt-2:    #131c3a;
  --ember:        #4f8cff;   /* electric blue */
  --amber:        #8ea9ff;   /* periwinkle glow */
  --amber-deep:   #6366f1;
  --cream:        #eaf0ff;   /* starlight */
  --haze:         rgba(234,240,255,.62);
  --line:         rgba(142,169,255,.18);
  --font-display: "Oswald", system-ui, sans-serif;
  --font-script:  "Kaushan Script", "Dancing Script", cursive;
  --font-body:    "Source Sans 3", system-ui, sans-serif;
}

html{ scroll-behavior:smooth; }
body{
  background: var(--night);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.05rem;
  overflow-x: hidden;
}
::selection{ background: var(--ember); color:#fff; }

h1,h2,h3,h4,.display-font{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.script{ font-family: var(--font-script); text-transform:none; letter-spacing:0; color: var(--amber); }

a{ color: var(--amber); }
a:hover{ color: var(--cream); }

/* ---------- Navbar ---------- */
.navbar{
  transition: background .35s ease, box-shadow .35s ease;
  padding-block: .9rem;
}
.navbar.scrolled{
  background: rgba(6,10,24,.4)!important;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 30px rgba(0,0,0,.5);
}
.navbar-brand img{ height:44px; filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.nav-link{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .85rem;
  color: var(--cream)!important;
  position: relative;
  margin-inline: .35rem;
}
.nav-link::after{
  content:""; position:absolute; left:50%; bottom:.1rem;
  width:0; height:2px; background: var(--ember);
  transition: width .25s ease, left .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; left:0; }

/* ---------- Hero ---------- */
.hero{
  min-height: 100svh;
  position: relative;
  display:flex; align-items:flex-start;
  isolation: isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background: url("/assets/Stari-Drugovi-Top-2048-1152.jpg") center 30%/cover no-repeat;
  will-change: transform;
}
.hero::after{ /* road-to-night fade */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(6,10,24,.55) 0%, rgba(6,10,24,0) 28%, rgba(6,10,24,0) 55%, rgba(6,10,24,.92) 92%, var(--night) 100%);
}
.hero-inner{
  width:100%; min-height:100svh;
  display:flex; flex-direction:column;
  padding-top: clamp(92px, 13vh, 150px);
  padding-bottom: clamp(4.2rem, 9vh, 6.5rem);   /* clears the scroll cue */
  text-align:center;
}
.hero-logo{
  width: min(620px, 82vw);
  margin-inline:auto;
  filter: drop-shadow(6px 6px 24px rgba(0,0,0,.75));
}
.hero-logo img{ width:100%; filter: brightness(0) invert(1); animation: rise 1.1s cubic-bezier(.2,.8,.2,1) both; }
.hero-logo svg{ width:100%; height:auto; overflow:visible; }
.hero-logo svg path{
  fill:#fff; fill-opacity:0;
  stroke:#000; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  transition: fill-opacity .9s ease;
}
.hero-logo svg path.inked{ fill-opacity:1; }
.hero-tag{
  margin-top: auto;                              /* pinned to the bottom of the screen */
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  color: var(--amber);
  text-shadow: 0 3px 18px rgba(0,0,0,.8);
  animation: rise 1.1s .15s cubic-bezier(.2,.8,.2,1) both;
}
.hero-sub{
  max-width: 640px; margin-inline:auto;
  color: var(--haze); font-size:1.05rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
  animation: rise 1.1s .3s cubic-bezier(.2,.8,.2,1) both;
}
.hero-cta{ animation: rise 1.1s .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise{ from{ opacity:0; transform: translateY(26px);} to{ opacity:1; transform:none;} }

.btn-ember{
  background: var(--ember); color:#fff; border:0;
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.12em;
  padding:.8rem 1.8rem; border-radius:999px;
  box-shadow: 0 8px 28px rgba(79,140,255,.45);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-ember:hover{ background:#6fa0ff; color:#fff; transform: translateY(-2px); box-shadow:0 12px 34px rgba(79,140,255,.6); }
.btn-ghost{
  border:1.5px solid rgba(234,240,255,.55); color:var(--cream);
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:.12em;
  padding:.8rem 1.8rem; border-radius:999px; background:rgba(6,10,24,.25); backdrop-filter:blur(4px);
  transition: all .2s ease;
}
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); }

.scroll-cue{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  color:var(--haze); font-size:1.4rem; animation: bob 2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* ---------- Section scaffolding ---------- */
section{ padding-block: clamp(4rem, 9vh, 7rem); }
.eyebrow{
  font-family: var(--font-display); text-transform:uppercase;
  letter-spacing:.32em; font-size:.78rem; color: var(--ember);
}
.sec-title{ font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight:600; }
.sec-script{ font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-top:-.4rem; }
.rule{
  width:84px; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--ember), var(--amber));
}

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Latest release strip ---------- */
.latest-strip{
  background: linear-gradient(120deg, rgba(12,18,38,.72) 0%, rgba(19,28,58,.72) 100%);
  border-block: 1px solid var(--line);
}
.latest-art{
  width:100%; max-width:340px; aspect-ratio:1; object-fit:cover;
  border-radius: 14px; box-shadow: 0 22px 60px rgba(0,0,0,.6);
  transform: rotate(-2deg);
  transition: transform .35s ease;
}
.latest-art:hover{ transform: rotate(0deg) scale(1.02); }
.badge-new{
  background: var(--ember); color:#fff; font-family:var(--font-display);
  letter-spacing:.2em; padding:.45em 1em; border-radius:999px; font-size:.72rem;
}

/* ---------- Discography ---------- */
.disc-tabs .nav-link{
  font-size:.95rem; letter-spacing:.18em; color:var(--haze)!important;
  border:0; border-bottom:2px solid transparent; border-radius:0;
  background:transparent!important;
}
.disc-tabs .nav-link.active{ color:var(--amber)!important; border-bottom-color:var(--ember); }
.album-card{
  background: var(--asphalt);
  border:1px solid var(--line);
  border-radius:16px; overflow:hidden; cursor:pointer;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.album-card:hover{
  transform: translateY(-8px);
  border-color: rgba(142,169,255,.5);
  box-shadow: 0 24px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(142,169,255,.2);
}
.album-art{ position:relative; aspect-ratio:1; background:linear-gradient(135deg,#16223f,#0a1020); overflow:hidden; }
.album-art img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.album-card:hover .album-art img{ transform: scale(1.06); }
.album-art .play-veil{
  position:absolute; inset:0; display:grid; place-items:center;
  background: rgba(6,10,24,.45); opacity:0; transition:opacity .3s ease;
}
.album-card:hover .play-veil{ opacity:1; }
.play-veil i{ font-size:3rem; color:var(--cream); filter: drop-shadow(0 4px 14px rgba(0,0,0,.7)); }
.album-meta{ padding: .95rem 1.1rem 1.15rem; }
.album-meta h3{ font-size:1.05rem; letter-spacing:.05em; margin:0; }
.album-meta small{ color:var(--haze); }
.art-fallback{
  width:100%; height:100%; display:grid; place-items:center;
  font-family:var(--font-script); font-size:1.6rem; color:var(--amber); text-align:center; padding:1rem;
}

/* track list inside modal */
.modal-content{ background: var(--asphalt); color:var(--cream); border:1px solid var(--line); border-radius:18px; }
.modal-header{ border-bottom:1px solid var(--line); }
.modal-art{ width:96px; height:96px; border-radius:10px; object-fit:cover; box-shadow:0 10px 26px rgba(0,0,0,.5); }
.track{
  display:flex; align-items:center; gap:.9rem;
  padding:.65rem .8rem; border-radius:10px; cursor:pointer;
  transition: background .2s ease;
}
.track:hover{ background: rgba(142,169,255,.08); }
.track.playing{ background: rgba(79,140,255,.16); }
.track .tnum{ width:1.6rem; text-align:center; color:var(--haze); font-family:var(--font-display); }
.track .ttitle{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track .tdur{ color:var(--haze); font-variant-numeric:tabular-nums; font-size:.9rem; }
.track .ticon{ color:var(--amber); width:1.4rem; text-align:center; }

/* equalizer bars */
.eq{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.eq span{ width:3px; background:var(--ember); animation: eq .9s ease-in-out infinite; border-radius:1px; }
.eq span:nth-child(2){ animation-delay:.2s; } .eq span:nth-child(3){ animation-delay:.4s; }
@keyframes eq{ 0%,100%{height:4px} 50%{height:14px} }

/* ---------- Preview player bar ---------- */
#playerBar{
  position:fixed; left:0; right:0; bottom:-110px; z-index:1080;
  background: rgba(10,16,36,.96); backdrop-filter: blur(14px);
  border-top:1px solid var(--line);
  transition: bottom .4s cubic-bezier(.2,.8,.2,1);
  padding:.7rem 0;
}
#playerBar.show{ bottom:0; }
#pbArt{ width:52px; height:52px; border-radius:8px; object-fit:cover; }
#pbTitle{ font-family:var(--font-display); letter-spacing:.05em; }
#pbAlbum{ color:var(--haze); font-size:.85rem; }
.pb-btn{ background:none; border:0; color:var(--cream); font-size:1.7rem; line-height:1; }
.pb-btn:hover{ color:var(--amber); }
#pbProgress{ height:5px; cursor:pointer; background:rgba(234,240,255,.15); border-radius:3px; }
#pbFill{ height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,var(--ember),var(--amber)); }
.pb-note{ font-size:.72rem; color:var(--haze); letter-spacing:.08em; text-transform:uppercase; }

/* ---------- Stories ---------- */
.story-row{ border-left: 3px solid var(--line); padding-left: 1.6rem; position:relative; }
.story-row::before{
  content:""; position:absolute; left:-8px; top:.45rem;
  width:13px; height:13px; border-radius:50%;
  background: var(--ember); box-shadow:0 0 0 5px rgba(79,140,255,.18);
}
.story-row h3{ font-size:1.35rem; color: var(--amber); }
.story-row p{ color: var(--haze); }

/* ---------- About ---------- */
.about-wrap{
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(99,102,241,.16), transparent 60%),
    rgba(12,18,38,.72);
  border-block:1px solid var(--line);
}
.stat{ font-family:var(--font-display); font-size:2.4rem; color:var(--amber); line-height:1; }
.stat-label{ letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--haze); }

/* ---------- Platforms ---------- */
.platform{
  display:flex; align-items:center; gap:.8rem;
  background:var(--asphalt); border:1px solid var(--line); border-radius:14px;
  padding:1rem 1.2rem; color:var(--cream); text-decoration:none;
  font-family:var(--font-display); letter-spacing:.08em; text-transform:uppercase; font-size:.92rem;
  transition: all .25s ease;
}
.platform i{ font-size:1.5rem; color:var(--amber); transition:color .25s ease; }
.platform:hover{ transform:translateY(-4px); border-color:var(--ember); color:#fff; box-shadow:0 14px 34px rgba(0,0,0,.45); }
.platform:hover i{ color:var(--ember); }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); background:#04070f; }
.footer-logo{ height:60px; filter: brightness(0) invert(1); opacity:.9; }
.social-btn{
  width:46px; height:46px; display:inline-grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; color:var(--cream); font-size:1.2rem;
  transition:all .25s ease;
}
.social-btn:hover{ background:var(--ember); border-color:var(--ember); color:#fff; transform:translateY(-3px); }

#toTop{
  position:fixed; right:1.2rem; bottom:5.6rem; z-index:1070;
  width:46px; height:46px; border-radius:50%; border:0;
  background:var(--ember); color:#fff; font-size:1.2rem;
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 10px 26px rgba(79,140,255,.5);
}
#toTop.show{ opacity:1; pointer-events:auto; }
#toTop:hover{ transform:translateY(-3px); }

/* ---------- scroll FX layer ---------- */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:2000;
  background: linear-gradient(90deg, var(--ember), var(--amber));
  box-shadow: 0 0 12px rgba(142,169,255,.8);
}
#fx{
  position:fixed; inset:0; z-index:990; pointer-events:none;
  mix-blend-mode: screen; opacity:.8;
}

/* directional reveals for story rows */
#stories .story-row.reveal{ transform: translateX(-44px); }
#stories .story-row.reveal.in{ transform:none; }

/* glow sweep on section rules when revealed */
.rule{ position:relative; overflow:hidden; }
.reveal.in .rule::after, .reveal.in.rule::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation: sweep 1.1s .25s ease both;
}
@keyframes sweep{ from{ transform:translateX(-110%);} to{ transform:translateX(110%);} }

/* latest artwork spins gently like a record as you scroll */
.latest-art{ will-change: transform; }

/* 3D tilt on album cards */
.album-card{ transform-style: preserve-3d; will-change: transform; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s!important; transition-duration:.001s!important; }
  html{ scroll-behavior:auto; }
}
@media (max-width: 575px){
  .hero-logo{ width:92vw; }
  #pbAlbum{ display:none; }
}

/* ---------- sub-page hero banner ---------- */
.page-hero{
  position:relative;
  padding: clamp(8.5rem, 16vh, 11rem) 0 clamp(3rem, 6vh, 4.5rem);
  isolation:isolate;
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background: url("Stari-Drugovi-Top-2048-1152.jpg") center 32%/cover no-repeat;
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(6,10,24,.72) 0%, rgba(6,10,24,.55) 55%, var(--night) 100%);
}


/* ---------- Play Now dropdown ---------- */
.play-menu{
  background: rgba(10,16,36,.97); backdrop-filter: blur(12px);
  border:1px solid var(--line); border-radius:12px; padding:.4rem;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.play-menu .dropdown-item{
  color: var(--cream); border-radius:8px; padding:.55rem .9rem;
  font-family: var(--font-display); letter-spacing:.08em; text-transform:uppercase; font-size:.82rem;
}
.play-menu .dropdown-item:hover{ background: rgba(79,140,255,.18); color:#fff; }


.nb-chip.apple:hover{ border-color:#fa586a; background:rgba(250,88,106,.12); }
#pbSpotify iframe{ border-radius:12px; display:block; }
#pbSpotify{ min-height:80px; }


/* ---------- fixed gradient orb (propsaver-style) ---------- */
#orb{
  position:fixed; top:50%; left:50%;
  width:min(78vw, 920px); aspect-ratio:1;
  transform: translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 32%,
      rgba(99,102,241,.50) 0%,
      rgba(79,140,255,.30) 34%,
      rgba(56,189,248,.14) 56%,
      rgba(56,189,248,0) 72%);
  filter: blur(64px);
  z-index:0; pointer-events:none;
  animation: orbPulse 11s ease-in-out infinite;
}
@keyframes orbPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.9; }
  50%    { transform:translate(-50%,-50%) scale(1.08); opacity:1; }
}
/* content rides above the orb */
section, footer, .hero, .page-hero{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ #orb{ animation:none; } }