/*
Theme Name: Storm Motion
Theme URI: https://stormmotion.rs
Description: Storm Motion Production Company — cinematic portfolio theme
Version: 1.0
Author: Storm Motion
Text Domain: stormmotion
*/

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#06070c;--bg2:#0b0d15;--surf:#10121a;
  --c1:#e8f4ff;--c2:#8090b0;
  --acc:#3b9eff;--acc2:#ff4d6d;--acc3:#7dd3fc;
  --dim:#3a4255;--brd:rgba(255,255,255,.05);--brd2:rgba(59,158,255,.18);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--c1);font-family:'DM Sans',sans-serif;overflow-x:hidden;cursor:none}
::selection{background:var(--acc);color:#000}

/* grain */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.022;pointer-events:none;z-index:9990;animation:gr .8s steps(2) infinite}
@keyframes gr{0%{transform:translate(0,0)}50%{transform:translate(-1%,2%)}100%{transform:translate(1%,-1%)}}

/* cursor */
#cur{position:fixed;width:12px;height:12px;background:var(--acc);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .15s;mix-blend-mode:screen;box-shadow:0 0 8px rgba(59,158,255,.8)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:500;padding:18px 52px;display:flex;align-items:center;justify-content:space-between;transition:background .4s}
nav.sc{background:rgba(6,7,12,.9);backdrop-filter:blur(16px)}
.nl{display:flex;flex-direction:row;align-items:center;gap:12px;text-decoration:none;line-height:1}
.nl-logo{height:36px;width:auto;display:block;object-fit:contain}
.nl-text{display:flex;flex-direction:column;gap:3px}
.nl-m{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:4px;color:#fff;line-height:1}
.nl-s{font-family:'Syne',sans-serif;font-size:8px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--dim);line-height:1}
.nr{display:flex;align-items:center;gap:32px}
.nls{display:flex;gap:28px}
.nls a{font-family:'Syne',sans-serif;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .2s;position:relative}
.nls a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nls a:hover{color:var(--c1)}.nls a:hover::after{transform:scaleX(1)}
.lsw{display:flex;gap:3px}
.lb{font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;padding:5px 8px;border:1px solid transparent;background:none;color:var(--dim);cursor:none;transition:all .2s}
.lb.act{border-color:var(--acc);color:var(--acc)}.lb:hover:not(.act){color:var(--c1)}

/* Hero video aspect ratio — 2.35:1 letterbox                                    */
/* strip = visina crne trake gore/dole = (100vh - 100vw/2.35) / 2               */
.hero.ar-wide{--strip:max(0px, calc((100vh - 100vw / 2.35) / 2))}

/* Naslov: ostaje u video zoni, levo poravnat, manji font */
.hero.ar-wide .hcenter{
  top:auto;
  bottom:calc(var(--strip) + clamp(40px,6vw,80px));
  left:clamp(22px,3vw,44px);
  right:clamp(22px,3vw,44px);
}
.hero.ar-wide .ht{font-size:clamp(44px,6.5vw,110px)}

/* Footer: odmah iznad donje ivice videa, sa oba elementa */
.hero.ar-wide .hfooter{
  bottom:calc(var(--strip) + 20px);
  left:clamp(22px,3vw,44px);
  right:clamp(22px,3vw,44px);
  align-items:flex-end;
}
.hero.ar-wide .hd{font-size:12px;max-width:280px;line-height:1.6}
.hero.ar-wide .bm{padding:11px 22px;font-size:10px}
.hero.ar-wide .bg{font-size:10px}

.hero.ar-square .hcenter{padding:0 clamp(22px,4vw,52px)}
.hero.ar-square .ht{font-size:clamp(60px,10vw,160px)}
.hero.ar-classic .hcenter{padding:0 clamp(22px,4vw,52px)}
.hero.ar-classic .ht{font-size:clamp(70px,11vw,175px)}
.hero{position:relative;height:100vh;min-height:600px;overflow:hidden}

