/* Page basics of reels-line.online. Everything else is inline in the pages, as the
   design (canvas «Сайт Reels line», 20.10.2026) has it. */
@font-face{font-family:'Geologica RL';src:url(/assets/fonts/geologica-latin.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geologica RL';src:url(/assets/fonts/geologica-cyrillic.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-latin-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-latin-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-cyrillic-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-cyrillic-700.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:#0E0E11}
[hidden]{display:none!important}
a{color:#F5338E}a:hover{color:#FF7AB8}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #F5338E;outline-offset:3px}

@keyframes rlMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rlHead{from{left:0}to{left:calc(100% - 2px)}}
@keyframes rlRec{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes rlProg{from{width:0}to{width:100%}}
@keyframes rlPaneIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes rlNote{0%{transform:translateY(-28px) scale(.96);opacity:0}4%,25%{transform:translateY(0) scale(1);opacity:1}29%,50%{transform:translateY(90px) scale(.98);opacity:.8}54%,75%{transform:translateY(180px) scale(.96);opacity:.45}79%,100%{transform:translateY(224px) scale(.94);opacity:0}}
.rl-marq{animation:rlMarq 30s linear infinite}
.rl-head{animation:rlHead 5s linear forwards}
.rl-rec{animation:rlRec 1.4s ease-in-out infinite}
.rl-prog{animation:rlProg 5s linear forwards}
.rl-pane{animation:rlPaneIn .35s cubic-bezier(.2,.8,.2,1) both}
.rl-note{animation:rlNote 12s cubic-bezier(.2,.8,.2,1) infinite;transform-origin:50% 0}

/* the three phones of «Три шага»: named after their old and new place (C centre, R right, L left) */
@keyframes rlRC{from{transform:translateX(210px) rotateY(-34deg) scale(.8);filter:brightness(.42) saturate(.6)}to{transform:translateX(0) rotateY(0deg) scale(1);filter:none}}
@keyframes rlCL{from{transform:translateX(0) rotateY(0deg) scale(1);filter:none}to{transform:translateX(-210px) rotateY(34deg) scale(.8);filter:brightness(.42) saturate(.6)}}
@keyframes rlLR{0%{transform:translateX(-210px) rotateY(34deg) scale(.8);filter:brightness(.42) saturate(.6)}50%{transform:translateX(0) translateZ(-260px) rotateY(0deg) scale(.62);filter:brightness(.22) saturate(.4)}100%{transform:translateX(210px) rotateY(-34deg) scale(.8);filter:brightness(.42) saturate(.6)}}
@keyframes rlLC{from{transform:translateX(-210px) rotateY(34deg) scale(.8);filter:brightness(.42) saturate(.6)}to{transform:translateX(0) rotateY(0deg) scale(1);filter:none}}
@keyframes rlCR{from{transform:translateX(0) rotateY(0deg) scale(1);filter:none}to{transform:translateX(210px) rotateY(-34deg) scale(.8);filter:brightness(.42) saturate(.6)}}
@keyframes rlRL{0%{transform:translateX(210px) rotateY(-34deg) scale(.8);filter:brightness(.42) saturate(.6)}50%{transform:translateX(0) translateZ(-260px) rotateY(0deg) scale(.62);filter:brightness(.22) saturate(.4)}100%{transform:translateX(-210px) rotateY(34deg) scale(.8);filter:brightness(.42) saturate(.6)}}

.rl-hscroll{scrollbar-width:none}.rl-hscroll::-webkit-scrollbar{display:none}

.rl-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer}
.rl-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(244,241,234,0.16)}
.rl-range::-moz-range-track{height:6px;border-radius:3px;background:rgba(244,241,234,0.16)}
.rl-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#F5338E;border:4px solid #0E0E11;box-shadow:0 0 0 1px #F5338E}
.rl-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#F5338E;border:4px solid #0E0E11}

/* the links carry an inline display, so hiding them needs !important */
@media (max-width:820px){.rl-navlinks{display:none!important}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rl-marq,.rl-head,.rl-rec,.rl-pane,.rl-note{animation:none}
  .rl-prog{animation:none;width:100%}
  .rl-phone{animation:none!important}
}
@media (max-width:440px){header .rl-cta{padding:0 14px!important;font-size:14px!important}.rl-wide{display:none}}