/* HeBi Boot v1.1 — CRT power-on
   Timeline (~2.06s total):
     0.00 - 0.62   scanline draws across, then blooms out
     0.42 - 0.78   wordmark fades up
     0.46 - 1.70   two glitch bursts (RGB split), spaced by a calm stretch
     0.82 - 1.67   loading bar fills beneath the wordmark
     0.85 - ...    status line + blinking cursor
     1.72 - 2.06   CRT power-off collapse, page revealed

   The overlay hides itself via `hebi-boot-off ... forwards`. That is the
   failsafe: no JavaScript is required for the page to become visible. */

.hebi-boot {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
    background-color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-origin: center center;
    animation: hebi-boot-off 0.34s cubic-bezier(0.6, 0, 0.85, 0.2) 1.72s forwards;
}

/* CRT scanlines over the whole boot screen */
.hebi-boot::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 65, 0.035) 2px,
        rgba(0, 255, 65, 0.035) 4px
    );
}

/* ---- 1. the scanline snapping open ---- */
.hebi-boot-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70vw;
    max-width: 620px;
    height: 2px;
    background: #eafff2;
    box-shadow:
        0 0 12px rgba(0, 255, 65, 0.9),
        0 0 34px rgba(0, 255, 65, 0.45),
        0 0 60px rgba(255, 0, 51, 0.25);
    transform: translate(-50%, -50%) scaleX(0);
    animation: hebi-boot-line 0.62s ease-out forwards;
}

@keyframes hebi-boot-line {
    0%   { transform: translate(-50%, -50%) scaleX(0) scaleY(1); opacity: 1; }
    42%  { transform: translate(-50%, -50%) scaleX(1) scaleY(1); opacity: 1; }
    72%  { transform: translate(-50%, -50%) scaleX(1) scaleY(7); opacity: 0.3; }
    100% { transform: translate(-50%, -50%) scaleX(1) scaleY(18); opacity: 0; }
}

/* ---- 2. the wordmark ---- */
.hebi-boot-screen {
    position: relative;
    text-align: center;
    padding: 0 16px;
    opacity: 0;
    animation: hebi-boot-in 0.36s ease-out 0.42s forwards;
}

@keyframes hebi-boot-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* loading bar, fills while the boot screen holds */
.hebi-boot-screen::after {
    content: "";
    display: block;
    width: min(260px, 60vw);
    height: 2px;
    margin: 20px auto 0;
    background: linear-gradient(90deg, #ff0033, #00ff41);
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.35);
    transform: scaleX(0);
    transform-origin: left center;
    animation: hebi-boot-bar 0.85s cubic-bezier(0.35, 0, 0.2, 1) 0.82s forwards;
}

@keyframes hebi-boot-bar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hebi-boot-word {
    position: relative;
    display: block;
    font-family: 'Orbitron', 'Geist Mono', 'Courier New', monospace;
    font-weight: 900;
    font-size: clamp(1.5rem, 7vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: 0.2em;
    text-indent: 0.2em; /* balances the trailing letter-spacing */
    color: #fafafa;
    text-shadow: 0 0 18px rgba(255, 0, 51, 0.35);
}

.hebi-boot-word--alt {
    color: #ff0033;
    text-shadow: 0 0 22px rgba(255, 0, 51, 0.5);
}

/* RGB split ghosts. Each cycle is one short burst followed by a calm
   stretch, so running it twice reads as two separate glitches rather
   than constant noise. */
.hebi-boot-word::before,
.hebi-boot-word::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    opacity: 0;
}

.hebi-boot-word::before {
    color: #ff0033;
    animation: hebi-boot-split-r 0.62s steps(2, end) 0.46s 2;
}

.hebi-boot-word::after {
    color: #00ff41;
    animation: hebi-boot-split-g 0.62s steps(2, end) 0.46s 2;
}

@keyframes hebi-boot-split-r {
    0%        { transform: translate(0, 0);      clip-path: inset(0 0 100% 0);  opacity: 0; }
    7%        { transform: translate(-4px, 1px); clip-path: inset(10% 0 58% 0); opacity: 0.9; }
    15%       { transform: translate(3px, -1px); clip-path: inset(62% 0 10% 0); opacity: 0.85; }
    23%       { transform: translate(-2px, 0);   clip-path: inset(36% 0 34% 0); opacity: 0.75; }
    31%, 100% { transform: translate(0, 0);      clip-path: inset(0 0 100% 0);  opacity: 0; }
}

@keyframes hebi-boot-split-g {
    0%        { transform: translate(0, 0);      clip-path: inset(100% 0 0 0);  opacity: 0; }
    7%        { transform: translate(4px, -1px); clip-path: inset(56% 0 14% 0); opacity: 0.85; }
    15%       { transform: translate(-3px, 1px); clip-path: inset(8% 0 64% 0);  opacity: 0.8; }
    23%       { transform: translate(2px, 0);    clip-path: inset(30% 0 42% 0); opacity: 0.7; }
    31%, 100% { transform: translate(0, 0);      clip-path: inset(100% 0 0 0);  opacity: 0; }
}

/* ---- 3. status line ---- */
.hebi-boot-status {
    display: block;
    margin-top: 18px;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: clamp(0.62rem, 2vw, 0.78rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(0, 255, 65, 0.75);
    opacity: 0;
    animation: hebi-boot-in 0.24s ease-out 0.85s forwards;
}

.hebi-boot-status em {
    font-style: normal;
}

.hebi-boot-status i {
    font-style: normal;
    animation: hebi-boot-blink 0.4s steps(1, end) infinite;
}

@keyframes hebi-boot-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---- 4. power-off collapse ---- */
@keyframes hebi-boot-off {
    0%   { transform: scaleY(1);     background-color: #0a0a0a; opacity: 1; }
    20%  { transform: scaleY(1);     background-color: #0a0a0a; opacity: 1; }
    55%  { transform: scaleY(0.008); background-color: #eafff2; opacity: 1; }
    100% { transform: scaleY(0.008) scaleX(0); background-color: #eafff2; opacity: 0; visibility: hidden; }
}

/* Anyone who has asked for less motion gets no boot screen at all.
   The inline script also removes the node, this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
    .hebi-boot { display: none !important; }
}