/* TechBrain galaxy background – estrellas, nebulosa y estrellas fugaces */
.techbrain-galaxy-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(60rem 40rem at 8% 8%, rgba(16, 185, 129, 0.34), transparent 55%),
        radial-gradient(56rem 36rem at 92% 10%, rgba(56, 189, 248, 0.34), transparent 52%),
        radial-gradient(58rem 40rem at 50% 88%, rgba(139, 92, 246, 0.32), transparent 56%),
        radial-gradient(34rem 24rem at 50% 45%, rgba(14, 165, 233, 0.18), transparent 62%),
        linear-gradient(160deg, #080d1d, #060b17);
    filter: saturate(120%);
}

.techbrain-galaxy-bg .star-layer {
    position: absolute;
    inset: -260% 0 0 -34%;
    width: 2px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
    will-change: transform, opacity;
}

.techbrain-galaxy-bg .star-layer.star-variant-a {
    transform: translate3d(7vw, -26vh, 0);
    animation-delay: -38s, -2.4s;
}

.techbrain-galaxy-bg .star-layer.star-variant-b {
    transform: translate3d(-9vw, -34vh, 0);
    animation-delay: -64s, -3.2s;
}

.techbrain-galaxy-bg .star-layer.star-variant-c {
    transform: translate3d(15vw, -58vh, 0);
    animation-delay: -91s, -4.1s;
}

.techbrain-galaxy-bg .star-layer::after {
    content: '';
    position: absolute;
    inset: 180vh 0 0 0;
    width: inherit;
    height: inherit;
    background: inherit;
    border-radius: inherit;
    box-shadow: inherit;
}

.techbrain-galaxy-bg .star-layer-far {
    width: 1px;
    height: 1px;
    opacity: 0.56;
    box-shadow:
        8vw 6vh #c9ddff, 14vw 24vh #f3f7ff, 22vw 10vh #d8f2ff, 30vw 34vh #e6eeff,
        38vw 16vh #d4e7ff, 44vw 48vh #e9f1ff, 52vw 28vh #d7efff, 60vw 8vh #f5fbff,
        68vw 40vh #d8e4ff, 76vw 18vh #e6f3ff, 84vw 30vh #d6ebff, 92vw 12vh #eff5ff,
        12vw 58vh #dceeff, 20vw 74vh #f7fbff, 28vw 62vh #cfe1ff, 36vw 86vh #d7f1ff,
        48vw 70vh #edf6ff, 56vw 92vh #d9e6ff, 64vw 64vh #e1f2ff, 72vw 84vh #f4f9ff,
        82vw 72vh #d2e7ff, 90vw 96vh #e6f1ff,
        5vw 44vh #dceaff, 17vw 38vh #f3f9ff, 26vw 54vh #d8ebff, 33vw 72vh #eef6ff,
        41vw 88vh #d3e6ff, 49vw 18vh #e9f3ff, 57vw 44vh #dcedff, 63vw 52vh #f5fbff,
        71vw 14vh #d8ecff, 79vw 58vh #e8f5ff, 87vw 46vh #d4e8ff, 95vw 66vh #edf7ff;
    animation: starFieldDriftFar 180s linear infinite, starTwinkleFar 9s ease-in-out infinite;
}

.techbrain-galaxy-bg .star-layer-dense {
    width: 0.9px;
    height: 0.9px;
    opacity: 0.6;
    box-shadow:
        3vw 8vh #d8ebff, 7vw 18vh #eaf4ff, 11vw 28vh #d4e7ff, 15vw 38vh #f5fbff,
        19vw 48vh #d9ecff, 23vw 58vh #ebf5ff, 27vw 68vh #d2e5ff, 31vw 78vh #f3faff,
        35vw 88vh #dceeff, 39vw 22vh #e7f3ff, 43vw 32vh #d6e9ff, 47vw 42vh #f6fbff,
        51vw 52vh #dbeeff, 55vw 62vh #ecf6ff, 59vw 72vh #d3e7ff, 63vw 82vh #f4faff,
        67vw 92vh #d8ecff, 71vw 14vh #e9f4ff, 75vw 24vh #d7eaff, 79vw 34vh #f6fcff,
        83vw 44vh #d6e9ff, 87vw 54vh #ebf5ff, 91vw 64vh #d4e8ff, 95vw 74vh #f5fbff,
        99vw 84vh #d8ecff, 12vw 96vh #edf6ff, 24vw 4vh #d4e7ff, 36vw 12vh #f4faff,
        48vw 20vh #d8ecff, 60vw 28vh #ecf6ff, 72vw 36vh #d4e8ff, 84vw 44vh #f5fbff;
    animation: starFieldDriftDense 140s linear infinite, starTwinkleDense 7s ease-in-out infinite;
}

