/* =========================================================
   Elenino krštenje · „Biserni blagoslov” · ogledna pozivnica
   Za novu klijenticu mijenjaj boje i slike u :root.
   ========================================================= */
:root {
  --papir-kuverta: url(slike/papir-kuverta.webp);
  --papir-kartica: url(slike/papir-kartica.webp);
  --uzorak-velicina: 260px;           /* manje = sitniji cvjetići */
  --ruza-duboka: #8F5E68;
  --zlato: #B49A68;
  --zlato-tamno: #8E7448;
  --tekst: #4A3D41;
  --tekst-blagi: #6E5C60;
  --font-rukopis: "Great Vibes", cursive;
  --font-tekst: "Cormorant Garamond", Georgia, serif;
  --font-oznake: "Bodoni Moda", "Didot", Georgia, serif;   /* sitna razmaknuta velika slova */
  /* trajanje otvaranja – mora odgovarati TRAJANJE_OTVARANJA u skripta.js */
  --t-preklop: .55s;  --d-preklop: 1s;
  --t-vrata: 1.25s;   --d-vrata: 1.35s;
  --t-kartica: 1.55s; --d-kartica: 1.5s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  font-family: var(--font-tekst); color: var(--tekst);
  background: #E0CBC5 var(--papir-kuverta) 0 0 / var(--uzorak-velicina);
}
body.zatvoreno { overflow: hidden; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ruza-duboka); outline-offset: 3px; }

/* ---------------- gumbi ---------------- */
.gumb-preskoci, .gumb-glazba {
  position: fixed; z-index: 30; top: max(14px, env(safe-area-inset-top));
  background: rgba(252,248,245,.72); border: 1px solid rgba(180,154,104,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(90,50,40,.18);
}
.gumb-preskoci { right: 16px; border-radius: 999px; padding: 7px 15px; font-size: 15px; letter-spacing: .03em; transition: opacity .4s ease; }
.otvoreno .gumb-preskoci { opacity: 0; pointer-events: none; }
.gumb-glazba { left: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--zlato-tamno); }
.gumb-glazba svg { width: 20px; height: 20px; }
.gumb-glazba[aria-pressed="false"]::after { content: ""; position: absolute; width: 24px; height: 1.5px; background: currentColor; transform: rotate(-45deg); }

/* ===================== SCENA I KUVERTA ===================== */
.scena { position: relative; height: 100svh; overflow: hidden; }
.kuverta {
  position: relative; z-index: 2; height: 100%; width: min(100%, 620px); margin: 0 auto;
  perspective: max(1300px, 260vw); perspective-origin: 50% 40%;
}
/* unutrašnjost kuverte – vidi se kad se otvori */
.scena::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 40%, rgba(255,255,255,0) 40%, rgba(90,50,40,.16) 100%),
    linear-gradient(180deg, rgba(90,50,40,.14), rgba(90,50,40,0) 22%);
}

/* --- bočni preklopi --- */
.vrata { position: absolute; inset: 0; transition: transform var(--d-vrata) cubic-bezier(.3,.55,.2,1) var(--t-vrata); }
.vrata-papir {
  position: absolute; inset: 0;
  background: #E3CFC9 var(--papir-kuverta) 0 0 / var(--uzorak-velicina);
}
.vrata-l { z-index: 2; transform-origin: 0 50%;
  filter: drop-shadow(1px 0 0 rgba(150,108,98,.55)) drop-shadow(3px 2px 3px rgba(90,50,40,.16)) drop-shadow(10px 8px 16px rgba(90,50,40,.12)); }
.vrata-l .vrata-papir { clip-path: polygon(0.00% 0.00%, 50.00% 0.00%, 50.17% 1.67%, 50.33% 3.33%, 50.50% 5.00%, 50.67% 6.67%, 50.83% 8.33%, 50.99% 10.00%, 51.15% 11.67%, 51.30% 13.33%, 51.45% 15.00%, 51.60% 16.67%, 51.74% 18.33%, 51.88% 20.00%, 52.01% 21.67%, 52.14% 23.33%, 52.26% 25.00%, 52.38% 26.67%, 52.49% 28.33%, 52.59% 30.00%, 52.68% 31.67%, 52.77% 33.33%, 52.85% 35.00%, 52.92% 36.67%, 52.99% 38.33%, 53.04% 40.00%, 53.09% 41.67%, 53.13% 43.33%, 53.16% 45.00%, 53.18% 46.67%, 53.20% 48.33%, 53.20% 50.00%, 53.20% 51.67%, 53.18% 53.33%, 53.16% 55.00%, 53.13% 56.67%, 53.09% 58.33%, 53.04% 60.00%, 52.99% 61.67%, 52.92% 63.33%, 52.85% 65.00%, 52.77% 66.67%, 52.68% 68.33%, 52.59% 70.00%, 52.49% 71.67%, 52.38% 73.33%, 52.26% 75.00%, 52.14% 76.67%, 52.01% 78.33%, 51.88% 80.00%, 51.74% 81.67%, 51.60% 83.33%, 51.45% 85.00%, 51.30% 86.67%, 51.15% 88.33%, 50.99% 90.00%, 50.83% 91.67%, 50.67% 93.33%, 50.50% 95.00%, 50.33% 96.67%, 50.17% 98.33%, 50.00% 100.00%, 0.00% 100.00%); }
.vrata-d { z-index: 3; transform-origin: 100% 50%;
  filter: drop-shadow(-1px 0 0 rgba(255,255,255,.75)) drop-shadow(-.5px 1.5px 1px rgba(110,70,60,.28)) drop-shadow(4px 6px 10px rgba(90,50,40,.14)); }
