/* ============================================================
   MILLE BACI · D3 · ČOKOLADA — tamna strana (kakao pop noir)
   ============================================================ */

:root{--page-ink:#FFDCE9;--gold:#EDC02E}
body{background:#4A0E27;color:var(--page-ink)}

/* header adapts to the dark page (pill toolbar, cream on cocoa) */
.hdr.scrolled{background:rgba(74,14,39,.78)}
.hdr-nav{background:rgba(51,8,27,.66);border-color:var(--page-ink);box-shadow:4px 5px 0 rgba(0,0,0,.35)}
.hdr-nav a{color:var(--page-ink)}
.hdr-nav a:hover{color:var(--gold)}
.hdr-nav a:not(.hdr-cta)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='%23D9A441' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hdr-nav a[aria-current="page"]{background:var(--gold);color:#4A0E27;box-shadow:2px 3px 0 rgba(0,0,0,.4)}
.hdr-cta{background:var(--page-ink);color:#4A0E27 !important}
.hdr-cta:hover{background:var(--gold) !important;color:#4A0E27 !important}
.hdr-right{background:rgba(51,8,27,.66);border-color:var(--page-ink);box-shadow:4px 5px 0 rgba(0,0,0,.35)}
.lang{color:var(--page-ink)}
.lang button[aria-pressed="true"]{color:var(--gold)}
.burger{background:var(--page-ink)}
.burger:hover{background:var(--gold)}
.burger span{background:#4A0E27}
::selection{background:var(--gold);color:#4A0E27}
:focus-visible{outline-color:var(--gold)}

.kicker{color:var(--gold)}
.sec-h{color:var(--page-ink)}
.sec-h em:not(.wv),.hl{color:var(--page-ink);background-image:linear-gradient(transparent 58%,rgba(237,192,46,.55) 58%)}

/* buttons on dark */
.btn{background:var(--page-ink);color:#4A0E27;box-shadow:0 4px 0 rgba(0,0,0,.4)}
.btn:hover{background:var(--gold);color:#4A0E27}
.btn.gold{background:var(--gold);color:#4A0E27}
.btn.gold:hover{background:var(--pink);color:#fff}

/* chips */
.chip-gold{background:var(--gold);color:#4A0E27;transform:rotate(-1.6deg)}
.chip-cream{border:2px solid var(--page-ink);transform:rotate(1.2deg)}

/* ---------- hero ---------- */
.chero{width:var(--w);margin:0 auto;padding:8rem 0 2rem;position:relative}
.chero-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,9.6vw,7.6rem);line-height:.97;letter-spacing:-.01em;
}
.chero-h span{display:block}
.chero-h .ch2{color:var(--gold)}
.chero-lead{margin-top:1.4rem;color:#FFD9E6}
.chero-fig{margin-top:2.6rem;position:relative;transform:rotate(-1.2deg)}
.chero-fig img{
  width:100%;max-height:74vh;object-fit:cover;
  border-radius:22px;border:4px solid var(--gold);
  box-shadow:10px 12px 0 rgba(237,192,46,.28);
}
.chero-fig::before{
  content:"";position:absolute;inset:-6% -4%;z-index:-1;border-radius:32px;
  background:radial-gradient(60% 60% at 30% 20%,rgba(237,192,46,.3),transparent 70%),
             radial-gradient(60% 60% at 80% 90%,rgba(228,72,124,.22),transparent 70%);
  filter:blur(26px);
}
.chero-stkr{
  position:absolute;right:clamp(.6rem,3vw,2rem);top:-1.6rem;
  background:var(--gold);color:#4A0E27;border:3px solid #4A0E27;border-radius:16px;
  padding:.5rem 1rem;transform:rotate(5deg);text-align:center;
}

/* ---------- bars, gold shine sweep on hover ---------- */
.cbars-grid{
  display:grid;grid-template-columns:40fr 28fr 28fr;gap:clamp(1rem,2.2vw,1.8rem);margin-top:2.4rem;
}
.shine{position:relative;overflow:hidden;border-radius:20px;border:3px solid var(--gold);margin:0}
.shine img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--spring)}
.shine::after{
  content:"";position:absolute;inset:-30% -60%;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,231,180,.38) 50%,transparent 58%);
  transform:translateX(-120%) rotate(0.001deg);
}
.shine:hover::after{transition:transform .9s var(--ease);transform:translateX(120%)}
.shine:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.shine::after{display:none}}
.cbars-hand{margin-top:1.4rem;color:var(--gold);transform:rotate(-1deg)}

/* ---------- snap a square (interactive chocolate bar) ---------- */
.snap-grid{display:grid;grid-template-columns:44fr 48fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.snap-copy p:not(.kicker){color:#FFD9E6;max-width:42ch}
.snap-hand{margin-top:1rem;color:var(--gold);transform:rotate(-1.4deg)}
.snapbar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  background:#33081B;border:4px solid var(--gold);border-radius:18px;padding:10px;
  box-shadow:8px 10px 0 rgba(237,192,46,.25);transform:rotate(1.2deg);
}
.sq{
  aspect-ratio:1/1;border-radius:10px;cursor:pointer;position:relative;border:0;
  background:
    linear-gradient(145deg,rgba(255,255,255,.16) 0 18%,transparent 40%),
    linear-gradient(325deg,rgba(0,0,0,.35) 0 16%,transparent 42%),
    #5C1130;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.35),inset 0 3px 0 rgba(255,233,214,.14);
  transition:transform .18s var(--spring),filter .2s;
}
.sq::before{
  content:"";position:absolute;inset:22%;border-radius:6px;
  background:linear-gradient(145deg,rgba(255,255,255,.1),transparent 60%);
  border:1.5px solid rgba(255,233,214,.14);
}
.sq:hover{transform:translateY(-3px);filter:brightness(1.14)}
.sq:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sq.gone{visibility:hidden;pointer-events:none}
.sq-fly{position:absolute;border-radius:10px;pointer-events:none;z-index:5}

/* ---------- praline strip (native drag/swipe) ---------- */
.cpral-head{padding-bottom:1.4rem !important}
.cpral-head .sec-lead{color:#FFD9E6}
.cups-drag{color:var(--gold)}
.cpral-strip{
  display:flex;gap:clamp(.9rem,2vw,1.4rem);overflow-x:auto;
  padding:.4rem clamp(1rem,4vw,2.4rem) 1.8rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.cpral-strip::-webkit-scrollbar{display:none}
.cpral-strip figure{
  flex:none;width:clamp(250px,30vw,380px);scroll-snap-align:center;margin:0;
  border-radius:18px;overflow:hidden;border:3px solid var(--gold);position:relative;
  transform:rotate(-.7deg);background:#33081B;
}
.cpral-strip figure:nth-child(even){transform:rotate(.7deg)}
.cpral-strip img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cpral-strip figcaption{
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.75rem 1rem;color:var(--gold);
}

/* ---------- name moment ---------- */
.cname{position:relative}
.cname::before{content:"";position:absolute;inset:0;z-index:-1;background:#33081B}
.cname-in{display:grid;grid-template-columns:24fr 40fr 26fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.cname-vid{margin:0;transform:rotate(-2deg)}
.cname-vid video{width:100%;border-radius:18px;border:3px solid var(--pink);box-shadow:8px 10px 0 rgba(228,72,124,.3)}
.cname-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:1;letter-spacing:-.01em;margin-bottom:1.4rem;
}
.cname-h span,.cname-h em{display:block;font-style:normal}
.cname-h em{color:var(--pink)}
.cname-copy p:not(.kicker){color:#FFD9E6;max-width:44ch;margin-bottom:.9rem}
.cname-fig{margin:0;transform:rotate(2deg)}
.cname-fig img{border-radius:18px;border:3px solid var(--gold);box-shadow:8px 10px 0 rgba(237,192,46,.25)}

/* ---------- Kotor film ---------- */
.ckotor{position:relative;min-height:86svh;display:flex;align-items:flex-end;overflow:hidden}
.ckotor-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.8)}
.ckotor::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,8,27,.2) 30%,rgba(51,8,27,.88) 88%)}
.ckotor-ov{position:relative;z-index:2;width:var(--w);margin:0 auto;padding:0 0 clamp(2.6rem,7vh,4.5rem)}
.ckotor-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vw,4rem);line-height:1.04;letter-spacing:-.01em;margin-bottom:1rem;
}
.ckotor-ov p:not(.kicker){max-width:52ch;color:#FFD9E6}

/* ---------- editorial red ---------- */
.cred-grid{display:grid;grid-template-columns:50fr 40fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.cred-copy p:not(.kicker){color:#FFD9E6;max-width:46ch;margin-bottom:1.6rem}
.cred-fig{margin:0;transform:rotate(1.8deg)}
.cred-fig img{border-radius:20px;border:4px solid var(--pink);box-shadow:10px 12px 0 rgba(228,72,124,.32)}

/* footer stays teal (brand anchor) */

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cbars-grid{grid-template-columns:1fr 1fr}
  .cbars-grid figure:first-child{grid-column:1/3}
  .cname-in{grid-template-columns:1fr 1fr}
  .cname-copy{grid-column:1/3;order:-1}
  .cred-grid{grid-template-columns:1fr}
  .cred-fig{max-width:440px}
  .snap-grid{grid-template-columns:1fr}
  .snapbar{max-width:420px}
}
@media (max-width:640px){
  .cbars-grid{grid-template-columns:1fr}
  .cname-in{grid-template-columns:1fr}
  .cname-vid,.cname-fig{max-width:340px}
}