/* video background */
.hvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero.ar-wide .hvid{object-fit:contain;background:#000}
.hbg{position:absolute;inset:0;background:radial-gradient(ellipse 130% 80% at 65% 40%,#0c1428 0%,#06070c 65%);z-index:1}
.hbg-vid{background:linear-gradient(to bottom,rgba(6,7,12,.4) 0%,rgba(6,7,12,.15) 40%,rgba(6,7,12,.55) 100%)}
.hlines{position:absolute;inset:0;overflow:hidden;z-index:2}
.hl{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(59,158,255,.035),transparent)}

/* eyebrow iznad naslova */
.heyebrow{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:20px;width:100%;animation:slin .7s ease .1s both}
.heb-t{font-family:'Syne',sans-serif;font-size:11px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--acc)}
.heb-l{height:1px;width:48px;background:linear-gradient(90deg,var(--acc),transparent);animation:expL .7s ease .25s both}

/* big title — left aligned, full width */
.hcenter{position:absolute;left:clamp(22px,4vw,52px) !important;right:clamp(22px,4vw,52px);bottom:clamp(120px,18vw,220px);z-index:3;text-align:left}
.htitle-wrap{display:block;text-align:left}
.ht{font-family:'Bebas Neue',sans-serif;font-size:clamp(80px,12vw,190px);line-height:.875;letter-spacing:-1px;width:100%}

/* bottom bar — desc left, CTAs right */
.hfooter{position:absolute;bottom:clamp(48px,6vw,80px);left:clamp(22px,4vw,52px);right:clamp(22px,4vw,52px);z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;animation:fdu .8s ease .6s both}

@keyframes slin{from{transform:translateX(-16px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes expL{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.htl{display:block;animation:trv .85s cubic-bezier(.16,1,.3,1) both}
.htl:nth-child(1){animation-delay:.15s}
.htl:nth-child(2){animation-delay:.28s;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22)}
.htl:nth-child(3){animation-delay:.42s}
.htl .ac{color:var(--acc);-webkit-text-stroke:0}
@keyframes trv{from{transform:translateY(110%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fdu{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
.hd{font-size:15px;font-weight:300;color:var(--c2);max-width:380px;line-height:1.7}
.hctas{display:flex;flex-direction:row;align-items:center;gap:18px;flex-shrink:0}
.bm{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;background:var(--acc);color:#000;font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:all .22s}
.bm:hover{background:var(--acc3);transform:translateY(-2px)}
.bg{display:inline-flex;align-items:center;gap:8px;font-family:'Syne',sans-serif;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--c2);text-decoration:none;transition:color .2s;border-bottom:1px solid var(--brd);padding-bottom:2px}
.bg:hover{color:var(--c1);border-bottom-color:var(--c1)}
.hscr{position:absolute;right:52px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px}
.hscr-n{font-family:'Syne',sans-serif;font-size:9px;font-weight:600;letter-spacing:2px;color:var(--dim);writing-mode:vertical-lr}
.hscr-b{width:1px;height:52px;background:linear-gradient(var(--acc),transparent);animation:bp 2s ease-in-out infinite}
@keyframes bp{0%,100%{opacity:.35;transform:scaleY(1)}50%{opacity:1;transform:scaleY(.65)}}

/* marquee */
.mq{border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);overflow:hidden;padding:13px 0;background:var(--bg2)}
.mqt{display:flex;animation:mqa 22s linear infinite;width:max-content}
.mqt:hover{animation-play-state:paused}
.mqi{display:flex;align-items:center;gap:28px;padding:0 36px;white-space:nowrap;font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--dim)}
.mqd{width:4px;height:4px;border-radius:50%;background:var(--acc);flex-shrink:0}
@keyframes mqa{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* sections shared */
.sec{padding:90px 52px}

/* section header */
.sh{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:52px}
.lbl{font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.hdg{font-family:'Bebas Neue',sans-serif;font-size:clamp(38px,4.5vw,68px);line-height:1;letter-spacing:.5px}
.hdg .sk{color:transparent;-webkit-text-stroke:1px var(--dim)}
.va{font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--dim);text-decoration:none;border-bottom:1px solid var(--brd);padding-bottom:2px;transition:all .2s}
.va:hover{color:var(--acc);border-bottom-color:var(--acc)}

/* reel */
.rf{position:relative;aspect-ratio:2.39/1;background:var(--bg2);overflow:hidden}
.rfp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.rfl{position:absolute;top:14px;left:14px;font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:3px;color:rgba(255,255,255,.18)}
.rfy{position:absolute;top:14px;right:14px;font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:3px;color:rgba(255,255,255,.18)}
.rfc{width:72px;height:72px;border:1px solid rgba(59,158,255,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s;position:relative;cursor:none}
.rfc::before{content:'';position:absolute;inset:-10px;border:1px solid rgba(59,158,255,.1);border-radius:50%;animation:rip 2.5s ease-in-out infinite}
@keyframes rip{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.08);opacity:.9}}
.rfc:hover{border-color:var(--acc);background:rgba(59,158,255,.07)}
.rfc svg{fill:var(--acc);margin-left:4px}
.rftx{font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.22)}
.rfb{position:absolute;inset:14px;border:1px solid rgba(255,255,255,.04);pointer-events:none}

/* projects */
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--brd)}
.pi{position:relative;overflow:hidden;background:var(--bg2);cursor:none;aspect-ratio:16/9}
.pb{position:absolute;inset:0;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pi:hover .pb{transform:scale(1.05)}
.pc1{background:linear-gradient(135deg,#0c1828,#1a2a42)}
.pc2{background:linear-gradient(135deg,#180c1a,#2a1535)}
.pc3{background:linear-gradient(135deg,#0c180c,#1a2a18)}
.pc4{background:linear-gradient(135deg,#28180c,#3a2212)}
.pc5{background:linear-gradient(135deg,#181810,#2a2812)}
.pc6{background:linear-gradient(135deg,#0c1a1a,#122828)}
.pnum{position:absolute;top:18px;left:18px;font-family:'Bebas Neue',sans-serif;font-size:12px;color:rgba(255,255,255,.12);letter-spacing:2px}
.pov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 55%);transform:translateY(10px);opacity:0;transition:all .38s cubic-bezier(.16,1,.3,1)}
.pi:hover .pov{transform:translateY(0);opacity:1}
.pty{font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:5px}
.pnm{font-family:'Bebas Neue',sans-serif;font-size:clamp(20px,2vw,30px);color:#fff;letter-spacing:.5px;line-height:1}
.pdsc{font-size:11px;color:rgba(255,255,255,.45);margin-top:5px;font-weight:300}
.pl{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.16,1,.3,1)}
.pi:hover .pl{transform:scaleX(1)}

/* what we make */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--brd)}
.ti{background:var(--bg);padding:44px 36px;position:relative;overflow:hidden;transition:background .3s}
.ti:hover{background:var(--surf)}
.ti::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;transform:scaleY(0);transform-origin:bottom;transition:transform .38s cubic-bezier(.16,1,.3,1)}
.ti:nth-child(1)::before{background:var(--acc)}.ti:nth-child(2)::before{background:var(--acc2)}.ti:nth-child(3)::before{background:var(--acc3)}
.ti:hover::before{transform:scaleY(1)}
.tbn{font-family:'Bebas Neue',sans-serif;font-size:88px;color:rgba(255,255,255,.03);line-height:1;position:absolute;top:12px;right:20px;pointer-events:none}
.tid{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.tdt{width:7px;height:7px;border-radius:50%}
.tdt1{background:var(--acc)}.tdt2{background:var(--acc2)}.tdt3{background:var(--acc3)}
.tnm{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:.5px;color:var(--c1);margin-bottom:14px;line-height:1.05}
.tdsc{font-size:14px;color:var(--c2);line-height:1.7;font-weight:300;max-width:270px}
.tex{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.te{font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:4px 11px;border:1px solid var(--brd);color:var(--dim);transition:all .2s}
.ti:hover .te{border-color:var(--brd2);color:var(--c2)}

/* manifesto */
.mf{padding:90px 52px;text-align:center;position:relative;overflow:hidden}
.mfbg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(59,158,255,.04) 0%,transparent 70%)}
.mft{font-family:'Bebas Neue',sans-serif;font-size:clamp(32px,4.5vw,72px);line-height:1.05;letter-spacing:.5px;max-width:860px;margin:0 auto;position:relative;z-index:1}
.mft .dm{color:var(--dim)}.mft .ac{color:var(--acc)}.mft .rd{color:var(--acc2)}

/* contact */
.cs{display:grid;grid-template-columns:5fr 4fr;gap:72px;align-items:start}
.ct{font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,6.5vw,100px);line-height:.88;letter-spacing:.5px;margin-bottom:44px}
.ct span{color:var(--acc);display:block}
.cmt{display:flex;flex-direction:column;gap:24px}
.cml{font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin-bottom:5px}
.cmv{font-size:15px;color:var(--c2);font-weight:300}
.cf{display:flex;flex-direction:column;gap:18px;padding-top:6px}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{display:flex;flex-direction:column;gap:7px}
.fl{font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.fi,.fta{background:var(--surf);border:1px solid var(--brd);border-bottom-color:var(--dim);color:var(--c1);padding:13px 15px;font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color .2s;resize:none;font-weight:300}
.fi:focus,.fta:focus{border-bottom-color:var(--acc)}
.fta{min-height:105px}
.fs{align-self:flex-start;display:flex;align-items:center;gap:11px;padding:15px 32px;background:var(--acc);border:none;color:#000;font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:none;transition:all .22s}
.fs:hover{background:var(--acc3);transform:translateY(-2px)}
.fs svg{transition:transform .2s}.fs:hover svg{transform:translateX(4px)}
.cf-success{display:flex;align-items:center;gap:20px;padding:40px 0}
.cf-success p{font-family:'Syne',sans-serif;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--acc)}

/* footer */
footer{padding:24px 52px;border-top:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between}
.flo{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:4px;color:var(--dim)}
.flo span{color:var(--acc)}
.fco{font-family:'Syne',sans-serif;font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim)}
.fso{display:flex;gap:18px}
.fso a{font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .2s}
.fso a:hover{color:var(--acc)}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* mobile */
@media(max-width:768px){
  .cbar{height:18px}
  nav{padding:10px 22px;top:18px}
  .nls{display:none}
  .hfooter{flex-direction:column;align-items:flex-start;gap:20px;bottom:36px}
  .hctas{flex-direction:column;align-items:flex-start;gap:12px}
  .hscr{display:none}
  .sec,.mf{padding:60px 22px}
  .pg{grid-template-columns:1fr}
  .tg{grid-template-columns:1fr}
  .cs{grid-template-columns:1fr;gap:44px}
  .fr2{grid-template-columns:1fr}
  footer{flex-direction:column;gap:14px;text-align:center;padding:22px}
}

/* video grid */
.pi img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pi:hover img{transform:scale(1.05)}
.sm-has-video{cursor:pointer}

/* lightbox */
#sm-lightbox{display:flex;align-items:center;justify-content:center}

/* contact form */
.cf{display:flex;flex-direction:column;gap:18px;padding-top:6px}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{display:flex;flex-direction:column;gap:7px}
.fl{font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.fi,.fta{background:var(--surf);border:1px solid var(--brd);border-bottom-color:var(--dim);color:var(--c1);padding:13px 15px;font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color .2s;resize:none;font-weight:300}
.fi:focus,.fta:focus{border-bottom-color:var(--acc)}
.fta{min-height:105px}
.fs{align-self:flex-start;display:flex;align-items:center;gap:11px;padding:15px 32px;background:var(--acc);border:none;color:#000;font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .22s}
.fs:hover{background:var(--acc3);transform:translateY(-2px)}

@media(max-width:768px){
  .fr2{grid-template-columns:1fr}
  .cs{grid-template-columns:1fr;gap:44px}
}

/* ── Social links in contact section */
.csoc{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--brd)}
.csoc-l{font-family:'Syne',sans-serif;font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .2s}
.csoc-l:hover{color:var(--acc)}

/* ── Contact heading — two lines, no big gap */
.ct{font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,6.5vw,100px);line-height:.9;letter-spacing:.5px;margin-bottom:36px}
.ct .ct-together{color:var(--acc);display:inline}

/* ── Nav subtitle visible even when logo is active */
.nl-s{display:block}