/* Design "Maslina" (maslina.js): olive linen envelope with crochet lace on white hydrangeas, then a flat-lay collage
   (open envelope with a record, calla lilies, ivory card, carved frame, oval pearl frame with a painted photo, wax seal).
   Active when <html data-dizajn="maslina">; colour comes from data-boja (maslina / bordo). */
:root[data-dizajn="maslina"],.m-uvod{
  --m-kov:#7b7f45; --m-kov-svj:#8a8e53; --m-kov-tamno:#5d6133; --m-pecat-filter:sepia(1) saturate(1.1) hue-rotate(28deg) brightness(1.05) contrast(.95);
  --m-tekst:#2e2b23; --m-sivo:#6e6a5b; --m-zel:#4b5027; --m-bordo:#6d1f2b; --m-papir:#f2ede3; --m-slonovaca:#fbf8f1;
  --acc:var(--m-zel); --ink:var(--m-tekst); --muted:var(--m-sivo); --line:rgba(46,43,35,.16); --on-acc:#fff;
}
:root[data-dizajn="maslina"][data-boja="bordo"],:root[data-dizajn="maslina"][data-boja="bordo"] .m-uvod{
  --m-kov:#6e2330; --m-kov-svj:#7c2c39; --m-kov-tamno:#4c1520; --m-pecat-filter:none; --m-zel:#5c1b26;
}

:root[data-dizajn="maslina"] body{background:var(--m-papir) url(/dizajn/papir.jpg) repeat;background-size:720px;color:var(--m-tekst)}
:root[data-dizajn="maslina"] .wrap{max-width:none;padding:0 0 40px;gap:0;overflow-x:clip}
:root[data-dizajn="maslina"] .env,:root[data-dizajn="maslina"] .hint{display:none}
:root[data-dizajn="maslina"] .vrh{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:0;right:0;z-index:30}
:root[data-dizajn="maslina"] main > section,:root[data-dizajn="maslina"] main > footer{max-width:560px;margin:0 auto;width:100%}
:root[data-dizajn="maslina"] section{background:none;border:0;border-radius:0;padding:60px 24px 8px;text-align:center}
:root[data-dizajn="maslina"] h2{font-family:var(--f-script);font-weight:400;font-size:clamp(44px,12vw,58px);color:var(--m-zel);margin:0 0 24px;line-height:1.1;padding:0 6px}
:root[data-dizajn="maslina"] h2 small{font-family:var(--f-head);font-size:12px;letter-spacing:.32em;color:var(--m-sivo);font-weight:500;margin-bottom:10px}
:root[data-dizajn="maslina"] .foil{background:none;-webkit-text-fill-color:currentColor;color:var(--m-zel)}
/* A small sprig of calla between the sections */
:root[data-dizajn="maslina"] main > section h2::after{content:"";display:block;width:90px;height:14px;margin:14px auto 0;background:
  radial-gradient(circle at 50% 50%,var(--m-zel) 0 2.2px,transparent 2.6px) center/100% 100% no-repeat,
  linear-gradient(var(--m-zel),var(--m-zel)) left 50%/34px 1px no-repeat,linear-gradient(var(--m-zel),var(--m-zel)) right 50%/34px 1px no-repeat;opacity:.55}

