/* =====================================================================
   Объёмный стиль текста и плашек на всём сайте (как на обложке).
   Всё плавает синхронно: одна анимация, одна длительность, без задержек.
   Плавание — через свойство translate, чтобы не ломать transform элементов.
   ===================================================================== */
@keyframes s3dSheen{0%,15%{background-position:120% 0,0 0}60%,100%{background-position:-40% 0,0 0}}
@keyframes s3dSheenBox{0%,15%{background-position:120% 0}60%,100%{background-position:-40% 0}}
@keyframes s3dFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}

/* ---------- заголовки: тёмные ---------- */
.card .h1:not(.white):not(.cover-mmd):not(.s05-title),
.card .h2:not(.white){
  background:
    linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(170,225,235,.55) 46%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #171d22 0%, #08090b 60%, #000 100%);
  background-size:260% 100%, 100% 1em;
  background-repeat:no-repeat, repeat-y;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(1px 1px 0 #2b3640) drop-shadow(1px 1px 0 #3a4854) drop-shadow(1px 1px 0 #4a5a67) drop-shadow(4px 8px 10px rgba(25,60,75,.22));
  animation:s3dSheen 7s ease-in-out infinite, s3dFloat 7s ease-in-out infinite;
}

/* ---------- заголовки: белые (на цветных фонах, разделители) ---------- */
.card .h1.white:not(.s05-title),
.card .h2.white,
.card .h-mega:not(.cover-mmd){
  background:
    linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.95) 45%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #ffffff 0%, #f3f8fa 45%, #dbe9ef 100%);
  background-size:260% 100%, 100% 1em;
  background-repeat:no-repeat, repeat-y;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(1px 1px 0 #d7e7ec) drop-shadow(1px 1px 0 #bfd7e0) drop-shadow(1px 1px 0 #a7c7d3) drop-shadow(1px 1px 0 #92b8c6) drop-shadow(6px 12px 16px rgba(25,70,90,.22));
  animation:s3dSheen 7s ease-in-out infinite, s3dFloat 7s ease-in-out infinite;
}
/* у мега-заголовков бок глубже */
.card .h-mega:not(.cover-mmd){
  filter:drop-shadow(1px 1px 0 #e3eef2) drop-shadow(1px 1px 0 #cbdfe6) drop-shadow(1px 1px 0 #b3cfd9) drop-shadow(1px 1px 0 #9cbfcc) drop-shadow(2px 2px 0 #8bb3c2) drop-shadow(10px 20px 26px rgba(25,70,90,.24));
}

/* ---------- крупные цифры: бок того же цвета, темнее ---------- */
.card .num-xl, .card .num-l, .card .num-m{
  filter:drop-shadow(1px 1px 0 color-mix(in srgb, currentColor 86%, #000)) drop-shadow(1px 1px 0 color-mix(in srgb, currentColor 78%, #000)) drop-shadow(1px 1px 0 color-mix(in srgb, currentColor 70%, #000)) drop-shadow(3px 6px 8px rgba(25,60,75,.2));
  animation:s3dFloat 7s ease-in-out infinite;
}

.card .num-bg{filter:none;
  text-shadow:1px 1px 0 color-mix(in srgb, currentColor 86%, #000), 2px 2px 0 color-mix(in srgb, currentColor 78%, #000), 3px 3px 0 color-mix(in srgb, currentColor 70%, #000), 4px 7px 9px rgba(25,60,75,.2)}

/* ---------- плашки (класс p3d ставит js/depth.js по фону элемента) ---------- */
.p3d{animation:s3dFloat 7s ease-in-out infinite}
.p3d.p3d-nested{animation:none}
.p3d.p3d-sheen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(100deg, rgba(255,255,255,0) 35%, var(--sheen,rgba(255,255,255,.3)) 46%, rgba(255,255,255,0) 58%);
  background-size:260% 100%;background-repeat:no-repeat;animation:s3dSheenBox 7s ease-in-out infinite}

.p3d-light{--sheen:rgba(170,220,232,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 0 #e6eff2, 0 2px 0 #dbe8ed, 0 3px 0 #d0e1e7, 0 4px 0 #c6dae2,
    0 12px 22px rgba(25,70,90,.14), 0 26px 50px rgba(25,70,90,.12) !important}
.p3d-dark{--sheen:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 4px rgba(0,0,0,.45),
    0 1px 0 #20262b, 0 2px 0 #1c2126, 0 3px 0 #181c20, 0 4px 0 #14181b,
    0 10px 18px rgba(20,50,60,.26), 0 22px 40px rgba(20,50,60,.18) !important}
.p3d-color{--sheen:rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.12),
    0 1px 0 var(--e1), 0 2px 0 var(--e2), 0 3px 0 var(--e3), 0 4px 0 var(--e4),
    0 10px 18px rgba(25,60,75,.2), 0 22px 40px rgba(25,60,75,.14) !important}
.p3d-glass{--sheen:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 0 rgba(255,255,255,.45), 0 2px 0 rgba(200,225,232,.45), 0 3px 0 rgba(180,210,220,.4),
    0 12px 26px rgba(25,70,90,.14) !important}

@media (prefers-reduced-motion:reduce){
  .card .h1, .card .h2, .card .h-mega, .card .num-xl, .card .num-l, .card .num-m, .p3d, .p3d::after{animation:none !important}
}

/* ---------- «глубина как в iPhone» для фото постов (js/depthphoto.js) ---------- */
.dp-host{position:relative}
.dp-wrap{display:block}
.dp-win{position:absolute;overflow:hidden;pointer-events:none;border-radius:2px;--dx:0;--dy:0;contain:paint}
.dp-l{position:absolute;max-width:none;height:auto;margin:0 !important;clip-path:none !important;border-radius:0 !important;will-change:transform}
/* фон уходит «вдаль» сильнее, человек почти стоит — как обои с глубиной в iOS */
.dp-lbg{transform:scale(1.07) translate3d(calc(var(--dx) * -2.4%), calc(var(--dy) * -2%), 0)}
.dp-lfg{transform:scale(1.07) translate3d(calc(var(--dx) * .6%), calc(var(--dy) * .5%), 0);
  filter:drop-shadow(0 8px 12px rgba(20,40,50,.22))}
/* ===== блик «слева направо» убран отовсюду (по просьбе) — остаётся только объём и плавание ===== */
.card .h1:not(.white):not(.cover-mmd):not(.s05-title),
.card .h2:not(.white),
.card .h1.white:not(.s05-title),
.card .h2.white,
.card .h-mega:not(.cover-mmd){animation:s3dFloat 7s ease-in-out infinite;background-position:140% 0, 0 0}
.p3d.p3d-sheen::after{content:none;animation:none}
.cover .mmd-3d::after,.cover .sub-3d::after{animation:none;background-position:140% 0, 0 0}
.cover .chip-3d::after{content:none;animation:none}
.s05-award::before{content:none;animation:none}

/* ---------- без чёрных обводок: все контурные плашки — белые (js/depth.js → .no-outline) ---------- */
.no-outline{border-color:transparent !important;border-width:0 !important}
.was-outline{background-color:#fff !important}
.dp-host:has(.dp-base.rv:not(.in)) .dp-win{opacity:0}
.dp-win{transition:opacity .9s ease}

/* ---------- фирменные плашки-«пазлы» (js/puzzle.js) ---------- */
.pz{position:relative;background:none !important;box-shadow:none !important;
  --pz-bg:#fff;--pz-r:clamp(16px,1.6vw,26px);--pz-d:clamp(14px,1.4vw,24px)}
.pz > :not(.pz-shape){position:relative;z-index:1}
.pz-shape{position:absolute;inset:0;z-index:0;pointer-events:none;
  filter:url(#pzgoo) drop-shadow(0 2px 0 rgba(170,200,210,.55)) drop-shadow(0 14px 22px rgba(20,70,85,.16))}
.pz-shape i{position:absolute;display:block;background:var(--pz-bg)}
.pz-shape .pz-base{inset:0;border-radius:var(--pz-r)}
/* язычок: наполовину в теле плашки, наполовину снаружи */
.pz-shape .pz-tab{border-radius:calc(var(--pz-d) * .9)}
.pz-tab.s-b{left:var(--o);width:var(--l);top:calc(100% - var(--pz-d));height:calc(var(--pz-d) * 2)}
.pz-tab.s-t{left:var(--o);width:var(--l);top:calc(var(--pz-d) * -1);height:calc(var(--pz-d) * 2)}
.pz-tab.s-l{top:var(--o);height:var(--l);left:calc(var(--pz-d) * -1);width:calc(var(--pz-d) * 2)}
.pz-tab.s-r{top:var(--o);height:var(--l);left:calc(100% - var(--pz-d));width:calc(var(--pz-d) * 2)}
/* круглая «кнопка» на конце язычка */
.pz-shape .pz-knob{border-radius:50%;width:calc(var(--pz-d) * 1.5);height:calc(var(--pz-d) * 1.5)}
.pz-knob.s-b{left:calc(var(--o) - var(--pz-d) * .55);top:calc(100% + var(--pz-d) * .25)}
.pz-knob.s-t{left:calc(var(--o) - var(--pz-d) * .55);top:calc(var(--pz-d) * -1.75)}
.pz-knob.s-l{top:calc(var(--o) - var(--pz-d) * .55);left:calc(var(--pz-d) * -1.75)}
.pz-knob.s-r{top:calc(var(--o) - var(--pz-d) * .55);left:calc(100% + var(--pz-d) * .25)}