@font-face{font-family:Dela;src:url(../fonts/dela-cyr.woff2) format('woff2');font-weight:400;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:Dela;src:url(../fonts/dela-lat.woff2) format('woff2');font-weight:400;unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:Golos;src:url(../fonts/golos-cyr.woff2) format('woff2');font-weight:400 700;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:Golos;src:url(../fonts/golos-lat.woff2) format('woff2');font-weight:400 700;unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:Oswald;src:url(../fonts/oswald.woff2) format('woff2');font-weight:200 700;font-display:swap}
:root{font-family:Golos,Arial,sans-serif;color:#ecefea;background:#070a0c;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-width:320px;overflow:hidden}
button,a{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #f7e9cc;outline-offset:4px}
.ico{display:inline-block;width:1em;height:1em;vertical-align:-.14em;flex:none}

/* Final (the base landing's lit garage, unchanged). The photo is the lit garage baked into one image per orientation. */
.final{position:fixed;inset:0;overflow:hidden;background:#030506}
.final-photo{position:absolute;inset:0;pointer-events:none}
.final-photo picture,.final-photo img{position:absolute;inset:0;display:block;width:100%;height:100%}
.final-photo img{object-fit:cover;object-position:50% 50%}
.final-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.6) 43%,rgba(0,0,0,.04) 76%);opacity:.94}
.final-header{position:absolute;z-index:12;top:0;left:0;right:0;padding:27px clamp(22px,5.6vw,82px);display:flex;align-items:center;justify-content:flex-end}
.gate-again{border:1px solid rgba(236,239,234,.4);background:rgba(4,6,7,.55);color:#ecefea;padding:8px 13px;font-size:13px;font-weight:700;text-shadow:none}
.kicker{display:block;font-size:16px;font-weight:700;color:#e7bf87}
.garage-final{position:absolute;z-index:6;left:clamp(24px,5.6vw,82px);top:15%;width:min(750px,58vw);text-shadow:0 2px 18px #000;transition:opacity .9s ease,transform .9s ease}
.garage-final h1{font:400 clamp(47px,5.2vw,88px)/1.1 Dela,sans-serif;letter-spacing:-.056em;margin:13px 0 16px}
.garage-final p{max-width:650px;font-size:clamp(18px,1.5vw,21px);line-height:1.45}
.garage-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.garage-actions a{min-width:270px;padding:18px 19px;display:flex;justify-content:space-between;gap:24px;text-decoration:none;background:#e3c093;color:#171612;border:2px solid #e3c093;font-weight:700;font-size:16px;text-shadow:none}
.garage-actions a+a{background:rgba(5,8,9,.76);color:#f4eada;border-color:#ddd4c3}
.garage-actions a:hover{transform:translateY(-2px)}
.final-footer{position:absolute;z-index:6;left:clamp(24px,5.6vw,82px);right:clamp(24px,5.6vw,82px);bottom:61px;display:flex;justify-content:space-between;gap:22px;border-top:1px solid rgba(227,219,203,.25);padding-top:14px;font-size:12px;color:#e0e2da;transition:opacity .6s ease}
.final-footer a{color:inherit;text-decoration:none}
.final-footer a:hover{text-decoration:underline}
/* While the gate is up the final waits dimmed; it fades in when the film ends. */
.final.waiting .garage-final{opacity:0;transform:translateY(14px)}
.final.waiting .final-footer,.final.waiting .final-header{opacity:0}
@media(max-width:700px){
  .final-vignette{background:linear-gradient(180deg,rgba(0,0,0,.58) 0,rgba(0,0,0,.4) 44%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.4));opacity:.75}
  .final-header{padding:22px}
  .garage-final{left:22px;top:13%;width:calc(100vw - 44px)}
  .garage-final .kicker{font-size:12px}
  .garage-final h1{font-size:clamp(34px,9.2vw,45px);margin:8px 0 12px}
  .garage-final p{font-size:14px;line-height:1.38;margin:0}
  .garage-actions{margin-top:13px;gap:7px}
  .garage-actions a{min-width:0;width:100%;padding:12px 13px;font-size:12.5px}
  .final-footer{left:22px;right:22px;bottom:56px;display:block;font-size:10px;line-height:1.35;padding-top:7px}
  .final-footer span,.final-footer>a{display:block}
}

/* Gate (prototype C:\LOGOVO_VIDEO\site\vorota.html): closed gate + visitor's headlight beams -> two flashes ->
   the garage lamp answers -> gate opens on the founder's video -> freeze at 9.35 s -> fade into the final. */
.gate{--night:#07090c;--steel:#1a1f26;--steel-hi:#262d37;--amber:#f0a640;--beam:#e6f1ff;--fg:#edf1f5;--muted:#93a0ad;--display:Oswald,"Arial Narrow",Impact,sans-serif;
  position:fixed;inset:0;z-index:100;overflow:hidden;isolation:isolate;background:var(--night);color:var(--fg);transition:opacity .9s ease}
.gate[hidden]{display:none}
.gate.leaving{opacity:0;pointer-events:none}
.gate-bgv{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(28px) brightness(.45) saturate(1.1);z-index:0}
.gate-frame{position:absolute;inset:0;margin:auto;height:100%;aspect-ratio:9/16;max-width:100%;z-index:1;box-shadow:0 0 120px rgba(0,0,0,.8)}
.gate-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
@media(max-aspect-ratio:10/16){.gate-frame{aspect-ratio:auto;width:100%}.gate-bgv{display:none}}
@media(min-aspect-ratio:1/1){.gate-frame{aspect-ratio:auto;width:100%}.gate-bgv{display:none}}

.gate-doors{position:absolute;inset:0;z-index:3;pointer-events:none}
.door{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 18%,transparent 70%,rgba(0,0,0,.7)),repeating-linear-gradient(90deg,var(--steel) 0 7px,var(--steel-hi) 7px 9px,var(--steel) 9px 16px);transition:transform 1.9s cubic-bezier(.65,0,.25,1)}
.door.l{left:0;box-shadow:inset -10px 0 18px rgba(0,0,0,.6)}
.door.r{right:0;box-shadow:inset 10px 0 18px rgba(0,0,0,.6)}
.door:after{content:"";position:absolute;left:0;right:0;top:46%;height:6px;background:linear-gradient(90deg,#0d1014,#313945,#0d1014);opacity:.8}
.seam{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:var(--beam);opacity:0;box-shadow:0 0 30px 8px rgba(230,241,255,.55);transition:opacity .4s}
.gate.seam-lit .seam{opacity:1}
.lamp{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);left:50%;transform:translateX(-50%);width:56px;height:10px;border-radius:5px;background:#3a2a12;transition:background .08s,box-shadow .08s}
.lamp.on{background:var(--amber);box-shadow:0 0 40px 14px rgba(240,166,64,.55)}

.beams{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.35;transition:opacity .09s}
.beams:before,.beams:after{content:"";position:absolute;bottom:-10%;width:70%;height:90%;background:radial-gradient(ellipse at 50% 100%,rgba(230,241,255,.55),rgba(230,241,255,.08) 45%,transparent 70%);filter:blur(6px)}
.beams:before{left:-12%;transform:rotate(14deg);transform-origin:bottom}
.beams:after{right:-12%;transform:rotate(-14deg);transform-origin:bottom}
.beams.hit{opacity:1}
.flash{position:absolute;inset:0;z-index:6;background:var(--beam);opacity:0;pointer-events:none}
.flash.go{animation:headlight .32s ease-out}
@keyframes headlight{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
.fog{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(60% 30% at 30% 80%,rgba(160,175,190,.10),transparent 70%),radial-gradient(50% 25% at 75% 70%,rgba(160,175,190,.08),transparent 70%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(4%) translateY(-2%)}}

.intro{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;
  padding-block:calc(env(safe-area-inset-top,0px) + 60px) calc(env(safe-area-inset-bottom,0px) + 80px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));transition:opacity .6s}
.emblem{width:min(200px,42vw);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;filter:drop-shadow(0 0 24px rgba(240,166,64,.35))}
.eyebrow{font-family:var(--display);letter-spacing:.32em;font-size:12px;color:var(--muted);text-transform:uppercase}
.gate-title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,6.4vw,62px);line-height:1.02;margin:0;letter-spacing:.02em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.8)}
.cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
.btn{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:16px;border:1px solid var(--beam);color:var(--night);background:var(--beam);padding:16px 30px;border-radius:2px;box-shadow:0 0 40px rgba(230,241,255,.25);transition:transform .1s,box-shadow .2s}
.btn:hover{box-shadow:0 0 60px rgba(230,241,255,.45)}
.btn:active{transform:scale(.97)}
.gate button:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.dots{display:flex;gap:10px}
.dots i{width:10px;height:10px;border-radius:50%;border:1px solid var(--beam);transition:background .1s,box-shadow .1s}
.dots i.on{background:var(--beam);box-shadow:0 0 12px var(--beam)}
.hint{font-size:14px;color:var(--muted);min-height:1.3em}

/* Sound and «Пропустить» stay on the gate screen and over the film. */
.gate-bar{position:absolute;z-index:9;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 18px) max(16px,env(safe-area-inset-left,0px))}
.gate-sound,.gate-skip{display:inline-flex;align-items:center;gap:8px;background:rgba(7,9,12,.6);color:var(--fg);border:1px solid rgba(237,241,245,.3);border-radius:2px;font:600 12px var(--display);letter-spacing:.12em;text-transform:uppercase;padding:10px 13px}
.gate-sound .ico{width:18px;height:18px}
.gate-sound .ico-off,.gate-sound[aria-pressed="false"] .ico-on{display:none}
.gate-sound[aria-pressed="false"] .ico-off{display:inline-block}
.gate-sound-label{display:none}
.gate.muted .gate-sound{border-color:var(--amber);color:#fff}
.gate.muted .gate-sound-label{display:inline}

.gate.open .door.l{transform:translateX(-101%)}
.gate.open .door.r{transform:translateX(101%)}
.gate.open .seam{opacity:0}
.gate.open .intro,.gate.open .beams,.gate.open .lamp{opacity:0;pointer-events:none}
.gate.open .intro{visibility:hidden;transition:opacity .5s,visibility 0s .5s}

@media(prefers-reduced-motion:reduce){
  .door{transition:opacity .4s}
  .gate.open .door{transform:none;opacity:0}
  .flash{display:none}
  .beams.hit{opacity:.35}
  .fog{animation:none}
}