/* «Лабиринт отражений» — общий слой сайта. Токены и компоненты по дизайн-системе 16.10
   (Выгрузка claude.ai 22.10 / labirint_otrazheniy_16oct_files / project). Одна тема — ночь. */
@font-face{font-family:"Unbounded";src:url(../fonts/Unbounded.ttf) format("truetype");font-weight:200 900;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/Onest.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/JetBrainsMono.ttf) format("truetype");font-weight:100 800;font-display:swap}

:root{
  --ground:#0d0e11;--steel:#1a1c21;--silver:#d6dae0;--chrome:#eef1f4;--fog:#868c96;
  --portal:#c3303e;--on-portal:#f4f5f7;--line:rgba(214,218,224,.16);--veil:rgba(13,14,17,.82);--lamp:rgba(255,196,140,.8);
  --font-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --font-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --gutter:clamp(16px,4vw,56px);--opacity-grain:.07;--opacity-reflection:.22;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--silver);font:400 17px/1.6 var(--font-body);overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--portal);color:var(--on-portal)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* типографика */
.label,.tag{font:400 11px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fog);font-variant-numeric:tabular-nums}
.brand{font:500 13px/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--silver);text-decoration:none}
.lead{font-size:clamp(16px,1.5vw,20px);line-height:1.5;max-width:46ch;margin:0}
.body{font-size:16px;line-height:1.65;color:var(--silver);max-width:60ch;margin:0}
.note{font-size:13px;line-height:1.5;color:var(--fog);margin:0}
.level{font:300 clamp(96px,16vw,200px)/.8 var(--font-display);letter-spacing:-.06em;color:var(--portal);font-variant-numeric:tabular-nums}

/* хром страниц */
.chrome{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gutter);pointer-events:none;mix-blend-mode:normal}
.chrome>*{pointer-events:auto}
.chrome nav{display:flex;gap:clamp(12px,2.4vw,28px);align-items:center}
.chrome::before{content:"";position:absolute;inset:0 0 -30px 0;z-index:-1;background:linear-gradient(180deg,rgba(13,14,17,.75),transparent);pointer-events:none}

/* GateButton */
.lr-gate{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--line);background:transparent;color:var(--silver);padding:18px 52px;border-radius:0;font:500 13px/1 var(--font-display);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s,opacity .4s;text-decoration:none;display:inline-block}
.lr-gate::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--portal);transform:translateY(101%);transition:transform .45s var(--ease)}
.lr-gate:hover,.lr-gate:focus-visible{border-color:var(--portal);color:var(--on-portal)}
.lr-gate:hover::before,.lr-gate:focus-visible::before{transform:none}
.lr-gate:disabled{opacity:.25;pointer-events:none}

/* ViewfinderButton */
.lr-vf{position:relative;display:inline-block;background:transparent;color:var(--silver);border:0;border-radius:0;padding:20px 30px;font:500 12px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .3s;text-decoration:none;white-space:nowrap}
.lr-vf i{position:absolute;width:12px;height:12px;border:0 solid var(--silver);transition:transform .35s var(--ease),border-color .3s}
.lr-vf i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.lr-vf i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.lr-vf i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.lr-vf i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.lr-vf:hover,.lr-vf:focus-visible{color:var(--chrome)}
.lr-vf:hover i,.lr-vf:focus-visible i{border-color:var(--portal)}
.lr-vf:hover i:nth-child(1),.lr-vf:focus-visible i:nth-child(1){transform:translate(8px,6px)}.lr-vf:hover i:nth-child(2),.lr-vf:focus-visible i:nth-child(2){transform:translate(-8px,6px)}
.lr-vf:hover i:nth-child(3),.lr-vf:focus-visible i:nth-child(3){transform:translate(8px,-6px)}.lr-vf:hover i:nth-child(4),.lr-vf:focus-visible i:nth-child(4){transform:translate(-8px,-6px)}

/* DecodeLink */
.lr-decode{background:none;border:0;padding:6px 0;color:var(--fog);font:400 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;cursor:pointer;transition:color .3s;text-decoration:none;white-space:nowrap}
.lr-decode::before{content:"> ";color:var(--portal)}
.lr-decode:hover,.lr-decode:focus-visible,.lr-decode[aria-current=page]{color:var(--silver)}
:where(.lr-gate,.lr-vf,.lr-decode,.lr-rail button,.lr-mirror,.ep,.door):focus-visible{outline:1px solid var(--silver);outline-offset:4px}

/* Rail */
.lr-rail{position:fixed;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:14px;justify-items:end}
.lr-rail button{background:none;border:0;padding:0;display:flex;gap:10px;align-items:center;color:var(--fog);font:400 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.lr-rail i{width:14px;height:1px;background:currentColor;transition:width .3s,background .3s}
.lr-rail button span{opacity:0;transition:opacity .3s}
.lr-rail:hover button span,.lr-rail button.is-on span{opacity:1}
.lr-rail button.is-on{color:var(--silver)}
.lr-rail button.is-on i{width:30px;background:var(--portal)}

/* RiseHeading */
.lr-rise{font:300 clamp(34px,6vw,100px)/.95 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;margin:0;color:var(--silver)}
.lr-rise .wd{display:inline-block;white-space:nowrap}
.lr-rise .ch{display:inline-block;transform:translateY(.6em) scaleY(-1);opacity:0;transition:transform .7s var(--ease),opacity .5s}
.lr-rise.is-in .ch{transform:none;opacity:1}

/* MirrorTitle */
.lr-mtitle{font:300 clamp(40px,7.4vw,124px)/.95 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;margin:0;color:var(--silver);text-align:center}
.lr-mtitle .mir{display:block;transform:scaleY(-1);opacity:var(--opacity-reflection);margin-top:.04em;-webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}

/* появление подписи из размытия */
.blur-in{opacity:0;filter:blur(10px);transform:translateY(28px);transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease)}
.blur-in.is-in{opacity:1;filter:none;transform:none}

