/* ═══ ПЛИК СО ВОСОЧЕН ПЕЧАТ — влезна анимација за е-покани ═══
   Употреба во покана:
     <link rel="stylesheet" href="/plik.css">
     <div id="plik" data-mono="Е&amp;Д" data-kick="Свадбена покана" data-names="Елена и Дамјан"></div>
     <script src="/plik.js" defer></script>
   Тема се менува преку CSS променливи (по желба во самата покана):
     --plik-bg, --plik-env, --plik-env2, --plik-paper, --plik-ink, --plik-accent, --plik-seal
*/
#plik{
  --plik-bg:#efe9dc; --plik-env:#e6dcc6; --plik-env2:#d9cdb2; --plik-paper:#fffdf7;
  --plik-ink:#454a34; --plik-accent:#b49a5a; --plik-seal:#a8332a;
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 10%,rgba(255,255,255,.16),transparent 62%),var(--plik-bg);
  cursor:pointer;transition:opacity .9s ease,visibility .9s;
  font-family:"Playfair Display",Georgia,serif;color:var(--plik-ink);
  -webkit-tap-highlight-color:transparent;
}
/* сјајот на позадината се изведува од темата — не ги пере темните покани */
@supports (background:color-mix(in srgb,red 50%,white)){
  #plik{background:radial-gradient(120% 90% at 50% 8%,
    color-mix(in srgb,var(--plik-bg) 84%,#fff) 0%,var(--plik-bg) 64%)}
}
#plik.gone{opacity:0;visibility:hidden;pointer-events:none}
#plik .pk-wrap{width:100%;padding:1.5rem;text-align:center}
#plik .pk-kick{
  font-size:.68rem;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;
  color:var(--plik-accent);margin-bottom:1.4rem;opacity:0;animation:pkIn .9s ease .2s forwards;
}
#plik .pk-hint{
  margin-top:1.6rem;font-size:.66rem;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  color:var(--plik-accent);opacity:0;animation:pkIn .9s ease 1.1s forwards,pkPulse 2.4s ease-in-out 2s infinite;
}
#plik.opening .pk-hint,#plik.opening .pk-kick{opacity:0;animation:none;transition:opacity .4s}
@keyframes pkIn{to{opacity:1}}
@keyframes pkPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── плик ── */
#plik .env{
  position:relative;width:min(360px,84vw);aspect-ratio:1.48/1;margin:0 auto;
  perspective:1400px;opacity:0;animation:pkRise 1s cubic-bezier(.22,.61,.36,1) .35s forwards;
}
@keyframes pkRise{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
#plik.opening .env{animation:none;opacity:1}

#plik .env-back{
  position:absolute;inset:0;border-radius:7px;background:var(--plik-env);
  box-shadow:0 30px 60px -28px rgba(60,55,40,.55),inset 0 0 0 1px rgba(255,255,255,.35);
}
/* писмото што излегува */
#plik .letter{
  position:absolute;left:7%;right:7%;bottom:9%;z-index:2;
  background:var(--plik-paper);border-radius:4px;padding:1.3rem .9rem 1.5rem;
  box-shadow:0 8px 22px -12px rgba(60,55,40,.45);
  transform:translateY(4%) scale(.97);transition:transform 1.15s cubic-bezier(.22,.61,.36,1);
}
#plik.opening .letter{transform:translateY(-86%) scale(1.05)}
#plik .letter .l-orn{color:var(--plik-accent);font-size:.7rem;letter-spacing:.3em}
#plik .letter .l-nm{
  font-family:"Marck Script","Playfair Display",cursive;font-size:1.55rem;line-height:1.2;
  color:var(--plik-ink);margin:.35rem 0 .2rem;
}
#plik .letter .l-sub{font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--plik-accent)}

/* џеб (предна страна) */
#plik .env-front{
  position:absolute;inset:0;z-index:4;border-radius:7px;
  background:linear-gradient(168deg,var(--plik-env) 0%,var(--plik-env2) 100%);
  clip-path:polygon(0 100%,0 1%,50% 63%,100% 1%,100% 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
#plik .env-front::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
}
/* капак */
#plik .env-flap{
  position:absolute;left:0;right:0;top:0;height:64%;z-index:5;transform-origin:top center;
  background:linear-gradient(180deg,var(--plik-env2) 0%,var(--plik-env) 100%);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform 1s cubic-bezier(.5,0,.35,1);backface-visibility:hidden;
  filter:drop-shadow(0 3px 5px rgba(60,55,40,.22));
}
#plik.opening .env-flap{transform:rotateX(-174deg)}

