/* ============================================================
   САЙТ, КОТОРЫЙ ПЕРЕД ВАМИ (30.09.2026)
   Слева список снимков (название + строка, полоска времени у текущего),
   справа окно браузера: адресная строка меняется вместе со снимком,
   снимки сменяются наплывом, в углу — «Открыть страницу».
   ============================================================ */
.wo__box{
  display:grid;
  grid-template-columns:minmax(240px, .55fr) minmax(0, 1.45fr);
  gap:clamp(20px, 2.6vw, 48px);
  align-items:center;
}
.wo__tabs{ display:grid; gap:6px; }
.wo__tab{
  position:relative; overflow:hidden;
  display:grid; gap:4px;
  padding:clamp(14px, 1.2vw, 18px) clamp(16px, 1.3vw, 20px);
  border:1px solid transparent; border-radius:var(--r-inner);
  background:transparent; text-align:left; cursor:pointer;
  font:inherit; color:inherit;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.wo__tab:hover{ background:var(--surface-2); }
.wo__tab.is-on{ background:#fff; border-color:var(--line); box-shadow:var(--shadow-card); }
.wo__tt{ font:600 clamp(15px, 1.05vw, 17px)/1.3 var(--font); color:var(--fg-lead); }
.wo__tab.is-on .wo__tt{ color:var(--fg); }
.wo__tn{ font-size:clamp(13px, .88vw, 14.5px); line-height:1.45; color:var(--fg-mute); }
.wo__tab.is-on .wo__tn{ color:var(--fg-lead); }
.wo__tab:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }
/* полоска времени до следующего снимка */
.wo__prog{ position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent; }
.wo__prog i{ display:block; height:100%; background:var(--accent-1); transform:scaleX(0); transform-origin:left; }
.wo__tab.is-on.is-run .wo__prog i{ animation:wo-prog var(--wo-t, 5s) linear forwards; }
@keyframes wo-prog{ to{ transform:scaleX(1); } }

.wo__win{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-lift), 0 40px 80px -30px rgba(var(--accent-rgb), .35);
  overflow:hidden;
}
.wo__bar{
  display:flex; align-items:center; gap:14px;
  height:clamp(36px, 2.8vw, 46px); padding:0 16px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.wo__dots{ display:flex; gap:6px; }
.wo__dots i{ width:9px; height:9px; border-radius:50%; background:#d6d8e0; }
.wo__addr{
  position:relative; flex:1; max-width:60%; height:24px;
  background:#fff; border:1px solid var(--line); border-radius:4px;
  font:500 12.5px/22px var(--font); color:var(--fg-lead);
  overflow:hidden;
}
.wo__a{ position:absolute; inset:0 10px; opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease); white-space:nowrap; }
.wo__a.is-on{ opacity:1; transform:none; }

.wo__shots{ display:grid; aspect-ratio:1200 / 750; }
.wo__shot{
  grid-area:1 / 1; margin:0; position:relative;
  opacity:0; visibility:hidden;
  transition:opacity .6s var(--ease), visibility 0s linear .6s;
}
.wo__shot.is-on{ opacity:1; visibility:visible; transition:opacity .6s var(--ease), visibility 0s; }
.wo__shot img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block;
  transform:scale(1.03); transition:transform 6s linear; }
.wo__shot.is-on img{ transform:scale(1); }
.wo__open{
  position:absolute; right:14px; bottom:14px;
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:4px;
  background:var(--fg); color:#fff; text-decoration:none;
  font:600 13px/1 var(--font);
  box-shadow:0 10px 24px rgba(13,15,32,.25);
  transition:background .25s var(--ease);
}
.wo__open:hover{ background:var(--accent-1); }
.wo__open svg{ width:12px; height:12px; }

/* 30.09.2026 (2): работ стало восемь — строка описания видна только у выбранной,
   иначе список выше окна */
.wo__tab:not(.is-on) .wo__tn{ display:none; }
.wo__tabs{ gap:2px; }
.wo__tab{ padding-block:clamp(11px, .95vw, 15px); }

/* ============================================================
   30.09.2026 (6): снимки во всю высоту страницы (tall-*.png → site-*-full.webp)
   — выбранный сайт сам «листается» вниз внутри окна, как будто его смотрят;
   наведение ставит прокрутку на паузу. Окно чуть наклоняется за мышью
   (--rx/--ry ставит web-own.js), за ним мягкое свечение.
   ============================================================ */
.wo__win{
  transform:perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.wo__box{ position:relative; }
.wo__box::before{
  content:""; position:absolute; z-index:-1; right:5%; top:10%; width:55%; height:80%;
  background:radial-gradient(closest-side, rgba(var(--accent-rgb), .22), transparent);
  filter:blur(20px); pointer-events:none;
  animation:wo-glow 8s ease-in-out infinite;
}
@keyframes wo-glow{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-4%,3%) scale(1.08); } }
.wo__shots{ container-type:size; }
.wo__shot{ overflow:hidden; }
.wo__shot img.is-tall{ height:auto; object-fit:initial; transform:none; transition:none; }
.wo__shot.is-on img.is-tall{ animation:wo-scroll var(--wo-s, 6s) cubic-bezier(.45,0,.35,1) .8s both; }
@keyframes wo-scroll{ from{ transform:translateY(0); } to{ transform:translateY(calc(-100% + 100cqh)); } }
.wo__win:hover .wo__shot img.is-tall{ animation-play-state:paused; }
/* полоса прокрутки справа — показывает, что сайт листается */
.wo__shot::after{
  content:""; position:absolute; right:4px; top:6px; width:4px; height:18%; border-radius:4px;
  background:rgba(13,15,32,.28); opacity:0;
}
.wo__shot.is-on:has(img.is-tall)::after{ opacity:1; animation:wo-thumb var(--wo-s, 6s) cubic-bezier(.45,0,.35,1) .8s both; }
@keyframes wo-thumb{ from{ top:6px; } to{ top:calc(82% - 6px); } }
@media (prefers-reduced-motion: reduce){
  .wo__shot.is-on img.is-tall, .wo__shot::after, .wo__box::before{ animation:none; }
  .wo__win{ transform:none; }
}