/* =========================================================
   W.J.Rec community — wjrec.com
   Тёмная «кинематографичная» тема, фирменный цвет #9C1536
   ========================================================= */

:root{
  --ink:#0A0A0B;
  --ink-2:#101013;
  --paper:#F4F2EF;
  --muted:rgba(244,242,239,.62);
  --faint:rgba(244,242,239,.34);
  --line:rgba(244,242,239,.14);
  --brand:#6E1128;      /* глубокий гранат — заливки */
  --brand-2:#4A0B1B;    /* тёмный гранат — градиенты */
  --accent:#C8AE8A;     /* шампань — мелкие акценты */
  --gold:#C8AE8A;
  --max:1180px;
  --pad:clamp(20px,5vw,64px);
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  background:var(--ink);
}

body{
  margin:0;
  font-family:var(--font);
  color:var(--paper);
  background:var(--ink);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,svg,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.035em;line-height:1.02}
p{margin:0}
ol,ul,dl,dd{margin:0;padding:0;list-style:none}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.kicker{
  display:inline-block;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin-bottom:clamp(16px,2.4vw,26px);
}
.lead{font-size:clamp(17px,1.5vw,21px);color:rgba(244,242,239,.86)}

/* ============ ВЕРХНЯЯ ПАНЕЛЬ ============ */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:14px var(--pad);
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.is-solid{
  background:rgba(10,10,11,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line);
}
.topbar__brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.topbar__mark{width:50px;color:var(--paper);display:block}
.topbar__mark svg{width:100%;height:auto}
.topbar__name{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--paper);line-height:1}

.topbar__nav{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto}
.topbar__nav a{
  text-decoration:none;font-size:14px;letter-spacing:.02em;color:var(--muted);
  padding:6px 0;position:relative;transition:color .25s var(--ease);
}
.topbar__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .35s var(--ease);
}
.topbar__nav a:hover{color:var(--paper)}
.topbar__nav a:hover::after{right:0}

.topbar__burger{
  display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
  background:transparent;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.topbar__burger i{display:block;width:18px;height:1.5px;background:var(--paper);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.topbar__burger[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.topbar__burger[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.mobilemenu{
  position:fixed;inset:0;z-index:85;
  background:rgba(10,10,11,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.mobilemenu.is-open{opacity:1;pointer-events:auto}
.mobilemenu nav{display:flex;flex-direction:column;gap:6px;text-align:center;padding:var(--pad)}
.mobilemenu a{
  text-decoration:none;font-family:var(--display);font-size:clamp(22px,6vw,32px);font-weight:500;letter-spacing:-.01em;
  padding:8px 0;
}

/* ============ ИСТОРИЯ / ВИДЕО-СЦЕНА ============ */
.story{position:relative}

.story__stage{
  position:fixed;inset:0;height:100svh;width:100%;z-index:0;
  overflow:hidden;background:#000;
  opacity:1;transition:opacity .45s var(--ease);
}
.story__stage.is-out{opacity:0;visibility:hidden}
.story__poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 34%;
  z-index:0;opacity:1;transition:opacity .6s var(--ease);
}
.story__stage.is-ready .story__poster{opacity:0}
@media (min-aspect-ratio:6/5){
  .story__poster{
    transform:translateX(17%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
            mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  }
}

/* кадр ролика рисуется в canvas — стабильно во всех браузерах */
.story__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;opacity:0;transition:opacity .8s var(--ease);
}
.story__stage.is-ready .story__canvas{opacity:1}

/* пылинки в луче (js/dust.js): гуще там, где свет, и реже под текстом */
.story__dust{
  position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;
  opacity:calc(.95 - var(--shade,0) * .3);
  -webkit-mask-image:radial-gradient(75% 85% at 68% 32%,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%);
          mask-image:radial-gradient(75% 85% at 68% 32%,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%);
}
@media (max-width:900px){
  .story__dust{
    -webkit-mask-image:radial-gradient(110% 60% at 50% 22%,#000 0%,rgba(0,0,0,.5) 60%,transparent 100%);
            mask-image:radial-gradient(110% 60% at 50% 22%,#000 0%,rgba(0,0,0,.5) 60%,transparent 100%);
  }
}

/* сам <video> нужен только как источник кадров */
.story__film{
  position:absolute;left:0;top:0;width:2px;height:2px;
  opacity:.01;pointer-events:none;z-index:0;
}

.story__shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,11,.96) 0%,rgba(10,10,11,.9) 42%,rgba(10,10,11,.62) 66%,rgba(10,10,11,.22) 90%),
    radial-gradient(120% 90% at 62% 38%,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 62%,rgba(10,10,11,.8) 100%),
    linear-gradient(180deg,rgba(10,10,11,.75) 0%,rgba(10,10,11,0) 28%,rgba(10,10,11,0) 60%,rgba(10,10,11,.92) 100%);
  opacity:calc(.3 + var(--shade,0) * .7);
  transition:opacity .35s linear;
}
@media (max-width:900px){
  .story__shade{
    background:
      linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,0) 14%,rgba(10,10,11,0) 36%,rgba(10,10,11,.6) 58%,rgba(10,10,11,.92) 100%);
    opacity:calc(.8 + var(--shade,0) * .2);
  }
  /* в главах кадр притушен, чтобы текст читался */
  .story__stage.is-ready .story__canvas{opacity:calc(1 - var(--shade,0) * .6)}
}
/* ---- Первый экран ---- */
.intro{
  position:relative;z-index:5;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(72px + 4svh) var(--pad) calc(96px + 2svh);
}
.intro__inner{
  width:100%;max-width:var(--max);margin:0 auto;
  text-align:left;
  opacity:var(--intro-a,1);
  transform:translate3d(0,var(--intro-y,0),0);
  will-change:opacity,transform;
}
.intro__eyebrow{
  display:block;font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin-bottom:clamp(16px,2.2vw,26px);
}
.intro__title{
  display:flex;flex-direction:column;
  max-width:10.5ch;
  font-size:clamp(38px,5.6vw,86px);
  font-weight:500;letter-spacing:-.045em;line-height:.98;
  text-shadow:0 12px 60px rgba(0,0,0,.55);
}
.intro__title span:first-child{color:rgba(244,242,239,.7)}
.intro__title span:last-child{color:var(--paper)}
.intro__sub{
  margin-top:clamp(18px,2.4vw,30px);
  max-width:40ch;
  font-size:clamp(18px,1.7vw,24px);line-height:1.45;letter-spacing:-.01em;
  color:rgba(244,242,239,.85);
}
.intro__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.2vw,40px)}
.intro__actions .btn{margin-top:0}

