/* 2024 · Sabeti Records — "crate" intro. Every selector is scoped to .in-crate. */
.in-crate .cr-out,.in-crate .cr-in{position:absolute;inset:0;pointer-events:none}
.in-crate .cr-out{z-index:1}
.in-crate .cr-night{position:absolute;inset:0;background:
  radial-gradient(ellipse 70% 60% at 62% 45%,rgba(120,70,60,.35),transparent 70%),
  linear-gradient(335deg,#170a0c 22px,transparent 22px),linear-gradient(155deg,#170a0c 22px,transparent 22px),
  linear-gradient(335deg,#170a0c 22px,transparent 22px),linear-gradient(155deg,#170a0c 22px,transparent 22px),#2a1416;
  background-size:100% 100%,58px 58px,58px 58px,58px 58px,58px 58px;background-position:0 0,0 2px,4px 35px,29px 31px,34px 6px}
.in-crate .cr-clip{position:absolute;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.in-crate .cr-cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;perspective:1600px}
.in-crate .cr-cam>*{position:absolute}
.in-crate .cr-shop{left:0;top:0;width:100%;height:100%;display:block}
.in-crate .cr-glow{background:
  radial-gradient(ellipse 70% 26% at 50% 60%,rgba(255,238,196,.9),rgba(255,222,165,.45) 45%,rgba(255,210,150,0) 100%),
  repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 7.2%,rgba(35,18,10,.32) 7.2% 7.6%),
  linear-gradient(180deg,#2a150e 0%,#4e2a1a 20%,#8a5030 40%,#cf9660 56%,#bb814a 72%,#734526 90%,#45291a 100%)}   /* a lit room: dark ceiling, shelves, a pool of lamp light, the floor */
.in-crate .cr-bloom{border-radius:50%;background:radial-gradient(ellipse,rgba(255,225,170,.75) 0%,rgba(255,205,140,.35) 35%,rgba(255,190,120,0) 70%);will-change:transform,opacity;opacity:0}
.in-crate .cr-spill{transform-origin:50% 0;clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,224,170,.95),rgba(255,210,150,.45) 45%,rgba(255,200,140,0));will-change:transform,opacity;opacity:0}
.in-crate .cr-leaf{will-change:transform;backface-visibility:visible;transform-style:preserve-3d}
.in-crate .cr-leaf.l{transform-origin:0 50%}
.in-crate .cr-leaf.r{transform-origin:100% 50%}
.in-crate .cr-leaf img{position:absolute;inset:0;width:100%;height:100%;display:block;box-shadow:0 0 0 1px rgba(20,30,40,.25)}
.in-crate .cr-people{transform-origin:50% 50%;will-change:transform}
.in-crate .cr-people img{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}

/* ---- inside the shop ---- */
.in-crate .cr-wall{position:absolute;inset:0;background:
  radial-gradient(ellipse 90% 55% at 50% 0%,rgba(255,214,150,.22),transparent 70%),
  linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 100%),
  linear-gradient(335deg,#2b1315 22px,transparent 22px),linear-gradient(155deg,#2b1315 22px,transparent 22px),
  linear-gradient(335deg,#2b1315 22px,transparent 22px),linear-gradient(155deg,#2b1315 22px,transparent 22px),#4a2325;
  background-size:100% 100%,100% 100%,58px 58px,58px 58px,58px 58px,58px 58px;background-position:0 0,0 0,0 2px,4px 35px,29px 31px,34px 6px}
.in-crate .cr-lights i{position:absolute;width:5px;height:5px;margin:-2px 0 0 -2px;border-radius:50%;background:#ffe2a6;box-shadow:0 0 6px 2px rgba(255,214,150,.75),0 0 18px 6px rgba(255,200,130,.25);will-change:opacity}
.in-crate .cr-neon{position:absolute;z-index:1;display:block;transform:translateX(-50%);will-change:transform,opacity;opacity:0;filter:drop-shadow(0 0 14px rgba(255,236,150,.55))}
.in-crate .cr-crate{position:absolute;z-index:1;will-change:transform;transform-origin:50% 100%}
.in-crate .cr-shadow{position:absolute;left:-6%;width:112%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.6),rgba(0,0,0,0) 70%)}
.in-crate .cr-3d{position:absolute;inset:0;transform-style:preserve-3d}
.in-crate .cr-3d>*{position:absolute;left:0;width:100%}
.in-crate .cr-back,.in-crate .cr-side,.in-crate .cr-front{background:
  repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.06) 3px 5px,rgba(0,0,0,0) 5px 11px),
  repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 12px,rgba(255,255,255,.04) 12px 13px),
  linear-gradient(180deg,#6a4a30,#4e351f)}
.in-crate .cr-back{background:linear-gradient(180deg,#3a2616,#241609);box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.in-crate .cr-side{background:linear-gradient(180deg,#4d3520,#33210f)}
.in-crate .cr-side.l{transform-origin:0 50%}
.in-crate .cr-side.r{transform-origin:100% 50%}
.in-crate .cr-front{position:absolute;left:0;width:100%;z-index:2;border-top:3px solid #8a6a48;border-radius:2px 2px 4px 4px;box-shadow:0 18px 40px -10px rgba(0,0,0,.6),inset 0 -14px 24px rgba(0,0,0,.25);pointer-events:none}
.in-crate .cr-front::before{content:"";position:absolute;left:0;right:0;top:56%;height:6%;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.08));}
.in-crate .cr-front::after{content:"SABETI RECORDS · CRATE 01";position:absolute;left:50%;top:18%;transform:translateX(-50%);font-family:var(--sans);font-size:1em;letter-spacing:.32em;color:rgba(255,232,200,.6);white-space:nowrap}
.in-crate .cr-sl{transform-origin:50% 100%;transform-style:flat;will-change:transform,opacity;background:#1a1512;border-radius:1px;box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 -1px 0 rgba(0,0,0,.4) inset,0 6px 18px rgba(0,0,0,.45)}
.in-crate .cr-sl img{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:1px}
.in-crate .cr-sl::after{content:"";position:absolute;inset:0;border-radius:1px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%,rgba(0,0,0,.18));pointer-events:none}
.in-crate .cr-sl.div{background:linear-gradient(180deg,#d8c4a0,#c4ad86);box-shadow:0 0 0 1px rgba(0,0,0,.15),0 6px 18px rgba(0,0,0,.4);color:#3b2a1a;font-family:var(--sans)}
.in-crate .cr-sl.div::after{background:linear-gradient(160deg,rgba(255,255,255,.25),rgba(255,255,255,0) 50%,rgba(0,0,0,.06))}
.in-crate .cr-sl.div i{position:absolute;left:6%;bottom:100%;padding:.35em .9em .3em;background:#e8dcc2;border-radius:3px 3px 0 0;border:1px solid rgba(0,0,0,.18);border-bottom:0;font-style:normal;font-size:.5em;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.in-crate .cr-sl.div b{position:absolute;left:10%;right:10%;top:20%;font-family:var(--serif);font-weight:300;font-style:italic;font-size:2em;line-height:1;letter-spacing:-.01em;color:#2e2014}
.in-crate .cr-sl.div span{position:absolute;left:10%;right:10%;top:46%;font-size:.72em;line-height:1.5;letter-spacing:.05em;color:#3b2a1a}
.in-crate .cr-sl.div span::after{content:"";position:absolute;left:0;top:-1em;width:2.2em;height:1px;background:rgba(59,42,26,.5)}
.in-crate .cr-disc{transform-origin:50% 100%;border-radius:50%;background:
  radial-gradient(circle,#2a2a2a 0 11%,var(--accent) 11% 21%,#111 21% 23%,transparent 23%),
  repeating-radial-gradient(circle,#1c1c1c 0 2px,#0b0b0b 2px 4px);box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);will-change:transform,opacity}
.in-crate .cr-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,rgba(255,255,255,0) 0 20%,rgba(255,255,255,.12) 27%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 62%,rgba(255,255,255,.1) 70%,rgba(255,255,255,0) 78%)}
.in-crate .cr-wash{position:absolute;z-index:2;pointer-events:none;opacity:0;will-change:opacity;background:radial-gradient(ellipse at 55% 60%,#fff6e4 0%,#f6d7a6 40%,#d9a56e 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}