/* Design "Krstionica" (see krstionica.js) for christenings: ivory turning into the pale blue of water, gold,
   white roses, candles and specks of light. Active when <html data-dizajn="krstionica">; one look, no colour choice.
   Its intro is the baptismal font in voda.css. */
:root[data-dizajn="krstionica"]{
  --kr-voda:#e5eef3; --kr-plava:#6d8ba0; --kr-zlato:#b08a4a; --kr-zlato-l:rgba(176,138,74,.45); --kr-sjena:rgba(70,90,110,.12);
  --acc:#8a6526; --acc-deep:#6b4c1a; --ink:#2a2420; --muted:#6f6a64; --line:#e7ddca; --on-acc:#fff;
  --bg:#fcf9f3; --bg2:var(--kr-voda); --paper:#fff; --gold:var(--kr-zlato);
}
/* Faint lines like the surface of water over a light that turns blue further down */
:root[data-dizajn="krstionica"] body{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='46'%3E%3Cpath d='M0 23c20-10 40-10 60 0s40 10 60 0 30-8 40-4' fill='none' stroke='%23b08a4a' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E") 0 0/160px 46px,
  linear-gradient(180deg,#fcf9f3 0%,#f6f5f0 40%,#e9f0f3 100%) fixed;color:var(--ink)}
:root[data-dizajn="krstionica"] .wrap{position:relative;z-index:1;gap:46px;overflow-x:hidden;overflow-x:clip}
:root[data-dizajn="krstionica"] .env,:root[data-dizajn="krstionica"] .hint{display:none}

/* ---------- Top of the page ---------- */
.kr-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:0}
/* Bands of folk cross-stitch (dizajn/sara.svg, our own drawing in the spirit of Serbian embroidery) */
.kr-traka{flex:none;width:100vw;max-width:none;height:34px;margin:0 0 16px;background:url(/dizajn/sara.svg) repeat-x center/auto 34px}
footer .kr-traka{margin:6px 0 0}
.kr-krst{width:30px;margin-bottom:6px;filter:drop-shadow(0 1px 1px rgba(90,60,15,.25))}
.kr-krst svg{display:block;width:100%;height:auto}
.kr-ime{margin:0;font-family:var(--f-script);font-weight:400;font-size:clamp(68px,21vw,104px);line-height:1.15;padding:0 10px;
  animation:kr-sjaj 3s ease 1.2s both}
.kr-poziv{margin:0 0 26px;font-family:var(--f-head);font-size:clamp(19px,5.4vw,23px);font-style:italic;color:var(--ink);text-wrap:balance;padding:0 12px}
/* The photo in a tall arch with a gold edge and soft light behind it */
/* The big photo spans the whole screen width, whole and unframed, with soft cloud-like edges (as in Peškir) */
.kr-foto{flex:none;width:min(100vw,560px);margin:0 0 4px}
.kr-foto-in{overflow:hidden}
.kr-foto img{width:100%;height:auto;display:block;animation:kr-zum 18s ease-in-out infinite alternate;
  -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}
.kr-foto.cb img{filter:grayscale(1)}
.kr-datum{margin:30px 0 0;font-family:var(--f-head);font-size:19px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:14px;padding:0 8px}
.kr-datum::before,.kr-datum::after{content:"";width:34px;height:10px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M1 5c4-4 8-4 12 0s8 4 12 0 6-3 8-2' fill='none' stroke='%23b08a4a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- Cards: white, a thin double gold frame, a wave above each ---------- */
:root[data-dizajn="krstionica"] main > section{position:relative;background:url(/dizajn/sara.svg) repeat-x center 12px/auto 24px,#fff;border:1px solid var(--kr-zlato-l);border-radius:16px;padding:54px 22px 30px;text-align:center;
  box-shadow:0 14px 34px var(--kr-sjena);outline:1px solid rgba(176,138,74,.22);outline-offset:-8px}
:root[data-dizajn="krstionica"] main > section::before{content:"";position:absolute;left:50%;top:-30px;width:120px;height:16px;margin-left:-60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M2 8c9-7 18-7 27 0s18 7 27 0 18-7 27 0 18 7 27 0 6-4 8-3' fill='none' stroke='%23b08a4a' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='8' r='2.2' fill='%23b08a4a'/%3E%3C/svg%3E") center/contain no-repeat}
:root[data-dizajn="krstionica"] h2{font-weight:500;font-size:28px;color:var(--ink);display:flex;align-items:flex-end;justify-content:center;gap:14px;flex-wrap:wrap}
:root[data-dizajn="krstionica"] h2 small{flex-basis:100%;color:var(--kr-zlato);font-weight:700}
:root[data-dizajn="krstionica"] #s-uvod h2 small{font-family:var(--f-script);font-size:44px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--acc);margin:0 0 4px}
:root[data-dizajn="krstionica"] #s-uvod h2 > span{display:none}
:root[data-dizajn="krstionica"] .intro{font-style:normal;font-size:19px;line-height:1.6}
:root[data-dizajn="krstionica"] .count > div{color:var(--acc)}
:root[data-dizajn="krstionica"] .prog li{text-align:left}
:root[data-dizajn="krstionica"] .pr-ikona{color:var(--kr-zlato)}
:root[data-dizajn="krstionica"] .p-karta{display:inline-block;margin-top:4px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--acc)}
.kr-ukras{position:absolute;right:-6px;top:-34px;width:118px;z-index:2;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(60,70,50,.15));animation:kr-lebdi 5s ease-in-out infinite}
.kr-ukras svg{display:block;width:100%;height:auto;overflow:visible}
/* Gallery: whole photos with soft edges, no frame */
:root[data-dizajn="krstionica"] #galerija h2{display:none}
:root[data-dizajn="krstionica"] #galerija{background:none;border:0;outline:0;box-shadow:none;padding:0}
:root[data-dizajn="krstionica"] #galerija::before{display:none}
:root[data-dizajn="krstionica"] .gal{display:flex;flex-direction:column;gap:14px}
:root[data-dizajn="krstionica"] #gal > img{width:100%;height:auto;aspect-ratio:auto;border-radius:0;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%)}

.kr-kraj{margin:0;font-family:var(--f-script);font-size:34px;color:var(--acc);text-align:center}
:root[data-dizajn="krstionica"] footer .potpis{font-size:34px}

/* Specks of light that drift up */
.kr-nebo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kr-zrno{position:absolute;bottom:-20px;width:var(--v,6px);height:var(--v,6px);border-radius:50%;background:radial-gradient(circle,#fffaf0 0%,#f3dc9c 45%,rgba(243,220,156,0) 72%);
  animation:kr-zrno var(--t,14s) linear forwards}
.kr-zrno.slavlje{z-index:60}

/* Reveal on scroll: a soft rise */
/* Everything follows the scroll (krstionica.js sets --p from 0 to 1): it slides in from its side with a slight
   tilt and fades in, and goes back out when the guest scrolls up */
:root[data-dizajn="krstionica"] [data-kr]{--s:-1;opacity:calc(.05 + var(--p,1) * .95);
  transform:translateX(calc((1 - var(--p,1)) * var(--s) * 110px)) rotate(calc((1 - var(--p,1)) * var(--s) * 5deg + var(--r0,0deg)))}
:root[data-dizajn="krstionica"] [data-kr="d"]{--s:1}
:root[data-dizajn="krstionica"] .kr-peskir{--r0:-2deg}

@keyframes kr-sjaj{from{background-position:100% 0}to{background-position:0 0}}
@keyframes kr-dise{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes kr-zum{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes kr-lebdi{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes kr-plamen{0%,100%{transform:scaleY(1) rotate(-2deg)}30%{transform:scaleY(1.12) rotate(2deg)}60%{transform:scaleY(.92) rotate(-1deg)}}
@keyframes kr-zrno{0%{transform:translate(0,0);opacity:0}12%{opacity:.9}100%{transform:translate(var(--dx,0),calc(-100vh - 40px));opacity:0}}
@media (prefers-reduced-motion:reduce){:root[data-dizajn="krstionica"] [data-kr]{transform:rotate(var(--r0,0deg));opacity:1}}

/* Teddy bear on balloons, floating gently */
/* In the top corner of the photo */
.kr-foto{position:relative}
.kr-medo{position:absolute;right:3%;top:-4%;width:30%;z-index:2;filter:drop-shadow(0 6px 8px rgba(60,50,40,.18));animation:kr-lebdi 5.5s ease-in-out infinite}
.kr-medo svg{display:block;width:100%;height:auto;overflow:visible}
.kr-medo .kr-konci{opacity:.9}
/* The christening towel: linen, lace, gold thread */
.kr-peskir{width:min(86vw,360px);margin:0 auto;filter:drop-shadow(0 16px 26px rgba(70,60,40,.18))}
.kr-peskir svg{display:block;width:100%;height:auto;overflow:visible;border-radius:4px 4px 0 0}
.kr-p-ime text{font-family:var(--f-script);font-size:66px}
/* The gold thread is sewn when the towel comes into view (the same stitches as the intro towel) */
.kr-peskir .k-krst-svg .k-crta > *{stroke-dashoffset:100;transition:stroke-dashoffset 1.8s ease-in-out .2s}
.kr-peskir .k-krst-svg .k-crta > *{stroke-dashoffset:0}
.kr-peskir .k-krst-svg .k-sjaj{opacity:1}
.kr-peskir .kr-p-tkanina{fill:#fffefa;stroke:#e7dfcf;stroke-width:1}
.kr-p-datum{font-family:var(--f-head);font-size:13px;letter-spacing:.18em;fill:#b8862f}

/* Rosemary sprigs behind the cards, peeking in from the sides */
.kr-ruzmarin{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kr-r{position:absolute;width:var(--v,140px);opacity:.55;transform:rotate(var(--u,0deg))}
.kr-r.l{left:-38px}
.kr-r.d{right:-38px}
.kr-r svg{display:block;width:100%;height:auto}
:root[data-dizajn="krstionica"] :is(.kr-hero,main > section,main > footer,.kr-peskir){position:relative;z-index:1}