/* ============================================================
   MILLE BACI · D3 · POKLONI — kutija koja govori (konfeti papir)
   ============================================================ */

body{
  background:
    radial-gradient(3px 3px at 12% 18%,rgba(228,72,124,.5) 50%,transparent 51%),
    radial-gradient(3px 3px at 78% 8%,rgba(38,161,156,.5) 50%,transparent 51%),
    radial-gradient(3px 3px at 32% 64%,rgba(246,162,43,.55) 50%,transparent 51%),
    radial-gradient(3px 3px at 90% 42%,rgba(150,30,66,.4) 50%,transparent 51%),
    radial-gradient(3px 3px at 55% 88%,rgba(38,161,156,.4) 50%,transparent 51%),
    radial-gradient(3px 3px at 8% 92%,rgba(246,162,43,.4) 50%,transparent 51%),
    var(--paper);
  background-size:520px 520px;
}

/* ---------- hero ---------- */
.ghero{width:var(--w);margin:0 auto;padding:8rem 0 2rem;position:relative}
.ghero-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.5rem,9vw,7rem);line-height:.97;letter-spacing:-.01em;
}
.ghero-h span{display:block}
.ghero-h .gh2{color:var(--plum)}
.ghero-lead{margin-top:1.4rem}
.ghero-fig{margin-top:2.4rem;position:relative;transform:rotate(-1.2deg)}
.ghero-fig img{
  width:100%;max-height:72vh;object-fit:cover;object-position:center 55%;
  border-radius:22px;border:4px solid var(--pink);
  box-shadow:10px 12px 0 rgba(150,30,66,.4);
}
.ghero-stkr{
  position:absolute;left:clamp(.6rem,3vw,2rem);top:-1.6rem;
  background:var(--teal);color:#fff;border:3px solid var(--pink);border-radius:16px;
  padding:.5rem 1rem;transform:rotate(-5deg);text-align:center;
}
/* a paper gift tag hangs off the box and swings like a pendulum */
.gift-tag{
  position:absolute;right:14%;top:-6px;transform-origin:top center;
  display:flex;flex-direction:column;align-items:center;
  animation:tagswing 3.4s ease-in-out infinite;will-change:transform;
}
.gift-tag i{display:block;width:3px;height:44px;background:var(--pink);border-radius:3px}
.gift-tag b{
  background:#FFE3EE;border:3px solid var(--pink);border-radius:10px;
  padding:.25rem 1rem;font-size:1.35rem;color:var(--plum);
  box-shadow:3px 4px 0 rgba(228,72,124,.25);transform:rotate(-2deg);position:relative;
}
.gift-tag b::before{
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--paper);border:3px solid var(--pink);
}
@keyframes tagswing{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.gift-tag{animation:none}}
@media (max-width:640px){.gift-tag{right:8%}.gift-tag i{height:30px}.gift-tag b{font-size:1.1rem}}

/* ---------- box picker ---------- */
.pick-stage{
  display:grid;grid-template-columns:46fr 40fr;gap:clamp(1.8rem,4vw,3.6rem);
  align-items:center;margin-top:2.4rem;
}
.pick-figs{position:relative;aspect-ratio:4/5;max-height:74vh}
.pick-figs figure{
  position:absolute;inset:0;margin:0;opacity:0;transform:rotate(2.4deg) scale(.96);
  transition:opacity .45s var(--ease),transform .55s var(--spring);pointer-events:none;
}
.pick-figs figure.on{opacity:1;transform:rotate(-1.2deg) scale(1)}
.pick-figs img{
  width:100%;height:100%;object-fit:cover;border-radius:22px;
  border:4px solid var(--pink);box-shadow:10px 12px 0 rgba(228,72,124,.2);
}
.pick-swatches{display:flex;gap:.9rem;margin-bottom:1.6rem}
.sw{
  width:54px;height:54px;border-radius:50%;background:var(--sw);
  border:3px solid var(--pink);cursor:pointer;position:relative;
  transition:transform .3s var(--spring),box-shadow .3s var(--spring);
  box-shadow:3px 4px 0 rgba(228,72,124,.25);
}
.sw:hover{transform:translateY(-4px) rotate(-6deg)}
.sw.on{transform:scale(1.16);box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--sw)}
.pick-word{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.01em;margin-bottom:.7rem;
}
.pick-say{font-size:clamp(1.4rem,2.4vw,1.8rem);color:var(--plum);min-height:2.4em;transform:rotate(-1deg)}
.pick-note{margin-top:1.2rem;font-size:.92rem;opacity:.75}