/* ── восочен печат ── */
#plik .seal{
  position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:clamp(82px,23vw,100px);aspect-ratio:1;z-index:7;border:none;background:none;padding:0;cursor:pointer;
  animation:sealIn .8s cubic-bezier(.34,1.5,.5,1) .9s both;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.42));
}
@keyframes sealIn{from{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-25deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#plik .seal:active{transform:translate(-50%,-50%) scale(.94)}
#plik .seal .half{
  position:absolute;inset:0;
  background:radial-gradient(circle at 36% 30%,#d0483c 0%,var(--plik-seal) 52%,#6f1c15 100%);
  border-radius:47% 53% 50% 50%/52% 48% 52% 48%;
  box-shadow:inset 0 2px 7px rgba(255,255,255,.28),inset 0 -3px 8px rgba(0,0,0,.3);
  transition:transform 1.05s cubic-bezier(.4,0,.25,1),opacity .95s ease;
}
#plik .seal .half.l{clip-path:polygon(0 0,51% 0,49% 100%,0 100%)}
#plik .seal .half.r{clip-path:polygon(51% 0,100% 0,100% 100%,49% 100%)}
/* восокот ги изведува сите нијанси од --plik-seal (златен, розе, неонски...) */
@supports (background:color-mix(in srgb,red 50%,white)){
  #plik .seal .half{
    background:radial-gradient(circle at 36% 30%,
      color-mix(in srgb,var(--plik-seal) 70%,#fff) 0%,
      var(--plik-seal) 52%,
      color-mix(in srgb,var(--plik-seal) 68%,#000) 100%);
  }
}
#plik.opening .seal .half.l{transform:translateX(-46px) translateY(6px) rotate(-22deg);opacity:0}
#plik.opening .seal .half.r{transform:translateX(46px) translateY(6px) rotate(22deg);opacity:0}
#plik .seal .mono{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;
  font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.4rem,4.6vw,1.75rem);
  color:rgba(255,226,214,.95);text-shadow:0 1px 2px rgba(90,20,15,.7);letter-spacing:.02em;
  transition:opacity .45s ease;pointer-events:none;
}
#plik.opening .seal .mono{opacity:0}
#plik .seal::after{ /* тенок восочен раб */
  content:"";position:absolute;inset:7%;border-radius:50%;
  border:1px dashed rgba(255,220,210,.35);pointer-events:none;transition:opacity .4s;
}
#plik.opening .seal::after{opacity:0}

@media (prefers-reduced-motion:reduce){
  #plik .env,#plik .seal,#plik .pk-kick,#plik .pk-hint{animation:none;opacity:1}
  #plik .letter,#plik .env-flap,#plik .seal .half{transition:none}
}

/* ═══════════ ВИДОВИ ВЛЕЗ (data-style) ═══════════
   klasik  · хоризонтален плик, капакот се крева, писмото излегува (стандарден)
   dveri   · картичка со две крилца што се отвораат настрана
   lenta   · картичка врзана со сатенска лента што се одврзува
   kutija  · кутија со капак што се крева нагоре
*/
#plik .door,#plik .ribbon,#plik .lid{display:none}

/* ── ДВЕРИ ── */
#plik.st-dveri .env{aspect-ratio:1/1.28}
#plik.st-dveri .env-front,#plik.st-dveri .env-flap{display:none}
#plik.st-dveri .env-back{background:linear-gradient(170deg,var(--plik-env2),var(--plik-env))}
#plik.st-dveri .letter{position:absolute;inset:8%;bottom:8%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;transform:scale(.98);transition:transform 1s cubic-bezier(.22,.61,.36,1) .25s}
#plik.st-dveri.opening .letter{transform:scale(1.05)}
#plik.st-dveri .door{display:block;position:absolute;top:0;bottom:0;width:50.4%;z-index:5;
  background:linear-gradient(160deg,var(--plik-env) 0%,var(--plik-env2) 100%);
  transition:transform 1.05s cubic-bezier(.5,0,.3,1);backface-visibility:hidden}
