/* ===========================
   PISMO (koverta) – KONTEJNER
   =========================== */
.pismo-lebdi{
  position: fixed;
  left: 0; top: 0;                 /* JS pomera transformom */
  width: 280px;                    /* veličina koverte (duplo od ranije) */
  z-index: 999999;
  cursor: grab;
  filter: drop-shadow(0 2px 12px rgba(255,235,190,.55));
  transition: filter .25s ease, opacity .4s ease;
  touch-action: none;
  opacity: 0;                      /* JS posle stavi 1 */
}
.pismo-lebdi:active{ cursor: grabbing; }
.pismo-lebdi > img:first-child{
  display:block; width:100%; height:auto;
  user-select:none; pointer-events:none;     /* klik ide na kontejner */
}

/* Puls svetla oko voska */
.pismo-lebdi::after{
  content:"";
  position:absolute; left:50%; bottom:34%; transform:translate(-50%,0);
  width:92px; height:92px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,210,140,.55),
                                      rgba(255,210,140,.18) 55%,
                                      transparent 72%);
  filter: blur(2px);
  opacity:.9;
  animation: vosakPuls 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes vosakPuls{
  0%,100%{ transform:translate(-50%,0) scale(.95); opacity:.8 }
  50%    { transform:translate(-50%,0) scale(1.06); opacity:1 }
}

/* Udah pri ulazu i "uspavano" stanje */
@keyframes pismoUdah {
  0%   { transform: scale(.98) rotate(-1deg); filter: drop-shadow(0 0 8px rgba(255,235,190,.45)); }
  55%  { transform: scale(1.02) rotate(0deg);  filter: drop-shadow(0 0 28px rgba(255,245,210,.98)); }
  100% { transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 2px 12px rgba(255,235,190,.55)); }
}
.pismo-breath { animation: pismoUdah 1.8s ease-out 1; }
.pismo-uspavano {
  opacity: .28;
  filter: drop-shadow(0 1px 8px rgba(255,235,190,.35));
}


/* ===========================
   MOBILNI – smanjena koverta
   =========================== */
@media (max-width: 768px) {
  .pismo-lebdi {
    width: 140px;              /* ~50% sadašnje veličine */
    filter: drop-shadow(0 1px 8px rgba(255,235,190,.55));
  }
  .pismo-lebdi::after {
    width: 46px;               /* proporcionalno smanjen puls voska */
    height: 46px;
    bottom: 34%;
    filter: blur(1.5px);
  }
  .pismo-hint {
    font-size: 10px;
    padding: 4px 8px;
  }
}


/* Hint balon iznad koverte */
.pismo-hint{
  position: fixed; display:none; z-index: 1000000;
  padding:6px 10px; border-radius:999px; font:600 12px/1 system-ui;
  color:#2c1f12; background: rgba(252,238,197,.95); border:1px solid #b8954f;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 0 12px rgba(255,240,200,.35);
  pointer-events:none;
  transform: translate(-50%, -120%); /* centriran iznad koverte */
  opacity:0; transition: opacity .25s ease;
}
.pismo-hint.prikazi{ display:block; opacity:1; }
.pismo-lebdi.hint-ping{ filter: drop-shadow(0 0 26px rgba(255,245,210,.95)); }

@media (prefers-reduced-motion: reduce){
  .pismo-lebdi::after{ animation:none }
}

/* ===========================
   KARTA – iz desne strane koverte
   =========================== */
/* slika karte – animacija i izgled */
.karta-animacija{
  width:150%;
  height:auto;
  display:block;
  transform-origin:right center;

  /* START: u koverti (nevidljiva, poravnata) */
  transform:translateX(0%) rotate(-6deg);
  opacity:0;

  transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:auto;        /* slika prima hover/klik SAMO kad je link aktivan */
}
/* SHOW: izvlačenje udesno */
.karta-animacija.prikazi{
  transform:translateX(80%) rotate(-6deg);
  opacity:1;
}
.karta-animacija.aktivna{
  pointer-events: auto;   /* << klik ide sada na sliku */
  cursor: pointer;
}
.karta-link{
  position:absolute;
  right:-6%;
  bottom:16%;
  width:auto;                 /* okvir je 150% – slika je 100% u njemu */
  display:block;
  z-index:2;
  pointer-events:none;        /* << ključ: dok nije aktivna, ne hvata klik */
  text-decoration:none;
}

/* kada je izvučena – postaje klikabilna */
.karta-link.aktivna{
  pointer-events:auto;        /* tek tada link radi */
}

/* (opciono) mali sjaj na hover kad je aktivna */
.karta-link.aktivna:hover .karta-animacija{
  filter: brightness(1.05) drop-shadow(0 0 12px rgba(255,230,180,.8));
}

