/* Два первых десктопных экрана. Изображения взяты из выбранного эскиза. */
.intro-sequence{--intro-h:100vh;--progress:0;position:relative;background:var(--bg)}
.intro-sticky{position:relative}
.phone-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.phone-canvas{width:calc(var(--intro-h,100vh)*1.596774193548387);max-width:none;flex-shrink:0;position:relative}
.phone-background{width:100%;height:auto;display:block;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 4%,#000 96%,transparent 100%)}
.phone-ui{position:absolute;left:37.65%;top:10%;width:24.8%;height:76%;display:flex;flex-direction:column;overflow:hidden}
.chat-header{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex:0 0 auto;padding:0 5px 16px;font-size:clamp(17px,1.38vw,21px);line-height:1.2;font-weight:600}
.chat-header>span:first-child{white-space:nowrap}
.chat-avatar{order:-1;width:48px;height:48px;flex:0 0 48px;border-radius:50%;background:#000;display:grid;place-items:center;border:1px solid #303033}
.wu-crop{position:relative;display:block;width:38px;height:9.66px}
.wu-crop img{display:block;width:38px;height:auto;max-width:100%}
.chat-messages{flex:1;min-height:0;overflow:auto;overscroll-behavior:auto;scrollbar-width:none;padding-bottom:10px}
.chat-messages::-webkit-scrollbar{display:none}
.text-message{background:#252528;border-radius:22px 22px 22px 3px;padding:20px 18px}
.chat-text{font-family:Myriad,Arial,sans-serif;font-weight:400;font-size:clamp(18px,1.43vw,22px);line-height:1.36;letter-spacing:0;margin:0}
.chat-text strong{font-family:Myriad,Arial,sans-serif;font-weight:600;color:var(--accent)}
.photo-message{margin-top:12px;width:100%;padding-right:17px}
.portrait-window{position:relative;aspect-ratio:600/645;overflow:hidden}
.portrait-crop{position:absolute;inset:0;overflow:hidden}
.portrait-crop img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.photo-source{border-radius:15px}
.author-screen{position:relative;background:var(--bg);display:flex;align-items:center;min-height:100vh}
.author-layout{width:min(1220px,calc(100% - 112px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:65px 0}
.photo-target{width:min(100%,calc((100vh - 130px)*600/645));justify-self:start}
.author-copy{font-size:clamp(20px,1.65vw,25px);line-height:1.43;font-weight:400;max-width:530px}
.author-copy strong{font-family:Myriad,Arial,sans-serif;font-weight:600}
.author-copy p+p{margin-top:0}
.author-copy p:last-child{color:#c7c7c3}
.author-rule{display:block;width:46px;height:2px;background:var(--accent);margin:28px 0 32px}
.shared-portrait{position:absolute;left:0;top:0;z-index:4;will-change:transform,opacity;pointer-events:none;transform-origin:top left}
.shared-portrait[hidden]{display:none}
.enhanced .intro-stage{height:calc(var(--intro-h)*2)}
.enhanced .intro-sticky{position:sticky;top:0;height:var(--intro-h);overflow:hidden;isolation:isolate}
.enhanced .phone-screen{height:var(--intro-h);min-height:0;position:absolute;inset:0;opacity:calc(1 - var(--progress))}
.enhanced .author-screen{position:absolute;inset:0;height:var(--intro-h);min-height:0;z-index:2;opacity:var(--progress);transform:none;pointer-events:none;will-change:opacity}
.enhanced .author-copy{opacity:clamp(0,(var(--progress) - .35)*2,1);transform:translateY(calc((1 - var(--progress))*22px))}
.enhanced .portrait-static{visibility:hidden}
.enhanced .photo-message{opacity:0}
.enhanced.photo-arrived .photo-message{opacity:1}
.chat-visual .unrevealed{opacity:0}
.chat-visual .typing-char{position:relative}
.chat-visual .typing-char::after{content:"";position:absolute;right:-2px;top:.07em;width:2px;height:1em;background:var(--accent)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(prefers-reduced-motion:reduce){.typing-char::after{display:none}}

/* Цветной портрет постепенно растворяется в фоне второго экрана. */
.photo-target{--edge-fade:1}
.shared-portrait{--edge-fade:0}
.photo-target .portrait-crop,.shared-portrait .portrait-crop{
-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 calc(var(--edge-fade)*9%),#000 calc(100% - var(--edge-fade)*9%),transparent 100%),linear-gradient(to bottom,transparent 0%,#000 calc(var(--edge-fade)*6%),#000 calc(100% - var(--edge-fade)*24%),transparent 100%);
mask-image:linear-gradient(to right,transparent 0%,#000 calc(var(--edge-fade)*9%),#000 calc(100% - var(--edge-fade)*9%),transparent 100%),linear-gradient(to bottom,transparent 0%,#000 calc(var(--edge-fade)*6%),#000 calc(100% - var(--edge-fade)*24%),transparent 100%);
-webkit-mask-composite:source-in;
mask-composite:intersect;
}

.author-copy .company-name{color:var(--accent);font-weight:600}
/* Управление фоновой музыкой. */
.music-toggle{position:fixed;top:24px;right:24px;z-index:20;width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid #ffffff30;border-radius:50%;background:#0b0b0de6;color:#c7c7c3;cursor:pointer}
.music-toggle[hidden]{display:none}
.music-toggle svg{width:21px;height:21px}
.music-toggle[data-playing="true"]{color:var(--accent)}
.music-toggle[data-playing="true"] .music-slash{display:none}
.music-toggle:hover{border-color:var(--accent)}
.music-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Короткий экран: один переход портрета, текст знакомства в обычном потоке. */
.intro-stage{position:relative}
.intro-copy-flow{display:none}
.intro-sequence.intro-split .intro-copy-flow{
 display:block;width:var(--content-width);margin-inline:auto;margin-top:calc(-1 * var(--intro-copy-overlap,0px));padding-bottom:32px;position:relative;
}
.intro-split .intro-copy-flow .author-copy{max-width:none}
.intro-sequence.intro-split .author-layout{
 height:100%;display:flex;align-items:flex-start;justify-content:center;padding-block:32px 24px;
}
.intro-sequence.intro-split .photo-target{
 width:min(68%,240px,calc((var(--intro-h) - 64px) * 600 / 645));flex-shrink:0;
}
/* Статичная версия содержит только фотографию в сообщении. */
.intro-sequence:not(.enhanced) .photo-target{display:none}
.intro-sequence:not(.enhanced) .author-layout{grid-template-columns:minmax(0,1fr)}