#plik.st-dveri .door.l{left:0;transform-origin:left center;border-radius:7px 2px 2px 7px;
  box-shadow:inset -8px 0 16px -10px rgba(60,55,40,.45)}
#plik.st-dveri .door.r{right:0;transform-origin:right center;border-radius:2px 7px 7px 2px;
  box-shadow:inset 8px 0 16px -10px rgba(60,55,40,.45)}
#plik.st-dveri .door::after{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.3);border-radius:4px}
#plik.st-dveri.opening .door.l{transform:rotateY(-108deg)}
#plik.st-dveri.opening .door.r{transform:rotateY(108deg)}
#plik.st-dveri .seal{top:50%}

/* ── ЛЕНТА ── */
#plik.st-lenta .env{aspect-ratio:1/1.26}
#plik.st-lenta .env-front,#plik.st-lenta .env-flap{display:none}
#plik.st-lenta .env-back{background:var(--plik-paper);box-shadow:0 30px 60px -28px rgba(60,55,40,.5),inset 0 0 0 1px rgba(180,154,90,.25)}
#plik.st-lenta .env-back::after{content:"";position:absolute;inset:10px;border:1px solid var(--plik-accent);opacity:.35;border-radius:4px}
#plik.st-lenta .letter{position:absolute;inset:12%;bottom:12%;background:none;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:scale(.98);transition:transform 1s cubic-bezier(.22,.61,.36,1) .3s}
#plik.st-lenta.opening .letter{transform:scale(1.05)}
#plik.st-lenta .ribbon{display:block;position:absolute;left:-2%;right:-2%;top:41%;height:17%;z-index:5;
  background:linear-gradient(180deg,color-mix(in srgb,var(--plik-seal) 72%,#fff) 0%,var(--plik-seal) 45%,color-mix(in srgb,var(--plik-seal) 72%,#000) 100%);
  box-shadow:0 5px 14px -6px rgba(0,0,0,.4);
  transition:transform 1.1s cubic-bezier(.5,0,.3,1),opacity .9s ease}
#plik.st-lenta .ribbon::before,#plik.st-lenta .ribbon::after{content:"";position:absolute;top:0;bottom:0;width:8px;
  background:rgba(0,0,0,.16)}
#plik.st-lenta .ribbon::before{left:16%}
#plik.st-lenta .ribbon::after{right:16%}
#plik.st-lenta.opening .ribbon{transform:translateX(-125%) rotate(-7deg);opacity:0}
#plik.st-lenta .seal{top:49.5%}

/* ── КУТИЈА ── */
#plik.st-kutija .env{aspect-ratio:1.16/1}
#plik.st-kutija .env-front,#plik.st-kutija .env-flap{display:none}
#plik.st-kutija .env-back{top:27%;border-radius:0 0 9px 9px;
  background:linear-gradient(172deg,var(--plik-env) 0%,var(--plik-env2) 100%);
  box-shadow:inset 0 16px 28px -20px rgba(0,0,0,.65),0 26px 50px -26px rgba(0,0,0,.55)}
#plik.st-kutija .letter{bottom:13%;left:14%;right:14%;z-index:3;
  transform:translateY(0) scale(.93)}
#plik.st-kutija.opening .letter{transform:translateY(-42%) scale(1.05)}
/* вертикална лента низ целата кутија */
#plik.st-kutija .ribbon{display:block;position:absolute;left:41.5%;right:41.5%;top:7%;height:38%;z-index:6;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--plik-seal) 58%,#000) 0%,
    var(--plik-seal) 34%,
    color-mix(in srgb,var(--plik-seal) 66%,#fff) 52%,
    var(--plik-seal) 70%,
    color-mix(in srgb,var(--plik-seal) 58%,#000) 100%);
  transition:transform 1s cubic-bezier(.4,0,.25,1),opacity .8s ease}
#plik.st-kutija .ribbon::before,#plik.st-kutija .ribbon::after{content:none}
#plik.st-kutija .ribbon{box-shadow:0 6px 10px -6px rgba(0,0,0,.5)}
#plik.st-kutija.opening .ribbon{transform:translateY(-260%) rotate(-6deg);opacity:0}
/* капак со раб */
#plik.st-kutija .lid{display:block;position:absolute;left:-5%;right:-5%;top:7%;height:25%;z-index:5;
  background:linear-gradient(176deg,color-mix(in srgb,var(--plik-env) 72%,#fff) 0%,var(--plik-env) 100%);
  border-radius:8px 8px 3px 3px;
  box-shadow:0 14px 26px -13px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform 1s cubic-bezier(.4,0,.25,1),opacity .8s ease}
#plik.st-kutija .lid::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;
  border-radius:0 0 3px 3px;
  background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.26) 100%)}