.karta-link img {
  display: block;
  width: 150%;          /* <== veličina slike, ne linka */
  height: auto;
  transform-origin: right center;
  transform: translateX(0%) rotate(-6deg);
  opacity: 0;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

.karta-link {
  pointer-events: none; /* po defaultu link ne radi */
}

.karta-link.prikazi {
  pointer-events: auto; /* kada se aktivira klizanjem postaje klikabilan */
}

.karta-link img.prikazi {
  transform: translateX(80%) rotate(-6deg);
  opacity: 1;
}


.karta-link:hover img {
  filter: brightness(1.05) drop-shadow(0 0 12px rgba(255,230,180,.8));
}


/* ===========================
   POPUP PERGAMENT
   =========================== */
.pergament-prekrivac{
  display:none; position:fixed; inset:0; z-index: 10000;
  background: rgba(30,25,35,.55); backdrop-filter: blur(8px);
  justify-content:center; align-items:center;
}
.pergament{
  position:relative;
  background: linear-gradient(145deg, #fef9f0, #f7eedf);
  color:#3b2f1d;
  border: 1px solid rgba(150,120,60,.35);
  box-shadow: 0 0 28px rgba(255,240,190,.65);
  padding: 2.2rem; border-radius:14px;
  max-width:520px; text-align:center;
  font-family:"Dancing Script","Great Vibes",cursive;
  font-size:1.35rem; line-height:1.55;
  animation: pergamentUlaz .8s ease forwards;
}
@keyframes pergamentUlaz{ from{opacity:0; transform:scale(.92)} to{opacity:1; transform:scale(1)} }
.pergament .zatvori{
  position:absolute; top:12px; right:16px;
  font-size:28px; color:#7b6538; cursor:pointer; opacity:.85;
}
.pergament .zatvori:hover{ opacity:1; transform:scale(1.06); }

/* Dugmad u poruci */
.pergament-dugmad{
  display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap:wrap;
}
.dugme-zlatno{
  display:inline-block; text-decoration:none;
  padding:10px 16px; border-radius:10px;
  background: linear-gradient(180deg, #fceec5, #e7c87a);
  color:#2c1f12; font-weight:700; border:1px solid #b8954f;
  box-shadow: 0 4px 16px rgba(181,141,62,.35);
}
.dugme-zlatno:hover{ filter: brightness(1.05); }
.dugme-zlatno.obris{ background:transparent; color:#7b6538; border:1px solid #b8954f; }

/* ===========================
   Naslov – 🌙✨ sa shimmerom
   =========================== */
/* 🌙✨ naslovne ikonice – stabilna veličina + shimmer */
.sasha-ikonice{
  position: relative;
  display: inline-block;
  overflow: hidden;          /* klipuje sjaj unutar ikonice */
  line-height: 1;            /* bez “rastegnutog” reda */
  font-size: 1em;            /* zaključaj metriku */
  vertical-align: -.05em;    /* blago spusti da bude u ravni teksta */
  filter: brightness(1) saturate(1);
  /* više NEMA scale animacije koja je pravila da “porastu” */
}

/* svetlosni prelaz preko ikonice (svake 3s) */
.sasha-ikonice::after{
  content: "";
  position: absolute;
  z-index: 1;                /* SJAJ IZNAD emoji-ja */
  top: -35%;
  left: -140%;
  width: 280%;
  height: 170%;
  background: linear-gradient(75deg,
    rgba(255,255,255,0) 0%,
    rgba(255,245,210,.85) 12%,
    rgba(255,255,255,0) 24%);
  transform: translateX(-140%) skewX(-18deg);
  filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  animation: sashaSweep 3s linear infinite;
}

/* diskretan “pulse” bez menjanja veličine */
@keyframes sashaPulse{
  0%,100%{ filter: brightness(1) }
  50%   { filter: brightness(1.08) }
}
/* ako ipak želiš i to – dodaj klasu .pulse na .sasha-ikonice */
.sasha-ikonice.pulse{ animation: sashaPulse 8s ease-in-out infinite; }

/* shimmer putanja: od daleko levo → daleko desno, unutar span-a */
@keyframes sashaSweep{
  0%   { opacity:0;   transform: translateX(-140%) skewX(-18deg); }
  10%  { opacity:.95; }
  22%  { opacity:0; }
  100% { opacity:0;   transform: translateX(140%)  skewX(-18deg); }
}

/* pristupačnost */
@media (prefers-reduced-motion: reduce){
  .sasha-ikonice.pulse{ animation: none; }
  .sasha-ikonice::after{ animation: none; opacity: 0; }
}