.intro__bottom{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,3.4vh,36px);
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;gap:14px 22px;
  opacity:var(--intro-a,1);
}
.cue{
  appearance:none;background:transparent;border:0;cursor:pointer;color:var(--muted);
  font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:0;
  display:inline-flex;align-items:center;gap:10px;transition:color .3s var(--ease);
  white-space:nowrap;
}
.cue:hover{color:var(--paper)}
.cue b{animation:bob 2s var(--ease) infinite;font-weight:400}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.progress{flex:1 1 auto;height:1px;background:var(--line);min-width:60px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,rgba(200,174,138,.35),var(--accent));transform:scaleX(0);transform-origin:0 50%}

.motion{
  appearance:none;background:transparent;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;transition:color .3s var(--ease);
}
.motion:hover{color:var(--paper)}
.motion[aria-pressed="true"]{color:var(--accent)}

/* ---- Главы: текст, который сменяется при прокрутке ---- */
.chapters{position:relative;z-index:5}

.chapter{
  position:relative;
  min-height:118svh;
  display:flex;align-items:center;
}
.chapter__pin{
  width:100%;
  display:flex;align-items:center;
  padding:calc(64px + 4svh) var(--pad) 8svh;
}
.chapter__copy{
  width:100%;max-width:var(--max);margin:0 auto;
}
.js .chapter__copy{
  opacity:var(--a,0);
  transform:translate3d(0,var(--y,0px),0);
  will-change:opacity,transform;
}
.chapter h2{
  font-size:clamp(28px,4.2vw,58px);
  max-width:17ch;
  margin-bottom:clamp(18px,2.6vw,30px);
  letter-spacing:-.04em;
}
.chapter .lead{max-width:62ch}
.chapter p + p{margin-top:16px;color:var(--muted);max-width:62ch}

/* карточки подразделений */
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(28px,4vw,48px);border-radius:16px;overflow:hidden;
}
.card{
  background:rgba(16,16,19,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:clamp(22px,2.4vw,32px);position:relative;
  transition:background .35s var(--ease);
}
.card:hover{background:rgba(200,174,138,.06)}
.card__num{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.card h3{font-size:clamp(20px,1.9vw,26px);margin:10px 0 10px;letter-spacing:-.03em;font-weight:600}
.card p{font-size:15px;color:var(--muted);line-height:1.55}
.card a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent)}