.techbrain-galaxy-bg .star-layer-mid {
    width: 1.6px;
    height: 1.6px;
    opacity: 0.62;
    box-shadow:
        6vw 14vh #ffffff, 16vw 8vh #dff3ff, 24vw 30vh #f5fbff, 34vw 12vh #e4efff,
        42vw 22vh #ffffff, 50vw 6vh #d9ecff, 58vw 34vh #f0f8ff, 66vw 16vh #e5f2ff,
        74vw 28vh #ffffff, 82vw 10vh #d7ebff, 90vw 26vh #f4fbff, 96vw 14vh #dcefff,
        10vw 46vh #ffffff, 18vw 54vh #d5e8ff, 26vw 42vh #f8fcff, 40vw 60vh #dcedff,
        54vw 50vh #ffffff, 62vw 74vh #def0ff, 70vw 56vh #f1f8ff, 78vw 68vh #d9e9ff,
        86vw 52vh #ffffff, 94vw 80vh #e8f4ff;
    animation: starFieldDriftMid 130s linear infinite, starTwinkleMid 6s ease-in-out infinite;
}

.techbrain-galaxy-bg .star-layer-near {
    width: 2.2px;
    height: 2.2px;
    opacity: 1;
    box-shadow:
        4vw 20vh #ffffff, 13vw 36vh #ffffff, 21vw 18vh #ffffff, 31vw 42vh #ffffff,
        45vw 14vh #ffffff, 57vw 30vh #ffffff, 69vw 22vh #ffffff, 81vw 40vh #ffffff,
        93vw 20vh #ffffff, 11vw 70vh #ffffff, 25vw 64vh #ffffff, 39vw 82vh #ffffff,
        53vw 60vh #ffffff, 67vw 76vh #ffffff, 79vw 62vh #ffffff, 91vw 90vh #ffffff,
        7vw 52vh #ffffff, 29vw 50vh #ffffff, 47vw 74vh #ffffff, 73vw 88vh #ffffff;
    filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.78));
    animation: starFieldDriftNear 90s linear infinite, starTwinkleNear 4s ease-in-out infinite;
}

.techbrain-galaxy-bg .shooting-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.techbrain-galaxy-bg .shooting-star {
    position: absolute;
    width: 160px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.75), 0 0 22px rgba(56, 189, 248, 0.45);
    opacity: 0;
    transform: rotate(-24deg) translate3d(0, 0, 0);
    animation: shootingStar 7.2s linear infinite;
}

.techbrain-galaxy-bg .shooting-star.bottom {
    transform: rotate(24deg) translate3d(0, 0, 0);
    animation: shootingStarBottom 7.6s linear infinite;
}

.techbrain-galaxy-bg .shooting-star.bottom.reverse {
    transform: rotate(-24deg) translate3d(0, 0, 0);
    animation: shootingStarBottomReverse 7.9s linear infinite;
}

.techbrain-galaxy-bg .shooting-star::after {
    content: '';
    position: absolute;
    right: -2px;
    top: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    filter: blur(0.3px);
}

