/* Design "Pečat": a full-screen paper envelope closed with a wax seal, a full-bleed photo with a torn
   paper edge, big script names, letter-spaced serif text and reveal-on-scroll animations.
   Active when <html data-dizajn="pecat">; colour comes from data-boja (bordo / zlatni / zeleni). */
/* The envelope carries the colours too, so it also works in front of another design (v.uvodTip) */
:root[data-dizajn="pecat"],.p-koverta{
  --p-acc:#7b1e2b; --p-acc-2:#5a1420; --p-papir:#f3eee6; --p-tekst:#2b2522; --p-sivo:#6f655c;
  --p-pecat-filter:none;
  --acc:var(--p-acc); --ink:var(--p-tekst); --muted:var(--p-sivo); --line:rgba(43,37,34,.18); --on-acc:#fff;
}
:root[data-dizajn="pecat"][data-boja="zlatni"],:root[data-dizajn="pecat"][data-boja="zlatni"] .p-koverta{ --p-acc:#8a6526; --p-acc-2:#6b4c1a; --p-pecat-filter:sepia(1) saturate(1.5) hue-rotate(-12deg) brightness(1.45) contrast(.95) }
:root[data-dizajn="pecat"][data-boja="zeleni"],:root[data-dizajn="pecat"][data-boja="zeleni"] .p-koverta{ --p-acc:#24483f; --p-acc-2:#173129; --p-pecat-filter:hue-rotate(160deg) saturate(.55) brightness(.92) }

:root[data-dizajn="pecat"] body{background:var(--p-papir) url(/dizajn/papir.jpg) repeat;background-size:720px;color:var(--p-tekst)}
:root[data-dizajn="pecat"] .wrap{max-width:none;padding:0 0 40px;gap:0}
:root[data-dizajn="pecat"] .env,:root[data-dizajn="pecat"] .hint{display:none}
:root[data-dizajn="pecat"] .vrh{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:0;right:0;z-index:30}
:root[data-dizajn="pecat"] main > section,:root[data-dizajn="pecat"] main > footer{max-width:560px;margin:0 auto;width:100%}
:root[data-dizajn="pecat"] section{background:none;border:0;border-radius:0;padding:64px 24px 8px;text-align:center}
:root[data-dizajn="pecat"] h2{font-family:var(--f-script);font-weight:400;font-size:clamp(44px,12vw,58px);color:var(--p-acc);margin:0 0 26px;line-height:1.1;padding:0 6px}
:root[data-dizajn="pecat"] h2 small{font-family:var(--f-head);font-size:12px;letter-spacing:.32em;color:var(--p-sivo);font-weight:500;margin-bottom:10px}
:root[data-dizajn="pecat"] .foil{background:none;-webkit-text-fill-color:currentColor;color:var(--p-acc)}
.p-mali{font-family:var(--f-head);font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:13.5px;line-height:1.9;color:var(--p-tekst);margin:0 auto;max-width:31em}

/* ---------- Envelope intro ---------- */
.p-koverta{position:fixed;inset:0;z-index:50;overflow:hidden;perspective:1600px;cursor:pointer;background:#e9e2d6;transition:opacity 1s ease .1s, transform 1.2s cubic-bezier(.3,.6,.2,1)}
.p-koverta > *{position:absolute;inset:0}
.p-k-papir{background:var(--p-papir) url(/dizajn/papir.jpg) center/760px repeat}
.p-k-zadnja{background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.06) 55%),var(--p-papir) url(/dizajn/papir.jpg) center/760px}
.p-k-karta{inset:auto 7% 9% 7%;height:78%;background:#fbf8f2 url(/dizajn/papir.jpg) center/640px;border-radius:3px;box-shadow:0 6px 24px rgba(0,0,0,.18);display:flex;align-items:flex-start;justify-content:center;text-align:center;transition:transform 1.3s cubic-bezier(.25,.8,.25,1) 1.05s}
.p-k-karta-in{margin-top:13%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 8%}
.p-k-karta .p-k-mali{font-family:var(--f-head);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--p-sivo)}
.p-k-imena{font-family:var(--f-script);font-size:clamp(40px,12vw,64px);line-height:1.1;color:var(--p-acc)}
.p-k-datum{font-family:var(--f-head);letter-spacing:.24em;font-size:14px}
/* Pocket: left, right and bottom folds, each lit a little differently */
.p-k-lijevo,.p-k-desno,.p-k-dno{background:var(--p-papir) url(/dizajn/papir.jpg) center/760px;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.3)) drop-shadow(0 3px 10px rgba(0,0,0,.16))}
.p-k-lijevo{clip-path:polygon(0 0,51% 54%,0 100%)}
.p-k-desno{clip-path:polygon(100% 0,49% 54%,100% 100%)}
.p-k-lijevo::after,.p-k-desno::after,.p-k-dno::after{content:"";position:absolute;inset:0}
.p-k-lijevo::after{background:linear-gradient(100deg,rgba(255,255,255,.28),rgba(0,0,0,.07) 70%)}
.p-k-desno::after{background:linear-gradient(260deg,rgba(0,0,0,.12),rgba(255,255,255,.06) 70%)}
.p-k-dno{clip-path:polygon(0 100%,50% 50%,100% 100%)}
.p-k-dno::after{background:linear-gradient(0deg,rgba(255,255,255,.14),rgba(0,0,0,.1))}
/* Top flap: paper outside, wine liner with a fine gold pattern inside */
.p-k-preklop{transform-origin:50% 0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.5,.05,.3,1) .35s;z-index:3}
.p-k-preklop > div{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 57%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.p-k-preklop .lice{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.08)),var(--p-papir) url(/dizajn/papir.jpg) center/760px;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.3)) drop-shadow(0 5px 10px rgba(0,0,0,.22))}
.p-k-preklop .nalicje{transform:rotateX(180deg);background:
  radial-gradient(circle at 50% 50%,rgba(214,180,110,.55) 0 1.1px,transparent 1.6px) 0 0/22px 22px,
  radial-gradient(circle at 50% 50%,rgba(214,180,110,.35) 0 .8px,transparent 1.2px) 11px 11px/22px 22px,
  linear-gradient(180deg,var(--p-acc),var(--p-acc-2))}
