/* ============================================================
   SILIBOT TECHNOLOGY
   Futuristic galaxy / technology coming-soon experience.
   ============================================================ */


/* ============================================================
   MAIN TECHNOLOGY PAGE
   ============================================================ */

.technology-coming-page {
    background: #02040b;
    color: #ffffff;
}


/* ============================================================
   SPACE EXPERIENCE
   ============================================================ */

.tech-space {
    position: relative;
    min-height: calc(100vh - 80px);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(0, 110, 255, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 20% 25%,
            rgba(100, 70, 255, 0.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(0, 200, 255, 0.08),
            transparent 25%
        ),
        #02040b;
}


/* ============================================================
   STATIC STAR LAYERS
   ============================================================ */

.stars {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-repeat: repeat;
}


/* Small stars */
.stars-small {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1px);

    background-size: 90px 90px;

    opacity: .35;

    animation: star-drift-one 35s linear infinite;
}


/* Medium stars */
.stars-medium {
    background-image:
        radial-gradient(circle, rgba(150,210,255,.7) 1.3px, transparent 1.3px);

    background-size: 150px 150px;

    opacity: .28;

    animation: star-drift-two 55s linear infinite;
}


/* Large stars */
.stars-large {
    background-image:
        radial-gradient(circle, rgba(255,255,255,.85) 2px, transparent 2px);

    background-size: 230px 230px;

    opacity: .18;

    animation: star-drift-three 75s linear infinite;
}


/* ============================================================
   DYNAMIC JAVASCRIPT STARS
   ============================================================ */

.dynamic-star {
    position: absolute;

    width: var(--star-size);
    height: var(--star-size);

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 5px rgba(255,255,255,.8),
        0 0 12px rgba(80,170,255,.45);

    opacity: .15;

    animation:
        star-twinkle ease-in-out infinite;

    pointer-events: none;
}


/* ============================================================
   GALAXY GLOW
   ============================================================ */

.galaxy-glow {
    position: absolute;

    width: 850px;
    height: 320px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-18deg);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,130,255,.16) 0%,
            rgba(90,70,255,.10) 30%,
            rgba(0,0,0,0) 70%
        );

    filter: blur(20px);

    animation: galaxy-breathe 6s ease-in-out infinite;
}


/* ============================================================
   GALAXY ORBIT RINGS
   ============================================================ */

.galaxy-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(80,170,255,.13);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-20deg);

    pointer-events: none;
}


.galaxy-ring-one {
    width: 950px;
    height: 340px;

    animation:
        galaxy-rotate-one 18s linear infinite;
}


.galaxy-ring-two {
    width: 780px;
    height: 280px;

    border-color: rgba(130,90,255,.12);

    animation:
        galaxy-rotate-two 25s linear infinite reverse;
}


.galaxy-ring-three {
    width: 620px;
    height: 220px;

    border-color: rgba(0,200,255,.10);

    animation:
        galaxy-rotate-three 14s linear infinite;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

.tech-content {
    position: relative;

    z-index: 10;

    width: min(620px, 90%);

    margin-right: 600px;

    text-align: left;
}


/* ============================================================
   STATUS LABEL
   ============================================================ */

.tech-status {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 25px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;

    color: #8fc7ff;
}


.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #36a7ff;

    box-shadow:
        0 0 10px #36a7ff;

    animation:
        status-pulse 1.5s ease-in-out infinite;
}


.status-line {
    width: 35px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #3daaff,
            transparent
        );
}


/* ============================================================
   MAIN HEADING
   ============================================================ */

.tech-content h1 {
    margin: 0;

    font-size: clamp(48px, 5.5vw, 82px);

    line-height: .95;

    font-weight: 700;

    letter-spacing: -3px;

    color: #ffffff;
}


.tech-content h1 span {
    display: block;

    color: #45a8ff;

    text-shadow:
        0 0 30px rgba(50,150,255,.25);
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.tech-description {
    max-width: 570px;

    margin: 30px 0 35px;

    color: rgba(220,230,245,.68);

    font-size: 16px;

    line-height: 1.8;
}


/* ============================================================
   TECHNOLOGY MODULES
   ============================================================ */

.technology-modules {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

    max-width: 560px;
}


.tech-module {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px;

    border: 1px solid rgba(100,160,230,.13);

    background:
        rgba(255,255,255,.025);

    backdrop-filter: blur(8px);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}


.tech-module:hover {
    transform: translateY(-3px);

    border-color:
        rgba(70,170,255,.45);

    background:
        rgba(50,130,255,.06);
}


.module-symbol {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(70,170,255,.35);

    color: #54b2ff;

    font-size: 13px;
    font-weight: 700;
}


.tech-module strong {
    display: block;

    font-size: 10px;

    letter-spacing: 1.3px;
}


.tech-module small {
    display: block;

    margin-top: 4px;

    font-size: 9px;

    color: rgba(220,230,245,.45);

    letter-spacing: .8px;
}


/* ============================================================
   INITIALIZING MESSAGE
   ============================================================ */

.coming-message {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 28px;
}


.coming-message span {
    font-size: 9px;

    letter-spacing: 2px;

    color: rgba(255,255,255,.35);
}


.coming-message strong {
    font-size: 10px;

    letter-spacing: 2px;

    color: #50b1ff;

    animation:
        text-blink 1.8s infinite;
}


/* ============================================================
   CENTRAL TECHNOLOGY CORE
   ============================================================ */

.tech-core-system {
    position: absolute;

    left: 68%;
    top: 50%;

    width: 520px;
    height: 520px;

    transform:
        translate(-50%, -50%);

    z-index: 5;
}


/* ============================================================
   CORE ORBIT RINGS
   ============================================================ */

.core-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    border: 1px solid rgba(70,160,255,.22);

    transform:
        translate(-50%, -50%);
}


