/* ==========================================================================
   PANTHER TIKE — CINEMA sloj (skrol-scena, rack, preloader, kursor, glass)
   Dodaje se preko style.css. Ne mijenja logiku shopa.
   ========================================================================== */
:root{
  --bgc:#efece4;               /* boja pozadine scene (JS je mijenja) */
  --glass:rgba(255,255,255,.62);
  --glass-d:rgba(16,16,16,.72);
  --glass-line:rgba(255,255,255,.35);
  --ease-o:cubic-bezier(.16,1,.3,1);
}
body.pre-lock{overflow:hidden}

/* ---------- preloader ---------- */
.pre{position:fixed;inset:0;z-index:1000;background:#0b0b0c;color:#fff;display:grid;place-items:center;transition:clip-path 1.1s var(--ease-o),visibility 0s 1.1s;clip-path:inset(0 0 0 0)}
.pre.done{clip-path:inset(0 0 100% 0);visibility:hidden}
.pre-in{display:grid;justify-items:center;gap:18px;width:min(320px,70vw)}
.pre-in img{width:84px;height:84px;border-radius:50%;border:2px solid #fff;object-fit:cover;animation:preSpin 2.4s var(--ease-o) infinite}
.pre-in b{font-size:2.1rem;letter-spacing:.08em}
.pre-bar{width:100%;height:2px;background:rgba(255,255,255,.15);overflow:hidden;border-radius:2px}
.pre-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--acid));transition:width .25s linear}
.pre-in span{font-weight:800;font-size:.78rem;letter-spacing:.2em;color:#a9a9a1}
@keyframes preSpin{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.06)}}

/* ---------- progres skrola ---------- */
.sp-bar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--pink),var(--acid));z-index:999;pointer-events:none}

/* ---------- kursor ---------- */
.cur-dot{position:fixed;left:0;top:0;width:0;height:0;z-index:998;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){
  .cur-dot{display:block}
  body.has-cur,body.has-cur a,body.has-cur button,body.has-cur .card,body.has-cur .rk{cursor:none}
}
.cur-dot span{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);mix-blend-mode:normal;display:grid;place-items:center;font:800 .62rem/1 var(--body);letter-spacing:.14em;color:#fff;text-transform:uppercase;transition:width .4s var(--ease-o),height .4s var(--ease-o),margin .4s var(--ease-o),background .3s,opacity .3s;white-space:nowrap}
.cur-dot.hov span{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(255,46,126,.18);border:1.5px solid var(--pink)}
.cur-dot.view span{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--pink);color:#fff}
.cur-dot.dark span{background:#fff}
.cur-dot.view.dark span{background:var(--pink)}
.cur-dot.hide span{opacity:0}

/* ---------- glass ---------- */
.glass{background:var(--glass);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);border:1px solid var(--glass-line);box-shadow:0 20px 40px rgba(0,0,0,.18);border-radius:28px}

/* ---------- header lebdi iznad scene ---------- */
.hdr{margin-bottom:-74px}
.hdr::before{background:transparent;border-bottom-color:transparent;transition:background .4s,backdrop-filter .4s,border-color .4s}
.hdr.sc::before{background:rgba(243,242,238,.72);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border-color:var(--line)}
.bar{font-size:.92rem}

/* ==========================================================================
   CINE HERO — pinovana scena kroz 5 poglavlja
   ========================================================================== */
.cine{position:relative;height:640vh;background:var(--bgc)}
.cine-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bgc)}
.cine-bg{position:absolute;inset:0;background:
  radial-gradient(60vmax 60vmax at 50% 55%,rgba(255,255,255,.75),transparent 62%),
  radial-gradient(40vmax 40vmax at 82% 12%,rgba(255,46,126,.10),transparent 60%),
  radial-gradient(40vmax 40vmax at 8% 90%,rgba(217,255,63,.22),transparent 60%)}