.p-k-pecat{position:absolute;inset:auto;left:50%;top:57%;width:min(38vw,190px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;z-index:5;filter:drop-shadow(0 6px 10px rgba(60,10,15,.35))}
.p-k-pecat .pol{position:absolute;inset:0;background:url(/dizajn/pecat.webp) center/contain no-repeat;filter:var(--p-pecat-filter);transition:transform .9s cubic-bezier(.4,.1,.3,1),opacity .7s ease .2s}
.p-k-pecat .pol.l{clip-path:polygon(0 0,52% 0,47% 30%,54% 55%,46% 78%,51% 100%,0 100%)}
.p-k-pecat .pol.d{clip-path:polygon(52% 0,100% 0,100% 100%,51% 100%,46% 78%,54% 55%,47% 30%)}
.p-k-pecat .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-script);font-size:min(13vw,64px);line-height:1;color:rgba(40,4,10,.55);text-shadow:0 1.5px 0 rgba(255,255,255,.22),0 -1px 1px rgba(0,0,0,.45);letter-spacing:.02em;padding-bottom:4%;transition:opacity .4s}
.p-k-pecat .mono.pinyon,.p-mali-pecat span.pinyon{font-family:"Pinyon Script",cursive;font-size:min(12vw,58px);letter-spacing:.06em}
.p-mali-pecat span.pinyon{font-size:36px;letter-spacing:.1em}
.p-k-pecat:focus-visible{outline:3px solid var(--p-acc);outline-offset:6px;border-radius:50%}
.p-k-hint{inset:auto 0 calc(8% + env(safe-area-inset-bottom,0px)) 0;margin:0;text-align:center;font-family:var(--f-head);text-transform:uppercase;letter-spacing:.3em;font-size:11.5px;color:var(--p-sivo);animation:p-puls 2.4s ease-in-out infinite;z-index:6}
@keyframes p-puls{50%{opacity:.35}}
.p-k-pecat::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(123,30,43,.25);animation:p-val 2.4s ease-out infinite}
@keyframes p-val{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.25);opacity:0}}
/* Opening sequence */
.p-koverta.otvara .p-k-pecat::after,.p-koverta.otvara .p-k-hint{animation:none;opacity:0}
.p-koverta.otvara .p-k-pecat .mono{opacity:0}
.p-koverta.otvara .p-k-pecat .pol.l{transform:translate(-38%,24%) rotate(-24deg);opacity:0}
.p-koverta.otvara .p-k-pecat .pol.d{transform:translate(38%,30%) rotate(20deg);opacity:0}
.p-koverta.otvara .p-k-preklop{transform:rotateX(178deg)}
.p-koverta.otvara.ispod .p-k-preklop{z-index:0}
.p-koverta.otvara .p-k-karta{transform:translateY(-15%)}
.p-koverta.gotovo{opacity:0;transform:scale(1.08);pointer-events:none}

