/* =====================================================================
   Iva & Luka · „Naša priča vezana vrpcom” · ogledna pozivnica za vjenčanje
   Boje, sjene i fontovi su u :root – za novi par mijenjaj ovdje.
   Tekst, datum, lokacije i glazba mijenjaju se u skripta.js (POSTAVKE).
   ===================================================================== */
:root {
  --ivory: #F4EFE6;
  --sand: #C5B69E;
  --taupe: #8D7D65;
  --chocolate: #59452F;
  --terracotta: #91451F;
  --champagne: #B79A65;
  --paper-shadow: 0 24px 64px rgba(59, 42, 25, 0.18);
  --emboss-light: rgba(255, 255, 255, 0.78);
  --emboss-shadow: rgba(89, 69, 47, 0.18);

  --papir: url(slike/papir.webp);
  --papir-cipka: url(slike/papir-cipka.webp);   /* papir s utisnutim čipkastim dezenom */
  --papir-pijesak: url(slike/papir-pijesak.webp);
  --travertin: url(slike/travertin.webp);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --rukopis: "Pinyon Script", "Snell Roundhand", cursive;   /* romantični rukopis – samo imena, monogram i potpisi */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --stupac: min(92vw, 560px);
  --list-sjena: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 rgba(89,69,47,.06) inset,
                0 2px 3px rgba(59,42,25,.08), 0 18px 40px -18px rgba(59,42,25,.35);
}