/* ---------- Envelope (shared by the intro and the collage) ---------- */
.m-kov{position:relative;width:100%;aspect-ratio:424/304}
.m-kov > svg,.m-kov-preklop,.m-kov-preklop > div,.m-kov-preklop svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.m-cipka{fill:var(--m-kov-svj)}
.m-rupe circle{fill:rgba(18,22,8,.38)}
.m-lan{fill:var(--m-kov)}
.m-bod{fill:none;stroke:rgba(250,246,226,.42);stroke-width:1.3;stroke-dasharray:4 4;transform-box:fill-box;transform-origin:center;transform:scale(.94)}
.m-unutra{fill:var(--m-kov-tamno)}
.m-postava{fill:var(--m-kov-svj)}
.m-kov-zadnja{z-index:1;filter:drop-shadow(0 10px 18px rgba(10,14,4,.35)) drop-shadow(0 2px 3px rgba(10,14,4,.3))}
.m-kov-karta{position:absolute;left:9%;right:9%;top:10%;bottom:12%;z-index:2;background:var(--m-slonovaca) url(/dizajn/papir.jpg) center/520px;border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.18),inset 0 0 0 5px var(--m-slonovaca),inset 0 0 0 6px rgba(75,80,39,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;text-align:center;padding:4%;transition:transform 1.3s cubic-bezier(.25,.8,.25,1) .9s}
.m-kov-dzep{z-index:3;filter:drop-shadow(0 -1px 2px rgba(10,14,4,.3))}
.m-cipka-v{fill:none;stroke:var(--m-kov-svj);stroke-width:5}
.m-kov-preklop{z-index:4;transform-origin:50% 3.95%;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.5,.05,.3,1) .25s}
.m-kov-preklop > div{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.m-kov-preklop .lice{filter:drop-shadow(0 4px 6px rgba(10,14,4,.4))}
.m-kov-preklop .nalicje{transform:rotateX(180deg);transform-origin:50% 31.6%}
.m-kov-mono{position:absolute;left:0;right:0;top:31%;text-align:center;font-family:"Pinyon Script",var(--f-script);font-size:min(13vw,62px);line-height:1;color:#f5f0dc;text-shadow:0 1px 1px rgba(0,0,0,.25);letter-spacing:.04em}
.m-kov-natpis{position:absolute;left:0;right:0;bottom:15%;z-index:5;text-align:center;font-family:var(--f-script);font-size:min(7.4vw,34px);color:#f5f0dc;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.m-k-mali{font-family:var(--f-head);font-size:min(2.4vw,10.5px);letter-spacing:.24em;text-transform:uppercase;color:var(--m-sivo)}
.m-k-imena{font-family:var(--f-script);font-size:min(9vw,42px);line-height:1.1;color:var(--m-zel)}
.m-k-datum{font-family:var(--f-head);font-size:min(3vw,13px);letter-spacing:.24em}

/* ---------- Intro ---------- */
.m-uvod{position:fixed;inset:0;z-index:50;overflow:hidden;background:#1d2410;cursor:pointer;transition:opacity 1.2s ease}
.m-u-cvijece{position:absolute;inset:0;width:100%;height:100%}
.m-uvod::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(70% 50% at 50% 48%,rgba(0,0,0,.25),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.35))}
.m-u-sadrzaj{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;perspective:1400px}
.m-u-sadrzaj .m-kov{width:min(84vw,430px);animation:m-lebdi 5s ease-in-out infinite;transition:transform 1.4s cubic-bezier(.3,.6,.2,1)}
@keyframes m-lebdi{50%{transform:translateY(-6px) rotate(-.6deg)}}
.m-u-hint{margin:0;padding:9px 18px;border-radius:99px;background:rgba(20,26,8,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);font-family:var(--f-head);text-transform:uppercase;letter-spacing:.32em;font-size:11.5px;color:#f1ecd9;text-shadow:0 1px 3px rgba(0,0,0,.6);animation:m-puls 2.4s ease-in-out infinite}
@keyframes m-puls{50%{opacity:.35}}
.m-uvod.otvara .m-u-hint{animation:none;opacity:0;transition:opacity .4s}
.m-uvod.otvara .m-kov{animation:none;transform:translateY(16%)}
.m-uvod.otvara .m-kov-preklop{transform:rotateX(180deg)}
.m-uvod.otvara .m-kov-natpis,.m-uvod.otvara .m-kov-mono{opacity:0;transition:opacity .3s}
.m-uvod.ispod .m-kov-preklop{z-index:0}
.m-uvod.otvara .m-kov-karta{transform:translateY(-86%)}
.m-uvod.gotovo{opacity:0;pointer-events:none}

/* ---------- Collage: pieces laid out from above; sizes in cqw so it scales with the width ---------- */
.m-kolaz{position:relative;width:min(100%,470px);margin:0 auto;aspect-ratio:100/178;container-type:inline-size;overflow:visible;margin-top:calc(54px + env(safe-area-inset-top,0px))}
.m-dio{position:absolute;opacity:0;transform:translate(var(--ox,0),var(--oy,-40px)) rotate(calc(var(--r,0deg) + var(--dr,8deg))) scale(1.06);transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--d) * .16s + .15s)}
.m-kolaz.spreman .m-dio{opacity:1;transform:rotate(var(--r,0deg))}
.m-d-kov{left:3cqw;top:31cqw;width:62cqw;--r:-6deg;--ox:-30px;z-index:3}
.m-kolaz .m-kov-preklop{transform:rotateX(180deg);z-index:0;transition:none}
/* Only the drawn shapes catch a tap, so the record shows and plays through the empty parts of the envelope's layers */
.m-kolaz .m-kov svg,.m-kolaz .m-kov-preklop,.m-kolaz .m-kov-preklop > div{pointer-events:none}
.m-kolaz .m-kov svg *{pointer-events:visiblePainted}
.m-kolaz .m-kov-natpis{display:none}
.m-kolaz .m-kov-karta{display:none}
.m-d-kale{left:52cqw;top:2cqw;width:46cqw;--r:9deg;--ox:30px;z-index:4}
.m-kale{width:100%;display:block;filter:drop-shadow(0 8px 10px rgba(30,35,15,.28))}
.m-d-karta{left:44cqw;top:44cqw;width:53cqw;--r:3deg;--ox:40px;z-index:5}
.m-d-okvir{left:4cqw;top:80cqw;width:43cqw;--r:-4deg;--ox:-40px;z-index:6}
.m-d-oval{left:50cqw;top:119cqw;width:44cqw;--r:5deg;--ox:30px;z-index:6}
.m-d-cvijece{left:55cqw;top:146cqw;width:44cqw;--r:0deg;--oy:30px;z-index:7}
.m-d-pecat{left:20cqw;top:142cqw;width:21cqw;--r:-12deg;--oy:-60px;--dr:40deg;z-index:8}

/* Record: turns while the song plays */
.m-ploca{position:absolute;left:8cqw;top:-14cqw;width:44cqw;aspect-ratio:1;border:0;padding:0;border-radius:50%;background:none;z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-ploca:disabled{cursor:default}
.m-ploca-disk{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#121212 0 1.1px,#232323 1.1px 2.3px);box-shadow:0 8px 18px rgba(0,0,0,.4)}
.m-ploca::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 9%,rgba(255,255,255,.16) 14%,transparent 21% 55%,rgba(255,255,255,.1) 61%,transparent 68%);pointer-events:none}
.m-ploca.svira .m-ploca-disk{animation:m-vrti 3.2s linear infinite}
@keyframes m-vrti{to{transform:rotate(360deg)}}
.m-ploca-etiketa{position:absolute;inset:31%;border-radius:50%;background:var(--m-slonovaca);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:inset 0 0 0 1.5px rgba(75,80,39,.4)}
.m-ploca-etiketa::after{content:"";position:absolute;width:6%;aspect-ratio:1;border-radius:50%;background:#222;left:47%;top:47%}
.m-ploca-mono{font-family:"Pinyon Script",var(--f-script);font-size:5.4cqw;line-height:1;color:var(--m-zel);margin-top:-6%}
.m-ploca-t{font-family:var(--f-head);font-size:1.7cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--m-sivo);margin-top:9%}
.m-ploca-ik{width:2.6cqw;height:2.6cqw;fill:var(--m-zel);margin-top:2%}
.m-ploca:disabled .m-ploca-ik,.m-ploca.svira .m-ploca-ik{display:none}

/* Ivory card with the names */
.m-karta{aspect-ratio:5/7;background:var(--m-slonovaca) url(/dizajn/papir.jpg) center/560px;box-shadow:0 14px 26px rgba(40,35,20,.22),0 2px 4px rgba(40,35,20,.18),inset 0 0 0 3cqw var(--m-slonovaca),inset 0 0 0 calc(3cqw + 1px) rgba(75,80,39,.45),inset 0 0 0 calc(3.6cqw + 1px) var(--m-slonovaca),inset 0 0 0 calc(3.6cqw + 2px) rgba(75,80,39,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7cqw 6cqw;gap:.6cqw}
.m-karta-mali{font-family:var(--f-head);font-size:2.3cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--m-sivo);line-height:1.6;max-width:36cqw}
.m-karta-ime{font-family:var(--f-script);font-size:10.5cqw;line-height:1.05;color:var(--m-zel);white-space:nowrap}
.m-karta-amp{font-family:var(--f-script);font-size:6cqw;line-height:.8;color:var(--m-zel);opacity:.8}
.m-karta-crta{width:12cqw;height:1px;background:var(--m-zel);opacity:.4;margin:1.6cqw 0}
.m-karta-datum{font-family:var(--f-head);font-size:2.9cqw;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.m-karta-mjesto{font-family:var(--f-head);font-size:2.6cqw;color:var(--m-sivo);line-height:1.4}
.m-karta-dugme{margin-top:2.4cqw;font-family:var(--f-head);font-size:2.2cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--m-zel);text-decoration:none;border:1px solid currentColor;padding:1.4cqw 2.6cqw}
.m-kolaz.jedno .m-karta-amp,.m-kolaz.jedno #m-ime2{display:none}

/* Carved frame with the monogram and the date */
.m-okvir-svg{width:100%;display:block;filter:drop-shadow(0 12px 16px rgba(40,35,20,.22)) drop-shadow(0 2px 2px rgba(40,35,20,.15))}
.m-okvir-tekst{position:absolute;left:15%;right:15%;top:22%;bottom:10%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw}
.m-okvir-mono{font-family:"Pinyon Script",var(--f-script);font-size:11cqw;line-height:1;color:var(--m-zel);text-shadow:0 1px 0 #fff}
.m-okvir-datum{font-family:var(--f-head);font-size:3.3cqw;letter-spacing:.2em;color:var(--m-tekst)}

/* Oval pearl frame: the couple's photo painted like an oil painting */
.m-d-oval{aspect-ratio:200/260}
.m-oval-svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 10px 14px rgba(40,35,20,.28))}
.m-oval-slika{position:absolute;left:7%;right:7%;top:6%;bottom:6%;clip-path:ellipse(50% 50%);background:#efe9da}
.m-oval-slika img{width:100%;height:100%;object-fit:cover;display:block;filter:url(#m-ulje) sepia(.14) saturate(.88) contrast(.96)}
.m-oval-slika img.cb{filter:url(#m-ulje) grayscale(1) contrast(1.02)}
.m-oval-kale{display:none;width:100%;height:100%}
.m-oval-slika.prazno img{display:none}
.m-oval-slika.prazno .m-oval-kale{display:block;background:radial-gradient(circle at 50% 40%,#f7f3e8,#e6decb)}

.m-d-cvijece canvas{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 12px rgba(30,35,15,.3))}
.m-d-pecat{aspect-ratio:1;filter:drop-shadow(0 6px 8px rgba(30,25,10,.35))}
.m-d-pecat i{position:absolute;inset:0;background:url(/dizajn/pecat.webp) center/contain no-repeat;filter:var(--m-pecat-filter)}
.m-d-pecat span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Pinyon Script",var(--f-script);font-size:6.4cqw;color:rgba(30,26,8,.55);text-shadow:0 1px 0 rgba(255,255,255,.22),0 -1px 1px rgba(0,0,0,.45);padding-bottom:6%}

/* ---------- Sections ---------- */
:root[data-dizajn="maslina"] .intro{font-family:var(--f-head);font-style:normal;font-size:16px;line-height:1.85;color:var(--m-tekst);max-width:30em;margin:0 auto}
:root[data-dizajn="maslina"] #s-uvod{padding-top:36px}
:root[data-dizajn="maslina"] .count-l{color:var(--m-sivo);letter-spacing:.3em;margin-top:30px}
:root[data-dizajn="maslina"] .count{gap:0;margin-top:14px}
:root[data-dizajn="maslina"] .count > div{border-left:1px solid var(--line);color:var(--m-bordo);font-weight:500;font-size:32px}
:root[data-dizajn="maslina"] .count > div:first-child{border-left:0}
:root[data-dizajn="maslina"] .prog{position:relative;gap:0}
:root[data-dizajn="maslina"] .prog::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:linear-gradient(transparent,var(--m-zel) 12%,var(--m-zel) 88%,transparent);opacity:.35}
:root[data-dizajn="maslina"] .prog li{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;padding:20px 0;position:relative;background:var(--m-papir) url(/dizajn/papir.jpg);background-size:720px;background-attachment:fixed}
:root[data-dizajn="maslina"] .prog time{font-size:24px;font-weight:500;color:var(--m-bordo);letter-spacing:.06em}
:root[data-dizajn="maslina"] .prog b{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.2em;font-size:13.5px;font-weight:600}
:root[data-dizajn="maslina"] .prog p{font-family:var(--f-head);font-size:14.5px;color:var(--m-sivo);max-width:22em}
:root[data-dizajn="maslina"] .p-karta{color:var(--m-zel)}
:root[data-dizajn="maslina"] .pr-ikona{color:var(--m-zel)}
:root[data-dizajn="maslina"] .btn-o{border-radius:0;border-color:var(--m-zel);color:var(--m-zel);letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-family:var(--f-head);padding:12px 22px}
:root[data-dizajn="maslina"] .btn-o:hover{background:var(--m-zel);color:#fff}
:root[data-dizajn="maslina"] #adresa{font-family:var(--f-head);letter-spacing:.06em}

/* Gallery: ivory frames, a little tilted, one in three oval */
:root[data-dizajn="maslina"] .gal{display:flex;flex-direction:column;gap:26px;align-items:center}
.m-g-okvir{background:var(--m-slonovaca);padding:10px;box-shadow:0 14px 26px rgba(40,35,20,.2);transform:rotate(-2deg);width:min(86%,420px)}
.m-g-okvir:nth-child(even){transform:rotate(2deg)}
.m-g-okvir img{width:100%;height:auto;display:block;border-radius:0;aspect-ratio:auto!important;filter:url(#m-ulje) sepia(.1) saturate(.9)}
.m-g-okvir.oval{border-radius:50%;padding:12px;width:min(70%,340px)}
.m-g-okvir.oval img{border-radius:50%;aspect-ratio:4/5!important;object-fit:cover}

/* RSVP: an ivory card with a crochet edge on top */
:root[data-dizajn="maslina"] #rsvp{background:var(--m-slonovaca);margin-top:56px;padding:56px 22px 32px;position:relative;box-shadow:0 18px 36px rgba(40,35,20,.12);max-width:520px}
:root[data-dizajn="maslina"] #rsvp::before{content:"";position:absolute;left:0;right:0;top:-12px;height:13px;background:radial-gradient(circle at 9px 13px,var(--m-kov-svj) 0 8.5px,transparent 9px) 0 0/18px 13px repeat-x}
:root[data-dizajn="maslina"] #rsvp::after{content:"";position:absolute;left:0;right:0;top:-1px;height:8px;background:var(--m-kov)}
:root[data-dizajn="maslina"] #rsvp input[type=text],:root[data-dizajn="maslina"] #rsvp select,:root[data-dizajn="maslina"] #rsvp textarea{background:transparent;border:0;border-bottom:1px solid rgba(46,43,35,.35);border-radius:0;padding:10px 2px}
:root[data-dizajn="maslina"] #rsvp label,:root[data-dizajn="maslina"] #rsvp .lbl{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.18em;font-size:11.5px;font-weight:600;text-align:left}
:root[data-dizajn="maslina"] .choice label{border-radius:0;border-color:rgba(46,43,35,.35);font-family:var(--f-head);letter-spacing:.12em;text-transform:uppercase;font-size:13px;background:transparent}
:root[data-dizajn="maslina"] .choice input:checked + label{background:var(--m-zel);border-color:var(--m-zel)}
:root[data-dizajn="maslina"] .submit{border-radius:0;background:var(--m-zel)!important;font-family:var(--f-head);letter-spacing:.3em}
:root[data-dizajn="maslina"] .pchip{background:transparent;border-radius:0;font-family:var(--f-head);letter-spacing:.08em}
:root[data-dizajn="maslina"] .step button{border-radius:0;background:transparent}
:root[data-dizajn="maslina"] .deadline{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.16em;font-size:12.5px}
:root[data-dizajn="maslina"] .thanks .big{color:var(--m-zel)}

/* The song: the record in the collage, and a small round button that floats over the page */
:root[data-dizajn="maslina"] #muzika{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;padding:0;width:auto;max-width:none;margin:0;background:none}
:root[data-dizajn="maslina"] #muzika > div{display:none}
:root[data-dizajn="maslina"] .play{width:48px;height:48px;background:var(--m-zel);box-shadow:0 6px 18px rgba(0,0,0,.25)}
:root[data-dizajn="maslina"] #poruka{padding:48px 24px 8px;gap:16px;text-align:left}
:root[data-dizajn="maslina"] #poruka b{font-family:var(--f-script);font-weight:400;font-size:32px;color:var(--m-zel);line-height:1.1}

/* Closing: hydrangeas with the monogram */
:root[data-dizajn="maslina"] footer{padding:64px 0 24px;gap:18px}
.m-kraj{display:none}
:root[data-dizajn="maslina"] .m-kraj{display:flex;position:relative;width:100%;aspect-ratio:560/300;max-width:560px;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden}
.m-kraj canvas{position:absolute;inset:0;width:100%;height:100%}
.m-kraj::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 60% at 50% 50%,rgba(20,26,8,.62),rgba(20,26,8,.2) 70%,transparent)}
.m-kraj-mono{position:relative;z-index:2;font-family:"Pinyon Script",var(--f-script);font-size:clamp(54px,16vw,80px);line-height:1;color:#f6f1de;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.m-kraj p{position:relative;z-index:2;margin:0;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.24em;font-size:12.5px;color:#f6f1de;text-shadow:0 1px 4px rgba(0,0,0,.6)}
:root[data-dizajn="maslina"] footer .potpis{font-family:var(--f-script);color:var(--m-tekst);font-size:34px;padding:0 24px}

/* After a "yes": white petals */
.m-latica{position:fixed;left:0;top:0;width:10px;height:14px;border-radius:70% 0 70% 0;background:var(--c);box-shadow:0 1px 2px rgba(0,0,0,.18);pointer-events:none;z-index:60;animation:m-latica var(--t,.9s) cubic-bezier(.12,.6,.35,1) forwards}
.m-latica.krug{width:8px;height:11px}
@keyframes m-latica{0%{transform:translate(var(--x0),var(--y0)) rotate(0)}75%{opacity:1}100%{transform:translate(calc(var(--x0) + var(--dx)),calc(var(--y0) + var(--dy))) rotate(var(--r));opacity:0}}

/* Reveal on scroll */
:root[data-dizajn="maslina"] [data-otkrij="gore"]{opacity:0;transform:translateY(26px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
:root[data-dizajn="maslina"] [data-otkrij="gore"].vidljiv{opacity:1;transform:none}
:root[data-dizajn="maslina"] .m-g-okvir[data-otkrij].vidljiv{transform:rotate(-2deg)}
:root[data-dizajn="maslina"] .m-g-okvir[data-otkrij]:nth-child(even).vidljiv{transform:rotate(2deg)}

@media (prefers-reduced-motion:reduce){
  .m-dio{transition:none}
  :root[data-dizajn="maslina"] [data-otkrij="gore"]{opacity:1;transform:none}
  .m-ploca.svira .m-ploca-disk{animation:none}
}