#plik.st-kutija.opening .lid{transform:translateY(-180%) rotate(-6deg);opacity:0}
#plik.st-kutija .seal{top:19.5%}

/* ── СВИТОК ── */
#plik.st-svitok .env{aspect-ratio:1/1.24}
#plik.st-svitok .env-front,#plik.st-svitok .env-flap{display:none}
#plik.st-svitok .env-back{top:12%;bottom:12%;border-radius:2px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--plik-paper) 92%,#c9b48d) 0%,var(--plik-paper) 18%,
    var(--plik-paper) 82%,color-mix(in srgb,var(--plik-paper) 92%,#c9b48d) 100%);
  box-shadow:inset 0 0 34px -14px rgba(120,96,58,.5),0 24px 46px -26px rgba(0,0,0,.5);
  transition:top 1.05s cubic-bezier(.4,0,.25,1),bottom 1.05s cubic-bezier(.4,0,.25,1)}
#plik.st-svitok.opening .env-back{top:2%;bottom:2%}
#plik.st-svitok .letter{position:absolute;inset:18% 12%;background:none;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;
  opacity:0;transform:scale(.96);transition:opacity .9s ease .3s,transform 1s cubic-bezier(.22,.61,.36,1) .3s}
#plik.st-svitok.opening .letter{opacity:1;transform:none}
#plik.st-svitok .door{display:block;position:absolute;left:-4%;right:-4%;height:12%;z-index:6;
  border-radius:999px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--plik-env) 74%,#fff) 0%,var(--plik-env) 46%,
    color-mix(in srgb,var(--plik-env) 62%,#000) 100%);
  box-shadow:0 8px 18px -9px rgba(0,0,0,.5);
  transition:transform 1.05s cubic-bezier(.4,0,.25,1)}
#plik.st-svitok .door.l{top:6%}
#plik.st-svitok .door.r{bottom:6%}
#plik.st-svitok.opening .door.l{transform:translateY(-115%)}
#plik.st-svitok.opening .door.r{transform:translateY(115%)}
#plik.st-svitok .seal{top:50%}

/* ── ВРТЕЊЕ (картичка што се превртува) ── */
#plik.st-vrtenje .env{aspect-ratio:1/1.3;perspective:1400px;background:none;box-shadow:none}
#plik.st-vrtenje .env-front,#plik.st-vrtenje .env-flap{display:none}
#plik.st-vrtenje .env-back{border-radius:8px;backface-visibility:hidden;
  background:linear-gradient(150deg,var(--plik-env) 0%,var(--plik-env2) 100%);
  box-shadow:0 30px 56px -28px rgba(0,0,0,.55);
  transition:transform 1.15s cubic-bezier(.5,0,.25,1)}
#plik.st-vrtenje .env-back::after{content:"";position:absolute;inset:12px;
  border:1px solid var(--plik-accent);opacity:.4;border-radius:4px}
#plik.st-vrtenje.opening .env-back{transform:rotateY(180deg)}
#plik.st-vrtenje .letter{position:absolute;inset:0;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:4;
  transform:rotateY(-180deg);backface-visibility:hidden;
  transition:transform 1.15s cubic-bezier(.5,0,.25,1)}
#plik.st-vrtenje.opening .letter{transform:rotateY(0deg)}
#plik.st-vrtenje .seal{top:50%;transition:opacity .45s ease}
#plik.st-vrtenje.opening .seal{opacity:0}

