:root{--serif:'Newsreader',Georgia,serif;--sans:'Geist',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;--u:#F6F1E8;--u2:rgba(246,241,232,.7);--ocr:230,236,246;--cc:#fff;--ss:1;--oi:.35;--clc:#fff;--cls:#999;--clo:.3;--emb:0;--aur:0}
body[data-ui=dark]{--u:#15130F;--u2:rgba(21,19,15,.68)}
*{box-sizing:border-box;margin:0}
html{background:#050911}
body{background:#050911;color:#F6F1E8;font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* небо: одна непрерывная картинка, цвета пишет JS по времени суток */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;background:#050911}
.sky::after{content:'';position:absolute;inset:0;opacity:.07;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stars{position:absolute;left:-30vw;top:-45vh;transform-origin:50% 78%;will-change:transform,opacity}
.aur{position:absolute;left:-10%;width:120%;height:44vh;top:6vh;filter:blur(64px);opacity:calc(var(--aur)*.5);mix-blend-mode:screen;will-change:transform}
.a1{background:linear-gradient(90deg,transparent,#2dffb0 30%,#34d0c8 55%,transparent);animation:drift 22s ease-in-out infinite alternate}
.a2{top:18vh;height:30vh;background:linear-gradient(90deg,transparent 10%,#6a6dff 45%,#b45cff 70%,transparent);opacity:calc(var(--aur)*.32);animation:drift 31s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(-6%,0,0) skewX(-8deg) scaleY(.85)}to{transform:translate3d(6%,3vh,0) skewX(6deg) scaleY(1.15)}}
.ember{position:absolute;inset:0;opacity:var(--emb);background:radial-gradient(ellipse 80% 46% at 50% 102%,rgba(255,98,26,.75),rgba(255,60,10,.22) 46%,transparent 72%)}
.orb{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.orb i,.orb canvas{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%}
.halo{width:150vmin;height:150vmin;background:radial-gradient(circle,rgba(var(--ocr),.55) 0,rgba(var(--ocr),.26) 9%,rgba(var(--ocr),.1) 24%,rgba(var(--ocr),.03) 44%,rgba(var(--ocr),0) 64%);mix-blend-mode:screen;opacity:var(--oi)}
.sunc{width:calc(8vmin*var(--ss));height:calc(8vmin*var(--ss));background:radial-gradient(circle,var(--cc) 0 26%,rgba(var(--ocr),.95) 44%,rgba(var(--ocr),.35) 62%,rgba(var(--ocr),0) 76%);mix-blend-mode:screen}
.moonc{width:9vmin;height:9vmin;filter:drop-shadow(0 0 2.4vmin rgba(200,214,240,.5))}
.orb[data-k=sun] .moonc,.orb[data-k=moon] .sunc{display:none}
.cl{position:absolute;left:0;width:200vw;background:linear-gradient(180deg,var(--clc) 30%,var(--cls));opacity:var(--clo);-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:100vw 100%;mask-size:100vw 100%;will-change:transform;animation:cdrift 200s linear infinite}
.c1{top:5vh;height:26vh;-webkit-mask-image:var(--ct1);mask-image:var(--ct1)}
.c2{top:22vh;height:22vh;animation-duration:120s;animation-direction:reverse;filter:blur(1px);opacity:calc(var(--clo)*.8);-webkit-mask-image:var(--ct2);mask-image:var(--ct2)}
@keyframes cdrift{to{transform:translate3d(-100vw,0,0)}}
.mt{position:absolute;bottom:0;left:0;width:100%;height:38vh}
.mtf{position:absolute;left:0;right:0;bottom:0;height:15vh;background:linear-gradient(transparent,rgba(3,6,10,.62))}

/* интерфейс */
.hd{position:fixed;inset:0 0 auto;z-index:6;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:28px 4vw;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--u);transition:color .6s}
.hd a{text-decoration:none}
.hd .mid{opacity:.7}
.hd .wr{justify-self:end}
.hd .wr i{font-style:normal;display:inline-block;transition:transform .5s cubic-bezier(.22,.7,.2,1)}
.hd .wr:hover i{transform:translate(3px,-3px)}
.clk{position:fixed;left:4vw;bottom:2.2vh;z-index:6;display:flex;align-items:baseline;gap:1.6rem;color:#F6F1E8;pointer-events:none}
.clk .d{font:300 clamp(44px,5.8vw,100px)/1 var(--serif);font-feature-settings:"tnum","lnum";letter-spacing:-.02em}
.clk .pl{font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(246,241,232,.72);transition:opacity .35s}
.rl{position:fixed;right:2.4vw;top:20vh;bottom:20vh;width:1px;z-index:6;color:var(--u);transition:color .6s}
.rl .ln{position:absolute;inset:0;background:currentColor;opacity:.3}
.rl .mk{position:absolute;left:-4px;top:0;width:9px;height:9px;border-radius:50%;background:currentColor;margin-top:-4px;will-change:top}
.rl a{position:absolute;right:-3px;width:7px;height:7px;margin-top:-3px;border-radius:50%;border:1px solid currentColor;background:transparent;text-decoration:none}
.rl a span{position:absolute;right:18px;top:50%;transform:translateY(-50%);white-space:nowrap;font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .3s;pointer-events:none}
.rl a:hover span,.rl a:focus-visible span{opacity:1}
.rl b{position:absolute;right:14px;font:400 9px/1 var(--mono);letter-spacing:.08em;opacity:.55;margin-top:-4px}

/* секции */
main{position:relative;z-index:2}
.sec{position:relative;color:var(--c)}
.sec[data-ink=light]{--c:#F6F1E8;--c2:rgba(246,241,232,.74)}
.sec[data-ink=dark]{--c:#15130F;--c2:rgba(21,19,15,.68)}
.in{height:200vh}.ch{height:300vh}.il{height:150vh}.fin{height:200vh}
.stage{position:sticky;top:0;height:100svh;display:grid;align-items:center;padding:0 5vw 8vh}
.ch .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3vw}
.plate{position:relative;align-self:stretch;margin-top:4vh}
.r .plate{order:2}
/* фото живут в небе: проступают из него, подкрашены светом часа, уходят обратно */
.bg{position:absolute;inset:0}
.pic{position:absolute;top:0;bottom:0;width:64vw;opacity:0;will-change:opacity}
.pic.rt{right:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 52%);mask-image:linear-gradient(90deg,transparent,#000 52%)}
.pic.lf{left:0;-webkit-mask-image:linear-gradient(270deg,transparent,#000 52%);mask-image:linear-gradient(270deg,transparent,#000 52%)}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 66%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 66%,transparent)}
.pic::after{content:'';position:absolute;inset:0;background:var(--grade);mix-blend-mode:soft-light}
.cap{position:absolute;right:0;bottom:0;white-space:nowrap;font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c2)}
.tx{justify-self:start;max-width:44rem;margin-top:4vh;will-change:transform,opacity}
.l .tx{padding-left:2vw}
.eb{display:flex;align-items:center;gap:14px;font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c2)}
.eb i{display:block;width:44px;height:1px;background:var(--c);transform-origin:left;transform:scaleX(var(--p,1))}
.h{margin:1.5rem 0 1.4rem;font:300 clamp(36px,min(6vw,11vh),108px)/.98 var(--serif);letter-spacing:-.028em}
.w{display:inline-block;vertical-align:top;overflow:hidden;padding:.16em .05em .16em .09em;margin:-.16em 0 -.16em -.09em}
.w i{display:inline-block;font-style:normal;transform-origin:0 100%}
.w i.it{font-style:italic}
.pp{max-width:30rem;font:300 clamp(16px,1.3vw,20px)/1.55 var(--serif)}
.ft{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.6rem;font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c2)}
.cta{display:inline-flex;align-items:center;gap:.9rem;margin-top:1.8rem;padding:17px 26px;border:1px solid var(--c);font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--c);transition:background-color .4s,color .4s}
.cta:hover{background:var(--c);color:#050911}
.sec[data-ink=dark] .cta:hover{color:#EFEAE0}
.cta i{font-style:normal}
.in .stage,.il .stage,.fin .stage{padding-left:5vw}
.wm{margin:1.6rem 0 1.6rem;font-size:clamp(56px,min(12.6vw,22vh),230px);line-height:.9;letter-spacing:-.04em}
.in .pp{font-size:clamp(18px,1.7vw,26px)}
.in .tx,.fin .tx{max-width:70rem}
.ih{font-size:clamp(34px,min(5.6vw,11vh),100px);max-width:15em}
.il .tx{max-width:70rem}
.fin .h{font-size:clamp(40px,min(7vw,13vh),130px)}
.fin .cta{font-size:13px}

/* без JS всё видно; JS прячет слова и ведёт их по прокрутке */
.js .w i{transform:translate3d(0,112%,0)}

@media (max-height:700px){.pp{display:none}.in .pp{display:block}}
@media (max-width:820px){
.hd{padding:20px;grid-template-columns:1fr auto}.hd .mid{display:none}
.rl{display:none}
.mt{height:30vh}
.clk{left:20px;bottom:14px}.clk .d{font-size:42px}
.ch .stage{display:flex;flex-direction:column;justify-content:flex-end;padding:0 20px 12svh}
.plate{display:none}
.pic{left:0;right:0;width:auto;bottom:auto;height:62svh}
.pic.rt,.pic.lf{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 92%);mask-image:linear-gradient(180deg,#000 50%,transparent 92%)}
.pic img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%);mask-image:linear-gradient(180deg,transparent,#000 12%)}
.cap{display:none}
.tx,.l .tx{position:relative;margin-top:0;padding-left:0;max-width:none}
.h{margin:1rem 0 .8rem;font-size:clamp(30px,8.4vw,46px)}
.pp{font-size:15px;line-height:1.45}
.ft{margin-top:.9rem;gap:.3rem 1.1rem}
.cta{margin-top:1.1rem;padding:14px 20px}
.in .stage,.il .stage,.fin .stage{padding:0 20px 13svh}
.wm{font-size:clamp(52px,17vw,88px)}
.ih{font-size:clamp(30px,8.6vw,48px)}
.fin .h{font-size:clamp(36px,10.4vw,56px)}
}
@media (prefers-reduced-motion:reduce){.aur,.cl{animation:none}.js .w i{transform:none}}