/* ===========================================================
   Choco Pop v2 — shared tokens + motion primitives
   Builds on clay-theme.css (palette vars --clay-*). Everything here
   is opt-in by class/attribute, except the few global behaviours at
   the bottom (cross-page transition, navigation progress bar, ripple)
   which are driven by js/choco-motion.js.
   =========================================================== */

:root{
  /* surfaces */
  --cp-milk:#FFF9F2;
  --cp-milk-2:#FFF1DE;
  --cp-surface:#FFFCF7;
  --cp-line:rgba(204,90,0,.16);
  --cp-line-strong:rgba(204,90,0,.28);

  /* text */
  --cp-ink:var(--clay-cocoa-dark);
  --cp-ink-soft:var(--clay-cocoa-light);
  --cp-ink-faint:var(--clay-cocoa-pale);

  /* motion */
  --cp-ease-jelly:cubic-bezier(.34,1.56,.64,1);
  --cp-ease-out:cubic-bezier(.22,1,.36,1);
  --cp-ease-in:cubic-bezier(.55,0,.75,.2);
  --cp-ease-swing:cubic-bezier(.68,-.55,.27,1.55);
  --cp-fast:160ms;
  --cp-mid:300ms;
  --cp-slow:520ms;

  /* flat-emboss depth (no outer glow, highlight stays inset) */
  --cp-shadow-xs:0 2px 0 rgba(166,106,41,.2), 0 4px 8px rgba(79,44,29,.08), inset 0 1px 0 rgba(255,255,255,.9);
  --cp-shadow-sm:0 4px 0 rgba(166,106,41,.22), 0 8px 14px rgba(79,44,29,.12), inset 0 2px 0 rgba(255,255,255,.85);
  --cp-shadow-md:0 6px 0 rgba(166,106,41,.2), 0 14px 24px rgba(79,44,29,.14), inset 0 2px 0 rgba(255,255,255,.85);
  --cp-shadow-lg:0 10px 0 rgba(130,60,20,.13), 0 24px 44px rgba(79,44,29,.2), inset 0 3px 0 rgba(255,255,255,.8);
}

/* ---------- page wrapper (templates/layouts/base.html) ----------
   Side-entering reveals ([data-reveal="left|right"]) start translated off-axis;
   clip (not hidden) keeps them from adding a horizontal scrollbar without
   creating a scroll container, so the sticky header keeps working. */
.cp-page{overflow-x:clip;background:#FFFBF6;} /* the strip reserved under the drip matches the pages' milk top */

/* ---------- 3D icon set ----------
   Most PNGs in /static/icons/ are not square (the chevrons are 91×150 / 150×91),
   so any square box sized with width+height stretched them. Always fit them. */
img[src*="/icons/"]{object-fit:contain;}

/* ---------- surfaces ---------- */
.cp-pop{
  background:var(--cp-surface);
  border:1px solid var(--cp-line);
  border-radius:26px;
  box-shadow:var(--cp-shadow-lg);
  overflow:hidden;
}
/* Flowbite/Popper position dropdowns with an inline `transform`, so entrances
   animate the independent `scale`/`translate` properties instead. */
.cp-pop:not(.hidden){animation:cpPopIn .42s var(--cp-ease-jelly) both;transform-origin:top center;}

/* staggered children: give each direct child --i (set by choco-motion.js) */
.cp-stagger > *{animation:cpRiseIn .5s var(--cp-ease-out) both;animation-delay:calc(var(--i, 0) * 45ms + 60ms);}

/* ---------- menu rows (dropdowns, drawers) ---------- */
.cp-menu{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:2px;}
.cp-menu__item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:10px 12px;border-radius:16px;color:var(--cp-ink);font-size:.8125rem;font-weight:600;
  transition:background-color var(--cp-fast) ease, color var(--cp-fast) ease, transform var(--cp-mid) var(--cp-ease-jelly);
}
.cp-menu__item:hover,
.cp-menu__item:focus-visible{background:linear-gradient(90deg, rgba(253,227,189,.75), rgba(253,227,189,.25));color:var(--clay-wine-dark);transform:translateX(-3px);outline:none;}
.cp-menu__start{display:flex;align-items:center;gap:12px;min-width:0;}
.cp-menu__icon{
  width:34px;height:34px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%, #fff, var(--cp-milk-2) 70%);
  box-shadow:var(--cp-shadow-xs);
  transition:transform var(--cp-mid) var(--cp-ease-jelly);
}
.cp-menu__icon img{width:22px;height:22px;object-fit:contain;}
.cp-menu__item:hover .cp-menu__icon{transform:translateY(-2px) rotate(-8deg) scale(1.08);}
.cp-menu__chev{width:14px;height:14px;object-fit:contain;opacity:.55;transition:transform var(--cp-mid) var(--cp-ease-jelly), opacity var(--cp-fast);}
.cp-menu__item:hover .cp-menu__chev{transform:translateX(-4px);opacity:1;}
.cp-menu__count{
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--clay-wine),var(--clay-wine-dark));
  box-shadow:0 2px 0 var(--clay-wine-deep);
}
.cp-menu__item--danger{color:var(--clay-wine);}
.cp-menu__item--danger:hover{background:linear-gradient(90deg, rgba(232,167,176,.45), rgba(232,167,176,.12));}
.cp-menu__sep{height:1px;margin:6px 10px;background:repeating-linear-gradient(90deg,var(--cp-line-strong) 0 6px,transparent 6px 11px);}