.orbit-outer {
    width: 500px;
    height: 500px;

    border-style: dashed;

    animation:
        core-rotate 35s linear infinite;
}


.orbit-middle {
    width: 380px;
    height: 380px;

    border-color:
        rgba(130,100,255,.22);

    animation:
        core-rotate-reverse 25s linear infinite;
}


.orbit-inner {
    width: 260px;
    height: 260px;

    border-color:
        rgba(0,200,255,.25);

    animation:
        core-rotate 15s linear infinite;
}


/* ============================================================
   CENTRAL CORE
   ============================================================ */

.tech-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 150px;
    height: 150px;

    transform:
        translate(-50%, -50%);

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border:
        1px solid rgba(100,190,255,.55);

    background:
        radial-gradient(
            circle,
            rgba(40,150,255,.20),
            rgba(5,10,25,.96) 68%
        );

    box-shadow:
        0 0 30px rgba(0,130,255,.25),
        inset 0 0 30px rgba(40,130,255,.12);

    animation:
        core-pulse 4s ease-in-out infinite;
}


.core-glow {
    position: absolute;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background:
        rgba(30,140,255,.12);

    filter: blur(20px);
}


.core-letter {
    position: relative;

    font-size: 42px;

    font-weight: 700;

    color: #ffffff;

    text-shadow:
        0 0 20px rgba(70,170,255,.8);
}


.core-name {
    position: relative;

    margin-top: -3px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #62baff;
}


.core-subtitle {
    position: relative;

    margin-top: 5px;

    font-size: 6px;

    letter-spacing: 2px;

    color: rgba(255,255,255,.4);
}


/* ============================================================
   ORBITING TECHNOLOGY NODES
   ============================================================ */

.core-node {
    position: absolute;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border:
        1px solid rgba(80,180,255,.45);

    background:
        rgba(5,15,30,.9);

    color: #70c4ff;

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 0 15px rgba(50,150,255,.15);

    z-index: 4;
}


.core-node-ai {
    left: 50%;
    top: -5px;

    transform: translateX(-50%);

    animation:
        node-float-one 4s ease-in-out infinite;
}


.core-node-robotics {
    right: -5px;
    top: 50%;

    transform: translateY(-50%);

    animation:
        node-float-two 4.5s ease-in-out infinite;
}


.core-node-code {
    bottom: -5px;
    left: 50%;

    transform: translateX(-50%);

    animation:
        node-float-three 5s ease-in-out infinite;
}


.core-node-electronics {
    left: -5px;
    top: 50%;

    transform: translateY(-50%);

    animation:
        node-float-four 4.2s ease-in-out infinite;
}


/* ============================================================
   SYSTEM BAR
   ============================================================ */

.tech-system-bar {
    position: absolute;

    bottom: 35px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 10;

    display: flex;

    gap: 35px;

    padding: 12px 20px;

    border:
        1px solid rgba(100,160,230,.12);

    background:
        rgba(0,5,15,.55);

    backdrop-filter: blur(10px);
}


.system-item {
    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 8px;

    letter-spacing: 1.2px;

    color: rgba(255,255,255,.35);
}


.system-item strong {
    color: #5bb6ff;

    font-size: 8px;
}


.system-indicator {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #3daaff;

    box-shadow:
        0 0 7px #3daaff;
}


/* ============================================================
   SCANNING LINE
   ============================================================ */

.scan-line {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    top: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(60,170,255,.35),
            transparent
        );

    animation:
        scan-screen 7s linear infinite;

    pointer-events: none;
}


/* ============================================================
   HUD TEXT
   ============================================================ */

.tech-hud {
    position: absolute;

    z-index: 10;

    font-size: 8px;

    letter-spacing: 2px;

    color: rgba(100,180,255,.35);
}


.hud-top-left {
    top: 25px;
    left: 30px;
}


.hud-top-right {
    top: 25px;
    right: 30px;
}


.hud-bottom-left {
    bottom: 25px;
    left: 30px;
}


.hud-bottom-right {
    bottom: 25px;
    right: 30px;
}


/* ============================================================
   FUTURE VISION SECTION
   ============================================================ */