/* ── ЗАВЕСА ── */
#plik.st-zavesa .env{aspect-ratio:1/1.24}
#plik.st-zavesa .env-front,#plik.st-zavesa .env-flap{display:none}
#plik.st-zavesa .env-back{background:var(--plik-paper);border-radius:4px;
  box-shadow:0 30px 58px -28px rgba(60,55,40,.5),inset 0 0 0 1px rgba(255,255,255,.35)}
#plik.st-zavesa .letter{position:absolute;inset:11%;background:none;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:scale(.97);transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .3s}
#plik.st-zavesa.opening .letter{transform:scale(1.05)}
#plik.st-zavesa .door{display:block;position:absolute;top:0;bottom:0;width:52%;z-index:5;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--plik-seal) 50%,#000) 0px,
    var(--plik-seal) 8px,
    color-mix(in srgb,var(--plik-seal) 76%,#fff) 14px,
    var(--plik-seal) 21px,
    color-mix(in srgb,var(--plik-seal) 50%,#000) 29px);
  box-shadow:inset 0 22px 30px -22px rgba(0,0,0,.55);
  transition:transform 1.15s cubic-bezier(.5,0,.25,1)}
#plik.st-zavesa .door.l{left:0;transform-origin:left center;border-radius:4px 0 0 4px}
#plik.st-zavesa .door.r{right:0;transform-origin:right center;border-radius:0 4px 4px 0}
#plik.st-zavesa.opening .door.l{transform:translateX(-88%) scaleX(.5)}
#plik.st-zavesa.opening .door.r{transform:translateX(88%) scaleX(.5)}
/* карниза */
#plik.st-zavesa .lid{display:block;position:absolute;left:-5%;right:-5%;top:-2.5%;height:7%;z-index:7;
  border-radius:999px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--plik-accent) 78%,#fff) 0%,
    var(--plik-accent) 48%,color-mix(in srgb,var(--plik-accent) 55%,#000) 100%);
  box-shadow:0 6px 12px -6px rgba(0,0,0,.45)}
#plik.st-zavesa .seal{top:50%}

/* ── ИЗГРЕБЕТЕ ── */
#plik.st-grebi .env{aspect-ratio:1/1.24}
#plik.st-grebi .env-front,#plik.st-grebi .env-flap,#plik.st-grebi .seal{display:none}
#plik.st-grebi .env-back{background:linear-gradient(158deg,var(--plik-env) 0%,var(--plik-env2) 100%)}
#plik.st-grebi .letter{position:absolute;inset:9%;overflow:hidden;transform:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
#plik.st-grebi.opening .letter{transform:scale(1.06)}
#plik.st-grebi .scratch{display:block;position:absolute;left:0;top:0;z-index:5;
  border-radius:inherit;cursor:crosshair;touch-action:none;
  transition:opacity .55s ease}
#plik.st-grebi.scratched .scratch,#plik.st-grebi.opening .scratch{opacity:0;pointer-events:none}

/* ── ПРСТЕН ЗА ЗАДРЖУВАЊЕ (data-open="hold") ── */
#plik .scratch{display:none}
#plik .hold-ring{display:none}
#plik[data-open="hold"] .hold-ring{
  display:block;position:absolute;left:50%;top:50%;
  width:142%;height:142%;transform:translate(-50%,-50%) rotate(-90deg);
  overflow:visible;pointer-events:none}
#plik .hold-ring circle{fill:none;stroke-linecap:round}
#plik .hold-ring .trk{stroke:color-mix(in srgb,var(--plik-accent) 16%,transparent);stroke-width:4}
#plik .hold-ring .bar{stroke:color-mix(in srgb,var(--plik-accent) 82%,#fff);stroke-width:7;
  stroke-dasharray:346;stroke-dashoffset:346;transition:stroke-dashoffset .32s ease;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--plik-accent) 70%,transparent))}
#plik.holding .hold-ring .bar{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s linear}
#plik[data-open="hold"].holding .seal{transform:translate(-50%,-50%) scale(.95)}
#plik[data-open="hold"] .seal{transition:transform .25s cubic-bezier(.34,1.4,.6,1)}
#plik[data-open="hold"] .pk-hint{transition:color .3s ease}
#plik[data-open="hold"].holding .pk-hint{color:var(--plik-accent)}