/* ══════════ Plan Sjedenja — pokret pozivnice ══════════
   Tri sloja:
   1) OTVARANJE  — kad se pozivnica prvi put prikaže: kompozicija teme se „sklapa"
                   (linije se crtaju, pečati padaju, sunce izlazi), pa se pojave monogram,
                   imena i detalji. Traje ~2,5 s; dodir ga preskače.
   2) DAH        — tihi, spori pokreti u kompoziciji (zvijezde trepere, sekundara kuca,
                   oblaci aurore plove). Nikad ne skače u oči.
   3) ODGOVOR    — pokret kao odgovor gostu: sekcije se otkrivaju pri skrolanju,
                   paneli se smjenjuju, potvrda dolaska dobija slavlje.
   Stanja (postavlja pozivnica-anim.js):
     html.ps-anim  — pokret je dozvoljen (nema „reduce motion"); bez toga sve je statično
     body.pa-go    — otvaranje je počelo
     html.pa-kraj  — otvaranje je gotovo (ili preskočeno) → ulazne animacije se gase
   Konačni izgled je uvijek isti kao bez animacija. */

:root {
  --pa-ease: cubic-bezier(.16, 1, .3, 1);
  --pa-ease-io: cubic-bezier(.65, 0, .35, 1);
  --pa-ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --pa-ease-back2: cubic-bezier(.3, 1.9, .55, 1);
}

/* ─────────────────────── 0. prije početka: ništa ne bljesne ─────────────────────── */
html.ps-anim:not(.pa-kraj) body:not(.pa-go) .tema-hero-media > *,
html.ps-anim:not(.pa-kraj) body:not(.pa-go) .event-head > *:not(.tema-hero-media),
html.ps-anim:not(.pa-kraj) body:not(.pa-go) .tema-hero-inner > *,
html.ps-anim:not(.pa-kraj) body:not(.pa-go) .tema-right > *,
html.ps-anim:not(.pa-kraj) body:not(.pa-go) .tema-top-nav,
html.ps-anim:not(.pa-kraj) body:not(.pa-go) #panel-invite .invite-hero > * { opacity: 0; }

/* ─────────────────────── 1. OTVARANJE — kompozicija teme ─────────────────────── */
.ps-art svg * { transform-box: view-box; }
.ps-art { --pa-art: 0s; }
body.tema-editorial .ps-art { --pa-art: .55s; }

