/* Design "Baloni" (see baloni.js): a children's sky for christenings and birthdays. Pastel sky with drifting
   clouds, the intro card flies away on a bunch of balloons, the name is spelled in gold foil letter balloons,
   white rounded cards, balloons float through the page and pop on a tap.
   Active when <html data-dizajn="baloni">; colour comes from data-boja (plava / roza). */
/* The intro and the balloon flight carry the colours too, so they also work in front of another design (v.uvodTip) */
:root[data-dizajn="baloni"],.b-uvod,.b-salva{
  --b-nebo1:#cde6f8; --b-nebo2:#f2f8fd; --b-acc:#3d86c6; --b-acc2:#245c92; --b-tekst:#253447; --b-sivo:#5d6f84;
  --b-sjena:rgba(61,134,198,.17); --b-tint:#e6f2fc;
  /* Balloon colours, also read by baloni.js */
  --b-c1:#8ccaf2; --b-c2:#ffffff; --b-c3:#e8c25e; --b-c4:#5fa8e3; --b-c5:#cfe8fb;
  --b-zlato:linear-gradient(180deg,#fff4cc 0%,#f3d47f 22%,#dcab40 48%,#b9852a 62%,#f2d993 82%,#c99a3b 100%);
  --acc:var(--b-acc); --acc-deep:var(--b-acc2); --ink:var(--b-tekst); --muted:var(--b-sivo); --line:#d9eaf7; --on-acc:#fff;
  --bg:#f6fbff; --bg2:var(--b-nebo2); --paper:#fff; --gold:#c9982f;
  --f-head:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-script:"Pacifico","Snell Roundhand",cursive;
}
:root[data-dizajn="baloni"][data-boja="roza"],:root[data-dizajn="baloni"][data-boja="roza"] :is(.b-uvod,.b-salva){
  --b-nebo1:#fadbe7; --b-nebo2:#fff6f9; --b-acc:#d0628e; --b-acc2:#a3436b; --b-tekst:#46303a; --b-sivo:#84677a;
  --b-sjena:rgba(208,98,142,.17); --b-tint:#fdedf3; --line:#f5dde7; --bg:#fffafc;
  --b-c1:#f5a3c0; --b-c4:#ec7fa7; --b-c5:#fbd2e0;
}

:root[data-dizajn="baloni"] body{background:var(--b-nebo2);color:var(--b-tekst);font-family:var(--f-body)}
/* The cloud under the photo is wider than a phone screen; it is cut at the screen edge instead of scrolling sideways */
:root[data-dizajn="baloni"] .wrap{position:relative;z-index:1;gap:30px;padding-bottom:64px;overflow-x:hidden;overflow-x:clip}
:root[data-dizajn="baloni"] .env,:root[data-dizajn="baloni"] .hint,
:root[data-dizajn="baloni"] .p-kraj,:root[data-dizajn="baloni"] .p-mali-pecat{display:none}
:root[data-dizajn="baloni"] .vrh{position:relative;z-index:2}
:root[data-dizajn="baloni"] .oznaka,:root[data-dizajn="baloni"] .jezik{border:0;box-shadow:0 4px 12px var(--b-sjena);font-weight:700}
:root[data-dizajn="baloni"] .jezik button{font-weight:800}
/* Great Vibes' capital А fix is for the elegant designs only; Pacifico draws it well */
:root[data-dizajn="baloni"] .veliko-a{font-family:inherit}
:root[data-dizajn="baloni"] .foil{background:none;-webkit-text-fill-color:currentColor;color:var(--b-acc2)}

/* ---------- Sky with drifting clouds ---------- */
.b-oblaci{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,var(--b-nebo1) 0%,var(--b-nebo2) 78%)}
.b-oblaci i{position:absolute;left:0;width:var(--w,170px);aspect-ratio:2;background:url(/dizajn/oblak.svg) center/contain no-repeat;opacity:var(--o,.9);animation:b-plovi var(--t,100s) linear infinite;animation-delay:var(--k,0s);will-change:transform}
.b-oblaci i:nth-child(1){top:5%;--w:170px;--t:95s;--k:-22s}
.b-oblaci i:nth-child(2){top:23%;--w:110px;--t:125s;--k:-80s;--o:.75}
.b-oblaci i:nth-child(3){top:50%;--w:220px;--t:150s;--k:-45s;--o:.85}
.b-oblaci i:nth-child(4){top:76%;--w:140px;--t:115s;--k:-95s;--o:.7}
.b-oblaci i:nth-child(5){top:36%;--w:84px;--t:85s;--k:-12s;--o:.6}
@keyframes b-plovi{from{transform:translateX(-260px)}to{transform:translateX(calc(100vw + 40px))}}

