/* Intro "Dodirnite vodu" (voda.js): a baptismal font full screen, its water rippled with WebGL */
.vo-uvod{position:fixed;inset:0;z-index:55;overflow:hidden;cursor:pointer;background:#2b2620 center/cover no-repeat;-webkit-tap-highlight-color:transparent;
  --vo-svjetlo:var(--bg,#fbf8f2)}
.vo-uvod:focus-visible{outline:3px solid #d8ad52;outline-offset:-6px}
.vo-platno{position:absolute;inset:0;width:100%;height:100%;display:block}
.vo-uvod.bez-gl .vo-platno{display:none}
/* Soft dark at the top and bottom so the white letters read on any photo */
.vo-tama{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,14,6,.55) 0%,rgba(20,14,6,0) 30%,rgba(20,14,6,0) 68%,rgba(20,14,6,.5) 100%)}
.vo-vrh{position:absolute;left:0;right:0;top:calc(9% + env(safe-area-inset-top,0px));text-align:center;color:#fff;padding:0 24px;pointer-events:none;
  text-shadow:0 2px 14px rgba(0,0,0,.45);transition:opacity .5s}
.vo-mali{margin:0;font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.92;text-wrap:balance}
.vo-ime{margin:4px 0 0;font-family:var(--f-script);font-size:clamp(54px,16vw,78px);line-height:1.2;
  background:linear-gradient(100deg,#f3dc9c 0%,#fff6dc 35%,#e7c777 60%,#fff2c8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.4))}
/* A ring that breathes on the water, and the words under it */
.vo-meta{position:absolute;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;border:1.5px solid rgba(255,250,235,.85);pointer-events:none;
  box-shadow:0 0 18px rgba(255,236,190,.5),inset 0 0 14px rgba(255,236,190,.35);animation:vo-dise 2.4s ease-in-out infinite}
.vo-meta::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(255,250,235,.7);animation:vo-val 2.4s ease-out infinite}
.vo-hint{position:absolute;left:0;right:0;bottom:calc(10% + env(safe-area-inset-bottom,0px));margin:0;text-align:center;pointer-events:none;
  font-family:var(--f-body);font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55);
  animation:vo-trepni 2.4s ease-in-out infinite}
.vo-uvod.krenulo .vo-meta,.vo-uvod.krenulo .vo-hint{opacity:0;transition:opacity .4s;animation:none}
/* Rings drawn with CSS when there is no WebGL */
.vo-krug{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid rgba(255,255,255,.75);pointer-events:none;animation:vo-krug 1.8s ease-out forwards}
/* The light that fills the screen and turns into the invitation */
.vo-svjetlo{position:absolute;inset:-60vmax;opacity:0;pointer-events:none;transform-origin:calc(var(--x,50%) + 60vmax) calc(var(--y,50%) + 60vmax);
  background:radial-gradient(circle at calc(var(--x,50%) + 60vmax) calc(var(--y,50%) + 60vmax),#fffef8 0%,#fff8e6 12%,var(--vo-svjetlo) 38%)}
@keyframes vo-dise{0%,100%{transform:scale(.92)}50%{transform:scale(1.06)}}
@keyframes vo-val{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
@keyframes vo-trepni{50%{opacity:.45}}
@keyframes vo-krug{to{transform:scale(14);opacity:0;border-width:.5px}}
@media (prefers-reduced-motion:reduce){.vo-meta,.vo-meta::after,.vo-hint{animation:none}}