:root{
  --bg:#f6f1e1; --card:#fffdf6; --card2:#efe7cf; --ink:#2b2a1f; --muted:#7b7560; --line:#e4dabb;
  --green:#4f8a3b; --green2:#2f5d2a; --sun:#f2b705; --brick:#c8553d; --accent-ink:#fff;
  --shadow:0 10px 26px -12px rgba(60,70,20,.45);
  --sky1:#8fd3f4; --sky2:#e9f7e0; --h1:#9fcf7b; --h2:#6fb25a; --h3:#4f8a3b; --cloud:#ffffffee; --wheat:#c99a2e; --wheat2:#f2c14e;
  --sat:max(env(safe-area-inset-top),var(--safe-area-inset-top,0px));
  --sab:max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px));
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1c2d1e; --card:#223325; --card2:#2a3d2c; --ink:#eef0dd; --muted:#a3ac8e; --line:#3a5039;
  --green:#7fc15f; --green2:#a7dd8a; --sun:#f6c744; --brick:#ef8a6f; --accent-ink:#10200c;
  --shadow:0 10px 26px -12px rgba(0,0,0,.75);
  --sky1:#0b1430; --sky2:#26325f; --h1:#1e3a2a; --h2:#18301f; --h3:#12251a; --cloud:#a9b3d855; --wheat:#a07a24; --wheat2:#c9a042;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-height:100vh;overflow-x:hidden;transition:background .4s,color .4s}
