/* Design "Ruže" (ruze.js): white envelope with a gold wax seal, then phone-sized screens over white roses, gold foil,
   a photo in a gold arch, the big date and gold R S V P letters. Active when <html data-dizajn="ruze">;
   colour from data-boja (bijela / sampanj). The roses photo is dizajn/ruze/ruze.jpg (until it exists, the paper). */
:root[data-dizajn="ruze"],.r-koverta{
  --r-papir:#fbf9f4; --r-tekst:#2b2620; --r-sivo:#7a7062; --r-zlato:#a8823c; --r-veo:rgba(252,250,245,.18);
  --r-pozadina:url(/dizajn/ruze/ruze.jpg), url(/dizajn/papir.jpg);
  --r-foil:linear-gradient(100deg,#8a6526 0%,#b8913f 18%,#ecd393 32%,#b48c3c 46%,#8a6526 62%,#c9a457 80%,#94702f 100%);
  --r-pecat-filter:sepia(1) saturate(1.5) hue-rotate(-12deg) brightness(1.45) contrast(.95);
  --acc:#8a6a2c; --ink:var(--r-tekst); --muted:var(--r-sivo); --line:rgba(43,38,32,.16); --on-acc:#fff;
}
:root[data-dizajn="ruze"][data-boja="sampanj"],:root[data-dizajn="ruze"][data-boja="sampanj"] .r-koverta{--r-papir:#f6efe3;--r-veo:rgba(246,239,227,.3)}
.r-rsvp-slova{display:none}

:root[data-dizajn="ruze"] body{background:var(--r-papir);color:var(--r-tekst)}
/* The roses stay still behind the page, under a light veil so the text reads */
:root[data-dizajn="ruze"] body::before{content:"";position:fixed;inset:0;background-image:linear-gradient(var(--r-veo),var(--r-veo)),var(--r-pozadina);background-size:cover;background-position:center;pointer-events:none;z-index:0}
:root[data-dizajn="ruze"] .wrap{max-width:none;padding:0 0 40px;gap:0;position:relative;z-index:1;overflow-x:clip}
:root[data-dizajn="ruze"] .env,:root[data-dizajn="ruze"] .hint{display:none}
:root[data-dizajn="ruze"] .vrh{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:0;right:0;z-index:30}
:root[data-dizajn="ruze"] main > section,:root[data-dizajn="ruze"] main > footer{max-width:520px;margin:0 auto;width:100%}
:root[data-dizajn="ruze"] section{background:none;border:0;border-radius:0;padding:64px 26px 8px;text-align:center}
:root[data-dizajn="ruze"] h2{font-family:var(--f-script);font-weight:400;font-size:clamp(46px,12.5vw,60px);color:var(--r-zlato);margin:0 0 22px;line-height:1.1;padding:0 6px;background:var(--r-foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-dizajn="ruze"] h2 small{font-family:var(--f-head);font-size:12px;letter-spacing:.32em;color:var(--r-sivo);-webkit-text-fill-color:var(--r-sivo);font-weight:500;margin-bottom:10px;text-transform:uppercase}
:root[data-dizajn="ruze"] .foil{background:var(--r-foil);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Envelope ---------- */
.r-koverta{position:fixed;inset:0;z-index:50;overflow:hidden;perspective:1600px;cursor:pointer;background:#ece7de;transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.3,.6,.2,1)}
.r-koverta > *{position:absolute;inset:0}
.r-k-papir{background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.02)),var(--r-papir) url(/dizajn/papir.jpg) center/700px}
/* Diagonal folds like a real envelope: left, right and bottom pockets, each lit a little differently */
.r-k-lijevo,.r-k-desno,.r-k-dno{background:var(--r-papir) url(/dizajn/papir.jpg) center/700px;filter:drop-shadow(0 0 1px rgba(0,0,0,.18)) drop-shadow(0 4px 10px rgba(0,0,0,.08))}
.r-k-lijevo{clip-path:polygon(0 0,58% 52%,0 100%)}
.r-k-desno{clip-path:polygon(100% 0,42% 52%,100% 100%)}
.r-k-dno{clip-path:polygon(0 100%,50% 46%,100% 100%)}
.r-k-lijevo::after,.r-k-desno::after,.r-k-dno::after{content:"";position:absolute;inset:0}
.r-k-lijevo::after{background:linear-gradient(110deg,rgba(255,255,255,.5),rgba(0,0,0,.04) 70%)}
.r-k-desno::after{background:linear-gradient(250deg,rgba(0,0,0,.06),rgba(255,255,255,.2) 70%)}
.r-k-dno::after{background:linear-gradient(0deg,rgba(255,255,255,.25),rgba(0,0,0,.05))}
.r-k-preklop{transform-origin:50% 0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.5,.05,.3,1) .3s;z-index:3}
.r-k-preklop > div{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 55%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.r-k-preklop .lice{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(0,0,0,.05)),var(--r-papir) url(/dizajn/papir.jpg) center/700px;filter:drop-shadow(0 0 1px rgba(0,0,0,.2)) drop-shadow(0 6px 12px rgba(0,0,0,.12))}
.r-k-preklop .nalicje{transform:rotateX(180deg);background:radial-gradient(circle,rgba(200,160,80,.35) 0 1px,transparent 1.4px) 0 0/16px 16px,linear-gradient(180deg,#f3ead9,#e8dcc4)}
.r-k-pecat{position:absolute;inset:auto;left:50%;top:55%;width:min(34vw,170px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;z-index:5;filter:drop-shadow(0 8px 12px rgba(90,60,10,.35))}
.r-k-pecat .pol{position:absolute;inset:0;background:url(/dizajn/pecat.webp) center/contain no-repeat;filter:var(--r-pecat-filter);transition:transform .9s cubic-bezier(.4,.1,.3,1),opacity .7s ease .2s}
.r-k-pecat .pol.l{clip-path:polygon(0 0,52% 0,47% 30%,54% 55%,46% 78%,51% 100%,0 100%)}
.r-k-pecat .pol.d{clip-path:polygon(52% 0,100% 0,100% 100%,51% 100%,46% 78%,54% 55%,47% 30%)}
.r-k-pecat .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Bodoni Moda",var(--f-head);font-weight:600;font-size:min(8vw,40px);letter-spacing:.04em;color:rgba(70,45,8,.62);text-shadow:0 1px 0 rgba(255,240,200,.5),0 -1px 1px rgba(0,0,0,.35);padding-bottom:3%;transition:opacity .4s}
.r-k-hint{inset:auto 0 calc(9% + env(safe-area-inset-bottom,0px)) 0;margin:0;text-align:center;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.32em;font-size:11.5px;color:var(--r-sivo);animation:r-puls 2.4s ease-in-out infinite;z-index:6}
@keyframes r-puls{50%{opacity:.35}}
.r-k-pecat::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(168,130,60,.35);animation:r-val 2.4s ease-out infinite}
@keyframes r-val{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.r-koverta.otvara .r-k-pecat::after,.r-koverta.otvara .r-k-hint{animation:none;opacity:0}
.r-koverta.otvara .r-k-pecat .mono{opacity:0}
.r-koverta.otvara .r-k-pecat .pol.l{transform:translate(-38%,24%) rotate(-24deg);opacity:0}
.r-koverta.otvara .r-k-pecat .pol.d{transform:translate(38%,30%) rotate(20deg);opacity:0}
.r-koverta.otvara .r-k-preklop{transform:rotateX(178deg)}
.r-koverta.gotovo{opacity:0;transform:scale(1.06);pointer-events:none}

/* ---------- Screens ---------- */
.r-ekrani{position:relative;z-index:1}
.r-ekran{min-height:94svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 26px 40px;max-width:520px;margin:0 auto;gap:8px}
/* 1: outlined capitals with a script word across them */
.r-obris{margin:0;white-space:nowrap;max-width:100%;font-family:"Bodoni Moda",var(--f-head);font-weight:600;font-size:clamp(50px,15vw,84px);line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.3px #b48c3c;text-shadow:0 0 1px rgba(255,255,255,.6)}
.r-skript{margin:-.34em 0 -.3em;position:relative;z-index:1;font-family:var(--f-script);font-size:clamp(96px,29vw,150px);line-height:1;padding:0 .14em;background:var(--r-foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 4px rgba(255,255,255,.8))}
/* 2: the couple in a gold arch */
.r-luk{position:relative;width:min(78vw,330px);aspect-ratio:300/420;margin-bottom:22px}
.r-luk img{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);object-fit:cover;object-position:50% 0;border-radius:999px 999px 4px 4px;box-shadow:0 18px 40px rgba(60,45,20,.18)}
.r-luk img.cb{filter:grayscale(1)}
.r-luk-linija{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible}
.r-luk .r-grana{position:absolute;left:-26px;bottom:-14px;width:110px;transform:rotate(-6deg)}
.r-luk-mono{display:none}
.r-luk.prazno img{display:none}
.r-luk.prazno .r-luk-mono{display:flex;position:absolute;inset:7px;border-radius:999px 999px 4px 4px;background:rgba(255,255,255,.55);align-items:center;justify-content:center;font-family:"Bodoni Moda",var(--f-head);font-size:44px;letter-spacing:.06em;color:var(--r-zlato)}
.r-mali{margin:0;font-family:var(--f-head);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--r-tekst)}
.r-ime{margin:0;font-family:"Bodoni Moda",var(--f-head);font-weight:500;font-size:clamp(30px,8.6vw,44px);letter-spacing:.14em;text-transform:uppercase;line-height:1.15}
.r-i{margin:-2px 0;font-family:var(--f-script);font-size:clamp(34px,10vw,48px);line-height:1;background:var(--r-foil);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .1em}
/* 3: the big date */
.r-rijec{margin:6px 0 18px;font-family:var(--f-script);font-weight:400;font-size:clamp(72px,22vw,120px);line-height:1;padding:0 .12em;background:var(--r-foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.r-datum{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:min(100%,380px)}
.r-datum span{font-family:var(--f-head);font-size:13px;letter-spacing:.24em;text-transform:uppercase;padding:8px 0;border-top:1px solid rgba(168,130,60,.55);border-bottom:1px solid rgba(168,130,60,.55)}
.r-datum b{font-family:"Bodoni Moda",var(--f-head);font-weight:500;font-size:clamp(64px,18vw,92px);line-height:1;font-variant-numeric:lining-nums}
.r-mj{margin:2px 0 14px;font-family:"Bodoni Moda",var(--f-head);font-size:20px;letter-spacing:.32em;text-transform:uppercase}
.r-ekran-datum p:not(.r-mali):not(.r-mj):not(.r-rijec){margin:2px 0;font-family:var(--f-head);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--r-tekst)}
#r-poslije{margin-top:14px!important;color:var(--r-sivo)!important;font-size:12.5px!important}

/* ---------- Sections restyled ---------- */
:root[data-dizajn="ruze"] .intro{font-family:var(--f-head);font-style:normal;font-size:16px;line-height:1.9;color:var(--r-tekst)}
:root[data-dizajn="ruze"] .count-l{color:var(--r-sivo);letter-spacing:.3em}
:root[data-dizajn="ruze"] .count{gap:0;margin-top:14px}
:root[data-dizajn="ruze"] .count > div{border-left:1px solid rgba(168,130,60,.4);font-weight:500;font-size:32px;color:#8a6a2c}
:root[data-dizajn="ruze"] .count > div:first-child{border-left:0}
:root[data-dizajn="ruze"] .prog{gap:0}
:root[data-dizajn="ruze"] .prog li{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;padding:18px 0;position:relative;background:none}
:root[data-dizajn="ruze"] .prog li + li::before{content:"";position:absolute;top:0;left:50%;width:60px;margin-left:-30px;height:1px;background:linear-gradient(90deg,transparent,#b48c3c,transparent)}
:root[data-dizajn="ruze"] .prog time{font-family:"Bodoni Moda",var(--f-head);font-size:26px;font-weight:500;color:var(--r-tekst)}
:root[data-dizajn="ruze"] .prog b{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.22em;font-size:13.5px;font-weight:600}
:root[data-dizajn="ruze"] .prog p{font-family:var(--f-head);font-size:14.5px;color:var(--r-sivo)}
:root[data-dizajn="ruze"] .pr-ikona{color:#a8823c}
:root[data-dizajn="ruze"] .p-karta{color:#8a6a2c}
:root[data-dizajn="ruze"] .loc,:root[data-dizajn="ruze"] .r-dress{background:rgba(255,255,255,.7);border:1px solid rgba(168,130,60,.35);margin-top:40px;padding:40px 24px 30px;max-width:460px!important;box-shadow:0 18px 40px rgba(60,45,20,.08)}
:root[data-dizajn="ruze"] .btn-o{border-radius:0;border-color:#a8823c;color:#8a6a2c;letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-family:var(--f-head);padding:12px 22px;background:transparent}
:root[data-dizajn="ruze"] #adresa{font-family:var(--f-head);letter-spacing:.06em}
.r-dress{display:none}
:root[data-dizajn="ruze"] .r-dress{display:block}
:root[data-dizajn="ruze"] .r-dress[hidden]{display:none}
.r-boje{display:flex;justify-content:center;gap:14px;margin:4px 0 16px}
.r-boje i{width:42px;height:42px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(168,130,60,.5),0 6px 14px rgba(0,0,0,.08)}
.r-dress p{margin:0;font-family:var(--f-head);font-size:14px;letter-spacing:.16em;text-transform:uppercase}
/* RSVP: four big gold letters with sprigs, then the form in white and gold */
:root[data-dizajn="ruze"] .r-rsvp-slova.prikazi{display:grid;grid-template-columns:1fr 1fr;width:min(70vw,280px);margin:0 auto 18px;position:relative}
.r-rsvp-slova b{font-family:"Bodoni Moda",var(--f-head);font-weight:500;font-size:clamp(70px,20vw,110px);line-height:1;text-align:center;background:var(--r-foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.r-rsvp-slova .r-grana{position:absolute;width:44%;pointer-events:none}
.r-rsvp-slova .r-grana:nth-of-type(1){left:26%;top:40%;width:48%;transform:rotate(-12deg)}
.r-rsvp-slova .r-grana:nth-of-type(2){display:none}
.r-rsvp-slova b{position:relative;z-index:1}
:root[data-dizajn="ruze"] #rsvp{margin-top:30px}
:root[data-dizajn="ruze"] #rsvp > h2{font-size:clamp(30px,8vw,40px)}
:root[data-dizajn="ruze"] #rsvp form{background:rgba(255,255,255,.8);border:1px solid rgba(168,130,60,.35);padding:26px 20px;box-shadow:0 18px 40px rgba(60,45,20,.08)}
:root[data-dizajn="ruze"] #rsvp input[type=text],:root[data-dizajn="ruze"] #rsvp select,:root[data-dizajn="ruze"] #rsvp textarea{background:transparent;border:0;border-bottom:1px solid rgba(43,38,32,.3);border-radius:0;padding:10px 2px}
:root[data-dizajn="ruze"] #rsvp label,:root[data-dizajn="ruze"] #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="ruze"] .choice label{border-radius:0;border-color:rgba(168,130,60,.5);font-family:var(--f-head);letter-spacing:.12em;text-transform:uppercase;font-size:13px;background:transparent}
:root[data-dizajn="ruze"] .choice input:checked + label{background:linear-gradient(135deg,#d2ae64,#b08a4a 45%,#94702f);border-color:#a8823c;color:#fff}
:root[data-dizajn="ruze"] .submit{border-radius:0;background:linear-gradient(135deg,#d2ae64,#b08a4a 45%,#94702f)!important;font-family:var(--f-head);letter-spacing:.3em}
:root[data-dizajn="ruze"] .step button{border-radius:0;background:transparent}
:root[data-dizajn="ruze"] .deadline{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.16em;font-size:12.5px}
:root[data-dizajn="ruze"] #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="ruze"] #muzika > div{display:none}
:root[data-dizajn="ruze"] .play{width:48px;height:48px;background:linear-gradient(135deg,#d2ae64,#b08a4a 45%,#94702f);box-shadow:0 6px 18px rgba(0,0,0,.2)}
:root[data-dizajn="ruze"] .gal{display:flex;flex-direction:column;gap:20px}
:root[data-dizajn="ruze"] .gal img{border-radius:4px;box-shadow:0 0 0 1px rgba(168,130,60,.5),0 18px 36px rgba(60,45,20,.15)}
/* Closing seal */
:root[data-dizajn="ruze"] footer{padding:64px 24px 24px;gap:16px}
.r-kraj{display:none}
:root[data-dizajn="ruze"] .r-kraj{display:block;width:110px;aspect-ratio:1;position:relative;filter:drop-shadow(0 6px 10px rgba(90,60,10,.3))}
.r-kraj i{position:absolute;inset:0;background:url(/dizajn/pecat.webp) center/contain no-repeat;filter:var(--r-pecat-filter)}
.r-kraj span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Bodoni Moda",var(--f-head);font-weight:600;font-size:24px;color:rgba(70,45,8,.62);text-shadow:0 1px 0 rgba(255,240,200,.5);padding-bottom:4px}
:root[data-dizajn="ruze"] footer .potpis{font-family:var(--f-script);font-size:36px}

/* ---------- Variant "Ploča" (v.ploca): the arch stands still like a board and the whole invitation scrolls up through
   its opening, appearing from below and vanishing behind the vines at the top. Layers: the full picture behind
   (body::before), the page, then the same picture with a transparent opening on top (dizajn/ruze/ruze-okvir.webp,
   made from ruze.jpg) ---------- */
:root[data-dizajn="ruze"][data-ploca] body::before{z-index:-1;background-image:var(--r-pozadina)}
:root[data-dizajn="ruze"][data-ploca] .wrap{z-index:auto}
:root[data-dizajn="ruze"][data-ploca] body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;background:url(/dizajn/ruze/ruze-okvir.webp) center/cover no-repeat}
:root[data-dizajn="ruze"][data-ploca] main > section,:root[data-dizajn="ruze"][data-ploca] main > footer,:root[data-dizajn="ruze"][data-ploca] .r-ekran{max-width:min(440px,72vw)}
:root[data-dizajn="ruze"][data-ploca] .r-ekrani .r-ekran:first-child{min-height:100svh}
:root[data-dizajn="ruze"][data-ploca] .loc,:root[data-dizajn="ruze"][data-ploca] .r-dress,:root[data-dizajn="ruze"][data-ploca] #rsvp form{background:rgba(255,255,255,.55);border-color:rgba(168,130,60,.25);box-shadow:none}
:root[data-dizajn="ruze"][data-ploca] footer{padding-bottom:42svh}
/* Every line rises from below as it comes into the opening */
:root[data-dizajn="ruze"][data-ploca] [data-otkrij="gore"]{transform:translateY(46px);transition:opacity 1.2s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
:root[data-dizajn="ruze"][data-ploca] [data-otkrij].vidljiv{transform:none}
:root[data-dizajn="ruze"][data-ploca] .vrh,:root[data-dizajn="ruze"][data-ploca] #muzika{z-index:40}