/* Открытие витрины: заставка «Recruit. Hire. Your People.» → слова перелетают на строки заголовка,
   картинка открывается восемью полосами, шапка и остальное собираются снизу вверх. Телефон: заставка
   просто гаснет. Эталон — prototypes/opening.html (утверждён 28.09). Имена переменных со своим
   префиксом: --motion-* уже заняты в landing-motion.css. */
:root{--story-enter:900ms;--story-normal:320ms;--story-reveal:600ms;--story-ease-enter:var(--hr-motion-easing-enter,cubic-bezier(.16,1,.3,1));--story-ease-exit:var(--hr-motion-easing-exit,cubic-bezier(.45,0,.2,1));--story-slat:var(--paper)}
[data-landing-theme="sapphire"]{--story-slat:#0b2f52}

/* Заголовок из трёх строк и подзаголовок под ним. */
h1 .line{display:block;transition:opacity 360ms ease}
.hero-copy h1{margin:0 0 22px}
.lead{font-size:clamp(22px,1.7vw,28px);line-height:1.2;letter-spacing:-.03em;font-weight:500;margin:0 0 20px;max-width:620px}

/* Полосы поверх картинки: в Atelier — над фото, в Sapphire — внутри окна продукта.
   Отъезжают вправо одна за другой; ширина с запасом, чтобы не было волосяных щелей. */
.slats{position:absolute;inset:0;display:none;grid-template-columns:repeat(8,1fr);z-index:3;border-radius:inherit;overflow:hidden}
.slats i{display:block;width:calc(100% + 1.5px);background:var(--story-slat);transform-origin:100% 50%;transition:transform var(--story-reveal) var(--story-ease-enter)}
body.is-opening .slats{display:grid}
.slats.open i{transform:scaleX(0)}
.slats i:nth-child(2){transition-delay:40ms}.slats i:nth-child(3){transition-delay:80ms}.slats i:nth-child(4){transition-delay:120ms}
.slats i:nth-child(5){transition-delay:160ms}.slats i:nth-child(6){transition-delay:200ms}.slats i:nth-child(7){transition-delay:240ms}.slats i:nth-child(8){transition-delay:280ms}
.hero-media>.slats{border-radius:0}
[data-landing-theme="sapphire"] .hero-media>.slats{display:none!important}
[data-landing-theme="sapphire"] .sapphire-product-window{position:relative}

/* Пока идёт открытие, строки заголовка, шапка и остальное скрыты; без сценария всё видно сразу. */
body.is-opening h1 .line:not(.in){opacity:0}
body.is-opening .rise:not(.in){opacity:0;translate:0 14px}
.rise{transition:opacity var(--story-normal) ease,translate var(--story-normal) var(--story-ease-enter)}
body.is-opening header:not(.in){opacity:0}
header{transition:opacity var(--story-normal) ease}

/* Летящее слово: копия слова заставки, едет и уменьшается до строки заголовка;
   в Sapphire по пути ещё и набирает вес шрифта (Rubik — вариативный). */
.fly{position:fixed;left:0;top:0;margin:0;white-space:nowrap;color:#f5f1eb;line-height:1;transform-origin:0 0;pointer-events:none;z-index:1001;will-change:transform,opacity;transition:font-weight var(--story-enter) var(--story-ease-enter)}

/* Заставка (полноэкранная, как была на витрине): слова в 0,3 / 1,2 / 2,1 с, подпись в 2,8 с;
   играет только с классом playing. Sapphire-цвета фона и подписи — в /sapphire/landing.css. */
.intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;color:#f5f1eb;background:linear-gradient(110deg,rgba(2,24,49,.86),rgba(1,80,156,.25)),url("/design-system/sapphire-ribbons.webp") 65% 50% / cover,#063762;opacity:1;visibility:visible}
.intro-line{display:flex;gap:.28em;align-items:baseline;justify-content:center;white-space:nowrap;font-size:clamp(38px,7vw,132px);font-weight:300;letter-spacing:-.055em}
.intro-brand{position:absolute;bottom:8vh;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:rgba(245,241,235,.45)}
.skip{position:absolute;right:28px;top:24px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:rgba(255,255,255,.74);border-radius:999px;padding:9px 13px;font-size:12px;cursor:pointer}
.intro.leaving{opacity:0;transition:opacity var(--story-enter) var(--story-ease-exit)}
.intro.done{opacity:0;visibility:hidden;pointer-events:none;transition:none}
.word{opacity:0;filter:blur(12px);transform:translateX(-40px);animation:none}
.intro.playing .word[data-word="recruit"]{animation:storyWordIn 1.1s .3s forwards}
.intro.playing .word[data-word="hire"]{animation:storyWordIn 1.05s 1.2s forwards}
.intro.playing .word[data-word="people"]{animation:storyWordIn 1.15s 2.1s forwards}
.intro-brand{opacity:0;animation:none}
.intro.playing .intro-brand{animation:storyBrandIn .7s 2.8s forwards}
@keyframes storyWordIn{to{opacity:1;filter:blur(0);transform:none}}
@keyframes storyBrandIn{to{opacity:1}}
.intro.handoff .word{opacity:0!important;animation:none}
.intro.handoff .intro-brand{opacity:0;transition:opacity 300ms ease}
.intro.leaving.plain .intro-line{animation:storyPhraseOut .95s forwards}
@keyframes storyPhraseOut{to{opacity:0;filter:blur(8px);transform:scale(.988)}}
.skip:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Цепочка под текстом: после посадки слов по ней один раз пробегает подсветка. */
.journey-mini span{transition:color 200ms ease}
.journey-mini span.lit{color:var(--ink)}
[data-landing-theme="sapphire"] .journey-mini span.lit{color:var(--hr-color-inverse)}

@media(max-width:760px){
  .intro-line{flex-wrap:wrap;font-size:clamp(28px,9vw,48px);white-space:normal;row-gap:12px;padding-inline:12px}
  .intro-brand{font-size:8px;letter-spacing:.25em}
}
@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  body.is-opening h1 .line,body.is-opening .rise,body.is-opening header{opacity:1;translate:none}
  .slats{display:none!important}
}