/* Shared enhancement for the Readymag and static case-study preloaders. */
:where(.case-loader,.spock-loader).uxp-case-loader{
  --uxp-loader-mark-half:clamp(44px,5vw,72px);
  --uxp-loader-copy-size:clamp(22px,2.1vw,34px);
}

.spock-loader.uxp-case-loader{--uxp-loader-mark-half:31px}

/* Page engines mark their DOM ready before the loader has visually caught up
   with factual media progress. Keep the cover until the counter itself reaches
   100%; case-loader.js then adds uxp-loader-finished. */
html:not(.uxp-loader-finished) :where(.case-loader,.spock-loader).uxp-case-loader{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

.uxp-case-loader .case-loader__percent,
.uxp-case-loader .case-loader__phrase{
  position:absolute;
  z-index:3;
  left:50%;
  width:min(760px,calc(100vw - 40px));
  margin:0;
  color:#fff;
  font-family:'Euclid Flex',Arial,sans-serif;
  font-size:var(--uxp-loader-copy-size);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.015em;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  -webkit-font-smoothing:antialiased;
}

.uxp-case-loader .case-loader__percent{
  top:calc(50% - var(--uxp-loader-mark-half) - clamp(64px,5.5vw,88px));
  transform:translate3d(-50%,0,0);
  opacity:.96;
  font-variant-numeric:tabular-nums;
}

.uxp-case-loader .case-loader__phrase{
  top:calc(50% + var(--uxp-loader-mark-half) + clamp(46px,4.2vw,66px));
  min-height:1.2em;
  transform:translate3d(-50%,0,0);
  opacity:.88;
  transition:opacity .22s ease,transform .42s cubic-bezier(.16,1,.3,1);
}

.uxp-case-loader .case-loader__phrase.is-changing{
  opacity:0;
  transform:translate3d(-50%,9px,0);
}

.uxp-case-loader .case-loader__line,
.uxp-case-loader .spock-loader__line{display:none!important}

@media(max-width:600px){
  :where(.case-loader,.spock-loader).uxp-case-loader{--uxp-loader-copy-size:clamp(20px,6vw,26px)}
  .uxp-case-loader .case-loader__percent{top:calc(50% - var(--uxp-loader-mark-half) - 58px)}
  .uxp-case-loader .case-loader__phrase{top:calc(50% + var(--uxp-loader-mark-half) + 42px)}
}

@media(prefers-reduced-motion:reduce){
  .uxp-case-loader .case-loader__phrase{transition:none}
}

/* ===== прелоадеры кейсов: белый логотип, без свечения, ровное затемнение ===== */
:where(.case-loader,.spock-loader)::before{display:none!important}
:where(.case-loader,.spock-loader) .case-loader__mark img,
:where(.case-loader,.spock-loader) .case-loader__mark svg,
.spock-loader__logo{filter:brightness(0) invert(1)!important;opacity:1!important}
:where(.case-loader,.spock-loader) .case-loader__mark{filter:none!important;opacity:1!important}
.spock-loader__glow{display:none!important}

/* кадр карточки под прелоадером: тот же размытый фон, что и в каталоге */
.case-loader__bg{position:absolute;inset:0;overflow:hidden;z-index:0;opacity:1;transition:opacity .5s ease}
.case-loader__bg.off{opacity:0}
.case-loader__bg img{position:absolute;left:-12%;top:-12%;width:124%;height:124%;object-fit:cover;filter:blur(26px) saturate(1.9) brightness(1.02)}
.case-loader__bg::after{content:"";position:absolute;inset:0;background:#0b0b0b;opacity:.66}
@media (max-width:768px){.case-loader__bg img{filter:blur(16px) saturate(1.9) brightness(1.02)}}
:where(.case-loader,.spock-loader) .case-loader__mark,
:where(.case-loader,.spock-loader) .case-loader__percent,
:where(.case-loader,.spock-loader) .case-loader__phrase,
:where(.case-loader,.spock-loader) .case-loader__line,
.spock-loader__logo{position:relative;z-index:1}

/* ===== стык каталога и страницы кейса =====
   Фаза 1: под прелоадером кадр карточки (.case-loader__bg).
   Фаза 2: он плавно тает, а из-под него проступает страница кейса — тоже
           размытая, поэтому подмена не читается как рывок.
   Фаза 3: страница готова — размытие тает, прелоадер уходит. */
html.uxp-warm .mag-pages-container,
html.uxp-warm .page-content-container,
html.uxp-warm .case-page,
html.uxp-warm .spock-page,
html.uxp-warm .spock-shell,
html.uxp-warm .spock-bg{
  filter:blur(26px) saturate(1.9) brightness(1.02);
  transition:filter 1.9s cubic-bezier(.16,.78,.28,1);
  will-change:filter}
html.uxp-warm-out .mag-pages-container,
html.uxp-warm-out .page-content-container,
html.uxp-warm-out .case-page,
html.uxp-warm-out .spock-page,
html.uxp-warm-out .spock-shell,
html.uxp-warm-out .spock-bg{filter:none}
html.uxp-warm body{overflow:hidden}
@media (max-width:768px){
  html.uxp-warm .mag-pages-container,
  html.uxp-warm .page-content-container,
  html.uxp-warm .case-page,
  html.uxp-warm .spock-page,
html.uxp-warm .spock-shell,
html.uxp-warm .spock-bg{filter:blur(16px) saturate(1.9) brightness(1.02)}
  /* проявление должно побеждать и здесь, иначе размытие снимается рывком */
  html.uxp-warm-out .mag-pages-container,
  html.uxp-warm-out .page-content-container,
  html.uxp-warm-out .case-page,
  html.uxp-warm-out .spock-page,
html.uxp-warm-out .spock-shell,
html.uxp-warm-out .spock-bg{filter:none}
}
@media (prefers-reduced-motion:reduce){
  html.uxp-warm .mag-pages-container,
  html.uxp-warm .page-content-container,
  html.uxp-warm .case-page,
  html.uxp-warm .spock-page,
html.uxp-warm .spock-shell,
html.uxp-warm .spock-bg{filter:none!important;transition:none!important}
}
/* Кадр карточки не просто гаснет: он одновременно ещё сильнее уходит
   в расфокус и чуть раздаётся — тогда смена одного размытого фона на
   другой читается как перетекание, а не как переключение. */
.case-loader__bg{filter:blur(0px) saturate(1);transition:opacity 1.15s cubic-bezier(.4,0,.35,1),
  filter 1.15s cubic-bezier(.4,0,.35,1),transform 1.3s cubic-bezier(.22,1,.36,1);
  will-change:opacity,filter,transform}
.case-loader__bg.uxp-handover{opacity:0;filter:blur(14px) saturate(1.15);transform:scale(1.06)}
/* страница под ним в этот же момент чуть отпускает расфокус — фоны
   встречаются на близкой резкости, поэтому стык не заметен */
html.uxp-warm-in .mag-pages-container,
html.uxp-warm-in .page-content-container,
html.uxp-warm-in .case-page,
html.uxp-warm-in .spock-shell,
html.uxp-warm-in .spock-page{filter:blur(21px) saturate(1.9) brightness(1.02)}
@media (max-width:768px){
  html.uxp-warm-in .mag-pages-container,
  html.uxp-warm-in .page-content-container,
  html.uxp-warm-in .case-page,
  html.uxp-warm-in .spock-shell,
  html.uxp-warm-in .spock-page{filter:blur(13px) saturate(1.9) brightness(1.02)}
}
/* пока идёт передача, прелоадер перестаёт быть глухим: сквозь него
   видно размытую страницу кейса, а текст держит ровная вуаль */
html.uxp-warm-in .case-loader,
html.uxp-warm-in .spock-loader{background:transparent!important}
html.uxp-warm-in .case-loader::after,
html.uxp-warm-in .spock-loader::after{content:"";position:absolute;inset:0;z-index:0;
  background:#0b0b0b;opacity:.66;pointer-events:none}
/* z-index поверх вуали; position НЕ трогаем — absolute-раскладка
   процентов и фраз должна остаться нетронутой */
html.uxp-warm-in .case-loader__mark,
html.uxp-warm-in .spock-loader__logo{z-index:2}
html.uxp-warm-in .case-loader__percent,
html.uxp-warm-in .case-loader__phrase,
html.uxp-warm-in .case-loader__line{z-index:3}

/* ===== ФИНАЛЬНОЕ ПРОЯВЛЕНИЕ =====
   Идёт последним намеренно: правило .uxp-warm-in выше по файлу имеет ту же
   силу, и без этого блока размытие не анимировалось, а сбрасывалось скачком. */
html.uxp-warm-out .mag-pages-container,
html.uxp-warm-out .page-content-container,
html.uxp-warm-out .case-page,
html.uxp-warm-out .spock-shell,
html.uxp-warm-out .spock-page{
  filter:blur(0px) saturate(1) brightness(1);
  transition:filter 1.9s cubic-bezier(.16,.78,.28,1)}
@media (max-width:768px){
  html.uxp-warm-out .mag-pages-container,
  html.uxp-warm-out .page-content-container,
  html.uxp-warm-out .case-page,
  html.uxp-warm-out .spock-shell,
  html.uxp-warm-out .spock-page{filter:blur(0px) saturate(1) brightness(1)}
}