h1,h2,h3,.serif{font-family:Georgia,'Times New Roman',serif}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.hidden{display:none!important}
#app{position:relative;z-index:1}
main{max-width:720px;margin:0 auto;padding:0 0 calc(var(--sab) + 104px)}
.pad{padding:0 16px}
/* ambient floating food */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ambient span{position:absolute;bottom:-70px;opacity:0;animation:floatup 30s linear infinite;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
@keyframes floatup{0%{transform:translateY(0) translateX(0) rotate(-10deg);opacity:0}10%{opacity:.9}50%{transform:translateY(-55vh) translateX(var(--sw,30px)) rotate(12deg)}90%{opacity:.8}100%{transform:translateY(-115vh) translateX(calc(var(--sw,30px)*-.6)) rotate(-8deg);opacity:0}}
/* nav */
#nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;padding:8px 8px calc(var(--sab) + 8px);
  background:color-mix(in srgb,var(--card) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
#nav a{flex:1;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--muted);font-weight:700;padding:4px 0;transition:transform .2s,color .2s}
#nav a span{font-size:22px;line-height:1;transition:transform .3s}#nav a small{font-size:11px}
#nav a.on{color:var(--green)}#nav a.on span{animation:pop .5s}#nav a:active{transform:scale(.9)}
@keyframes pop{40%{transform:scale(1.35) rotate(-8deg)}}
/* scene */
.hero{position:relative}
.scene{display:block;width:100%;height:230px;border-radius:0 0 34px 34px;overflow:hidden}
.scene.sm{height:150px}
.hero .txt{position:absolute;left:0;right:0;top:calc(var(--sat) + 14px);padding:0 20px;color:#173014;text-shadow:0 1px 0 rgba(255,255,255,.5)}
:root[data-theme="dark"] .hero .txt{color:#f5f1d8;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero h1{margin:0;font-size:2rem;line-height:1.05}
.hero p{margin:4px 0 0;font-weight:600;font-size:.95rem}
.hero .hi{display:inline-block;margin-top:6px;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.55);font-size:.8rem;font-weight:700;backdrop-filter:blur(4px);}
:root[data-theme="dark"] .hero .hi{background:rgba(0,0,0,.35)}
.scene .day-only{display:inline}.scene .night-only{display:none}
:root[data-theme="dark"] .scene .day-only{display:none}:root[data-theme="dark"] .scene .night-only{display:inline}
.rays,.sun-core,.blades,.stalk,.walk,.bee,.butter,.peck,.bob,.flap,.puff,.firefly,.star,.cloud,.drive,.fly{transform-box:fill-box}
.rays{transform-origin:center;animation:spin 40s linear infinite}
.sun-core{animation:sunpulse 4s ease-in-out infinite;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes sunpulse{50%{transform:scale(1.08)}}
.cloud{animation:drift 70s linear infinite}
@keyframes drift{from{transform:translateX(-160px)}to{transform:translateX(580px)}}
.blades{transform-origin:center;animation:spin 7s linear infinite}
.stalk{transform-origin:50% 100%;animation:sway 3.2s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.drive{animation:drive 26s linear infinite}
@keyframes drive{from{transform:translateX(440px)}to{transform:translateX(-60px)}}
.bob{animation:bobv .45s ease-in-out infinite alternate}
@keyframes bobv{to{transform:translateY(-1.5px) rotate(-1.5deg)}}
.walk{animation:walk 40s linear infinite}
@keyframes walk{from{transform:translateX(430px)}to{transform:translateX(-140px)}}
.peck{animation:peck 1.1s ease-in-out infinite}
@keyframes peck{0%,70%,100%{transform:rotate(0)}85%{transform:rotate(14deg) translateY(1px)}}
.fly{animation:flyacross 34s linear infinite}
@keyframes flyacross{from{transform:translate(-30px,0)}50%{transform:translate(210px,-14px)}to{transform:translate(440px,4px)}}
.flap{animation:flap .5s ease-in-out infinite alternate;transform-origin:center}
@keyframes flap{to{transform:scaleY(.6) translateY(1px)}}
.bee{animation:beepath 8s ease-in-out infinite}
@keyframes beepath{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(34px,-14px) rotate(10deg)}50%{transform:translate(70px,0) rotate(0)}75%{transform:translate(34px,14px) rotate(-10deg)}}
.butter{animation:butterpath 11s ease-in-out infinite}
@keyframes butterpath{0%,100%{transform:translate(0,0)}20%{transform:translate(-30px,-18px)}45%{transform:translate(-60px,6px)}70%{transform:translate(-26px,-22px)}}
.puff{animation:puff 4.2s ease-out infinite;transform-origin:center;opacity:0}
@keyframes puff{0%{transform:translate(0,0) scale(.5);opacity:.75}100%{transform:translate(8px,-26px) scale(1.8);opacity:0}}
.star{animation:tw 2.6s ease-in-out infinite}@keyframes tw{0%,100%{opacity:.2}50%{opacity:1}}
.firefly{animation:ff 5s ease-in-out infinite}
@keyframes ff{0%,100%{opacity:.1;transform:translate(0,0)}40%{opacity:1;transform:translate(10px,-8px)}70%{opacity:.4;transform:translate(-6px,-14px)}}
/* common */
.search{position:relative;margin:16px 16px 12px;z-index:3}
.search input[type=text]{width:100%;padding:16px 16px 16px 48px;border-radius:18px;border:2px solid var(--green);background:var(--card);color:var(--ink,inherit);font-weight:600;box-shadow:var(--shadow);outline:none;font-size:1rem}
.search input[type=text]:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent),var(--shadow)}
.search:before{content:'🔎';position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:18px}
h2{font-size:1.2rem;margin:20px 16px 10px}
.sub{color:var(--muted);font-size:.9rem;margin:0 16px 12px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 12px}
.cat{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:8px 3px;text-align:center;cursor:pointer;transition:transform .2s,border-color .2s,background .3s;animation:rise .5s both;position:relative;overflow:hidden}
.cat:active{transform:scale(.94)}
.cat .e{font-size:24px;display:block;animation:bobi 3.4s ease-in-out infinite}
@keyframes bobi{50%{transform:translateY(-5px) rotate(5deg)}}
.cat b{display:block;font-size:.66rem;margin-top:3px;line-height:1.12}.cat small{color:var(--muted);font-size:.6rem}
.cat.on{border-color:var(--green);background:color-mix(in srgb,var(--green) 16%,var(--card))}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 8px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:all .2s}
.chip.on{background:var(--green);border-color:var(--green);color:var(--accent-ink)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.item{display:flex;gap:13px;margin:0 16px 12px;padding:14px;cursor:pointer;position:relative;overflow:hidden;animation:rise .55s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s,border-color .25s}
.item:active{transform:scale(.985)}@media(hover:hover){.item:hover{transform:translateY(-3px);border-color:var(--green)}}
.item:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.item:hover:before{transform:translateX(120%);transition:transform .9s}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.av{flex:0 0 54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--sun) 40%,var(--card)),color-mix(in srgb,var(--green) 35%,var(--card)))}
.item .tx{min-width:0;flex:1}.item h3{margin:0 24px 2px 0;font-size:1.05rem}
.meta{color:var(--muted);font-size:.82rem}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--card2);color:var(--muted)}
.tag.org{background:color-mix(in srgb,var(--green) 18%,var(--card));color:var(--green2)}
.heart{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:0;background:transparent;font-size:20px;cursor:pointer;z-index:2}
.heart.on{animation:beat .5s}@keyframes beat{30%{transform:scale(1.5)}60%{transform:scale(.9)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:15px;border:1px solid var(--line);background:var(--card);font-weight:800;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:transform .15s}
.btn:active{transform:scale(.96)}.btn.pri{background:linear-gradient(135deg,var(--green),var(--green2));color:var(--accent-ink);border:0;box-shadow:var(--shadow)}
:root[data-theme="dark"] .btn.pri{background:linear-gradient(135deg,var(--green),#4f8a3b);color:#0d1a0a}
.btn.block{display:flex;width:100%}.btn.sm{padding:8px 13px;font-size:.85rem;border-radius:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.empty{text-align:center;padding:34px 20px;color:var(--muted)}.empty .big{font-size:58px;display:block;animation:bob2 3s ease-in-out infinite}
@keyframes bob2{50%{transform:translateY(-9px) rotate(-6deg)}}
.note{margin:12px 16px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--sun) 22%,var(--card));border:1px solid var(--line);font-size:.85rem;line-height:1.45}
/* detail */
.dhead{position:relative}.dhead .bar{position:absolute;left:12px;right:12px;top:calc(var(--sat) + 10px);display:flex;justify-content:space-between;z-index:3}
.dhead .rb{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.75);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#222;backdrop-filter:blur(4px)}
:root[data-theme="dark"] .dhead .rb{background:rgba(0,0,0,.45);color:#fff}
.dbody{margin:-34px 16px 0;position:relative;z-index:2;padding:20px;animation:rise .5s both}
.dbody h1{margin:0 0 4px;font-size:1.55rem}
.sec{margin-top:18px}.sec h4{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sec ul{margin:0;padding-left:18px;line-height:1.55}
label.f{display:block;margin:14px 0 6px;font-weight:700;font-size:.85rem;color:var(--muted)}
input[type=text],input[type=tel],textarea,select{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
textarea{min-height:90px;resize:vertical}
.seg{display:flex;background:var(--card2);border-radius:14px;padding:4px;gap:4px;border:1px solid var(--line)}
.seg button{flex:1;border:0;background:transparent;padding:9px 6px;border-radius:10px;font-weight:800;font-size:.85rem;cursor:pointer;color:var(--muted)}.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 2px 8px -3px rgba(0,0,0,.35)}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.setrow:last-child{border:0}
.tog{width:52px;height:30px;border-radius:99px;background:var(--line);border:0;position:relative;cursor:pointer;transition:background .25s;flex:0 0 52px}
.tog:after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .25s;box-shadow:0 1px 4px rgba(0,0,0,.4)}.tog.on{background:var(--green)}.tog.on:after{transform:translateX(22px)}
.cb{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.88rem;line-height:1.4}.cb input{margin-top:3px;width:20px;height:20px;accent-color:var(--green)}
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 96px);transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-weight:700;font-size:.9rem;z-index:70;opacity:0;pointer-events:none;transition:all .3s;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:rp .6s ease-out forwards;pointer-events:none}@keyframes rp{to{transform:scale(1);opacity:0}}
.confetti{position:fixed;z-index:80;pointer-events:none;font-size:18px;animation:conf .9s ease-out forwards}
@keyframes conf{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
/* splash */
.splash{position:fixed;inset:0;z-index:100;background:linear-gradient(#ffd08a,#fff3d6);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s,transform .6s}
.splash.out{opacity:0;transform:scale(1.05);pointer-events:none}
.splash .ss{position:absolute;left:50%;bottom:30%;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:radial-gradient(circle,#fff6b0,#ffc83a 60%,#ff9e2c);box-shadow:0 0 80px 30px rgba(255,200,60,.6);animation:sunrise 2s cubic-bezier(.2,.8,.2,1) both}
@keyframes sunrise{from{transform:translateY(190px) scale(.7)}to{transform:none}}
.splash .sh{position:absolute;left:-10%;right:-10%;bottom:-40px;height:46%;background:#6fb25a;border-radius:50% 50% 0 0}
.splash .sh2{position:absolute;left:-20%;right:-20%;bottom:-70px;height:36%;background:#4f8a3b;border-radius:50% 50% 0 0}
.splash .st{position:relative;z-index:2;text-align:center;color:#3a2a10;animation:rise 1s .5s both}
.splash .st .r{font-size:64px;display:block;animation:bob2 1.2s ease-in-out infinite}
.splash h1{margin:6px 0 2px;font-size:2.2rem}.splash p{margin:0;font-weight:700}
.noanim *,.noanim *:before,.noanim *:after{animation:none!important}
.noanim .ambient{display:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.ambient{display:none}}
.walk,.bee,.butter,.peck,.bob,.flap{transform-origin:center}

.reon{display:flex;align-items:center;gap:8px;margin-top:18px}.reon small{background:var(--green);color:var(--accent-ink);border-radius:999px;font:800 .7rem system-ui;padding:3px 9px}

/* Slozene kartice: prelaze jedna preko druge, vidi se samo ime i mesto */
.cl{display:none}
.stack{padding:4px 0 26px}
.stack .item{display:block;min-height:160px;margin:0 14px -52px;padding:13px 16px;background:linear-gradient(140deg,hsl(var(--h) 55% 34% / .62),hsl(var(--h) 60% 18% / .5));-webkit-backdrop-filter:blur(9px) saturate(1.3);backdrop-filter:blur(9px) saturate(1.3);border:1px solid hsl(var(--h) 55% 60% / .45);border-radius:24px;color:#fff;box-shadow:0 -8px 18px rgba(0,0,0,.32);transition:transform .23s cubic-bezier(.2,.8,.2,1),box-shadow .23s}
.stack .item:last-child{margin-bottom:0}
.stack .item .av{display:none}
.stack .item .cl{display:block;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:hsl(var(--h) 90% 80%)}
.stack .item h3{color:#fff;font-size:1.2rem;line-height:1.12;margin:2px 44px 2px 0}
.stack .item .meta{color:rgba(255,255,255,.8)}
.stack .item:after{content:attr(data-ic);position:absolute;right:16px;top:46px;font-size:36px;opacity:.9;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.stack .item .tags{display:none;margin-top:8px}
.stack .item:last-child .tags,.stack .item.pop .tags{display:flex}
.stack .item .tag{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.stack .item .heart{top:12px;right:12px}
.stack .item.pop{z-index:60;transform:translateY(-14px) scale(1.04);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.dhead,.dbody{animation:sheetUp .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
:root[data-theme="light"] .stack .item{background:linear-gradient(140deg,hsl(var(--h) 55% 32% / .84),hsl(var(--h) 60% 20% / .76))}

/* providnije i svetlije */
.cat{background:color-mix(in srgb,var(--card) 55%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.chip{background:color-mix(in srgb,var(--card) 60%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.search input[type=text]{background:color-mix(in srgb,var(--card) 65%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-theme="dark"] .stack .item{background:linear-gradient(140deg,hsl(var(--h) 60% 40% / .46),hsl(var(--h) 62% 24% / .34));border-color:hsl(var(--h) 60% 65% / .5)}
:root[data-theme="light"] .stack .item{background:linear-gradient(140deg,hsl(var(--h) 55% 34% / .68),hsl(var(--h) 60% 22% / .58))}
.stack .item .cl,.stack .item h3,.stack .item .meta{text-shadow:0 1px 4px rgba(0,0,0,.6)}
.stack .item{-webkit-backdrop-filter:blur(7px) saturate(1.4);backdrop-filter:blur(7px) saturate(1.4)}

/* ===== Zivopisna pozadina sela ===== */
:root{--sk1:#a9d8f2;--sk2:#d8ecee;--sk3:#fbe9c4;--l1:#b9d6ab;--l2:#93c37d;--l3:#6ca858;--l4:#4d8a3c;--lw:#e6c868;--lg:#82ba68;--road:#dccb9e;--t1:#58985a;--t2:#2f6d37;--wall:#f8ecd2;--wall2:#e2cfa4;--roof:#c85f43;--roof2:#9c4331;--barn:#b94a3c;--barn2:#8f372d;--win:#8cbfe0;--winglow:#ffe9a8;--door:#8a5a3b;--hay:#e6c46a;--fence:#a98a5e;--sail:#f4efe0;--bird:rgba(40,60,50,.55)}
:root[data-theme="dark"]{--sk1:#07112a;--sk2:#16344a;--sk3:#3a5a52;--l1:#2a4d48;--l2:#1d3f2c;--l3:#15301f;--l4:#0f2418;--lw:#74683a;--lg:#33603a;--road:#4d4c3b;--t1:#276038;--t2:#15402a;--wall:#c9be9d;--wall2:#9a9074;--roof:#8a4034;--roof2:#6a3027;--barn:#74332d;--barn2:#552622;--win:#ffd27a;--winglow:#ffc95e;--door:#4e3524;--hay:#a8894a;--fence:#6e5d44;--sail:#d8d2bf;--bird:rgba(0,0,0,0)}
body{background:var(--sk3)}
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ambient .sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sk1) 0%,var(--sk2) 48%,var(--sk3) 78%)}
.ambient .orb{position:absolute;right:12%;top:9%;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fffbe3,#ffe8a1 60%,#ffd36b);box-shadow:0 0 70px 30px rgba(255,226,140,.55),0 0 160px 80px rgba(255,226,140,.25);animation:orb 12s ease-in-out infinite}
:root[data-theme="dark"] .ambient .orb{width:64px;height:64px;background:radial-gradient(circle at 36% 38%,#fffef2,#e9eefc 62%,#c5d0ea);box-shadow:0 0 50px 18px rgba(190,205,255,.35),0 0 140px 60px rgba(150,170,255,.18)}
@keyframes orb{50%{transform:translateY(8px) scale(1.04)}}
.ambient .stars{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;opacity:0;box-shadow:30vw 37vh 0 0px rgba(255,255,255,0.7),77vw 30vh 0 0px rgba(255,255,255,0.9),1vw 53vh 0 1px rgba(255,255,255,0.7),70vw 14vh 0 0px rgba(255,255,255,0.9),60vw 34vh 0 1px rgba(255,255,255,0.7),81vw 55vh 0 0px rgba(255,255,255,0.5),81vw 9vh 0 1px rgba(255,255,255,0.9),1vw 42vh 0 0px rgba(255,255,255,0.5),97vw 37vh 0 0px rgba(255,255,255,0.7),99vw 1vh 0 0px rgba(255,255,255,0.7),76vw 46vh 0 1px rgba(255,255,255,0.9),100vw 27vh 0 1px rgba(255,255,255,0.9),73vw 28vh 0 0px rgba(255,255,255,0.7),12vw 2vh 0 0px rgba(255,255,255,0.7),27vw 16vh 0 1px rgba(255,255,255,0.9),38vw 26vh 0 1px rgba(255,255,255,0.9),44vw 34vh 0 1px rgba(255,255,255,0.9),29vw 21vh 0 0px rgba(255,255,255,0.7),77vw 42vh 0 0px rgba(255,255,255,0.9),41vw 34vh 0 0px rgba(255,255,255,0.9),83vw 13vh 0 0px rgba(255,255,255,0.7),15vw 4vh 0 1px rgba(255,255,255,0.9),61vw 5vh 0 0px rgba(255,255,255,0.5),52vw 9vh 0 0px rgba(255,255,255,0.7),54vw 49vh 0 1px rgba(255,255,255,0.5),5vw 38vh 0 0px rgba(255,255,255,0.7),91vw 37vh 0 0px rgba(255,255,255,0.9),35vw 32vh 0 0px rgba(255,255,255,0.5),39vw 0vh 0 0px rgba(255,255,255,0.5),76vw 34vh 0 0px rgba(255,255,255,0.5),52vw 18vh 0 0px rgba(255,255,255,0.5),88vw 2vh 0 0px rgba(255,255,255,0.7),46vw 8vh 0 1px rgba(255,255,255,0.7),58vw 55vh 0 1px rgba(255,255,255,0.9),76vw 43vh 0 0px rgba(255,255,255,0.9),64vw 17vh 0 1px rgba(255,255,255,0.9),92vw 45vh 0 0px rgba(255,255,255,0.7),55vw 16vh 0 0px rgba(255,255,255,0.9),43vw 0vh 0 1px rgba(255,255,255,0.9),40vw 1vh 0 1px rgba(255,255,255,0.9),75vw 40vh 0 0px rgba(255,255,255,0.5),81vw 40vh 0 0px rgba(255,255,255,0.7),45vw 43vh 0 0px rgba(255,255,255,0.9),90vw 17vh 0 1px rgba(255,255,255,0.5),75vw 3vh 0 0px rgba(255,255,255,0.7),32vw 40vh 0 1px rgba(255,255,255,0.7),75vw 38vh 0 0px rgba(255,255,255,0.5),46vw 11vh 0 0px rgba(255,255,255,0.7),76vw 16vh 0 0px rgba(255,255,255,0.7),13vw 49vh 0 0px rgba(255,255,255,0.9),87vw 47vh 0 0px rgba(255,255,255,0.7),64vw 14vh 0 0px rgba(255,255,255,0.5),41vw 11vh 0 1px rgba(255,255,255,0.9),89vw 6vh 0 0px rgba(255,255,255,0.9),41vw 21vh 0 0px rgba(255,255,255,0.7),21vw 5vh 0 0px rgba(255,255,255,0.9),83vw 13vh 0 1px rgba(255,255,255,0.7),28vw 50vh 0 0px rgba(255,255,255,0.5),67vw 12vh 0 0px rgba(255,255,255,0.9),23vw 55vh 0 0px rgba(255,255,255,0.7),82vw 5vh 0 0px rgba(255,255,255,0.9),16vw 26vh 0 0px rgba(255,255,255,0.9),34vw 29vh 0 0px rgba(255,255,255,0.9),53vw 18vh 0 1px rgba(255,255,255,0.9),52vw 2vh 0 1px rgba(255,255,255,0.5),25vw 0vh 0 1px rgba(255,255,255,0.9),65vw 27vh 0 0px rgba(255,255,255,0.5),95vw 29vh 0 0px rgba(255,255,255,0.9),43vw 14vh 0 0px rgba(255,255,255,0.9),36vw 7vh 0 0px rgba(255,255,255,0.5);animation:tw 5s ease-in-out infinite}
:root[data-theme="dark"] .ambient .stars{opacity:1}
@keyframes tw{50%{opacity:.55}}
.ambient .cloud{position:absolute;left:-30vw;width:340px;height:90px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.55) 55%,transparent);filter:blur(7px);opacity:.85;animation:cl 90s linear infinite}
.ambient .cloud:before,.ambient .cloud:after{content:'';position:absolute;border-radius:50%;background:inherit}
.ambient .cloud:before{width:55%;height:120%;left:12%;top:-45%}.ambient .cloud:after{width:45%;height:110%;right:10%;top:-30%}
.ambient .c1{top:11%;animation-duration:110s}.ambient .c2{top:22%;width:260px;opacity:.6;animation-duration:150s;animation-delay:-60s}
.ambient .c3{top:6%;width:220px;opacity:.5;animation-duration:180s;animation-delay:-120s}.ambient .c4{top:30%;width:300px;opacity:.45;animation-duration:130s;animation-delay:-30s}
:root[data-theme="dark"] .ambient .cloud{background:radial-gradient(closest-side,rgba(150,170,210,.5),rgba(110,130,180,.25) 55%,transparent);opacity:.7}
@keyframes cl{to{transform:translateX(160vw)}}
.ambient .bird{position:absolute;left:-60px;animation:fly 38s linear infinite}
.ambient .b1{top:16%}.ambient .b2{top:19%;animation-delay:-3s;animation-duration:41s}.ambient .b3{top:14%;animation-delay:-6s;animation-duration:44s}.ambient .b4{top:21%;animation-delay:-20s;animation-duration:52s}
@keyframes fly{0%{transform:translate(0,0)}25%{transform:translate(30vw,-14px)}50%{transform:translate(60vw,6px)}75%{transform:translate(90vw,-10px)}100%{transform:translate(120vw,0)}}
:root[data-theme="dark"] .ambient .bird{display:none}
.ambient .fx i{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 8px 2px rgba(255,255,255,.5);opacity:0;animation:mote 12s ease-in-out infinite}
:root[data-theme="dark"] .ambient .fx i{background:#e6ff8a;box-shadow:0 0 10px 3px rgba(220,255,120,.7),0 0 22px 6px rgba(200,255,100,.3)}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}20%{opacity:.95}50%{transform:translate(var(--dx,20px),-34px)}80%{opacity:.8}100%{opacity:0;transform:translate(calc(var(--dx,20px)*-.5),-70px)}}
.ambient .land{position:absolute;left:0;bottom:0;width:100%;height:auto;max-height:78vh}
.ambient .blades{animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ambient .smoke circle{fill:var(--sail);opacity:0;animation:smoke 7s ease-out infinite}
@keyframes smoke{0%{opacity:.7;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(26px,-60px) scale(2.6)}}
:root[data-theme="dark"] .ambient .winglow{opacity:1}
:root:not([data-theme="dark"]) .ambient .winglow{opacity:0}
.ambient .drive{animation:drv 75s linear infinite}
@keyframes drv{from{transform:translateX(1320px)}to{transform:translateX(-260px)}}
.ambient .wheel{animation:spin 2.4s linear infinite}
.ambient .puff{fill:#bbb;opacity:0;animation:pf 1.6s ease-out infinite}.ambient .puff.p2{animation-delay:-.8s}
@keyframes pf{0%{opacity:.6;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-14px,-22px) scale(2)}}
.ambient .sway{transform-origin:50% 100%;animation:sw 6s ease-in-out infinite}
@keyframes sw{50%{transform:skewX(1.2deg)}}
.ambient .vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.18))}
:root[data-theme="dark"] body{background:var(--sk3)}
@media (max-aspect-ratio:1/1){.ambient .land{width:auto;height:50vh;max-height:none;left:0}}

/* zaglavlje: naslov iznad, slika ispod, bez preklapanja */
.hero .txt{position:static;padding:calc(var(--sat) + 16px) 20px 12px}
.hero .txt:before{display:none}
.scene.hs{height:118px;border-radius:0 0 34px 34px;margin-top:2px}
:root{--hs1:#bfe6f5;--hs2:#fde9b8;--h1:#a9d27a;--h2:#7fb85a;--h3:#5d9a46;--hh:#f1e3b8;--hb:#c8553d;--hr:#b8512f;--hw:#8a5a32;--tr:#4c9a4a}
:root[data-theme="dark"]{--hs1:#0e1a30;--hs2:#27406a;--h1:#274a2c;--h2:#1d3b24;--h3:#16301d;--hh:#8d8468;--hb:#7a3326;--hr:#6e3524;--hw:#5a3d24;--tr:#2f6a3a}
@keyframes hspin{to{transform:rotate(360deg)}}
.hs .bl{animation:hspin 14s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes hfl{0%,100%{opacity:1}50%{opacity:.45}}
.hs .fl{animation:hfl 2.4s ease-in-out infinite}
@keyframes hbd{0%,100%{opacity:.7}50%{opacity:.3}}
.hs .bd{animation:hbd 3s ease-in-out infinite}
.scene.ht{height:auto;aspect-ratio:390/100;border-radius:0;margin-top:-56px;background:none;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.hero .txt{padding-bottom:6px}
/* pejzaz podignut iznad donje trake da se vidi cela kuca */
.ambient .land{bottom:calc(var(--sab) + 82px)}
.ambient:after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--sab) + 84px);background:var(--l4)}

/* performanse skrolovanja */
.ambient{contain:strict;transform:translateZ(0)}
.ambient .cloud,.ambient .bird,.ambient .drive,.ambient .blades,.ambient .fx i{will-change:transform}
.scrolling .ambient *{animation-play-state:paused!important}