/* ── BOOT SCREEN ── */
#boot {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 8000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity .8s, visibility .8s;
}

#boot.out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.b-logo {
    font-family: 'Bebas Neue', monospace;
    font-size: clamp(80px, 15vw, 172px);
    letter-spacing: 6px;
    line-height: 1;
    position: relative;
    display: inline-block;
    margin-bottom: 8px;
    color: var(--text);
}

.b-logo em {
    color: var(--acid);
    font-style: normal;
}

.b-logo::before,
.b-logo::after {
    content: attr(data-t);
    position: absolute;
    inset: 0;
    font-family: 'Bebas Neue', monospace;
    font-size: inherit;
    letter-spacing: 6px;
}

.b-logo::before {
    color: #00d4ff;
    animation: g1 3s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.b-logo::after {
    color: #ff2244;
    animation: g2 3s infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes g1 {

    0%,
    87%,
    100% {
        opacity: 0;
        transform: translateX(0)
    }

    88% {
        opacity: .8;
        transform: translateX(-6px)
    }

    90% {
        opacity: .4;
        transform: translateX(6px)
    }

    93% {
        opacity: 0
    }
}

@keyframes g2 {

    0%,
    87%,
    100% {
        opacity: 0;
        transform: translateX(0)
    }

    89% {
        opacity: .6;
        transform: translateX(6px)
    }

    91% {
        opacity: .3;
        transform: translateX(-4px)
    }

    94% {
        opacity: 0
    }
}

/* B-VISION — orange tagline under logo */
.b-vision {
    font-family: 'Bebas Neue', monospace;
    font-size: clamp(20px, 4vw, 44px);
    letter-spacing: 4px;
    color: var(--orange);
    margin-bottom: 4px;
    line-height: 1;
}

.b-sub {
    font-size: clamp(8px, 1.5vw, 10px);
    letter-spacing: clamp(4px, 1.5vw, 8px);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 44px;
    text-align: center;
    width: 90%;
    line-height: 1.4;
}

/* LIGHT MODE BOOT — always black bg, all orange */
body.light-mode #boot {
    background: #000 !important;
}

body.light-mode .b-logo {
    color: #ff6b00;
}

body.light-mode .b-logo em {
    color: #ff6b00;
}

body.light-mode .b-vision {
    color: #ff6b00;
}

body.light-mode .b-sub {
    color: rgba(255, 120, 0, 0.5);
}

body.light-mode .b-term {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 107, 0, 0.3);
}

body.light-mode .b-msg {
    color: rgba(255, 160, 80, 0.75);
}

body.light-mode .b-msg strong {
    color: #ff6b00;
}

body.light-mode .b-tag.ok {
    border-color: #ff6b00;
    color: #ff6b00;
}

body.light-mode .b-tag.warn {
    border-color: #e05500;
    color: #e05500;
}

body.light-mode .b-tag.init {
    border-color: #ff9d3a;
    color: #ff9d3a;
}

body.light-mode .b-track {
    background: rgba(255, 107, 0, 0.12);
}

body.light-mode .b-fill {
    background: #ff6b00;
    box-shadow: 0 0 16px #ff6b00;
}

body.light-mode .b-skip {
    color: rgba(255, 107, 0, 0.35);
    border-color: rgba(255, 107, 0, 0.15);
}

body.light-mode .b-skip:hover {
    color: #ff6b00;
    border-color: #ff6b00;
}

.b-term {
    width: min(520px, 88vw);
    border: 1px solid rgba(200, 255, 0, 0.2);
    padding: 20px 22px;
    background: rgba(200, 255, 0, 0.02);
    height: 250px;
    overflow-y: hidden;
}

.b-line {
    font-size: 11px;
    line-height: 2.2;
    opacity: 0;
    transform: translateX(-6px);
    transition: all .2s;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.b-line.v {
    opacity: 1;
    transform: translateX(0);
}

.b-tag {
    font-size: 9px;
    padding: 1px 6px;
    border: 1px solid;
    flex-shrink: 0;
    margin-top: 3px;
    letter-spacing: 1px;
}

.b-tag.ok {
    border-color: var(--acid);
    color: var(--acid);
}

.b-tag.warn {
    border-color: #ff6b00;
    color: #ff6b00;
}

.b-tag.init {
    border-color: #00d4ff;
    color: #00d4ff;
}

.b-msg {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
}

.b-msg strong {
    color: var(--text);
}

.b-track {
    width: min(520px, 88vw);
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin-top: 18px;
}

.b-fill {
    height: 100%;
    background: var(--acid);
    width: 0;
    box-shadow: 0 0 16px var(--acid), 0 0 32px rgba(200, 255, 0, 0.25);
    transition: width .08s linear;
}

.b-skip {
    position: absolute;
    bottom: 36px;
    right: 44px;
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.25);
    cursor: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 7px 14px;
    transition: all .2s;
}

.b-skip:hover {
    color: var(--acid);
    border-color: var(--acid);
}

/* ── HERO ANIMATIONS ── */
@keyframes gd {
    from {
        background-position: 0 0
    }

    to {
        background-position: 64px 64px
    }
}

@keyframes gp {

    0%,
    100% {
        opacity: .8;
        transform: translate(-50%, -50%) scale(1)
    }

    50% {
        opacity: .35;
        transform: translate(-50%, -50%) scale(1.12)
    }
}

@keyframes comet-fly {
    0% {
        background-position: 250% 0
    }

    100% {
        background-position: -250% 0
    }
}

@keyframes sfpulse {
    0% {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 0
    }

    25% {
        opacity: 1
    }

    65% {
        transform: scaleY(1);
        transform-origin: top
    }

    66% {
        transform-origin: bottom
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
        opacity: 0
    }
}

