/* =============================================================================
   PROJECTS.CSS - Standalone styles for projects.html AND subproject detail pages
   No dependency on subpage.css
   ============================================================================= */

@font-face {
    font-family: "sfpro_d";
    src: url(../../font/SF-Pro-Display-Medium.otf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    width: 100%;
    font-family: 'sfpro_d', 'Times New Roman', Times, serif;
    overflow-x: hidden;
    background-color: #000000;
    cursor: none;
}

a, button, [onclick], .home-btn, .back-btn, .card, .copy-btn {
    cursor: none;
}

a:not(.nav-shape):not(.home-btn):not(.back-btn) {
    color: #ffffff;
    text-decoration: underline;
}

/* =============================================================================
   MOUSETRAILER
   ============================================================================= */

#mousetrailer {
    height: 15px;
    width: 15px;
    background: white;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 250ms ease;
    display: none;
}

@media (hover: hover), (pointer: fine) {
    #mousetrailer {
        display: block;
    }
}

/* =============================================================================
   BACKGROUND ANIMATION
   ============================================================================= */

#background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    background: none;

    & * {
        background: none;
    }

    &::before {
        content: 'vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsitevedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsitevedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsitevedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite vedsite';
        position: absolute;
        top: 0;
        left: 0;
        width: 300%;
        height: 300%;
        font-size: clamp(30px, 8vw, 80px);
        font-family: 'sfpro_d', 'inter', Times, serif;
        color: rgba(255, 255, 255, 0.05);
    }

    & > .bg-shape {
        position: absolute;
        opacity: 0.15;
        will-change: transform;

        &.triangle {
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 70px solid #ffffff;
            animation: float-and-roll-left 20s linear infinite;
        }

        &.triangle-reverse {
            width: 0;
            height: 0;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
            border-bottom: 70px solid #ffffff;
            animation: float-and-roll-right 20s linear infinite;
        }

        &:nth-child(1) { top: 5%; animation-delay: 0s; animation-duration: 22s; }
        &:nth-child(2) { top: 15%; animation-delay: -5s; animation-duration: 25s; }
        &:nth-child(3) { top: 25%; animation-delay: -10s; animation-duration: 28s; }
        &:nth-child(4) { top: 35%; animation-delay: -15s; animation-duration: 20s; }
        &:nth-child(5) { top: 45%; animation-delay: -8s; animation-duration: 24s; }
        &:nth-child(6) { top: 55%; animation-delay: -12s; animation-duration: 26s; }
        &:nth-child(7) { top: 65%; animation-delay: -18s; animation-duration: 23s; }
        &:nth-child(8) { top: 75%; animation-delay: -3s; animation-duration: 27s; }
        &:nth-child(9) { top: 85%; animation-delay: -20s; animation-duration: 21s; }
        &:nth-child(10) { top: 95%; animation-delay: -14s; animation-duration: 29s; }
    }
}

@keyframes float-and-roll-left {
    from { transform: translateX(-100px) rotate(0deg); }
    to { transform: translateX(calc(100vw + 100px)) rotate(-360deg); }
}

@keyframes float-and-roll-right {
    from { transform: translateX(calc(100vw + 100px)) rotate(0deg); }
    to { transform: translateX(-100px) rotate(360deg); }
}

/* =============================================================================
   PAGE CONTAINER / HEADER / CONTENT
   ============================================================================= */

.page-container {
    position: relative;
    z-index: 12;
    min-height: 100vh;
    width: 100%;
    padding: 60px 80px;
    background: transparent;
    pointer-events: auto;

    @media (max-width: 768px) {
        padding: 40px 20px;
    }
}

.page-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 60px;

    @media (max-width: 768px) {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        & h1 {
            width: 100%;
            text-align: center;
        }

        & .nav-buttons {
            margin-left: auto;
            margin-right: auto;
        }
    }

    & h1 {
        font-size: 48px;
        color: #ffffff;
        background: none;

        @media (max-width: 768px) {
            font-size: 32px;
        }
    }

    & .home-btn {
        font-family: 'sfpro_d', 'Times New Roman', Times, serif;
        font-size: clamp(12px, 2vw, 18px);
        color: #ffffff;
        text-decoration: none;
        padding: clamp(8px, 1.5vw, 12px) clamp(14px, 2.5vw, 24px);
        border: 2px solid #ffffff;
        border-radius: 30px;
        transition: all 300ms ease;
        background: none;
        white-space: nowrap;

        &:hover {
            background: #a69b8f;
            border-color: #a69b8f;
            color: #000000;
        }
    }
}

.page-content {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.6;
    background: none;

    & h2 {
        font-size: 32px;
        margin-bottom: 20px;
        background: none;

        @media (max-width: 768px) {
            font-size: 24px;
        }
    }

    & p {
        margin-bottom: 20px;
        background: none;
        text-align: center;
    }

    & p strong {
        color: #FF0000;
    }

    & section {
        margin-bottom: 60px;
        background: none;
    }
}

/* Shape transition overlay */
#shape-transition {
    position: fixed;
    border-radius: 6rem;
    z-index: 9999;
    pointer-events: none;
    transform: scale(20);
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 400ms ease;
}

#shape-transition.shrink {
    transform: scale(1);
    border-radius: 6rem;
}

/* =============================================================================
   CARD GRID (projects.html landing page)
   ============================================================================= */

.page-content > section:first-child {
    margin-bottom: 30px;
}

#cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 1123px;
    margin: 0 auto;
    justify-content: center;
}

#cards:hover > .card::after {
    opacity: 1;
}

.card {
    background-color: rgb(20, 20, 20);
    border-radius: 10px;
    cursor: none;
    display: flex;
    height: 304px;
    flex-direction: column;
    position: relative;
    width: calc(33.333% - 6px);
    text-decoration: none;
    color: inherit;
}