.tech-vision {
    position: relative;

    padding: 140px 20px;

    background:
        linear-gradient(
            180deg,
            #02040b,
            #050914
        );
}


.tech-vision-container {
    width: min(1100px, 92%);

    margin: auto;

    text-align: center;
}


.tech-vision h2 {
    max-width: 850px;

    margin: 20px auto;

    font-size: clamp(38px, 5vw, 68px);

    line-height: 1;

    letter-spacing: -2px;
}


.tech-vision h2 span {
    display: block;

    color: #48aaff;
}


.tech-vision p {
    max-width: 700px;

    margin: 30px auto;

    color: rgba(220,230,245,.58);

    font-size: 16px;

    line-height: 1.8;
}


.vision-line {
    width: 100px;
    height: 1px;

    margin: 45px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4aaaff,
            transparent
        );
}


/* ============================================================
   VISION PILLARS
   ============================================================ */

.vision-pillars {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;
}


.vision-pillars div {
    padding: 25px 15px;

    border:
        1px solid rgba(100,160,230,.12);

    background:
        rgba(255,255,255,.025);
}


.vision-pillars span {
    display: block;

    margin-bottom: 10px;

    font-size: 10px;

    color: #4caeff;

    letter-spacing: 2px;
}


.vision-pillars strong {
    font-size: 10px;

    letter-spacing: 1.5px;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes star-drift-one {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-90px);
    }

}


@keyframes star-drift-two {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-150px);
    }

}


@keyframes star-drift-three {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-230px);
    }

}


@keyframes star-twinkle {

    0%, 100% {
        opacity: .1;
    }

    50% {
        opacity: .85;
    }

}


@keyframes galaxy-breathe {

    0%, 100% {
        opacity: .65;
        transform:
            translate(-50%, -50%)
            rotate(-18deg)
            scale(1);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            rotate(-18deg)
            scale(1.08);
    }

}


@keyframes galaxy-rotate-one {

    from {
        transform:
            translate(-50%, -50%)
            rotate(-20deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(340deg);
    }

}


@keyframes galaxy-rotate-two {

    from {
        transform:
            translate(-50%, -50%)
            rotate(25deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(-335deg);
    }

}


@keyframes galaxy-rotate-three {

    from {
        transform:
            translate(-50%, -50%)
            rotate(-40deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(320deg);
    }

}


@keyframes core-rotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes core-rotate-reverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

}


@keyframes core-pulse {

    0%, 100% {
        box-shadow:
            0 0 30px rgba(0,130,255,.25),
            inset 0 0 30px rgba(40,130,255,.12);
    }

    50% {
        box-shadow:
            0 0 60px rgba(0,150,255,.42),
            inset 0 0 45px rgba(40,150,255,.2);
    }

}


@keyframes status-pulse {

    0%, 100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

}


@keyframes text-blink {

    0%, 100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }

}


@keyframes scan-screen {

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

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

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

}


@keyframes node-float-one {

    0%, 100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-8px);
    }

}


@keyframes node-float-two {

    0%, 100% {
        transform:
            translateY(-50%)
            translateX(0);
    }

    50% {
        transform:
            translateY(-50%)
            translateX(8px);
    }

}


@keyframes node-float-three {

    0%, 100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(8px);
    }

}


@keyframes node-float-four {

    0%, 100% {
        transform:
            translateY(-50%)
            translateX(0);
    }

    50% {
        transform:
            translateY(-50%)
            translateX(-8px);
    }

}


/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

@media (max-width: 1100px) {

    .tech-content {
        margin-right: 420px;
    }

    .tech-core-system {
        left: 73%;

        transform:
            translate(-50%, -50%)
            scale(.82);
    }

}


@media (max-width: 850px) {

    .tech-space {
        min-height: 900px;

        align-items: flex-start;

        padding-top: 100px;
    }


    .tech-content {
        width: 90%;

        margin: 0 auto;

        text-align: center;
    }


    .tech-status {
        justify-content: center;
    }


    .tech-description {
        margin-left: auto;
        margin-right: auto;
    }


    .technology-modules {
        margin: auto;
    }


    .tech-core-system {
        position: absolute;

        left: 50%;
        top: 680px;

        transform:
            translate(-50%, -50%)
            scale(.55);
    }


    .tech-system-bar {
        bottom: 20px;

        gap: 12px;
    }


    .system-item {
        font-size: 6px;
    }


    .vision-pillars {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .tech-content h1 {
        font-size: 48px;

        letter-spacing: -2px;
    }


    .technology-modules {
        grid-template-columns: 1fr;
    }


    .tech-core-system {
        top: 690px;

        transform:
            translate(-50%, -50%)
            scale(.45);
    }


    .tech-system-bar {
        width: 90%;

        justify-content: center;

        flex-wrap: wrap;
    }


    .tech-hud {
        display: none;
    }


    .tech-vision {
        padding: 100px 20px;
    }


    .vision-pillars {
        grid-template-columns: 1fr;
    }

}