/* ==========================================================================================
   STIKLET · hero: a crate of records. One sleeve per mood standing in 3D, the front one with its
   record out and turning; the mood's name huge above it. See DESIGN.md.
   Only transforms and opacity move here (no blend modes, reflections or animated custom properties).
   ========================================================================================== */
#site .cr{--s:min(400px,42vh,32vw);--cy:60%;position:relative;isolation:isolate;overflow:hidden;color:#F6F1FF;
  margin-top:-68px;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;
  padding:calc(68px + clamp(14px,2.6vh,30px)) 0 clamp(22px,3.6vh,38px)}
#site .cr>.wrap{width:100%}
#site .cr-bg{position:absolute;inset:0;z-index:-2;background:#2A1452}
#site .cr-bg>i{position:absolute;inset:0}
/* a soft shadow on the floor under the crate */
#site .cr-floor{position:absolute;left:50%;top:calc(var(--cy) + var(--s) * .5);width:calc(var(--s) * 3.2);height:calc(var(--s) * .34);translate:-50% -46%;
  background:radial-gradient(closest-side,rgba(6,3,12,.42),transparent);pointer-events:none}
#site.m-pre .cr-top>*,#site.m-pre .cr-bot>*{opacity:0;animation:mpre 0s 3s forwards}
/* over the hero the header is see-through; it gets its bar back once you scroll */
#site header:not(.scrolled){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
#site header{transition:background-color .35s ease,box-shadow .3s}

#site .cr-top{display:flex;justify-content:center;position:relative;z-index:3}
#site .hero .cr-kick{margin:0;font-family:var(--body);font-size:12px;font-weight:800;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,241,255,.7)}

/* the middle: the mood's name above, the crate in front */
#site .cr-mid{position:relative;min-height:calc(var(--s) * 1.62)}
#site .cr-word{position:absolute;left:0;right:0;top:calc(var(--cy) - var(--s) / 2 + var(--fs,160px) * .3);height:0;display:flex;justify-content:center;align-items:flex-end;pointer-events:none;z-index:0;will-change:transform}
#site .cr-line{display:flex;white-space:pre;font-family:var(--display);font-weight:700;font-size:var(--fs,160px);line-height:.9;letter-spacing:-.06em;
  overflow:hidden;padding:.06em .04em .1em;margin-top:-.04em;flex-shrink:0}
#site .cr-line:not(.out):not(.cr-meas){position:relative}
#site .cr-line.out{position:absolute;bottom:0}
#site .cr-line span{display:inline-block}
#site .cr-meas{position:absolute;visibility:hidden;font-size:100px;padding:0}
#site .cr-stage{position:absolute;inset:0;z-index:1;perspective:1500px;perspective-origin:50% var(--cy);touch-action:pan-y;user-select:none;-webkit-user-select:none;will-change:transform}
#site .cr-fine .cr-stage,#site .cr-fine .cr-stage *{cursor:none}
#site .cr-item{position:absolute;left:50%;top:var(--cy);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);will-change:transform;backface-visibility:hidden}
#site .cr-hold{position:absolute;inset:0}
#site .cr-item .dh-disc{position:absolute;left:4%;top:4%;width:92%;height:92%;transition:transform .9s cubic-bezier(.2,.8,.2,1) .12s;will-change:transform}
#site .cr-item.on .dh-disc{transform:translateX(42%)}
#site .cr-item.flipped .dh-disc{transform:none;transition:transform .4s ease}
#site .cr-item:not(.on) .dh-disc svg{animation-play-state:paused}
#site .cr-item .dh-sleeve{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,.9,.25,1)}
#site .cr-item.on:not(.flipped) .dh-sleeve:hover{transform:translateY(-8px)}
#site .cr-item .dh-face{box-shadow:0 30px 60px rgba(0,0,0,.35)}
#site .cr-dim{position:absolute;inset:0;z-index:2;border-radius:6px;background:#0B0710;opacity:0;pointer-events:none}
#site .cr-stage.drag .dh-sleeve{transform:none!important}

/* the bottom row: just the two buttons, centred under the crate and coloured by the mood */
#site .cr-bot{display:flex;justify-content:center;position:relative;z-index:3}
#site .cr-cta .ctas{justify-content:center;flex-wrap:wrap;gap:14px}
#site .cr .btn{height:58px;padding:0 30px;border-radius:29px;font-size:16px;
  transition:background-color .7s ease,color .7s ease,border-color .7s ease,box-shadow .3s,transform .25s var(--spring),translate .35s var(--spring)}
#site .cr .btn.primary{background:var(--hc,#E2D1FF);color:var(--hk,#170D29);box-shadow:0 16px 40px rgba(6,3,12,.3)}
#site .cr .btn.primary:hover{box-shadow:0 20px 50px rgba(6,3,12,.4)}
#site .cr .btn.soft{background:transparent;color:#F6F1FF;border:1.5px solid color-mix(in srgb,var(--hc,#E2D1FF) 50%,transparent);box-shadow:none}
#site .cr .btn.soft:hover{background:color-mix(in srgb,var(--hc,#E2D1FF) 14%,transparent);border-color:var(--hc,#E2D1FF)}

/* the cursor over the crate: sits exactly on the pointer */
#site .cr-cur{position:fixed;left:0;top:0;z-index:70;width:0;height:0;pointer-events:none;will-change:transform}
#site .cr-cur b{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;text-align:center;padding:0 10px;
  background:var(--cc,#E2D1FF);color:#120626;font-size:12.5px;font-weight:800;letter-spacing:.04em;line-height:1.15;
  transform:scale(0);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
#site .cr-cur.show b{transform:scale(1)}
#site .cr-cur.show.small b{transform:scale(.2)}

@media (max-width:999px){#site .cr{--s:min(360px,46vw,44vh)}}
@media (max-width:640px){
#site .cr{--s:min(64vw,300px);min-height:0;padding:calc(68px + 18px) 0 30px;gap:4px}
#site .cr-mid{min-height:calc(var(--s) * 1.72)}
#site .cr-cta .ctas{flex-wrap:wrap;justify-content:center}}
@media (min-width:1700px){#site .cr{--s:min(500px,44vh,30vw)}}