/* Peti frajerski rođendan — Floating 5 card */
.card--peti{
  --card-bg:#F5EDE5;--card-text:#3A2E25;--card-copper:#C4935A;--card-copper-lt:#DDB87A;
  --card-rose:#E8C4B8;--card-rose-deep:#C49080;--card-dark:#2A2320;
  background:var(--card-bg);position:relative;
  border-radius:3px;
  border:1px solid rgba(196,147,90,.15);
  font-family:'Lato','DM Sans',sans-serif;color:var(--card-text);
  overflow:visible; /* allow the 5 to escape */
}
/* THE FLOATING 5 — extends beyond card */
.card--peti::before{
  content:'5';
  position:absolute;
  top:-30px;right:-10px;z-index:10;
  font-family:'Tenor Sans','Playfair Display',serif;
  font-size:140px;line-height:1;font-weight:400;
  color:var(--card-copper);
  opacity:.2;
  text-shadow:
    2px 2px 0 rgba(196,147,90,.3),
    4px 4px 0 rgba(196,147,90,.15),
    6px 6px 12px rgba(0,0,0,.1);
  pointer-events:none;
  transition:all .6s cubic-bezier(.16,1,.3,1);
  animation:float5 4s ease-in-out infinite;
  transform-origin:center center;
}
.card--peti:is(:hover,.pulse)::before{
  opacity:.45;
  color:var(--card-copper-lt);
  text-shadow:
    2px 2px 0 rgba(196,147,90,.4),
    4px 4px 0 rgba(196,147,90,.25),
    6px 6px 20px rgba(0,0,0,.15),
    0 0 40px rgba(196,147,90,.15);
  transform:translateY(-8px) rotate(-3deg) scale(1.08);
}
@keyframes float5{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-6px) rotate(1.5deg)}
  50%{transform:translateY(-2px) rotate(-1deg)}
  75%{transform:translateY(-8px) rotate(2deg)}
}

.card--peti .card__img-wrap{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:3px 3px 0 0}
.card--peti .card__img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.25,0,.25,1),filter .5s ease;
  filter:saturate(.95) contrast(1.02) brightness(.97);
}
.card--peti:is(:hover,.pulse) .card__img{transform:scale(1.05);filter:saturate(1.05) contrast(1.05) brightness(1)}
/* Warm gradient overlay */
.card--peti .card__img-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,35,32,.05) 0%,transparent 40%,rgba(42,35,32,.5) 100%);
  pointer-events:none;
}
/* Confetti particles */
.card--peti .card__img-wrap::before{
  content:'';position:absolute;z-index:2;pointer-events:none;
  width:6px;height:10px;top:-15px;left:30%;
  background:var(--card-copper-lt);
  box-shadow:
    40px -8px 0 0 var(--card-rose),
    90px -20px 0 0 var(--card-copper),
    140px -5px 0 0 var(--card-rose-deep),
    190px -18px 0 0 var(--card-copper-lt),
    240px -10px 0 0 var(--card-rose);
  opacity:0;transition:opacity .3s ease;
  animation:confettiDrop 1.8s ease-in infinite paused;
}
.card--peti:is(:hover,.pulse) .card__img-wrap::before{opacity:.7;animation-play-state:running}
@keyframes confettiDrop{
  0%{transform:translateY(0) rotate(0deg);opacity:.7}
  100%{transform:translateY(260px) rotate(360deg);opacity:0}
}
.card--peti .card__badge{
  position:absolute;bottom:14px;left:14px;z-index:2;
  font-family:'Cutive Mono','DM Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--card-copper-lt);
  background:rgba(42,35,32,.65);backdrop-filter:blur(6px);
  padding:5px 12px;border-radius:2px;
  border:1px solid rgba(196,147,90,.25);
}
.card--peti .card__body{padding:20px 22px 24px}
.card--peti .card__year{
  font-family:'Cutive Mono','DM Mono',monospace;font-size:10px;letter-spacing:.2em;
  color:var(--card-copper);margin-bottom:6px;display:block;
}
.card--peti .card__title{
  font-family:'Tenor Sans','Playfair Display',serif;font-weight:400;
  font-size:22px;line-height:1.3;margin-bottom:8px;transition:color .4s ease;
}
.card--peti:is(:hover,.pulse) .card__title{color:var(--card-copper)}
.card--peti .card__desc{
  font-size:13px;line-height:1.65;color:rgba(58,46,37,.5);font-weight:300;
}
/* Copper shimmer line at bottom */
.card--peti::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--card-copper-lt),var(--card-rose-deep),var(--card-copper-lt),transparent);
  background-size:200% 100%;opacity:0;transition:opacity .5s ease;
  animation:shimmerSlide 3s linear infinite paused;
}
.card--peti:is(:hover,.pulse)::after{opacity:.6;animation-play-state:running}
@keyframes shimmerSlide{from{background-position:200% 0}to{background-position:-200% 0}}