.techbrain-galaxy-bg .shooting-star:nth-child(1) { top: 6%; left: -18%; animation-delay: 0s; animation-duration: 6.2s; }
.techbrain-galaxy-bg .shooting-star:nth-child(2) { top: 14%; left: -25%; animation-delay: 1.1s; animation-duration: 7s; }
.techbrain-galaxy-bg .shooting-star:nth-child(3) { top: 24%; left: -16%; animation-delay: 2.2s; animation-duration: 6.8s; }
.techbrain-galaxy-bg .shooting-star:nth-child(4) { top: 34%; left: -28%; animation-delay: 0.6s; animation-duration: 7.4s; }
.techbrain-galaxy-bg .shooting-star:nth-child(5) { top: 44%; left: -20%; animation-delay: 3s; animation-duration: 6.6s; }
.techbrain-galaxy-bg .shooting-star:nth-child(6) { top: 54%; left: -30%; animation-delay: 1.8s; animation-duration: 7.8s; }
.techbrain-galaxy-bg .shooting-star:nth-child(7) { top: 62%; left: -22%; animation-delay: 2.8s; animation-duration: 6.4s; }
.techbrain-galaxy-bg .shooting-star:nth-child(8) { top: 72%; left: -26%; animation-delay: 3.8s; animation-duration: 7.6s; }
.techbrain-galaxy-bg .shooting-star:nth-child(9) { top: 82%; left: -18%; animation-delay: 4.5s; animation-duration: 6.9s; }
.techbrain-galaxy-bg .shooting-star:nth-child(10) { top: 90%; left: -24%; animation-delay: 5.2s; animation-duration: 7.3s; }
.techbrain-galaxy-bg .shooting-star.bottom:nth-child(11) { top: 108%; left: -16%; animation-delay: 0.7s; animation-duration: 7.1s; }
.techbrain-galaxy-bg .shooting-star.bottom:nth-child(12) { top: 116%; left: -24%; animation-delay: 2.2s; animation-duration: 8.2s; }
.techbrain-galaxy-bg .shooting-star.bottom:nth-child(13) { top: 104%; left: -28%; animation-delay: 3.5s; animation-duration: 7.4s; }
.techbrain-galaxy-bg .shooting-star.bottom:nth-child(14) { top: 120%; left: -20%; animation-delay: 4.8s; animation-duration: 8.8s; }
.techbrain-galaxy-bg .shooting-star.bottom.reverse:nth-child(13) { left: auto; right: -24%; }
.techbrain-galaxy-bg .shooting-star.bottom.reverse:nth-child(14) { left: auto; right: -16%; }

.techbrain-galaxy-bg::before,
.techbrain-galaxy-bg::after {
    content: '';
    position: absolute;
    inset: 0;
}

.techbrain-galaxy-bg::before {
    background:
        radial-gradient(circle at 20% 26%, rgba(16, 185, 129, 0.38), transparent 0 28%),
        radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.34), transparent 0 26%),
        radial-gradient(circle at 56% 78%, rgba(99, 102, 241, 0.34), transparent 0 30%);
    mix-blend-mode: screen;
    filter: blur(72px);
    opacity: 0.95;
    animation: techbrainNebulaFloat 24s ease-in-out infinite alternate;
}

.techbrain-galaxy-bg::after {
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.40), transparent),
        radial-gradient(1px 1px at 78% 22%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1px 1px at 64% 82%, rgba(255, 255, 255, 0.35), transparent),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: auto, auto, auto, auto, 72px 72px, 72px 72px;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.86), transparent 94%);
    opacity: 0.54;
    animation: techbrainStarDrift 120s linear infinite, techbrainTwinkle 8s ease-in-out infinite alternate;
}

@keyframes techbrainStarDrift {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 120px -180px, -140px -120px, 180px -150px, -100px -190px, 90px -220px, -110px -220px; }
}

@keyframes starFieldDriftFar {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(8vw, 200vh, 0); }
}

@keyframes starFieldDriftMid {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-10vw, 200vh, 0); }
}

@keyframes starFieldDriftDense {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(6vw, 200vh, 0); }
}

@keyframes starFieldDriftNear {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(12vw, 200vh, 0); }
}

@keyframes starTwinkleFar {
    0%, 100% { opacity: 0.26; }
    50% { opacity: 0.52; }
}

@keyframes starTwinkleMid {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.8; }
}

@keyframes starTwinkleDense {
    0%, 100% { opacity: 0.42; }
    50% { opacity: 0.72; }
}

@keyframes starTwinkleNear {
    0%, 100% { opacity: 0.64; }
    50% { opacity: 1; }
}

@keyframes shootingStar {
    0% { opacity: 0; transform: rotate(-24deg) translate3d(0, 0, 0); }
    8% { opacity: 1; }
    45% { opacity: 0.95; }
    70% { opacity: 0; transform: rotate(-24deg) translate3d(128vw, 52vh, 0); }
    100% { opacity: 0; transform: rotate(-24deg) translate3d(128vw, 52vh, 0); }
}