/* преимущества: две колонки */
.duo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(24px,4vw,64px);margin-top:clamp(26px,3.6vw,44px);
  max-width:980px;
}
.duo__col h3{
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.duo__col li{
  font-size:clamp(17px,1.6vw,21px);letter-spacing:-.01em;line-height:1.35;
  padding:14px 0;border-top:1px solid var(--line);
}
.duo__col li:last-child{border-bottom:1px solid var(--line)}
.duo__col b{
  font-weight:600;
  background:linear-gradient(120deg,var(--paper) 20%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- кнопки: текст со стрелкой ---- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:14px;
  margin-top:clamp(28px,3.4vw,44px);padding:8px 0;
  font:500 17px/1.2 var(--font);letter-spacing:-.01em;text-decoration:none;
  color:var(--paper);
}
/* тонкая линия шампань: в покое — треть, при наведении — во всю длину */
.btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);
  transform-origin:left;transform:scaleX(.35);
  transition:transform .6s var(--ease);
}
.btn__arrow{flex:0 0 auto;transition:transform .5s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translateX(6px)}
.btn:focus-visible{outline:none}

/* вторичная — приглушённая */
.btn--muted{color:var(--muted)}
.btn--muted::after{background:var(--faint)}
.btn--muted:hover{color:var(--paper)}

.intro__actions{gap:14px 44px}

@media (prefers-reduced-motion:reduce){
  .btn::after,.btn__arrow{transition:none}
}

/* ============ КОНТАКТЫ (пятый шаг истории, на видео) ============ */
.chapter--contacts .contacts__grid{
  display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,40px);
  max-width:620px;margin-top:clamp(28px,4vw,48px);
}
.bigmail{
  display:block;text-decoration:none;line-height:1.15;
  font-family:var(--display);font-size:clamp(26px,3.6vw,48px);font-weight:500;letter-spacing:-.035em;
  transition:color .3s var(--ease);
}
.bigmail:hover{color:var(--accent)}
.bigmail--sm{font-size:clamp(17px,2vw,24px);line-height:1.3;color:var(--muted);margin-top:14px}
.bigmail--sm small{font-size:.62em;letter-spacing:.04em;color:var(--faint)}

.contacts__meta{display:grid;gap:0}
.contacts__meta div{display:flex;flex-wrap:wrap;gap:4px 16px;padding:12px 0;border-top:1px solid var(--line)}
.contacts__meta div:last-child{border-bottom:1px solid var(--line)}
.contacts__meta dt{flex:0 0 120px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.contacts__meta dd{font-size:15px}
.contacts__meta a{text-decoration:none;border-bottom:1px solid var(--accent)}

/* ============ ПОДВАЛ: тонкая полоса в одну строку ============ */
.footer{
  position:relative;z-index:6;background:var(--ink);
  padding:18px var(--pad);
  border-top:1px solid var(--line);
}
.footer__inner{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;
}
.footer__brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper);opacity:.85;transition:opacity .3s var(--ease)}
.footer__brand:hover{opacity:1}
.footer__mark{width:34px;display:block}
.footer__mark svg{width:100%;height:auto;display:block}
.footer__word{height:12px;width:auto;display:block;color:var(--paper)}
.footer__nav{display:flex;flex-wrap:wrap;gap:8px 28px;margin-left:auto}
.footer__nav a{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .3s var(--ease)}
.footer__nav a:hover{color:var(--paper)}
.footer__nav span{color:var(--accent)}
.footer__copy{margin:0;font-size:12px;letter-spacing:.04em;color:var(--faint)}

@media (max-width:640px){
  .footer{padding:20px var(--pad) 24px}
  .footer__inner{flex-direction:column;align-items:flex-start;gap:14px}
  .footer__nav{margin-left:0}
}

/* ============ АДАПТИВ ============ */
@media (max-width:900px){
  .topbar__nav{display:none}
  .topbar__burger{display:flex;margin-left:auto}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro{justify-content:flex-end;padding-bottom:calc(96px + 2svh)}
  .intro__title{font-size:clamp(36px,10.5vw,60px)}
}
@media (max-width:640px){
  .chapter{min-height:105svh}
  .chapter__pin{padding:calc(60px + 3svh) var(--pad) 6svh}
  .cards{grid-template-columns:1fr}
  .intro__bottom{flex-wrap:wrap}
  .intro__eyebrow{display:none}
  .progress{order:3;flex-basis:100%}
  .motion{margin-left:auto}
}

/* ============ РЕЖИМ БЕЗ АНИМАЦИИ ============ */
body.no-motion .cue b{animation:none}
body.no-motion .chapter__copy{opacity:1!important;transform:none!important}
body.no-motion .intro__inner{opacity:1!important;transform:none!important}
body.no-motion .story__film{display:none}
body.no-motion .story__poster{opacity:1!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cue b{animation:none}
  .chapter__copy{opacity:1!important;transform:none!important}
}

/* печать */
@media print{
  .topbar,.mobilemenu,.story__stage,.intro__bottom{display:none}
  body{background:#fff;color:#000}
}