/* ---------- Hero photo with torn edge ---------- */
.p-hero{position:relative;height:92svh;min-height:520px;overflow:hidden}
.p-hero img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);transition:transform 9s cubic-bezier(.2,.6,.2,1)}
:root[data-dizajn="pecat"].otvoreno .p-hero img{transform:scale(1)}
.p-hero.siroka{height:clamp(300px,46svh,560px);min-height:0}
.p-hero.siroka img{object-position:22% 0%}
.p-hero.kvadrat{height:auto;min-height:0;max-height:92svh}
.p-hero.kvadrat img{height:auto}
.p-hero.kvadrat .p-strelica{display:none}
.p-hero.cb img{filter:grayscale(1) contrast(1.05)}
/* On a computer screen a tall photo stretched across the whole width is cut to a strip of faces: there it stays
   in the column of the invitation, whole */
@media (min-width:700px){
  .p-hero:not(.siroka){max-width:600px;margin:0 auto;height:auto;min-height:0;max-height:none}
  .p-hero:not(.siroka) img{height:auto}
}
.p-poderano{position:absolute;left:-2%;right:-2%;bottom:-3px;height:64px;background:var(--p-papir) url(/dizajn/papir.jpg) repeat;background-size:720px}
.p-strelica{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(255,255,255,.85);border-radius:14px}
.p-strelica::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:p-skrol 1.8s ease-in-out infinite}
@keyframes p-skrol{60%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* ---------- Names and date ---------- */
.p-naslov{padding-top:56px!important}
.p-imena{margin:34px 0 30px;font-family:var(--f-script);font-weight:400;color:var(--p-acc);line-height:.95;display:flex;flex-direction:column;align-items:center}
.p-ime{font-size:clamp(66px,20vw,104px);padding:0 10px}
.p-ime.l{align-self:flex-start;margin-left:6%}
.p-ime.d{align-self:flex-end;margin-right:6%}
.p-amp{font-size:clamp(40px,11vw,60px);margin:-6px 0}
.p-datum{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:40px}
.p-datum span{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.3em;font-size:15px;font-weight:600}
.p-datum b{font-family:var(--f-head);font-weight:500;font-size:clamp(28px,8.4vw,38px);letter-spacing:.14em;font-variant-numeric:lining-nums}
.p-ukras{display:block;margin:30px auto 0;width:150px;height:22px;color:var(--p-acc);opacity:.7}

/* Sections restyled */
:root[data-dizajn="pecat"] .intro{font-family:var(--f-head);font-style:normal;text-transform:uppercase;letter-spacing:.18em;font-size:13.5px;line-height:1.9}
:root[data-dizajn="pecat"] #s-uvod > h2,:root[data-dizajn="pecat"] #s-uvod > .intro{display:none}
:root[data-dizajn="pecat"] #s-uvod{padding-top:30px}
:root[data-dizajn="pecat"] .count-l{color:var(--p-sivo);letter-spacing:.3em}
:root[data-dizajn="pecat"] .count{gap:0;margin-top:14px}
:root[data-dizajn="pecat"] .count > div{border-left:1px solid var(--line);color:var(--p-acc);font-weight:500;font-size:32px}
:root[data-dizajn="pecat"] .count > div:first-child{border-left:0}
:root[data-dizajn="pecat"] .prog{position:relative;gap:0}
:root[data-dizajn="pecat"] .prog::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:var(--line)}
:root[data-dizajn="pecat"] .prog li{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;padding:20px 0;position:relative;background:var(--p-papir) url(/dizajn/papir.jpg);background-size:720px;background-attachment:fixed}
:root[data-dizajn="pecat"] .prog time{font-size:24px;font-weight:500;color:var(--p-tekst);letter-spacing:.06em}
:root[data-dizajn="pecat"] .prog b{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.2em;font-size:13.5px;font-weight:600}
:root[data-dizajn="pecat"] .prog p{font-family:var(--f-head);font-size:14.5px;color:var(--p-sivo);max-width:22em}
.p-karta{font-family:var(--f-head);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--p-acc);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;margin-top:4px}
:root[data-dizajn="pecat"] .loc .btn-o,:root[data-dizajn="pecat"] .btn-o{border-radius:0;border-color:var(--p-acc);color:var(--p-acc);letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-family:var(--f-head);padding:12px 22px}
:root[data-dizajn="pecat"] .btn-o:hover{background:var(--p-acc);color:#fff}
:root[data-dizajn="pecat"] .loc h2 span{display:block}
:root[data-dizajn="pecat"] #adresa{font-family:var(--f-head);letter-spacing:.06em}

/* Gallery with parallax depth */
:root[data-dizajn="pecat"] #galerija{max-width:none;padding:56px 0 8px}
:root[data-dizajn="pecat"] .gal{display:flex;flex-direction:column;gap:18px}
:root[data-dizajn="pecat"] .gal-okvir{overflow:hidden;height:auto;max-height:80vh;aspect-ratio:4/5;margin:0 auto;width:min(100%,900px)}
:root[data-dizajn="pecat"] .gal-okvir img{width:100%;height:120%;object-fit:cover;aspect-ratio:auto!important;will-change:transform;border-radius:0}

/* RSVP: underlined fields, square buttons */
:root[data-dizajn="pecat"] #rsvp input[type=text],:root[data-dizajn="pecat"] #rsvp select,:root[data-dizajn="pecat"] #rsvp textarea{background:transparent;border:0;border-bottom:1px solid rgba(43,37,34,.35);border-radius:0;padding:10px 2px}
:root[data-dizajn="pecat"] #rsvp label,:root[data-dizajn="pecat"] #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="pecat"] .choice label{border-radius:0;border-color:rgba(43,37,34,.35);font-family:var(--f-head);letter-spacing:.12em;text-transform:uppercase;font-size:13px;background:transparent}
:root[data-dizajn="pecat"] .choice input:checked + label{background:var(--p-acc);border-color:var(--p-acc)}
:root[data-dizajn="pecat"] .submit{border-radius:0;background:var(--p-acc)!important;font-family:var(--f-head);letter-spacing:.3em}
:root[data-dizajn="pecat"] .pchip{background:transparent;border-radius:0;font-family:var(--f-head);letter-spacing:.08em}
:root[data-dizajn="pecat"] .step button{border-radius:0;background:transparent}
:root[data-dizajn="pecat"] .deadline{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.16em;font-size:12.5px}
:root[data-dizajn="pecat"] .thanks .big{color:var(--p-acc)}

/* Muzika: small round button that floats over the page */
:root[data-dizajn="pecat"] #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="pecat"] #muzika > div{display:none}
:root[data-dizajn="pecat"] .play{width:48px;height:48px;background:var(--p-acc);box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* Lux voice message: a quiet row with a round button in the accent colour */
:root[data-dizajn="pecat"] #poruka{padding:48px 24px 8px;gap:16px;text-align:left}
:root[data-dizajn="pecat"] #poruka .play{background:var(--p-acc);box-shadow:0 6px 18px rgba(0,0,0,.2)}
:root[data-dizajn="pecat"] #poruka b{font-family:var(--f-script);font-weight:400;font-size:32px;color:var(--p-acc);line-height:1.1}

/* Closing */
:root[data-dizajn="pecat"] footer{padding:72px 24px 24px;gap:18px}
.p-kraj{font-family:var(--f-script);font-size:clamp(44px,12vw,58px);color:var(--p-acc);line-height:1.1;margin:0}
.p-mali-pecat{width:120px;aspect-ratio:1;position:relative;filter:drop-shadow(0 5px 8px rgba(60,10,15,.3))}
.p-mali-pecat i{position:absolute;inset:0;background:url(/dizajn/pecat.webp) center/contain no-repeat;filter:var(--p-pecat-filter)}
.p-mali-pecat span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-script);font-size:42px;color:rgba(40,4,10,.55);text-shadow:0 1px 0 rgba(255,255,255,.2),0 -1px 1px rgba(0,0,0,.45);letter-spacing:.02em;padding-bottom:4px}
:root[data-dizajn="pecat"] footer .potpis{font-family:var(--f-script);color:var(--p-tekst);font-size:34px}