@keyframes shootingStarBottom {
    0% { opacity: 0; transform: rotate(24deg) translate3d(0, 0, 0); }
    10% { opacity: 1; }
    48% { opacity: 0.95; }
    74% { opacity: 0; transform: rotate(24deg) translate3d(128vw, -58vh, 0); }
    100% { opacity: 0; transform: rotate(24deg) translate3d(128vw, -58vh, 0); }
}

@keyframes shootingStarBottomReverse {
    0% { opacity: 0; transform: rotate(-24deg) translate3d(0, 0, 0); }
    10% { opacity: 1; }
    48% { opacity: 0.95; }
    74% { opacity: 0; transform: rotate(-24deg) translate3d(-128vw, -58vh, 0); }
    100% { opacity: 0; transform: rotate(-24deg) translate3d(-128vw, -58vh, 0); }
}

@keyframes techbrainTwinkle {
    0% { opacity: 0.24; filter: brightness(0.92); }
    50% { opacity: 0.42; filter: brightness(1.08); }
    100% { opacity: 0.33; filter: brightness(1); }
}

@keyframes techbrainNebulaFloat {
    0% { transform: translate3d(-2%, 1%, 0) scale(1); }
    100% { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
}

/* Marca de agua – rebote diagonal (galaxy-watermark-bounce.js) */
.tb-galaxy-watermark {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.072;
    z-index: 0;
}

.tb-galaxy-watermark__logo {
    position: absolute;
    left: 0;
    top: 0;
    width: min(40vw, 420px);
    max-height: 58vh;
    height: auto;
    transform: translate(0, 0);
    filter: drop-shadow(0 0 28px rgba(77, 226, 255, 0.14));
    will-change: transform;
}

.tb-galaxy-watermark__logo ellipse {
    display: none;
}

body.light-theme .tb-galaxy-watermark {
    opacity: 0.055;
}

body.light-theme .tb-galaxy-watermark__logo {
    filter: drop-shadow(0 0 20px rgba(77, 226, 255, 0.1));
}

@media (prefers-reduced-motion: reduce) {
    .techbrain-galaxy-bg::before,
    .techbrain-galaxy-bg::after,
    .techbrain-galaxy-bg .star-layer {
        animation: none;
    }

    .techbrain-galaxy-bg .shooting-star {
        animation: none;
        opacity: 0;
    }

    .tb-galaxy-watermark__logo {
        animation: none;
    }
}

/* Mobile (≤768px): sin estrellas fugaces, animaciones −40%, PC sin cambios */
@keyframes tbGalaxyMobileStarTwinkle {
    0%, 100% { opacity: 0.36; }
    50% { opacity: 0.48; }
}

@keyframes tbGalaxyMobileNebulaPulse {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.62; }
    50% { transform: translate3d(0.6%, -0.3%, 0) scale(1.012); opacity: 0.68; }
}

@keyframes tbGalaxyMobileGridFade {
    0%, 100% { opacity: 0.26; }
    50% { opacity: 0.30; }
}

@media (max-width: 768px) {
    .techbrain-galaxy-bg {
        filter: none;
        contain: strict;
    }

    .techbrain-galaxy-bg .shooting-stars {
        display: none !important;
    }

    .techbrain-galaxy-bg::before {
        filter: none;
        mix-blend-mode: normal;
        animation: tbGalaxyMobileNebulaPulse 40s ease-in-out infinite alternate;
    }

    .techbrain-galaxy-bg::after {
        animation: tbGalaxyMobileGridFade 13.33s ease-in-out infinite;
    }

    .techbrain-galaxy-bg .star-layer-dense,
    .techbrain-galaxy-bg .star-layer-mid,
    .techbrain-galaxy-bg .star-layer.star-variant-a,
    .techbrain-galaxy-bg .star-layer.star-variant-b,
    .techbrain-galaxy-bg .star-layer.star-variant-c {
        display: none !important;
    }

    .techbrain-galaxy-bg .star-layer-far,
    .techbrain-galaxy-bg .star-layer-near {
        box-shadow: none !important;
        width: 1px !important;
        height: 1px !important;
        inset: 0 !important;
        transform: none !important;
        filter: none !important;
        animation: tbGalaxyMobileStarTwinkle 9.17s ease-in-out infinite !important;
    }

    .techbrain-galaxy-bg .star-layer-near {
        animation-duration: 6.67s !important;
        animation-delay: -3.33s !important;
    }

    .tb-galaxy-watermark {
        opacity: 0.05;
    }
}