/* Tuber Funghi, „Kako radimo”, realna verzija (V16): sedam svetova po ritmu Corn Revolution.
   Jedna paleta kroz sve: duboka šumska crno-zelena, zlato brenda kao svetlo, krem tekst; između svetova ide tvrda kosa ivica.
   Fontovi i boje su od brenda. */
@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; --krem: #f2e8d8; --zlato: #d9a441; --suma: #06100b; --suma-2: #0d1c14;
  --rub: clamp(18px, 3vw, 44px);
  --duzina: 1515svh; /* main.js je računa iz rasporeda */
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #06100b; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: #06100b; color: var(--krem); visibility: visible; animation: none;
  font: 400 17px/1.3 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100, 'WONK' 0;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; -webkit-user-drag: none; }
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
button, a { user-select: none; -webkit-user-select: none; }
h1, h2, p { margin: 0; }

/* meni je isti kao na početnoj strani */
.traka {
  position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top)) var(--rub) 0; color: var(--krem); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.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 nav a[aria-current] { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
@media (hover: hover) { .traka a:hover { opacity: 0.72; } }
.traka a:focus-visible, .prsten:focus-visible, .futer a:focus-visible, .okret-jedan:focus-visible { outline: 2px solid var(--zuta); outline-offset: 4px; }

.prica { position: relative; height: calc(100svh + var(--duzina)); }
.pozornica { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #06100b; }

/* svet je ceo ekran; main.js ga seče kosom ivicom i pali samo kad se vidi */
.svet { position: absolute; inset: 0; overflow: hidden; visibility: hidden; contain: layout paint; }
.svet.vidi, .svet.heroj:not(.skriven):not(.krug) { visibility: visible; }
.svet.skriven { visibility: hidden; }
.pozadina { position: absolute; inset: 0; }
.sloj { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
.sjaj { position: absolute; border-radius: 50%; pointer-events: none; }
.senka-ivice {
  position: absolute; left: -30%; top: 0; width: 160%; height: 30vh; pointer-events: none; z-index: 4;
  background: linear-gradient(to bottom, rgba(2, 7, 4, 0.55), rgba(2, 7, 4, 0.16) 36%, rgba(2, 7, 4, 0));
  transform-origin: 50% 0; transform: translate3d(0, 120vh, 0); will-change: transform;
}

/* ---------- tekst: naslov se iscrta u obrisu, pa se popuni, a odlazi istim putem nazad ---------- */
.tekst {
  position: absolute; z-index: 3; left: calc(var(--rub) + 3.2vw); top: 50%; width: min(36vw, 560px);
  transform: translateY(-50%); pointer-events: none; visibility: hidden;
}
.tekst a { pointer-events: auto; }
.naslov { position: relative; font-weight: 800; letter-spacing: -0.026em; color: transparent; font-size: clamp(38px, 4.4vw, 74px); line-height: 0.98; text-wrap: balance; }
.naslov__mera { visibility: hidden; display: block; }
.naslov__obris, .naslov__ispuna { position: absolute; inset: 0 -0.1em -0.24em 0; display: block; }
.naslov__obris {
  color: transparent; -webkit-text-stroke: 1px rgba(242, 232, 216, 0.8);
  -webkit-mask-image: linear-gradient(102deg, #000 calc(var(--o, 0) * 140% - 28%), transparent calc(var(--o, 0) * 140% - 8%));
  mask-image: linear-gradient(102deg, #000 calc(var(--o, 0) * 140% - 28%), transparent calc(var(--o, 0) * 140% - 8%));
}
.naslov__ispuna {
  color: var(--krem); text-shadow: 0 2px 26px rgba(0, 0, 0, 0.3);
  -webkit-mask-image: linear-gradient(102deg, #000 calc(var(--i, 0) * 140% - 28%), transparent calc(var(--i, 0) * 140% - 8%));
  mask-image: linear-gradient(102deg, #000 calc(var(--i, 0) * 140% - 28%), transparent calc(var(--i, 0) * 140% - 8%));
}
.tekst p:not(.naslov) { margin-top: 0.95em; max-width: 23em; font-size: clamp(17px, 1.36vw, 21px); line-height: 1.42; font-weight: 450; text-wrap: pretty;
  opacity: calc(var(--t, 0) * 0.92); transform: translate3d(0, calc((1 - var(--t, 0)) * 12px), 0); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
.tekst p.uputstvo { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--zuta); opacity: calc(var(--t, 0) * 0.95); }

/* ---------- 1. heroj: tartuf izranja iz zemlje u šumi u sumrak, naslov u jednom redu ispred njega ---------- */
.heroj .pozadina { background: radial-gradient(ellipse 80% 70% at 50% 34%, #13261a, #07110c 70%, #040a07); }
.heroj-suma { position: absolute; inset: -4%; background: url('/realno/heroj-magla.webp') 50% 45% / cover no-repeat; }
.heroj-suma::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 30% at 50% 47%, rgba(4, 10, 7, 0.3), rgba(4, 10, 7, 0) 72%),
    linear-gradient(to bottom, rgba(4, 10, 7, 0.16), rgba(4, 10, 7, 0) 26%, rgba(4, 10, 7, 0.12) 56%, rgba(3, 8, 5, 0.86) 94%); }
/* V18: zraci zdesna koji titraju i magla koja plovi, iza tartufa (tartuf ostaje oštar ispred njih) */
.zraci-sloj { position: absolute; inset: -6% -6% 18% -6%; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 96%); mask-image: linear-gradient(to bottom, #000 25%, transparent 96%);
  background:
    linear-gradient(122deg, transparent 54%, rgba(255, 214, 150, 0.13) 58%, transparent 63%),
    linear-gradient(128deg, transparent 64%, rgba(255, 214, 150, 0.1) 67%, transparent 71%),
    linear-gradient(116deg, transparent 44%, rgba(255, 214, 150, 0.07) 48%, transparent 53%);
  animation: zraci-titraj 9s ease-in-out infinite alternate; }
@keyframes zraci-titraj { 0% { opacity: 0.5; } 35% { opacity: 0.85; } 60% { opacity: 0.6; } 100% { opacity: 1; transform: translate3d(-1.2%, 0.6%, 0); } }
.magla-sloj { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.magla-sloj div { position: absolute; left: -40%; width: 180%; height: 42%; border-radius: 50%; filter: blur(34px); opacity: 0.5;
  background: radial-gradient(ellipse at center, rgba(206, 202, 164, 0.36), rgba(206, 202, 164, 0) 66%); animation: magla 30s ease-in-out infinite alternate; }
.magla-heroj div:first-child { top: 40%; }
.magla-heroj div:last-child { top: 16%; opacity: 0.32; animation-duration: 38s; animation-direction: alternate-reverse; }
.sjaj-heroj { left: 50%; top: 50%; width: 76vmin; height: 76vmin; margin: -38vmin 0 0 -38vmin;
  background: radial-gradient(circle, rgba(241, 176, 20, 0.2), rgba(241, 176, 20, 0.07) 40%, rgba(241, 176, 20, 0) 68%); }
.okret { position: absolute; display: block; pointer-events: none; }
.okret-heroj { left: 50%; top: 52%; width: min(50vh, 36vw); height: min(50vh, 36vw); transform: translate(-50%, -50%);
  pointer-events: auto; cursor: grab; touch-action: pan-y; filter: brightness(0.95) contrast(1.12) saturate(1.06) drop-shadow(0 -4px 28px rgba(255, 196, 110, 0.22)); }
.okret-heroj:active { cursor: grabbing; }
.heroj-tlo { position: absolute; left: 50%; top: 66%; width: max(124vw, 1180px); height: auto; transform: translateX(-50%); display: block; }
.sloj-tlo::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10%; height: 40%;
  background: linear-gradient(to bottom, rgba(3, 8, 5, 0), rgba(3, 8, 5, 0.55) 40%, rgba(3, 8, 5, 0.96)); }
.tekst.tekst-heroj { left: 3vw; right: 3vw; width: auto; top: 45%; text-align: center; }
.naslov-veliki { font-size: clamp(44px, 8.4vw, 172px); line-height: 0.98; letter-spacing: -0.035em; white-space: nowrap; text-wrap: nowrap; }
.naslov-veliki .naslov__ispuna { text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35); }
.naslov[data-raspad] {
  -webkit-mask-image: radial-gradient(circle at var(--mx, -999px) var(--my, -999px), transparent calc(var(--mr, 0px) * 0.72), #000 var(--mr, 0px));
  mask-image: radial-gradient(circle at var(--mx, -999px) var(--my, -999px), transparent calc(var(--mr, 0px) * 0.72), #000 var(--mr, 0px));
}
.raspad { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 4; }
.tekst.tekst-podnaslov { left: 50%; top: calc(45% + 4.7vw + 16px); width: min(560px, 80vw); transform: translateX(-50%); text-align: center; }
.tekst-podnaslov p { margin: 0 auto; max-width: none; font-size: clamp(15px, 1.12vw, 19px); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.8); }

/* ---------- 2. niti pod hrastom: zlatne niti oko korena, pa sazvežđe ---------- */
.niti .pozadina {
  background:
    radial-gradient(ellipse 55% 50% at 64% 34%, rgba(26, 72, 52, 0.5), rgba(26, 72, 52, 0) 72%),
    radial-gradient(ellipse 50% 40% at 30% 90%, rgba(80, 58, 22, 0.32), rgba(80, 58, 22, 0) 70%),
    #05100b;
}
.koren-mrak { position: absolute; display: block; height: auto; left: 30vw; top: -6vh; width: min(78vw, 150vh); }
.gl-niti { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s; }
.niti.gl .gl-niti { opacity: 1; }
.niti.gl .koren-mrak { visibility: hidden; }
/* natpis tačke sazvežđa: zlatni krug oko tačke, isprekidana linija, broj i opis */
.oznaka { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.oznaka.vidi { opacity: 1; }
.oznaka i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(241, 176, 20, 0.9); box-shadow: 0 0 18px rgba(241, 176, 20, 0.35); }
.oznaka i::after { content: ''; position: absolute; left: 44px; top: 21px; width: 24px; border-top: 1px dashed rgba(241, 176, 20, 0.75); }
.oznaka b, .oznaka span { position: absolute; left: 76px; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); }
.oznaka b { top: -20px; font-size: 14px; font-weight: 700; color: var(--zuta); }
.oznaka span { top: 0; font-size: 13.5px; color: var(--krem); }
.oznaka.levo b, .oznaka.levo span { left: auto; right: 76px; text-align: right; }
.oznaka.levo i::after { left: auto; right: 44px; }
.oznaka-hrast { --or: 60px; }
.oznaka-hrast i { left: calc(var(--or) * -1); top: calc(var(--or) * -1); width: calc(var(--or) * 2); height: calc(var(--or) * 2); border-style: dashed; animation: nadjen-krug 22s linear infinite; }
.oznaka-hrast i::after { display: none; }
.oznaka-hrast::before { content: ''; position: absolute; left: calc(var(--or) + 6px); top: 0; width: 26px; border-top: 1px solid rgba(241, 176, 20, 0.85); }
.oznaka-hrast b, .oznaka-hrast span { left: calc(var(--or) + 40px); }

/* ---------- 3. zemlja: žirovi padaju, kamera se spušta u presek ---------- */
.presek .pozadina { background: radial-gradient(ellipse 80% 60% at 60% 0%, #1b2a1c, #07100b 70%); }
.presek-kutija { position: absolute; left: 0; top: 0; width: max(100%, 177.7svh); }
/* iznad zemlje: šumsko tlo u sumrak, toplo svetlo kroz krošnje; žirovi padaju na rub zemlje */
.iznad { height: 58svh; position: relative;
  background:
    radial-gradient(circle at 72% 30%, rgba(255, 186, 96, 0.22), rgba(255, 186, 96, 0) 16%),
    radial-gradient(circle at 86% 12%, rgba(255, 206, 130, 0.16), rgba(255, 206, 130, 0) 10%),
    radial-gradient(circle at 58% 8%, rgba(255, 196, 110, 0.12), rgba(255, 196, 110, 0) 9%),
    radial-gradient(ellipse 70% 60% at 66% 100%, rgba(96, 72, 30, 0.5), rgba(96, 72, 30, 0) 70%),
    linear-gradient(to bottom, #050d08, #121a10 80%, #1a1f12); }
/* presek ulazi preko donjeg dela fotografije tla, sa mekim gornjim rubom, pa se dva sloja lišća stapaju u jedno tlo */
.presek-slika { position: relative; display: block; width: 100%; height: auto; margin-top: -10svh;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10svh); mask-image: linear-gradient(to bottom, transparent, #000 10svh); }
.presek-kutija::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(3, 9, 6, 0.8), rgba(3, 9, 6, 0.24) 34%, rgba(3, 9, 6, 0) 50%); }
.zirovi { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 1; }
/* zraci koji kroz zemlju padaju do tartufa (u slici) blago dišu */
.zraci-presek { position: absolute; left: 0; top: 48svh; width: 100%; aspect-ratio: 1672 / 941; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 20% 34% at 72% 26%, rgba(255, 204, 128, 0.2), rgba(255, 204, 128, 0) 70%),
    radial-gradient(ellipse 12% 18% at 82% 46%, rgba(255, 204, 128, 0.14), rgba(255, 204, 128, 0) 70%);
  animation: zraci-disi 6.5s ease-in-out infinite alternate; }
@keyframes zraci-disi { from { opacity: 0.3; } to { opacity: 1; } }
/* lampa u zemlji: sve je u mraku osim kruga toplog svetla; bez miša svetlo stoji na tartufu */
.svetiljka { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--sv, 0);
  background: radial-gradient(circle var(--sr, 240px) at var(--sx, 70%) var(--sy, 60%), rgba(3, 8, 5, 0) 0%, rgba(3, 8, 5, 0.16) 48%, rgba(3, 8, 5, 0.56) 100%); }
.svetiljka::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(circle var(--sr, 240px) at var(--sx, 70%) var(--sy, 60%), rgba(255, 190, 96, 0.16), rgba(255, 190, 96, 0) 62%); }
.nadjen { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.45s; --nr: 64px; }
.nadjen.vidi { opacity: 1; }
.nadjen i { position: absolute; left: calc(var(--nr) * -1); top: calc(var(--nr) * -1); width: calc(var(--nr) * 2); height: calc(var(--nr) * 2);
  border-radius: 50%; border: 1px dashed rgba(241, 176, 20, 0.9); animation: nadjen-krug 16s linear infinite; }
@keyframes nadjen-krug { to { transform: rotate(360deg); } }
.nadjen span { position: absolute; left: calc(var(--nr) + 30px); top: -11px; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--krem); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9); }
.nadjen span::before { content: ''; position: absolute; right: calc(100% + 8px); top: 50%; width: 20px; border-top: 1px solid rgba(241, 176, 20, 0.85); }
.nadjen.levo span { left: auto; right: calc(var(--nr) + 30px); }
.nadjen.levo span::before { right: auto; left: calc(100% + 8px); }
.nadjen.dole span { left: 0; right: auto; top: calc(var(--nr) * -1 - 50px); transform: translateX(-50%); }
.nadjen.dole span::before { right: auto; left: 50%; top: calc(100% + 6px); width: 0; height: 18px; border-top: 0; border-left: 1px solid rgba(241, 176, 20, 0.85); }

/* ---------- 4. hrast i pas u magli ---------- */
.hrast .pozadina { background: linear-gradient(to bottom, #26281c, #1b1f15 20%, #3b4034 40%, #2f342b 56%, #2d3328 70%, #1a1e15 86%, #141710); }
/* V18: hrast u magli kao u V17 (Darko: „mora ostati to drvo”); pas je fotografija pravog psa, uklopljena u maglu
   alatom alati/pas-uklopi.py (boja, magla, svetlo oko ivica i senka su već u slici); na računaru mu noge idu ispod ivice kadra */
.hrast-kutija { position: absolute; right: 0; top: 0; width: calc(170svh * 0.6667); }
.hrast-slika { position: relative; display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24%); mask-image: linear-gradient(to right, transparent, #000 24%); }
.pas-njusi { position: absolute; display: block; left: 30%; bottom: 1%; width: 48%; aspect-ratio: 1600 / 1232; }
.pas-njusi[data-pas="b"] { bottom: 0.6%; width: 44%; aspect-ratio: 1600 / 1511; }
.pas-slika { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* prizemna magla preko nogu */
.pas-magla { position: absolute; left: 6%; right: -10%; bottom: -2%; height: 11%; pointer-events: none;
  background: linear-gradient(to top, rgba(112, 122, 92, 0.26), rgba(112, 122, 92, 0.08) 55%, rgba(112, 122, 92, 0)); filter: blur(6px); }
/* zraci kroz krošnju gore desno, polako dišu */
.zraci { position: absolute; inset: 0 0 40% 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.55;
  background:
    linear-gradient(118deg, transparent 52%, rgba(255, 226, 170, 0.16) 56%, transparent 61%),
    linear-gradient(112deg, transparent 62%, rgba(255, 226, 170, 0.12) 65%, transparent 69%),
    linear-gradient(124deg, transparent 40%, rgba(255, 226, 170, 0.08) 44%, transparent 49%);
  /* zraci se ka dnu utope u maglu: bez ovoga im se donja ivica videla kao vodoravni šav preko hrasta */
  -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 96%); mask-image: linear-gradient(to bottom, #000 25%, transparent 96%);
  animation: zraci 11s ease-in-out infinite alternate; }
@keyframes zraci { to { opacity: 0.32; transform: translate3d(-2%, 1%, 0); } }
.hrast .tekst { top: 36%; }
.magla { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2;
  -webkit-mask-image: radial-gradient(circle var(--mr, 0px) at var(--mx, -999px) var(--my, -999px), rgba(0, 0, 0, 0.15), #000);
  mask-image: radial-gradient(circle var(--mr, 0px) at var(--mx, -999px) var(--my, -999px), rgba(0, 0, 0, 0.15), #000); }
.magla div { position: absolute; left: -40%; width: 180%; height: 46%; border-radius: 50%; filter: blur(30px); opacity: 0.5;
  background: radial-gradient(ellipse at center, rgba(176, 186, 146, 0.4), rgba(176, 186, 146, 0) 66%); animation: magla 26s ease-in-out infinite alternate; }
.magla div:first-child { bottom: -14%; }
.magla div:last-child { bottom: 18%; opacity: 0.32; animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes magla { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, -3%, 0); } }

/* ---------- 5. Fruška gora odozgo ---------- */
.gora .pozadina { background: #0b140d; }
.gora .pozadina::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(4, 10, 7, 0.82), rgba(4, 10, 7, 0.22) 50%, rgba(4, 10, 7, 0.42)); }
.mapa { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.5s; }
.gora.gl .mapa { opacity: 1; }
.gora-veo { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(4, 10, 7, 0.7), rgba(4, 10, 7, 0.24) 36%, rgba(4, 10, 7, 0) 58%); }

/* slike kasnijih svetova (pozadine iz CSS-a) stižu tek kad je svet blizu, da prvi kadar ne čeka */
.presek.blizu .iznad { background-image: url('/realno/iznad-magla.webp'), radial-gradient(circle at 72% 30%, rgba(255, 186, 96, 0.22), rgba(255, 186, 96, 0) 16%), radial-gradient(circle at 86% 12%, rgba(255, 206, 130, 0.16), rgba(255, 206, 130, 0) 10%), radial-gradient(circle at 58% 8%, rgba(255, 196, 110, 0.12), rgba(255, 196, 110, 0) 9%), radial-gradient(ellipse 70% 60% at 66% 100%, rgba(96, 72, 30, 0.5), rgba(96, 72, 30, 0) 70%), linear-gradient(to bottom, #050d08, #121a10 80%, #1a1f12);
  background-position: center 64%, 0 0, 0 0, 0 0, 0 0, 0 0; background-size: cover, auto, auto, auto, auto, auto; background-repeat: no-repeat; }
.gora.blizu .pozadina { background: #0b140d url('/realno/gora-rezerva.webp') center / cover; }

/* ---------- 6. jedan tartuf ---------- */
.jedan .pozadina {
  background:
    radial-gradient(ellipse 40% 50% at 66% 40%, rgba(236, 164, 40, 0.34), rgba(236, 164, 40, 0) 72%),
    radial-gradient(ellipse 90% 80% at 60% 50%, #13261a, #06100b 80%);
}
/* V18: isti svet u magli: šuma iz heroja, zamućena kao kroz objektiv izbliza, zraci zdesna iza tartufa (tartuf ostaje oštar) */
.jedan.blizu .pozadina {
  background:
    linear-gradient(to right, rgba(4, 10, 7, 0.74), rgba(4, 10, 7, 0.28) 36%, rgba(4, 10, 7, 0) 58%),
    linear-gradient(to bottom, rgba(4, 10, 7, 0) 50%, rgba(4, 10, 7, 0.74)),
    url('/realno/jedan-magla.webp') 72% 40% / cover,
    radial-gradient(ellipse 90% 80% at 60% 50%, #13261a, #06100b 80%);
}
.zraci-jedan { inset: -10% -10% 12% 18%; }
.magla-jedan div:first-child { top: 54%; }
.magla-jedan div:last-child { top: 6%; opacity: 0.3; animation-duration: 40s; animation-direction: alternate-reverse; }
.sjaj-jedan { left: 62%; top: 50%; width: 80vmin; height: 80vmin; margin: -40vmin 0 0 -40vmin;
  background: radial-gradient(circle, rgba(255, 196, 92, 0.26), rgba(255, 196, 92, 0.08) 40%, rgba(255, 196, 92, 0) 68%); }
.okret-jedan { left: 62%; top: 50%; width: min(60vh, 40vw); height: min(60vh, 40vw); transform: translate(-50%, -50%); pointer-events: auto; cursor: grab; touch-action: pan-y;
  filter: brightness(0.86) contrast(1.12) drop-shadow(0 -6px 34px rgba(255, 186, 70, 0.24)); }
.okret-jedan:active { cursor: grabbing; }
/* podaci oko tartufa: tačka na kori, isprekidana linija do natpisa; prate okret, a kad tačka ode iza, natpis se ugasi */
.podaci-linije { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.podaci-linije path { fill: none; stroke: rgba(241, 176, 20, 0.85); stroke-width: 1; stroke-dasharray: 2 4; }
.podaci-linije circle { fill: #f1b014; }
.podaci-linije circle.oreol { fill: none; stroke: rgba(241, 176, 20, 0.6); stroke-width: 1; }
.podatak { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; white-space: nowrap; color: var(--krem); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85); will-change: transform, opacity; }
.podatak b { display: block; font-size: 16px; font-weight: 700; color: var(--zuta); }
.podatak span { display: block; margin-top: 2px; font-size: 14px; }
.podatak.levo { text-align: right; }

/* ---------- 7. futer ---------- */
.futer .pozadina { background: radial-gradient(ellipse 40% 50% at 72% 50%, rgba(241, 176, 20, 0.16), rgba(241, 176, 20, 0) 70%), radial-gradient(ellipse 70% 70% at 70% 50%, #12241a, #050d09 80%); }
/* V18: ista šuma u magli, jako zatamnjena, da znak i tekst ostanu glavni; magla polako plovi */
.futer.blizu .pozadina { background:
    radial-gradient(ellipse 40% 50% at 72% 50%, rgba(241, 176, 20, 0.16), rgba(241, 176, 20, 0) 70%),
    radial-gradient(ellipse 70% 70% at 70% 50%, rgba(18, 36, 26, 0.7), rgba(5, 13, 9, 0.9) 80%),
    url('/realno/jedan-magla.webp') 70% 40% / cover, #050d09; }
.magla-futer div:first-child { top: 60%; opacity: 0.42; }
.magla-futer div:last-child { top: 14%; opacity: 0.24; animation-duration: 44s; animation-direction: alternate-reverse; }
.znak { position: absolute; right: 12vw; top: 50%; width: min(56vh, 38vw); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none;
  border-radius: 50%; overflow: hidden; background: var(--zuta); box-shadow: 0 0 140px rgba(241, 176, 20, 0.22); }
.znak-krug { display: none; }
.znak-natpis { position: absolute; left: 22%; top: 11%; width: 56%; height: auto; }
.znak-pas { position: absolute; left: 15%; bottom: -4%; width: 70%; height: auto; }
.tekst-futer { width: min(46vw, 640px); }
.tekst p.futer-ime { margin: 0; font-size: clamp(48px, 6.4vw, 108px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; opacity: var(--t, 0); }
.tekst p.futer-moto { margin-top: 0.4em; font-size: clamp(20px, 1.8vw, 28px); }
.probajte { position: relative; display: inline-grid; place-items: center; width: 150px; height: 150px; margin: 1.8em 0 0 14px; border-radius: 50%;
  border: 1px solid rgba(241, 176, 20, 0.95); background: rgba(241, 176, 20, 0.1); color: var(--krem); font-weight: 700; font-size: 16px; line-height: 1.15; text-align: center;
  opacity: var(--t, 0); transition: background 0.35s, color 0.35s; will-change: transform; }
.probajte-tekst { padding: 0 22px; }
.probajte-prsten { position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(241, 176, 20, 0.4); transition: inset 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s; }
@media (hover: hover) {
  .probajte:hover { background: var(--zuta); color: var(--crna); }
  .probajte:hover .probajte-prsten { inset: -22px; opacity: 0.35; }
  .futer-linkovi a:hover { opacity: 0.7; }
}
.futer-linkovi { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 2.2em; font-size: 17px; font-weight: 500; opacity: var(--t, 0); }
.tekst p.futer-potpis { margin-top: 2.6em; font-size: 14px; opacity: calc(var(--t, 0) * 0.7); }
.futer-potpis a { text-decoration: underline; text-underline-offset: 3px; }
.tekst-futer, .tekst-futer a { pointer-events: auto; }

/* ---------- preko svega: čestice, ton (LUT), vinjeta, zrno, prsten ---------- */
.cestice { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.ton { position: fixed; inset: 0; z-index: 7; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(160deg, rgba(255, 196, 110, 0.2), rgba(255, 176, 80, 0.05) 45%, rgba(20, 64, 46, 0.22)); }
.vinjeta { position: fixed; inset: -12%; z-index: 8; pointer-events: none;
  background: radial-gradient(ellipse 72% 64% at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(2, 8, 5, 0.6) 100%); transform: rotate(-4deg); }
.zrno { position: fixed; inset: -50%; z-index: 9; pointer-events: none; background-image: var(--zrno); opacity: 0.04; animation: zrno 0.9s steps(6) infinite; }
@keyframes zrno { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-4%, 3%, 0); } 40% { transform: translate3d(3%, -5%, 0); } 60% { transform: translate3d(-2%, 4%, 0); } 80% { transform: translate3d(5%, 1%, 0); } 100% { transform: translate3d(-3%, -2%, 0); } }

.prsten { position: fixed; z-index: 21; right: clamp(18px, 2.6vw, 40px); top: 50%; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0; background: none; color: var(--krem); cursor: pointer; }
.prsten svg { width: 100%; height: 100%; display: block; overflow: visible; transform: rotate(-90deg); }
.prsten-osnova, .prsten-put { fill: none; stroke: currentColor; stroke-width: 1.5; }
.prsten-osnova { opacity: 0.3; }
.prsten-put { stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.prsten-strelica { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transform-origin: 32px 32px; }
.prsten-ime { position: absolute; right: 62px; top: 50%; transform: translate3d(6px, -50%, 0); white-space: nowrap; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
@media (hover: hover) { .prsten:hover .prsten-ime { opacity: 1; transform: translate3d(0, -50%, 0); } }
.prsten.najava .prsten-ime { opacity: 1; transform: translate3d(0, -50%, 0); }

/* ---------- telefon: predmet gore, tekst dole ---------- */
@media (max-aspect-ratio: 4/5) {
  .traka nav { display: none; }
  .ime { font-size: 22px; }
  .tekst { left: 22px; right: 22px; width: auto; top: auto; bottom: calc(env(safe-area-inset-bottom) + 92px); transform: none; }
  .naslov { font-size: clamp(32px, 9.4vw, 46px); }
  .tekst p:not(.naslov):not(.futer-ime) { font-size: 16px; margin-top: 0.7em; }
  .tekst.tekst-heroj { left: 16px; right: 16px; width: auto; top: 31%; bottom: auto; transform: translateY(-50%); }
  .naslov-veliki { font-size: clamp(50px, 16.4vw, 96px); line-height: 0.94; white-space: normal; }
  .naslov-veliki .rec { display: block; white-space: nowrap; }
  .okret-heroj { top: 53%; width: 70vw; height: 70vw; }
  .heroj-tlo { top: 64%; width: max(250vw, 900px); }
  .tekst.tekst-podnaslov { left: 26px; right: 26px; width: auto; top: auto; bottom: calc(env(safe-area-inset-bottom) + 96px); transform: none; }
  .tekst-podnaslov p { font-size: 15px; }
  .koren-mrak { left: -20vw; top: -2vh; width: 150vw; }
  .iznad { height: 50svh; }
  .zraci-presek { top: 40svh; }
  .presek-kutija::after { background: linear-gradient(to bottom, rgba(3, 9, 6, 0) 46%, rgba(3, 9, 6, 0.78) 76%); }
  .hrast-kutija { right: auto; left: 50%; width: calc(180svh * 0.6667); margin-left: calc(180svh * -0.3333); }
  .hrast-slika { -webkit-mask-image: none; mask-image: none; }
  .hrast .tekst { top: auto; }
  .pas-njusi, .pas-njusi[data-pas="b"] { left: 33%; bottom: 20.4%; width: 34%; }
  .pas-magla { left: 22%; right: 22%; bottom: 19.6%; height: 6%; filter: blur(8px);
    background: linear-gradient(to top, rgba(112, 122, 92, 0), rgba(112, 122, 92, 0.36) 34%, rgba(112, 122, 92, 0.12) 70%, rgba(112, 122, 92, 0)); }
  .gora-veo { background: linear-gradient(to bottom, rgba(4, 10, 7, 0) 40%, rgba(4, 10, 7, 0.74) 72%); }
  .okret-jedan { left: 50%; top: 40%; width: 74vw; height: 74vw; }
  .sjaj-jedan { left: 50%; top: 40%; }
  .tekst-futer { width: auto; top: 14%; bottom: auto; }
  /* V18: znak stoji između potpisa i dugmeta; veličina prati visinu ekrana, da ne udara u red „Dizajn i izrada” (tekst se završava oko 14svh + 375 px) */
  .znak { right: 50%; top: auto; bottom: calc(env(safe-area-inset-bottom) + 96px); width: clamp(120px, calc(86svh - 500px), 64vw); transform: translateX(50%); }
  .prsten { top: auto; bottom: calc(env(safe-area-inset-bottom) + 26px); right: 50%; margin: 0 -24px 0 0; }
  .prsten-ime { display: none; }
}
/* niski telefoni (320 × 568, Safari sa trakama): tartuf i naslov manji, znak brenda gore desno pored imena */
@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .okret-heroj { top: 54%; width: 58vw; height: 58vw; }
  .tekst.tekst-heroj { top: 30%; }
  .naslov-veliki { font-size: clamp(46px, 15vw, 80px); }
  .heroj-tlo { top: 66%; }
  .tekst.tekst-podnaslov { bottom: calc(env(safe-area-inset-bottom) + 86px); }
  .tekst-podnaslov p { font-size: 14px; }
  .tekst { bottom: calc(env(safe-area-inset-bottom) + 84px); }
  .tekst p:not(.naslov):not(.futer-ime) { font-size: 15px; }
  .naslov:not(.naslov-veliki) { font-size: clamp(28px, 8.6vw, 40px); }
  .tekst-futer { top: 12%; }
  .znak { right: 22px; top: 31%; bottom: auto; width: 32vw; transform: none; }
  .probajte { width: 124px; height: 124px; font-size: 14.5px; margin-top: 1.3em; }
  .tekst p.futer-ime { font-size: 44px; }
}

/* bez pokreta: svetovi su strane jedna ispod druge, sav tekst stoji */
.mirno .prica { height: auto; }
.mirno .pozornica { position: relative; height: auto; overflow: visible; }
.mirno .svet { position: relative; height: 100svh; visibility: visible; }
.mirno .svet.krug, .mirno .senka-ivice, .mirno .prsten { display: none; }
.mirno .tekst { visibility: visible; --o: 1; --i: 1.2; --t: 1; }
.mirno .zrno { animation: none; }
.mirno .magla div, .mirno .magla-sloj div, .mirno .zraci-sloj, .mirno .zraci-presek { animation: none; }
/* bez pokreta, svet sa dva teksta: prvi gore, drugi dole, da se ne preklope */
.mirno .tekst[data-st="0"]:has(~ .tekst[data-st="1"]) { top: 30%; }
.mirno .tekst[data-st="1"] { top: 72%; }
@media (max-aspect-ratio: 4/5) {
  .mirno .tekst[data-st="0"]:has(~ .tekst[data-st="1"]) { top: 12%; bottom: auto; }
  .mirno .tekst[data-st="1"] { top: auto; }
}
/* natpis starog hrasta na telefonu: ispod kruga, po sredini */
.oznaka-hrast.dole::before { left: 0; top: calc(var(--or) + 6px); width: 0; height: 22px; border-top: 0; border-left: 1px solid rgba(241, 176, 20, 0.85); }
.oznaka-hrast.dole b, .oznaka-hrast.dole span { left: 0; right: auto; transform: translateX(-50%); text-align: center; }
.oznaka-hrast.dole b { top: calc(var(--or) + 32px); }
.oznaka-hrast.dole span { top: calc(var(--or) + 52px); }