.vrata-d .vrata-papir { clip-path: polygon(100.00% 0.00%, 50.00% 0.00%, 49.83% 1.67%, 49.67% 3.33%, 49.50% 5.00%, 49.33% 6.67%, 49.17% 8.33%, 49.01% 10.00%, 48.85% 11.67%, 48.70% 13.33%, 48.55% 15.00%, 48.40% 16.67%, 48.26% 18.33%, 48.12% 20.00%, 47.99% 21.67%, 47.86% 23.33%, 47.74% 25.00%, 47.62% 26.67%, 47.51% 28.33%, 47.41% 30.00%, 47.32% 31.67%, 47.23% 33.33%, 47.15% 35.00%, 47.08% 36.67%, 47.01% 38.33%, 46.96% 40.00%, 46.91% 41.67%, 46.87% 43.33%, 46.84% 45.00%, 46.82% 46.67%, 46.80% 48.33%, 46.80% 50.00%, 46.80% 51.67%, 46.82% 53.33%, 46.84% 55.00%, 46.87% 56.67%, 46.91% 58.33%, 46.96% 60.00%, 47.01% 61.67%, 47.08% 63.33%, 47.15% 65.00%, 47.23% 66.67%, 47.32% 68.33%, 47.41% 70.00%, 47.51% 71.67%, 47.62% 73.33%, 47.74% 75.00%, 47.86% 76.67%, 47.99% 78.33%, 48.12% 80.00%, 48.26% 81.67%, 48.40% 83.33%, 48.55% 85.00%, 48.70% 86.67%, 48.85% 88.33%, 49.01% 90.00%, 49.17% 91.67%, 49.33% 93.33%, 49.50% 95.00%, 49.67% 96.67%, 49.83% 98.33%, 50.00% 100.00%, 100.00% 100.00%);
  background-position: calc(var(--uzorak-velicina) / -3) calc(var(--uzorak-velicina) / -2.4); }   /* drugi dio lista */

/* --- gornji preklop s pečatom --- */
.preklop {
  position: absolute; z-index: 4; top: 0; left: 0; width: 100%; aspect-ratio: 400 / 420;
  transform-origin: 50% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform var(--d-preklop) cubic-bezier(.45,0,.2,1) var(--t-preklop),
              opacity .35s linear calc(var(--t-preklop) + var(--d-preklop) - .35s);
}
.preklop-sjena { position: absolute; inset: 0;
  filter: drop-shadow(0 1.6px 0 rgba(150,108,98,.55)) drop-shadow(2px 4px 3px rgba(90,50,40,.18)) drop-shadow(8px 16px 20px rgba(90,50,40,.16)); }