/* ---------- designers ---------- */
.dsgn{position:relative}
.dsgn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink)}
.dsgn-in{display:grid;grid-template-columns:44fr 50fr;gap:clamp(2rem,5vw,4rem);align-items:center;color:#EDEFFA}
.dsgn-copy .sec-h{color:#EDEFFA}
.dsgn-copy .kicker{color:#F67E36}
.dsgn-copy p:not(.kicker){max-width:48ch;margin-bottom:.9rem}
.dsgn-copy a{color:#FFD98E;font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}
.dsgn-copy a:hover{color:#fff}
.dsgn-copy .hl{color:#EDEFFA}
.dsgn-tiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,2vw,1.4rem)}
.dsgn-tiles figure{margin:0;border-radius:18px;overflow:hidden;border:3px solid #EDEFFA;transform:rotate(-1.2deg);transition:transform .35s var(--spring)}
.dsgn-tiles figure:nth-child(2){transform:rotate(1.4deg)}
.dsgn-tiles figure:hover{transform:rotate(0) scale(1.03)}
.dsgn-tiles img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.dt-c{grid-column:1/3}
.dt-c img{aspect-ratio:16/9}

/* ---------- corporate ---------- */
.corp-grid{display:grid;grid-template-columns:40fr 52fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.corp-fig{margin:0;transform:rotate(-1.6deg)}
.corp-fig img{border-radius:20px;border:4px solid var(--pink);box-shadow:8px 10px 0 rgba(228,72,124,.3)}
.corp-copy p:not(.kicker){max-width:48ch}
.corp-list{list-style:none;margin:1.4rem 0 1.8rem;display:grid;gap:.6rem}
.corp-list li{
  position:relative;padding-left:2rem;font-weight:500;
}
.corp-list li::before{
  content:"";position:absolute;left:0;top:.28em;width:1.1em;height:1.1em;border-radius:6px;
  background:var(--teal);border:2.5px solid var(--pink);
}
.corp-list li::after{
  content:"";position:absolute;left:.32em;top:.52em;width:.5em;height:.3em;
  border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg);
}
.corp-ctas{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- seasons ---------- */
.seas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.8rem);margin-top:2.4rem}
.seas-grid figure{margin:0;border-radius:18px;overflow:hidden;border:3px solid var(--pink);background:#fff}
.seas-grid figure:nth-child(1){transform:rotate(-.8deg)}
.seas-grid figure:nth-child(2){transform:rotate(.7deg)}
.seas-grid figure:nth-child(3){transform:rotate(-.5deg)}
.seas-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s var(--spring)}
.seas-grid figure:hover img{transform:scale(1.05)}
.seas-grid figcaption{
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.75rem 1rem;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pick-stage{grid-template-columns:1fr}
  .pick-figs{max-width:440px}
  .dsgn-in{grid-template-columns:1fr}
  .corp-grid{grid-template-columns:1fr}
  .corp-fig{max-width:440px}
  .seas-grid{grid-template-columns:1fr 1fr}
  .seas-grid figure:nth-child(3){grid-column:1/3}
}
@media (max-width:640px){
  .seas-grid{grid-template-columns:1fr}
  .seas-grid figure:nth-child(3){grid-column:auto}
}