/* Daily Motivation Drawer: the pulled card pops up, and its copies in the belt light up.
   Loaded by templates/pages/home.php after motion.css. */

/* the top-menu "Draw Daily Card" button jumps here; keep the section clear of the sticky menu */
.drawer-stage{scroll-margin-top:84px}

/* belt: more room above the cards so a big hover jump is never clipped (total height unchanged) */
.drawer-stage .drawer-belt{margin-top:12px;padding-top:44px}

/* rolling cards: contents centred vertically */
.drawer-mini{justify-content:center}
.drawer-mini .drawer-mini-author{margin-top:0}

/* cards jump up on hover with a little spring */
.drawer-mini{transition:transform .35s cubic-bezier(.3,1.7,.5,1),border-color .25s ease,background .25s ease,box-shadow .3s ease}
.drawer-mini:hover,
.drawer-mini:focus-visible{
  transform:translateY(-26px) scale(1.04);
  border-color:var(--ac);background:var(--ac);color:#0D0B14;
  box-shadow:0 0 0 2px var(--ac),0 30px 44px -14px var(--ac);
}
/* on hover each card fills with its own colour, so the text switches to dark */
.drawer-mini:hover .drawer-mini-text,
.drawer-mini:focus-visible .drawer-mini-text{color:#0D0B14}
.drawer-mini:hover .drawer-mini-head,
.drawer-mini:hover .drawer-mini-author,
.drawer-mini:focus-visible .drawer-mini-head,
.drawer-mini:focus-visible .drawer-mini-author{color:rgba(13,11,20,.72)}
.drawer-mini:hover .drawer-mini-badge,
.drawer-mini:focus-visible .drawer-mini-badge{background:#0D0B14}
.drawer-mini.is-pulled{
  border-color:var(--ac);background:#1D1928;transform:translateY(-12px);
  box-shadow:0 0 0 2px var(--ac),0 18px 40px -14px var(--ac);
}
/* the pulled card must fill on hover too (this rule comes after .is-pulled, so it wins) */
.drawer-mini.is-pulled:hover,
.drawer-mini.is-pulled:focus-visible{
  transform:translateY(-26px) scale(1.04);
  border-color:var(--ac);background:var(--ac);color:#0D0B14;
  box-shadow:0 0 0 2px var(--ac),0 30px 44px -14px var(--ac);
}

/* the pop-up card */
.drawer-pop{
  --ac:var(--c1);
  position:absolute;z-index:5;
  top:270px;right:max(72px,calc((100vw - 1200px) / 2 + 160px));
  width:min(340px,80vw);min-height:300px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:36px 26px 28px;
  background:#17141F;color:var(--text,#F4F1FA);text-align:center;
  border:2px solid var(--ac);border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 44px -8px var(--ac);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,visibility 0s linear .25s;
}
.drawer-pop.show{
  opacity:1;visibility:visible;pointer-events:auto;cursor:pointer;
  transition:none;
  animation:drawer-pop-in .65s cubic-bezier(.2,.9,.25,1.15) both;
  transform:rotate(3deg);
}
.drawer-pop.accent-pink{--ac:var(--c1);--ac2:var(--c1-soft)}
.drawer-pop.accent-lime{--ac:var(--c3);--ac2:var(--c3-soft)}
.drawer-pop.accent-violet{--ac:var(--c5);--ac2:var(--c5-soft)}
.drawer-pop.accent-orange{--ac:var(--c2);--ac2:var(--c2-soft)}

/* close (x) button, top right of the card */
.drawer-pop-close{
  position:absolute;top:10px;right:10px;width:34px;height:34px;padding:0;border:2px solid var(--ac);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#0D0B14;color:var(--ac);font:700 22px/1 'DM Sans',sans-serif;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.drawer-pop-close:hover,
.drawer-pop-close:focus-visible{background:var(--ac);color:#0D0B14;transform:scale(1.1)}
.drawer-pop-close:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* Share button: the card's colour as a gradient */
.drawer-pop-share{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:6px;padding:11px 22px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--ac) 0%,var(--ac2,var(--ac)) 100%);
  color:#0D0B14;font:700 14px 'DM Sans',sans-serif;
  box-shadow:0 10px 24px -10px var(--ac);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.drawer-pop-share:hover,
.drawer-pop-share:focus-visible{transform:translateY(-2px) scale(1.04);filter:brightness(1.06);box-shadow:0 14px 28px -10px var(--ac)}
.drawer-pop-share:focus-visible{outline:3px solid #fff;outline-offset:2px}
.drawer-pop-share:disabled{opacity:.7;cursor:progress;transform:none}

.drawer-pop-badge{
  display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;
  border:3px solid var(--ac);background:#0D0B14;color:var(--ac);
  font-family:'Syne',sans-serif;font-weight:800;font-size:18px;
}
.drawer-pop-head{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted,#B9B3C9)}
.drawer-pop-text{
  font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(20px,2vw,26px);line-height:1.2;
  color:var(--ac);overflow-wrap:break-word;
}
.drawer-pop-author{margin-top:auto;font-size:14px;color:var(--muted,#B9B3C9)}
.drawer-pop-author:empty{display:none}

@keyframes drawer-pop-in{
  from{opacity:0;transform:translate(-160px,260px) rotate(-16deg) scale(.4)}
  60%{opacity:1;transform:translate(0,-10px) rotate(5deg) scale(1.05)}
  to{opacity:1;transform:rotate(3deg) scale(1)}
}

/* phones / tablets: an overlay at the bottom of the screen that closes itself */
@media (max-width:900px){
  .drawer-pop{
    position:fixed;z-index:60;top:auto;bottom:20px;left:0;right:0;margin:0 auto;
    width:min(340px,88vw);min-height:0;max-height:70vh;overflow:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .drawer-pop,.drawer-pop.show{animation:none;transition:none;transform:none}
  .drawer-mini{transition:none}
}