/* ===== BOOT // загрузочный экран TWA «HERMES OS» ===== Полноэкранный непрозрачный оверлей поверх всего. Контейнер .boot#boot добавляет основной разработчик первым потомком , наполняет js/boot.js. Тема — через CSS-переменные :root (--bg/--neon/--bone/--muted/--line/...). */ .boot{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(40px + var(--safe-t)) 28px calc(40px + var(--safe-b)); color:var(--bone); overflow:hidden; font-family:'Manrope',sans-serif; /* лёгкая неон-атмосфера в фоне оверлея */ background-image: radial-gradient(ellipse 90% 55% at 50% 38%, color-mix(in srgb, var(--bordeaux) 38%, transparent) 0%, transparent 62%), radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in srgb, var(--neon) 8%, transparent) 0%, transparent 60%); -webkit-tap-highlight-color:transparent; cursor:pointer; } /* плавное гашение оверлея */ .boot.done{ opacity:0; pointer-events:none; transition:opacity .5s ease; } /* угловые скобки — рамка терминала */ .boot__corner{ position:absolute; width:22px; height:22px; border:1.5px solid color-mix(in srgb, var(--neon) 55%, transparent); opacity:.5; pointer-events:none; } .boot__corner.tl{top:calc(16px + var(--safe-t)); left:16px; border-right:0; border-bottom:0} .boot__corner.tr{top:calc(16px + var(--safe-t)); right:16px; border-left:0; border-bottom:0} .boot__corner.bl{bottom:calc(16px + var(--safe-b)); left:16px; border-right:0; border-top:0} .boot__corner.br{bottom:calc(16px + var(--safe-b)); right:16px; border-left:0; border-top:0} /* шапка: крупный заголовок + подзаголовок */ .boot__head{ text-align:center; margin-bottom:34px; } .boot__title{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(46px, 17vw, 84px); line-height:.95; letter-spacing:.02em; color:var(--bone); text-shadow: 0 0 18px color-mix(in srgb, var(--neon) 45%, transparent), 0 0 46px color-mix(in srgb, var(--neon) 22%, transparent); animation:bootTitleIn .6s ease both, bootFlicker 4.2s ease-in-out .6s infinite; } .boot__sub{ margin-top:12px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--neon-soft); display:flex; align-items:center; justify-content:center; gap:8px; } .boot__sub::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--neon); box-shadow:0 0 10px var(--neon); animation:bootPulse 1s ease-in-out infinite; } /* блок бегущих лог-строк */ .boot__log{ width:100%; max-width:360px; min-height:128px; display:flex; flex-direction:column; gap:6px; font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.5; letter-spacing:.02em; color:var(--neon-soft); } .boot__line{ opacity:0; transform:translateY(4px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:color-mix(in srgb, var(--bone) 78%, transparent); } .boot__line.show{ opacity:1; transform:none; transition:opacity .22s ease, transform .22s ease; } .boot__line.ok{ color:var(--bone); } /* «ok» / финальный маркер строки подсвечен неоном */ .boot__line .boot__ok{ color:var(--neon); font-weight:500 } /* прогресс-бар */ .boot__progress{ margin-top:26px; width:100%; max-width:360px; } .boot__track{ position:relative; height:4px; border-radius:2px; background:color-mix(in srgb, var(--line) 80%, transparent); overflow:hidden; } .boot__fill{ position:absolute; inset:0 auto 0 0; width:0%; border-radius:2px; background:linear-gradient(90deg, var(--bordeaux), var(--neon)); box-shadow:0 0 12px color-mix(in srgb, var(--neon) 60%, transparent); transition:width .28s ease; } .boot__meta{ margin-top:8px; display:flex; align-items:center; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em; color:var(--muted); text-transform:uppercase; } .boot__pct{ color:var(--neon-soft) } /* опциональный скан-лайн */ .boot__scan{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.18; background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.35) 2px 3px); } @keyframes bootTitleIn{ from{opacity:0; transform:translateY(10px) scale(.985); filter:blur(4px)} to{opacity:1; transform:none; filter:none} } @keyframes bootFlicker{ 0%,18%,22%,100%{opacity:1} 19%{opacity:.74} 20%{opacity:.92} 21%{opacity:.66} } @keyframes bootPulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)} } /* reduced-motion: без бегущих/мерцающих анимаций, мгновенно финальное состояние */ @media (prefers-reduced-motion:reduce){ .boot__title{animation:none} .boot__sub::before{animation:none} .boot__line{transition:none} .boot__fill{transition:none} .boot__scan{display:none} }