/* Design "Baršun" (barsun.js): burgundy velvet, translucent vellum, a gold wax seal and ivory paper (photos from
   Higgsfield in dizajn/barsun/). Active when <html data-dizajn="barsun">. The first screen is the flat lay with the text
   on the card; barsun.js places the monogram on the photographed seal (--ba-px/--ba-py/--ba-pd) and the text column at
   the edge of the vellum (--ba-tx). */
:root[data-dizajn="barsun"],.ba-uvod{
  --ba-vino:#5a1620; --ba-vino2:#7a2630; --ba-tekst:#3a1d20; --ba-sivo:#7a6058; --ba-zlato:#a8823c; --ba-papir:#f6eee4; --ba-puder:#ead2cb;
  --ba-foil:linear-gradient(100deg,#8a6526 0%,#c9a457 22%,#efd9a0 36%,#b8913f 52%,#8a6526 70%,#d6b46c 88%,#94702f 100%);
  --acc:var(--ba-vino); --ink:var(--ba-tekst); --muted:var(--ba-sivo); --line:rgba(90,22,32,.16); --on-acc:#fff; --gold:var(--ba-zlato);
}
:root[data-dizajn="barsun"] body{background:var(--ba-papir);color:var(--ba-tekst)}
/* Ivory paper with baby's breath in two corners stays still behind the page */
:root[data-dizajn="barsun"] body::before{content:"";position:fixed;inset:0;background:var(--ba-papir) url(/dizajn/barsun/papir.jpg) center/cover;pointer-events:none;z-index:0}
:root[data-dizajn="barsun"] .wrap{max-width:none;padding:0;gap:0;position:relative;z-index:1;overflow-x:clip}
:root[data-dizajn="barsun"] .env,:root[data-dizajn="barsun"] .hint{display:none}
:root[data-dizajn="barsun"] .vrh{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:0;right:0;z-index:30}
:root[data-dizajn="barsun"] .oznaka,:root[data-dizajn="barsun"] .jezik{background:rgba(246,238,228,.85);border-color:rgba(90,22,32,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
:root[data-dizajn="barsun"] main > section:not(.ba-hero),:root[data-dizajn="barsun"] main > footer{max-width:480px;margin:0 auto;width:100%}
:root[data-dizajn="barsun"] section{background:none;border:0;border-radius:0;padding:70px 28px 10px;text-align:center}
:root[data-dizajn="barsun"] h2{font-family:"Bodoni Moda",var(--f-head);font-weight:400;font-size:clamp(27px,7.6vw,34px);letter-spacing:.14em;text-transform:uppercase;color:var(--ba-vino);margin:0 0 30px;line-height:1.2;padding-left:.14em}
/* A small gold diamond under every heading */
:root[data-dizajn="barsun"] h2{padding-bottom:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z' fill='%23a8823c'/%3E%3C/svg%3E") center bottom/9px 9px no-repeat}
:root[data-dizajn="barsun"] h2 small{font-family:var(--f-script);font-size:30px;letter-spacing:0;text-transform:none;color:var(--ba-zlato);font-weight:400;margin-bottom:2px}
:root[data-pismo="cirilica"][data-dizajn="barsun"] h2{font-family:var(--f-head)}
:root[data-dizajn="barsun"] .foil{background:var(--ba-foil);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Intro without the video: the closed envelope ---------- */
.ba-uvod{position:fixed;inset:0;z-index:50;overflow:hidden;cursor:pointer;background:#e9d8cd url(/dizajn/uvodi/koverta.jpg) center/cover;transition:opacity 1.2s ease 1s,transform 2.2s cubic-bezier(.4,.1,.2,1)}
.ba-uvod-mono{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:"Bodoni Moda",var(--f-head);font-weight:600;font-size:min(5.4vw,3vh);letter-spacing:.06em;white-space:nowrap;
  color:rgba(105,70,18,.8);text-shadow:0 1px 0 rgba(255,236,190,.7),0 -1px 1px rgba(60,35,5,.35)}
.ba-uvod-hint{position:absolute;left:0;right:0;bottom:calc(8% + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(60,10,20,.6);animation:ba-puls 2.4s ease-in-out infinite}
@keyframes ba-puls{50%{opacity:.4}}
.ba-uvod.otvara{transform:scale(1.25);opacity:0;pointer-events:none}
.ba-uvod.otvara .ba-uvod-hint{opacity:0;animation:none}

/* ---------- First screen: the flat lay ---------- */
.ba-ekrani{position:relative;z-index:1}
:root[data-dizajn="barsun"] .ba-hero{position:relative;height:100svh;min-height:560px;max-width:560px;margin:0 auto;padding:0;overflow:hidden;
  background:#f4ece0 url(/dizajn/barsun/hero.jpg) center calc(0px - var(--ba-pomak,0px))/cover no-repeat}
/* The date in huge faded numerals down the right edge */
.ba-brojke{position:absolute;right:-.06em;top:6%;display:flex;flex-direction:column;align-items:flex-end;font-family:"Bodoni Moda",var(--f-head);font-weight:400;font-size:clamp(84px,27vw,132px);line-height:.88;color:rgba(122,40,48,.085);letter-spacing:-.02em;pointer-events:none;font-variant-numeric:lining-nums}
/* The monogram pressed into the photographed seal */
.ba-mono{position:absolute;left:var(--ba-px,130px);top:calc(var(--ba-py,360px) - var(--ba-pomak,0px));transform:translate(-50%,-50%);font-family:"Bodoni Moda",var(--f-head);font-weight:600;font-size:calc(var(--ba-pd,160px) * .21);letter-spacing:.04em;white-space:nowrap;
  color:rgba(110,74,20,.82);text-shadow:0 1px 0 rgba(255,236,190,.75),0 -1px 1px rgba(60,35,5,.4)}
.ba-linija{position:absolute;right:20px;top:54%;bottom:12%;width:1px;background:linear-gradient(var(--ba-zlato),transparent)}
.ba-tekst{position:absolute;left:var(--ba-tx,170px);right:16px;top:0;bottom:0;padding:16svh 0 6svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ba-tekst)}
.ba-mali{margin:0;font-family:var(--f-body);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#6a4a44;line-height:1.75;padding-left:.26em;text-wrap:balance}
.ba-imena{margin:16px 0;display:flex;flex-direction:column;align-items:center;width:100%;font-family:"Bodoni Moda",var(--f-head);font-weight:400;font-size:clamp(30px,9.8vw,44px);letter-spacing:.04em;line-height:1.04;color:var(--ba-vino);text-transform:uppercase}
.ba-imena > span{white-space:nowrap}
.ba-imena .ba-i{font-family:var(--f-script);text-transform:none;font-size:.78em;letter-spacing:0;line-height:1;margin:2px 0;background:var(--ba-foil);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .12em}
.ba-imena .ba-i:empty{display:none}
.ba-mj{margin:20px 0 0;font-family:var(--f-body);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ba-vino);padding-left:.32em}
.ba-dd{margin:0;font-family:"Bodoni Moda",var(--f-head);font-size:clamp(40px,12.4vw,54px);line-height:1.05;color:var(--ba-vino);font-variant-numeric:lining-nums}
.ba-sat{margin-top:2px}
.ba-mjesto{margin-top:14px}
/* The first screen arrives line by line once the envelope has opened */
:root[data-dizajn="barsun"] .ba-tekst > *,:root[data-dizajn="barsun"] .ba-mono,:root[data-dizajn="barsun"] .ba-brojke{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
:root[data-dizajn="barsun"] .ba-mono{transform:translate(-50%,-50%) scale(1.25)}
:root[data-dizajn="barsun"].otvoreno .ba-tekst > *,:root[data-dizajn="barsun"].otvoreno .ba-brojke{opacity:1;transform:none}
:root[data-dizajn="barsun"].otvoreno .ba-mono{opacity:1;transform:translate(-50%,-50%)}
:root[data-dizajn="barsun"].otvoreno .ba-brojke{transition-delay:.2s}
:root[data-dizajn="barsun"].otvoreno .ba-mono{transition-delay:.5s}
.ba-tekst > :nth-child(1){transition-delay:.7s!important}.ba-tekst > :nth-child(2){transition-delay:.9s!important}.ba-tekst > :nth-child(3){transition-delay:1.1s!important}
.ba-tekst > :nth-child(4),.ba-tekst > :nth-child(5),.ba-tekst > :nth-child(6){transition-delay:1.3s!important}.ba-tekst > :nth-child(7){transition-delay:1.4s!important}.ba-tekst > :nth-child(8){transition-delay:1.6s!important}.ba-tekst > :nth-child(9){transition-delay:1.8s!important}

/* At the end of the envelope video the invitation is printed onto the card that came out (barsun.js), then the camera
   zooms in through it (uvodvideo.js) */
.ba-na-karti{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6% 7%;overflow:hidden;pointer-events:none;color:var(--ba-tekst)}
.ba-na-karti > *{animation:ba-stampa 1s ease both}
.ba-na-karti > :nth-child(2){animation-delay:.15s}.ba-na-karti > :nth-child(3){animation-delay:.3s}
@keyframes ba-stampa{from{opacity:0;filter:blur(3px)}}
.ba-na-karti .ba-brojke{top:3%;right:2%;font-size:clamp(70px,22vw,120px)}
.ba-nk-mono{margin:0 0 6px;font-family:"Bodoni Moda",var(--f-head);font-weight:600;font-size:17px;letter-spacing:.08em;color:var(--ba-zlato);display:flex;align-items:center;gap:12px}
.ba-nk-mono::before,.ba-nk-mono::after{content:"";width:34px;height:1px;background:var(--ba-zlato);opacity:.6}
.ba-na-karti .ba-tekst{position:static;padding:0;width:100%}
.ba-na-karti .ba-tekst > *,.ba-na-karti .ba-brojke{opacity:1!important;transform:none!important;transition:none!important}
.ba-na-karti .ba-imena{font-size:clamp(34px,11vw,52px)}
.ba-na-karti .ba-mali{font-size:11.5px}
:root.ba-odmah .ba-tekst > *,:root.ba-odmah .ba-mono,:root.ba-odmah .ba-brojke{transition:none!important}

/* ---------- The couple, held by a strip of vellum and the seal ---------- */
:root[data-dizajn="barsun"] .ba-foto-ekran{padding:84px 28px 0;max-width:480px;margin:0 auto}
.ba-foto{position:relative;margin:0 auto;width:min(78vw,340px);aspect-ratio:4/5;background:#fff;padding:10px;box-shadow:0 2px 4px rgba(60,20,20,.08),0 24px 50px rgba(60,20,20,.18);transform:rotate(-1.5deg)}
.ba-foto img{width:100%;height:100%;object-fit:cover;display:block}
.ba-foto img.cb{filter:grayscale(1)}
.ba-traka{position:absolute;left:-16%;width:62%;top:6%;height:52px;transform:rotate(-38deg);background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(250,246,240,.5));box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 4px 10px rgba(60,20,20,.08);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8% 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8% 92%,transparent)}
.ba-foto-pecat{position:absolute;left:3%;top:4%;width:70px;aspect-ratio:1;background:url(/dizajn/barsun/pecat.png) center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(60,30,5,.3));display:flex;align-items:center;justify-content:center}
.ba-foto-pecat b{font-family:"Bodoni Moda",var(--f-head);font-weight:600;font-size:14px;letter-spacing:.04em;color:rgba(105,70,18,.82);text-shadow:0 1px 0 rgba(255,236,190,.7),0 -1px 1px rgba(60,35,5,.35)}
:root[data-dizajn="barsun"] #ba-foto-ekran #odbrojavanje{margin-top:34px}

/* ---------- Sections ---------- */
:root[data-dizajn="barsun"] .intro{font-family:"Bodoni Moda",var(--f-head);font-style:italic;font-size:18px;line-height:1.75;color:var(--ba-tekst)}
:root[data-dizajn="barsun"] .count-l{color:var(--ba-sivo);letter-spacing:.3em;font-family:var(--f-body)}
:root[data-dizajn="barsun"] .count{gap:0;margin-top:10px}
:root[data-dizajn="barsun"] .count > div{border-left:1px solid rgba(168,130,60,.4);font-family:"Bodoni Moda",var(--f-head);font-weight:400;font-size:32px;color:var(--ba-vino)}
:root[data-dizajn="barsun"] .count > div:first-child{border-left:0}
/* Programme: line icons on the left, a dashed thread joining them, the text on the right */
:root[data-dizajn="barsun"] .prog{gap:0;position:relative;text-align:left;max-width:330px;margin:0 auto}
:root[data-dizajn="barsun"] .prog::before{content:"";position:absolute;left:27px;top:30px;bottom:30px;border-left:1px dashed rgba(168,130,60,.55)}
:root[data-dizajn="barsun"] .prog li{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:18px;border:0;padding:16px 0;position:relative;align-items:start}
:root[data-dizajn="barsun"] .prog li .pr-ikona{grid-row:1/5;grid-column:1;width:56px;height:56px;padding:12px;margin:0;background:var(--ba-papir);border-radius:50%;color:var(--ba-zlato);position:relative;z-index:1}
:root[data-dizajn="barsun"] .prog li > div{display:contents}
:root[data-dizajn="barsun"] .prog li > div > *{grid-column:2}
:root[data-dizajn="barsun"] .prog li > div > b{grid-row:1}
:root[data-dizajn="barsun"] .prog li > div > p{grid-row:3}
:root[data-dizajn="barsun"] .prog time{grid-column:2;grid-row:2;font-family:"Bodoni Moda",var(--f-head);font-size:18px;line-height:1.5;font-weight:400;color:var(--ba-tekst)}
:root[data-dizajn="barsun"] .prog b{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:700;color:var(--ba-vino)}
:root[data-dizajn="barsun"] .prog p{font-family:var(--f-body);font-size:14px;color:var(--ba-sivo)}
:root[data-dizajn="barsun"] .p-karta{color:var(--ba-vino)}
/* Location with a drawn map */
.ba-karta-omot{display:none}
:root[data-dizajn="barsun"] .ba-karta-omot{display:block;width:100%;max-width:360px;margin:0 auto 14px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(168,130,60,.35),0 14px 30px rgba(60,20,20,.1);background:#faf5ee}
.ba-karta{display:block;width:100%;height:auto}
:root[data-dizajn="barsun"] #adresa{font-family:"Bodoni Moda",var(--f-head);font-size:16px;color:var(--ba-tekst)}
:root[data-dizajn="barsun"] .btn-o{border-radius:99px;border-color:var(--ba-vino);color:var(--ba-vino);letter-spacing:.22em;text-transform:uppercase;font-size:11.5px;font-weight:700;font-family:var(--f-body);padding:12px 24px;background:transparent}
:root[data-dizajn="barsun"] .btn-o:hover{background:var(--ba-vino);color:#fff}
.ba-dress{display:none}
:root[data-dizajn="barsun"] .ba-dress{display:block}
:root[data-dizajn="barsun"] .ba-dress[hidden]{display:none}
.ba-boje{display:flex;justify-content:center;gap:14px;margin:0 0 16px}
.ba-boje i{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(168,130,60,.5),0 6px 14px rgba(60,20,20,.1)}
.ba-dress p{margin:0;font-family:var(--f-body);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ba-tekst)}
/* Reply: burgundy and outlined pills, the form on ivory */
:root[data-dizajn="barsun"] .deadline{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;color:var(--ba-sivo);margin-top:-14px}
:root[data-dizajn="barsun"] .choice{grid-template-columns:1fr;gap:12px}
:root[data-dizajn="barsun"] #rsvp .choice label{border-radius:99px;border-color:var(--ba-vino);color:var(--ba-vino);text-align:center;font-family:var(--f-body);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:12px;background:transparent;min-height:52px}
:root[data-dizajn="barsun"] #rsvp .choice input:checked + label{background:var(--ba-vino);border-color:var(--ba-vino);color:#f6e9d9;box-shadow:0 8px 20px rgba(90,22,32,.25)}
:root[data-dizajn="barsun"] #rsvp input[type=text],:root[data-dizajn="barsun"] #rsvp select,:root[data-dizajn="barsun"] #rsvp textarea{background:rgba(255,255,255,.55);border:0;border-bottom:1px solid rgba(90,22,32,.3);border-radius:0;padding:11px 6px}
:root[data-dizajn="barsun"] #rsvp label,:root[data-dizajn="barsun"] #rsvp .lbl{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:700;text-align:left;color:var(--ba-sivo)}
:root[data-dizajn="barsun"] .step button{background:transparent;border-color:rgba(90,22,32,.3);color:var(--ba-vino)}
:root[data-dizajn="barsun"] .submit{border-radius:99px;background:var(--ba-vino)!important;font-family:var(--f-body);letter-spacing:.26em}
:root[data-dizajn="barsun"] .thanks .big{color:var(--ba-vino)}
:root[data-dizajn="barsun"] #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="barsun"] #muzika > div{display:none}
:root[data-dizajn="barsun"] .play{width:48px;height:48px;background:var(--ba-vino);box-shadow:0 0 0 3px rgba(246,238,228,.8),0 8px 20px rgba(90,22,32,.35)}
:root[data-dizajn="barsun"] .gal{display:flex;flex-direction:column;gap:22px}
:root[data-dizajn="barsun"] .gal img{border-radius:0;padding:8px;background:#fff;box-shadow:0 18px 36px rgba(60,20,20,.14)}
:root[data-dizajn="barsun"] .gal img:nth-child(odd){transform:rotate(-1.2deg)}
:root[data-dizajn="barsun"] .gal img:nth-child(even){transform:rotate(1.2deg)}
/* Closing seal over burgundy and blush waves */
:root[data-dizajn="barsun"] footer{position:relative;max-width:none!important;padding:80px 24px 150px;gap:14px}
.ba-kraj{display:none}
:root[data-dizajn="barsun"] .ba-kraj{display:flex;width:96px;aspect-ratio:1;background:url(/dizajn/barsun/pecat.png) center/contain no-repeat;filter:drop-shadow(0 6px 8px rgba(60,30,5,.3));align-items:center;justify-content:center}
.ba-kraj span{font-family:"Bodoni Moda",var(--f-head);font-weight:600;font-size:17px;color:rgba(105,70,18,.82);text-shadow:0 1px 0 rgba(255,236,190,.7),0 -1px 1px rgba(60,35,5,.35)}
:root[data-dizajn="barsun"] footer .potpis{font-size:36px;color:var(--ba-vino);background:none;-webkit-text-fill-color:currentColor}
:root[data-dizajn="barsun"] .brend{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1;color:#f3e3dc}
:root[data-dizajn="barsun"] .brend b{color:#efd9a0}
.ba-valovi{display:none}
:root[data-dizajn="barsun"] .ba-valovi{display:block;position:absolute;left:0;right:0;bottom:0;width:100%;height:150px}

/* Every block rises softly into place */
:root[data-dizajn="barsun"] .ba-otkrij{opacity:0;transform:translateY(22px);transition:opacity 1s ease var(--kasni,0s),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--kasni,0s)}
:root[data-dizajn="barsun"] .ba-otkrij.vidljiv{opacity:1;transform:none}
:root[data-dizajn="barsun"] .ba-foto.ba-otkrij.vidljiv{transform:rotate(-1.5deg)}
@media (prefers-reduced-motion:reduce){
  :root[data-dizajn="barsun"] .ba-otkrij,:root[data-dizajn="barsun"] .ba-tekst > *,:root[data-dizajn="barsun"] .ba-brojke{opacity:1;transform:none;transition:none}
  :root[data-dizajn="barsun"] .ba-mono{opacity:1;transition:none}
}