.preklop-papir { position: absolute; inset: 0; clip-path: polygon(0.00% 0.00%, 100.00% 0.00%, 100.00% 58.18%, 99.67% 58.50%, 99.33% 58.80%, 99.00% 59.07%, 98.67% 59.32%, 98.33% 59.55%, 98.00% 59.77%, 97.67% 59.97%, 97.33% 60.15%, 97.00% 60.32%, 96.67% 60.48%, 96.33% 60.63%, 96.00% 60.76%, 95.67% 60.89%, 95.33% 61.00%, 95.00% 61.11%, 94.67% 61.20%, 94.33% 61.29%, 94.00% 61.37%, 93.67% 61.44%, 93.33% 61.50%, 93.00% 61.55%, 92.67% 61.59%, 92.33% 61.63%, 92.00% 61.66%, 91.67% 61.67%, 91.33% 61.69%, 91.00% 61.69%, 90.67% 61.69%, 90.33% 61.67%, 90.00% 61.66%, 89.67% 61.63%, 89.33% 61.59%, 89.00% 61.55%, 88.67% 61.50%, 88.33% 61.44%, 88.00% 61.37%, 87.67% 61.29%, 87.33% 61.20%, 87.00% 61.11%, 86.67% 61.00%, 86.33% 60.89%, 86.00% 60.76%, 85.67% 60.63%, 85.33% 60.48%, 85.00% 60.32%, 84.67% 60.15%, 84.33% 59.97%, 84.00% 59.77%, 83.67% 59.55%, 83.33% 59.32%, 83.00% 59.07%, 82.67% 58.80%, 82.33% 58.50%, 82.00% 58.18%, 81.67% 62.25%, 81.33% 63.13%, 81.00% 63.80%, 80.67% 64.35%, 80.33% 64.83%, 80.00% 65.25%, 79.67% 65.62%, 79.33% 65.96%, 79.00% 66.27%, 78.67% 66.55%, 78.33% 66.82%, 78.00% 67.06%, 77.67% 67.28%, 77.33% 67.49%, 77.00% 67.68%, 76.67% 67.86%, 76.33% 68.02%, 76.00% 68.18%, 75.67% 68.32%, 75.33% 68.45%, 75.00% 68.57%, 74.67% 68.68%, 74.33% 68.78%, 74.00% 68.87%, 73.67% 68.95%, 73.33% 69.02%, 73.00% 69.09%, 72.67% 69.14%, 72.33% 69.19%, 72.00% 69.23%, 71.67% 69.26%, 71.33% 69.29%, 71.00% 69.30%, 70.67% 69.31%, 70.33% 69.31%, 70.00% 69.30%, 69.67% 69.29%, 69.33% 69.26%, 69.00% 69.23%, 68.67% 69.19%, 68.33% 69.14%, 68.00% 69.09%, 67.67% 69.02%, 67.33% 68.95%, 67.00% 68.87%, 66.67% 68.78%, 66.33% 68.68%, 66.00% 68.57%, 65.67% 68.45%, 65.33% 68.32%, 65.00% 68.18%, 64.67% 68.02%, 64.33% 67.86%, 64.00% 67.68%, 63.67% 71.55%, 63.33% 72.52%, 63.00% 73.26%, 62.67% 73.88%, 62.33% 74.41%, 62.00% 74.89%, 61.67% 75.31%, 61.33% 75.70%, 61.00% 76.06%, 60.67% 76.39%, 60.33% 76.69%, 60.00% 76.98%, 59.67% 77.25%, 59.33% 77.49%, 59.00% 77.73%, 58.67% 77.95%, 58.33% 78.15%, 58.00% 78.35%, 57.67% 78.53%, 57.33% 78.70%, 57.00% 78.86%, 56.67% 79.01%, 56.33% 79.15%, 56.00% 79.29%, 55.67% 79.41%, 55.33% 79.53%, 55.00% 79.63%, 54.67% 79.73%, 54.33% 79.82%, 54.00% 79.91%, 53.67% 79.99%, 53.33% 80.06%, 53.00% 80.12%, 52.67% 80.17%, 52.33% 80.22%, 52.00% 80.26%, 51.67% 80.30%, 51.33% 80.33%, 51.00% 80.35%, 50.67% 80.37%, 50.33% 80.38%, 50.00% 80.38%, 49.67% 80.38%, 49.33% 80.37%, 49.00% 80.35%, 48.67% 80.33%, 48.33% 80.30%, 48.00% 80.26%, 47.67% 80.22%, 47.33% 80.17%, 47.00% 80.12%, 46.67% 80.06%, 46.33% 79.99%, 46.00% 79.91%, 45.67% 79.82%, 45.33% 79.73%, 45.00% 79.63%, 44.67% 79.53%, 44.33% 79.41%, 44.00% 79.29%, 43.67% 79.15%, 43.33% 79.01%, 43.00% 78.86%, 42.67% 78.70%, 42.33% 78.53%, 42.00% 78.35%, 41.67% 78.15%, 41.33% 77.95%, 41.00% 77.73%, 40.67% 77.49%, 40.33% 77.25%, 40.00% 76.98%, 39.67% 76.69%, 39.33% 76.39%, 39.00% 76.06%, 38.67% 75.70%, 38.33% 75.31%, 38.00% 74.89%, 37.67% 74.41%, 37.33% 73.88%, 37.00% 73.26%, 36.67% 72.52%, 36.33% 71.55%, 36.00% 67.68%, 35.67% 67.86%, 35.33% 68.02%, 35.00% 68.18%, 34.67% 68.32%, 34.33% 68.45%, 34.00% 68.57%, 33.67% 68.68%, 33.33% 68.78%, 33.00% 68.87%, 32.67% 68.95%, 32.33% 69.02%, 32.00% 69.09%, 31.67% 69.14%, 31.33% 69.19%, 31.00% 69.23%, 30.67% 69.26%, 30.33% 69.29%, 30.00% 69.30%, 29.67% 69.31%, 29.33% 69.31%, 29.00% 69.30%, 28.67% 69.29%, 28.33% 69.26%, 28.00% 69.23%, 27.67% 69.19%, 27.33% 69.14%, 27.00% 69.09%, 26.67% 69.02%, 26.33% 68.95%, 26.00% 68.87%, 25.67% 68.78%, 25.33% 68.68%, 25.00% 68.57%, 24.67% 68.45%, 24.33% 68.32%, 24.00% 68.18%, 23.67% 68.02%, 23.33% 67.86%, 23.00% 67.68%, 22.67% 67.49%, 22.33% 67.28%, 22.00% 67.06%, 21.67% 66.82%, 21.33% 66.55%, 21.00% 66.27%, 20.67% 65.96%, 20.33% 65.62%, 20.00% 65.25%, 19.67% 64.83%, 19.33% 64.35%, 19.00% 63.80%, 18.67% 63.13%, 18.33% 62.25%, 18.00% 58.18%, 17.67% 58.50%, 17.33% 58.80%, 17.00% 59.07%, 16.67% 59.32%, 16.33% 59.55%, 16.00% 59.77%, 15.67% 59.97%, 15.33% 60.15%, 15.00% 60.32%, 14.67% 60.48%, 14.33% 60.63%, 14.00% 60.76%, 13.67% 60.89%, 13.33% 61.00%, 13.00% 61.11%, 12.67% 61.20%, 12.33% 61.29%, 12.00% 61.37%, 11.67% 61.44%, 11.33% 61.50%, 11.00% 61.55%, 10.67% 61.59%, 10.33% 61.63%, 10.00% 61.66%, 9.67% 61.67%, 9.33% 61.69%, 9.00% 61.69%, 8.67% 61.69%, 8.33% 61.67%, 8.00% 61.66%, 7.67% 61.63%, 7.33% 61.59%, 7.00% 61.55%, 6.67% 61.50%, 6.33% 61.44%, 6.00% 61.37%, 5.67% 61.29%, 5.33% 61.20%, 5.00% 61.11%, 4.67% 61.00%, 4.33% 60.89%, 4.00% 60.76%, 3.67% 60.63%, 3.33% 60.48%, 3.00% 60.32%, 2.67% 60.15%, 2.33% 59.97%, 2.00% 59.77%, 1.67% 59.55%, 1.33% 59.32%, 1.00% 59.07%, 0.67% 58.80%, 0.33% 58.50%, 0.00% 58.18%);
  background:
    linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%, rgba(90,50,40,.06)),
    #E6D3CD var(--papir-kuverta) calc(var(--uzorak-velicina) / -5) 0 / var(--uzorak-velicina);
}
.preklop-tekst { position: absolute; left: 0; right: 0; top: max(15%, calc(env(safe-area-inset-top) + 46px)); text-align: center; }
.moto { margin: 0; font-style: italic; font-size: clamp(14px, 3.9vw, 19px); line-height: 1.35; color: var(--tekst-blagi); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.naslov-kuverte { margin: .1em 0 0; font-family: var(--font-rukopis); font-size: clamp(34px, 10.5vw, 56px); line-height: 1.1; color: var(--ruza-duboka); text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(90,50,40,.12); }

.pecat {
  position: absolute; z-index: 2; left: 50%; top: 69.05%; width: 30%; aspect-ratio: 1;
  padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer;
  transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent;
}
.pecat img { width: 100%; height: 100%; display: block;
  filter: drop-shadow(1.5px 3px 2px rgba(90,45,35,.32)) drop-shadow(5px 10px 12px rgba(90,45,35,.2)); }
.odsjaj { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(slike/pecat-ton.webp) center / 100% 100% no-repeat; mask: url(slike/pecat-ton.webp) center / 100% 100% no-repeat;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
  animation: odsjaj 1.8s ease-in-out 1.3s 1 both; }
@keyframes odsjaj { to { background-position: -30% 0; } }
.kicanka {
  position: absolute; z-index: 1; left: 50%; top: 69.05%; width: 13%; height: auto;
  transform: translateX(-50%); transform-origin: 50% 0; pointer-events: none;
  filter: drop-shadow(4px 7px 4px rgba(90,45,35,.22)) drop-shadow(10px 16px 14px rgba(90,45,35,.12));
}

.uputa {
  position: absolute; z-index: 5; left: 50%; bottom: max(5svh, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 16px; border-radius: 999px;
  text-align: center; font-size: clamp(15px, 4vw, 17px); letter-spacing: .03em; color: var(--tekst);
  background: rgba(252,248,245,.66); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: opacity .4s ease;
}

/* ===================== KARTICA ===================== */
.sadrzaj { position: relative; z-index: 1; margin-top: calc(-100svh + 13svh); padding: 0 0 24px; }
.kartica-omot {
  container-type: inline-size; position: relative;
  width: min(76vw, 480px); margin: 0 auto;
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,.85)) drop-shadow(0 1.5px 0 rgba(160,128,118,.5))
          drop-shadow(2px 4px 4px rgba(90,50,40,.14)) drop-shadow(8px 18px 26px rgba(90,50,40,.18));
  transform: translateY(5svh) scale(.965); opacity: 0;
  transition: transform var(--d-kartica) cubic-bezier(.25,.7,.25,1) var(--t-kartica), opacity .3s linear var(--t-vrata);
}
.kartica {
  position: relative; min-height: 70svh; padding: 0 9cqw 12cqw;
  border-radius: 0 0 3cqw 3cqw;
  background:
    linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,0) 35%, rgba(255,246,242,.25) 60%, rgba(255,255,255,0) 80%),
    #F8F3EC var(--papir-kartica) 0 0 / 300px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M0,30 L0,17 Q0,12 5,12 L12,12 A38,12 0 0 1 88,12 L95,12 Q100,12 100,17 L100,30 Z'/%3E%3C/svg%3E") top center / 100% auto no-repeat,
                linear-gradient(#000 0 0) 0 29.8cqw / 100% calc(100% - 29.8cqw) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30'%3E%3Cpath d='M0,30 L0,17 Q0,12 5,12 L12,12 A38,12 0 0 1 88,12 L95,12 Q100,12 100,17 L100,30 Z'/%3E%3C/svg%3E") top center / 100% auto no-repeat,
                linear-gradient(#000 0 0) 0 29.8cqw / 100% calc(100% - 29.8cqw) no-repeat;
}
.kartica-luk { position: absolute; top: 0; left: 0; width: 100%; height: 30cqw; overflow: visible; }
.kartica::after {                       /* zlatna linija niz stranice i dno */
  content: ""; position: absolute; pointer-events: none;
  top: 30cqw; left: 4cqw; right: 4cqw; bottom: 4cqw;
  border: 1px solid var(--zlato); border-top: 0; border-radius: 0 0 2cqw 2cqw; opacity: .85;
}
.kartica-biser { position: absolute; left: 50%; top: 4cqw; width: 4.4cqw; transform: translate(-50%, -50%);
  filter: drop-shadow(.5px 1px .8px rgba(90,50,40,.3)); }

.naslovnica { padding-top: 21cqw; text-align: center; }
.poziv { margin: 0; font-family: var(--font-oznake); font-size: max(11.5px, 3.4cqw); line-height: 1.45; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-blagi); }
.ime:focus { outline: none; }
.ime { margin: .02em 0 0; font-family: var(--font-rukopis); font-weight: 400; font-size: 27cqw; line-height: 1.08; color: var(--ruza-duboka);
  text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 -.5px 0 rgba(90,50,40,.18); }
