/* Развилка на главной: две вселенные. Показывается только на чистом адресе «/» (см. скрипт в head) */
.gw{display:none;}
html.gw-on .gw{display:block;}
html.gw-on,html.gw-on body{overflow:hidden;}
.gw{position:fixed;inset:0;z-index:280;background:#050505;font-family:"Inter Tight",Arial,sans-serif;-webkit-tap-highlight-color:transparent;contain:strict;--gw-pad:clamp(20px,4vw,72px);--gw-fs:72px;}
.gw *{box-sizing:border-box;}

.gw-panel{position:absolute;inset:0;display:block;color:inherit;text-decoration:none;outline:none;clip-path:inset(0 50% 0 50%);will-change:clip-path;}
.gw-design{color:#fff;background:#140C45;}
.gw-auto{color:#fff;background:#0A0A0A;}
.gw-scene{position:absolute;inset:0;will-change:transform;}

/* затемнение под текстом, чтобы заголовок читался поверх живой сцены */
.gw-scrim{position:absolute;left:0;right:0;bottom:0;height:50%;pointer-events:none;transition:opacity .6s ease;}
.gw-design .gw-scrim{background:linear-gradient(to top,rgba(12,7,40,.96) 18%,rgba(12,7,40,.72) 50%,rgba(12,7,40,0));}
.gw-auto .gw-scrim{background:linear-gradient(to top,rgba(10,10,10,.97) 20%,rgba(10,10,10,.78) 52%,rgba(10,10,10,0));}

/* текст обоих миров по центру своей половины: одинаковый кегль, одинаковое число строк, общая базовая линия */
.gw-copy{position:absolute;left:0;bottom:clamp(32px,7.5vh,88px);width:max-content;text-align:center;transform-origin:50% 100%;will-change:transform;}

.gw-title{margin:0;font-size:var(--gw-fs);font-weight:900;line-height:.9;letter-spacing:-.035em;}
.gw-ln{display:block;overflow:hidden;padding:.06em .08em .1em;margin:-.06em -.08em -.1em;}
/* у рукописного «выгодную» глубокие нижние выносные элементы: даём им место, чтобы буквы не обрезались */
.gw-ln.gw-ln-script{padding:.42em .16em .34em;margin:-.42em -.16em -.3em;}
.gw-ln>span{display:inline-block;white-space:nowrap;transform:translateY(130%);}
.gw-serif{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.025em;font-size:1.12em;line-height:.8;padding-right:.06em;color:#CFC3FF;}
.gw-script{display:inline-block;font-family:"Bad Script",cursive;font-weight:400;letter-spacing:0;color:#8CFF00;font-size:.98em;rotate:-3deg;line-height:1;filter:drop-shadow(0 6px 22px rgba(140,255,0,.4));}
.gw-desc{margin:clamp(16px,2.4vh,26px) auto 0;max-width:30em;font-size:clamp(14px,1.05vw,17px);line-height:1.5;opacity:0;}
.gw-auto .gw-desc{color:#bdbdbd;}
.gw-design .gw-desc{color:rgba(255,255,255,.8);}

/* кнопка: без стрелок, при наведении растёт, по ней пробегает блик, а текст перекатывается */
.gw-cta{position:relative;display:inline-flex;align-items:center;margin-top:clamp(16px,2.6vh,30px);padding:0 30px;height:58px;border-radius:999px;font-weight:700;font-size:clamp(15px,1.1vw,18px);overflow:hidden;opacity:0;isolation:isolate;}
.gw-cta>span{display:block;line-height:58px;text-shadow:0 58px 0 currentColor;}
.gw-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 66%);transform:translateX(-130%);}
.gw-design .gw-cta{background:#fff;color:#24157A;}
.gw-auto .gw-cta{background:#8CFF00;color:#000;}
.gw .gw-cta{transition:opacity .9s ease .45s,transform .5s cubic-bezier(.2,.9,.2,1.25),box-shadow .5s ease!important;}
.gw .gw-cta>span{transition:transform .55s cubic-bezier(.7,0,.2,1)!important;}
.gw-panel.is-hot .gw-cta{transform:scale(1.09);}
.gw-design.is-hot .gw-cta{box-shadow:0 14px 44px rgba(160,136,255,.55),0 0 0 6px rgba(255,255,255,.12);}
.gw-auto.is-hot .gw-cta{box-shadow:0 14px 44px rgba(140,255,0,.45),0 0 0 6px rgba(140,255,0,.14);}
.gw-panel.is-hot .gw-cta>span{transform:translateY(-58px);}
.gw .gw-panel.is-hot .gw-cta::before{animation:gwShine 1.1s cubic-bezier(.6,0,.2,1) .1s!important;}
@keyframes gwShine{to{transform:translateX(130%)}}

/* шов между мирами и логотип студии в его центре */
.gw-seam{position:absolute;left:0;top:0;width:0;height:100%;z-index:4;pointer-events:none;will-change:transform;}
.gw-seam::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:100%;background:linear-gradient(#6B4CFF,#B3A3FF 30%,rgba(255,255,255,.55) 50%,#8CFF00 70%,#8CFF00);transform:scaleY(var(--gw-line,0));box-shadow:0 0 16px rgba(179,163,255,.35);}
.gw-logo{position:absolute;left:0;top:50%;width:clamp(170px,15vw,250px);padding:clamp(12px,1.1vw,18px) clamp(16px,1.5vw,24px);transform:translate(-50%,-50%) scale(var(--gw-logo-k,0));border-radius:22px;background:rgba(8,8,8,.92);box-shadow:0 18px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.1);}
.gw-logo::before{content:"";position:absolute;inset:-1px;border-radius:23px;padding:1px;background:linear-gradient(110deg,#B3A3FF,rgba(255,255,255,.15) 45%,#8CFF00);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);}
.gw-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 14px rgba(140,255,0,.25));}

/* вступление, как титр перед фильмом */
.gw-intro{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#050505;pointer-events:none;}
.gw-intro-t{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
.gw-intro-t span{display:block;opacity:0;transform:translateY(10px);}
.gw-intro-t span:first-child{font-weight:800;font-size:clamp(20px,2.4vw,34px);letter-spacing:-.02em;color:#fff;}
.gw-intro-t span:last-child{font:italic 400 clamp(16px,1.6vw,22px)/1 "Playfair Display",Georgia,serif;color:rgba(255,255,255,.72);}
.gw.st-1 .gw-intro-t span{opacity:1;transform:none;}
.gw .gw-intro-t span{transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)!important;}
.gw .gw-intro-t span:last-child{transition-delay:.18s!important;}
.gw.st-2 .gw-intro{opacity:0;}
.gw .gw-intro{transition:opacity .8s ease!important;}

.gw.st-3 .gw-ln>span{transform:none;}
.gw .gw-ln>span{transition:transform 1.05s cubic-bezier(.16,1,.3,1)!important;}
.gw .gw-ln:nth-child(2)>span{transition-delay:.07s!important;}
.gw .gw-ln:nth-child(3)>span{transition-delay:.14s!important;}
.gw .gw-auto .gw-ln>span{transition-delay:.12s!important;}
.gw .gw-auto .gw-ln:nth-child(2)>span{transition-delay:.19s!important;}
.gw .gw-auto .gw-ln:nth-child(3)>span{transition-delay:.26s!important;}
.gw.st-3 .gw-desc,.gw.st-3 .gw-cta{opacity:1;}
.gw .gw-desc{transition:opacity .9s ease .45s!important;}

/* уход в выбранный мир */
.gw.is-leaving .gw-copy,.gw.is-leaving .gw-seam{opacity:0!important;}
/* при наезде в картину затемнение под заголовком уходит: последний кадр совпадает со снимком, с которого открывается страница дизайна */
.gw.is-leaving .gw-scrim{opacity:0;}
.gw .gw-copy,.gw .gw-seam{transition:opacity .45s ease!important;}
.gw.is-gone{opacity:0;pointer-events:none;}
.gw.is-fading{transition:opacity .75s ease!important;}

/* зерно плёнки без режима наложения: overlay заставлял перерисовывать весь экран каждый кадр */
.gw-grain{position:absolute;inset:-60px;z-index:7;pointer-events:none;opacity:.045;background-size:160px 160px;will-change:transform;}
.gw .gw-grain{animation:gwGrain .6s steps(4) infinite!important;}
@keyframes gwGrain{0%{transform:translate(0,0)}25%{transform:translate(-22px,14px)}50%{transform:translate(18px,-26px)}75%{transform:translate(-10px,30px)}}

/* телефон и вертикальные экраны: миры друг над другом, логотип на горизонтальном шве */
.gw.is-stack .gw-copy{width:calc(100vw - 2 * var(--gw-pad));left:var(--gw-pad);bottom:auto;top:0;}
.gw.is-stack .gw-scrim{display:none;}
.gw.is-stack .gw-copy::before{content:"";position:absolute;z-index:-1;left:calc(var(--gw-pad) * -1);width:100vw;top:-38%;bottom:-30%;pointer-events:none;}
/* у дизайна витрина стоит рядом с текстом, а не под ним: лёгкая подложка только слева */
/* под заголовком дизайна - мягкое затемнение снизу вверх, без резкой верхней кромки */
.gw.is-stack .gw-design .gw-copy::before{top:-70%;bottom:-40%;background:linear-gradient(to top,rgba(14,8,46,.9) 0%,rgba(14,8,46,.62) 45%,rgba(14,8,46,0) 100%);}
.gw.is-stack .gw-auto .gw-copy::before{background:linear-gradient(to bottom,rgba(10,10,10,0),rgba(10,10,10,.88) 32%,#0A0A0A 60%);}
.gw.is-stack .gw-seam{width:100%;height:0;}
.gw.is-stack .gw-seam::before{left:0;top:-1px;width:100%;height:2px;transform:scaleX(var(--gw-line,0));background:linear-gradient(90deg,#6B4CFF,#B3A3FF 35%,#8CFF00 65%,#8CFF00);}
.gw.is-stack .gw-logo{left:50%;top:0;width:148px;padding:10px 14px;border-radius:16px;}
.gw.is-stack .gw-logo::before{border-radius:17px;}
.gw.is-stack .gw-desc,.gw.is-low .gw-desc{display:none;}

.gw.is-stack .gw-cta{margin-top:14px;height:44px;padding:0 22px;font-size:14.5px;}
.gw.is-stack .gw-cta>span{line-height:44px;text-shadow:0 44px 0 currentColor;}
.gw.is-stack .gw-panel.is-hot .gw-cta>span{transform:translateY(-44px);}

@media (prefers-reduced-motion:reduce){
  .gw .gw-grain{animation:none!important;}
}

/* загрузка зала: тонкая полоса с процентами под титром, пока трёхмерный зал с картиной не отрисовал первый кадр */
.gw-load{position:absolute;left:50%;top:calc(50% + 74px);width:min(220px,46vw);height:2px;margin-left:calc(min(220px,46vw) / -2);border-radius:2px;background:rgba(255,255,255,.12);opacity:0;transition:opacity .5s ease;}
.gw-load i{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,#8b7bff,#c9bfff 60%,#8CFF00);transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear;}
.gw-load em{position:absolute;left:0;right:0;top:14px;text-align:center;font:500 13px/1 "JetBrains Mono",ui-monospace,monospace;font-style:normal;letter-spacing:.14em;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums;}
.gw.is-wait .gw-load{opacity:1;}
.gw .gx-notes .gx-note,.gw .gx-notes .gx-arrows{transition:opacity .35s ease;}
@keyframes gwLoad{0%{transform:translateX(-110%);}100%{transform:translateX(290%);}}

/* заголовок страницы для поиска и экранных читалок: на экране его роль играет титр «Студия Ивана Удачника представляет» */
.gw-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* без скрипта развилки (отключён JS, старый браузер, сбой сети) - две половины простыми ссылками */
html:not(.gw-js) .gw,html.gw-static .gw{display:block;}
html:not(.gw-js) .gw-panel,html.gw-static .gw-panel{clip-path:none;}
html:not(.gw-js) .gw-design,html.gw-static .gw-design{right:50%;}
html:not(.gw-js) .gw-auto,html.gw-static .gw-auto{left:50%;}
html:not(.gw-js) .gw-copy,html.gw-static .gw-copy{left:6%;right:6%;width:auto;transform:none!important;}
html:not(.gw-js) .gw-ln>span,html.gw-static .gw-ln>span{transform:none!important;white-space:normal;}
html:not(.gw-js) .gw-title,html.gw-static .gw-title{font-size:clamp(30px,4.4vw,72px);}
html:not(.gw-js) .gw-desc,html.gw-static .gw-desc,html:not(.gw-js) .gw-cta,html.gw-static .gw-cta{opacity:1!important;transform:none!important;}
html:not(.gw-js) .gw-intro,html.gw-static .gw-intro,html:not(.gw-js) .gw-seam,html.gw-static .gw-seam{display:none;}
@media (max-width:759px){
  html:not(.gw-js) .gw-design,html.gw-static .gw-design{right:0;bottom:50%;}
  html:not(.gw-js) .gw-auto,html.gw-static .gw-auto{left:0;top:50%;}
}