/* diusworks · волна 2 (2026-09-23): «Живое издание» (печать, переходы между страницами),
   витрина с живым фильтром, каркас демо на страницах ниш, кейсы «было / стало».
   Подключать ПОСЛЕ main-*.css, refresh-*.css и wave1-0923.css. JS-библиотек не требует. */

/* ================= W2-02 «Живое издание» ================= */

/* --- Переходы между страницами: Chrome 126+, Яндекс Браузер, Safari 18.2+. Остальные открывают как обычно --- */
@media (prefers-reduced-motion: no-preference) {
  /* тип page есть только у переходов между страницами: фильтр витрины внутри страницы не листает её */
  @view-transition { navigation: auto; types: page; }

  html:active-view-transition-type(page)::view-transition-old(root) { animation: .24s cubic-bezier(.4, 0, 1, 1) both dw-leaf-out; }
  html:active-view-transition-type(page)::view-transition-new(root) { animation: .3s cubic-bezier(.22, 1, .36, 1) .03s both dw-leaf-in; }
  html:active-view-transition-type(page):active-view-transition-type(back)::view-transition-old(root) { animation-name: dw-leaf-out-back; }
  html:active-view-transition-type(page):active-view-transition-type(back)::view-transition-new(root) { animation-name: dw-leaf-in-back; }

  /* шапка с печатью стоит на месте, как логотип на корешке */
  header { view-transition-name: dw-head; }
  ::view-transition-group(dw-head) { animation: none; }
  ::view-transition-old(dw-head) { animation: none; opacity: 0; }
  ::view-transition-new(dw-head) { animation: none; }

  /* обложка шаблона вырастает из карточки витрины в обложку страницы ниши и обратно */
  ::view-transition-group(.tpl) { animation-duration: .38s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  ::view-transition-old(.tpl), ::view-transition-new(.tpl) { height: 100%; object-fit: cover; }
}
@keyframes dw-leaf-out      { to   { opacity: 0; transform: translateX(-2.5%); } }
@keyframes dw-leaf-in       { from { opacity: 0; transform: translateX(3.5%); } }
@keyframes dw-leaf-out-back { to   { opacity: 0; transform: translateX(2.5%); } }
@keyframes dw-leaf-in-back  { from { opacity: 0; transform: translateX(-3.5%); } }

/* во время перехода первый экран уже на месте: без второго «проявления» поверх листания */
html:active-view-transition :is(.header-seal, [data-load], .hero-h1, .hero-em, .hero-portrait, .case-shot, #hero-cta.magnetic, #hero-glow, .diamond-line) {
  opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
}
html:active-view-transition .hero-kicker::before { transform: scaleX(1) !important; transition: none !important; }

/* --- Печать в гарантии «0 ₽, пока не увидите сайт»: один раз ставит оттиск --- */
.g-sign { align-items: center; }
.g-seal { position: relative; display: inline-flex; width: 84px; height: 84px; flex: none; transform: rotate(-6deg); }
.g-seal svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(120, 40, 10, .22)); }
.g-seal::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 2px solid var(--color-accent, #d24e2a); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .guarantee-frame.reveal .g-seal { opacity: 0; transform: translateY(-12px) scale(1.35) rotate(-14deg); }
  .guarantee-frame.reveal.is-visible .g-seal { animation: dw-seal-press .6s cubic-bezier(.22, 1, .36, 1) .55s both; }
  .guarantee-frame.reveal.is-visible .g-seal::after { animation: dw-seal-ring .7s cubic-bezier(.22, 1, .36, 1) .83s both; }
}
@keyframes dw-seal-press {
  0%   { opacity: 0; transform: translateY(-12px) scale(1.35) rotate(-14deg); }
  55%  { opacity: 1; transform: translateY(0) scale(.95) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}
@keyframes dw-seal-ring { from { opacity: .35; transform: scale(.7); } to { opacity: 0; transform: scale(1.35); } }
.g-deal { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 700; color: var(--color-accent-deep, #b5401c);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.g-deal:hover { color: var(--color-ink, #1c1a17); }
.g-deal svg { flex: none; }
@media (max-width: 639px) { .g-sign { gap: .6rem 1rem; } .g-seal { width: 72px; height: 72px; } }

/* ================= W2-06 Витрина: обложки серии v3 и живой фильтр ================= */
.tpl-shot { position: relative; display: block; }
.tpl-num { position: absolute; left: 10px; top: 10px; padding: .28rem .55rem; border-radius: 999px; background: rgba(250, 248, 245, .92);
  color: var(--color-ink, #1c1a17); font-size: 12px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums;
  box-shadow: 0 1px 0 rgba(28, 26, 23, .06); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(.tpl-card) { animation-duration: .36s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  ::view-transition-old(.tpl-card):only-child { animation: .2s cubic-bezier(.4, 0, 1, 1) both dw-fade-out; }
  ::view-transition-new(.tpl-card):only-child { animation: .3s cubic-bezier(.22, 1, .36, 1) .06s both dw-fade-in; }
}
@keyframes dw-fade-out { to { opacity: 0; transform: scale(.97); } }
@keyframes dw-fade-in  { from { opacity: 0; transform: scale(.97); } }

/* ================= W2-05 Каркас демо на странице ниши (пилот: камины, база отдыха, видеостудия) ================= */
@property --reveal { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.skel { margin: 2rem 0 0; }
.skel-stage { position: relative; overflow: hidden; border-radius: 16px; background: var(--color-cream-warm, #f6f0e7);
  box-shadow: 0 1px 0 rgba(28, 26, 23, .04), 0 18px 40px -22px rgba(60, 40, 20, .35); outline: 1px solid var(--color-line, #eae2d7); outline-offset: -1px; }
.skel-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skel-paper { position: absolute; inset: 0; width: 100%; height: 100%; --reveal: 0%;
  -webkit-mask-image: linear-gradient(100deg, transparent calc(var(--reveal) - 18%), #000 var(--reveal));
          mask-image: linear-gradient(100deg, transparent calc(var(--reveal) - 18%), #000 var(--reveal)); }
.skel.is-revealed .skel-paper { --reveal: 120%; transition: --reveal 1.8s cubic-bezier(.45, .05, .25, 1) .1s; }
.skel-paper :is(.pg, .bx, .cd, .im) { vector-effect: non-scaling-stroke; }
.skel-paper .pp { fill: #f6f0e7; }
.skel-paper .pg { fill: #fbf8f3; stroke: #d9c7a8; stroke-width: .8px; }
.skel-paper .bx { fill: none; stroke: #1c1a17; stroke-opacity: .6; stroke-width: 1.2px; }
.skel-paper .cd { fill: none; stroke: #1c1a17; stroke-opacity: .35; stroke-width: .9px; }
.skel-paper .im { fill: none; stroke: #b89a6e; stroke-width: .9px; }
.skel-paper .hd { fill: #1c1a17; opacity: .5; }
.skel-paper .ln { fill: #1c1a17; opacity: .16; }
.skel-paper .bt { fill: var(--color-accent, #d24e2a); opacity: .75; }
.skel-tags { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.skel-tags li { position: absolute; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem .2rem .2rem;
  border-radius: 999px; background: rgba(250, 248, 245, .95); box-shadow: 0 2px 8px rgba(28, 26, 23, .14);
  font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--color-ink, #1c1a17); white-space: nowrap; transform: translateY(-50%); }
.skel-tags b, .skel-n { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-accent-deep, #b5401c); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.inside-list .skel-n { margin-right: .5rem; vertical-align: -4px; }
.skel figcaption { margin-top: .8rem; font-size: 13.5px; color: var(--color-ink-soft, #5a534a); }
.skel figcaption a { font-weight: 700; color: var(--color-accent-deep, #b5401c); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .skel-tags span { display: none; } .skel-tags li { padding: .15rem; } }
@media (prefers-reduced-motion: reduce) { .skel-paper { display: none; } }

/* ================= W2-04 Кейсы: подпись на сайте клиента, слайдер «было / стало» ================= */
.case-credit { margin-top: .55rem; font-size: 13px; line-height: 1.4; color: var(--color-ink-soft, #5a534a);
  text-decoration: underline; text-decoration-color: var(--color-gold-line, #d9c7a8); text-underline-offset: 3px; }
.case-credit:hover { color: var(--color-accent-deep, #b5401c); }
.ba { margin: 0; }
.ba-stage { --pos: 50%; position: relative; overflow: hidden; border-radius: 14px; outline: 1px solid var(--color-line, #eae2d7); outline-offset: -1px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba-stage img { display: block; width: 100%; height: auto; }
.ba-after { position: absolute; inset: 0; height: 100% !important; object-fit: cover; object-position: top; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 44px; margin-left: -22px; cursor: ew-resize; touch-action: none; }
.ba-handle::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(28, 26, 23, .25); }
.ba-handle::after { content: "‹ ›"; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--color-ink, #1c1a17); font: 700 15px/1 var(--font-sans, sans-serif);
  box-shadow: 0 4px 14px rgba(28, 26, 23, .25); }
.ba-range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ba-range:focus-visible + .ba-handle::after { outline: 2px solid var(--color-accent-deep, #b5401c); outline-offset: 2px; }
.ba-label { position: absolute; top: 10px; padding: .2rem .55rem; border-radius: 999px; background: rgba(28, 26, 23, .72); color: #fff; font-size: 12px; font-weight: 700; }
.ba-label--before { right: 10px; } .ba-label--after { left: 10px; }
.ba figcaption { margin-top: .7rem; font-size: 13.5px; color: var(--color-ink-soft, #5a534a); }