/* ---------- jelly helpers ---------- */
.cp-jelly-hover{transition:transform var(--cp-mid) var(--cp-ease-jelly);}
.cp-jelly-hover:hover{animation:cpJelly .7s ease both;}
.cp-hop:hover img,.cp-hop:focus-visible img{animation:cpHop .55s var(--cp-ease-jelly);}
.cp-attention{animation:cpAttention 7s ease-in-out infinite;transform-origin:50% 90%;}
.cp-attention:hover{animation:none;}

/* ---------- scroll reveal (only hides content once JS is confirmed running) ---------- */
html.cp-js [data-reveal]{
  opacity:0;
  transform:translate3d(0,28px,0) scale(.97);
  transition:opacity .7s var(--cp-ease-out), transform .8s var(--cp-ease-jelly);
  transition-delay:var(--cp-delay, 0ms);
}
html.cp-js [data-reveal="pop"]{transform:scale(.82);}
html.cp-js [data-reveal="left"]{transform:translate3d(-40px,0,0);}
html.cp-js [data-reveal="right"]{transform:translate3d(40px,0,0);}
html.cp-js [data-reveal="tilt"]{transform:translate3d(0,30px,0) rotate(-3deg) scale(.95);}
html.cp-js [data-reveal="drop"]{transform:translate3d(0,-30px,0) scale(.96);}
html.cp-js [data-reveal].is-in{opacity:1;transform:none;}

/* ---------- click ripple ("chocolate splash") — overlay, never mutates the button ---------- */
.cp-ripple-host{position:fixed;pointer-events:none;overflow:hidden;z-index:2147483646;}
.cp-ripple-host > i{
  position:absolute;border-radius:50%;background:currentColor;opacity:.26;
  transform:scale(0);animation:cpRipple .62s var(--cp-ease-out) forwards;
}

/* ---------- sprinkles burst (ChocoFX.burst) ---------- */
.cp-sprinkle{
  position:fixed;left:0;top:0;width:9px;height:4px;border-radius:4px;pointer-events:none;
  z-index:2147483647;will-change:transform,opacity;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.cp-sprinkle--dot{width:6px;height:6px;border-radius:50%;}

/* ---------- navigation progress bar (candy cane) ---------- */
.cp-nav-progress{
  position:fixed;top:0;right:0;left:0;height:4px;z-index:2147483647;pointer-events:none;
  transform-origin:right center;transform:scaleX(0);opacity:0;
  background:repeating-linear-gradient(-45deg,var(--clay-wine) 0 10px,var(--clay-gold) 10px 20px);
  background-size:28px 100%;
  box-shadow:0 1px 6px rgba(166,25,46,.35);
}
.cp-nav-progress.is-on{opacity:1;animation:cpCandyRun .6s linear infinite;transition:transform 2.4s cubic-bezier(.1,.7,.2,1), opacity .2s;transform:scaleX(.82);}
.cp-nav-progress.is-done{opacity:0;transform:scaleX(1);transition:transform .25s ease, opacity .35s ease .2s;}

/* ---------- cross-page transition (Chrome / Edge; ignored elsewhere) ---------- */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:cpPageOut .22s var(--cp-ease-in) both;}
::view-transition-new(root){animation:cpPageIn .42s var(--cp-ease-out) both;}
header.cp-header{view-transition-name:cp-site-header;}
::view-transition-group(cp-site-header){animation:none;}
::view-transition-old(cp-site-header),::view-transition-new(cp-site-header){animation:none;mix-blend-mode:normal;}

/* ---------- keyframes ---------- */
@keyframes cpPopIn{from{opacity:0;scale:.9;translate:0 -10px;}to{opacity:1;scale:1;translate:0 0;}}
@keyframes cpRiseIn{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes cpSlideInRow{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
@keyframes cpJelly{0%{transform:scale(1,1);}25%{transform:scale(1.12,.88);}45%{transform:scale(.92,1.08);}65%{transform:scale(1.04,.96);}85%{transform:scale(.99,1.01);}100%{transform:scale(1,1);}}
@keyframes cpHop{0%{transform:translateY(0) rotate(0);}40%{transform:translateY(-6px) rotate(-10deg) scale(1.1);}70%{transform:translateY(1px) rotate(4deg) scale(.96);}100%{transform:none;}}
@keyframes cpAttention{0%,86%,100%{transform:rotate(0);}88%{transform:rotate(-12deg) scale(1.06);}90%{transform:rotate(10deg) scale(1.06);}92%{transform:rotate(-7deg);}94%{transform:rotate(5deg);}96%{transform:rotate(-2deg);}}
@keyframes cpRipple{to{transform:scale(1);opacity:0;}}
@keyframes cpCandyRun{to{background-position:-28px 0;}}
@keyframes cpPageOut{to{opacity:0;transform:translateY(-6px) scale(.995);}}
@keyframes cpPageIn{from{opacity:0;transform:translateY(14px);}}
@keyframes cpFloat{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-7px) rotate(3deg);}}
@keyframes cpSpinIn{from{opacity:0;transform:rotate(-120deg) scale(.4);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion: reduce){
  .cp-pop:not(.hidden),.cp-stagger > *,.cp-attention,.cp-jelly-hover:hover,.cp-hop:hover img{animation:none !important;}
  html.cp-js [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;}
  .cp-ripple-host,.cp-sprinkle{display:none !important;}
  ::view-transition-old(root),::view-transition-new(root){animation:none !important;}
}