/* Styles of the classic design for the Osnovni package (stilovi.js), active with <html data-dizajn="klasicni" data-stil="…">:
   monogram (zlatni / srebrni / bordo), luk (krem / puder / plavi), minimal (crni / pijesak), botanika (krem / zalfija).
   Also here, for every design: the programme icons and the "Ogrebi datum" foil. */

/* ---------- Shared first screen ---------- */
:root[data-stil] .env,:root[data-stil] .hint{display:none}
.s-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:30px 6px 6px}
.s-mali{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:500;max-width:26em;line-height:1.7}
.s-imena{font-family:var(--f-script);font-weight:400;font-size:clamp(46px,13.5vw,68px);line-height:1.12;margin:0;padding:0 8px;text-wrap:balance}
.s-imena .amp{font-size:.55em}
.s-imena.duga{font-size:clamp(36px,10.5vw,54px)}
.s-crta{width:72px;height:1px;background:var(--gold);margin:4px 0 2px}
.s-datum{font-family:var(--f-head);font-size:clamp(16px,4.6vw,20px);font-weight:500;margin:0;font-variant-numeric:lining-nums}
.s-mjesto{font-size:14px;color:var(--muted);margin:0}
:root[data-stil] [data-otkrij="stil"]{transform:translateY(22px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
:root[data-stil] [data-otkrij].vidljiv{opacity:1;transform:none}
@keyframes s-pojavi{from{opacity:0}to{opacity:1}}
@keyframes s-crtaj{to{stroke-dashoffset:0}}

/* ---------- Monogram: a laurel wreath drawn in gold, then a foil shine across the names ---------- */
:root[data-stil="monogram"]{--s-z1:#8a6526;--s-z2:#ecd393;--s-z3:#b48c3c}
:root[data-stil="monogram"][data-boja="srebrni"]{
  --foil:linear-gradient(100deg,#5b5f66 0%,#8b9097 18%,#c3c7cd 32%,#7f848b 46%,#5b5f66 62%,#a6abb2 80%,#666a71 100%);
  --goldbtn:linear-gradient(135deg,#b9bdc3 0%,#8d9198 45%,#6f737a 100%);
  --gold:#8f949b;--acc:#5f646b;--acc-deep:#44484e;--bg:#fafafa;--bg2:#eceef1;--line:#e3e5e8;
  --s-z1:#62666d;--s-z2:#d3d6db;--s-z3:#8d9299}
:root[data-stil="monogram"][data-boja="bordo"]{--acc:#6e1f2b;--acc-deep:#521520;--bg:#fbf6f1;--bg2:#f1e3da;--line:#eadbd2}
.s-mono{width:min(60vw,236px);aspect-ratio:1;margin:0 0 -6px}
.s-mono svg{width:100%;height:100%;overflow:visible}
.s-mono .crtaj{fill:none;stroke:url(#s-zlato);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:s-crtaj 1.1s ease var(--k,0s) forwards}
.s-mono .list{fill:url(#s-zlato);fill-opacity:0;stroke-width:.9;animation:s-crtaj .9s ease var(--k,0s) forwards,s-list .8s ease calc(var(--k,0s) + .55s) forwards}
.s-mono .slova{font-family:var(--f-head);font-size:52px;font-weight:500;fill:url(#s-zlato);opacity:0;animation:s-pojavi 1.4s ease 1.3s forwards}
.s-mono .amp{font-family:var(--f-script);font-size:36px;font-weight:400}
:root[data-boja="bordo"] .s-mono .slova{fill:var(--acc)}
@keyframes s-list{to{fill-opacity:.3}}
:root[data-stil="monogram"] .s-imena{animation:s-sjaj 2.6s ease 2s both}
:root[data-stil="monogram"][data-boja="bordo"] .s-imena{background:none;-webkit-text-fill-color:currentColor;color:var(--acc);animation:none}
@keyframes s-sjaj{from{background-position:100% 0}to{background-position:0 0}}
:root[data-stil="monogram"] main > section{outline:1px solid var(--line);outline-offset:-7px}

/* ---------- Luk: the photo in an arch with a thin line around it, slowly zooming ---------- */
:root[data-stil="luk"][data-boja="puder"]{--bg:#fbf4f1;--bg2:#f2e2dc;--acc:#a0675f;--acc-deep:#7f4d46;--gold:#bf9488;--line:#efdfd9;
  --goldbtn:linear-gradient(135deg,#c99c91 0%,#a0675f 100%)}
:root[data-stil="luk"][data-boja="plavi"]{--bg:#f5f8fb;--bg2:#e2eaf2;--acc:#4f6d8c;--acc-deep:#3b546d;--gold:#8ea6bd;--line:#dde5ee;
  --goldbtn:linear-gradient(135deg,#7894b0 0%,#4f6d8c 100%)}
:root[data-stil="luk"] .foil,:root[data-stil="botanika"] .foil{background:none;-webkit-text-fill-color:currentColor;color:var(--acc)}
.s-luk{position:relative;width:min(70vw,300px);aspect-ratio:3/4;margin:12px 0 14px}
.s-luk::before{content:"";position:absolute;inset:-9px;border:1px solid var(--gold);border-radius:999px 999px 4px 4px}
.s-luk-in{position:absolute;inset:0;overflow:hidden;border-radius:999px 999px 3px 3px;background:var(--bg2)}
.s-luk img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block;animation:s-zum 16s ease-in-out infinite alternate}
.s-luk.cb img{filter:grayscale(1)}
@keyframes s-zum{from{transform:scale(1)}to{transform:scale(1.09)}}
:root[data-stil="luk"] .s-mali{order:1}
:root[data-stil="luk"] .s-crta{order:2}
:root[data-stil="luk"] .s-datum{order:3}
:root[data-stil="luk"] .s-mjesto{order:4}

/* ---------- Minimal: black on white, big outlined names that fill in, lines that draw ---------- */
:root[data-stil="minimal"]{--bg:#ffffff;--bg2:#ffffff;--paper:#ffffff;--ink:#141414;--muted:#6d6d6d;--acc:#141414;--acc-deep:#000000;
  --gold:#141414;--line:#e6e6e6;--goldbtn:#141414}
:root[data-stil="minimal"][data-boja="pijesak"]{--bg:#f4efe7;--bg2:#f4efe7;--paper:#fbf8f3;--ink:#2d2924;--muted:#7b7266;--acc:#2d2924;
  --acc-deep:#1d1a17;--gold:#8c7a62;--line:#e2d9cc;--goldbtn:#2d2924}
:root[data-stil="minimal"] .foil{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
:root[data-stil="minimal"] .s-hero::before{content:"";width:1px;height:46px;background:var(--ink);transform-origin:top;transform:scaleY(0);animation:s-linijaV 1s ease .1s forwards}
:root[data-stil="minimal"] .s-imena{font-family:var(--f-head);font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(40px,12.5vw,66px);line-height:1.04;margin:10px 0 4px;
  -webkit-text-fill-color:currentColor;color:transparent;-webkit-text-stroke:1px var(--ink);animation:s-popuni 1.6s ease .9s forwards}
:root[data-stil="minimal"] .s-imena.duga{font-size:clamp(32px,9.6vw,52px)}
:root[data-stil="minimal"] .s-imena span{display:block}
:root[data-stil="minimal"] .s-imena .amp{font-style:italic;text-transform:none;font-size:.4em;margin:.2em 0;-webkit-text-stroke:0;color:var(--muted);-webkit-text-fill-color:var(--muted)}
:root[data-stil="minimal"] .s-crta{background:var(--ink);width:96px;transform:scaleX(0);animation:s-linija 1.1s ease 1.6s forwards}
:root[data-stil="minimal"] .s-datum,:root[data-stil="minimal"] .s-mali{font-family:var(--f-body);font-size:12.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
:root[data-stil="minimal"] .s-datum{color:var(--ink)}
:root[data-stil="minimal"] main > section{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:40px 6px 34px}
:root[data-stil="minimal"] h2{font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:19px}
:root[data-stil="minimal"] h2 small{color:var(--muted);font-weight:500}
:root[data-stil="minimal"] .thanks .big{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.06em;font-size:34px}
:root[data-stil="minimal"] footer .potpis{font-family:var(--f-head);font-size:20px;text-transform:uppercase;letter-spacing:.12em}
@keyframes s-popuni{to{color:var(--ink)}}
@keyframes s-linija{to{transform:scaleX(1)}}
@keyframes s-linijaV{to{transform:scaleY(1)}}

/* ---------- Botanika: an olive branch grows down the left edge as the guest scrolls ---------- */
:root[data-stil="botanika"]{--acc:#4d6a4f;--acc-deep:#3a523c;--gold:#7f936a;--line:#e3e6da;
  --goldbtn:linear-gradient(135deg,#6f8a68 0%,#4d6a4f 100%);--s-stablo:#6d8063;--s-list:#b3c2a1;--s-list-ivica:#62775a}
:root[data-stil="botanika"][data-boja="zalfija"]{--bg:#eff2ea;--bg2:#e2e8db;--paper:#fbfcf8;--line:#dbe1d2}
:root[data-stil="botanika"] .wrap{position:relative;padding-left:max(48px,env(safe-area-inset-left,0px))}
.s-grana{position:absolute;left:6px;top:0;width:40px;pointer-events:none;overflow:visible;z-index:0}
.s-stablo{fill:none;stroke:var(--s-stablo);stroke-width:1.5;stroke-linecap:round;transition:stroke-dashoffset .6s ease-out}
.s-list,.s-zila{transform:scale(0);transform-box:fill-box;transform-origin:0 50%;transition:transform 1s cubic-bezier(.3,1.5,.5,1)}
.s-list{fill:var(--s-list);stroke:var(--s-list-ivica);stroke-width:.8}
.s-zila{fill:none;stroke:var(--s-list-ivica);stroke-width:.6;stroke-linecap:round}
.vidi .s-list,.vidi .s-zila{transform:scale(1)}
.s-njihaj{transform-box:fill-box;transform-origin:0 50%;animation:s-njihaj 5s ease-in-out var(--k,0s) infinite alternate}
@keyframes s-njihaj{from{transform:rotate(-6deg)}to{transform:rotate(7deg)}}
:root[data-stil="botanika"] .s-crta{width:56px;height:8px;background:none;border-bottom:1px solid var(--gold);border-radius:0 0 50% 50%}

/* ---------- Programme icons (every design except Peškir and Baloni, which draw their own) ---------- */
.prog.ikone li{grid-template-columns:24px 56px 1fr;gap:12px}
/* "Vidi na karti" sits under the description, not in the narrow time column */
.prog li > .p-karta{grid-column:2/-1;justify-self:start}
.prog.ikone li > .p-karta{grid-column:3/-1;margin-top:-8px}
.pr-ikona{display:inline-flex;width:24px;height:24px;margin-top:2px;color:var(--gold)}
.pr-ikona svg{width:100%;height:100%;overflow:visible}
.pr-ikona svg *{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease .3s}
[data-otkrij]:not(.vidljiv) .pr-ikona svg *{stroke-dashoffset:1}
:root[data-dizajn="pecat"] .pr-ikona{width:28px;height:28px;margin:0;color:var(--p-acc)}

/* ---------- "Ogrebi datum": gold foil over the date, scratched off with a finger ---------- */
.ogrebi-meta{position:relative;width:fit-content;margin-inline:auto}
canvas.ogrebi{position:absolute;left:-14px;top:-9px;width:calc(100% + 28px);height:calc(100% + 18px);border-radius:8px;touch-action:none;cursor:grab;z-index:3;
  box-shadow:0 2px 10px rgba(120,88,36,.28);animation:og-mami 2.6s ease-in-out infinite;transition:opacity .8s ease}
canvas.ogrebi.nestaje{opacity:0;pointer-events:none}
canvas.ogrebi:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@keyframes og-mami{50%{box-shadow:0 2px 16px 2px rgba(214,170,80,.5)}}
/* Until the date is scratched off, nothing else gives it away */
:root.ogrebi-ceka :is(#p-k-datum,#p-dan,#b-u-datum,#program-dan){visibility:hidden}
:root.ogrebi-ceka #odbrojavanje{display:none}
.og-konfet{position:fixed;left:0;top:0;width:7px;height:11px;border-radius:2px;background:var(--c);pointer-events:none;z-index:60;animation:og-konfet var(--t,.9s) cubic-bezier(.12,.6,.35,1) forwards}
.og-konfet.krug{width:7px;height:7px;border-radius:50%}
@keyframes og-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){
  :root[data-stil] [data-otkrij="stil"]{transform:none;opacity:1}
  .s-mono .crtaj{stroke-dashoffset:0}.s-mono .list{fill-opacity:.3}.s-mono .slova{opacity:1}
  :root[data-stil="minimal"] .s-imena{color:var(--ink)}
  :root[data-stil="minimal"] .s-crta,:root[data-stil="minimal"] .s-hero::before{transform:none}
  .s-list,.s-zila{transform:scale(1)}
}