/* Design "Peškir" (see peskir.js) for christenings: a white linen christening towel with gold embroidery as the
   intro, folk embroidery borders (dizajn/vez.svg) on white cards, doves, and every text in the church letters of
   the towel (Monomakh; it has one weight, so no fake bold). Active when <html data-dizajn="peskir">. */
/* The towel carries the colours too, so it also opens another design (v.uvodTip = 'peskir') */
:root[data-dizajn="peskir"],.k-uvod{
  --k-crvena:#9e1b22; --k-crvena2:#6e1015; --k-zlato:#b8862f; --k-zlato-l:rgba(184,134,47,.5); --k-tekst:#2b2522; --k-sivo:#6b6056;
  --k-sjena:rgba(110,80,30,.14); --k-krem:#fbf6ec;
  --k-platno:repeating-linear-gradient(90deg,rgba(120,100,70,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(120,100,70,.03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,transparent 0 22px,rgba(120,100,70,.022) 22px 44px);
  --acc:var(--k-crvena); --acc-deep:var(--k-crvena2); --ink:var(--k-tekst); --muted:var(--k-sivo); --line:#eadfcb; --on-acc:#fff;
  --bg:#fdfbf6; --bg2:#f6efe2; --paper:#fff; --gold:var(--k-zlato);
  --f-head:"Monomakh",Georgia,serif; --f-body:"Monomakh",Georgia,serif; --f-script:"Monomakh",Georgia,serif;
}

:root[data-dizajn="peskir"] body{background:var(--k-platno),#fbf7ef;color:var(--k-tekst);font-family:var(--f-body);font-size:17.5px;font-synthesis:none}
/* The folk borders run edge to edge; they are cut at the screen edge instead of scrolling sideways */
:root[data-dizajn="peskir"] .wrap{position:relative;z-index:1;gap:40px;padding-bottom:0;overflow-x:hidden;overflow-x:clip}
:root[data-dizajn="peskir"] .env,:root[data-dizajn="peskir"] .hint,
:root[data-dizajn="peskir"] .p-kraj,:root[data-dizajn="peskir"] .p-mali-pecat{display:none}
:root[data-dizajn="peskir"] .oznaka,:root[data-dizajn="peskir"] .jezik{border-color:var(--k-zlato-l);font-weight:400}
:root[data-dizajn="peskir"] .veliko-a{font-family:inherit}
:root[data-dizajn="peskir"] .foil{background:none;-webkit-text-fill-color:currentColor;color:var(--k-crvena)}

/* ---------- Gold embroidery (towel, name, crosses) ---------- */
.k-vez-tekst{font-family:"Monomakh",Georgia,serif}
.k-vez-tekst text{fill-opacity:0}
.k-vez-tekst .k-crta{stroke:#7a5a1f;stroke-width:.7;paint-order:stroke;stroke-dasharray:3000;stroke-dashoffset:3000}
.k-vezeno svg,.k-ime svg{filter:drop-shadow(0 1px .6px rgba(90,60,15,.45))}
.k-krst-svg{display:block;overflow:visible;filter:drop-shadow(0 1px .6px rgba(90,60,15,.4))}
.k-krst-svg .k-crta > *{stroke-dasharray:100;stroke-dashoffset:100}
.k-krst-svg .k-sjaj{opacity:0}
/* The thread sews the outline, then the gold fills in: on the towel's face once it is shown, on its back after the
   turn, and on the page once it opens */
.k-uvod .lice{--kk:0s;--kt:.6s}
.k-uvod .nalicje{--kk:.55s;--kt:.75s}
#k-hero{--kk:1s;--kt:.35s}
.k-uvod.vezi .lice .k-krst-svg .k-crta > *,.k-uvod.okrenut .nalicje .k-krst-svg .k-crta > *,:root.otvoreno #k-hero .k-krst-svg .k-crta > *{animation:k-sij 1.6s ease-in-out var(--kk) forwards}
.k-uvod.vezi .lice .k-sjaj,.k-uvod.okrenut .nalicje .k-sjaj,:root.otvoreno #k-hero .k-sjaj{animation:k-pojavi .7s ease calc(var(--kk) + 1.4s) forwards}
.k-uvod.vezi .lice text.k-crta,.k-uvod.okrenut .nalicje text.k-crta,:root.otvoreno #k-hero text.k-crta{animation:k-sij 1.7s ease-in-out var(--kt) forwards,k-ispuni .8s ease calc(var(--kt) + 1.1s) forwards}
.k-uvod.vezi .lice text.k-bod,.k-uvod.okrenut .nalicje text.k-bod,:root.otvoreno #k-hero text.k-bod{animation:k-ispuni .8s ease calc(var(--kt) + 1.3s) forwards}

/* ---------- Intro: the christening towel ---------- */
.k-uvod{position:fixed;inset:0;z-index:50;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;
  padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));background:radial-gradient(120% 75% at 50% 32%,#fffaf0 0%,#f3e7d0 58%,#e2cfab 100%);
  transition:opacity .9s ease;-webkit-tap-highlight-color:transparent;font-family:"Monomakh",Georgia,serif}
.k-uvod:focus-visible{outline:3px solid #b8862f;outline-offset:-6px}
.k-trunke{position:absolute;inset:0;pointer-events:none}
.k-trunke i{position:absolute;bottom:-12px;left:var(--x);width:var(--s,6px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff4cf 0 30%,rgba(232,196,108,.0) 72%);animation:k-trunka var(--t,14s) linear var(--k,0s) infinite}
.k-trunke i:nth-child(1){--x:12%;--t:15s;--k:-3s}.k-trunke i:nth-child(2){--x:28%;--t:19s;--k:-11s;--s:9px}
.k-trunke i:nth-child(3){--x:44%;--t:13s;--k:-7s}.k-trunke i:nth-child(4){--x:61%;--t:17s;--k:-1s;--s:8px}
.k-trunke i:nth-child(5){--x:77%;--t:14s;--k:-9s}.k-trunke i:nth-child(6){--x:90%;--t:21s;--k:-15s;--s:10px}
.k-trunke i:nth-child(7){--x:5%;--t:18s;--k:-13s;--s:8px}.k-trunke i:nth-child(8){--x:53%;--t:23s;--k:-18s;--s:5px}
.k-peskir{flex:none;width:min(78vw,330px,calc((100svh - 190px) * .72));aspect-ratio:3/4.15;position:relative;transition:transform 1.4s cubic-bezier(.55,0,.8,.3)}
.k-njihaj{width:100%;height:100%;perspective:1400px;transform-origin:50% 0;animation:k-njihaj 5.5s ease-in-out infinite}
.k-platno{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.45,.05,.25,1)}
.k-strana{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;display:flex;flex-direction:column;padding:16px 0 14px;
  background:linear-gradient(100deg,rgba(80,60,30,.07),transparent 16%,rgba(255,255,255,.55) 32%,transparent 48%,rgba(80,60,30,.045) 68%,transparent 84%,rgba(80,60,30,.07)),var(--k-platno),#fdfbf6;
  box-shadow:0 34px 50px -18px rgba(90,60,20,.38),0 6px 14px rgba(90,60,20,.12)}
.k-strana.nalicje{transform:rotateY(180deg);background:linear-gradient(260deg,rgba(80,60,30,.07),transparent 16%,rgba(255,255,255,.5) 32%,transparent 48%,rgba(80,60,30,.045) 68%,transparent 84%,rgba(80,60,30,.07)),var(--k-platno),#fdfbf6}
.k-vez{flex:none;height:30px;background:url(/dizajn/vez.svg) repeat-x center/auto 26px}
.k-vezeno{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px 10px}
.k-vezeno svg{width:100%;height:100%;overflow:visible}
/* Fringe at the bottom edge, swaying a little */
.k-resice{position:absolute;left:3%;right:3%;bottom:-24px;height:26px;background:repeating-linear-gradient(90deg,#f1ebdf 0 2px,transparent 2px 5px);
  -webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent);transform-origin:50% 0;animation:k-resice 3.2s ease-in-out infinite}
.k-hint{margin:0;font-family:"Monomakh",Georgia,serif;font-size:18px;letter-spacing:.1em;color:#8a6526;animation:k-puls 2.4s ease-in-out infinite;text-align:center}
.k-uvod.okrenut .k-platno{transform:rotateY(180deg)}
.k-uvod.okrenut .k-hint{animation:none;opacity:0;transition:opacity .4s}
.k-uvod.dize .k-peskir{transform:translateY(-130vh)}
.k-uvod.gotovo{opacity:0;pointer-events:none}

/* ---------- Intro video: church doors (v.uvodVideo) ---------- */
.k-uvod.video{padding:0;gap:0;background:#1b140c}
.k-uvod.video > :not(.k-vrata){display:none}
.k-vrata{position:absolute;inset:0;overflow:hidden;background:#1b140c center/cover no-repeat}
/* On a wide screen the whole picture is shown, over a blurred copy of it */
.k-vrata::before{content:"";position:absolute;inset:-40px;background:inherit;filter:blur(28px) brightness(.8)}
.k-vrata video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 81.4%;transition:transform 1.5s cubic-bezier(.55,0,.75,.4)}
/* The open doors, shown only when the video cannot play */
.k-vrata-kraj{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.1s ease,transform 1.5s cubic-bezier(.55,0,.75,.4);pointer-events:none}
@media (min-aspect-ratio:3/4){.k-vrata video{object-fit:contain}.k-vrata-kraj{background-size:contain}}
.k-uvod.rezerva .k-vrata-kraj{opacity:1}
/* Warm light leaking through the crack of the closed doors, placed by peskir.js over the door leaves */
.k-vrata-sjaj{position:absolute;width:var(--w,70px);height:var(--h,130px);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 55% at 50% 55%,rgba(255,196,84,.55),rgba(255,180,60,.18) 55%,transparent 75%);mix-blend-mode:screen;animation:k-vrata-sjaj 2.2s ease-in-out infinite}
.k-vrata-sjaj::before{content:"";position:absolute;left:50%;top:6%;bottom:4%;width:3px;margin-left:-1.5px;border-radius:2px;
  background:linear-gradient(rgba(255,230,160,0),#ffe2a0 25%,#fff4d6 60%,rgba(255,230,160,0));box-shadow:0 0 8px 2px rgba(255,200,90,.9),0 0 22px 6px rgba(255,190,70,.5)}
.k-vrata-sjaj::after{content:"";position:absolute;inset:-4px;border-radius:40% 40% 8px 8px / 26% 26% 8px 8px;border:2px solid rgba(232,176,72,.9);animation:k-vrata-val 2.2s ease-out infinite}
.k-vrata-hint{position:absolute;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap;font-family:"Monomakh",Georgia,serif;font-size:19px;letter-spacing:.06em;color:#7a1218;
  background:rgba(255,250,238,.92);border:1px solid rgba(184,134,47,.6);border-radius:99px;padding:7px 20px 8px;box-shadow:0 6px 18px rgba(60,35,10,.25);animation:k-puls 2.4s ease-in-out infinite}
/* Walking in: the camera moves through the open doors into the light */
.k-vrata-svjetlo{position:absolute;inset:0;background:radial-gradient(circle at 50% 81%,#fffaf0 0%,#fbecc8 45%,#f3dca6 100%);opacity:0;transition:opacity .9s ease;pointer-events:none}
.k-uvod.vrata-otvorena .k-vrata-sjaj,.k-uvod.vrata-otvorena .k-vrata-hint{opacity:0;transition:opacity .35s;animation:none}
.k-uvod.ulazi .k-vrata video,.k-uvod.ulazi .k-vrata-kraj{transform:scale(3.2)}
.k-uvod.ulazi .k-vrata-svjetlo{opacity:1;transition-delay:.55s}
@keyframes k-vrata-sjaj{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes k-vrata-val{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* ---------- Top of the page ---------- */
.k-hero{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.k-traka{flex:none;width:100vw;height:30px;background:url(/dizajn/vez.svg) repeat-x center/auto 26px}
.k-golub-gore{width:118px;margin:20px auto 0;animation:k-lebdi 4.2s ease-in-out infinite}
.k-golub-gore svg,.k-ukras svg,.k-kraj-golub svg{display:block;width:100%;height:auto;overflow:visible}
.k-ime{margin:0;width:min(100%,430px);font-weight:400}
.k-ime svg{display:block;width:100%;height:auto;overflow:visible}
.k-poziv{margin:2px 0 30px;font-family:var(--f-head);font-size:clamp(21px,6vw,26px);line-height:1.3;color:var(--k-crvena);letter-spacing:.02em;text-wrap:balance;padding:0 10px}
/* The big photo spans the whole screen width, whole and unframed, with soft cloud-like edges like the gallery */
.k-foto{flex:none;width:min(100vw,560px)}
.k-foto img{width:100%;height:auto;display:block}
.k-foto.cb img{filter:grayscale(1) contrast(1.04)}
.k-datum{margin:34px 0 0;font-family:var(--f-head);font-size:20px;color:var(--k-tekst);display:inline-flex;align-items:center;gap:12px;padding:0 8px}
.k-datum::before,.k-datum::after{content:"";flex:none;width:12px;height:17px;background:url(/dizajn/krst.svg) center/contain no-repeat}
.k-krst{width:54px;margin:18px auto 0}
.k-krst svg{width:100%;height:auto}

/* Doves: the wings flap around the shoulder */
.k-golub .krilo{transform-box:view-box;animation:k-mahni .55s ease-in-out infinite}
.k-golub .krilo.z{transform-origin:60px 40px;animation-delay:-.08s}
.k-golub .krilo.b{transform-origin:52px 42px}
.k-golub-gore .krilo,.k-ukras .krilo,.k-kraj-golub .krilo{animation-duration:1.9s}

/* ---------- Cards with a folk border like the trim of a sleeve ---------- */
:root[data-dizajn="peskir"] main > section{position:relative;background:#fff;border:0;border-radius:18px;padding:56px 22px 30px;text-align:center;box-shadow:0 12px 30px var(--k-sjena)}
:root[data-dizajn="peskir"] main > section:not(.muz)::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;border-radius:18px 18px 0 0;background:url(/dizajn/vez.svg) repeat-x center/auto 22px,var(--k-krem);border-bottom:1px solid rgba(158,27,34,.12)}
:root[data-dizajn="peskir"] main > section:not(.muz)::after{content:"";position:absolute;inset:38px 8px 8px;border:1px solid rgba(184,134,47,.3);border-radius:12px;pointer-events:none}
.k-ukras{position:absolute;top:-34px;width:58px;z-index:2;animation:k-lebdi 4s ease-in-out infinite}
.k-ukras.d{right:12px}
.k-ukras.l{left:12px;animation-delay:-2s}
.k-ukras.golub{width:78px;top:-30px}
.k-ukras.golub.d svg{transform:scaleX(-1)}
:root[data-dizajn="peskir"] h2{font-family:var(--f-head);font-weight:400;font-size:32px;line-height:1.2;color:var(--k-crvena);margin:0 0 16px}
:root[data-dizajn="peskir"] h2 small{font-family:var(--f-body);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--k-zlato);font-weight:400;margin-bottom:6px}
:root[data-dizajn="peskir"] #s-uvod h2 small{font-family:var(--f-head);font-size:32px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--k-crvena);margin:0}
:root[data-dizajn="peskir"] #s-uvod h2 > span{display:none}
:root[data-dizajn="peskir"] .intro{font-family:var(--f-body);font-style:normal;font-weight:400;font-size:20px;line-height:1.6;color:var(--k-tekst)}

/* Countdown (when the day is still ahead) */
:root[data-dizajn="peskir"] .count-l{color:var(--k-zlato);margin-top:24px}
:root[data-dizajn="peskir"] .count{gap:6px}
:root[data-dizajn="peskir"] .count > div{font-family:var(--f-head);font-weight:400;font-size:30px;color:var(--k-crvena)}
:root[data-dizajn="peskir"] .count span{font-family:var(--f-body);font-weight:400}

/* Programme: round icons with a gold ring on a dotted line */
:root[data-dizajn="peskir"] .prog{position:relative;text-align:left}
:root[data-dizajn="peskir"] .prog::before{content:"";position:absolute;left:23px;top:34px;bottom:34px;border-left:2px dotted var(--k-zlato-l)}
:root[data-dizajn="peskir"] .prog li{position:relative;grid-template-columns:48px 1fr;grid-template-areas:"ik vr" "ik op" "ik ka";column-gap:16px;row-gap:2px;align-items:center;border:0;padding:12px 0}
:root[data-dizajn="peskir"] .prog time{grid-area:vr;font-family:var(--f-head);font-weight:400;color:var(--k-crvena);font-size:21px}
:root[data-dizajn="peskir"] .prog time:empty{display:none}
:root[data-dizajn="peskir"] .prog li > div{grid-area:op}
:root[data-dizajn="peskir"] .prog b{font-weight:400;font-size:20px}
:root[data-dizajn="peskir"] .prog p{font-size:16.5px;color:var(--k-sivo)}
.k-ikona{grid-area:ik;align-self:start;width:48px;height:48px;border-radius:50%;background:var(--k-krem);color:var(--k-zlato);display:grid;place-items:center;box-shadow:0 0 0 1.5px var(--k-zlato-l),0 0 0 5px #fff;position:relative}
.k-ikona svg{width:24px;height:24px}
:root[data-dizajn="peskir"] .p-karta{grid-area:ka;justify-self:start;display:inline-flex;align-items:center;margin-top:8px;padding:7px 14px;border:0;border-radius:99px;background:#f8efe4;color:var(--k-crvena);font-family:var(--f-body);font-weight:400;font-size:15px;letter-spacing:.02em;text-transform:none;text-decoration:none}
:root[data-dizajn="peskir"] .loc .btn-o,:root[data-dizajn="peskir"] .btn-o{border:1.5px solid var(--k-crvena);color:var(--k-crvena);font-weight:400}

/* Gallery: the photos alone, no title and no card, with edges that fade softly like a cloud */
:root[data-dizajn="peskir"] #galerija{background:none;box-shadow:none;padding:0;border-radius:0}
:root[data-dizajn="peskir"] #galerija::before,:root[data-dizajn="peskir"] #galerija::after,:root[data-dizajn="peskir"] #galerija > h2{display:none}
:root[data-dizajn="peskir"] .gal{display:flex;flex-direction:column;gap:8px;padding:0}
:root[data-dizajn="peskir"] #gal > img{width:100%;height:auto;aspect-ratio:auto;border-radius:0;background:none}
.k-foto img,:root[data-dizajn="peskir"] #gal > img{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}

/* RSVP */
:root[data-dizajn="peskir"] #rsvp input[type=text],:root[data-dizajn="peskir"] #rsvp select,:root[data-dizajn="peskir"] #rsvp textarea{border:1.5px solid var(--line);border-radius:14px;background:var(--bg);padding:11px 14px}
:root[data-dizajn="peskir"] #rsvp input:focus-visible,:root[data-dizajn="peskir"] #rsvp select:focus-visible,:root[data-dizajn="peskir"] #rsvp textarea:focus-visible{outline:0;border-color:var(--k-crvena);box-shadow:0 0 0 4px rgba(158,27,34,.1)}
:root[data-dizajn="peskir"] #rsvp label,:root[data-dizajn="peskir"] #rsvp .lbl{font-weight:400;font-size:17px;color:var(--k-tekst);text-align:left}
:root[data-dizajn="peskir"] .choice label{border:1.5px solid var(--line);border-radius:99px;font-weight:400;font-size:17px;background:#fff}
:root[data-dizajn="peskir"] .choice input:checked + label{background:var(--k-crvena);border-color:var(--k-crvena);color:#fff;box-shadow:0 6px 14px rgba(158,27,34,.2)}
:root[data-dizajn="peskir"] .submit{border-radius:99px;font-family:var(--f-body);font-weight:400;letter-spacing:.1em;font-size:18px;padding:16px;background:var(--goldbtn);box-shadow:0 10px 22px rgba(184,134,47,.32)}
:root[data-dizajn="peskir"] .step button{border:1.5px solid var(--line);background:#fff;color:var(--k-crvena);font-weight:400}
:root[data-dizajn="peskir"] .meni-red{border-bottom:1.5px dotted var(--line)}
:root[data-dizajn="peskir"] .pchip{border:1px solid var(--k-zlato-l);border-radius:99px;background:var(--k-krem);color:var(--k-tekst);font-weight:400}
:root[data-dizajn="peskir"] .deadline{font-weight:400;font-size:16px;color:var(--k-sivo)}
:root[data-dizajn="peskir"] .thanks .big{font-family:var(--f-head);font-size:46px;line-height:1.3;color:var(--k-crvena)}
:root[data-dizajn="peskir"] .muz{border-radius:99px;padding:12px 22px 12px 12px}

/* Closing */
:root[data-dizajn="peskir"] footer{padding:24px 0 0;gap:12px}
.k-kraj-golub{width:110px;animation:k-lebdi 4.4s ease-in-out infinite}
.k-kraj{font-family:var(--f-head);font-size:clamp(28px,8.4vw,36px);line-height:1.3;color:var(--k-crvena);margin:0;padding:0 12px;text-wrap:balance}
:root[data-dizajn="peskir"] footer .potpis{font-family:var(--f-head);font-size:28px;line-height:1.4;color:var(--k-tekst)}
:root[data-dizajn="peskir"] footer::after{content:"";flex:none;width:100vw;height:30px;margin-top:22px;background:url(/dizajn/vez.svg) repeat-x center/auto 26px}

/* ---------- Doves flying through the page ---------- */
.k-nebo{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.k-let{position:absolute;left:0;width:var(--v,60px);pointer-events:none;animation:k-preleti var(--t,11s) linear forwards;will-change:transform}
.k-let.lijevo{animation-direction:reverse}
.k-let.lijevo .k-golub{transform:scaleX(-1)}
.k-talas{animation:k-talas 2.4s ease-in-out var(--k,0s) infinite}
.k-golub{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 4px 6px rgba(60,70,90,.15))}
/* Only the dove itself takes a tap, so buttons under its flight path stay usable */
.k-let .tijelo{pointer-events:auto;cursor:pointer}
.k-let.slavlje{top:auto;bottom:-90px;animation:k-jato var(--t,3.5s) cubic-bezier(.4,0,.8,.6) forwards}
.k-let.slavlje .k-golub{transform:rotate(-28deg)}
.k-let.slavlje.lijevo .k-golub{transform:scaleX(-1) rotate(-28deg)}
.k-let.bjezi{animation:k-bjezi 1.15s cubic-bezier(.5,0,.9,.5) forwards}
.k-let.bjezi .krilo{animation-duration:.2s}
.k-let.bjezi .k-golub{transform:rotate(-22deg)}
.k-let.bjezi.lijevo .k-golub{transform:scaleX(-1) rotate(-22deg)}
.k-pero{position:fixed;width:12px;height:24px;z-index:60;pointer-events:none;animation:k-pero var(--t,2.4s) ease-in var(--k,0s) both}
.k-pero svg{display:block;width:100%;height:100%}
.k-iskra{position:fixed;left:0;top:0;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px 2px rgba(240,205,120,.65);pointer-events:none;z-index:60;animation:k-iskra var(--t,.9s) cubic-bezier(.12,.6,.35,1) forwards}
.k-iskra.krug{width:5px;height:5px}

/* Reveal on scroll: a gentle rise */
:root[data-dizajn="peskir"] [data-otkrij="blago"]{transform:translateY(26px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--kasni,0s)}
:root[data-dizajn="peskir"] [data-otkrij].vidljiv{opacity:1;transform:none}

@keyframes k-sij{to{stroke-dashoffset:0}}
@keyframes k-ispuni{to{fill-opacity:1}}
@keyframes k-pojavi{to{opacity:1}}
@keyframes k-njihaj{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes k-resice{0%,100%{transform:skewX(-5deg)}50%{transform:skewX(5deg)}}
@keyframes k-trunka{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-105vh);opacity:0}}
@keyframes k-puls{50%{opacity:.4}}
@keyframes k-lebdi{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes k-mahni{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.5)}}
@keyframes k-preleti{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 40px))}}
@keyframes k-talas{0%,100%{transform:translateY(-14px)}50%{transform:translateY(14px)}}
@keyframes k-jato{to{transform:translate(var(--dx,0px),calc(-100vh - 200px))}}
@keyframes k-bjezi{to{transform:translate(var(--bx,160px),-110vh)}}
@keyframes k-pero{0%{opacity:1;transform:translate(0,0) rotate(0)}25%{transform:translate(calc(var(--dx) * .3 + 14px),40px) rotate(35deg)}50%{transform:translate(calc(var(--dx) * .6 - 14px),85px) rotate(-25deg)}75%{opacity:1;transform:translate(calc(var(--dx) * .85 + 12px),130px) rotate(30deg)}100%{opacity:0;transform:translate(var(--dx),170px) rotate(-10deg)}}
@keyframes k-iskra{0%{transform:translate(var(--x0),var(--y0))}75%{opacity:1}100%{transform:translate(calc(var(--x0) + var(--dx)),calc(var(--y0) + var(--dy)));opacity:0}}

@media (prefers-reduced-motion:reduce){
  .k-njihaj,.k-resice,.k-trunke i,.k-hint,.k-vrata-sjaj,.k-vrata-sjaj::after,.k-vrata-hint,.k-golub-gore,.k-ukras,.k-kraj-golub,.k-golub .krilo{animation:none}
  .k-vez-tekst text{fill-opacity:1;animation:none!important}
  .k-vez-tekst .k-crta,.k-krst-svg .k-crta > *{stroke-dashoffset:0;animation:none!important}
  .k-krst-svg .k-sjaj{opacity:1;animation:none!important}
  .k-platno,.k-peskir,.k-vrata video{transition:none}
  .k-uvod.ulazi .k-vrata video,.k-uvod.ulazi .k-vrata-kraj{transform:none}
  :root[data-dizajn="peskir"] [data-otkrij="blago"]{transform:none;opacity:1}
}