/* Tuber Funghi: heroj iz klipa. Bela strana, pas na dnu, krug i natpis izlaze posle sletanja. */
@font-face {
  font-family: 'Fraunces'; src: url('/hero/fonts/fraunces-latin-ext-full-normal.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; src: url('/hero/fonts/fraunces-latin-full-normal.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --crna: #140f0a; --zuta: #f1b014; --bela: #fdfdfd;
  --skrol: 1174svh;
  --rub: clamp(18px, 3vw, 44px);
  /* jedan piksel izvornog kadra 1920×1080 na ekranu */
  --u: calc(min(100vw, 100svh * 16 / 9) / 1920);
  --vis-kadra: calc(1080 * var(--u));
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bela); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bela); color: var(--crna);
  font: 400 17px/1.3 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100, 'WONK' 0;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; -webkit-user-drag: none; }
img { -webkit-user-drag: none; user-select: none; }
p, h1 { margin: 0; }

.traka {
  position: fixed; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top)) var(--rub) 0;
}
.ime { white-space: nowrap; font-size: 25px; font-weight: 800; letter-spacing: -0.015em; line-height: 1; }
.traka nav { display: flex; gap: clamp(18px, 2.6vw, 36px); font-size: 17px; font-weight: 500; }
.traka a { transition: color 0.25s; }
.traka.na-zemlji { color: var(--bela); }

.hero { position: relative; height: calc(100svh + var(--skrol)); }
.scena { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--bela); }

.naslov { position: absolute; z-index: 2; inset: clamp(70px, 11svh, 104px) 0 auto; text-align: center; will-change: transform, opacity; }
.naslov h1 {
  font-size: min(9.4vw, 17.5svh); line-height: 0.98; font-weight: 800; letter-spacing: -0.025em; white-space: nowrap;
}
.naslov p { margin-top: 0.42em; font-size: clamp(19px, 3svh, 28px); font-weight: 500; font-style: normal; }
.naslov span { display: inline-block; animation: ulaz 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.naslov p span { animation-delay: 0.14s; }
@keyframes ulaz { from { opacity: 0; transform: translateY(0.14em); } }

.slike { position: absolute; inset: 0; }

/* kadar i delovi znaka stoje u jedinicama izvornog kadra, dno kadra je dno ekrana */
.kadar, .pas-platno, .tegla-platno, .grlo-platno {
  position: absolute; left: 50%; bottom: 0; width: calc(1920 * var(--u)); height: var(--vis-kadra); transform: translateX(-50%);
}
.pas-platno, .tegla-platno, .grlo-platno { display: block; opacity: 0; }
.tegla-platno, .grlo-platno { will-change: transform, opacity; }
.zemlja-platno, .namaz-platno, .mrve-platno { position: absolute; inset: 0; width: 100%; height: 100%; display: block; visibility: hidden; }

/* redovi prolaze iza tegle brzinom skrola, kod ih drži ispod ekrana dok ne dođu na red */
.red {
  position: absolute; inset: 0 var(--rub) auto; text-align: center; transform: translate3d(0, 100svh, 0); will-change: transform;
  font-size: min(9.4vw, 17.5svh); line-height: 0.98; font-weight: 800; letter-spacing: -0.025em;
}
.kadar > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.poster img { width: 100%; height: 100%; object-fit: cover; }
.kadar canvas { opacity: 0; }
.je-spremno .kadar canvas { opacity: 1; }

.krug, .natpis, .pas { position: absolute; left: 50%; }
.krug, .natpis { visibility: hidden; }
.krug {
  width: calc(607.2 * var(--u)); height: calc(607.2 * var(--u)); margin-left: calc(-303.6 * var(--u));
  bottom: calc((1080 - 697.8) * var(--u)); border-radius: 50%; background: var(--zuta); will-change: transform;
  transform: translate3d(0, calc(660 * var(--u)), 0);
}
.natpis {
  width: calc(441.8 * var(--u)); height: auto; margin-left: calc((742.1 - 960) * var(--u));
  bottom: calc((1080 - 416) * var(--u)); will-change: transform; transform: translate3d(0, calc(660 * var(--u)), 0);
}
.pas {
  width: calc(840 * var(--u)); height: calc(690 * var(--u)); margin-left: calc((540 - 960) * var(--u)); bottom: 0; opacity: 0;
}

.savet, .dalje { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); font-size: 17px; font-weight: 500; }
.savet { left: var(--rub); }
.dalje { right: var(--rub); opacity: 0; pointer-events: none; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 1px; color: var(--bela); }
.dalje.na-belom { color: var(--crna); }

