/* ============================================================ SITE-WIDE INTRO — the "jack in" boot sequence shown on every page (per-page toggle via ViewData), skipped if seen within the last hour (cookie). ============================================================ */ /* shared glitch / neon effects (used by intro + home hero) */ .neon { text-shadow: 0 0 calc(8px * var(--glow)) rgba(var(--c-primary-rgb), var(--glow)), 0 0 calc(22px * var(--glow)) rgba(var(--c-primary-rgb), calc(var(--glow) * 0.55)); } .neon-cyan { text-shadow: 0 0 calc(8px * var(--glow)) rgba(var(--c-secondary-rgb), var(--glow)), 0 0 calc(22px * var(--glow)) rgba(var(--c-secondary-rgb), calc(var(--glow) * 0.55)); } .glitch { position: relative; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; } .glitch::before { color: var(--c-secondary); animation: glitchA 2.4s infinite linear alternate-reverse; } .glitch::after { color: var(--c-accent); animation: glitchB 1.7s infinite linear alternate-reverse; } @keyframes glitchA { 0%{clip-path:inset(0 0 82% 0);transform:translate(-2px,-1px)} 50%{clip-path:inset(40% 0 30% 0);transform:translate(3px,1px)} 100%{clip-path:inset(70% 0 5% 0);transform:translate(-1px,2px)} } @keyframes glitchB { 0%{clip-path:inset(15% 0 60% 0);transform:translate(2px,1px)} 50%{clip-path:inset(55% 0 10% 0);transform:translate(-3px,-1px)} 100%{clip-path:inset(5% 0 75% 0);transform:translate(1px,-2px)} } @keyframes tin { from{opacity:0;transform:translateX(-6px)} to{opacity:1} } /* hide the sidebar + un-indent content while the intro is playing */ body.intro-active .sidebar { opacity: 0; visibility: hidden; } body.intro-active .main-content { margin-left: 0; } .sidebar { transition: opacity .9s ease .3s, visibility .9s ease .3s; } /* overlay */ #intro { position: fixed; inset: 0; z-index: 9500; background: var(--theme-dark, #03030a); display: flex; align-items: center; justify-content: center; transition: opacity .8s ease, visibility .8s ease; } #intro.gone { opacity: 0; visibility: hidden; } #intro .intro-card { width: min(1100px, 92%); font-family: var(--f-mono); color: var(--c-text); } #intro .stage { display: none; } #intro .stage.active { display: block; animation: stageIn 0.9s ease both; } /* ACCESS GRANTED snaps in with no fade so it stays in sync with the login chime */ #intro #s-granted.active { animation: none; } @keyframes stageIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes stageOut { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(-8px); filter: blur(5px); } } #intro .blink { animation: introblink 1s steps(1) infinite; } @keyframes introblink { 50% { opacity: 0; } } #intro .prompt-big { font-size: clamp(18px, 2.4vw, 24px); color: var(--c-secondary); text-align: center; letter-spacing: 1px; } #intro .prompt-big .key { color: var(--c-primary); } #intro .powerline { text-align: center; margin-top: 2rem; margin-bottom: 0.4rem; } #intro .powerline .pw { font-family: var(--f-hero); font-size: clamp(86px, 17vw, 168px); line-height: 0.95; color: var(--c-primary); display: inline-block; } #intro #bootlog { font-size: clamp(15px, 1.7vw, 19px); line-height: 1.85; min-height: 330px; } #intro #bootlog .ln { word-break: break-word; } #intro #bootlog .ln.typing::after { content: '\2588'; margin-left: 1px; color: var(--c-primary); animation: introblink 0.9s steps(1) infinite; } #intro #bootlog .ok { color: var(--c-accent); } #intro #bootlog .hl { color: var(--c-secondary); } #intro #bootlog .dim { opacity: .55; } #intro #bootlog .prompt-line { color: var(--c-primary); text-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.4); } #intro #bootlog .in-caret { color: var(--c-primary); margin-left: 1px; animation: introblink 0.8s steps(1) infinite; } #intro #bootlog .prompt-hint { font-size: 0.82em; } /* inline "enter your name" field — looks like part of the terminal line. font-size is forced to >=16px so mobile browsers don't zoom on focus. */ #intro #bootlog .name-input { background: transparent; border: none; outline: none; padding: 0; margin: 0; font-family: var(--f-mono); font-size: max(16px, 1em); line-height: inherit; color: var(--c-primary); text-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.4); caret-color: var(--c-primary); width: min(60vw, 22ch); vertical-align: baseline; } #intro #bootlog .name-typed { color: var(--c-primary); text-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.4); } #intro .auth { text-align: center; } #intro .auth h3 { font-family: var(--f-hero); color: var(--c-primary); font-size: clamp(44px, 8vw, 92px); margin: 0 0 0.8rem; letter-spacing: 3px; line-height: 0.95; } #intro .auth p { font-size: clamp(15px, 2vw, 22px); opacity: 0.72; margin: 0 0 clamp(1.8rem, 4vh, 3rem); } #intro .hint { font-family: var(--f-mono); font-size: clamp(12px, 1.4vw, 16px); opacity: 0.55; margin-top: 8px; } #intro .holdbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; width: clamp(320px, 46vw, 540px); height: clamp(80px, 11vh, 124px); font-family: var(--f-mono); font-size: clamp(18px, 2.4vw, 30px); letter-spacing: 3px; color: var(--c-text); background: rgba(var(--c-primary-rgb), 0.08); border: 1px solid var(--c-primary); overflow: hidden; } #intro .holdbtn .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgba(var(--c-primary-rgb), 0.45); box-shadow: 0 0 18px rgba(var(--c-primary-rgb), var(--glow)); } #intro .holdbtn .lbl { position: relative; z-index: 2; } #intro .granted { text-align: center; } #intro .granted .g { font-family: var(--f-hero); font-size: clamp(52px, 9vw, 96px); color: var(--c-accent); }