/* Stage */
.lr-stage{position:relative;overflow:hidden;background:var(--ground);color:var(--silver);isolation:isolate}
.lr-stage>.media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.lr-stage>.veil{position:absolute;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(ellipse at 50% 45%,transparent 40%,var(--veil) 100%),linear-gradient(180deg,rgba(13,14,17,.45),transparent 26%,transparent 58%,rgba(13,14,17,.88))}
.grain{position:absolute;inset:-50%;pointer-events:none;z-index:-1;opacity:var(--opacity-grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:lr-grain .9s steps(4) infinite}
@keyframes lr-grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
.lr-stage>.copy{position:absolute;left:var(--gutter);bottom:14%;display:grid;gap:14px;max-width:min(560px,calc(100% - 2*var(--gutter)))}
.lr-stage>.copy p{text-shadow:0 2px 18px var(--veil)}
.flash{position:fixed;inset:0;z-index:90;background:var(--silver);opacity:0;pointer-events:none}
.flash.go{animation:lr-flash .5s ease-out}
@keyframes lr-flash{0%{opacity:.55}100%{opacity:0}}

/* CastMirror */
.lr-mirror{position:relative;width:clamp(74px,9vw,132px);aspect-ratio:3/5;padding:0;border:0;border-radius:0;background:var(--steel);cursor:pointer;margin-bottom:34px;flex:none}
.lr-mirror .gl{position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .3s}
.lr-mirror img,.lr-mirror video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lr-mirror img{filter:grayscale(.7) brightness(.65);transition:filter .5s}
.lr-mirror video{opacity:0;transition:opacity .4s}
.lr-mirror .gl::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(238,241,244,.14) 45%,transparent 60%);transform:translateX(-120%);transition:transform .9s}
.lr-mirror:hover .gl::after{transform:translateX(120%)}
.lr-mirror.is-on .gl,.lr-mirror:hover .gl{transform:translateY(-8px);box-shadow:inset 0 0 0 1px var(--silver)}
.lr-mirror.is-on img,.lr-mirror:hover img{filter:none}
.lr-mirror.is-on video{opacity:1}
.lr-mirror .rf{position:absolute;left:0;right:0;top:100%;height:40%;overflow:hidden;transform:scaleY(-1);opacity:.2;pointer-events:none;-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
.lr-mirror .rf img{filter:blur(1px) grayscale(.7) brightness(.6)}
.lr-mirror .nm{position:absolute;left:-10px;right:-10px;bottom:-30px;text-align:center;font:400 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.lr-mirror.is-on .nm{color:var(--silver)}

/* Terminal */
.lr-term{font:400 clamp(12px,1.25vw,16px)/1.9 var(--font-mono);color:var(--fog);width:min(600px,100%)}
.lr-term .cmd{color:var(--silver)}
.lr-term .hot{color:var(--portal)}
.lr-term .bar{height:1px;background:var(--line);margin:16px 0 4px;position:relative;overflow:hidden}
.lr-term .bar i{position:absolute;inset:0;background:var(--portal);transform-origin:left;transform:scaleX(0);transition:transform .25s}
.caret{display:inline-block;width:.55em;height:1.05em;vertical-align:-.15em;background:var(--silver);animation:lr-blink 1s steps(1) infinite}
@keyframes lr-blink{50%{opacity:0}}

/* курсор: квадрат 30px с точкой, difference, короткий шлейф */
@media (hover:hover) and (pointer:fine){
  html.has-cursor,html.has-cursor *{cursor:none!important}
}
.cur{position:fixed;left:0;top:0;z-index:100;pointer-events:none;mix-blend-mode:difference}
.cur .sq{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid var(--chrome);transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease)}
.cur .dt{position:absolute;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:var(--chrome)}
.cur.big .sq{width:58px;height:58px;margin:-29px 0 0 -29px}
.cur .tr{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid rgba(238,241,244,.25)}

/* общие секции страниц */
.sec{position:relative;padding:clamp(80px,12vh,140px) var(--gutter)}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,6vh,64px);max-width:900px}
.rule{height:1px;background:var(--line);border:0;margin:0}
.foot{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;padding:40px var(--gutter) 48px;border-top:1px solid var(--line)}
.foot .studio{display:flex;align-items:center;gap:14px;text-decoration:none}
.foot .studio img{width:34px;height:34px;opacity:.85}

@media (max-width:760px){
  .lr-rail button span{display:none}
  .lr-rail{right:10px}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .grain,.caret{animation:none}
}