/* kad je kadar niži od ekrana, gornja ivica platna ne sme da preseče teglu u vazduhu */
@media (max-aspect-ratio: 16/9) {
  .tegla-platno {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%);
    mask-image: linear-gradient(to bottom, transparent, #000 8%);
  }
}

/* telefon: sredina kadra širine 900 */
@media (max-aspect-ratio: 4/5) {
  :root { --u: calc(100vw / 900); }
  .kadar, .pas-platno, .tegla-platno, .grlo-platno { width: 100vw; }
  .naslov h1 { font-size: 13.4vw; white-space: normal; }
  .red { font-size: 13.4vw; }
  .ime { font-size: 22px; }
  .traka nav { font-size: 15px; gap: 16px; }
  /* na telefonu namaz prolazi ispod menija, pa se meni čita samo na belom */
  .traka::before { content: ''; position: absolute; z-index: -1; inset: 0 0 -22px; background: linear-gradient(var(--bela) 68%, transparent); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
  .traka.preko-namaza::before { opacity: 1; }
  /* na telefonu pas zauzima celu širinu dna, pa tekstovi idu u belo */
  .savet, .dalje { left: 50%; right: auto; transform: translateX(-50%); font-size: 15px; white-space: nowrap; }
  .savet { bottom: calc(620 * var(--u)); }
  .dalje { bottom: max(26px, env(safe-area-inset-bottom)); }
}
@media (max-width: 340px) {
  .traka nav { font-size: 13px; gap: 10px; }
  .ime { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .naslov { display: none; }
  .naslov span { animation: none; }
  .krug, .natpis { transform: none; visibility: visible; }
  .pas, .dalje { opacity: 1; pointer-events: auto; }
  .dalje { color: inherit; }
  .savet, .red, .tegla-platno, .grlo-platno, .zemlja-platno, .namaz-platno, .mrve-platno { display: none; }
}
/* Kraj heroja: ime brenda preko cele širine, iza namaza, i ostatak kadra. Sve je na istom zidu kao kapi. */
.kraj {
  --traka: 64px; --tekst: clamp(26px, 2.7vw, 44px);
  position: absolute; inset: 0; opacity: 0; will-change: transform;
}
/* slika ide od ivice do ivice mastila, a osnovna linija slova je na 85,06 % njene visine */
.kraj-ime {
  --vrh-reda: 40.5svh;
  position: absolute; left: 50%; top: var(--vrh-reda); margin: 0; transform: translate(-50%, -85.06%);
  width: min(100% - 2 * var(--rub), (var(--vrh-reda) - 70px) * 7.47); /* na niskom, širokom ekranu ne sme pod meni */
}
.kraj-ime img { display: block; width: 100%; height: auto; }
.kraj-recenica {
  position: absolute; left: var(--rub); bottom: calc(var(--traka) + 7svh); font-size: var(--tekst); line-height: 1.12; font-weight: 700; letter-spacing: -0.015em;
}
/* pas stoji tačno ispod najduže kapi i gleda je, kao tartuf na početku */
.kraj-pas { position: absolute; left: 50%; bottom: var(--traka); width: min(48.7svh, 32vw); height: auto; transform: translateX(-50%); }
.kraj-tegla { position: absolute; right: var(--rub); bottom: calc(var(--traka) - 0.8svh); width: auto; height: 33svh; }
.kraj-traka {
  position: absolute; inset: auto 0 0; height: var(--traka); padding: 0 var(--rub); display: flex; align-items: center; background: var(--zuta); font-size: 17px; font-weight: 500;
}

/* telefon: logotip u dva reda, kao na njihovom znaku; pas dobije ono što ostane do trake */
@media (max-aspect-ratio: 4/5) {
  .kraj { --traka: 68px; --tekst: clamp(20px, 6.2vw, 30px); --vrh: min(28.5svh, 37.5svh - 76px); --vis-imena: calc((100vw - 2 * var(--rub)) * 0.502); }
  .kraj-ime { left: var(--rub); top: var(--vrh); width: calc(100% - 2 * var(--rub)); transform: none; }
  .kraj-recenica { left: var(--rub); right: var(--rub); top: calc(var(--vrh) + var(--vis-imena) + 16px); bottom: auto; text-align: center; }
  .kraj-pas { width: auto; height: min(66vw, calc(100svh - var(--traka) - var(--vrh) - var(--vis-imena) - 3.36 * var(--tekst) - 32px)); }
  .kraj-traka p, .kraj-tegla { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kraj { display: none; }
}
/* zavesa ka priči: ravna boja prvog sveta (ka-prici.js je postavi po priči, strip ili realno), gornja ivica koso kao ivice između svetova (7°) */
.ka-prici {
  position: fixed; z-index: 60; left: -25vw; top: 0; width: 150vw; height: 170vh; background: #21140c; pointer-events: none;
  transform: translate3d(0, 118vh, 0) rotate(-7deg); transform-origin: 50% 0;
  transition: transform 0.64s cubic-bezier(0.62, 0, 0.22, 1);
}
.ka-prici::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 26vh;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); /* ista blaga senka kao uz ivicu na strani priče */
}
.ka-prici.ide { transform: translate3d(0, -24vh, 0) rotate(-7deg); pointer-events: auto; }
/* Natpisi heroja (hero.html): zaglavlje, tekstovi sa etikete oko znaka, blokovi pored tegle dok pada, natpis na slici iz šume i sitnice na kraju.
   Jezik je etiketa tegle: Archivo verzalom sa žutom crticom za sitna slova, Fraunces za rečenice. Ide posle hero.css i kraj.css. */
@font-face {
  font-family: 'Archivo'; src: url('/hero/fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; src: url('/hero/fonts/archivo-latin-wdth-normal.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root { --mastilo: #3a3027; --sitno: 700 12px/1 'Archivo', 'Helvetica Neue', Arial, sans-serif; }

/* sitna slova sa etikete: Archivo, verzal, razmak, žuta crtica */
.oznaka { font: var(--sitno); font-stretch: 88%; letter-spacing: 0.17em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.oznaka::before { content: ''; flex: none; width: 26px; height: 2px; background: var(--zuta); }

/* ---- zaglavlje: znak, meni verzalom, jedno dugme ---- */
.traka {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: clamp(22px, 3vw, 44px);
  padding: max(18px, env(safe-area-inset-top)) var(--rub) 0; transition: color 0.3s;
}
.traka .ime { display: block; padding: 6px 0; justify-self: start; }
.ime-znak {
  display: block; width: calc(var(--logo, 23px) * 6.355); height: var(--logo, 23px); background: currentColor;
  -webkit-mask: url('/hero/kraj/ime-red.svg') center / contain no-repeat; mask: url('/hero/kraj/ime-red.svg') center / contain no-repeat;
}
.traka nav { gap: clamp(20px, 2.4vw, 36px); font: 600 12px/1 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-stretch: 92%; letter-spacing: 0.16em; text-transform: uppercase; }
.traka nav a { position: relative; padding: 8px 0; }
.traka nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 0.35s cubic-bezier(0.6, 0, 0.2, 1);
}
.traka nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.poruci {
  font: 700 12px/1 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-stretch: 92%; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  padding: 13px 18px 12px; border: 1px solid currentColor; transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.poruci:hover { background: var(--crna); border-color: var(--crna); color: var(--bela); }
.traka.na-zemlji .poruci:hover { background: var(--bela); border-color: var(--bela); color: var(--crna); }

/* ---- prvi kadar: savet za skrol levo, ime proizvoda desno; oba odu pre prvog tartufa ---- */
.savet { display: flex; align-items: center; gap: 14px; font: var(--sitno); font-size: 11.5px; font-stretch: 92%; letter-spacing: 0.18em; text-transform: uppercase; bottom: max(26px, env(safe-area-inset-bottom)); }
.savet i { position: relative; width: 44px; height: 1px; background: rgba(20, 15, 10, 0.18); overflow: hidden; }
.savet i::after { content: ''; position: absolute; inset: 0; background: var(--crna); transform: translateX(-100%); animation: savet 2.2s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
@keyframes savet { 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }
.pocetak-ime { position: absolute; right: var(--rub); bottom: max(26px, env(safe-area-inset-bottom)); font-size: 11.5px; }

/* ---- tekstovi sa etikete oko znaka: isto slovo, ista veličina i isto mesto kao na etiketi, pa ih etiketa preuzme kad krene ka tegli ---- */
.etiketa-tekst {
  position: absolute; left: 0; top: 0; z-index: 3; visibility: hidden; pointer-events: none;
  font-weight: 700; font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-stretch: 88%; letter-spacing: 0.13em; text-transform: uppercase; color: #14110d;
}
.etiketa-tekst .l { display: block; overflow: hidden; }
.etiketa-tekst .l > span { display: block; white-space: nowrap; will-change: transform; }
.etiketa-crta { position: absolute; left: 0; top: 0; z-index: 3; width: 100px; height: 4px; background: #efb11c; transform-origin: 0 0; visibility: hidden; pointer-events: none; }

/* ---- blokovi pored tegle: putuju nagore brzinom skrola, kao stari redovi, levo, desno, levo ---- */
.blok { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform; --vel: 62px; }
.blok h2 { margin: 0.42em 0 0.36em; font-size: var(--vel); line-height: 0.98; font-weight: 800; letter-spacing: -0.025em; }
.blok .l { display: block; }
.blok .l > span { display: inline-block; white-space: nowrap; }
.blok .opis { max-width: 25ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.42; font-weight: 400; color: var(--mastilo); }
.blok[data-blok='desno'] { text-align: right; }
.blok[data-blok='desno'] .oznaka { flex-direction: row-reverse; }
.blok[data-blok='desno'] .opis { margin-left: auto; }

/* ---- slika iz šume: natpis gore, ide nagore zajedno sa slikom ---- */
.suma { position: absolute; left: 0; top: 0; z-index: 3; visibility: hidden; pointer-events: none; color: var(--bela); will-change: transform; --vel: 64px; }
.suma::before { /* meka senka iza slova, da se čitaju i preko svetlih krošnji */
  content: ''; position: absolute; z-index: -1; inset: -42% -34% -48% -30%;
  background: radial-gradient(closest-side, rgba(20, 15, 10, 0.42), rgba(20, 15, 10, 0.2) 55%, rgba(20, 15, 10, 0)); opacity: var(--senka, 1);
}
.suma .crta { display: block; width: 44px; height: 3px; background: var(--zuta); margin-bottom: 0.42em; transform-origin: 0 50%; }
.suma h2 { margin: 0; font-size: var(--vel); line-height: 0.98; font-weight: 800; letter-spacing: -0.025em; text-shadow: 0 1px 24px rgba(20, 15, 10, 0.25); }
.suma .l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.suma .l > span { display: inline-block; white-space: nowrap; will-change: transform; }

/* ---- kraj: poziv ispod rečenice, opis tegle pored nje, link na traci ---- */
.kraj-recenica { bottom: calc(var(--traka) + 7svh + 62px); }
.kraj-poruci {
  position: absolute; left: var(--rub); bottom: calc(var(--traka) + 7svh); display: inline-flex; align-items: center; gap: 12px;
  font: 700 12px/1 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-stretch: 92%; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 15px 20px 14px; background: var(--crna); color: var(--bela); transition: background-color 0.25s, color 0.25s;
}
.kraj-poruci i, .dalje i { position: relative; width: 22px; height: 1px; background: currentColor; transition: width 0.3s; }
.kraj-poruci i::after, .dalje i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border: solid currentColor; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.kraj-poruci:hover { background: var(--zuta); color: var(--crna); }
.kraj-poruci:hover i, .dalje a:hover i, .dalje a:focus-visible i { width: 30px; }
.kraj-opis { position: absolute; bottom: calc(var(--traka) + 13svh); width: 15em; text-align: right; }
.kraj-opis .oznaka { justify-content: flex-end; flex-direction: row-reverse; }
.kraj-opis-tekst { margin-top: 10px; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.kraj-traka p { font-weight: 500; max-width: calc(100% - 466px); text-wrap: balance; } /* desno su dva dugmeta (426 px): na užem prozoru rečenica pređe u dva reda pre nego što stigne do njih */
.dalje {
  display: flex; align-items: center; gap: 36px; border: 0; padding: 0; bottom: 20px; white-space: nowrap; /* na kraju su tačno na sredini žute trake (64 px) */
  font: 700 12px/1 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-stretch: 92%; letter-spacing: 0.16em; text-transform: uppercase;
}
/* dva linka, svaki sa svojom crtom ispod i strelicom: strip levo, realno desno na ivici */
.dalje a { display: flex; align-items: center; gap: 10px; }
.dalje a i { transition: width 0.3s, margin-right 0.3s; }
.dalje a:hover i, .dalje a:focus-visible i { margin-right: -8px; } /* strelica se produži preko svog mesta, pa se ni ovaj ni drugi link ne pomere */
.dalje a > span { padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.dalje-oznaka { display: none; }

/* telefon: znak i dugme u zaglavlju; tekstovi iznad ili ispod tegle */
@media (max-aspect-ratio: 4/5) {
  .traka { grid-template-columns: 1fr auto; --logo: 19px; }
  .traka nav { display: none; }
  .poruci { padding: 11px 14px 10px; font-size: 11px; }
  .poruci-vise, .pocetak-ime, .kraj-poruci, .kraj-opis { display: none; }
  .savet { bottom: calc(620 * var(--u)); }
  .blok .opis { font-size: 15px; max-width: 30ch; }
  .blok h2 { margin: 0.36em 0 0.3em; }
  .suma { --vel: 38px; }
  .kraj-recenica { bottom: auto; }
  .dalje { bottom: max(22px, env(safe-area-inset-bottom)); gap: 22px; } /* traka na telefonu je 68 px */
  /* telefon: „Kako radimo” je zajednički sitan natpis, a linkovi su samo „Strip” i „Realno”, da sve stane u jedan red i na 320 px */
  .dalje-oznaka { display: block; margin-right: -4px; font-size: 10.5px; font-weight: 600; opacity: 0.72; }
  .dalje-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 340px) {
  .traka { --logo: 16px; }
  .oznaka { font-size: 10.5px; gap: 9px; }
  .dalje { gap: 16px; }
  .dalje i { width: 18px; }
}
/* uzak, a položen prozor: rečenica bi tek u tri reda stala pored dugmadi, a traka ima mesta za dva */
@media (min-aspect-ratio: 4/5) and (max-width: 780px) {
  .kraj-traka p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .blok, .etiketa-tekst, .etiketa-crta, .suma, .pocetak-ime { display: none; }
  .savet i::after { animation: none; }
}