/* ===== Gibanje (motion) – samo prva stran ===== */

/* Napredek branja – tanka rdeča črta pod glavo */
.st-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:#EC1C24;transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:2;pointer-events:none}

/* Radio: ekvalizator, ko predvaja */
.st-eq{display:none;align-items:flex-end;gap:2px;height:12px;flex-shrink:0}
.st-eq i{display:block;width:3px;background:#EC1C24;border-radius:1px;animation:st-eq 1s ease-in-out infinite}
.st-eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
.st-eq i:nth-child(3){animation-duration:1.2s;animation-delay:-.6s}
.st-eq i:nth-child(4){animation-duration:.85s;animation-delay:-.1s}
@keyframes st-eq{0%,100%{height:3px}50%{height:12px}}
.st-radio-pill.st-on .st-radio-dot{display:none}
.st-radio-pill.st-on .st-eq{display:flex}

/* 360° – štetje in rdeča črta pod napisom */
.st-360-num{font-variant-numeric:tabular-nums}
.st-360-claim{position:relative;padding-bottom:14px}
.st-360-claim:after{content:'';position:absolute;left:50%;bottom:0;width:64px;height:2px;margin-left:-32px;background:#EC1C24;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.65,0,.35,1) 1.2s}
.st-360-sec.st-go .st-360-claim:after{transform:scaleX(1)}

/* Tekoči trak (marquee) */
.st-mq{background:#231F20;color:#fff;overflow:hidden;white-space:nowrap;border-top:1px solid #231F20;padding:18px 0;position:relative}
.st-mq-track{display:inline-flex;will-change:transform}
.st-mq-item{font-family:Frontage,'Bebas Neue',sans-serif;font-size:clamp(28px,4vw,54px);line-height:1;letter-spacing:.04em;text-transform:uppercase;padding:0 .5em;display:inline-flex;align-items:center;gap:.5em}
.st-mq-item:after{content:'✦';color:#EC1C24;font-size:.5em}
.st-mq-item.st-mq-out{color:transparent;-webkit-text-stroke:1px #fff}

/* Pojavljanje ob drsenju */
.st-rv{opacity:0;transform:translateY(90px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.st-rv.st-in{opacity:1;transform:none}
/* po pojavu: hitri prehodi za hover */
.st-rv.st-done{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
/* fotografije se »odgrnejo« od spodaj navzgor */
.st-rv .st-art-photo,.st-rv .st-shop-img,.st-rv .st-yt{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s cubic-bezier(.77,0,.18,1);transition-delay:calc(var(--d,0s) + .1s)}
.st-rv.st-in .st-art-photo,.st-rv.st-in .st-shop-img,.st-rv.st-in .st-yt{clip-path:inset(0 0 0 0)}
.st-hero-h.st-rv{transform:translateY(60px) skewY(3deg);transform-origin:0 100%}
.st-hero-h.st-rv.st-in{transform:none}

/* Dosežki: paralaksa fotografij */
.st-pl-img{scale:1.14;translate:0 var(--py,0px);will-change:translate}

/* Izvajalci: nagib + odsev */
.st-art-card{transform-style:preserve-3d}
.st-art-card .st-art-photo{position:relative;overflow:hidden}
.st-art-card .st-art-photo:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 55%);opacity:0;transition:opacity .4s}
.st-art-card:hover .st-art-photo:after{opacity:1}
.st-art-card.st-tilt{transition:transform .15s ease-out,box-shadow .5s}

/* Trgovina: dvig ob prehodu */
.st-shop-item{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.st-shop-img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.st-shop-item{overflow:visible}
.st-shop-item:hover{transform:translateY(-6px)}
.st-shop-item:hover .st-shop-img{transform:scale(1.03)}

/* Gumb s »magnetom« */
.st-mag{transition:transform .3s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion: reduce){
  .st-rv{opacity:1!important;transform:none!important;transition:none!important}
  .st-rv .st-art-photo,.st-rv .st-shop-img,.st-rv .st-yt{clip-path:none!important}
  .st-pl-img{translate:none!important;scale:1}
  .st-eq i{animation:none}
  .st-360-claim:after{transition:none;transform:none}
}

/* ===================== Nova struktura prve strani ===================== */
.st-btn{display:inline-flex;align-items:center;gap:.6em;padding:16px 26px;border-radius:999px;font-family:Frontage,sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s,border-color .3s,transform .3s;border:1px solid currentColor;line-height:1.2}
.st-btn-dark{background:#231F20;color:#fff;border-color:#231F20}
.st-btn-dark:hover{background:#EC1C24;border-color:#EC1C24}
.st-btn-line{color:#231F20}
.st-btn-line:hover{background:#231F20;color:#fff}
.st-btn-light{background:#fff;color:#231F20;border-color:#fff}
.st-btn-light:hover{background:#231F20;color:#fff}

/* Plavajoči gumb */
.st-fab{position:fixed;right:24px;bottom:24px;z-index:55;width:96px;height:96px;border-radius:50%;background:#231F20;color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 10px 30px rgba(35,31,32,.25);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .4s,background .3s}
.st-fab svg{position:absolute;inset:0;width:100%;height:100%;animation:st-spin 14s linear infinite;fill:#fff;font-family:Frontage,sans-serif;font-size:10.5px;letter-spacing:2.2px}
.st-fab-i{font-size:22px;line-height:1}
.st-fab:hover{background:#EC1C24;transform:scale(1.08)}
.st-fab.st-hide{opacity:0;transform:scale(.6);pointer-events:none}
@keyframes st-spin{to{transform:rotate(360deg)}}

@media (max-width:991px){
  .st-sv-grid{grid-template-columns:repeat(2,1fr)}
  .st-sv-item:nth-child(2){border-right:0}
  .st-sv-item:nth-child(-n+2){border-bottom:1px solid #E4E4E6}
}
@media (max-width:767px){
  .st-intro{padding:36px 0 44px}
  .st-intro-logo{width:130px;margin-bottom:20px}
  .st-sv-sec,.st-pt-sec,.st-cta-sec{padding:72px 0}
  .st-sv-grid{grid-template-columns:1fr}
  .st-sv-item{border-right:0!important;border-bottom:1px solid #E4E4E6;padding:26px 4px}
  .st-fab{width:72px;height:72px;right:14px;bottom:14px}
  .st-fab svg{font-size:13px}
  .st-wall{margin-top:40px;gap:10px}
  .st-wall-track{gap:10px}
}
@media (prefers-reduced-motion: reduce){
  .st-wall-track,.st-fab svg{animation:none}
}

/* popravek: kartice dosežkov na telefonu ne smejo biti širše od zaslona */
.st-pl-items .w-dyn-items{grid-template-columns:minmax(0,1fr)!important}
.st-pl-items .w-dyn-item,.st-pl-item{min-width:0;max-width:100%}
.st-pl-big{overflow-wrap:break-word}
@media (max-width:767px){.st-pl-big{font-size:clamp(40px,13vw,64px)!important}}
@media (max-width:767px){
  .st-pl-more{max-width:calc(100vw - 48px);white-space:normal;text-align:center;box-sizing:border-box}
  .st-cta-h{font-size:clamp(56px,17vw,120px)}
  .st-pt-list li{font-size:clamp(24px,7vw,34px)}
  .st-shop-list{display:grid!important;grid-template-columns:1fr 1fr!important;gap:28px 14px!important}
  .st-shop-name{font-size:15px!important}
  .st-shop-row{flex-direction:column;align-items:flex-start!important;gap:8px}
}

/* ===================== Uvod (parallax) ===================== */
.st-btn-ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.st-btn-ghost:hover{background:#fff;color:#231F20;border-color:#fff}
.st-hx{position:relative;height:calc(100svh - 64px);min-height:560px;overflow:hidden;background:#231F20;color:#fff;display:flex;align-items:center}
.st-hx-bg{position:absolute;inset:-12% 0 -12% 0;background-size:cover;background-position:50% 50%;transform:translate3d(0,var(--hy,0px),0) scale(var(--hs,1.08));will-change:transform}
.st-hx-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,31,32,.35) 0%,rgba(35,31,32,.55) 55%,rgba(35,31,32,.92) 100%)}
.st-hx-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;transform:translate3d(0,var(--ty,0px),0);opacity:var(--to,1);will-change:transform,opacity}
.st-hx-logo{width:160px;height:auto;margin-bottom:26px}
.st-hx-h{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(60px,10vw,168px);line-height:.86;margin:0;max-width:11ch;text-transform:uppercase;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.st-hx-p{font-family:Antonio,sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(15px,1.4vw,19px);line-height:1.5;max-width:600px;margin:24px 0 0;color:rgba(255,255,255,.85)}
.st-hx-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.st-hx-down{position:absolute;left:50%;bottom:26px;z-index:2;width:26px;height:42px;margin-left:-13px;border:1.5px solid rgba(255,255,255,.7);border-radius:14px}
.st-hx-down span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:st-down 1.8s ease-in-out infinite}
@keyframes st-down{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}
/* vstopna animacija */
.st-hx-in>*{opacity:0;transform:translateY(40px);animation:st-hx-in 1.2s cubic-bezier(.16,1,.3,1) forwards}
.st-hx-in>*:nth-child(2){animation-delay:.12s}.st-hx-in>*:nth-child(3){animation-delay:.24s}.st-hx-in>*:nth-child(4){animation-delay:.36s}
@keyframes st-hx-in{to{opacity:1;transform:none}}
.st-hx-bg{animation:st-hx-zoom 2.4s cubic-bezier(.16,1,.3,1) both}
@keyframes st-hx-zoom{from{filter:brightness(.3)}to{filter:none}}

/* ===================== Kaj delamo: zložljive kartice ===================== */
.st-sx{position:relative;background:#231F20}
.st-sx-label{position:sticky;top:64px;z-index:6;height:0;pointer-events:none}
.st-sx-label span{position:absolute;left:24px;top:18px;font-family:Frontage,sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:#fff;opacity:.75}
.st-sx-card{position:sticky;top:64px;height:calc(100svh - 64px);min-height:520px;max-height:900px;scroll-margin-top:64px}
.st-sx-inner{position:relative;height:100%;overflow:hidden;color:#fff;display:flex;align-items:flex-end;transform:scale(var(--cs,1));transform-origin:50% 0;filter:brightness(var(--cb,1));will-change:transform,filter;border-radius:calc(var(--cr,0) * 1px)}
.st-sx-img{position:absolute;inset:-10% 0;background-size:cover;transform:translate3d(0,var(--iy,0px),0) scale(1.06);will-change:transform}
.st-sx-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(35,31,32,.85) 0%,rgba(35,31,32,.55) 45%,rgba(35,31,32,.1) 100%),linear-gradient(0deg,rgba(35,31,32,.6),transparent 50%)}
.st-sx-content{position:relative;z-index:2;padding-bottom:clamp(48px,9vh,96px);display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:1200px}
.st-sx-num{font-family:Frontage,sans-serif;font-size:13px;letter-spacing:4px;color:#EC1C24}
.st-sx-num i{font-style:normal;color:rgba(255,255,255,.5)}
.st-sx-t{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(56px,9vw,150px);line-height:.86;margin:0;max-width:10ch;text-transform:uppercase}
.st-sx-p{font-size:clamp(15px,1.25vw,18px);line-height:1.6;max-width:480px;margin:0;color:rgba(255,255,255,.88)}
.st-sx-content .st-btn{margin-top:6px}
/* besedilo kartice zdrsne noter, ko kartica pride na vrsto */
.st-sx-content>*{transform:translateY(calc(var(--cin,0) * 50px));opacity:calc(1 - var(--cin,0));transition:none}
.st-sx-content>*:nth-child(2){transform:translateY(calc(var(--cin,0) * 80px))}
.st-sx-content>*:nth-child(3){transform:translateY(calc(var(--cin,0) * 110px))}
.st-sx-content>*:nth-child(4){transform:translateY(calc(var(--cin,0) * 140px))}

/* ===================== Sodelovali smo z – diskretno na dnu ===================== */
.st-ptx{background:#fff;border-top:1px solid #E4E4E6;padding:28px 0}
.st-ptx-in{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;justify-content:center;text-align:center}
.st-ptx-k{font-family:Frontage,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#9a9597}
.st-ptx-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0}
.st-ptx-list li{font-family:Antonio,sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#6b6667}
.st-ptx-list li:not(:last-child):after{content:'·';margin:0 .7em;color:#c9c5c6}

@media (max-width:767px){
  .st-hx{min-height:520px}
  .st-hx-logo{width:120px;margin-bottom:18px}
  .st-sx-card{height:calc(100svh - 64px);min-height:480px}
  .st-sx-shade{background:linear-gradient(0deg,rgba(35,31,32,.92) 0%,rgba(35,31,32,.55) 55%,rgba(35,31,32,.2) 100%)}
  .st-sx-label span{left:16px}
}
@media (prefers-reduced-motion: reduce){
  .st-hx-bg,.st-hx-in>*{animation:none;opacity:1;transform:none}
  .st-hx-in,.st-sx-inner,.st-sx-img{transform:none!important;filter:none!important;opacity:1!important}
  .st-sx-content>*{transform:none!important;opacity:1!important}
  .st-hx-down span{animation:none}
}