/* TypeMotion's Essentials folder, with the surrounding product's palette. */
html[data-cs-product="quickfx"]{
  --folder-back-top:#D96919;--folder-back-bottom:#AE4512;--folder-tab:#C35313;
  --folder-front-top:#FF9B43;--folder-front-bottom:#EC711B;
}
html[data-cs-product="motionease"]{
  --folder-back-top:#3467DE;--folder-back-bottom:#244CBC;--folder-tab:#2B59CC;
  --folder-front-top:#6094FF;--folder-front-bottom:#3F73ED;
}
.cs-folder-sec{max-width:820px;margin:0 auto;padding:20px 32px 96px;text-align:center}
.cs-folder-sec h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:56px;
  letter-spacing:-.01em;line-height:1.04;margin:0 0 14px;color:#fff}
.cs-folder-sub{margin:0 0 40px;font-size:17px;line-height:1.6;color:#8C8CA0}
.cs-folder{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;width:344px;margin:0 auto;padding:46px 32px 44px;border-radius:20px;
  background:#0F1013;border:1px solid rgba(255,255,255,.09);cursor:pointer;
  transition:border-color .5s ease, box-shadow .5s ease}
.cs-folder:hover,.cs-folder:focus-within{border-color:rgba(var(--product-rgb),.34);
  box-shadow:0 24px 70px -20px rgba(var(--product-rgb),.4)}
.cs-folder-stage{position:relative;width:220px;height:214px;display:flex;
  align-items:center;justify-content:center;perspective:1000px}
.cs-folder-back,.cs-folder-front,.cs-folder-shine{position:absolute;width:146px;height:104px;
  border-radius:11px;transform-origin:bottom center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.cs-folder-back{background:linear-gradient(180deg,var(--folder-back-top),var(--folder-back-bottom));z-index:10;
  box-shadow:0 3px 10px rgba(0,0,0,.4)}
.cs-folder-tab{position:absolute;width:56px;height:16px;border-radius:6px 6px 0 0;
  background:var(--folder-tab);z-index:10;top:calc(50% - 52px - 14px);left:calc(50% - 73px + 16px);
  transform-origin:bottom center;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.cs-folder-front{top:calc(50% - 52px + 5px);z-index:30;
  background:linear-gradient(180deg,var(--folder-front-top),var(--folder-front-bottom));box-shadow:0 8px 20px rgba(0,0,0,.45)}
.cs-folder-shine{top:calc(50% - 52px + 5px);z-index:31;pointer-events:none;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 50%)}
.cs-folder:hover .cs-folder-back,.cs-folder:focus-within .cs-folder-back,.cs-folder.is-open .cs-folder-back{transform:rotateX(-15deg)}
.cs-folder:hover .cs-folder-tab,.cs-folder:focus-within .cs-folder-tab,.cs-folder.is-open .cs-folder-tab{transform:rotateX(-25deg) translateY(-2px)}
.cs-folder:hover .cs-folder-front,.cs-folder:hover .cs-folder-shine,
.cs-folder:focus-within .cs-folder-front,.cs-folder:focus-within .cs-folder-shine,
.cs-folder.is-open .cs-folder-front,.cs-folder.is-open .cs-folder-shine{
  transform:rotateX(25deg) translateY(8px)}
.cs-folder-cards{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20}
.cs-folder-card{position:absolute;left:-38px;top:-38px;width:76px;height:76px;border-radius:20px;
  overflow:hidden;display:block;text-decoration:none;background:#15151E;
  border:1px solid rgba(var(--product-rgb),.34);box-shadow:0 10px 24px rgba(0,0,0,.55);
  opacity:0;transform:translate(0,0) rotate(0deg) scale(.5);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1), opacity .6s cubic-bezier(.34,1.56,.64,1),
             box-shadow .25s ease;
  transition-delay:calc(var(--i) * 80ms);z-index:calc(10 - var(--i))}
.cs-folder-card:nth-child(1){--rot:-14deg;--tx:-80px}
.cs-folder-card:nth-child(2){--rot:0deg;--tx:0px}
.cs-folder-card:nth-child(3){--rot:14deg;--tx:80px}
.cs-folder:hover .cs-folder-card,.cs-folder:focus-within .cs-folder-card,.cs-folder.is-open .cs-folder-card{
  opacity:1;transform:translate(var(--tx),-84px) rotate(var(--rot)) scale(1)}
.cs-folder-card:hover{box-shadow:0 10px 24px rgba(0,0,0,.55), 0 0 0 2px rgba(var(--product-rgb),.6)}
.cs-folder-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cs-folder h3{margin:18px 0 2px;font-size:18px;font-weight:600;color:#fff;
  transition:transform .3s ease}
.cs-folder:hover h3,.cs-folder:focus-within h3{transform:translateY(4px)}
.cs-folder-count{margin:0;font-size:14px;color:#8C8CA0;transition:opacity .3s ease}
.cs-folder:hover .cs-folder-count,.cs-folder:focus-within .cs-folder-count{opacity:.7}
.cs-folder-hint{position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-size:12px;color:#8C8CA0;opacity:.6;transition:opacity .3s ease, transform .3s ease}
.cs-folder:hover .cs-folder-hint,.cs-folder:focus-within .cs-folder-hint,.cs-folder.is-open .cs-folder-hint{
  opacity:0;transform:translateY(10px)}
/* Same geometry, gradient and hard offset shadow as the hero's Buy button, so the
   two read as one control rather than two designs. */
.cs-folder-buy{margin-top:34px}
@media(max-width:640px){.cs-folder-sec h2{font-size:40px}}
.cs-bundle-badge{display:inline-flex;align-items:center;gap:10px;height:56px;
  padding:0 20px 0 12px;border-radius:999px;
  border:1px solid rgba(var(--product-rgb),.20);background:rgba(15,16,19,.9);
  box-shadow:0 2px 16px rgba(0,0,0,.35);cursor:default;user-select:none;
  transition:transform .32s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s ease}
.cs-bundle-badge:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 6px 28px rgba(0,0,0,.55)}
.cs-bundle-badge-strip{position:relative;flex:none;height:54px;width:68px;
  transition:width .32s cubic-bezier(.2,.9,.3,1.2)}
.cs-bundle-badge:hover .cs-bundle-badge-strip{width:146px}
.cs-bundle-badge-strip > i{position:absolute;left:0;top:6px;width:42px;height:42px;
  border-radius:10px;overflow:hidden;border:2px solid #0F1013;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  transform:translate(calc(var(--i) * 13px),0) rotate(var(--rest));
  z-index:calc(3 - var(--i));
  transition:transform .32s cubic-bezier(.2,.9,.3,1.2)}
.cs-bundle-badge-strip > i:nth-child(1){--rest:-14deg;--open:-8deg;--arc:9px}
.cs-bundle-badge-strip > i:nth-child(2){--rest:-7deg;--open:-4deg;--arc:0px}
.cs-bundle-badge-strip > i:nth-child(3){--rest:-2deg;--open:-1deg;--arc:9px}
.cs-bundle-badge:hover .cs-bundle-badge-strip > i{
  transform:translate(calc(var(--i) * 52px),var(--arc)) rotate(var(--open));
  z-index:calc(1 + var(--i))}
.cs-bundle-badge-strip img{width:100%;height:100%;object-fit:cover;display:block}
.cs-bundle-badge-label{font-size:13px;font-weight:600;color:#D6D6E4;white-space:nowrap;letter-spacing:-.01em}
@media (prefers-reduced-motion: reduce){
  .cs-bundle-badge-strip{width:146px}
  .cs-bundle-badge-strip > i{transform:translate(calc(var(--i) * 52px),0) rotate(0deg)}
  .cs-bundle-badge, .cs-bundle-badge-strip, .cs-bundle-badge-strip > i{transition:none}
}
@media(max-width:760px){.cs-bundle-badge{height:50px;padding:0 16px 0 10px}
  .cs-bundle-badge-label{font-size:12px}}


.cs-folder-buy-wrap{margin-top:34px}
.cs-folder-sec .cs-bundle-badge{margin-bottom:24px}
.cs-folder{box-sizing:border-box;max-width:100%}
.cs-folder:focus-visible,.cs-folder-card:focus-visible{outline:2px solid var(--product-light);outline-offset:5px}
/* Opacity alone would leave the hidden icons clickable through the folder. */
.cs-folder-card{pointer-events:none}
.cs-folder:hover .cs-folder-card,.cs-folder:focus-within .cs-folder-card,.cs-folder.is-open .cs-folder-card{pointer-events:auto}
@media(max-width:760px){
  .cs-folder-sec{padding-left:20px;padding-right:20px}
  .cs-folder{width:100%;max-width:360px;padding:36px 18px 44px}
  .cs-folder-sec h2{font-size:40px}
  .cs-folder-sub{font-size:16px}
}
@media(max-width:380px){
  .cs-folder-sec .cs-bundle-badge{gap:6px;padding-right:12px}
  .cs-bundle-badge:hover .cs-bundle-badge-strip{width:120px}
  .cs-bundle-badge:hover .cs-bundle-badge-strip>i{transform:translate(calc(var(--i) * 39px),var(--arc)) rotate(var(--open))}
}
@media(prefers-reduced-motion:reduce){
  .cs-folder,.cs-folder *{transition:none!important}
}