.card:hover::before {
    opacity: 1;
}

.card::before,
.card::after {
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    transition: opacity 500ms;
    width: 100%;
}

.card::before {
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y),
        rgba(255, 255, 255, 0.06),
        transparent 40%
    );
    z-index: 3;
}

.card::after {
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(255, 255, 255, 0.4),
        transparent 40%
    );
    z-index: 1;
}

.card > .card-content {
    background-color: rgb(20, 20, 20);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    inset: 1px;
    padding: 10px;
    position: absolute;
    z-index: 2;
}

.card.expanding {
    z-index: 9999;
    border-radius: 0 !important;
}

.card.expanding::before,
.card.expanding::after {
    display: none;
}

.card.expanding > .card-content {
    background-color: #000000;
}

.card.expanding .card-image,
.card.expanding .card-info-wrapper {
    opacity: 0;
}

/* =============================================================================
   CARD CONTENT
   ============================================================================= */

.card-image {
    align-items: center;
    display: flex;
    height: 180px;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    filter: grayscale(0.3);
    transition: opacity 300ms ease, filter 300ms ease;
}

.card:hover .card-image img {
    opacity: 1;
    filter: grayscale(0);
}

.card-info-wrapper {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    padding: 0px 16px;
}

.card-info {
    align-items: flex-start;
    display: flex;
    gap: 10px;
}

.card-info-title > h3 {
    font-size: 1.05em;
    line-height: 1.3;
    color: rgb(240, 240, 240);
    font-weight: 400;
    margin: 0;
}

.card-info-title > h4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8em;
    font-weight: 400;
    margin-top: 6px;
    line-height: 1.4;
}

/* =============================================================================
   CARD GRID RESPONSIVE
   ============================================================================= */

@media (max-width: 900px) {
    .card {
        width: calc(50% - 4px);
    }
}

@media (max-width: 600px) {
    #cards {
        gap: 6px;
    }

    .card {
        width: 100%;
        height: 234px;
    }

    .card-image {
        height: 108px;
    }

    .card-info-wrapper {
        padding: 0px 12px;
    }

    .card-info-title > h3 {
        font-size: 0.95em;
    }

    .card-info-title > h4 {
        font-size: 0.75em;
        margin-top: 4px;
    }
}

/* =============================================================================
   SUBPROJECT DETAIL PAGES (ssh.html, squashhub.html, etc.)
   Add class="detail-page" to <body> on detail pages for black background
   ============================================================================= */

body.detail-page {
    background-color: #000000;
}

/* =============================================================================
   NAV BUTTONS (detail pages)
   ============================================================================= */

.page-header .back-btn {
    font-family: 'sfpro_d', 'Times New Roman', Times, serif;
    font-size: clamp(12px, 2vw, 18px);
    color: #ffffff;
    text-decoration: none;
    padding: clamp(8px, 1.5vw, 12px) clamp(14px, 2.5vw, 24px);
    border: 2px solid #ffffff;
    border-radius: 30px;
    transition: all 300ms ease;
    background: none;
    white-space: nowrap;
}

.page-header .back-btn:hover {
    background: #9b4f96;
    border-color: #9b4f96;
    color: #ffffff;
}

.nav-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-self: end;
    grid-column: 3;
}

/* =============================================================================
   SUBPROJECT DETAIL PAGES — CENTERED LAYOUT
   Scoped via :has(.back-btn) so only detail pages are affected,
   not the projects.html card grid landing page.
   ============================================================================= */

.page-container:has(.back-btn) {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.page-container:has(.back-btn) .page-header {
    width: 100%;
    max-width: 720px;
    margin-bottom: 40px;
}

.page-container:has(.back-btn) .page-content {
    max-width: 720px;
    width: 100%;
    text-align: center;
}

.page-container:has(.back-btn) .page-content p {
    text-align: left;
    line-height: 1.8;
}

.page-container:has(.back-btn) .page-content h2 {
    text-align: center;
    margin-bottom: 1rem;
}

.page-container:has(.back-btn) .page-content section {
    margin-bottom: 2.5rem;
    background: rgba(0, 0, 0, 0.85);
    padding: 2rem;
    border-radius: 12px;

    & > *:last-child {
        margin-bottom: 0;
    }
}

/* =============================================================================
   SUBPROJECT REUSABLE COMPONENTS
   ============================================================================= */

/* Highlighted box — e.g. "try it" / connect commands */
.highlight-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    margin: 1.5rem auto;
    max-width: 420px;
}

.highlight-box code {
    font-size: 1.3rem;
    color: #FF0000;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.highlight-box .hint {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 0;
    text-align: center !important;
}

/* Inline code */
.page-container:has(.back-btn) .page-content code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

/* Tech tag pills */
.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 1rem 0;
}

.tech-tags span {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Feature list */
.features {
    text-align: left;
    margin: 1rem 0;
}

.feature {
    margin-bottom: 1rem;
}

.feature strong {
    color: #FF0000;
}

/* Architecture / flow diagram row */
.arch-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.arch-row .node {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 6px;
}

.arch-row .arrow {
    opacity: 0.4;
}

/* Screenshot images and videos */
.screenshot {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
    display: block;
}

/* Screenshot placeholders (remove once real images added) */
.screenshot-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    font-size: 0.9rem;
    opacity: 0.4;
}

/* =============================================================================
   SSH COMMAND COPY BUTTON
   ============================================================================= */

.ssh-command {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ssh-command code {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 14px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 1em;
    color: #FF0000;
    white-space: nowrap;
}

.copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: none;
    font-size: 16px;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background 200ms ease;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}