/* Общий загрузочный экран кейсов (п.10) и кнопка «All Cases» (п.11).
   Подключается в <head> главной и каждой страницы кейса — один и тот же экран по обе стороны перехода,
   поэтому склейка «папка → кейс» и «кейс → папки» выглядит как один непрерывный экран. */
.ckl{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;align-content:center;gap:26px;
  background:radial-gradient(60% 50% at 50% 50%,color-mix(in srgb,var(--c,#8b5cff) 10%,transparent),transparent 72%),#07080a;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s linear .45s;
  font-family:Onest,Inter,"Helvetica Neue",Arial,sans-serif}
.ckl.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s ease,visibility 0s}
.ckl-core{position:relative;width:64px;height:64px}
.ckl-core b{position:absolute;inset:22px;border-radius:50%;background:var(--c,#8b5cff);
  box-shadow:0 0 22px 2px color-mix(in srgb,var(--c,#8b5cff) 70%,transparent);animation:cklDot 1.1s ease-in-out infinite}
.ckl-core i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--c,#8b5cff);opacity:0;
  animation:cklRing 1.65s cubic-bezier(.2,.6,.3,1) infinite}
.ckl-core i+i{animation-delay:.55s}
.ckl-core i+i+i{animation-delay:1.1s}
.ckl-t{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.5);
  animation:cklTxt 1.65s ease-in-out infinite}
@keyframes cklDot{0%,100%{transform:scale(.8);opacity:.75}50%{transform:scale(1.25);opacity:1}}
@keyframes cklRing{0%{transform:scale(.35);opacity:.85}100%{transform:scale(1.6);opacity:0}}
@keyframes cklTxt{0%,100%{opacity:.45}50%{opacity:.85}}
/* раскрытие: точка разлетается, экран уходит */
.ckl.out{opacity:0;visibility:hidden;transition:opacity .7s cubic-bezier(.5,0,.3,1) .12s,visibility 0s linear .85s}
.ckl.out .ckl-core{transform:scale(3.2);opacity:0;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .6s ease}
.ckl.out .ckl-t{opacity:0;transition:opacity .25s}
@media (prefers-reduced-motion:reduce){.ckl-core b,.ckl-core i,.ckl-t{animation:none}.ckl-core i{opacity:.4}}

/* «All Cases» — появляется в конце кейса, после последнего действия */
.ck-back{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:2147482000;
  display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 26px 0 12px;border-radius:99px;
  font:600 17px/1 Onest,Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:.01em;color:#0d0d0b;text-decoration:none;
  background:linear-gradient(180deg,#DBFF6A,#C6F135);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 40px -10px rgba(198,241,53,.75),0 0 0 1px rgba(0,0,0,.25);
  transform:translate(-50%,140%) scale(.9);opacity:0;visibility:hidden;
  transition:transform .6s cubic-bezier(.3,1.5,.5,1),opacity .35s ease,visibility 0s linear .6s,filter .2s}
.ck-back.on{transform:translate(-50%,0) scale(1);opacity:1;visibility:visible;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .35s ease,visibility 0s,filter .2s}
.ck-back:hover{filter:brightness(1.06)}
.ck-back:active{transform:translate(-50%,0) scale(.97)}
.ck-back svg{width:34px;height:34px;flex:none;padding:8px;border-radius:50%;background:rgba(0,0,0,.12);
  stroke:#0d0d0b;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ck-back.on{animation:ckPulse 2.4s ease-in-out .8s infinite}
@keyframes ckPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 40px -10px rgba(198,241,53,.75),0 0 0 0 rgba(198,241,53,.45)}
  60%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 40px -10px rgba(198,241,53,.75),0 0 0 16px rgba(198,241,53,0)}}
@media (max-width:700px){.ck-back{height:52px;font-size:16px;padding:0 22px 0 10px}.ck-back svg{width:32px;height:32px}}