.razdjelnik { display: block; width: 46cqw; margin: 2cqw auto 4cqw; }
.datum { margin: 0; font-style: italic; font-size: max(19px, 6.6cqw); font-weight: 500; letter-spacing: .02em; }
.grad { margin: .5em 0 0; font-family: var(--font-oznake); font-size: max(11.5px, 3.5cqw); letter-spacing: .38em; text-transform: uppercase; color: var(--zlato-tamno); }


.podnozje { text-align: center; padding: 26px 16px max(28px, env(safe-area-inset-bottom)); font-size: 14px; letter-spacing: .04em; color: var(--tekst); }
.podnozje p { margin: 0 0 4px; }
.podnozje p:first-child { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(252,248,245,.66); }

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

/* ---------- širi zasloni: kuverta kao predmet na stolu ---------- */
@media (min-width: 700px) {
  body { background: #E9DCD6 radial-gradient(90% 70% at 30% 20%, #F6EEEA 0%, rgba(246,238,234,0) 70%); }
  .scena { padding: 24px 0; }
  .scena::before { display: none; }
  .kuverta { width: min(560px, 92vw); border-radius: 10px; overflow: hidden; }
  .scena::after {                      /* stražnja strana kuverte – ispod kartice */
    content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: min(560px, 92vw);
    transform: translateX(-50%); border-radius: 10px;
    background: radial-gradient(120% 70% at 50% 40%, rgba(255,255,255,0) 40%, rgba(90,50,40,.16) 100%),
                linear-gradient(180deg, rgba(90,50,40,.14), rgba(90,50,40,0) 22%),
                #E0CBC5 var(--papir-kuverta) 0 0 / var(--uzorak-velicina);
    box-shadow: 0 1.5px 0 rgba(150,108,98,.5), 0 30px 60px -24px rgba(90,50,40,.45); }
  .sadrzaj { margin-top: calc(-100svh + 24px + 11svh); }
  .kartica-omot { width: min(420px, 70vw); }
}

/* ===================== SADRŽAJ KARTICE ===================== */
.vidljivo-samo-citacu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.odjeljak { position: relative; text-align: center; margin: 0 auto; padding: 13cqw 0 0; max-width: 34rem; }
.naslov-odjeljka {
  margin: 0; font-family: var(--font-rukopis); font-weight: 400; font-size: max(40px, 13cqw); line-height: 1.1;
  color: var(--ruza-duboka); text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.podnaslov { margin: .3em 0 0; font-style: italic; font-size: max(17px, 5cqw); color: var(--tekst-blagi); }
.uloga, .vrijeme, .demo-oznaka, .napomena, dt, .polje > span, legend {
  font-family: var(--font-oznake); text-transform: uppercase; letter-spacing: .2em; font-size: max(11px, 3cqw); color: var(--zlato-tamno);
}
.napomena { margin: 6cqw auto 0; max-width: 26rem; text-transform: none; letter-spacing: .02em; font-family: var(--font-tekst); font-style: italic; font-size: max(14.5px, 3.9cqw); line-height: 1.45; color: var(--tekst-blagi); }

/* grančice uz rub */
.grancica { display: block; height: auto; pointer-events: none; }
.grancica-vrh { width: 78%; margin: 9cqw auto -2cqw; }
.razmak-grancica { position: relative; height: 22cqw; margin: 8cqw -9cqw 0; overflow: hidden; }
.grancica-lijevo { position: absolute; left: -6%; top: 0; width: 72%; transform: rotate(-8deg); }

/* poruka i golubica */
.golubica { position: relative; width: 44cqw; margin: 0 auto 2cqw; aspect-ratio: 1; }
.golubica img { position: absolute; inset: 0; width: 100%; height: 100%; }
.golubica-krilo { transform-origin: 48% 62%; }
.poruka-tekst { margin: 0 auto; font-style: italic; font-size: max(20px, 6.2cqw); line-height: 1.45; color: var(--tekst); }
.potpis { margin: .3em 0 0; font-family: var(--font-rukopis); font-size: max(34px, 10cqw); color: var(--ruza-duboka); line-height: 1.2; }

/* citat */
.citat { margin: 0 auto; }
.citat blockquote { margin: 0; position: relative; padding: 0 2cqw; }
.citat blockquote::before { content: "“"; display: block; font-family: var(--font-oznake); font-size: max(56px, 16cqw); line-height: .6; height: .35em; color: var(--zlato); opacity: .7; }
.citat p { margin: 0; font-family: var(--font-tekst); font-style: italic; font-weight: 500; font-size: max(23px, 7.4cqw); line-height: 1.35; color: var(--ruza-duboka); }
.crta-citat { display: block; width: 50cqw; height: 6px; margin: 5cqw auto 0; overflow: visible; }
.crta-citat path { fill: none; stroke: url(#zlato); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* obitelj */
.kriz { display: block; width: 13cqw; height: auto; margin: 0 auto 2cqw; }
.obitelj-redovi { margin-top: 3cqw; display: grid; gap: 5cqw; }
.obitelj-redovi p { margin: 0; display: grid; gap: .25em; }
.osoba { font-size: max(24px, 7.6cqw); font-weight: 500; letter-spacing: .01em; color: var(--tekst); }

/* raspored – vremenska crta */
.vremenska-crta { list-style: none; margin: 9cqw 0 0; padding: 0; position: relative; display: grid; gap: 12cqw; }
.vremenska-crta li { position: relative; }
.vremenska-crta li:not(:last-child)::after {   /* zlatna linija u razmaku do sljedeće točke */
  content: ""; position: absolute; left: 50%; top: calc(100% + 2cqw); height: 6.5cqw; width: 1px; margin-left: -.5px;
  background: linear-gradient(var(--zlato), rgba(180,154,104,.5)); transform-origin: 50% 0;
}
.vremenska-crta li > p, .vremenska-crta li > h3 { margin-left: auto; margin-right: auto; }
.tocka { position: absolute; left: 50%; top: -3.3cqw; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #EFE3DC 50%, #C9B3AE); box-shadow: 0 0 0 1px rgba(180,154,104,.7); }
.vremenska-crta li:first-child .tocka { display: none; }
.ikona { display: block; height: auto; margin: 0 auto 2cqw; }
.ikona-masna { width: 22cqw; }
.ikona-grancica { width: 40cqw; }
.vrijeme { margin: 0 auto; font-size: max(13px, 3.6cqw); letter-spacing: .3em; }
.vremenska-crta h3 { margin: .15em auto 0; font-family: var(--font-rukopis); font-weight: 400; font-size: max(32px, 9.5cqw); line-height: 1.15; color: var(--ruza-duboka); }
.vremenska-crta li p:last-child { margin: .2em auto 0; font-style: italic; font-size: max(17px, 5cqw); color: var(--tekst-blagi); }
.svijeca { position: relative; width: 10cqw; aspect-ratio: 139 / 520; margin: 0 auto 2cqw; background: none !important; box-shadow: none !important; }
.svijeca img { position: absolute; inset: 0; width: 100%; height: 100%; }
.svijeca-plamen { transform-origin: 50.2% 14.6%; }

/* lokacije */
.lokacija h3 { margin: .25em 0 0; font-weight: 500; font-size: max(22px, 6.8cqw); line-height: 1.2; }
.lokacija .uloga { margin: 6cqw 0 0; }
.mjesto { margin: .2em 0 0; font-style: italic; font-size: max(17px, 5cqw); color: var(--tekst-blagi); }
.mali-razdjelnik { display: block; width: 18cqw; margin: 6cqw auto 0; }

.gumb {
  display: inline-block; margin-top: 4cqw; padding: 11px 24px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-oznake); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: linear-gradient(180deg, #9C6B75, var(--ruza-duboka)); border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px rgba(90,40,50,.6);
}
.gumb:hover { filter: brightness(1.06); }
.poveznica-mala { display: inline-block; margin-top: 10px; padding: 4px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-tekst); font-style: italic; font-size: 16px; color: var(--ruza-duboka); text-decoration: underline; text-underline-offset: 3px; }

/* odbrojavanje */
.brojke { display: flex; justify-content: center; gap: 3cqw; margin: 6cqw 0 0; }
.brojke p { margin: 0; min-width: 16cqw; display: grid; justify-items: center; padding: 3cqw 0 2.4cqw; border-radius: 999px 999px 10px 10px;
  border: 1px solid rgba(180,154,104,.55); background: rgba(255,255,255,.5); }
.brojke span { font-size: max(24px, 7.5cqw); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ruza-duboka); }
.brojke small { margin-top: 4px; font-family: var(--font-oznake); font-size: max(9px, 2.4cqw); letter-spacing: .12em; text-transform: uppercase; color: var(--zlato-tamno); }

/* informacije */
.informacije dl { margin: 5cqw 0 0; display: grid; gap: 5cqw; }
.informacije dt { margin: 0; }
.informacije dd { margin: .3em 0 0; font-size: max(18px, 5.4cqw); line-height: 1.45; }

/* potvrda dolaska */
.demo-oznaka { display: inline-block; margin: 4cqw 0 0; padding: 5px 12px; border: 1px dashed rgba(143,94,104,.6); border-radius: 999px; font-size: max(9.5px, 2.6cqw); letter-spacing: .12em; color: var(--ruza-duboka); }
#obrazac { margin-top: 5cqw; text-align: left; display: grid; gap: 4cqw; }
.polje { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; }
.polje > span em { text-transform: none; letter-spacing: .02em; font-family: var(--font-tekst); }
.polje input[type=text], .polje input[type=number], .polje textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--tekst); padding: 10px 12px;
  border: 1px solid rgba(180,154,104,.6); border-radius: 10px; background: rgba(255,255,255,.7);
}
.polje input:focus, .polje textarea:focus { outline: 2px solid rgba(143,94,104,.5); outline-offset: 1px; }
.izbor legend { padding: 0; margin-bottom: 6px; }
.izbor label { display: flex; align-items: center; gap: 10px; font-size: 18px; padding: 4px 0; cursor: pointer; }
.izbor input { width: 20px; height: 20px; accent-color: var(--ruza-duboka); }
.brojevi { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.brojevi[hidden] { display: none; }
.greska { margin: 0; min-height: 1em; color: #9B3C4A; font-size: 16px; }
#obrazac .gumb { justify-self: center; margin-top: 0; }
.hvala-potvrda { margin-top: 6cqw; }
.hvala-naslov { margin: 0; font-family: var(--font-rukopis); font-size: max(44px, 13cqw); color: var(--ruza-duboka); line-height: 1.1; }
#hvala-tekst { margin: .3em 0 0; font-size: 19px; line-height: 1.45; }

/* završetak */
.zavrsetak { padding-top: 15cqw; }
.masna { display: block; width: 30cqw; height: auto; margin: 0 auto 3cqw; transform-origin: 50% 20%; }
.zahvala { margin: 0; font-style: italic; font-size: max(21px, 6.6cqw); line-height: 1.45; }
.s-ljubavlju { margin: 6cqw 0 0; font-family: var(--font-oznake); text-transform: uppercase; letter-spacing: .25em; font-size: max(11px, 3cqw); color: var(--zlato-tamno); }
.potpis-zavrsni { margin: .1em 0 0; font-family: var(--font-rukopis); font-size: max(40px, 12cqw); line-height: 1.2; color: var(--ruza-duboka); }

/* ===================== ANIMACIJE PRI LISTANJU =====================
   Tekst je uvijek odmah vidljiv – animiraju se samo ukrasi, jednom. */
.anim .grancica-vrh, .anim .grancica-lijevo { clip-path: inset(0 100% 0 0); }
.anim .grancica-omot.vidljivo .grancica-vrh, .anim .razmak-grancica.vidljivo .grancica-lijevo { clip-path: inset(0 0 0 0); transition: clip-path 1.4s cubic-bezier(.3,.6,.2,1); }

/* golubica: nekoliko nježnih zamaha, zatim odleti s lista (skripta.js – letiGolubica) */
.golubica.odletjela { visibility: hidden; }
.golubica-let { position: fixed; z-index: 25; pointer-events: none; will-change: transform, opacity; }
.golubica-let img { position: absolute; inset: 0; width: 100%; height: 100%; }
.golubica-let .golubica-krilo { animation: zamah .42s ease-in-out infinite; }
.golubica-let.polako .golubica-krilo { animation-duration: .6s; }
@keyframes zamah { 0%,100% { transform: none; } 50% { transform: scaleY(.66) skewX(5deg); } }

.anim .crta-citat path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .crta-citat.vidljivo path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease .2s; }

.anim .kriz { opacity: 0; transform: translateY(6px); }
.anim .kriz.vidljivo { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s ease; }

.anim .vremenska-crta li::after { transform: scaleY(0); }
.anim .vremenska-crta.vidljivo li::after { transform: scaleY(1); transition: transform .7s ease-in-out; }
.anim .vremenska-crta.vidljivo li:nth-child(1)::after { transition-delay: .5s; }
.anim .vremenska-crta.vidljivo li:nth-child(2)::after { transition-delay: 1.4s; }
.anim .vremenska-crta .tocka, .anim .vremenska-crta .ikona, .anim .vremenska-crta .svijeca { opacity: 0; transform: scale(.85); }
.anim .vremenska-crta.vidljivo .tocka, .anim .vremenska-crta.vidljivo .ikona, .anim .vremenska-crta.vidljivo .svijeca { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.anim .vremenska-crta.vidljivo li:nth-child(1) > * { transition-delay: .1s; }
.anim .vremenska-crta.vidljivo li:nth-child(2) > * { transition-delay: .9s; }
.anim .vremenska-crta.vidljivo li:nth-child(3) > * { transition-delay: 1.8s; }
.anim .svijeca.titra .svijeca-plamen { animation: titraj 1.1s ease-in-out 4; }
@keyframes titraj {
  0%,100% { transform: none; } 25% { transform: scale(.96, 1.05) skewX(-2deg); }
  50% { transform: scale(1.03, .96); } 75% { transform: scale(.98, 1.03) skewX(1.5deg); }
}

.anim .lokacija .gumb { opacity: 0; transform: translateY(10px); }
.anim .lokacija.vidljivo .gumb { opacity: 1; transform: none; transition: opacity .7s ease .15s, transform .7s ease .15s; }

.anim .brojke.vidljivo p { animation: izron .7s ease both; }
.anim .brojke.vidljivo p:nth-child(2) { animation-delay: .1s; } .anim .brojke.vidljivo p:nth-child(3) { animation-delay: .2s; } .anim .brojke.vidljivo p:nth-child(4) { animation-delay: .3s; }
@keyframes izron { from { transform: translateY(8px); } to { transform: none; } }

.anim .masna.vidljivo { animation: masna 1.6s ease-in-out both; }
@keyframes masna { 0%,100% { transform: none; } 30% { transform: rotate(-4deg) scale(1.02); } 65% { transform: rotate(2.5deg); } }

@media (prefers-reduced-motion: reduce) {
  .anim * { animation: none !important; transition: none !important; }
  .anim .grancica-vrh, .anim .grancica-lijevo { clip-path: none; }
  .anim .kriz, .anim .lokacija .gumb, .anim .vremenska-crta .tocka, .anim .vremenska-crta .ikona, .anim .vremenska-crta .svijeca { opacity: 1; transform: none; }
  .anim .vremenska-crta li::after { transform: none; }
  .anim .crta-citat path { stroke-dashoffset: 0; }
}

/* ===================== OTVARANJE ===================== */
.otvara .kicanka { animation: njihanje .95s ease-in-out both; }
@keyframes njihanje {
  0% { transform: translateX(-50%) rotate(0); }
  22% { transform: translateX(-50%) rotate(5deg); }
  48% { transform: translateX(-50%) rotate(-3.5deg); }
  74% { transform: translateX(-50%) rotate(1.5deg); }
  100% { transform: translateX(-50%) rotate(0); }
}
.otvara .preklop { transform: rotateX(100deg); opacity: 0; pointer-events: none; }
.otvara .vrata-l { transform: rotateY(78deg); }
.otvara .vrata-d { transform: rotateY(-78deg); }
.otvara .kartica-omot { transform: none; opacity: 1; }
.otvara .uputa { opacity: 0; }

/* preskakanje i vraćanje – bez animacije */
.bez-animacije *, .bez-animacije *::before, .bez-animacije *::after {
  transition-duration: 1ms !important; transition-delay: 0s !important;
  animation-duration: 1ms !important; animation-delay: 0s !important;
}

/* ===================== SMANJENO KRETANJE ===================== */
@media (prefers-reduced-motion: reduce) {
  .odsjaj { animation: none; opacity: 0; }
  .preklop, .vrata, .kartica-omot { transition-duration: 1ms; transition-delay: 0s; }
  .otvara .kicanka { animation: none; }
}

.podnozje a { color: var(--ruza-duboka); }
#glazba-zasluge { font-size: 13px; line-height: 1.5; color: var(--tekst-blagi); }