.cine-grain{position:absolute;inset:-50%;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* gigantske riječi iza patike */
.cine-words{position:absolute;inset:0;pointer-events:none}
.cw{position:absolute;top:50%;transform:translateY(-54%);font-family:var(--disp);text-transform:uppercase;line-height:.82;font-size:min(17vw,30vh);letter-spacing:.005em;white-space:nowrap;overflow:hidden;padding:.2em 0 .04em}
.cw span{display:block;will-change:transform,opacity;transition:transform .9s var(--ease-o),opacity .5s}
.cw-l{left:3.2vw;color:var(--ink)}
.cw-r{right:3.2vw;color:transparent;-webkit-text-stroke:2px var(--ink)}
.cw.out span{transform:translateY(105%);opacity:0}
.cw.pre-in span{transform:translateY(-105%);opacity:0;transition:none}

/* patike */
.cine-shoes{position:absolute;inset:0;perspective:1400px}
.cx{position:absolute;left:50%;top:51%;width:min(58vw,104vh);aspect-ratio:1.45;margin:calc(min(58vw,104vh)*-.345) 0 0 calc(min(58vw,104vh)*-.5);will-change:transform,opacity,filter;opacity:0;pointer-events:none}
.cx img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 38px 26px rgba(0,0,0,.28)) drop-shadow(0 6px 6px rgba(0,0,0,.18))}
.cx.act{pointer-events:auto;cursor:pointer}
.cx-shadow{position:absolute;left:18%;right:18%;bottom:12%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);filter:blur(10px)}