html.ps-anim:not(.pa-kraj) body.pa-go .ps-art :is(.pa-crtaj, .pa-crtaj-gore, .pa-crtaj-nazad, .pa-crtaj-tekst, .pa-crtaj-sredina, .pa-pojavi, .pa-izroni, .pa-izroni-duboko, .pa-padni, .pa-padni-odskok, .pa-lijevo, .pa-desno, .pa-iskoci, .pa-iskoci-jako, .pa-iskoci-blago, .pa-iskoci-okret, .pa-pecat, .pa-tresak, .pa-talas-ulaz, .pa-izlazak, .pa-glitch, .pa-tipkaj, .pa-zamah, .pa-otisak-a, .pa-otisak-b, .pa-okret, .pa-sirenje, .pa-slijeganje, .pa-list, .pa-trzaj) {
  animation-duration: var(--t, .9s);
  animation-delay: calc(var(--d, 0s) + var(--pa-art, 0s));
  animation-fill-mode: both;
  animation-timing-function: var(--pa-ease);
}
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-crtaj,
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-crtaj-gore { stroke-dasharray: 1; animation-name: paCrtaj; animation-timing-function: var(--pa-ease-io); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-crtaj-nazad { stroke-dasharray: 1; animation-name: paCrtajNazad; animation-timing-function: var(--pa-ease-io); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-crtaj-tekst { stroke-dasharray: 2600; animation-name: paCrtajTekst; animation-timing-function: var(--pa-ease-io); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-kist { animation-timing-function: cubic-bezier(.45, .05, .25, 1); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-crtaj-sredina { animation-name: paSredina; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-pojavi { animation-name: paPojavi; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-pojavi.pa-razmak { animation-name: paRazmak; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-pojavi.pa-razmak-siri { animation-name: paRazmakSiri; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-izroni { animation-name: paIzroni; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-izroni-duboko { animation-name: paIzroniDuboko; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-padni { animation-name: paPadni; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-padni-odskok { animation-name: paPadniOdskok; animation-timing-function: linear; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-lijevo { animation-name: paLijevo; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-desno { animation-name: paDesno; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-iskoci { animation-name: paIskoci; animation-timing-function: var(--pa-ease-back); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-iskoci-jako { animation-name: paIskoci; animation-timing-function: var(--pa-ease-back2); animation-duration: var(--t, .7s); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-iskoci-blago { animation-name: paIskociBlago; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-iskoci-okret { animation-name: paIskociOkret; animation-timing-function: var(--pa-ease-back); animation-duration: var(--t, 1s); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-pecat { animation-name: paPecat; animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-tresak { animation-name: paTresak; animation-timing-function: cubic-bezier(.5, 0, .3, 1); animation-duration: var(--t, .8s); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-talas-ulaz { animation-name: paTalasUlaz; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-izlazak { animation-name: paIzlazak; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-glitch { animation-name: paGlitch; animation-timing-function: linear; animation-duration: var(--t, .9s); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-tipkaj { animation-name: paTipkaj; animation-timing-function: steps(16, end); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-zamah { animation-name: paZamah; animation-duration: 1.7s; animation-timing-function: var(--pa-ease-back); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-otisak-a { animation-name: paOtisakA; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-otisak-b { animation-name: paOtisakB; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-okret { animation-name: paOkret; animation-duration: var(--t, 1s); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-sirenje { animation-name: paSirenje; animation-timing-function: var(--pa-ease-io); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-slijeganje { animation-name: paSlijeganje; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-list { animation-name: paList; transform-origin: 0 0; animation-timing-function: var(--pa-ease-back); }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-trzaj { animation-name: paTrzaj; animation-duration: .35s; animation-timing-function: linear; animation-fill-mode: none; }
/* zrake Art Deco: crtanje pa svjetlucanje u istom elementu (različita svojstva) */
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-crtaj.pa-zraka {
  animation: paCrtaj var(--t, .9s) var(--pa-ease-io) calc(var(--d, 0s) + var(--pa-art, 0s)) both,
             paZraka 4.2s ease-in-out calc(2.4s + var(--td, 0s)) infinite;
}

/* ─────────────────────── 2. DAH — tihi pokreti (i nakon otvaranja) ─────────────────────── */
html.ps-anim .ps-art .pa-trepti { animation: paTrepti var(--tw, 4s) ease-in-out var(--td, 0s) infinite; }
html.ps-anim .ps-art .pa-puls { animation: paPuls 7s ease-in-out infinite; }
html.ps-anim .ps-art .pa-iskra { animation: paIskra 3.8s ease-in-out var(--td, 0s) infinite; }
html.ps-anim .ps-art .pa-tok { stroke-dasharray: .07 .93; animation: paTok 6.5s linear 2.8s infinite both; }
html.ps-anim .ps-art .pa-val { animation: paVal 3s ease-out 2.6s infinite both; }
html.ps-anim .ps-art .pa-talas { animation: paTalas 3.8s ease-in-out var(--td, 0s) infinite; }
html.ps-anim .ps-art .pa-odsjaj { animation: paOdsjaj 8s ease-in-out infinite alternate; }
html.ps-anim .ps-art .pa-sjaj { animation: paSjaj 4.5s ease-in-out infinite; }
html.ps-anim .ps-art .pa-sekundara { animation: paSekunde 60s steps(60, end) infinite; }
html.ps-anim .ps-art .pa-zraka { animation: paZraka 4.2s ease-in-out var(--td, 0s) infinite; }
html.ps-anim .ps-art .pa-svjetluca { animation: paSvjetluca 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
html.ps-anim .ps-art .pa-mijena { animation: paMijena 5.6s ease-in-out var(--td, 0s) infinite; }
html.ps-anim .ps-art .pa-disanje { animation: paDisanje 8s ease-in-out infinite; }
html.ps-anim .ps-art .pa-klati { animation: paKlati 3.6s ease-in-out infinite; }
html.ps-anim .ps-art .pa-vrti { animation: paVrti var(--tw, 12s) linear infinite; }
html.ps-anim .ps-art .pa-vrti-sporo { animation: paVrti 90s linear infinite; }
html.ps-anim .ps-art .pa-riso { animation: paRiso 7s steps(1, end) 3s infinite; }
html.ps-anim .ps-art .pa-traka { animation: paTraka 5s linear infinite; }
html.ps-anim .ps-art .pa-lebdi { animation: paLebdi var(--tw, 6s) ease-in-out var(--td, 0s) infinite alternate; }
html.ps-anim .ps-art .pa-kruzi { animation: paKruzi 7s ease-in-out infinite; }
html.ps-anim .ps-art .pa-njisi { animation: paNjisi 6.5s ease-in-out infinite alternate; }
html.ps-anim .ps-art .pa-odsjaj-pecat { animation: paOdsjajPecat 5s ease-in-out infinite; }

/* Aurora: oblaci boje kao HTML slojevi (blur na GPU-u) */
.ps-art .pa-aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.ps-art .pa-aurora ~ .ps-art-svg { position: relative; z-index: 1; }
.ps-art .pa-aurora i { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .85; will-change: transform; }
.ps-art .pa-aurora i:nth-child(1) { left: 3%;  top: 3%;  width: 49%; height: 65%; background: #F3C9D8; animation: paAur1 17s ease-in-out infinite alternate; }
.ps-art .pa-aurora i:nth-child(2) { left: 31%; top: 32%; width: 53%; height: 65%; background: #CFC8F3; animation: paAur2 21s ease-in-out infinite alternate; }
.ps-art .pa-aurora i:nth-child(3) { left: 58%; top: 3%;  width: 44%; height: 59%; background: #BFE7DA; animation: paAur3 19s ease-in-out infinite alternate; }
.ps-art .pa-aurora i:nth-child(4) { left: 31%; top: 6%;  width: 33%; height: 41%; background: #F4E2B6; animation: paAur2 15s ease-in-out -6s infinite alternate-reverse; }
.ps-art .pa-aurora i:nth-child(5) { left: -1%; top: 53%; width: 36%; height: 47%; background: #DCEBF7; animation: paAur1 23s ease-in-out -9s infinite alternate-reverse; }
html.ps-anim:not(.pa-kraj) body.pa-go .ps-art .pa-aurora { animation: paPojavi 2s var(--pa-ease) calc(.1s + var(--pa-art, 0s)) both; }

/* ─────────────────────── 3. OTVARANJE — monogram, imena, detalji ─────────────────────── */
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-media { animation: paPojavi .8s var(--pa-ease) both; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-media.tema-hero-slika { animation: paFoto 1.8s var(--pa-ease) both; }
html.ps-anim:not(.pa-kraj) body.pa-go .event-monogram,
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-mono { animation: paMonogram 1.1s var(--pa-ease) .45s both; }
html.ps-anim:not(.pa-kraj) body.pa-go .event-head .event-names,
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-names { animation: paIme 1.3s var(--pa-ease) .65s both; }
html.ps-anim:not(.pa-kraj) body.pa-go .event-names .amp,
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-names .amp,
html.ps-anim:not(.pa-kraj) body.pa-go #inv-couple .amp { display: inline-block; animation: paAmp 1.1s var(--pa-ease-back) 1.15s both; }
html.ps-anim:not(.pa-kraj) body.pa-go .event-head .event-meta,
html.ps-anim:not(.pa-kraj) body.pa-go .event-head .event-divider,
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-meta,
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-cd,
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-inner .tema-cta { animation: paGore .9s var(--pa-ease) 1.05s both; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-cd { animation-delay: 1.18s; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-inner .tema-cta { animation-delay: 1.3s; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-hero-inner .tema-deco,
html.ps-anim:not(.pa-kraj) body.pa-go .event-head #demo-badge,
html.ps-anim:not(.pa-kraj) body.pa-go .event-head .demo-badge { animation: paPojavi .9s var(--pa-ease) .3s both; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-vert { animation: paPojavi 1.4s var(--pa-ease) 1.4s both; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-top-nav { animation: paDolje .9s var(--pa-ease) .9s both; }
body.tema-editorial.pa-go .tema-top-nav { animation-delay: .1s !important; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-right > * { animation: paGore .9s var(--pa-ease) both; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-right > :nth-child(1) { animation-delay: .95s; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-right > :nth-child(2) { animation-delay: 1.07s; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-right > :nth-child(3) { animation-delay: 1.19s; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-right > :nth-child(n+4) { animation-delay: 1.31s; }
html.ps-anim:not(.pa-kraj) body.pa-go .tema-mobile-nav { animation: paIzDna .8s var(--pa-ease) 1.4s both; }
html.ps-anim:not(.pa-kraj) body.pa-go #ps-kontrole { animation: paPojavi .8s var(--pa-ease) 1.5s both; }
/* editorial: zaglavlje (monogram → imena → banner) */
body.tema-editorial.pa-go .event-head .event-monogram { animation-delay: .25s !important; }
body.tema-editorial.pa-go .event-head .event-names { animation-delay: .4s !important; }
body.tema-editorial.pa-go .event-head .event-meta, body.tema-editorial.pa-go .event-head .event-divider { animation-delay: .75s !important; }

/* kartica pozivnice u centru */
html.ps-anim:not(.pa-kraj) body.pa-go #panel-invite .invite-hero > * { animation: paGore 1s var(--pa-ease) both; }
html.ps-anim:not(.pa-kraj) body.pa-go #panel-invite .invite-hero > .invite-ornament { animation: paPojavi .6s var(--pa-ease) .9s both; }
html.ps-anim:not(.pa-kraj) body.pa-go #panel-invite .invite-hero > .invite-eyebrow { animation-delay: 1.05s; }
html.ps-anim:not(.pa-kraj) body.pa-go #panel-invite .invite-hero > .invite-couple { animation: paIme 1.3s var(--pa-ease) 1.15s both; }
html.ps-anim:not(.pa-kraj) body.pa-go #panel-invite .invite-hero > .invite-date { animation-delay: 1.35s; }
html.ps-anim:not(.pa-kraj) body.pa-go #panel-invite .invite-hero > .invite-odbroj,
html.ps-anim:not(.pa-kraj) body.pa-go #panel-invite .invite-hero > .pa-cd { animation-delay: 1.5s; }
html.ps-anim:not(.pa-kraj) body.pa-go #panel-invite .invite-ornament path[stroke] { stroke-dasharray: 1; animation: paCrtaj 1.2s var(--pa-ease-io) 1s both; }
html.ps-anim:not(.pa-kraj) body.pa-go #panel-invite .invite-ornament path[fill],
html.ps-anim:not(.pa-kraj) body.pa-go #panel-invite .invite-ornament circle { transform-box: fill-box; transform-origin: center; animation: paIskoci .7s var(--pa-ease-back) 1.5s both; }

/* klasični stilovi (bez teme): veliki naslovni baner na desktopu */
html.ps-anim:not(.pa-kraj) body:not(.pa-go) .hero-content > * { opacity: 0; }
html.ps-anim:not(.pa-kraj) body.pa-go .hero-content > .hero-mono { animation: paMonogram 1.1s var(--pa-ease) .15s both; }
html.ps-anim:not(.pa-kraj) body.pa-go .hero-content > .hero-eyebrow { animation: paGore .9s var(--pa-ease) .35s both; }
html.ps-anim:not(.pa-kraj) body.pa-go .hero-content > .hero-names { animation: paIme 1.4s var(--pa-ease) .5s both; }
html.ps-anim:not(.pa-kraj) body.pa-go .hero-content > .hero-meta,
html.ps-anim:not(.pa-kraj) body.pa-go .hero-content > .hero-odbroj { animation: paGore .9s var(--pa-ease) 1.05s both; }
html.ps-anim .hero-scroll svg { animation: paStrelica 2.2s ease-in-out 2.5s infinite; }
@keyframes paStrelica { 0%, 100% { translate: 0 0; opacity: .6; } 50% { translate: 0 7px; opacity: 1; } }

/* ─────────────────────── 4. ODGOVOR — otkrivanje sekcija pri skrolanju ─────────────────────── */
html.ps-anim .pa-r {
  transition: opacity .95s var(--pa-ease) var(--pa-k, 0s), translate .95s var(--pa-ease) var(--pa-k, 0s),
              filter .95s var(--pa-ease) var(--pa-k, 0s), clip-path 1.1s var(--pa-ease) var(--pa-k, 0s);
}
html.ps-anim .pa-r:not(.pa-in) { opacity: 0; translate: 0 22px; filter: blur(5px); }
html.pa-tiho .pa-r:not(.pa-in), html.pa-tiho .pa-r:not(.pa-in)::before, html.pa-tiho .pa-r:not(.pa-in)::after { transition: none !important; }
html.ps-anim body.tema-split-hero .pa-r:not(.pa-in) { translate: -26px 0; filter: none; }
html.ps-anim body.tema-editorial .pa-r:not(.pa-in) { translate: 0 14px; filter: none; clip-path: inset(0 0 100% 0); }
html.ps-anim body.tema-editorial .pa-r.pa-in { clip-path: inset(-12px -40px -12px -40px); }
/* naslov sekcije: crtica ispod se razvuče */
html.ps-anim #panel-invite .invite-h.pa-r::after { transition: transform 1s var(--pa-ease) calc(var(--pa-k, 0s) + .25s); transform-origin: center; }
html.ps-anim #panel-invite .invite-h.pa-r:not(.pa-in)::after { transform: scaleX(0); }

/* prelaz između panela (Pozivnica / Gdje sjedim / Dolazak / Galerija) */
html.ps-anim .panel.pa-ulaz { animation: paPanel .6s var(--pa-ease) both; }

/* ─────────────────────── 5. ŽIVO ODBROJAVANJE ─────────────────────── */
.invite-hero.pa-cd-aktivan #inv-odbroj { display: none !important; }
/* jedno odbrojavanje na ekranu: veliko u kartici pozivnice (bočne kutije se sklanjaju) */
body.pa-cd-aktivan .tema-countdown, body.pa-cd-aktivan .tema-hero-cd { display: none !important; }
.pa-cd { display: flex; justify-content: center; align-items: flex-start; margin: 28px auto 0; max-width: 460px; }
.pa-cd-c { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 6px; }
.pa-cd-c + .pa-cd-c { border-left: 1px solid var(--line); }
.pa-cd-c b {
  display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 5.2vw, 44px); line-height: 1;
  color: var(--text-main); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em;
}
.pa-cd-c span { margin-top: 9px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.pa-cd-sek b { color: var(--akc-t, var(--accent)); }
.pa-cd-mini { display: flex; justify-content: center; align-items: baseline; gap: 3px; margin-top: 12px; font-size: 13px; letter-spacing: .06em; color: var(--text-muted); font-variant-numeric: tabular-nums lining-nums; }
.pa-cd-mini b { display: inline-block; font-weight: 500; color: var(--text-main); min-width: 1.3em; text-align: center; }
.pa-cd-mini i { font-style: normal; opacity: .45; }
.pa-cd-mini .pa-cd-s { color: var(--akc-t, var(--accent)); }
body.tema-split-hero .tema-hero-cd { flex-wrap: wrap; }
body.tema-split-hero .tema-hero-cd .pa-cd-mini { flex-basis: 100%; justify-content: flex-start; margin-top: 6px; }
html.ps-anim .pa-tik { animation: paTik .5s var(--pa-ease); }
@keyframes paTik { from { opacity: .15; translate: 0 -.28em; } to { opacity: 1; translate: 0 0; } }
body[data-style="brutalist"] .pa-cd-c b, body[data-style="concrete"] .pa-cd-c b, body[data-style="swiss"] .pa-cd-c b, body[data-style="memphis"] .pa-cd-c b, body[data-style="acid"] .pa-cd-c b { font-weight: 600; letter-spacing: -.03em; }
body[data-style="quiet-luxury"] .pa-cd-c b, body[data-style="wabi-sabi"] .pa-cd-c b, body[data-style="aurora"] .pa-cd-c b { font-weight: 300; }
@media (max-width: 520px) {
  .pa-cd { margin-top: 22px; }
  .pa-cd-c span { font-size: 9.5px; letter-spacing: .14em; }
}

/* ─────────────────────── 6. GDJE SJEDIM — otkrivanje mjesta ─────────────────────── */
html.ps-anim #seat-result.pa-otkrij .result-greeting { animation: paGore .7s var(--pa-ease) .05s both; }
html.ps-anim #seat-result.pa-otkrij .result-name { animation: paIme 1s var(--pa-ease) .15s both; }
html.ps-anim #seat-result.pa-otkrij .result-table-box { animation: paIskociBlago .8s var(--pa-ease-back) .45s both; }
html.ps-anim #seat-result.pa-otkrij .result-table { display: inline-block; animation: paIskoci .9s var(--pa-ease-back2) .7s both; }
html.ps-anim #seat-result.pa-otkrij .result-table-name,
html.ps-anim #seat-result.pa-otkrij .result-detail { animation: paGore .7s var(--pa-ease) .95s both; }
html.ps-anim #seat-result.pa-otkrij #result-mapa { animation: paGore .9s var(--pa-ease) 1.1s both; }
html.ps-anim .gost-stol.moj::after {
  content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--akc-btn, var(--accent));
  animation: paStolPuls 2s ease-out 1.6s infinite both; pointer-events: none;
}
@keyframes paStolPuls { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.9; } }

/* ─────────────────────── 7. DODIR — dugmad odgovaraju ─────────────────────── */
html.ps-anim body[class*="tema-"] :is(.btn, .rsvp-submit, .tema-cta-btn, .wishlist-btn, .search-btn, .kolona-btn, .rsvp-opt) {
  transition: transform .18s var(--pa-ease), box-shadow .3s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}
html.ps-anim body[class*="tema-"] :is(.btn, .rsvp-submit, .tema-cta-btn, .wishlist-btn, .search-btn, .kolona-btn, .rsvp-opt):active { transform: scale(.97); }
html.ps-anim body[class*="tema-"] .rsvp-opt.selected .ro-ic svg { animation: paIskoci .5s var(--pa-ease-back2) both; }
/* glavno dugme: tanki odsjaj preko na hover (tamne, „luksuzne" teme) */
html.ps-anim body.tema-tamna .tema-cta-btn { position: relative; overflow: hidden; }
html.ps-anim body.tema-tamna .tema-cta-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg);
  transition: left .7s var(--pa-ease); pointer-events: none;
}
html.ps-anim body.tema-tamna .tema-cta-btn:hover::after { left: 130%; }

/* slavlje (platno preko ekrana, ne hvata klikove) */
.pa-slavlje { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9000; }

/* ─────────────────────── KEYFRAMES ─────────────────────── */
@keyframes paCrtaj { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes paCrtajNazad { from { stroke-dashoffset: -1; } to { stroke-dashoffset: 0; } }
@keyframes paCrtajTekst { from { stroke-dashoffset: 2600; } to { stroke-dashoffset: 0; } }
@keyframes paSredina { from { scale: 0 1; opacity: 0; } to { scale: 1 1; } }
@keyframes paPojavi { from { opacity: 0; } }
@keyframes paRazmak { from { opacity: 0; letter-spacing: .02em; } }
@keyframes paRazmakSiri { from { opacity: 0; letter-spacing: .9em; } }
@keyframes paIzroni { from { opacity: 0; translate: 0 44px; } }
@keyframes paIzroniDuboko { from { opacity: 0; translate: 0 240px; } to { opacity: 1; translate: 0 0; } }
@keyframes paPadni { from { opacity: 0; translate: 0 -60px; } }
@keyframes paPadniOdskok {
  0% { opacity: 0; translate: 0 -170px; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  55% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  72% { translate: 0 -18px; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  86% { translate: 0 0; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  93% { translate: 0 -5px; }
  100% { translate: 0 0; }
}
@keyframes paLijevo { from { opacity: 0; translate: -70px 0; } }
@keyframes paDesno { from { opacity: 0; translate: 70px 0; } }
@keyframes paIskoci { from { opacity: 0; scale: .2; } }
@keyframes paIskociBlago { from { opacity: 0; scale: .86; } }
@keyframes paIskociOkret { from { opacity: 0; scale: .1; rotate: -50deg; } }
@keyframes paPecat {
  0% { opacity: 0; scale: 2.6; }
  55% { opacity: 1; scale: .9; }
  74% { scale: 1.05; }
  100% { opacity: 1; scale: 1; }
}
@keyframes paTresak {
  0% { opacity: 0; scale: 1.8; rotate: 9deg; }
  55% { opacity: 1; scale: .95; rotate: -1.5deg; }
  76% { scale: 1.03; rotate: .6deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes paTalasUlaz { from { opacity: 0; scale: .72; } }
@keyframes paIzlazak { from { opacity: .15; translate: 0 190px; } }
@keyframes paGlitch {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: 1; translate: -5px 0; }
  22% { opacity: .3; translate: 4px 0; }
  32% { opacity: 1; translate: -2px 0; }
  44% { opacity: .15; translate: 0 0; }
  56% { opacity: 1; translate: 2px 0; }
  70%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes paTipkaj { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -2% -20% 0); } }
@keyframes paZamah { from { rotate: calc(var(--r, 0deg) * -1); } to { rotate: 0deg; } }
@keyframes paOtisakA { from { opacity: 0; translate: -30px -22px; } }
@keyframes paOtisakB { from { opacity: 0; translate: 30px 22px; } }
@keyframes paOkret { from { opacity: 0; rotate: -120deg; scale: .4; } }
@keyframes paSirenje { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes paSlijeganje { from { opacity: 0; translate: 0 -36px; rotate: -5deg; } }
@keyframes paList { from { opacity: 0; scale: 0; } }
@keyframes paTrzaj { 0%, 100% { translate: 0 0; } 20% { translate: 2px 3px; } 45% { translate: -2px -1px; } 70% { translate: 1px 1px; } }

@keyframes paTrepti { 0%, 100% { opacity: var(--o, .6); } 50% { opacity: calc(var(--o, .6) * .2); } }
@keyframes paPuls { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.07; opacity: .7; } }
@keyframes paIskra { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: .5; rotate: 30deg; } }
@keyframes paTok { from { stroke-dashoffset: 1.07; } to { stroke-dashoffset: 0; } }
@keyframes paVal { from { scale: 1; opacity: .75; } to { scale: 6; opacity: 0; } }
@keyframes paTalas { 0%, 100% { opacity: var(--o, .6); } 50% { opacity: calc(var(--o, .6) * .3); } }
@keyframes paOdsjaj { from { translate: 0 0; } to { translate: 7px 5px; } }
@keyframes paSjaj { 0%, 100% { opacity: 1; } 50% { opacity: .8; } }
@keyframes paSekunde { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes paZraka { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes paSvjetluca { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .55; scale: .86; } }
@keyframes paMijena { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes paDisanje { 0%, 100% { scale: 1; } 50% { scale: 1.018; } }
@keyframes paKlati { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
@keyframes paVrti { to { rotate: 360deg; } }
@keyframes paRiso { 0%, 90% { translate: 0 0; } 92% { translate: 3px -2px; } 94% { translate: -2px 1px; } 96% { translate: 1px 0; } 98%, 100% { translate: 0 0; } }
@keyframes paTraka { to { stroke-dashoffset: -32; } }
@keyframes paLebdi { from { translate: 0 0; } to { translate: 0 var(--a, -4px); } }
@keyframes paKruzi { 0%, 100% { translate: 0 0; } 25% { translate: 5px -3px; } 50% { translate: 2px 4px; } 75% { translate: -4px 1px; } }
@keyframes paNjisi { from { rotate: -1.4deg; } to { rotate: 1.4deg; } }
@keyframes paOdsjajPecat { 0%, 100% { opacity: .08; } 50% { opacity: .2; } }
@keyframes paAur1 { from { translate: 0 0; scale: 1; } to { translate: 9% 12%; scale: 1.18; } }
@keyframes paAur2 { from { translate: 0 0; scale: 1.1; } to { translate: -10% -8%; scale: .92; } }
@keyframes paAur3 { from { translate: 0 0; scale: 1; } to { translate: -12% 14%; scale: 1.15; } }

@keyframes paFoto { from { opacity: 0; clip-path: inset(10% 10% 10% 10%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes paMonogram { from { opacity: 0; scale: .55; filter: blur(6px); } to { opacity: 1; scale: 1; filter: blur(0); } }
@keyframes paIme {
  from { opacity: 0; translate: 0 .45em; clip-path: inset(0 -10% 100% -10%); filter: blur(5px); }
  to { opacity: 1; translate: 0 0; clip-path: inset(-25% -10% -25% -10%); filter: blur(0); }
}
@keyframes paAmp { from { opacity: 0; scale: .2; rotate: -25deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes paGore { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes paDolje { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@keyframes paIzDna { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes paPanel { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html.ps-anim * { animation: none !important; transition: none !important; }
}
/* Cormorant (Zen, Vermilion) ima stare brojke („1" liči na „I") — odbrojavanje u tankom grotesku teme */
body:is([data-style="zen"], [data-style="vermilion"]) .pa-cd-c b { font-family: var(--sans); font-weight: 300; letter-spacing: .01em; }