:root{color-scheme:dark;--yellow:#f1ce45;--white:#fff;--ink:#181b17}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#151915;color:white;font:16px/1.5 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--yellow);outline-offset:6px}header{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:28px 4vw;background:linear-gradient(#0007,transparent);gap:20px}.logo{font-size:35px;font-weight:900;letter-spacing:-2px;line-height:1}.top-right{display:flex;align-items:center;gap:32px}.location{font-size:12px;color:#ffffffe0;letter-spacing:.02em}.contact-open{border:0;background:transparent;padding:7px 0;border-bottom:1px solid #ffffff80;font-size:13px}.menu-open{border:1px solid #ffffff65;border-radius:40px;padding:11px 18px;background:#15191535;display:flex;gap:17px;align-items:center;font-size:13px}.menu-icon{font-size:15px}.stage{position:fixed;inset:0;overflow:hidden;background:#151915}.image-layer{position:absolute;inset:0;opacity:0;will-change:opacity,transform;transform-origin:60% 48%}.image-layer:first-child{opacity:1}.image-layer img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block}.shade{position:absolute;inset:0;background:linear-gradient(0deg,#080e0bc9 0%,#080e0b4d 23%,transparent 57%);pointer-events:none}.scene-heading{position:absolute;left:5vw;bottom:142px;width:min(580px,65vw);text-shadow:0 2px 22px #0004;transition:opacity .18s,transform .18s}.eyebrow{display:block;font-size:11px;letter-spacing:.19em;font-weight:400}.scene-heading .eyebrow{margin-bottom:18px;color:#fffce7}h1{margin:0;font-size:clamp(40px,5.4vw,80px);font-weight:400;line-height:1.04;letter-spacing:-.05em}#scene-description{font-size:15px;margin:17px 0 0;color:#ffffffe0;line-height:1.5;max-width:370px}.scene-heading.inner h1{font-size:clamp(34px,4.4vw,66px)}.scene-heading.inner .eyebrow{font-size:10px;margin-bottom:12px}.scene-heading.inner #scene-description{font-size:14px}.final-cta{display:inline-flex;margin-top:22px;background:var(--yellow);border-radius:40px;padding:13px 21px;gap:25px;color:var(--ink);text-shadow:none;font-size:14px}.final-cta[hidden]{display:none}.scroll-hint{position:absolute;bottom:104px;left:5vw;display:flex;gap:10px;align-items:center;color:#ffffffe5;font-size:12px;transition:opacity .2s}.scroll-hint>span:first-child{font-size:22px}.scene-controls{position:absolute;bottom:104px;right:4vw;display:flex;align-items:center;gap:25px}.scene-count{display:flex;align-items:baseline;gap:8px;font-size:12px;font-variant-numeric:tabular-nums}.scene-count b{font-size:22px;font-weight:400}.scene-count>span{color:#ffffff85}.next-scene{width:43px;height:43px;border-radius:50%;border:1px solid #ffffff80;background:#0002;font-size:20px}.timeline{position:absolute;bottom:30px;left:5vw;right:4vw;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:15px}.timeline a{position:relative;padding-top:14px;font-size:11px;color:#ffffff9c;white-space:nowrap;transition:color .15s}.timeline a::before{content:'';height:1px;background:#ffffff40;position:absolute;top:0;left:0;right:0}.timeline a::after{content:'';height:2px;position:absolute;top:0;left:0;right:0;background:var(--yellow);transform:scaleX(var(--fill,0));transform-origin:left}.timeline a[aria-current=true]{color:#fff}.journey{position:relative;pointer-events:none;height:850svh}.journey span{position:absolute}.journey span:nth-child(1){top:0}.journey span:nth-child(2){top:calc(750svh / 7)}.journey span:nth-child(3){top:calc(1500svh / 7)}.journey span:nth-child(4){top:calc(2250svh / 7)}.journey span:nth-child(5){top:calc(3000svh / 7)}.journey span:nth-child(6){top:calc(3750svh / 7)}.journey span:nth-child(7){top:calc(4500svh / 7)}.journey span:nth-child(8){top:750svh}dialog{color:#242721;background:#f6f6f1;border:0;border-radius:7px;width:min(470px,calc(100% - 30px));max-height:calc(100svh - 40px);padding:28px 34px;box-shadow:0 24px 90px #0008}dialog::backdrop{background:#070d0ac9}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.dialog-top .eyebrow{font-size:10px;color:#6a7064}.close{font-size:30px;border:0;background:transparent;padding:0 4px;line-height:1}.menu-links{display:grid}.menu-links a{font-size:23px;letter-spacing:-.03em;padding:10px 0;border-bottom:1px solid #dbded2;display:flex;align-items:center;gap:20px}.menu-links a span{font-size:10px;color:#898f80;letter-spacing:0}.menu-phone{display:block;margin-top:25px;font-size:14px}dialog h2{font-size:42px;line-height:1.1;letter-spacing:-.04em;font-weight:400;margin:0 0 16px}dialog p{font-size:15px;color:#69715f}dt{font-size:12px;color:#6f7865;margin-top:22px}dd{margin:6px 0 0;font-size:18px}.external{display:flex;gap:24px;border-top:1px solid #d1d7c9;padding-top:18px;font-size:13px;margin-top:25px}.skip{position:fixed;top:-100px;left:20px;z-index:100}.skip:focus{top:10px;background:#f1ce45;color:#111;padding:12px}.no-js{position:fixed;bottom:20px;left:20px;background:#000b;padding:20px;z-index:40}.no-js p{max-width:400px}
@media(max-width:900px){.location{display:none}.timeline{gap:9px}.timeline a{font-size:10px}.scene-heading{bottom:150px}header{padding:22px 5vw}.top-right{gap:20px}}
@media(max-width:620px){header{padding:21px 6vw}.logo{font-size:30px}.top-right{gap:18px}.contact-open{font-size:12px}.menu-open{border:0;padding:6px;background:none}.menu-label{display:none}.menu-icon{font-size:20px}.scene-heading{left:7vw;bottom:155px;width:82vw}.scene-heading .eyebrow{font-size:10px;margin-bottom:15px}h1{font-size:clamp(43px,11vw,64px)}#scene-description{font-size:14px;max-width:260px}.scene-heading.inner h1{font-size:40px}.scene-heading.inner #scene-description{font-size:13px;max-width:270px}.timeline{left:7vw;right:7vw;bottom:max(28px,env(safe-area-inset-bottom));gap:7px}.timeline a{padding-top:10px;min-height:30px;overflow:hidden;font-size:0;color:transparent}.timeline a::before{height:2px}.timeline a::after{height:2px}.timeline a[aria-current=true]{font-size:0}.scene-controls{bottom:80px;right:7vw;gap:14px}.scene-count b{font-size:18px}.scene-count{font-size:11px}.next-scene{width:38px;height:38px}.scroll-hint{bottom:90px;left:7vw;max-width:185px;font-size:11px;gap:8px}.shade{background:linear-gradient(0deg,#080e0beb 0%,#080e0b7a 32%,transparent 65%)}.final-cta{padding:12px 18px;font-size:13px;margin-top:18px}dialog{padding:23px 27px}.menu-links a{font-size:21px;padding:9px 0}.journey{height:780svh}.journey span{display:none}.image-layer{transform-origin:60% 43%}}
@media(max-height:570px) and (orientation:landscape){header{padding:15px 4vw}.scene-heading{bottom:105px}.scene-heading h1,.scene-heading.inner h1{font-size:35px}.scene-heading .eyebrow{margin-bottom:9px}.scene-heading #scene-description{font-size:12px;margin-top:9px}.timeline{bottom:18px}.scene-controls{bottom:67px}.scroll-hint{bottom:67px}.final-cta{margin-top:12px;padding:9px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.image-layer{will-change:opacity}.scene-heading,.scroll-hint,.timeline a{transition:none}}

/* Official slanted LEVEL wordmark, with its optional sport subtitle clipped. */
.brand{display:inline-block;position:relative;width:3.9em;aspect-ratio:1680/263;height:auto;overflow:hidden;vertical-align:-.035em;line-height:0;letter-spacing:0}.brand img{display:block;width:100%;height:auto;max-width:none}.logo .brand{display:block;width:112px;margin:0;background:none}.eyebrow .brand{width:5em;vertical-align:-.08em;margin:0 .12em}dialog .brand{filter:invert(1);mix-blend-mode:multiply}h1 .brand{width:3.65em;vertical-align:-.015em}@media(max-width:620px){.logo .brand{width:98px}}

.brand{mix-blend-mode:screen}

/* One opening logo: the physical wall sign. */
header .logo{transition:opacity .2s}.is-intro header .logo{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:620px){
 header{padding:calc(10px + env(safe-area-inset-top,0px)) 20px 10px;min-height:60px;background:linear-gradient(#080e0bf2,#080e0b40,transparent)}
 .top-right{gap:12px}.contact-open{font-size:14px;min-height:44px;padding:10px 0}.menu-open{min-width:44px;min-height:44px;justify-content:center;padding:10px}.logo .brand{width:92px}
 .stage{height:100dvh}.image-layer{top:54px;bottom:auto;height:calc(var(--mobile-frame-height,.70)*100svh - 40px);transform-origin:center}
 .image-layer img{object-fit:cover}.shade{background:linear-gradient(0deg,#080e0b 0%,#080e0bfa 19%,#080e0b55 36%,transparent 51%)}
 .scene-heading,.scene-heading.inner{left:22px;right:22px;bottom:calc(112px + env(safe-area-inset-bottom,0px));width:auto;max-width:420px}
 .scene-heading h1,.scene-heading.inner h1{font-size:clamp(29px,8vw,36px);line-height:1.1;letter-spacing:-.035em}
 .scene-heading .eyebrow,.scene-heading.inner .eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:10px}
 #scene-description,.scene-heading.inner #scene-description{font-size:14px;line-height:1.4;margin-top:10px;max-width:340px}
 .scroll-hint{left:22px;bottom:calc(66px + env(safe-area-inset-bottom,0px));font-size:12px;max-width:210px}
 .scene-controls{right:20px;bottom:calc(53px + env(safe-area-inset-bottom,0px));gap:12px}.next-scene{width:46px;height:46px}
 .timeline{left:20px;right:20px;bottom:calc(8px + env(safe-area-inset-bottom,0px));gap:6px}.timeline a{min-height:38px;padding-top:17px}.timeline a::before,.timeline a::after{top:12px}
 .final-cta{font-size:14px;min-height:44px;padding:11px 18px;margin-top:14px}
 dialog{padding:22px;max-height:calc(100dvh - 32px)}.close{width:44px;height:44px}.menu-links a{min-height:46px}.dialog-top{margin-bottom:12px}
}
@media(max-width:620px) and (max-height:700px){.image-layer{height:calc(var(--mobile-frame-height,.70)*100svh - 58px)}.scene-heading,.scene-heading.inner{bottom:calc(100px + env(safe-area-inset-bottom,0px))}.scene-heading h1,.scene-heading.inner h1{font-size:28px}.scene-heading .eyebrow,.scene-heading.inner .eyebrow{margin-bottom:7px}#scene-description,.scene-heading.inner #scene-description{margin-top:7px}.final-cta{margin-top:10px}}

@media(max-width:620px){.image-layer{max-height:calc(100vw * var(--mobile-frame-max,1.55))}}

/* Lightweight two-leaf door transition; identical images share browser cache. */
#layer-a{z-index:2;perspective:1500px;pointer-events:none}#layer-b{z-index:1;pointer-events:none}.shade{z-index:3}.scene-heading,.scroll-hint,.scene-controls,.timeline{z-index:4}
#layer-a .door-right{position:absolute;inset:0;display:none}#layer-a.doors-active img{position:absolute;inset:0;backface-visibility:hidden;will-change:transform}#layer-a.doors-active .door-left{clip-path:inset(0 50% 0 0);transform-origin:left center}#layer-a.doors-active .door-right{display:block;clip-path:inset(0 0 0 50%);transform-origin:right center}#layer-a .door-right[hidden]{display:none}

/* Progress starts on the opening scene, immediately above every label. */
.timeline a:first-child{--fill:1}.timeline a::before,.timeline a::after{top:0}
@media(max-width:620px){.timeline{display:flex;overflow-x:auto;gap:12px;scrollbar-width:none}.timeline::-webkit-scrollbar{display:none}.timeline a,.timeline a[aria-current=true]{flex:0 0 82px;font-size:11px;color:#ffffffb3;padding-top:9px;min-height:36px}.timeline a[aria-current=true]{color:#fff}.timeline a::before,.timeline a::after{top:0}}

/* ═══════════ ВХОД В КЛУБ ═══════════
   Дверь внутрь должна быть под рукой с первой сцены: решают зайти не обязательно
   на последнем кадре, и искать кнопку человек не станет. */
.enter-club{
  border:1px solid var(--yellow);border-radius:40px;padding:10px 18px;
  background:#f1ce4518;font-size:13px;color:var(--yellow);white-space:nowrap;
}
.enter-club:hover{background:var(--yellow);color:var(--ink)}
@media(max-width:620px){ .enter-club{padding:8px 14px;font-size:12px} }

/* Юридические ссылки в меню и контактах: нужны, но не спорят с направлениями клуба */
.menu-docs{display:grid;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid #d1d7c9}
.menu-docs a{font-size:12px;color:#6b7263;line-height:1.4}
.menu-docs a:hover{color:#242721}

/* Полоса согласия на cookie. Держим сверху: внизу она накрывала заголовок сцены. */
.cookie-bar{
  position:fixed;left:3vw;right:3vw;top:calc(84px + env(safe-area-inset-top,0px));z-index:60;
  background:#f6f6f1;color:#242721;border-radius:12px;padding:14px 16px;
  box-shadow:0 18px 50px #0009;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0;font-size:12px;line-height:1.45;flex:1 1 240px;color:#3a3f36}
.cookie-bar a{color:#7a6a12;border-bottom:1px solid #c9bd77}
.cookie-actions{display:flex;gap:10px;align-items:center}
.cookie-ok{border:0;background:var(--yellow);color:var(--ink);border-radius:40px;padding:9px 18px;font-size:13px;font-weight:700}
.cookie-no{border:0;background:transparent;color:#6b7263;font-size:12px;border-bottom:1px solid #c2c8b7;padding:0 0 2px}
@media(max-width:620px){
  .cookie-bar{left:4vw;right:4vw;top:calc(72px + env(safe-area-inset-top,0px));padding:12px 14px;gap:10px}
  .cookie-bar p{font-size:11px}
}

/* ЛЕНТА СЦЕН НА ТЕЛЕФОНЕ. Девять подписей в строку не помещаются, и раньше они прятались
   целиком — гость видел девять одинаковых чёрточек и не понимал, где он. Теперь подпись
   показывает только текущая сцена, прямо под своей полоской. */
@media(max-width:620px){
  .timeline{overflow:visible}
  /* overflow:hidden из базовых мобильных стилей срезал подпись по ширине колонки */
  .timeline a{min-height:26px;position:relative;font-size:0;overflow:visible}
  .timeline a .nav-label{display:none}
  .timeline a[aria-current=true] .nav-label{
    display:block;position:absolute;top:12px;left:50%;transform:translateX(-50%);
    white-space:nowrap;font-size:10px;color:#fff;
  }
  /* У крайних сцен подпись центром уходила за край экрана и обрезалась */
  .timeline a[aria-current=true]:first-child .nav-label{left:0;transform:none}
  .timeline a[aria-current=true]:last-child .nav-label{left:auto;right:0;transform:none}
}

/* Заголовок с логотипом не помещался в узкую колонку, и точка после «LEVEL» срывалась
   на отдельную строку. На широких экранах место есть — даём его. */
@media(min-width:901px){ .scene-heading{width:min(720px,70vw)} }

/* ЛЕНТА СЦЕН ЦЕЛИКОМ НА ЭКРАНЕ ТЕЛЕФОНА.
   В новой вёрстке лента уехала в горизонтальную прокрутку: девять делений по 82 пикселя
   не помещаются в экран, и гость видел половину пути, а вторую надо было доматывать
   пальцем вбок — про такую прокрутку никто не догадывается. Возвращаем все девять на
   один экран: полоски сжимаем, а подпись показывает только текущая сцена — девять
   названий в строку не поместятся ни при каком кегле. */
@media(max-width:620px){
  .timeline{
    display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;
    overflow:visible;left:6vw;right:6vw;
  }
  .timeline a,
  .timeline a[aria-current=true]{
    flex:initial;min-width:0;font-size:0;padding-top:9px;min-height:26px;
    position:relative;overflow:visible;
  }
  .timeline a .nav-label{display:none}
  .timeline a[aria-current=true] .nav-label{
    display:block;position:absolute;top:12px;left:50%;transform:translateX(-50%);
    white-space:nowrap;font-size:10px;color:#fff;
  }
  /* У крайних сцен подпись центром уходила за край экрана и обрезалась */
  .timeline a[aria-current=true]:first-child .nav-label{left:0;transform:none}
  .timeline a[aria-current=true]:last-child .nav-label{left:auto;right:0;transform:none}
}
/* Совсем узкие телефоны: делений девять, зазор меньше — иначе полоски исчезают */
@media(max-width:380px){
  .timeline{gap:4px;left:5vw;right:5vw}
}

/* ТЕЛЕГРАМ РЯДОМ С НОМЕРОМ. Часть гостей звонить не любит и пишет — значок стоит там же,
   где телефон, чтобы выбор был очевиден. Канал тот же, что у клуба на level-sport.ru. */
.menu-contact{display:flex;align-items:center;gap:14px;margin-top:25px}
.menu-contact .menu-phone{margin-top:0}
.phone-row{display:inline-flex;align-items:center;gap:12px}
.tg-link{
  width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#242721;color:#f6f6f1;flex-shrink:0;transition:background .15s,transform .15s;
}
.tg-link svg{width:16px;height:16px;fill:currentColor;display:block}
.tg-link:hover{background:#2ea2d8;transform:translateY(-1px)}
@media(max-width:620px){ .tg-link{width:34px;height:34px} .tg-link svg{width:17px;height:17px} }