/* ============================================================
   GATHER, "Poster / Kinetic"   [EKSPERIMENTALNI BUILD]
   Plakatska tipografija, rotirana ticker traka, rasuti bento,
   ticket-stub sa perforacijom, sticky pinned brojevi,
   grain tekstura, cursor glow, scroll progress, magnetna dugmad.
   ============================================================ */
:root{
  --bg:#08060d;
  --bg2:#100b1a;
  --card:#171021;
  --line:rgba(255,255,255,.1);
  --txt:#f6f2fb;
  --mut:#948aa8;
  --pink:#ff3d7f;
  --orange:#ffab3d;
  --grad:linear-gradient(100deg,#ff3d7f 0%,#ff6a4d 48%,#ffab3d 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:'Inter',sans-serif;
     overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand,.b,.d,.price{font-family:'Sora',sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
::selection{background:var(--pink);color:#fff}

/* ikonice */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;fill:none;
    stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-sm{width:.95em;height:.95em}
.ic-lg{width:1.7em;height:1.7em}

/* ---------- eksperiment: scroll progress ---------- */
.prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:999;
      transition:width .08s linear}

/* ---------- eksperiment: grain ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:998;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- eksperiment: cursor glow ---------- */
.glowcur{position:fixed;width:560px;height:560px;border-radius:50%;pointer-events:none;
  z-index:0;transform:translate(-50%,-50%);opacity:.5;
  background:radial-gradient(circle,rgba(255,61,127,.24),rgba(255,171,61,.09) 42%,transparent 68%);
  transition:opacity .4s}
@media(max-width:900px){.glowcur{display:none}}

/* ---------- nav ---------- */
nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;
    display:flex;align-items:center;gap:32px;
    background:rgba(16,11,26,.72);backdrop-filter:blur(18px);
    border:1px solid var(--line);border-radius:100px;padding:10px 12px 10px 22px;
    transition:.3s;max-width:calc(100% - 32px)}
nav.small{top:10px;background:rgba(16,11,26,.9)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;
       letter-spacing:.02em}
.brand .ic{color:var(--pink);width:1.2em;height:1.2em}
.nlinks{display:flex;gap:26px;font-size:13.5px;color:var(--mut)}
.nlinks a:hover{color:var(--txt)}
@media(max-width:840px){.nlinks{display:none}nav{gap:14px}}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:100px;
     padding:12px 22px;font-size:13px;font-weight:600;cursor:pointer;border:0;
     transition:.24s;font-family:'Inter',sans-serif}
.btn.g{background:var(--grad);color:#170b12}
.btn.g:hover{filter:brightness(1.12)}
.btn.dark{background:#0d0912;color:var(--txt)}
.btn.dark:hover{background:#000}

/* ============ HERO, poster ============ */
.hero{position:relative;padding:150px 0 90px;overflow:hidden;z-index:1}

/* rotirana ticker traka preko cele sirine */
.ticker{position:absolute;top:96px;left:-6%;width:112%;
        background:var(--grad);color:#180b10;padding:9px 0;
        transform:rotate(-2.4deg);overflow:hidden;z-index:2}
.ticker .tk{display:flex;gap:22px;white-space:nowrap;width:max-content;
            animation:tk 24s linear infinite;align-items:center}
.ticker span{font-family:'Sora',sans-serif;font-weight:800;font-size:14px;
             letter-spacing:.2em}
.ticker b{opacity:.45;font-size:14px}
@keyframes tk{to{transform:translateX(-50%)}}

.hero-in{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:0 28px}

.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);
       border:1px solid var(--line);border-radius:100px;padding:9px 18px;font-size:13px;
       color:var(--mut);margin-top:76px;transform:rotate(-1.2deg)}
.badge .ic{color:var(--orange)}
.badge b{color:var(--txt);font-weight:600}

/* plakatska tipografija, svaki red drugaciji */
.poster{margin:26px 0 0;display:flex;flex-direction:column;line-height:.86;
        letter-spacing:-.04em;font-weight:800}
.poster span{display:block}
.poster .l1{font-size:clamp(30px,5vw,74px);color:var(--txt)}
.poster .l2{font-size:clamp(54px,12.5vw,190px);
            background:var(--grad);-webkit-background-clip:text;background-clip:text;
            color:transparent;margin-left:.06em}
.poster .l3{font-size:clamp(26px,4.6vw,68px);-webkit-text-stroke:1.6px var(--txt);
            color:transparent;margin-left:.02em}
.poster .l4{font-size:clamp(54px,12.5vw,190px);color:var(--txt);margin-left:.24em}

.lede{color:var(--mut);font-size:17px;line-height:1.65;max-width:44ch;margin:32px 0 34px}

.searchbar{display:flex;align-items:center;gap:12px;background:var(--card);
           border:1px solid var(--line);border-radius:100px;padding:8px 8px 8px 20px;
           max-width:620px}
.searchbar .ic{color:var(--mut);width:1.25em;height:1.25em}
.searchbar input{flex:1;background:none;border:0;outline:none;color:var(--txt);
                 font-size:15px;font-family:'Inter',sans-serif;padding:10px 0}
.searchbar input::placeholder{color:#6d6482}

.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.chip{border:1px solid var(--line);border-radius:100px;padding:8px 17px;font-size:13px;
      color:var(--mut);cursor:pointer;transition:.2s;user-select:none}
.chip:hover{border-color:var(--pink);color:var(--txt)}
.chip.on{background:var(--txt);color:#0d0912;border-color:var(--txt);font-weight:600}

/* ============ EVENTS ============ */
section{padding:110px 0;position:relative;z-index:1}
#events{padding-top:40px}

/* vertikalna labela sa strane, eksperiment */
.side-label{position:absolute;left:14px;top:170px;
            writing-mode:vertical-rl;font-family:'Sora',sans-serif;font-weight:800;
            font-size:11px;letter-spacing:.42em;color:#4b4360}
@media(max-width:1400px){.side-label{display:none}}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
      margin-bottom:46px;flex-wrap:wrap}
.head h2{font-size:clamp(30px,4.4vw,58px);font-weight:800;line-height:1.02;
         letter-spacing:-.035em}
.head h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
            background-clip:text;color:transparent}
.viewall{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
         font-weight:600;color:var(--pink);padding-bottom:6px}
.viewall:hover{gap:13px}

/* rasuti bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ev{background:var(--card);border:1px solid var(--line);border-radius:20px;
    overflow:hidden;transition:.34s cubic-bezier(.2,.7,.2,1);position:relative}
.ev:nth-child(odd){transform:rotate(-.5deg)}
.ev:nth-child(even){transform:rotate(.42deg)}
.ev:hover{transform:rotate(0) translateY(-7px);border-color:rgba(255,61,127,.45)}
.ev.big{grid-column:span 2}
.ev.wide{grid-column:span 2}
.bento .ev:last-child{grid-column:span 2}
.ev .img{position:relative;overflow:hidden}
.ev .img img{width:100%;height:186px;object-fit:cover;transition:.5s}
.ev.big .img img,.ev.wide .img img{height:262px}
.ev:hover .img img{transform:scale(1.05)}
.ev .date{position:absolute;top:14px;left:14px;background:rgba(8,6,13,.82);
          backdrop-filter:blur(8px);border-radius:12px;padding:8px 12px;text-align:center;
          line-height:1.1}
.ev .date .d{display:block;font-weight:800;font-size:19px}
.ev .date .mo{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
              color:var(--mut);margin-top:2px}
.ev .cat{position:absolute;top:14px;right:14px;background:var(--grad);color:#180b10;
         font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
         padding:6px 11px;border-radius:100px}
.ev .b{padding:20px 20px 22px}
.ev h3{font-size:19px;font-weight:700;line-height:1.28;letter-spacing:-.015em}
.ev.big h3,.ev.wide h3{font-size:23px}
.ev .loc{display:flex;align-items:center;gap:7px;color:var(--mut);font-size:13px;
         margin-top:9px}
.ev .loc .ic{color:var(--pink)}
.ev .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
          margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.ev .price{font-weight:800;font-size:17px}
.ev .price.free{background:var(--grad);-webkit-background-clip:text;background-clip:text;
                color:transparent}
.ev .going{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:12.5px}
@media(max-width:980px){
  .bento{grid-template-columns:1fr 1fr}
  .ev.big,.ev.wide,.bento .ev:last-child{grid-column:span 2}
}
@media(max-width:620px){
  .bento{grid-template-columns:1fr}
  .ev.big,.ev.wide,.bento .ev:last-child{grid-column:span 1}
  .ev:nth-child(odd),.ev:nth-child(even){transform:none}
}

/* reveal */
.rvx{opacity:0;transform:translateY(30px) rotate(0)}
.rvx.in{opacity:1;transition:.75s cubic-bezier(.2,.7,.2,1)}
.rvx.in:nth-child(odd){transform:rotate(-.5deg)}
.rvx.in:nth-child(even){transform:rotate(.42deg)}

/* ============ STICKY PINNED brojevi ============ */
.pin{padding:0;height:190vh}
.pin-inner{position:sticky;top:0;height:100vh;display:flex;align-items:center;
           justify-content:center;padding:0 28px}
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;width:100%;
      max-width:1180px;text-align:center}
.band .b{font-family:'Sora',sans-serif;font-weight:800;
         font-size:clamp(40px,7vw,104px);line-height:1;letter-spacing:-.05em;
         display:flex;align-items:center;justify-content:center;gap:.1em}
.band .gr{background:var(--grad);-webkit-background-clip:text;background-clip:text;
          color:transparent}
.band .star{width:.42em;height:.42em;color:var(--orange);stroke-width:2;
            -webkit-text-fill-color:initial}
.band p{color:var(--mut);margin-top:12px;font-size:11.5px;letter-spacing:.24em;
        text-transform:uppercase}
@media(max-width:860px){
  .pin{height:auto;padding:90px 0}
  .pin-inner{position:static;height:auto}
  .band{grid-template-columns:1fr 1fr;gap:40px}
}

/* ============ CTA + ticket stub ============ */
.cta-sec{padding:40px 0 110px}
.cta{max-width:1240px;margin:0 auto;background:var(--grad);border-radius:30px;
     padding:56px;display:grid;grid-template-columns:1.25fr .75fr;gap:44px;
     align-items:center;color:#170b10}
.cta h2{font-size:clamp(28px,4vw,52px);font-weight:800;line-height:1.04;
        letter-spacing:-.035em}
.cta p{margin:16px 0 28px;font-size:16.5px;opacity:.8;max-width:36ch}

/* ticket stub sa perforacijom */
.stub{background:#0b0810;color:var(--txt);border-radius:16px;padding:24px;
      position:relative;transform:rotate(2deg);
      box-shadow:0 22px 48px rgba(0,0,0,.34)}
.stub::before,.stub::after{content:"";position:absolute;width:22px;height:22px;
      background:#ff6a4d;border-radius:50%;top:calc(50% - 11px)}
.stub::before{left:-11px}
.stub::after{right:-11px}
.stub-top{display:flex;align-items:center;justify-content:space-between;
          padding-bottom:18px;border-bottom:2px dashed rgba(255,255,255,.18)}
.stub-lbl{font-family:'Sora',sans-serif;font-weight:800;font-size:11px;
          letter-spacing:.28em;text-transform:uppercase;color:var(--mut)}
.stub-top .ic{color:var(--orange)}
.stub-mid{padding:22px 0 20px}
.sm-d{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:29px;
      letter-spacing:-.02em}
.sm-s{display:block;font-size:12.5px;color:var(--mut);margin-top:6px;letter-spacing:.05em}
.stub-code{display:flex;gap:3px;align-items:flex-end;height:34px}
.stub-code i{flex:1;background:var(--txt);border-radius:1px}
.stub-code i:nth-child(3n){height:100%}
.stub-code i:nth-child(3n+1){height:70%}
.stub-code i:nth-child(3n+2){height:88%}
@media(max-width:900px){
  .cta{grid-template-columns:1fr;padding:36px 26px;gap:34px}
  .stub{transform:none}
}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:38px 0;background:var(--bg2)}
footer .in{display:flex;align-items:center;justify-content:space-between;gap:22px;
           flex-wrap:wrap}
footer .fl{display:flex;gap:24px;font-size:13.5px;color:var(--mut)}
footer .fl a:hover{color:var(--txt)}
footer .cr{color:#6d6482;font-size:13px}