/* Reveal on scroll */
[data-otkrij]{opacity:0;transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--kasni,0s)}
[data-otkrij="gore"]{transform:translateY(28px)}
[data-otkrij="lijevo"]{transform:translateX(-60px)}
[data-otkrij="desno"]{transform:translateX(60px)}
[data-otkrij="zum"]{transform:scale(.92)}
[data-otkrij].vidljiv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-otkrij]{opacity:1;transform:none}.p-hero img{transform:none}}

/* One name only (a christening) */
.p-imena.jedno .p-amp,.p-imena.jedno .p-ime.d{display:none}
.p-imena.jedno .p-ime.l{align-self:center;margin:0;font-size:clamp(76px,23vw,118px)}
/* The Greek script face is much wider than Pinyon Script, so long Greek names would run off the screen */
:root[lang="el"] .p-ime,:root[data-grcki] .p-ime{font-size:clamp(44px,12.5vw,74px)}
:root[lang="el"] .p-k-imena,:root[data-grcki] .p-k-imena{font-size:clamp(28px,8vw,46px)}
.p-krst{display:none;width:34px;height:54px;margin:28px auto 0;color:var(--gold)}

/* Tradicionalni: folk red, gold and cross-stitch borders like the embroidery on a national costume */
:root[data-dizajn="pecat"][data-boja="tradicija"],:root[data-dizajn="pecat"][data-boja="tradicija"] .p-koverta{ --p-acc:#9e1b22; --p-acc-2:#6e1015; --p-pecat-filter:saturate(1.45) hue-rotate(-7deg) brightness(1.1) }
:root[data-boja="tradicija"] .p-poderano{display:none}
:root[data-boja="tradicija"] .p-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:var(--p-papir) url(/dizajn/vez.svg) repeat-x center/auto 36px;box-shadow:0 -3px 8px rgba(0,0,0,.18)}
:root[data-boja="tradicija"] .p-naslov::before,:root[data-boja="tradicija"] .p-naslov::after,:root[data-boja="tradicija"] footer::before{content:"";display:block;height:30px;max-width:330px;margin:0 auto;background:url(/dizajn/vez.svg) repeat-x center/auto 30px}
:root[data-boja="tradicija"] .p-naslov::after{margin-top:34px}
:root[data-boja="tradicija"] footer::before{margin-bottom:8px;width:100%}
:root[data-boja="tradicija"] .p-ukras{display:none}
:root[data-boja="tradicija"] .p-krst{display:block}
:root[data-boja="tradicija"] .p-k-preklop .nalicje{background:url(/dizajn/vez.svg) 0 0/56px auto,#f6efe3}
:root[data-boja="tradicija"] .count > div{color:var(--p-acc)}