@keyframes pr {
    0% {
        transform: scale(.5);
        opacity: 1
    }

    100% {
        transform: scale(2.6);
        opacity: 0
    }
}

@keyframes bl {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .15
    }
}

/* ── SERVICES ── */
@keyframes pf {
    0% {
        width: 0
    }

    65% {
        width: 100%
    }

    100% {
        width: 100%
    }
}

/* ── WORMHOLE / SINGULARITY ── */
#wh {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
}

#wh.on {
    opacity: 1;
    visibility: visible;
}

.wh-r {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid var(--acid);
    border-radius: 50%;
    opacity: 0;
}

#wh.on .wh-r {
    animation: wh-exp 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes wh-exp {
    0% {
        transform: scale(0);
        opacity: 1;
        border-width: 2px
    }

    100% {
        transform: scale(20);
        opacity: 0;
        border-width: 0px
    }
}

.wh-t {
    font-family: 'Bebas Neue', monospace;
    font-size: 32px;
    letter-spacing: 12px;
    color: var(--text);
    z-index: 10;
    opacity: 0;
    transform: scale(0.8);
}

#wh.on .wh-t {
    animation: fr .8s ease .4s both;
}

/* ── THREAT FEED ENTRY ── */
@keyframes ein {
    from {
        opacity: 0;
        transform: translateX(-5px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

/* ── TICKER ── */
@keyframes tk {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/* ── CLIENTS ── */
@keyframes clmv {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes sep-up {

    0%,
    100% {
        top: -16px;
        opacity: 0
    }

    15% {
        opacity: 1
    }

    85% {
        opacity: 1
    }

    100% {
        top: 100%;
        opacity: 0
    }
}

/* REVEAL ANIMATIONS — disabled, everything visible immediately */
.rv,
.rv.rv-l,
.rv.rv-r,
.rv.in {
    opacity: 1;
    transform: none;
}

@keyframes fr {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

.d1 {
    transition-delay: .15s;
}

.d2 {
    transition-delay: .3s;
}

.d3 {
    transition-delay: .45s;
}

.d4 {
    transition-delay: .6s;
}

/* ── ORANGE GLITCH EFFECT ── */
@keyframes glitch-orange {

    0%,
    88%,
    100% {
        text-shadow: none;
        transform: none;
    }

    89% {
        text-shadow: 5px 0 var(--orange), -5px 0 var(--cyan);
        transform: skewX(0.6deg);
    }

    90% {
        text-shadow: -5px 0 var(--orange), 5px 0 var(--cyan);
        transform: skewX(-0.5deg) translateX(-3px);
    }

    91% {
        text-shadow: 4px 0 var(--orange), -2px 0 rgba(0, 212, 255, 0.6);
        transform: translateX(2px);
    }

    92% {
        text-shadow: none;
        transform: none;
    }

    94% {
        text-shadow: 3px 0 rgba(255, 107, 0, 0.8);
        transform: translateX(-1px);
    }

    95% {
        text-shadow: none;
        transform: none;
    }
}

/* ── WHITE GLITCH — h-quote second line ── */
@keyframes glitch-white {

    0%,
    88%,
    100% {
        text-shadow: none;
        transform: none;
    }

    89% {
        text-shadow: 5px 0 rgba(255, 255, 255, 0.85), -5px 0 rgba(200, 255, 0, 0.35);
        transform: skewX(0.5deg);
    }

    90% {
        text-shadow: -4px 0 rgba(255, 255, 255, 0.7), 4px 0 rgba(200, 255, 0, 0.25);
        transform: skewX(-0.4deg) translateX(-2px);
    }

    91% {
        text-shadow: 3px 0 rgba(255, 255, 255, 0.5);
        transform: translateX(2px);
    }

    92% {
        text-shadow: none;
        transform: none;
    }

    95% {
        text-shadow: 2px 0 rgba(255, 255, 255, 0.35), -1px 0 rgba(200, 255, 0, 0.2);
        transform: translateX(-1px);
    }

    96% {
        text-shadow: none;
        transform: none;
    }
}

/* ── FAQ CURSOR BLINK ── */
@keyframes fq-blink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

/* ── BLUE MODE ANIMATION SECIFIC OVERRIDES ── */
body.blue-mode .b-logo::before,
body.blue-mode .b-logo::after {
    color: #ff00ff;
}

body.blue-mode .b-tag.warn,
body.blue-mode .b-tag.init {
    border-color: #ff00ff;
    color: #ff00ff;
}

body.blue-mode .b-vision {
    color: #ff00ff;
}

body.blue-mode .hq-glitch {
    animation: blue-glitch-magenta 4s infinite !important;
}

@keyframes blue-glitch-magenta {

    0%,
    88%,
    100% {
        text-shadow: none;
        transform: none;
    }

    89% {
        text-shadow: 5px 0 #ff00ff, -5px 0 #d900d9;
        transform: skewX(0.6deg);
    }

    90% {
        text-shadow: -5px 0 #ff00ff, 5px 0 #d900d9;
        transform: skewX(-0.5deg) translateX(-3px);
    }

    91% {
        text-shadow: 4px 0 #ff00ff, -2px 0 rgba(255, 0, 255, 0.6);
        transform: translateX(2px);
    }

    92% {
        text-shadow: none;
        transform: none;
    }

    94% {
        text-shadow: 3px 0 rgba(255, 0, 255, 0.8);
        transform: translateX(-1px);
    }

    95% {
        text-shadow: none;
        transform: none;
    }
}