.podnozje{
  --p-vis:max(560px,min(max(100vh,700px),62.5vw));
  --p-vu:min(1vw,calc(1.8 * max(1vh,7px)));
  --p-cu:calc(var(--p-vu) / 14.4);
  --p-panel-w:clamp(272px,21.5vw,392px);
  --p-dohvat:calc(16px + var(--p-panel-w) + 40px);
  --p-lim-h:calc(var(--p-vis) * .9);
  --p-lim-w:calc(var(--p-lim-h) * .4094);
  --p-lim-x:max(6vw,80px);
  --p-omjer:4.25;
  --p-fade:.8s;
  --p-tamna:#120a22;
  position:relative;z-index:26;display:block;width:100%;height:var(--p-vis);
  color:var(--tekst);background:var(--p-tamna)}
@supports (height:100svh){.podnozje{--p-vis:max(560px,min(max(100svh,700px),62.5vw))}}

.podnozje__polje{position:absolute;inset:0;z-index:0;overflow:hidden;clip-path:inset(0);pointer-events:none}
.podnozje__koza{position:fixed;inset:0;background-color:var(--p-tamna);
  background-image:url("../../media/podnozje-koza.webp"),
    radial-gradient(64% 58% at 50% 40%,#2c1754 0%,#1b0f35 48%,#110920 78%,#0d0619 100%);
  background-size:512px 512px,100% 100%;background-blend-mode:overlay,normal}
.podnozje__svjetlo{position:fixed;top:0;bottom:0;left:-7vw;right:-7vw;will-change:transform;
  background:
    radial-gradient(38% 50% at 50% 30%,rgba(214,196,255,.95) 0%,rgba(150,104,248,.5) 42%,rgba(124,58,237,0) 72%),
    radial-gradient(34% 44% at 16% 88%,rgba(124,58,237,.55) 0%,rgba(124,58,237,0) 70%),
    radial-gradient(30% 40% at 86% 70%,rgba(167,139,250,.4) 0%,rgba(167,139,250,0) 70%);
  mix-blend-mode:soft-light;opacity:.35;transition:opacity var(--p-fade) var(--e-editorial)}
.podnozje.tamno .podnozje__svjetlo{opacity:.9}

.podnozje__magla{position:absolute;left:0;right:0;bottom:100%;height:min(72vh,660px);pointer-events:none;
  background:linear-gradient(180deg,rgba(11,6,20,0) 0%,rgba(11,6,20,.42) 46%,rgba(16,8,30,.9) 86%,rgba(18,10,34,.97) 100%);
  opacity:0;transition:opacity var(--p-fade) var(--e-editorial)}
.podnozje.tamno .podnozje__magla{opacity:1}

body:has(.galerija .gal-noc) .podnozje__magla{display:none}

@media (min-width:900px){
  .vrh .znak{transition:opacity .5s var(--e-editorial),visibility 0s linear 0s}
  html.dno-tamno:not(.meni-otvoren) .vrh .znak{opacity:0;visibility:hidden;transition:opacity .5s var(--e-editorial),visibility 0s linear .5s}
}

.podnozje__zastor{display:none;position:fixed;top:-10%;bottom:-10%;left:0;right:0;pointer-events:none;
  background-color:var(--p-tamna);background-image:url("../../media/podnozje-koza.webp");background-size:340px 340px;background-blend-mode:overlay;
  opacity:0;visibility:hidden;transition:opacity var(--p-fade) var(--e-editorial),visibility 0s var(--p-fade)}

.podnozje__traka{position:absolute;left:0;right:0;bottom:24px;height:96px;z-index:4;display:flex;align-items:center;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
@media (min-width:900px){.podnozje__traka{left:calc(var(--p-dohvat) - 16px)}}
.podnozje__traka-niz{display:flex;flex:none;width:max-content;animation:podnozje-traka 80s linear infinite}
.podnozje.ceka:not(.traka-ide) .podnozje__traka-niz{animation-play-state:paused}
.podnozje__traka-grupa{display:flex;flex:none;align-items:center}
.podnozje__traka span{display:inline-flex;align-items:center;flex:none;margin-right:clamp(56px,6.5vw,130px);
  font:500 15px/1 "Plex Mono",monospace;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:rgba(196,181,253,.46)}
.podnozje__traka span::before{content:"";flex:none;width:5px;height:5px;margin-right:18px;background:var(--zlatna);opacity:.62;transform:rotate(45deg)}
@keyframes podnozje-traka{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.podnozje__limenka{position:absolute;z-index:6;right:var(--p-lim-x);bottom:0;width:var(--p-lim-w);height:var(--p-lim-h);pointer-events:none}
.podnozje__limenka img{position:relative;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.podnozje__limenka::before{content:"";position:absolute;left:4%;right:4%;bottom:-1.5%;height:7%;
  background:radial-gradient(closest-side,rgba(4,1,10,.7),rgba(4,1,10,0))}

.podnozje__sredina{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;pointer-events:none}
.podnozje__poziv{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:auto;
  padding-bottom:min(132px,calc(132 * var(--p-cu)))}
.podnozje.ceka .podnozje__poziv{opacity:0;transition:opacity var(--p-fade) var(--e-editorial)}
.podnozje.ceka.otkriveno .podnozje__poziv{opacity:1}

.podnozje__potpis{--p:1;padding:.08em .34em .16em;white-space:nowrap;
  font:400 min(64px,calc(64 * var(--p-cu)))/1.2 "Pinyon Script",cursive;color:var(--ljubicasta-svijetla);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p) * 110% - 10%),transparent calc(var(--p) * 110%));
          mask-image:linear-gradient(90deg,#000 calc(var(--p) * 110% - 10%),transparent calc(var(--p) * 110%))}
.podnozje__potpis span{display:block}

.podnozje__naslov{
  --p-naslov:min(clamp(44px,calc(9.8583 * var(--p-vu)),236px),
    max(56px,calc((100vw - 2 * var(--p-dohvat)) / var(--p-omjer))),
    max(44px,calc((100vw - 2 * var(--p-lim-x) - 2 * var(--p-lim-w) - 56px) / var(--p-omjer))));
  margin-top:min(14px,calc(14 * var(--p-cu)));
  font:700 var(--p-naslov)/.88 "Antonio",sans-serif;letter-spacing:.004em;text-transform:uppercase;color:var(--tekst)}
.podnozje__red{position:relative;display:block;width:fit-content;margin-inline:auto;white-space:nowrap}
.podnozje__puno{position:relative;display:block}
.podnozje__duh{position:absolute;inset:0;display:block;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;
  color:transparent;background-image:radial-gradient(circle at 50% 50%,rgba(239,234,255,.92) 0 1.05px,rgba(239,234,255,0) 1.5px);
  background-size:4px 4px;-webkit-background-clip:text;background-clip:text}

.podnozje__dugme{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  margin-top:min(46px,calc(46 * var(--p-cu)));padding:clamp(20px,calc(30 * var(--p-cu)),30px) clamp(48px,calc(78 * var(--p-cu)),78px);
  border-radius:999px;background:var(--zlatna);color:var(--noc);
  font:700 clamp(18px,calc(24 * var(--p-cu)),24px)/.8 "Antonio",sans-serif;letter-spacing:.07em;text-transform:uppercase;
  transition:scale .2s var(--e-ui),box-shadow .2s var(--e-ui),color .2s var(--e-ui);-webkit-tap-highlight-color:transparent}
.podnozje__dugme-fill{position:absolute;z-index:-1;left:-15%;right:-15%;top:-40%;bottom:0;background:var(--lavanda);
  border-radius:50% 50% 0 0/42% 42% 0 0;transform:translateY(calc(100% + 1px));transition:transform .2s var(--e-ui)}
.podnozje__dugme-tekst{position:relative;display:inline-block;white-space:nowrap;translate:0 .04em;
  transition:scale .32s cubic-bezier(.34,1.56,.64,1),color .2s var(--e-ui)}
.podnozje__dugme:focus-visible{outline-offset:6px}
.podnozje__dugme:active{scale:1.06}
@media (hover:hover){
  .podnozje__dugme:hover{scale:1.12;box-shadow:0 12px 34px -12px rgba(124,58,237,.6)}
  .podnozje__dugme:hover .podnozje__dugme-fill{transform:translateY(0)}
  .podnozje__dugme:hover .podnozje__dugme-tekst{scale:.82}
}
.podnozje__dugme:focus-visible .podnozje__dugme-fill{transform:translateY(0)}

.podnozje__autor{font:400 12px/1.6 "Plex Mono",monospace;letter-spacing:.04em;color:var(--tekst-2);opacity:.72}
.podnozje__autor--mob{display:none}

.podnozje__panel{position:absolute;z-index:10;top:16px;bottom:16px;left:16px;width:var(--p-panel-w)}
.podnozje__panel-povrsina{position:absolute;inset:0;border-radius:16px;background:rgba(66,48,98,.38);
  -webkit-backdrop-filter:blur(54px);backdrop-filter:blur(54px)}
.podnozje__panel-sadrzaj{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;
  gap:min(32px,4vh);padding:min(calc(var(--p-panel-w) * .085),3.9vh) calc(var(--p-panel-w) * .085)}
.podnozje__znak{display:block;width:fit-content;color:rgba(239,234,255,.74);transition:scale .3s ease-out;transform-origin:0 50%}
.podnozje__znak svg{width:auto;height:min(clamp(38px,calc(var(--p-panel-w) * .13),52px),6vh)}
@media (hover:hover){.podnozje__znak:hover{scale:1.1}}
.podnozje__znak:active{scale:1.05}
.podnozje__znak:focus-visible{opacity:1!important}
.podnozje__meni{display:flex;flex-direction:column;gap:min(18px,2.4vh)}
.podnozje__veza{display:block;width:fit-content;margin-block:-6px;padding-block:6px;
  font:500 min(clamp(26px,2.15vw,34px),calc((var(--p-vis) - 32px) * .044))/1.08 "Satoshi",sans-serif;letter-spacing:-.01em;color:var(--tekst)}
.podnozje__veza-dizanje{position:relative;display:block;transition:transform .38s var(--e-reveal)}
.podnozje__veza-zlato{position:absolute;inset:0;color:var(--zlatna);pointer-events:none;
  clip-path:polygon(0 -15%,0 -15%,-18% 115%,0 115%);transition:clip-path .38s var(--e-reveal)}
.podnozje__veza:focus-visible .podnozje__veza-dizanje{transform:translateY(-2px)}
.podnozje__veza:focus-visible .podnozje__veza-zlato{clip-path:polygon(0 -15%,118% -15%,100% 115%,0 115%)}
@media (hover:hover){
  .podnozje__veza:hover .podnozje__veza-dizanje{transform:translateY(-2px)}
  .podnozje__veza:hover .podnozje__veza-zlato{clip-path:polygon(0 -15%,118% -15%,100% 115%,0 115%)}
}
.podnozje__dno{padding-top:16px;border-top:1px solid rgba(239,234,255,.2)}

@media (max-width:899px){
  .podnozje{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
    padding:56px 24px 104px;overflow:hidden}

  .podnozje__polje{clip-path:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
  .podnozje__koza,.podnozje__svjetlo{position:absolute}
  .podnozje__koza{background-size:340px 340px,100% 100%;
    background-image:url("../../media/podnozje-koza.webp"),radial-gradient(90% 60% at 40% 46%,#2a1652 0%,#1a0e33 50%,#100820 100%)}
  .podnozje__svjetlo{top:-10%;bottom:-10%}
  .podnozje__magla,.podnozje__panel,.podnozje__dno{display:none}
  .podnozje__zastor{display:block}
  .podnozje.tamno .podnozje__zastor{opacity:1;visibility:visible;transition-delay:0s}

  .podnozje__traka{bottom:20px;height:56px}
  .podnozje__traka span{font-size:12px;letter-spacing:.2em;margin-right:44px}
  .podnozje__traka span::before{width:4px;height:4px;margin-right:12px}

  .podnozje__limenka{right:12px;bottom:84px;height:min(50vh,440px);width:auto;aspect-ratio:655/1600}
  @supports (height:100svh){.podnozje__limenka{height:min(50svh,440px)}}

  .podnozje__sredina{position:relative;inset:auto;display:block;z-index:7}
  .podnozje__poziv{align-items:flex-start;text-align:left;padding-bottom:0}
  .podnozje__poziv::before{content:"";position:absolute;z-index:-1;left:-80px;right:-80px;top:-48px;bottom:-48px;pointer-events:none;
    background:radial-gradient(58% 56% at 38% 58%,rgba(18,10,34,.9) 0%,rgba(18,10,34,.62) 36%,rgba(18,10,34,.22) 60%,rgba(18,10,34,0) 78%)}
  .podnozje__potpis{margin-left:-.34em;font-size:40px}
  .podnozje__naslov{--p-naslov:min(20vw,132px);max-width:64%;margin-top:6px;line-height:.9;text-wrap:balance}
  .podnozje__red{margin-inline:0;white-space:normal}
  .podnozje__dugme{margin-top:28px;padding:22px 52px;font-size:20px}
  .podnozje__autor--mob{display:block;margin-top:22px;font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  .podnozje{--p-fade:0s}
  .podnozje__traka-niz{animation:none}
  .podnozje__dugme,.podnozje__dugme-fill,.podnozje__dugme-tekst,.podnozje__veza-dizanje,.podnozje__veza-zlato,.podnozje__znak{transition:none}
}