/* ---------- Intro: pop every balloon, then a flight of balloons rises into the invitation ---------- */
.b-uvod{position:fixed;inset:0;z-index:50;overflow:hidden;background:linear-gradient(180deg,var(--b-nebo1),var(--b-nebo2));transition:opacity .9s ease;-webkit-tap-highlight-color:transparent;font-family:var(--f-body)}
.b-uvod .b-oblaci{position:absolute;background:none}
.b-u-sadrzaj{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:calc(20px + env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px))}
.b-u-karta{position:relative;width:min(78vw,300px);background:#fff;border-radius:26px;padding:20px 16px 18px;text-align:center;box-shadow:0 18px 40px var(--b-sjena);display:flex;flex-direction:column;gap:2px;align-items:center;transform-origin:50% 0;animation:b-klati 4.2s ease-in-out infinite}
.b-u-mali{font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--b-sivo);text-wrap:balance}
.b-u-ime{font-family:var(--f-script);font-size:clamp(36px,11vw,50px);line-height:1.35;color:var(--b-acc2);padding:0 6px 6px}
.b-u-datum{font-weight:900;letter-spacing:.16em;color:var(--b-acc);font-size:14px}
.b-u-baloni{display:flex;justify-content:center;align-items:flex-end;gap:2px;width:100%;max-width:380px}
.b-u-balon{flex:1;max-width:90px;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  animation:b-plutaj var(--t,3.6s) ease-in-out var(--k,0s) infinite}
.b-u-balon:nth-child(even){margin-bottom:38px}
.b-u-balon svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 22%;animation:b-njisi var(--t,3.6s) ease-in-out var(--k,0s) infinite}
.b-u-balon:focus-visible{outline:3px solid var(--b-acc);outline-offset:2px;border-radius:40px}
.b-u-balon.puko{pointer-events:none}
.b-u-balon.puko svg{animation:b-puk .18s ease-out forwards}
.b-u-hint{margin:0;text-align:center;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--b-acc2);text-wrap:balance;max-width:20em;animation:b-puls 2.4s ease-in-out infinite}
.b-u-tacke{display:flex;gap:9px}
.b-u-tacke i{width:10px;height:10px;border-radius:50%;border:2px solid var(--b-acc);transition:background .2s,transform .2s}
.b-u-tacke i.puklo{background:var(--b-acc);transform:scale(1.15)}
.b-uvod.gotovo{opacity:0;pointer-events:none}
/* The flight over the whole screen, above the intro and the invitation alike */
.b-salva{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.b-salva .b-let{animation-timing-function:cubic-bezier(.3,0,.6,1)}
.b-salva .b-let .tijelo{pointer-events:none}

/* ---------- Top of the page: name in foil letter balloons, photo in an arch ---------- */
.b-hero{position:relative;z-index:1;text-align:center;padding:4px 0 0;display:flex;flex-direction:column;align-items:center}
.b-slova{display:flex;justify-content:center;flex-wrap:wrap;margin:4px 0 0;padding:0 4px 38px;font-family:var(--f-head);font-weight:900;line-height:1.05;
  font-size:min(88px,calc((min(100vw,560px) - 40px) / var(--n,8) / .8))}
.b-slovo{position:relative;display:inline-block;animation:b-slovo 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.41s);transform-origin:50% 100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.b-slovo b{display:block;font-weight:900;padding:0 .015em;background:var(--b-zlato);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#d9a93f;filter:drop-shadow(0 2px 0 #a8771f) drop-shadow(0 10px 12px rgba(36,92,146,.2))}
.b-slovo::after{content:"";position:absolute;left:50%;top:92%;width:1.5px;height:32px;margin-left:-.75px;background:linear-gradient(#b8842a,rgba(184,132,42,0))}
.b-slovo.razmak{width:.32em}
.b-slovo.razmak::after{display:none}
.b-slovo.skok b{animation:b-skok .7s cubic-bezier(.3,1.6,.5,1)}

.b-foto{position:relative;width:min(80vw,400px);aspect-ratio:3/4;padding:9px;background:#fff;border-radius:999px 999px 34px 34px;box-shadow:0 22px 44px var(--b-sjena)}
.b-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:999px 999px 26px 26px;display:block;background:var(--b-tint)}
.b-foto.siroka{aspect-ratio:4/3;border-radius:34px}
.b-foto.siroka img{border-radius:26px}
.b-foto.cb img{filter:grayscale(1) contrast(1.04)}
.b-foto::after{content:"";position:absolute;left:-16%;right:-16%;bottom:-44px;height:98px;background:url(/dizajn/oblak.svg) center bottom/100% 100% no-repeat;filter:drop-shadow(0 8px 10px rgba(36,92,146,.1));pointer-events:none}
/* A few balloons tied in the cloud at the bottom right corner of the photo */
.b-foto-baloni{position:absolute;width:84px;right:-14px;bottom:20px;transform-origin:50% 100%;animation:b-ljulja 4.6s ease-in-out infinite reverse}
.b-poziv{margin:58px 0 0;font-family:var(--f-head);font-weight:900;font-size:clamp(22px,6.4vw,28px);line-height:1.25;color:var(--b-acc2);padding:0 12px;text-wrap:balance}
.b-datum{margin:14px 0 0;display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:99px;padding:10px 20px;font-weight:800;font-size:16px;color:var(--b-tekst);box-shadow:0 8px 20px var(--b-sjena)}
.b-datum::before{content:"";width:14px;height:19px;flex:none;background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.75) 0 12%,transparent 34%),var(--b-c4);-webkit-mask:url(/dizajn/balon.svg) center/contain no-repeat;mask:url(/dizajn/balon.svg) center/contain no-repeat}
.b-krst{display:block;width:26px;height:42px;margin:18px auto 0;color:var(--gold)}

/* ---------- Cards ---------- */
:root[data-dizajn="baloni"] main > section{background:#fff;border:0;border-radius:28px;padding:32px 22px 28px;box-shadow:0 12px 30px var(--b-sjena);position:relative;text-align:center}
/* A small balloon stuck to the corner of each card */
:root[data-dizajn="baloni"] main > section:not(.muz)::before{content:"";position:absolute;top:-24px;right:20px;width:30px;height:40px;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.75) 0 12%,transparent 34%),var(--b-c4);
  -webkit-mask:url(/dizajn/balon.svg) center/contain no-repeat;mask:url(/dizajn/balon.svg) center/contain no-repeat;
  transform-origin:50% 100%;animation:b-naljepnica 3.6s ease-in-out infinite}
/* Gold on the left for every other visible card (the hidden Pečat section also counts as a section) */
:root[data-dizajn="baloni"] main > section:has(> #program)::before,:root[data-dizajn="baloni"] #rsvp::before{right:auto;left:20px;background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.8) 0 12%,transparent 34%),var(--b-c3);animation-delay:-1.4s}
:root[data-dizajn="baloni"] h2{font-family:var(--f-head);font-weight:900;font-size:28px;color:var(--b-acc2);margin:0 0 16px;letter-spacing:-.005em}
:root[data-dizajn="baloni"] h2 small{font-family:var(--f-script);font-weight:400;font-size:19px;letter-spacing:0;text-transform:none;color:var(--gold);margin-bottom:4px}
:root[data-dizajn="baloni"] #s-uvod h2 small{font-size:30px;color:var(--b-acc2);line-height:1.4}
:root[data-dizajn="baloni"] #s-uvod h2 > span{display:none}
:root[data-dizajn="baloni"] .intro{font-family:var(--f-body);font-style:normal;font-weight:600;font-size:18px;line-height:1.65;color:var(--b-tekst)}

/* Countdown in balloon-coloured circles */
:root[data-dizajn="baloni"] .count-l{font-family:var(--f-head);color:var(--b-acc);letter-spacing:.16em;margin-top:24px}
:root[data-dizajn="baloni"] .count{gap:6px}
:root[data-dizajn="baloni"] .count > div{font-family:var(--f-head);font-size:inherit;color:inherit}
:root[data-dizajn="baloni"] .count > div b{display:grid;place-items:center;width:min(16vw,64px);aspect-ratio:1;margin:0 auto 6px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7) 0 10%,transparent 34%),var(--c,var(--b-c4));color:#fff;font-size:min(6vw,24px);font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.25);box-shadow:inset -5px -7px 10px rgba(0,0,0,.08)}
:root[data-dizajn="baloni"] .count > div:nth-child(2){--c:var(--b-c3)}
:root[data-dizajn="baloni"] .count > div:nth-child(3){--c:var(--b-acc)}
:root[data-dizajn="baloni"] .count > div:nth-child(4){--c:var(--b-c1)}
:root[data-dizajn="baloni"] .count span{font-weight:800}

/* Programme: round icons on a dashed balloon string */
:root[data-dizajn="baloni"] .prog{position:relative;text-align:left}
:root[data-dizajn="baloni"] .prog::before{content:"";position:absolute;left:23px;top:34px;bottom:34px;border-left:2px dashed var(--line)}
:root[data-dizajn="baloni"] .prog li{position:relative;grid-template-columns:48px 1fr;grid-template-areas:"ik vr" "ik op" "ik ka";column-gap:16px;row-gap:2px;align-items:center;border:0;padding:12px 0}
:root[data-dizajn="baloni"] .prog time{grid-area:vr;font-family:var(--f-head);font-weight:900;color:var(--b-acc);font-size:17px}
:root[data-dizajn="baloni"] .prog time:empty{display:none}
:root[data-dizajn="baloni"] .prog li > div{grid-area:op}
:root[data-dizajn="baloni"] .prog b{font-weight:800;font-size:17.5px}
:root[data-dizajn="baloni"] .prog p{font-size:15px;color:var(--b-sivo)}
.b-ikona{grid-area:ik;align-self:start;width:48px;height:48px;border-radius:50%;background:var(--b-tint);color:var(--b-acc);display:grid;place-items:center;box-shadow:0 0 0 5px #fff;position:relative}
.b-ikona svg{width:24px;height:24px}
:root[data-dizajn="baloni"] .p-karta{grid-area:ka;justify-self:start;display:inline-flex;align-items:center;margin-top:8px;padding:7px 14px;border:0;border-radius:99px;background:var(--b-tint);color:var(--b-acc2);font-family:var(--f-head);font-weight:800;font-size:13.5px;letter-spacing:0;text-transform:none;text-decoration:none}
:root[data-dizajn="baloni"] .loc .btn-o,:root[data-dizajn="baloni"] .btn-o{border:2px solid var(--b-acc);font-weight:800}

/* Gallery: photos taped in, a little crooked */
:root[data-dizajn="baloni"] .gal{display:flex;flex-direction:column;gap:26px;padding:10px 4px 4px}
.b-slika{position:relative;background:#fff;padding:8px;border-radius:22px;box-shadow:0 10px 24px var(--b-sjena);transform:rotate(-1.8deg)}
.b-slika:nth-child(even){transform:rotate(1.8deg)}
.b-slika::before{content:"";position:absolute;top:-11px;left:50%;width:86px;height:24px;margin-left:-43px;background:rgba(232,194,94,.6);border-radius:3px;transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
:root[data-dizajn="baloni"] .b-slika img{width:100%;height:auto;aspect-ratio:auto;border-radius:15px;display:block}

/* RSVP: soft rounded fields, pill choices, a big gold button */
:root[data-dizajn="baloni"] #rsvp input[type=text],:root[data-dizajn="baloni"] #rsvp select,:root[data-dizajn="baloni"] #rsvp textarea{border:2px solid var(--line);border-radius:16px;background:var(--bg);padding:11px 14px}
:root[data-dizajn="baloni"] #rsvp input:focus-visible,:root[data-dizajn="baloni"] #rsvp select:focus-visible,:root[data-dizajn="baloni"] #rsvp textarea:focus-visible{outline:0;border-color:var(--b-acc);box-shadow:0 0 0 4px var(--b-tint)}
:root[data-dizajn="baloni"] #rsvp label,:root[data-dizajn="baloni"] #rsvp .lbl{font-weight:800;font-size:14px;color:var(--b-tekst);text-align:left}
:root[data-dizajn="baloni"] .choice label{border:2px solid var(--line);border-radius:99px;font-weight:800;background:#fff}
:root[data-dizajn="baloni"] .choice input:checked + label{background:var(--b-acc);border-color:var(--b-acc);color:#fff;box-shadow:0 6px 14px var(--b-sjena)}
:root[data-dizajn="baloni"] .submit{border-radius:99px;font-family:var(--f-head);font-weight:900;letter-spacing:.08em;font-size:16px;padding:16px;background:var(--goldbtn);box-shadow:0 10px 22px rgba(201,152,47,.32)}
:root[data-dizajn="baloni"] .step button{border:2px solid var(--line);background:#fff;color:var(--b-acc);font-weight:800}
:root[data-dizajn="baloni"] .step output{font-family:var(--f-head);font-weight:900}
:root[data-dizajn="baloni"] .meni-red{border-bottom:2px dotted var(--line)}
:root[data-dizajn="baloni"] .pchip{border:0;border-radius:99px;background:var(--b-tint);color:var(--b-acc2);font-weight:800}
:root[data-dizajn="baloni"] .deadline{font-weight:700;color:var(--b-sivo)}
:root[data-dizajn="baloni"] .thanks .big{font-family:var(--f-script);font-size:44px;line-height:1.4;color:var(--b-acc2)}
:root[data-dizajn="baloni"] .muz{border-radius:99px;padding:12px 22px 12px 12px}

/* Closing */
:root[data-dizajn="baloni"] footer{padding:30px 16px 8px;gap:12px;position:relative;z-index:1}
.b-mali-grozd{width:96px;margin-bottom:-6px;transform-origin:50% 100%;animation:b-ljulja 4.4s ease-in-out infinite}
.b-kraj{font-family:var(--f-script);font-size:clamp(30px,9vw,40px);line-height:1.35;color:var(--b-acc2);margin:0;padding:0 8px;text-wrap:balance}
:root[data-dizajn="baloni"] footer .potpis{font-family:var(--f-script);font-size:27px;line-height:1.45;color:var(--b-tekst)}

/* ---------- Balloons floating through the page ---------- */
.b-nebo{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.b-let{position:absolute;bottom:-170px;width:var(--v,56px);pointer-events:none;animation:b-penji var(--t,16s) linear forwards;will-change:transform}
.b-let svg{display:block;width:100%;height:auto;overflow:visible;animation:b-njisi 3.4s ease-in-out infinite;animation-delay:var(--k,0s)}
/* Only the balloon itself takes a tap, never its string, so buttons under it stay usable */
.b-let .tijelo{pointer-events:auto;cursor:pointer}
.b-let.puko{animation-play-state:paused}
.b-let.puko svg{animation:b-puk .18s ease-out forwards}
.b-uvod .b-let{animation-duration:var(--t,4s);animation-timing-function:cubic-bezier(.45,0,.7,.4)}
.b-konfet{position:fixed;left:0;top:0;width:8px;height:12px;border-radius:2px;background:var(--c);pointer-events:none;z-index:60;animation:b-konfet var(--t,.9s) cubic-bezier(.12,.6,.35,1) forwards}
.b-konfet.krug{width:9px;height:9px;border-radius:50%}

/* Reveal on scroll with a small bounce */
:root[data-dizajn="baloni"] [data-otkrij="skok"]{transform:translateY(34px) scale(.97);transition:opacity .7s ease,transform .95s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--kasni,0s)}
:root[data-dizajn="baloni"] [data-otkrij].vidljiv{opacity:1;transform:none}

@keyframes b-slovo{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes b-skok{30%{transform:translateY(-24px) scale(1.14)}60%{transform:translateY(2px) scale(.97)}}
@keyframes b-plutaj{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes b-ljulja{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes b-klati{0%,100%{transform:rotate(1.5deg)}50%{transform:rotate(-1.5deg)}}
@keyframes b-dise{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes b-naljepnica{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-4px)}}
@keyframes b-puls{50%{opacity:.4}}
@keyframes b-penji{to{transform:translateY(calc(-100vh - 280px))}}
@keyframes b-njisi{0%,100%{transform:translateX(-12px) rotate(-5deg)}50%{transform:translateX(12px) rotate(5deg)}}
@keyframes b-puk{40%{transform:scale(1.25)}100%{transform:scale(1.5);opacity:0}}
@keyframes b-konfet{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}}

@media (prefers-reduced-motion:reduce){
  .b-slovo,.b-oblaci i,.b-u-balon,.b-u-balon svg,.b-u-karta,.b-foto-baloni,.b-mali-grozd,.b-u-hint,.b-g-balon,
  :root[data-dizajn="baloni"] main > section::before{animation:none}
  :root[data-dizajn="baloni"] [data-otkrij="skok"]{transform:none;opacity:1}
}