/* rotirajuci pečat */
.cine-ring{position:absolute;right:max(3vw,24px);top:22vh;width:min(150px,22vw);aspect-ratio:1;z-index:5;transform:rotate(var(--rr,0deg))}
.cine-ring svg{width:100%;height:100%;border-radius:50%;background:var(--pink);box-shadow:0 18px 30px -10px rgba(255,46,126,.7)}
.cine-ring .rot{transform-origin:80px 80px;animation:rot 16s linear infinite}
.cine-ring text{font:700 12.5px var(--body);letter-spacing:.14em;fill:#fff}
.cine-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:400;font-size:clamp(1.6rem,3.2vw,2.4rem);color:#fff;letter-spacing:.02em}
@keyframes rot{to{transform:rotate(360deg)}}

/* natpis (glass) */
.cine-cap{position:absolute;left:max(3vw,22px);bottom:max(6vh,28px);width:min(460px,calc(100vw - 44px));z-index:6;padding:22px 26px 24px;border-radius:28px;background:var(--glass);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);border:1px solid var(--glass-line);box-shadow:0 20px 40px rgba(0,0,0,.16)}
.cine-cap small{display:inline-block;font-weight:800;font-size:.72rem;letter-spacing:.2em;background:var(--ink);color:var(--acid);padding:3px 10px;border-radius:7px;margin-bottom:12px}
.cine-cap h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,3.6vw,3rem);line-height:.98;letter-spacing:.01em}
.cine-cap p{margin-top:10px;color:#3d3d39;font-size:.98rem;line-height:1.5}
.cine-cap .cc-btn{margin-top:16px}
.cine-cap .cc-btn[hidden]{display:none}
.cine-cap>*{transition:opacity .35s,transform .6s var(--ease-o)}
.cine-cap.swap>*{opacity:0;transform:translateY(14px)}

/* kartica modela (glass) */
.cine-meta{position:absolute;right:max(3vw,22px);bottom:max(6vh,28px);z-index:6;display:grid;grid-template-columns:1fr auto;gap:6px 22px;align-items:center;padding:18px 18px 18px 24px;min-width:min(380px,calc(100vw - 44px))}
.cine-meta small{display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#55554f}
.cine-meta>div:first-child b{font-family:var(--disp);font-weight:400;font-size:1.45rem;text-transform:uppercase;line-height:1.05;display:block}
.cm-p{text-align:right}
.cm-p s{display:block;color:#7a7a74;font-size:.82rem}
.cm-p b{font-family:var(--disp);font-weight:400;font-size:1.6rem;color:var(--pink-d)}
.cm-go{grid-column:1/-1;margin-top:8px;background:var(--ink);color:#fff;border-radius:999px;padding:13px 18px;font-weight:800;font-size:.88rem;display:flex;justify-content:center;gap:10px;align-items:center;transition:background .25s,transform .4s var(--ease-o)}
.cm-go:hover{background:var(--pink);transform:translateY(-2px)}
.cine-meta.swap{opacity:.0;transform:translateY(10px)}
.cine-meta{transition:opacity .35s,transform .6s var(--ease-o)}

/* 5-segmentni progres */
.cine-prog{position:absolute;left:50%;top:92px;transform:translateX(-50%);width:min(520px,calc(100vw - 44px));display:flex;gap:8px;z-index:6}
.cine-prog i{flex:1;height:3px;border-radius:3px;background:rgba(16,16,16,.14);position:relative;overflow:hidden}
.cine-prog i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--f,0))}

.cine-scroll{position:absolute;left:50%;bottom:2.2vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.62rem;font-weight:800;letter-spacing:.3em;color:#55554f;z-index:5;transition:opacity .4s}
.cine-scroll i{width:1px;height:38px;background:linear-gradient(var(--ink),transparent);transform-origin:50% 0;animation:sline 1.8s var(--ease-o) infinite}
@keyframes sline{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* uvodna animacija po preloaderu */
body:not(.ready) .cine-cap,body:not(.ready) .cine-meta,body:not(.ready) .cine-ring,body:not(.ready) .cine-prog{opacity:0;transform:translateY(24px)}
.cine-cap,.cine-meta,.cine-ring,.cine-prog{transition:opacity .9s .5s,transform 1.1s .5s var(--ease-o)}

/* ==========================================================================
   FINDER band
   ========================================================================== */
.finder-band{background:var(--ink);color:#fff;padding:86px 0 70px;position:relative;overflow:hidden}
.finder-band::before{content:"";position:absolute;width:60vmax;height:60vmax;left:-20vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(255,46,126,.28),transparent);pointer-events:none}
.fb-in{display:grid;gap:30px;position:relative}
.finder-band .k b{background:var(--acid);color:var(--ink)}
.finder-band .h2{font-size:clamp(3rem,9vw,8rem)}
.finder-band .fp{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);height:56px;min-width:64px;font-size:1.1rem;border-radius:16px}
.finder-band .fp:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.finder-band .btn-k{background:var(--acid);color:var(--ink)}
.finder-band .btn-k:hover{background:var(--pink);color:#fff}
.finder-band .btn-o{border-color:rgba(255,255,255,.4);color:#fff}
.finder-band .btn-o:hover{background:#fff;color:var(--ink)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ==========================================================================
   RACK — horizontalni skrol
   ========================================================================== */
.rack{position:relative;background:#0b0b0c;color:#fff;height:400vh}
.rack-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:3vh}
.rack-pin::before{content:"PANTHER TIKE PANTHER TIKE";position:absolute;left:0;top:50%;transform:translate(var(--bx,0),-50%);white-space:nowrap;font-family:var(--disp);font-size:42vh;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);pointer-events:none}
.rack-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;position:relative;z-index:2;padding-top:56px}
.rack .k b{background:var(--pink);color:#fff}
.rack-head .h2{font-size:clamp(2.4rem,6vw,5rem)}
.rack-hint{font-weight:800;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#a9a9a1}
.rack-line{position:absolute;left:0;right:0;top:calc(50% - 4px);height:1px;background:rgba(255,255,255,.12)}
.rack-track{display:flex;gap:2.2vw;padding:0 5vw 0 max(24px,calc((100vw - 1320px)/2));will-change:transform;position:relative;z-index:2;width:max-content;align-items:center}
.rk{position:relative;flex:0 0 auto;width:clamp(250px,26vw,380px);height:clamp(320px,52vh,470px);border-radius:30px;background:#efece4;color:var(--ink);overflow:hidden;cursor:pointer;transition:transform .7s var(--ease-o),box-shadow .7s var(--ease-o),background .5s;will-change:transform}
.rk:nth-child(even){margin-top:6vh}
.rk:nth-child(odd){margin-top:-4vh}
.rk::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform 1s var(--ease-o);pointer-events:none}
.rk:hover{transform:translateY(-14px) scale(1.03);box-shadow:0 40px 60px -20px rgba(255,46,126,.45);background:#f7f5ef}
.rk:hover::after{transform:translateX(120%)}
.rk-n{position:absolute;left:18px;top:6px;font-family:var(--disp);font-size:7.5rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(16,16,16,.16);pointer-events:none}
.rk-img{position:absolute;left:-6%;right:-6%;top:14%;aspect-ratio:4/3}
.rk-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:contrast(1.08) brightness(1.03);transition:transform .9s var(--ease-o);-webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);mask-image:radial-gradient(closest-side,#000 84%,transparent 100%)}
.rk:hover .rk-img img{transform:scale(1.12) rotate(-6deg)}
.rk-info{position:absolute;left:0;right:0;bottom:0;padding:18px 20px 20px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.rk-info small{display:block;font-weight:800;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:#6c6c66}
.rk-info b{font-family:var(--disp);font-weight:400;font-size:1.5rem;text-transform:uppercase;line-height:1.02;display:block}
.rk-info .rp{font-family:var(--disp);font-size:1.5rem;color:var(--pink-d);white-space:nowrap}
.rk-info s{display:block;font-size:.78rem;color:#8b8b84;text-align:right}
.rack-bar{position:absolute;left:max(24px,calc((100vw - 1320px)/2));right:max(24px,calc((100vw - 1320px)/2));bottom:5vh;height:2px;background:rgba(255,255,255,.14);z-index:3}
.rack-bar i{position:absolute;left:0;top:0;height:100%;width:100%;background:linear-gradient(90deg,var(--pink),var(--acid));transform-origin:0 50%;transform:scaleX(0)}

/* ==========================================================================
   split naslovi (maska + slide-up po riječima)
   ========================================================================== */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.split .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease-o);transition-delay:calc(var(--wi,0)*70ms)}
.split.in .w>span{transform:none}

/* ==========================================================================
   Dotjerivanje postojećih sekcija
   ========================================================================== */
.sec-head .h2{letter-spacing:.005em}
.card{border-radius:28px;transform-style:preserve-3d;will-change:transform}
.card{--rx:0deg;--ry:0deg}
.card:hover{transform:perspective(900px) translateY(-8px) rotateX(var(--rx)) rotateY(var(--ry))}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 60%)}
.card:hover::after{opacity:1}
.brands-strip{padding:26px 0}
.brands-strip .bs-set span{font-size:clamp(1.6rem,3.4vw,2.8rem)}
.gr-card{border-radius:28px;transition:transform .6s var(--ease-o),box-shadow .6s var(--ease-o)}
.gr-card:hover{transform:translateY(-8px)}
.mcard{border-radius:32px}
.fab{backdrop-filter:blur(6px)}

/* ---------- reveal (jače) ---------- */
.rv{transform:translateY(40px) scale(.98);transition:opacity 1s var(--ease-o),transform 1.1s var(--ease-o);transition-delay:var(--d,0s)}
.rv.in{transform:none}

/* ==========================================================================
   Mobilno
   ========================================================================== */
@media (max-width:900px){
  .cine{height:600vh}
  .cw{font-size:min(30vw,22vh)}
  .cw-l{left:4vw;top:25%;transform:translateY(-50%)}
  .cw-r{right:4vw;top:auto;bottom:34%;transform:translateY(50%)}
  .cx{width:min(128vw,70vh);margin:calc(min(128vw,70vh)*-.345) 0 0 calc(min(128vw,70vh)*-.5);top:47%}
  .cine-ring{top:15vh;width:84px}
  .cine-prog{top:84px}
  .cine-cap{bottom:max(2.2vh,14px);left:12px;right:12px;width:auto;padding:16px 18px 18px}
  .cine-cap h1{font-size:clamp(1.55rem,7vw,2.2rem)}
  .cine-cap p{font-size:.88rem}
  .cine-meta{display:none}
  .cine-scroll{display:none}
  .rack{height:360vh}
  .rack-head{padding-top:84px}
  .rk{width:68vw;height:46vh}
  .rk-n{font-size:5.5rem}
}
@media (prefers-reduced-motion:reduce){
  .cine-grain,.cine-ring .rot,.cine-scroll i{animation:none}
  .pre{display:none}
}