@property --vx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --vy { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --vr { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100svh; overflow-x: hidden;
  font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--chocolate);
  background:
    radial-gradient(110% 70% at 18% 0%, rgba(255,250,240,.65), rgba(255,250,240,0) 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(141,125,101,.18), rgba(141,125,101,0) 60%),
    #E7DDCD var(--travertin) center / 1100px;
}
.js body[data-stanje="zatvoreno"], .js body[data-stanje="otvaranje"] { overflow: hidden; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.svg-defs { position: absolute; }
[hidden] { display: none !important; }

.preskoci-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 8px; background: var(--chocolate); color: #fff; }
.preskoci-link:focus { top: 12px; }

/* --------------------------- gumbi gore --------------------------- */
.gumb-glazba, .gumb-preskoci {
  position: fixed; z-index: 40; top: max(14px, env(safe-area-inset-top));
  background: rgba(244,239,230,.78); border: 1px solid rgba(183,154,101,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(59,42,25,.35);
}
.gumb-glazba { left: 16px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--taupe); }
.gumb-glazba svg { width: 19px; height: 19px; }
.gumb-glazba[aria-pressed="false"]::after { content: ""; position: absolute; width: 24px; height: 1.5px; background: currentColor; transform: rotate(-45deg); }
.gumb-glazba[aria-pressed="true"] { color: var(--terracotta); }
.gumb-preskoci { right: 16px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .04em; transition: opacity .4s; }
body:not(.js-zatvoreno-ok) .gumb-preskoci { display: none; }
.js body[data-stanje="zatvoreno"] .gumb-preskoci, .js body[data-stanje="otvaranje"] .gumb-preskoci { display: block; }

/* =========================== PRIZOR =========================== */
.scena { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 74px 0 56px; overflow: hidden; }
.mapa {
  --w: min(80vw, 440px, calc((100svh - 160px) * 0.7));
  position: relative; width: var(--w); aspect-ratio: 5 / 7.1;
  perspective: calc(var(--w) * 3.2); perspective-origin: 50% 45%;
}

/* unutrašnjost (stražnja ploča) */
.mapa-unutra { position: absolute; inset: 0; filter: drop-shadow(0 1.5px 0 rgba(141,125,101,.6)) drop-shadow(0 24px 30px rgba(59,42,25,.2)); }
.unutra-papir { position: absolute; inset: 0; clip-path: url(#oblik-cijeli);
  background: linear-gradient(160deg, rgba(255,255,255,.25), rgba(255,255,255,0) 40%, rgba(89,69,47,.08)), #D9CCB6 var(--papir-pijesak) 0 0 / 260px; }
.unutra-lukovi { position: absolute; left: 6%; right: 6%; bottom: 0; width: 88%; height: 92%; color: #D1C3AB; }

/* glavna kartica */
.kartica-glavna {
  position: absolute; z-index: 2; left: 8%; right: 8%; top: 5%; bottom: 6%;
  container-type: inline-size; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18% 8% 16%;
  border-radius: 46% 46% 6px 6px / 22% 22% 6px 6px;
  background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%, rgba(89,69,47,.05)), var(--ivory) var(--papir) 0 0 / 240px;
  box-shadow: var(--list-sjena), 0 0 0 1px rgba(183,154,101,.25);
}
.kartica-reljef { position: absolute; left: 10%; bottom: 4%; width: 80%; height: 70%; color: #EDE6DA; opacity: .9; }
.kartica-glavna > *:not(svg) { position: relative; }
.kartica-luk { position: absolute; left: 4%; right: 4%; top: 2.6%; width: 92%; height: 28%; overflow: visible; }
.kartica-nad { margin: 0; font-size: max(11px, 3.3cqw); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); line-height: 1.5; max-width: 22ch; }
.imena { margin: .25em 0 0; font-family: var(--serif); font-weight: 500; line-height: .92; color: var(--chocolate); display: grid; justify-items: center;
  text-shadow: 0 1.2px 0 rgba(255,255,255,.95), 0 -1px 0 rgba(89,69,47,.18), 0 2px 3px rgba(89,69,47,.12); }
.imena .ime { font-family: var(--rukopis); font-weight: 400; font-size: max(60px, 28cqw); line-height: 1.02; letter-spacing: 0; padding: 0 .12em; }
.imena .i { font-size: max(28px, 10cqw); font-style: italic; color: var(--terracotta); line-height: 1; margin: -.12em 0 -.05em; }
.grana-mala { width: 34cqw; margin: 4cqw 0 2cqw; color: #EDE6DA; }
.kartica-datum { margin: 0; display: grid; }
.kartica-datum span { font-size: max(12px, 3.3cqw); letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); font-weight: 600; }
.kartica-datum strong { font-family: var(--serif); font-size: max(24px, 8.4cqw); font-weight: 600; color: var(--terracotta); line-height: 1.2; }
.kartica-mjesto { margin: .3em 0 0; font-size: max(12px, 3.2cqw); letter-spacing: .4em; text-transform: uppercase; color: var(--champagne); font-weight: 600; }

/* džep */
.dzep { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 17%; color: #CFC0A6; filter: drop-shadow(0 -2px 2px rgba(89,69,47,.18)) drop-shadow(0 -1px 0 rgba(255,255,255,.5)); }
.dzep svg { width: 100%; height: 100%; display: block; clip-path: url(#oblik-dno); }

/* vrata */
.vrata { position: absolute; z-index: 5; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; }
.vrata-l { left: 0; transform-origin: 0 50%; }
.vrata-d { right: 0; transform-origin: 100% 50%; }
.lice, .nalicje { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lice-papir, .nalicje-papir { position: absolute; inset: 0; overflow: hidden; }

.lice-papir { background: linear-gradient(155deg, rgba(255,255,255,.4), rgba(255,255,255,0) 50%, rgba(89,69,47,.06)), var(--ivory) var(--papir-cipka) 0 0 / 320px; }
.vrata-l .lice-papir { clip-path: url(#oblik-lijevi); }
.vrata-d .lice-papir { clip-path: url(#oblik-desni); background-position: 0 0, calc(var(--w) / -2) 0; }  /* dezen se nastavlja preko spoja */
/* sjene su na licima (filter na .vrata bi poništio 3D i naličje) */
.lice { filter: drop-shadow(0 -.5px 0 rgba(255,255,255,.9)) drop-shadow(0 1.5px 0 rgba(141,125,101,.6)) drop-shadow(0 18px 22px rgba(59,42,25,.2)); }
.vrata-d .lice { filter: drop-shadow(-1px 0 .5px rgba(89,69,47,.22)) drop-shadow(0 1.5px 0 rgba(141,125,101,.6)) drop-shadow(0 18px 22px rgba(59,42,25,.2)); }
.nalicje { filter: drop-shadow(0 1px 0 rgba(141,125,101,.5)) drop-shadow(0 10px 16px rgba(59,42,25,.2)); }
.lice-crtez { position: absolute; top: 0; bottom: 0; width: 200%; container-type: inline-size; }
.vrata-l .lice-crtez { left: 0; }
.vrata-d .lice-crtez { left: -100%; }
.lice-okvir { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lice-grana { position: absolute; bottom: 14%; width: 22%; color: #ECE5D9; }
.lg-l { left: 8%; transform: rotate(-24deg); } .lg-d { right: 8%; transform: scaleX(-1) rotate(-24deg); }
.mapa-monogram {   /* optički centrirano iznad mašne, preko spoja preklopa */
  position: absolute; z-index: 6; left: 50%; top: 17.5%; width: 40%; transform: translateX(-50%); overflow: visible; pointer-events: none;
  transition: opacity .45s ease; }
.mg-slova text { font-family: var(--rukopis); font-size: 106px; letter-spacing: 0; }
[data-stanje="otvaranje"] .mapa-monogram { opacity: 0; transition-delay: .55s; }
[data-stanje="otvoreno"] .mapa-monogram, html:not(.js) .mapa-monogram { display: none; }
.lice-datum { position: absolute; left: 0; right: 0; bottom: 9%; margin: 0; text-align: center; font-size: 3.2cqw; letter-spacing: .5em; font-weight: 600; color: var(--taupe); opacity: .85; }
.nalicje { transform: rotateY(180deg); }
.nalicje-papir { background: #DCCFB9 var(--papir-pijesak) 0 0 / 240px; display: grid; place-items: center; }
.vrata-l .nalicje-papir { clip-path: url(#oblik-desni); }
.vrata-d .nalicje-papir { clip-path: url(#oblik-lijevi); }
.nalicje svg { width: 70%; color: #D6C8AF; transform: rotate(-60deg); }

/* vrpca */
.vrpca { position: absolute; z-index: 6; left: 0; right: 0; top: 58%; height: 8.6%; pointer-events: none; }
.pojas {   /* traka od istog satena kao mašna (isječak iz fotografije mašne) */
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    linear-gradient(180deg, rgba(40,12,4,.45) 0, rgba(40,12,4,0) 9%, rgba(255,225,200,.18) 14%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 78%, rgba(40,12,4,.18) 90%, rgba(40,12,4,.5) 100%),
    url(slike/saten-traka.webp) 0 0 / auto 100% repeat-x;
  box-shadow: 0 2px 3px rgba(59,25,10,.35), 0 9px 14px -6px rgba(59,25,10,.3);
}
.pojas-l { left: 0; background-position: 0 0, 30% 0; transform-origin: 0 50%; }
.pojas-d { right: 0; background-position: 0 0, 70% 0; transform-origin: 100% 50%; }
/* vrpca se omata oko ruba mape – tamniji zavoj prema stražnjoj strani */
.pojas-l::before, .pojas-d::before { content: ""; position: absolute; top: 0; bottom: 0; width: 3%; }
.pojas-l::before { left: 0; background: linear-gradient(90deg, rgba(30,10,3,.5), rgba(30,10,3,.18) 35%, rgba(255,220,190,.18) 70%, rgba(30,10,3,0)); }
.pojas-d::before { right: 0; background: linear-gradient(270deg, rgba(30,10,3,.5), rgba(30,10,3,.18) 35%, rgba(255,220,190,.18) 70%, rgba(30,10,3,0)); }
.rep {
  --vx: 0px; --vy: 0px; --vr: 0deg;
  position: absolute; z-index: 8; left: 50%; top: 62.5%; width: 60%; padding: 0; border: 0; background: none;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  transform: translate(-48%, -27%) translate(var(--vx), var(--vy)) rotate(var(--vr)); transform-origin: 48% 27%;
  filter: drop-shadow(0 3px 3px rgba(59,25,10,.35)) drop-shadow(4px 14px 14px rgba(59,25,10,.25));
}
.masna { position: relative; display: block; width: 100%; aspect-ratio: 640 / 584; }
.masna img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform-origin: 49.2% 27.4%; }
.rep:active { cursor: grabbing; }
.rep-hint { position: absolute; right: 8%; bottom: 4%; width: 16%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(244,239,230,.9); box-shadow: 0 0 0 1px rgba(89,69,47,.2);
  animation: hint 2.8s ease-in-out 1.5s 2; opacity: 0; }
@keyframes hint { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) translate(8px, 10px); } }
.js .rep.vuce { transition: none; }
.rep.vraca { transition: --vx .5s cubic-bezier(.3,1.4,.5,1), --vy .5s cubic-bezier(.3,1.4,.5,1), --vr .5s ease; }

.uputa, .listaj { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; text-align: center; white-space: nowrap; }
.uputa { bottom: max(18px, env(safe-area-inset-bottom)); padding: 8px 18px; border-radius: 999px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--chocolate);
  background: rgba(244,239,230,.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .5s; }
.listaj { bottom: max(14px, env(safe-area-inset-bottom)); display: none; font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--taupe); }
.listaj span { display: block; font-size: 20px; line-height: .6; letter-spacing: 0; }

/* pop-up elementi */
.popup { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pp { position: absolute; overflow: visible; opacity: 0; transform-origin: 50% 100%; }
.pp.golub { width: 26%; fill: #F7F2EA; filter: drop-shadow(1px 2px 0 rgba(141,125,101,.45)) drop-shadow(4px 10px 8px rgba(59,42,25,.22)); }
.pp.latica { width: 7%; filter: drop-shadow(1px 2px 1px rgba(59,42,25,.25)); }
.pp.listic { width: 6%; filter: drop-shadow(1px 2px 1px rgba(59,42,25,.25)); }
.g1 { left: -10%; top: 2%; --dx: 60%; --dy: 150%; --r: -8deg; }
.g2 { right: -8%; top: 12%; width: 20% !important; --dx: -60%; --dy: 120%; --r: 6deg; transform: scaleX(-1); }
.l1 { left: -3%; top: 40%; fill: #C98E70; --dx: 200%; --dy: 40%; --r: -30deg; }
.l2 { right: -2%; top: 55%; fill: #DDB79F; --dx: -220%; --dy: 0%; --r: 40deg; }
.l3 { left: 12%; top: 88%; fill: #E3CDB8; --dx: 120%; --dy: -200%; --r: 120deg; }
.l4 { right: 18%; top: 1%; fill: #B7643C; --dx: -80%; --dy: 260%; --r: -70deg; width: 5.5% !important; }
.s1 { left: 1%; top: 74%; fill: #B4A587; --dx: 220%; --dy: -100%; --r: -50deg; }
.s2 { right: 1%; top: 78%; fill: #A99778; --dx: -240%; --dy: -120%; --r: 50deg; }
.s3 { right: 6%; top: 30%; fill: #C2B496; --dx: -260%; --dy: 60%; --r: 20deg; }

/* =========================== STANJA =========================== */
/* bez JS-a: pozivnica je odmah otvorena */
html:not(.js) .vrata, html:not(.js) .vrpca, html:not(.js) .rep, html:not(.js) .uputa, html:not(.js) .gumb-preskoci { display: none; }

/* OTVARANJE (≈3,6 s) */
[data-stanje="otvaranje"] .rep { pointer-events: none; animation: masna-podigni .9s ease forwards; }
[data-stanje="otvaranje"] .m-petlja-l { animation: petlja-l .62s cubic-bezier(.55,0,.6,1) .1s forwards; }
[data-stanje="otvaranje"] .m-petlja-d { animation: petlja-d .62s cubic-bezier(.55,0,.6,1) .16s forwards; }
[data-stanje="otvaranje"] .m-cvor { animation: cvor .5s ease .42s forwards; }
[data-stanje="otvaranje"] .m-rep-l { animation: rep-l 1.05s cubic-bezier(.5,0,.3,1) .3s forwards; }
[data-stanje="otvaranje"] .m-rep-d { animation: rep-d 1.05s cubic-bezier(.5,0,.3,1) .34s forwards; }
[data-stanje="otvaranje"] .pojas-l { animation: pojas-l .85s cubic-bezier(.55,0,.35,1) .62s forwards; }
[data-stanje="otvaranje"] .pojas-d { animation: pojas-d .85s cubic-bezier(.55,0,.35,1) .66s forwards; }
[data-stanje="otvaranje"] .uputa { opacity: 0; }
@keyframes masna-podigni { 0% { transform: translate(-48%, -27%) translate(var(--vx), var(--vy)) rotate(var(--vr)); } 30% { transform: translate(-48%, -28.5%) scale(1.03); } 100% { transform: translate(-48%, -27%); } }
/* petlje se provuku kroz čvor */
@keyframes petlja-l { 0% { transform: none; } 45% { transform: rotate(8deg) scale(.86, .8); } 100% { transform: translate(6%, 2%) rotate(28deg) scale(.12, .3); opacity: 0; } }
@keyframes petlja-d { 0% { transform: none; } 45% { transform: rotate(-8deg) scale(.86, .8); } 100% { transform: translate(-6%, 2%) rotate(-28deg) scale(.12, .3); opacity: 0; } }
@keyframes cvor { to { transform: scale(.5, .7); opacity: 0; } }
/* krajevi se ispruže uz vrpcu i odu s njom */
@keyframes rep-l { 0% { transform: none; } 45% { transform: rotate(46deg) scale(.95, .8); } 100% { transform: translateX(-75%) rotate(52deg) scale(.7, .5); opacity: 0; } }
@keyframes rep-d { 0% { transform: none; } 45% { transform: rotate(-46deg) scale(.95, .8); } 100% { transform: translateX(75%) rotate(-52deg) scale(.7, .5); opacity: 0; } }
/* polovice vrpce se razmaknu i skliznu oko rubova mape */
@keyframes pojas-l { 0% { transform: none; } 25% { transform: translateX(-3%) scaleY(.95); } 100% { transform: translateX(-34%) scaleX(.04) scaleY(.8); opacity: .0; } }
@keyframes pojas-d { 0% { transform: none; } 25% { transform: translateX(3%) scaleY(.95); } 100% { transform: translateX(34%) scaleX(.04) scaleY(.8); opacity: .0; } }

[data-stanje="otvaranje"] .vrata-l { animation: vrata-l 1.35s cubic-bezier(.45,.05,.2,1) 1.05s both; }
[data-stanje="otvaranje"] .vrata-d { animation: vrata-d 1.35s cubic-bezier(.45,.05,.2,1) 1.2s both; }
@keyframes vrata-l { to { transform: rotateY(-150deg); } }
@keyframes vrata-d { to { transform: rotateY(150deg); } }

.js [data-stanje="zatvoreno"] .kartica-glavna, .js [data-stanje="otvaranje"] .kartica-glavna { transform: translateY(9%) scale(.96); }
[data-stanje="otvaranje"] .kartica-glavna { animation: kartica-van 1.2s cubic-bezier(.25,.8,.3,1) 2s forwards; }
@keyframes kartica-van { 0% { transform: translateY(9%) scale(.96); } 70% { transform: translateY(-4.5%) scale(1.012); } 100% { transform: translateY(-3%) scale(1); } }
[data-stanje="otvoreno"] .kartica-glavna { transform: translateY(-3%); }

[data-stanje="otvaranje"] .pp { animation: iskoci 1.15s cubic-bezier(.2,.9,.3,1) forwards; }
[data-stanje="otvaranje"] .g1 { animation-delay: 2.45s; } [data-stanje="otvaranje"] .g2 { animation-name: iskoci-z; animation-delay: 2.60s; }
[data-stanje="otvaranje"] .l1 { animation-delay: 2.35s; } [data-stanje="otvaranje"] .l2 { animation-delay: 2.45s; }
[data-stanje="otvaranje"] .l3 { animation-delay: 2.55s; } [data-stanje="otvaranje"] .l4 { animation-delay: 2.40s; }
[data-stanje="otvaranje"] .s1 { animation-delay: 2.50s; } [data-stanje="otvaranje"] .s2 { animation-delay: 2.57s; } [data-stanje="otvaranje"] .s3 { animation-delay: 2.65s; }
@keyframes iskoci {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) rotateX(80deg) scale(.4); }
  35%  { opacity: 1; }
  60%  { transform: translate(0, -6%) rotate(var(--r)) rotateX(0) scale(1.05); }
  100% { opacity: 1; transform: rotate(var(--r)) scale(1); }
}
@keyframes iskoci-z {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) scaleX(-1) rotateX(80deg) scale(.4); }
  35%  { opacity: 1; }
  60%  { transform: translate(0, -6%) scaleX(-1) rotate(var(--r)) scale(1.05); }
  100% { opacity: 1; transform: scaleX(-1) rotate(var(--r)) scale(1); }
}

/* imena se otkrivaju */
.js [data-stanje="zatvoreno"] .imena > span, .js [data-stanje="otvaranje"] .imena > span { opacity: 0; }
[data-stanje="otvaranje"] .imena > span { animation: ime-otkrij .9s ease forwards; }
[data-stanje="otvaranje"] .imena > span:nth-child(1) { animation-delay: 2.75s; }
[data-stanje="otvaranje"] .imena > span:nth-child(2) { animation-delay: 3.05s; }
[data-stanje="otvaranje"] .imena > span:nth-child(3) { animation-delay: 3.25s; }
@keyframes ime-otkrij { from { opacity: 0; filter: blur(6px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }

/* OTVORENO – konačni položaji */
[data-stanje="otvoreno"] .vrata-l { transform: rotateY(-150deg); }
[data-stanje="otvoreno"] .vrata-d { transform: rotateY(150deg); }
[data-stanje="otvoreno"] .vrpca, [data-stanje="otvoreno"] .rep, [data-stanje="otvoreno"] .uputa { display: none; }
[data-stanje="otvoreno"] .pp { opacity: 1; transform: rotate(var(--r)); }
[data-stanje="otvoreno"] .g2 { transform: scaleX(-1) rotate(var(--r)); }
[data-stanje="otvoreno"] .pp.golub { animation: lebdi 9s ease-in-out infinite alternate; }
[data-stanje="otvoreno"] .g2 { animation-name: lebdi-z; animation-duration: 11s; }
@keyframes lebdi { to { transform: translateY(-5px) rotate(calc(var(--r) - 2deg)); } }
@keyframes lebdi-z { to { transform: scaleX(-1) translateY(-4px) rotate(calc(var(--r) + 2deg)); } }
[data-stanje="otvoreno"] .listaj { display: block; animation: blago .8s ease both; }
@keyframes blago { from { opacity: 0; } }
html:not(.js) .pp { opacity: 1; transform: rotate(var(--r)); }
html:not(.js) .g2 { transform: scaleX(-1); }

/* preskakanje / ponavljanje bez prijelaza */
.bez-prijelaza *, .bez-prijelaza *::before, .bez-prijelaza *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition: none !important; }

/* =========================== PRIČA =========================== */
.prica { position: relative; width: var(--stupac); margin: 0 auto; padding: 8px 0 32px; outline: none; }
.js body[data-stanje="zatvoreno"] .prica, .js body[data-stanje="otvaranje"] .prica { visibility: hidden; }
.nit {           /* satenska vrpca koja povezuje sve dijelove */
  position: absolute; left: 50%; top: 30px; bottom: 120px; width: 22px; margin-left: -11px; z-index: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,0) 16%, rgba(255,215,185,.45) 34%, rgba(255,255,255,0) 50%, rgba(0,0,0,.08) 72%, rgba(255,205,175,.25) 86%, rgba(0,0,0,.28)),
    linear-gradient(#8E421D, #A0512A 30%, #8A401C 60%, #9D4E26);
  box-shadow: 2px 0 6px rgba(59,30,15,.25);
}
.list {
  position: relative; z-index: 1; margin: 0 0 34px; padding: 40px 28px;
  border-radius: 6px; text-align: center; container-type: inline-size;
  background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%, rgba(89,69,47,.04)), var(--ivory) var(--papir) 0 0 / 240px;
  box-shadow: var(--list-sjena), 0 0 0 1px rgba(183,154,101,.2);
}
.list::before {      /* utisnut okvir koji prati rub papira */
  content: ""; position: absolute; inset: 10px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 1px 1px 0 rgba(89,69,47,.16), inset -1px -1px 0 rgba(255,255,255,.85), 1px 1px 0 rgba(255,255,255,.85), -1px -1px 0 rgba(89,69,47,.1);
}
.lok::before { content: ""; position: static; display: block; height: 56px; margin: 0 -24px 18px; inset: auto; border-radius: 0; background: #E3D8C6 var(--travertin) center / 600px; box-shadow: inset 0 -1px 0 rgba(141,125,101,.35), inset 0 -8px 12px -10px rgba(89,69,47,.4); }
.list-raspored .kut-gl { top: 12px; }
.naslov { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 9vw, 46px); line-height: 1.1; color: var(--chocolate); letter-spacing: .01em; }
.naslov::after { content: ""; display: block; width: 56px; height: 1px; margin: 14px auto 0; background: var(--champagne); }

/* poruka */
.list-poruka { padding: 54px 30px 44px; transform: rotate(-.6deg); }
.poruka { margin: 0 auto; max-width: 26ch; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(23px, 6.4vw, 30px); line-height: 1.35; color: var(--chocolate); }
.kut { position: absolute; width: 34%; color: #EDE6DA; }
.kut-gl { left: 4%; top: 6px; transform: rotate(-18deg); }
.kut-dd { right: 4%; bottom: 6px; transform: rotate(162deg); }
.datum-veliki { margin: 28px auto 0; display: inline-grid; justify-items: center; padding: 12px 34px 14px; border-top: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne); }
.dv-dan { font-size: 13px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--taupe); }
.dv-broj { font-family: var(--serif); font-size: clamp(64px, 18vw, 84px); line-height: 1; font-weight: 500; color: var(--terracotta); text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.dv-mjesec { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: .06em; }

/* luk s mladencima */
.list-luk {
  padding: 36px 20px 30px; transform: rotate(.7deg);
  border-radius: 50% 50% 6px 6px / 28% 28% 6px 6px;
  background: linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,0) 50%, rgba(89,69,47,.06)), #DCCFB8 var(--papir-pijesak) 0 0 / 240px;
}
.luk-reljef { position: absolute; left: 4%; right: 4%; bottom: 0; width: 92%; height: 96%; color: #D6C8B0; }
.par { position: relative; display: block; width: min(100%, 360px); margin: 0 auto; height: auto; overflow: visible; }
.veo { transform-origin: 122px 106px; }
.potpis-luk { position: relative; margin: 6px 0 0; font-family: var(--rukopis); font-size: 40px; font-weight: 400; color: var(--chocolate); }

/* raspored */
.list-raspored { transform: rotate(-.4deg); }
.raspored { list-style: none; margin: 26px 0 0; padding: 0; position: relative; display: grid; gap: 34px; }
.raspored::before { content: ""; position: absolute; left: 50%; top: 24px; bottom: 60px; width: 1px; background: linear-gradient(var(--champagne), rgba(183,154,101,.35)); transform-origin: 50% 0; }
.stavka { position: relative; display: grid; justify-items: center; }
.stavka > * { position: relative; }
.stavka .ikona { width: 92px; height: 78px; color: var(--chocolate); padding: 4px 8px; background: var(--ivory) var(--papir) 0 0 / 240px; border-radius: 50%; }
.stavka .prsteni { color: var(--champagne); }
.vrijeme { margin: 6px 0 0; font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1; color: var(--terracotta); background: var(--ivory); padding: 0 10px; }
.stavka h3 { margin: 6px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--chocolate); background: var(--ivory); padding: 0 8px; }
.opis { margin: 4px 0 0; color: var(--taupe); font-size: 16px; background: var(--ivory); padding: 0 8px; }

/* lokacije */
.lokacije { position: relative; z-index: 1; margin: 0 0 34px; }
.naslov-svijetli { display: table; margin: 0 auto; padding: 14px 30px 12px; border-radius: 4px; position: relative; z-index: 1;
  background: var(--ivory) var(--papir) 0 0 / 240px; box-shadow: var(--list-sjena); font-size: clamp(30px, 8vw, 40px); }
.naslov-svijetli::after { margin-top: 8px; }
.lok-par { display: grid; gap: 18px; margin-top: 18px; }
.lok { margin: 0; padding: 0 24px 26px; overflow: hidden; text-align: left; }
.lok-2 { transform: rotate(.5deg); }
.lok-oznaka { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--terracotta); }
.lok h3 { margin: 4px 0 0; font-family: var(--serif); font-size: 30px; line-height: 1.15; font-weight: 600; }
.lok-mjesto, .lok-adresa { margin: 4px 0 0; color: var(--taupe); }
.lok-napomena { margin: 12px 0 0; font-size: 15px; font-style: normal; color: var(--taupe); border-left: 2px solid var(--sand); padding-left: 10px; }

.gumb {
  display: inline-block; margin-top: 18px; padding: 13px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: #FBF6EE;
  background: linear-gradient(180deg, #A4552C, var(--terracotta)); box-shadow: inset 0 1px 0 rgba(255,220,190,.35), 0 8px 18px -10px rgba(91,35,10,.7);
}
.gumb:hover { filter: brightness(1.06); }
.gumb-obrub { color: var(--terracotta); background: transparent; box-shadow: inset 0 0 0 1.5px var(--terracotta); }
.gumb-tekst { margin-top: 10px; padding: 6px; border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--terracotta); text-decoration: underline; text-underline-offset: 4px; }

/* odbrojavanje */
.list-odbrojavanje { overflow: hidden; background: linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,0) 50%), #DCCFB8 var(--papir-pijesak) 0 0 / 240px; transform: rotate(.4deg); }
.odb-lukovi { position: absolute; left: 50%; top: -10%; width: 130%; height: 120%; transform: translateX(-50%); color: #D3C4AA; }
.list-odbrojavanje > *:not(svg) { position: relative; }
.brojke { display: flex; justify-content: center; gap: 10px; margin: 22px 0 6px; }
.brojke p { margin: 0; flex: 1 1 0; max-width: 92px; display: grid; justify-items: center; padding: 14px 4px 10px; border-radius: 46px 46px 6px 6px;
  background: var(--ivory) var(--papir) 0 0 / 240px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 14px -8px rgba(59,42,25,.4); }
.brojke span { font-family: var(--serif); font-size: clamp(30px, 8.4vw, 40px); font-weight: 600; line-height: 1; color: var(--chocolate); font-variant-numeric: tabular-nums; }
.brojke small { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.odb-gotovo { font-family: var(--serif); font-size: 28px; color: var(--terracotta); }
.mala-napomena { margin: 10px 0 0; font-size: 14px; color: var(--taupe); }

/* potvrda */
.list-potvrda { text-align: left; padding: 44px 26px 36px; overflow: hidden; }
.list-potvrda .naslov { text-align: center; }
.vrpca-kut { position: absolute; right: -38px; top: 22px; width: 150px; height: 22px; transform: rotate(38deg);
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(255,215,185,.4) 35%, rgba(255,255,255,0) 50%, rgba(0,0,0,.22)), #93461F; box-shadow: 0 4px 8px rgba(59,30,15,.3); }
.potvrda-rok { text-align: center; margin: 12px 0 0; }
.potvrda-rok strong { color: var(--terracotta); }
.demo-oznaka { margin: 14px auto 0; padding: 8px 12px; border: 1px dashed rgba(145,69,31,.55); border-radius: 8px; font-size: 15px; text-align: center; color: var(--terracotta); background: rgba(255,255,255,.35); }
#obrazac { margin-top: 20px; display: grid; gap: 16px; }
.polje { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.polje > span, legend { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); padding: 0; }
.polje em { text-transform: none; letter-spacing: 0; font-weight: 500; }
.polje input[type=text], .polje input[type=number], .polje textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--chocolate); padding: 12px 14px;
  border: 1px solid rgba(141,125,101,.5); border-radius: 10px; background: rgba(255,255,255,.65); box-shadow: inset 0 1px 3px rgba(59,42,25,.08);
}
.polje input:focus, .polje textarea:focus { outline: 2px solid rgba(145,69,31,.45); outline-offset: 1px; }
.izbor { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.izbor legend { width: 100%; margin-bottom: 6px; }
.izbor label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 17px; }
.izbor input { width: 20px; height: 20px; accent-color: var(--terracotta); }
.greska { margin: 0; min-height: 1.2em; color: #9B2F1B; font-weight: 600; }
#posalji { justify-self: center; margin-top: 0; }
#posalji[disabled] { opacity: .6; cursor: progress; }
.odgovor { margin-top: 22px; text-align: center; }
.odgovor-naslov { margin: 0; font-family: var(--serif); font-size: 34px; color: var(--chocolate); }

/* završetak */
.list-kraj { padding: 44px 30px 40px; transform: rotate(-.5deg); }
.maslina { width: 150px; color: var(--taupe); }
.kraj-poruka { margin: 16px auto 0; max-width: 30ch; font-family: var(--serif); font-size: clamp(22px, 6vw, 27px); line-height: 1.4; font-weight: 500; }
.kraj-potpis { margin: 22px 0 0; font-family: var(--rukopis); font-size: 50px; line-height: 1.1; color: var(--terracotta); }

.podnozje { position: relative; z-index: 1; text-align: center; padding: 6px 0 max(24px, env(safe-area-inset-bottom)); font-size: 14px; color: var(--chocolate); }
.podnozje p { margin: 0 0 6px; }
.podnozje-oznaka { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(244,239,230,.75); }
#glazba-zasluge:empty { display: none; }
#glazba-zasluge a { color: var(--terracotta); }

.obavijest { position: fixed; z-index: 60; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 12px; background: rgba(89,69,47,.94); color: #fff; font-size: 15px; text-align: center; transition: opacity .3s, transform .3s; }
.obavijest.vidljiva { opacity: 1; transform: translate(-50%, 0); }

/* latice koje povremeno prođu rubom */
.latica-let { position: fixed; z-index: 30; top: -40px; width: 16px; pointer-events: none; opacity: .85; filter: drop-shadow(1px 2px 1px rgba(59,42,25,.2)); }

/* =========================== ANIMACIJE PRI LISTANJU =========================== */
.anim .otkrij { opacity: 0; transform: translateY(26px) rotate(var(--nagib, 0deg)); }
.anim .otkrij.vidljivo { opacity: 1; transform: rotate(var(--nagib, 0deg)); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.list-poruka { --nagib: -.6deg; } .list-luk { --nagib: .7deg; } .lok-2 { --nagib: .5deg; } .list-odbrojavanje { --nagib: .4deg; } .list-kraj { --nagib: -.5deg; }
.anim .kut { opacity: 0; transform-origin: center; }
.anim .vidljivo .kut { opacity: 1; transition: opacity 1.2s ease .4s, filter 1.2s ease .4s; }
.anim .luk-reljef use, .anim .par-luk { opacity: .0; }
.anim .vidljivo .par-luk { opacity: 1; transition: opacity .2s; }
.anim .par .luk-crta { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .vidljivo .par .luk-crta { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1) .2s; }
.anim .vidljivo .luk-reljef use { opacity: 1; transition: opacity 1.6s ease .3s; }
.anim .par-cvijece { opacity: 0; transform: translateY(6px); }
.anim .vidljivo .par-cvijece { opacity: 1; transform: none; transition: opacity 1.2s ease 1.4s, transform 1.2s ease 1.4s; }
.anim .vidljivo .veo { animation: veo 7s ease-in-out 2s infinite alternate; }
@keyframes veo { 0% { transform: none; } 100% { transform: skewX(-2.2deg) scaleX(1.03); } }
.anim .raspored::before { transform: scaleY(0); }
.anim .raspored.vidljivo::before { transform: scaleY(1); transition: transform 2.2s cubic-bezier(.4,0,.2,1); }
.anim .stavka { opacity: 0; transform: translateY(18px); }
.anim .raspored.vidljivo .stavka { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.anim .raspored.vidljivo .stavka:nth-child(2) { transition-delay: .6s; }
.anim .raspored.vidljivo .stavka:nth-child(3) { transition-delay: 1.2s; }
.prsteni .odsjaj { opacity: 0; }
.anim .raspored.vidljivo .prsteni .odsjaj { animation: odsjaj 1.4s ease 1.9s 1; }
@keyframes odsjaj { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 40% { opacity: 1; transform: translate(8px, 4px) scale(1.2); } 100% { opacity: 0; transform: translate(26px, 12px) scale(.4); } }
.prsteni .odsjaj { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 3px #fff); }
.anim .maslina { opacity: 0; transform: translateY(8px) rotate(-6deg); }
.anim .vidljivo .maslina { opacity: 1; transform: none; transition: opacity 1s ease .3s, transform 1.4s cubic-bezier(.2,.8,.2,1) .3s; }

/* =========================== ŠIRI ZASLONI =========================== */
@media (min-width: 760px) {
  .list { padding: 52px 54px; }
  .lok-par { grid-template-columns: 1fr 1fr; }
  .lok { padding: 0 26px 28px; }
}

/* =========================== SMANJENO KRETANJE =========================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .rep-hint { display: none; }
}

/* =========================== REALISTIČNE GOLUBICE =========================== */
.golub { position: fixed; z-index: 35; left: 0; top: 0; width: var(--gw, 120px); aspect-ratio: 300 / 398; pointer-events: none; will-change: transform, opacity;
  filter: drop-shadow(0 18px 14px rgba(59,42,25,.18)); }
.golub-smjer { position: absolute; inset: 0; }
.golub.lijevo .golub-smjer { transform: scaleX(-1); }
.golub img { position: absolute; inset: 0; width: 100%; height: 100%; }
.golub .k-pred { transform-origin: 58.3% 61%; animation: mah-pred var(--mah, .46s) ease-in-out infinite; }
.golub .k-straga { transform-origin: 71.7% 57.5%; animation: mah-straga var(--mah, .46s) ease-in-out infinite; }
.golub.klizi .k-pred, .golub.klizi .k-straga { animation-play-state: paused; }
@keyframes mah-pred { 0%,100% { transform: none; } 50% { transform: rotate(-38deg) scaleY(.62) scaleX(.92); } }
@keyframes mah-straga { 0%,100% { transform: none; } 50% { transform: rotate(-30deg) scaleY(.55); } }
/* papirnate golubice zamjenjuju prave */
.pp.golub-papir { display: none; }
[data-stanje="otvaranje"] .rep-hint, [data-stanje="otvoreno"] .rep-hint { display: none; }

/* mašna i traka za nijansu svjetlije i nježnije (isti ton za oboje) */
.masna img, .pojas { filter: brightness(1.1) saturate(.82); }

/* ===== animirano cvijeće oko mladenaca ===== */
.par .cv { transform-box: fill-box; transform-origin: 50% 50%; }
.par .cv-list { transform-origin: 50% 100%; }
.anim .par .cv { transform: scale(0); opacity: 0; }
.anim .vidljivo .par .cv {
  animation: procvjetaj .9s cubic-bezier(.2,.9,.3,1.2) var(--d) forwards,
             njihaj 4.5s ease-in-out calc(var(--d) + 1s) infinite alternate;
}
@keyframes procvjetaj { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes njihaj { 0% { transform: rotate(-5deg); opacity: 1; } 100% { transform: rotate(6deg) scale(1.04); opacity: 1; } }
.lat-pad { opacity: 0; }
.anim .vidljivo .lat-pad { animation: lat-pad 9s ease-in-out var(--d) infinite; }
@keyframes lat-pad {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  10% { opacity: .85; }
  50% { transform: translate(14px, 140px) rotate(160deg); }
  90% { opacity: .7; }
  100% { transform: translate(-6px, 270px) rotate(320deg); opacity: 0; }
}
.lat-pad { transform-box: fill-box; transform-origin: center; }
/* cvjetovi punije i bogatije */
.par .cv-cvijet { scale: 1.15; }
.par .cv-list { scale: 1.1; }

/* ===== reljefni cvjetni grozdovi u kutovima listova ===== */
.cvjetni-kut { position: absolute; z-index: 2; width: min(44%, 200px); height: auto; overflow: visible; pointer-events: none; }
.ck-gl { left: -10px; top: -12px; }
.ck-gd { right: -10px; top: -12px; transform: scaleX(-1); }
.ck-dl { left: -10px; bottom: -12px; transform: scaleY(-1); }
.ck-dd { right: -10px; bottom: -12px; transform: scale(-1, -1); }
.cvjetni-kut .cv { transform-box: fill-box; transform-origin: 50% 50%; }
.cvjetni-kut .cv-list { transform-origin: 50% 100%; }
.anim .cvjetni-kut .cv { transform: scale(0); opacity: 0; }
.anim .cvjetni-kut.vidljivo .cv {
  animation: procvjetaj .9s cubic-bezier(.2,.9,.3,1.2) var(--d) forwards,
             njihaj 5s ease-in-out calc(var(--d) + 1s) infinite alternate;
}
/* latice koje padaju s cvjetova luka */
.anim .vidljivo .lat-pad { animation-duration: 7.5s; }