/* ТЕМПО Диалог — первый экран и вводная, как palantir.com/chain-reaction (21.10.2026).
   Градиентная панель в тёмной рамке; «Представляем»; название с мозаикой посередине; подпись и прыгающая стрелка.
   Заставка (анимации CSS, класс .cr-on ставит скрипт): сначала чёрный квадрат с точкой в центре, затем слова «мигают» и появляются, квадрат встаёт между ними, углы мозаики загораются.
   Без JS и в режиме «меньше движения» всё видно сразу: скрытые состояния — только под .cr-on. */
.cr-hero{background:#1F2124;padding:clamp(10px,3.5vw,50px) clamp(10px,3.5vw,50px) 0}
.cr-hero__p{position:relative;height:75vh;min-height:520px;max-height:860px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#101114;background:linear-gradient(90deg,#7A60EE 0%,#9A86F3 20%,#BFB2F3 45%,#E0D8EF 72%,#F4EFE6 100%);overflow:hidden}
.cr-hero__k{margin:0 0 clamp(14px,1.7vw,28px);font-size:clamp(16px,1.8vw,26px);font-weight:500;letter-spacing:-.01em}
.cr-hero__t{margin:0;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:clamp(50px,12.4vw,214px);line-height:.92;letter-spacing:-.05em;white-space:nowrap}
.cr-w{position:relative;display:inline-block}
.cr-w::after{content:attr(data-w);position:absolute;left:0;top:0;color:#5B3FE4;opacity:0;pointer-events:none}
.cr-mz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:.64em;height:.64em;margin:.02em .1em 0;flex:0 0 auto}
.cr-mz i,.cr-mz b{display:block;min-width:0}
.cr-mz .g{background:linear-gradient(90deg,#6A50EA,#F4EFE6)}
.cr-mz .g2{background:linear-gradient(90deg,#13C9BA,#F4EFE6)}
.cr-mz .h{background:repeating-linear-gradient(180deg,#fff 0 1.5px,transparent 1.5px 4px)}
.cr-mz b{position:relative;background:#101114}
.cr-mz s{position:absolute;left:36%;top:36%;width:28%;height:28%;border-radius:50%;background:linear-gradient(90deg,#13C9BA,#F4EFE6)}
.cr-hero__s{margin:clamp(16px,1.9vw,30px) 0 0;font-size:clamp(16px,1.8vw,26px);font-weight:500;line-height:1.2;letter-spacing:-.01em}
.cr-hero__arr{position:absolute;left:50%;bottom:clamp(22px,4.5vh,46px);width:15px;margin-left:-7.5px;animation:crb 1s linear infinite}
.cr-hero__arr svg{display:block;width:15px;height:9px;fill:#101114;shape-rendering:crispEdges}
@keyframes crb{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* заставка: только анимации с задержкой и fill-mode both — работают и до первой отрисовки страницы */
.cr-on .cr-mz{animation:crmz .6s cubic-bezier(.65,.05,.36,1) .4s both}
.cr-on .cr-mz b{animation:crsc .35s cubic-bezier(.22,.61,.36,1) .05s both}
.cr-on .cr-mz i{animation:crop .01s linear .95s both}
.cr-on .cr-mz i:nth-child(3){animation-delay:1.05s}
.cr-on .cr-mz i:nth-child(7){animation-delay:1.15s}
.cr-on .cr-mz i:nth-child(9){animation-delay:1.25s}
.cr-on .cr-w{animation:crgl .32s steps(1,end) .55s both}
.cr-on .cr-w--r{animation-delay:.68s}
.cr-on .cr-w::after{animation:crgl2 .32s steps(1,end) .55s both}
.cr-on .cr-w--r::after{animation-delay:.68s}
.cr-on .cr-hero__k{animation:crup .3s cubic-bezier(.22,.61,.36,1) 1.25s both}
.cr-on .cr-hero__s{animation:crup .3s cubic-bezier(.22,.61,.36,1) 1.35s both}
.cr-on .cr-hero__arr svg{animation:crup .3s cubic-bezier(.22,.61,.36,1) 1.5s both}
@keyframes crmz{from{transform:translateX(var(--mzx,0))}to{transform:none}}
@keyframes crsc{from{transform:scale(0)}to{transform:none}}
@keyframes crop{from{opacity:0}to{opacity:1}}
@keyframes crup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* «мигание» слова: полосы проявляются рывками, как дубль слова у Chain Reaction (steps, 0,3 с) */
@keyframes crgl{
  0%{opacity:1;clip-path:inset(0 0 100% 0);transform:translateX(-.04em)}
  10%{clip-path:inset(12% 0 58% 0);transform:translateX(.05em)}
  20%{clip-path:inset(58% 0 12% 0);transform:translateX(-.03em)}
  30%{clip-path:inset(0 0 66% 0);transform:translateX(.02em)}
  40%{clip-path:inset(34% 0 22% 0);transform:translateX(-.04em)}
  50%{clip-path:inset(70% 0 0 0);transform:translateX(.03em)}
  60%{clip-path:inset(0 0 38% 0);transform:translateX(-.015em)}
  70%{clip-path:inset(18% 0 6% 0);transform:translateX(.02em)}
  80%{clip-path:inset(0 0 14% 0);transform:translateX(-.01em)}
  90%{clip-path:inset(4% 0 0 0);transform:none}
  100%{opacity:1;clip-path:none;transform:none}
}
@keyframes crgl2{
  0%{opacity:0}
  1%{opacity:.85;clip-path:inset(50% 0 30% 0);transform:translateX(.06em)}
  20%{clip-path:inset(10% 0 70% 0);transform:translateX(-.05em)}
  40%{clip-path:inset(64% 0 8% 0);transform:translateX(.04em)}
  60%{clip-path:inset(28% 0 50% 0);transform:translateX(-.03em)}
  80%{opacity:.5;clip-path:inset(80% 0 4% 0);transform:translateX(.02em)}
  100%{opacity:0}
}

/* вводная — как «■ Introduction» у Chain Reaction: тёмный блок в той же рамке, метка, крупная фраза по центру с выделением цветом */
.cr-intro{background:#1F2124;color:#F4EFE6;padding:0 clamp(10px,3.5vw,50px)}
.cr-intro__p{background:#232427;border-top:2px solid #1F2124;padding:clamp(70px,8vw,120px) clamp(20px,6vw,80px);text-align:center}
.cr-intro__k{display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(18px,2vw,28px);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,239,230,.82)}
.cr-intro__k i{width:7px;height:7px;background:#F4EFE6}
.cr-intro__t{margin:0 auto;max-width:17em;font-size:clamp(32px,4vw,58px);font-weight:400;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.cr-intro__hl{background:linear-gradient(90deg,#B6A7FF,#13C9BA 60%,#F4EFE6);-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-intro__s{margin:clamp(18px,2vw,26px) auto 0;max-width:40ch;font-size:clamp(15px,1.3vw,18px);line-height:1.45;color:rgba(244,239,230,.62)}
.cr-io .cr-intro__k,.cr-io .cr-intro__t,.cr-io .cr-intro__s{opacity:0;transform:translateY(14px)}
.cr-io.in .cr-intro__k,.cr-io.in .cr-intro__t,.cr-io.in .cr-intro__s{opacity:1;transform:none;transition:opacity .3s cubic-bezier(.22,.61,.36,1),transform .3s cubic-bezier(.22,.61,.36,1)}
.cr-io.in .cr-intro__t{transition-delay:.08s}
.cr-io.in .cr-intro__s{transition-delay:.16s}

@media (max-width:900px){
  .cr-hero{padding:8px 8px 0}
  .cr-intro{padding:0 8px}
  .cr-hero__p{height:min(78svh,700px);min-height:460px}
  .cr-hero__t{font-size:clamp(40px,13vw,110px)}
}
@media (max-width:480px){
  .cr-hero__t{flex-direction:column;gap:.1em}
  .cr-mz{width:.5em;height:.5em;margin:.06em 0}
  .cr-hero__t{font-size:clamp(52px,19vw,84px);line-height:.95}
}
@media (prefers-reduced-motion:reduce){
  .cr-hero *,.cr-hero *::after,.cr-intro *{animation:none!important;transition:none!important}
}