/* ==========================================================================
   KeepBerry landing v3 — sticker layer
   Loaded AFTER landing-v2.css: it only adds the sticker decoration, the
   sticker showcase section and a few playful accents. Nothing in v2 is
   restyled, so the page keeps working if this file fails to load.
   Stickers come from the app's own packs (design/stickers → assets/img/stickers).
   ========================================================================== */

/* ── floating sticker decoration ───────────────────────────────── */
.stk{
  position:absolute; z-index:4; pointer-events:none; user-select:none;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.35));
  animation:stk-float 6s ease-in-out infinite;
  will-change:transform;
}
.stk img{display:block; width:100%; height:auto}
.stk.sm{width:78px}
.stk.md{width:108px}
.stk.lg{width:142px}
.stk.d1{animation-delay:-1.4s}
.stk.d2{animation-delay:-2.8s}
.stk.d3{animation-delay:-4.2s}
.stk.slow{animation-duration:8.5s}
@keyframes stk-float{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--rot,0deg))}
  50%    {transform:translate3d(0,-14px,0) rotate(calc(var(--rot,0deg) + 3deg))}
}

/* hero cluster — sits around the device stage */
.hero{position:relative}
.hero .stage{position:relative}
.stk-hero-1{left:-34px;  top:-54px;  --rot:-12deg}
.stk-hero-2{right:-22px; top:6%;     --rot:10deg}
.stk-hero-3{left:-10px;  bottom:26%; --rot:8deg}
.stk-hero-4{right:4%;    bottom:8%;  --rot:-9deg}

/* section accents */
.show, .desk, .features, .pricing, .faq, .final{position:relative; overflow:hidden}
.stk-calls   {right:2%;  top:12%;    --rot:12deg}
.stk-growth  {left:1.5%; bottom:10%; --rot:-10deg}
.stk-desk    {left:3%;   top:14%;    --rot:-8deg}
.stk-feat    {right:2%;  top:8%;     --rot:9deg}
.stk-price   {left:1.5%; top:9%;     --rot:-11deg}
.stk-price-2 {right:2%;  bottom:12%; --rot:8deg}
.stk-faq     {right:3%;  bottom:14%; --rot:-7deg}
.stk-final   {left:4%;   top:16%;    --rot:10deg}
.stk-final-2 {right:4%;  bottom:12%; --rot:-12deg}

/* a sticker can sit on a card and still feel "stuck on" */
.tier{position:relative}
.tier .stk-tag{
  position:absolute; top:-30px; right:-14px; width:74px; z-index:5;
  pointer-events:none; filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
  transform:rotate(12deg); transition:transform .25s cubic-bezier(.34,1.56,.64,1)
}
.tier:hover .stk-tag{transform:rotate(-6deg) scale(1.12)}

/* ── sticker showcase section ──────────────────────────────────── */
.stickers{
  position:relative; padding:104px 0 112px; overflow:hidden;
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(236,72,153,.16), transparent 60%),
    radial-gradient(900px 520px at 88% 100%, rgba(99,102,241,.18), transparent 62%),
    linear-gradient(180deg,#0B1220 0%,#111C33 55%,#0B1220 100%);
  color:#fff;
}
.stickers .center{max-width:760px; margin-inline:auto; text-align:center; position:relative; z-index:3}
.stickers h2{color:#fff}
.stickers .lead{color:rgba(255,255,255,.76)}
.stk-grad{background:linear-gradient(90deg,#F472B6,#FBBF24 45%,#5CE39A);
  -webkit-background-clip:text; background-clip:text; color:transparent}

.stk-stats{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px; position:relative; z-index:3}
.stk-stats span{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  font:700 14px/1 var(--jk,system-ui); color:#E8EEF9; backdrop-filter:blur(8px)
}

/* two marquee rows drifting in opposite directions */
.stk-rail{margin-top:46px; position:relative; z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.stk-rail + .stk-rail{margin-top:18px}
.stk-track{display:flex; gap:26px; width:max-content; animation:stk-scroll 46s linear infinite}
.stk-rail.rev .stk-track{animation-direction:reverse; animation-duration:56s}
.stk-rail:hover .stk-track{animation-play-state:paused}
@keyframes stk-scroll{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.stk-cell{
  position:relative; flex:none; width:132px; height:132px; display:grid; place-items:center;
  border-radius:26px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s
}
.stk-cell:hover{transform:translateY(-6px) rotate(-4deg) scale(1.06); background:rgba(255,255,255,.12)}
.stk-cell img{width:104px; height:104px; object-fit:contain;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.42))}
.stk-cell.live{background:linear-gradient(160deg,rgba(92,227,154,.20),rgba(99,102,241,.18));
  border-color:rgba(92,227,154,.34)}
.stk-cell.live::after{
  content:"GIF"; position:absolute; right:8px; bottom:8px; padding:2px 7px; border-radius:7px;
  background:#5CE39A; color:#05220F; font:800 10px/1.4 var(--jk,system-ui); letter-spacing:.04em}

.stk-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:44px; position:relative; z-index:3}

/* ── playful accents on the rest of the page ───────────────────── */
.pill.glass.wiggle{animation:stk-wiggle 3.4s ease-in-out infinite; transform-origin:60% 80%}
@keyframes stk-wiggle{0%,92%,100%{transform:rotate(0)} 94%{transform:rotate(-3deg)} 97%{transform:rotate(3deg)}}
.feat .ic{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.feat:hover .ic{transform:rotate(-8deg) scale(1.1)}

/* ── responsive: keep the page readable, drop the clutter ──────── */
@media (max-width:1180px){
  .stk.lg{width:112px} .stk.md{width:92px} .stk.sm{width:68px}
  .stk-hero-1,.stk-hero-2{top:-10px}
}
@media (max-width:860px){
  .stk-calls,.stk-growth,.stk-desk,.stk-feat,.stk-price-2,.stk-faq,.stk-final-2{display:none}
  .stk-hero-1{left:-10px; top:-14px} .stk-hero-2{right:-8px; top:2%}
  .stk-hero-3,.stk-hero-4{display:none}
  .stk.lg,.stk.md{width:84px}
  .stickers{padding:78px 0 84px}
  .stk-cell{width:108px; height:108px} .stk-cell img{width:86px; height:86px}
  .stk-cell.live::after{right:6px; bottom:6px}
  .tier .stk-tag{width:60px; top:-22px; right:-6px}
}
@media (prefers-reduced-motion:reduce){
  .stk,.stk-track,.pill.glass.wiggle{animation:none !important}
}