/* Кейсы — «киноплёнка»: блок закрепляется, кейсы переключаются при прокрутке.
   Перенесён с Тильды без изменений во внешнем виде. Тексты и картинки — в js/cases.js */
.kvc-root, .kvc-root *{ box-sizing:border-box; margin:0; padding:0; border-radius:0 !important; font-family:Arial, Helvetica, sans-serif !important; }
  .kvc-root *::before, .kvc-root *::after{ border-radius:0 !important; }
  .kvc-root [hidden]{ display:none !important; }
  .kvc-root{
    --kvc-top:76px;                         /* отступ под фиксированное меню сайта */
    --ease:cubic-bezier(.16,1,.3,1);
    --ease-io:cubic-bezier(.77,0,.18,1);
    --line:rgba(255,255,255,.14);
    --dim:#BDBBB7;
    --mute:#85858B;
    --dirn:1;
    --from:inset(100% 0 0 0);
    --cur:#EE3B34;
    position:relative;
    background:#000;
    color:#F3F1EE;
    font-family:Arial, Helvetica, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .kvc-root[data-dir="prev"]{ --dirn:-1; --from:inset(0 0 100% 0); }
  :where(.kvc-root a){ color:inherit; text-decoration:none; }
  .kvc-root :focus-visible{ outline:2px solid #F3F1EE; outline-offset:3px; }

  /* слова с маской (вылет снизу) */
  .kvc-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; white-space:nowrap; }
  .kvc-w-in{ display:inline-block; transform:translateY(calc(112% * var(--dirn))); }

  /* ---------- сцена ---------- */
  .kvc{ position:relative; background:#000; }
  .kvc-pin{ position:relative; background:#000; overflow:hidden; }
  .kvc-root[data-mode="pin"] .kvc-pin{
    position:sticky; top:0;
    height:100vh; height:100svh;
    min-height:560px;
    padding-top:var(--kvc-top);
    display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  }

  /* фон: контурное название текущего кейса */
  .kvc-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  /* у каждого кейса своё название; размер подгоняется в fitNames(), чтобы слово помещалось целиком */
  .kvc-marquee{ position:absolute; left:6vw; right:6vw; bottom:9%; height:clamp(110px,15vw,280px); }
  .kvc-mq{
    position:absolute; left:0; bottom:0; white-space:nowrap;
    font-size:clamp(110px,15vw,280px); font-weight:700; line-height:.9; letter-spacing:-0.04em;
    text-transform:uppercase; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.075);
    opacity:0; transform:translate3d(calc(var(--mf,0) * -4vw),0,0);
    transition:opacity .7s ease;
  }
  .kvc-mq.is-on{ opacity:1; }
  .kvc-root[data-mode="flow"] .kvc-marquee{ display:none; }

  /* верхняя полоса */
  .kvc-top{
    display:none; position:relative; z-index:5;
    align-items:center; justify-content:space-between; gap:24px;
    padding:18px 6vw 0;
  }
  .kvc-root[data-mode="pin"] .kvc-top{ display:flex; }
  .kvc-label{ display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
  @keyframes kvcBlink{ 50%{ opacity:.25; } }
  .kvc-hint{ display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); transition:opacity .6s ease; }
  .kvc-hint u{ display:block; width:44px; height:1px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; text-decoration:none; }
  .kvc-hint u::after{ content:''; position:absolute; inset:0; background:#fff; transform:translateX(-100%); animation:kvcHint 1.8s var(--ease-io) infinite; }
  @keyframes kvcHint{ to{ transform:translateX(100%); } }
  .kvc-root.is-scrolled .kvc-hint{ opacity:0; }

  .kvc-count{ display:flex; align-items:baseline; gap:0; font-weight:700; font-size:clamp(30px,2.8vw,48px); line-height:1; letter-spacing:-0.04em; color:#fff; }
  .kvc-count__win{ display:inline-block; height:1em; overflow:hidden; }
  .kvc-count__strip{ display:block; transition:transform .95s var(--ease-io); }
  .kvc-count__strip b{ display:block; height:1em; line-height:1; font-weight:700; }
  .kvc-count__tot{ margin-left:10px; font-size:.38em; letter-spacing:.08em; color:var(--mute); font-weight:400; }

  /* ---------- слайды ---------- */
  .kvc-slides{ position:relative; z-index:2; }
  .kvc-slide{ position:relative; }
  .kvc-root[data-mode="pin"] .kvc-slides{ min-height:0; margin:0 6vw; }
  .kvc-root[data-mode="pin"] .kvc-slide{
    position:absolute; inset:0;
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(28px,4.5vw,96px); align-items:center;
    visibility:hidden; pointer-events:none;
  }
  .kvc-root[data-mode="pin"] .kvc-slide.is-leaving{ visibility:visible; z-index:2; }
  .kvc-root[data-mode="pin"] .kvc-slide.is-active{ visibility:visible; pointer-events:auto; z-index:3; }

  /* левая колонка */
  .kvc-info{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,2.6vh,30px); min-width:0; }
  .kvc-meta{ display:flex; align-items:center; gap:12px 14px; width:100%; }
  .kvc-logo{ display:block; flex:0 0 auto; height:15px; width:auto; color:#fff; }
  .kvc-x{ color:var(--mute); font-size:13px; }
  /* логотип клиента — небольшой, рядом с нашим; масштаб задаётся в CASES (logoH), 1 = 20px */
  .kvc-brand{ display:block; flex:0 1 auto; min-width:0; height:calc(20px * var(--lh,1)); width:auto; max-width:150px; object-fit:contain; object-position:left center; }
  .kvc-client{ display:inline-flex; align-items:center; min-height:26px; padding:5px 10px; border:1px solid var(--line); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
  .kvc-idx{ display:none; margin-left:auto; font-size:12px; letter-spacing:.14em; color:var(--mute); white-space:nowrap; }

  .kvc-tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .kvc-tag{ padding:7px 12px; border:1px solid rgba(255,255,255,.26); font-size:11px; line-height:1; letter-spacing:.1em; text-transform:uppercase; color:#e8e6e2; }
  .kvc-tag:first-child{ border-color:rgba(var(--acc),.8); color:#fff; box-shadow:inset 0 0 0 1px rgba(var(--acc),.18); }

  .kvc-name{
    font-weight:400; text-transform:uppercase; color:#fff;
    font-size:clamp(44px, min(7vw, 14vh), 132px);
    line-height:.92; letter-spacing:-0.045em; overflow-wrap:anywhere;
  }
  .kvc-name.is-long{ font-size:clamp(34px, min(4.6vw, 9vh), 84px); }
  .kvc-kind{ max-width:30em; font-size:clamp(14px,1.15vw,19px); line-height:1.4; color:var(--dim); }


  .kvc-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(4px,1.4vh,14px); }
  .kvc-btn{
    position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:12px;
    height:clamp(48px,4.2vw,58px); padding:0 clamp(20px,2vw,32px);
    border:1px solid #fff; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
    cursor:pointer; transition:color .45s var(--ease);
  }
  .kvc-btn::before{ content:''; position:absolute; inset:0; transform:translateY(101%); transition:transform .55s var(--ease); }
  .kvc-btn > *{ position:relative; z-index:1; }
  .kvc-btn svg{ width:13px; height:13px; transition:transform .45s var(--ease); }
  .kvc-btn--solid{ background:#fff; color:#000; }
  .kvc-btn--solid::before{ background:#000; }
  .kvc-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
  .kvc-btn--ghost::before{ background:#fff; }
  .kvc-btn:hover::before, .kvc-btn:focus-visible::before{ transform:translateY(0); }
  .kvc-btn--solid:hover, .kvc-btn--solid:focus-visible{ color:#fff; }
  .kvc-btn--ghost:hover, .kvc-btn--ghost:focus-visible{ color:#000; border-color:#fff; }
  .kvc-btn:hover svg{ transform:translate(3px,-3px); }

  /* правая колонка: рамка с картинкой */
  .kvc-media-wrap{ position:relative; z-index:1; min-width:0; display:flex; align-items:center; justify-content:flex-end; }
  .kvc-frame-link{ display:block; position:relative; width:100%; }
  .kvc-frame{
    position:relative; margin-left:auto;
    width:min(100%, calc((100vh - var(--kvc-top) - 210px) * 1.85)); aspect-ratio:1.85/1;
    transform:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    will-change:transform;
  }
  .kvc-frame::after{ content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,.16); z-index:5; pointer-events:none; }
  .kvc-media{ position:absolute; inset:0; overflow:hidden; background:#000; clip-path:var(--from); z-index:1; display:flex; flex-direction:column; }
  .kvc-view{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }
  .kvc-par{ position:absolute; inset:-1.4%; transform:translate3d(var(--px,0px),var(--py,0px),0); }
  .kvc-imgw{ position:absolute; inset:0; transform:scale(1.35); will-change:transform; }
  .kvc-img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
  .kvc-shade{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0) 28%); pointer-events:none; z-index:2; }

  /* обложка-заглушка (если нет картинки) */
  .kvc-ph{ position:absolute; inset:0; overflow:hidden;
    background:
      radial-gradient(62% 80% at 78% 26%, rgba(var(--acc),.34), rgba(var(--acc),0) 62%),
      radial-gradient(50% 60% at 12% 95%, rgba(255,255,255,.07), rgba(255,255,255,0) 60%),
      linear-gradient(160deg,#101015,#050506); }
  .kvc-ph::before{ content:''; position:absolute; left:6%; right:6%; top:63%; height:2px;
    background:linear-gradient(90deg, rgba(var(--acc),0), rgb(var(--acc)) 50%, rgba(var(--acc),0));
    box-shadow:0 0 38px 7px rgba(var(--acc),.45); }
  .kvc-ph::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 26px, rgba(255,255,255,.028) 26px 27px); }
  .kvc-ph b{ position:absolute; left:6%; bottom:9%; max-width:88%; font-weight:700; font-size:clamp(46px,7vw,128px); line-height:.9; letter-spacing:-0.045em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.2); white-space:nowrap; z-index:1; }
  .kvc-ph small{ position:absolute; right:5%; bottom:8%; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.28); z-index:1; }

  /* «окно браузера» */
  .kvc-bar{ position:relative; flex:0 0 34px; z-index:3; display:flex; align-items:center; gap:7px; height:34px; padding:0 14px;
    background:#0b0b0e;
    border-bottom:1px solid rgba(255,255,255,.12); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
  .kvc-bar i{ width:7px; height:7px; border:1px solid rgba(255,255,255,.4); }
  .kvc-bar span{ margin-left:8px; }
  .kvc-bar em{ margin-left:auto; display:flex; align-items:center; gap:8px; font-style:normal; color:#fff; }
  .kvc-bar em::before{ content:''; width:6px; height:6px; background:rgb(var(--acc)); animation:kvcBlink 1.4s steps(2) infinite; }

  /* бегущий огонёк по рамке (фирменный приём сайта) */
  .kvc-ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:6; opacity:0; transition:opacity .6s ease; }
  .kvc-ring rect{ fill:none; stroke:#fff; stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-dasharray:7 93; stroke-linecap:round;
    filter:drop-shadow(0 0 5px rgba(var(--acc),.95)); animation:kvcRing 6s linear infinite; }
  @keyframes kvcRing{ to{ stroke-dashoffset:-100; } }
  .kvc-slide.is-active .kvc-ring{ opacity:1; transition-delay:.9s; }

  /* уголки «видоискателя» */
  .kvc-corner{ position:absolute; z-index:7; width:20px; height:20px; border:0 solid #fff; transition:transform .6s var(--ease), opacity .5s ease; opacity:0; pointer-events:none; }
  .kvc-corner.tl{ top:-10px; left:-10px; border-top-width:1px; border-left-width:1px; }
  .kvc-corner.tr{ top:-10px; right:-10px; border-top-width:1px; border-right-width:1px; }
  .kvc-corner.bl{ bottom:-10px; left:-10px; border-bottom-width:1px; border-left-width:1px; }
  .kvc-corner.br{ bottom:-10px; right:-10px; border-bottom-width:1px; border-right-width:1px; }
  .kvc-slide.is-active .kvc-corner{ opacity:1; transition-delay:.7s; }
  .kvc-frame-link:hover .kvc-corner.tl{ transform:translate(-6px,-6px); }
  .kvc-frame-link:hover .kvc-corner.tr{ transform:translate(6px,-6px); }
  .kvc-frame-link:hover .kvc-corner.bl{ transform:translate(-6px,6px); }
  .kvc-frame-link:hover .kvc-corner.br{ transform:translate(6px,6px); }

  /* ---------- хореография: ожидание → активный → уходящий ---------- */
  .kvc-rise{ opacity:0; transform:translateY(calc(28px * var(--dirn))); }

  .kvc-slide.is-active .kvc-media{ clip-path:inset(0 0 0 0); transition:clip-path 1.25s var(--ease-io); }
  .kvc-slide.is-active .kvc-imgw{ transform:scale(1); transition:transform 2s var(--ease); }
  .kvc-slide.is-active .kvc-frame-link:hover .kvc-imgw{ transform:scale(1.05); transition:transform 1.6s var(--ease); }
  .kvc-slide.is-active .kvc-w-in{ transform:none; transition:transform 1.15s var(--ease) var(--d,0s); }
  .kvc-slide.is-active .kvc-rise{ opacity:1; transform:none; transition:opacity .9s ease var(--d,0s), transform 1s var(--ease) var(--d,0s); }

  .kvc-slide.is-leaving .kvc-media{ clip-path:inset(0 0 0 0); filter:brightness(.38); transition:filter .9s ease; }
  .kvc-slide.is-leaving .kvc-imgw{ transform:scale(1.07); transition:transform 1.3s var(--ease-io); }
  .kvc-slide.is-leaving .kvc-w-in{ transform:translateY(calc(-112% * var(--dirn))); transition:transform .55s cubic-bezier(.55,0,.8,.3); }
  .kvc-slide.is-leaving .kvc-rise{ opacity:0; transform:translateY(calc(-16px * var(--dirn))); transition:opacity .3s ease, transform .4s ease; }

  /* ---------- навигация ---------- */
  .kvc-nav{ display:none; position:relative; z-index:5; margin:0 6vw; border-top:1px solid var(--line); }
  .kvc-root[data-mode="pin"] .kvc-nav{ display:flex; }
  .kvc-nav button{
    flex:1 1 0; position:relative; display:flex; align-items:baseline; gap:12px; min-width:0;
    padding:20px 14px 24px 0; background:none; border:0; text-align:left; cursor:pointer;
    font-family:inherit; color:var(--mute); transition:color .4s ease;
  }
  .kvc-nav button::before{ content:''; position:absolute; left:0; right:14px; top:-1px; height:2px; background:#fff; transform:scaleX(var(--f,0)); transform-origin:left; transition:transform .18s linear; }
  .kvc-nav small{ font-size:11px; letter-spacing:.12em; }
  .kvc-nav span{ font-size:clamp(11px,.9vw,14px); font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .kvc-nav button:hover, .kvc-nav button.is-active{ color:#fff; }

  /* ---------- курсор «Открыть» ---------- */
  .kvc-cur{ display:none; position:absolute; left:0; top:0; z-index:30; pointer-events:none; transform:translate3d(-200px,-200px,0); }
  .kvc-cur span{ display:block; transform:translate(-50%,-50%) scale(.5); opacity:0; background:#fff; color:#000; padding:11px 15px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; transition:transform .4s var(--ease), opacity .25s ease; }
  .kvc-cur.on span{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  @media (hover:hover) and (pointer:fine){ .kvc-root[data-mode="pin"] .kvc-cur{ display:block; } }

  /* ---------- невысокие экраны ---------- */
  @media (max-height:760px){
    .kvc-info{ gap:11px; }
    .kvc-kind{ font-size:14px; }
  }

  /* ---------- мобильная версия: карточки друг под другом ---------- */
  .kvc-root[data-mode="flow"] .kvc-slides{ padding:0 20px; }
  .kvc-root[data-mode="flow"] .kvc-slide{ display:flex; flex-direction:column; gap:26px; padding:36px 0 44px; border-top:1px solid var(--line); }
  .kvc-root[data-mode="flow"] .kvc-slide:first-child{ border-top:0; padding-top:8px; }
  .kvc-root[data-mode="flow"] .kvc-media-wrap{ order:-1; }
  .kvc-root[data-mode="flow"] .kvc-frame{ width:100%; aspect-ratio:1.6/1; transform:none; }
  .kvc-root[data-mode="flow"] .kvc-corner,
  .kvc-root[data-mode="flow"] .kvc-ring{ display:none; }
  .kvc-root[data-mode="flow"] .kvc-top{ display:flex; padding:clamp(40px,10vw,64px) 20px 8px; }
  .kvc-root[data-mode="flow"] .kvc-hint,
  .kvc-root[data-mode="flow"] .kvc-count{ display:none; }
  .kvc-root[data-mode="flow"] .kvc-idx{ display:block; }
  .kvc-root[data-mode="flow"] .kvc-name{ font-size:clamp(40px,13vw,72px); }
  .kvc-root[data-mode="flow"] .kvc-name.is-long{ font-size:clamp(34px,10.5vw,60px); }
  .kvc-root[data-mode="flow"] .kvc-btns{ width:100%; }
  .kvc-root[data-mode="flow"] .kvc-btn{ flex:1 1 150px; }

  /* блок за пределами экрана — бесконечные анимации на паузе */
  .kvc-root.is-off *, .kvc-root.is-off *::before, .kvc-root.is-off *::after{ animation-play-state:paused !important; }

  @media (prefers-reduced-motion:reduce){
    .kvc-root *{ transition-duration:.01ms !important; transition-delay:0s !important; animation:none !important; }
  }