:root {
--transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
--sidebar-width: max(500px, 30%);
--card-size: 250px;
--app-viewport-width: 100vw;
--app-viewport-height: 100vh;
--fullscreen-gap: 16px;

--font-sans: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-display: "Libre Caslon Display", "Times New Roman", serif;
--font-mono: "Cutive Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

--page-bg: radial-gradient(circle at 0% 0%, #1f2937 0, #020617 55%, #000000 100%);
}

/* ========== Base & Layout ========== */

* {
box-sizing: border-box;
}

body {
    margin: 0;
    min-height:100vh;
    overflow-y: hidden ;
    height: fit-content;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: var(--page-bg);
    color: #e5e7eb;
    font-family: var(--font-sans);
    line-height: 1.6;
    user-select: none;
}
.card-grid-container{
    height: calc(100vh - 150px);
    position: absolute;
    top: 200px;
    left: 0px;
    width: 100vw;
    overflow-y: scroll;
    transition: var(--transition);

}
.card-grid {
    position: absolute;
    top: 0px;
    left: 0;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    padding: 32px 0 0 32px;
    overflow: hidden;
    transition: var(--transition);
}

/* ========== Header ========== */

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 18px 46px 32px 46px;
    transition: var(--transition);
    border-bottom-style: solid;
    border-bottom-color: #1f2937;
    border-bottom-width: 5px;
    height: 200px;
    overflow-y: scroll;
}

.header h1 {
    margin: 0 0 2px 0;
    color: #f9fafb;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.8rem, 3vw, 3.8rem);
    letter-spacing: 0.03em;
}

.header p {
    margin: 0;
    max-width: 900px;
    font-size: 1.2rem;
    color: #cbd5f5;
    font-family: var(--font-sans);
    opacity: 0.9;
}

/* ========== Card Base ========== */

.card {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--col), 0.25);
    color: #f9fafb;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    border-radius: 18px;
    border: 3px solid rgba(var(--col), 0.7);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    box-shadow:
        0 10px 40px rgba(15, 23, 42, 0.7),
        0 0 0 1px rgba(148, 163, 184, 0.25);
    --tx: 0px;
    --ty: 0px;
    transform: translate(var(--tx), var(--ty)) scale(0.98);
}

.card:hover {
    z-index: 1000;
    transform: translate(var(--tx), var(--ty)) scale(1.02);

    box-shadow:
        0 30px 60px rgba(15, 23, 42, 0.8),
        0 0 0 1px rgba(148, 163, 184, 0.4);
}

.card:active {
    transform: translate(var(--tx), var(--ty)) scale(0.92);
}

/* Background image */

.card .background-img {
    width: 100%;
    height: 100%;
    transform: scale(1.1) (-10px,-10px);
    border-radius: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300%;
    filter: saturate(1.1) contrast(1.05);
}

/* Frosted overlay */

.card .contain {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(
        150deg,
        rgba(var(--col), 0.5),
        rgba(15, 23, 42, 0.7)
        );
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    top: -2px;
    left: -2px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Logo */

.card .logo {
    position: absolute;
    top: calc((var(--card-size) * var(--size)) * 0.25);
    left: calc((var(--card-size) * var(--size)) * 0.25);
    width: calc((var(--card-size) * var(--size)) * 0.5);
    height: calc((var(--card-size) * var(--size)) * 0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: var(--transition);
}



/* Title */

.card .title {
    position: absolute;
    top: 18px;
    left: 18px;
    width: calc(100% - 72px);
    height: 40px;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 1.3rem;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.6);
    transition: var(--transition);
}

/* ========== Type & Category Icons ========== */

.type-container {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    justify-content: flex-end;
    width: 60px;
    height: 30px;
    gap: 6px;
    transition: var(--transition);
}

.category-container {
    position: absolute;
    top: calc((16px * (var(--size) - 1)) + (var(--card-size) * var(--size)) - 60px);
    left: calc((16px * (var(--size) - 1)) + (var(--card-size) * var(--size)) - 110px);
    display: flex;
    justify-content: flex-end;
    width: 80px;
    height: 30px;
    gap: 6px;
    transition: var(--transition);
}

/* Shared icon styles */

.type-icon,
.category-icon {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transition: var(--transition);
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.65));
}

.type-icon:hover,
.category-icon:hover {
    transform: translateY(-2px) scale(1.05);
}

/* Icon variants */

.type-webapp {
    background-image: url(img/CategoryIcon/Webapp.svg);
}

.type-software {
    background-image: url(img/CategoryIcon/Software.svg);
}

.type-library {
    background-image: url(img/CategoryIcon/Library.svg);
}

.category-education {
    background-image: url(img/CategoryIcon/Educational.svg);
}

.category-research-tool {
    background-image: url(img/CategoryIcon/Research_Tool.svg);
}

.category-visualization {
    background-image: url(img/CategoryIcon/Visualization.svg);
}

.category-data {
    background-image: url(img/CategoryIcon/Data.svg);
}

/* ========== Tooltips ========== */

.link-icon::after,
.category-icon::after,
.type-icon::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: 125%;
    transform: translateX(-50%);
    padding: 6px 10px;
    font-size: 0.75rem;
    white-space: nowrap;
    color: #e5e7eb;
    background: rgba(15, 23, 42, 0.96);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10000;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.8);
}

.link-icon::before,
.category-icon::before,
.type-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 115%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(15, 23, 42, 0.96);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10000;
}

/* Show tooltip on hover */

.link-icon:hover::after,
.link-icon:hover::before,
.category-icon:hover::after,
.category-icon:hover::before,
.type-icon:hover::after,
.type-icon:hover::before {
    opacity: 1;
}

.link-icon:hover::after,
.category-icon:hover::after,
.type-icon:hover::after {
    transform: translate(-50%, -2px);
}

/* ========== Links Section ========== */

.links-container {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(148, 163, 184, 0.4);
}

.link-icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: var(--transition);
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.8));
}

.email-link {
    color: white;
}

.link-icon:hover {
    transform: scale(1.12) translateY(-1px);
}

.link-link {
    background-image: url(img/CategoryIcon/Software.svg);
}

.link-github {
    background-image: url(img/CategoryIcon/github.svg);
}

.link-paper {
    background-image: url(img/CategoryIcon/publication.svg);
}

.link-mail {
    background-image: url(img/CategoryIcon/mail.svg);
}

.additional-link {
    display: inline-block;
    width: fit-content;
    max-width: 220px;
}

/* Main “Open” button */

.link-open {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 64px;
    padding: 10px 26px;
    margin-right: 10px;
    text-decoration: none;
    color: #e5e7eb;
    background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.08), transparent 55%),
                rgba(var(--col), 0.6);
    border: 1px solid rgba(248, 250, 252, 0.18);
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: var(--transition);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.4);
}

.link-open:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 70px rgba(15, 23, 42, 0.4);
    background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.14), transparent 55%),
                rgba(var(--col), 0.9);
}

.link-open:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 7px 20px rgba(15, 23, 42, 0.5);
}

.link-open .logo-link {
    width: 42px;
    height: 42px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.white-link {
    color: #ffffff;
    font-weight: bold;
}


/* ===== WebKit browsers (Chrome, Edge, Safari) ===== */

::-webkit-scrollbar {
    width: 8px;                 /* thin */
}

::-webkit-scrollbar-track {
    background: transparent;    /* no visible track */
}

::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.6);  /* soft gray */
    border-radius: 999px;
    border: 2px solid transparent;               /* makes thumb thinner */
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(209, 213, 219, 0.9);  /* slightly brighter on hover */
}

/* ===== Firefox ===== */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.7) transparent;
}




/* ========== Card Cover ========== */

.cover {
    position: absolute;
    inset: 0;
    background-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Stacking tweaks */

.card:hover {
    z-index: 1000;
}

.fullscreen {
    z-index: 1000;
}

.fullscreen:hover{
    transform: translate(var(--tx), var(--ty)) scale(0.98);
}

/* ========== Fullscreen Overrides ========== */

.fullscreen .category-container,
.fullscreen .type-container {
    height: 40px;
}

.fullscreen .category-container {
    width: 250px;
}

.fullscreen .category-icon,
.fullscreen .type-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

/* Sidebar cover */

.fullscreen .cover {
    right: 0;
    left: auto;
    width: var(--sidebar-width);
    height: 100%;
    background-color: rgba(3, 7, 18, 0.3);
    border-left: 6px solid rgba(var(--col), 0.9);
    transition: var(--transition);
}

/* Title & logo in fullscreen */

.fullscreen .title {
    top: calc(15px + 12.5px);
    left: calc(100% - var(--sidebar-width) + 135px);
    width: auto;
    font-size: 2.3rem;
    white-space: nowrap;
    transition: var(--transition);
}

.fullscreen .logo {
    top: 15px;
    left: calc(100% - var(--sidebar-width) + 45px);
    width: 75px;
    height: 75px;
    transition: var(--transition);
}

/* Description */

.card .description {
    position: absolute;
    top: 140px;
    right: calc(-1 * (var(--card-size) * var(--size)) * 2);
    width: var(--sidebar-width);
    height: 50%;
    text-align: justify;
    text-justify:distribute-all-lines;
    font-size: 1.3rem;
    color: #e5e7eb;
    transition: var(--transition);
}

.fullscreen .description {
    top: 140px;
    right: 0;
    left: auto;
    width: var(--sidebar-width);
    padding: 42px 50px 40px 50px;
    transition: var(--transition);
}

.description-header {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
    padding-bottom: 6px;
    font-size: 1.8rem;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    border-bottom: 2px solid rgba(226, 232, 240, 0.6);
}

/* Fullscreen icon container positions */

.fullscreen .type-container {
    top: 100px;
    right: 50px;
    left: auto;
}

.fullscreen .category-container {
    top: 100px;
    left: calc(100% - var(--sidebar-width) + 50px);
    justify-content: flex-start;
}

.img {
    position: absolute;
    top: 20px;
    left: calc(-1 * var(--size) * var(--card-size));
    width: calc(100% - var(--sidebar-width) - 90px);
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: var(--transition);
}

.fullscreen .img {
    position: absolute;
    top: 20px;
    left: 40px;
    width: calc(100% - var(--sidebar-width) - 90px);
}

/* ========== Mobile fullscreen layout ========== */

@media (max-width: 500px) {
    .type-container{
        opacity: 0;
    }


    .fullscreen .type-container{
        opacity: 1;
    }

    .category-container {
        opacity: 0;
    }

    .fullscreen .category-container {
        opacity: 1;
    }

    .card[data-size = "1"] .title {
        font-size: 15px;
    }

}

@media (max-width: 1200px) {
    :root {
        --sidebar-width: 100%;
    }

    .fullscreen .cover {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        height: 45vh;
        background-color: rgba(3, 7, 18, 0.3);
        border-top: 6px solid rgba(var(--col), 0.95);
        border-left: none;
    }

    .fullscreen .description {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 45%;
        padding: 22px 18px 18px 18px;
        text-align: justify;
        overflow-y: auto;
    }

    .fullscreen .title {
        top: 16px;
        left: 16px;
        width: calc(100% - 32px);
        font-size: 2rem;
        white-space: normal;
    }

    .fullscreen .logo {
        top: 16px;
        left: auto;
        right: 16px;
        width: 60px;
        height: 60px;
    }

    .fullscreen .type-container,
    .fullscreen .category-container {
        top: auto;
        bottom: 18px;
        height: 32px;
    }

    .fullscreen .category-container {
        left: 18px;
        right: auto;
        justify-content: flex-start;
    }

    .fullscreen .type-container {
        right: 18px;
        left: auto;
        justify-content: flex-end;
    }

    .fullscreen .category-icon,
    .fullscreen .type-icon {
        width: 28px;
        height: 28px;
        margin-right: 8px;
    }

    .fullscreen .img {
        position: absolute;
        top: 100px;
        left: 30px;
        width: calc(100% - 60px);
        height: calc(50% - 120px);
    }
}

/* ========== Per-card imagery (unchanged) ========== */

#card-smiles-mapper .background-img {
    background-image: url("img/Projects/SMILES-Mapper.png");
}

#card-smiles-mapper .img {
    background-image: url("img/Projects/SMILES-Mapper.png");
}

#card-smiles-mapper .logo,
#card-smiles-mapper .logo-link {
    background-image: url("img/Projects/Logo-White.svg");
}

#card-molaphant .background-img {
    background-image: url("img/Projects/Molaphant_Image.png");
}

#card-molaphant .img {
    background-image: url("img/Projects/Molaphant_Image.png");
}

#card-molaphant .logo,
#card-molaphant .logo-link {
    background-image: url("img/Projects/Molaphant-Icon.svg");
}

#card-elutioplate .img,
#card-elutioplate .background-img {
    background-image: url(img/Projects/Elutioplate.png);
}

#card-elutioplate .logo,
#card-elutioplate .logo-link {
    background-image: url(img/Projects/Elutioplate-Icon.svg);
}

#card-mendeleej .img,
#card-mendeleej .background-img {
    background-image: url(img/Projects/Mendeleej.png);
}

#card-mendeleej .logo,
#card-mendeleej .logo-link {
    background-image: url(img/Projects/Mendeleej-Icon.svg);
}


#card-protetwirl .img,
#card-protetwirl .background-img {
    background-image: url(img/Projects/Protetwirl_Image.png);
}

#card-protetwirl .logo,
#card-protetwirl .logo-link {
    background-image: url(img/Projects/ProteoTwirlIcon.svg);
}

#card-deltamol .img,
#card-deltamol .background-img {
    background-image: url(img/Projects/DeltaMol_Image.svg);
}

#card-deltamol .logo,
#card-deltamol .logo-link {
    background-image: url(img/Projects/DeltaMol-Icon.svg);
}






/* =========================================================
   DROP-IN REPLACEMENT (v3): Adds diagonal "reflection" sweep
   - Reflection band moves with tilt via --refl-x/--refl-y/--refl-angle
   - Keeps rainbow holo over tiled logo + metallic sheen
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .card-grid { perspective: none !important; perspective-origin: 50% 50% !important; }

  .card.tilt-holo:not(.fullscreen) {
    --tilt-persp: 950px;
    --thx: 0deg;
    --thy: 0deg;

    --holo-x: 50%;
    --holo-y: 50%;
    --holo-a: 0;

    --mark-x: 50%;
    --mark-y: 50%;
    --holo-mark: none;
    --holo-mark-size: 72px;

    /* NEW reflection controls */
    --refl-angle: 135deg;
    --refl-x: 50%;
    --refl-y: 50%;

    /* existing sheen controls */
    --sheen-angle: 115deg;
    --sheen-x: 50%;
    --sheen-y: 50%;

    transform:
      translate(var(--tx), var(--ty))
      perspective(var(--tilt-persp))
      rotateX(var(--thx))
      rotateY(var(--thy))
      scale(0.98);

    transform-style: preserve-3d;
    will-change: transform;
    isolation: isolate;
  }

  .card.tilt-holo:not(.fullscreen):hover {
    transform:
      translate(var(--tx), var(--ty))
      perspective(var(--tilt-persp))
      rotateX(var(--thx))
      rotateY(var(--thy))
      scale(1.01);
  }

  .card.tilt-holo-active:not(.fullscreen) {
    transition: transform 60ms linear, box-shadow 180ms ease;
  }

  .card.tilt-holo .contain {
    overflow: hidden;
    isolation: isolate;
  }

  .card.tilt-holo .contain::before,
  .card.tilt-holo .contain::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
  }

  /* =========================
     ::before = "metal layer"
     - NEW diagonal reflection sweep (top)
     - existing metallic band + hotspot
     ========================= */
  .card.tilt-holo .contain::before {
    z-index: 2;
    mix-blend-mode: overlay;

    background-image:
      /* NEW: diagonal reflection sweep (wide + inner bright line) */
      linear-gradient(
        var(--refl-angle),
        rgba(255,255,255,0.00) 35%,
        rgba(255,255,255,0.18) 46%,
        rgba(255,255,255,0.42) 49%,
        rgba(255,255,255,0.12) 53%,
        rgba(255,255,255,0.00) 64%
      ),

      /* existing metallic specular band */
      linear-gradient(
        var(--sheen-angle),
        rgba(255,255,255,0.00) 40%,
        rgba(255,255,255,0.20) 48%,
        rgba(255,255,255,0.06) 55%,
        rgba(255,255,255,0.00) 62%
      ),

      /* localized bright spot */
      radial-gradient(
        circle at var(--sheen-x) var(--sheen-y),
        rgba(255,255,255,0.16),
        rgba(255,255,255,0.00) 55%
      ),

      /* subtle “metal” tone variation */
      linear-gradient(
        115deg,
        rgba(255,255,255,0.00) 0%,
        rgba(255,255,255,0.08) 45%,
        rgba(255,255,255,0.00) 60%
      );

    /* Big sizes let us "slide" the reflection by shifting position */
    background-size: 260% 260%, 220% 220%, 170% 170%, 240% 240%;

    background-position:
      var(--refl-x) var(--refl-y),
      var(--holo-x) var(--holo-y),
      var(--sheen-x) var(--sheen-y),
      var(--holo-x) var(--holo-y);

    filter: contrast(1.06) brightness(1.03);
  }

  /* =========================
     ::after = rainbow holo over tiled logo
     ========================= */
  .card.tilt-holo .contain::after {
    z-index: 3;
    mix-blend-mode: color-dodge;

    background-image:
      var(--holo-mark),
      conic-gradient(
        from 180deg at var(--holo-x) var(--holo-y),
        rgba(255,  0,220,0.55),
        rgba(  0,240,255,0.50),
        rgba(255,255,  0,0.40),
        rgba(  0,255,140,0.38),
        rgba(120, 80,255,0.52),
        rgba(255,  0,220,0.55)
      ),
      radial-gradient(
        circle at var(--holo-x) var(--holo-y),
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.00) 60%
      );

    background-repeat: repeat, no-repeat, no-repeat;
    background-size:
      var(--holo-mark-size) var(--holo-mark-size),
      180% 180%,
      160% 160%;
    background-position:
      var(--mark-x) var(--mark-y),
      var(--holo-x) var(--holo-y),
      var(--holo-x) var(--holo-y);

    background-blend-mode: multiply, color-dodge, overlay;
    filter: saturate(1.35) contrast(1.10) brightness(1.06);
  }

  /* Preferred: mask rainbow to ONLY the logo shapes */
  @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .card.tilt-holo .contain::after {
      background-image:
        conic-gradient(
          from 180deg at var(--holo-x) var(--holo-y),
          rgba(255,  0,220,0.60),
          rgba(  0,240,255,0.55),
          rgba(255,255,  0,0.45),
          rgba(  0,255,140,0.42),
          rgba(120, 80,255,0.58),
          rgba(255,  0,220,0.60)
        ),
        radial-gradient(
          circle at var(--holo-x) var(--holo-y),
          rgba(255,255,255,0.16),
          rgba(255,255,255,0.00) 60%
        );

      background-repeat: no-repeat, no-repeat;
      background-size: 180% 180%, 160% 160%;
      background-position: var(--holo-x) var(--holo-y), var(--holo-x) var(--holo-y);
      background-blend-mode: color-dodge, overlay;

      -webkit-mask-image: var(--holo-mark);
      -webkit-mask-repeat: repeat;
      -webkit-mask-size: var(--holo-mark-size) var(--holo-mark-size);
      -webkit-mask-position: var(--mark-x) var(--mark-y);

      mask-image: var(--holo-mark);
      mask-repeat: repeat;
      mask-size: var(--holo-mark-size) var(--holo-mark-size);
      mask-position: var(--mark-x) var(--mark-y);
    }
  }

  /* Reveal overlays while active */
  .card.tilt-holo-active .contain::before {
    opacity: calc(var(--holo-a) * 0.75);
  }
  .card.tilt-holo-active .contain::after {
    opacity: calc(var(--holo-a) * 0.55);
  }

  @media (prefers-reduced-motion: reduce) {
    .card.tilt-holo:not(.fullscreen),
    .card.tilt-holo:not(.fullscreen):hover {
      transform: translate(var(--tx), var(--ty)) scale(0.98) !important;
    }
    .card.tilt-holo .contain::before,
    .card.tilt-holo .contain::after {
      display: none !important;
    }
  }
}































/* =========================================================
   HEADER INLINE FILTER UI (mounts into .header .filter_button)
   ========================================================= */

.header .filter_button {
  /* sits below your paragraph */
  margin-top: 14px;

  /* keep it visible even if header scrolls */
  position: sticky;
  bottom: 0;
  z-index: 20000;
  width: 40vw;
  margin-left: 50vw;

  /* create a fade backing so it reads nicely over header content */
  padding: 12px 0 6px 0;
  background: linear-gradient(
    to bottom,
    rgba(2, 6, 23, 0.00) 0%,
    rgba(2, 6, 23, 0.55) 25%,
    rgba(2, 6, 23, 0.70) 100%
  );
}

.header .filter_button.filterui--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

/* inner bar */
.header .filter_button .filterui {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: var(--transition);
}

.header .filter_button .filterui-left,
.header .filter_button .filterui-right {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.header .filter_button .filtergroup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.header .filter_button .filtergroup-title {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  color: rgba(226, 232, 240, 0.95);
  opacity: 0.9;
  white-space: nowrap;
}

.header .filter_button .filteroptions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.header .filter_button .filterbtn {
  --accent: 0, 231, 255; /* overridden per button in JS */
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.50);
  border-radius: 14px;
  padding: 8px;
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.header .filter_button .filterbtn:hover {
  transform: translateY(-1px);
  border-color: rgba(226, 232, 240, 0.35);
}

.header .filter_button .filterbtn:active {
  transform: translateY(0) scale(0.98);
}

.header .filter_button .filterbtn.is-active {
  background: rgba(15, 23, 42, 0.62);
  border-color: rgba(var(--accent), 0.65);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(var(--accent), 0.35),
    0 0 26px rgba(var(--accent), 0.22);
}

.header .filter_button .filterbtn .filterbtn-label {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 4px;
  color: rgba(226, 232, 240, 0.9);
}

/* Reuse your existing icon classes but neutralize hover animation inside filter UI */
.header .filter_button .type-icon,
.header .filter_button .category-icon {
  cursor: inherit;
  transition: var(--transition);
}
.header .filter_button .type-icon:hover,
.header .filter_button .category-icon:hover {
  transform: none;
}

/* “Icon color change” effect */
.header .filter_button .filterbtn:not(.is-active) .type-icon,
.header .filter_button .filterbtn:not(.is-active) .category-icon {
  opacity: 0.45;
  filter: grayscale(1) brightness(0.9) drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}

.header .filter_button .filterbtn.is-active .type-icon,
.header .filter_button .filterbtn.is-active .category-icon {
  opacity: 1;
  filter:
    saturate(1.35) brightness(1.10)
    drop-shadow(0 2px 6px rgba(0,0,0,0.55))
    drop-shadow(0 0 16px rgba(var(--accent), 0.45));
}

.header .filter_button .filter-status {
  font-size: 0.9rem;
  color: rgba(203, 213, 225, 0.92);
  opacity: 0.9;
  white-space: nowrap;
}

/* Hide/disable cards when filtered out */
.card.is-filtered-out {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(var(--tx), var(--ty)) scale(0.94) !important;
}


/* =========================================================
   PROJECT SHOWCASE PAGES INSIDE FULLSCREEN CARDS
   - .project-page is created by layout.js.
   - Optional external project snippets can be loaded with:
     <div class="card" data-project-page="project-pages/my-project.html">
   ========================================================= */

/* Avoid animating every measurable property on the layout containers. */
.card-grid-container {
    transition:
        top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-grid {
    transition:
        top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-page,
.fullscreen-close,
.project-panel-toggle {
    display: none;
}

.fullscreen .project-page {
    display: block;
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    bottom: 0;
    width: calc(100% - var(--sidebar-width));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 15px 0 0 15px;
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--col), 0.28), transparent 38%),
        linear-gradient(135deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.92));
    scroll-behavior: smooth;
}

.fullscreen .project-page-content {
    /*max-width: 1180px*/
    margin: 0 auto;
    /*padding: 46px*/
    padding: none;

}

.fullscreen .img {
    display: none;
}

.fullscreen .cover {
    z-index: 5;
    pointer-events: none;
}

.fullscreen .title,
.fullscreen .logo,
.fullscreen .description,
.fullscreen .type-container,
.fullscreen .category-container {
    z-index: 6;
}

.fullscreen .description,
.fullscreen .type-container,
.fullscreen .category-container {
    pointer-events: auto;
}

.fullscreen-close {
    position: absolute;
    z-index: 10020;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(226, 232, 240, 0.28);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.72);
    color: #f8fafc;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.fullscreen .fullscreen-close {
    display: flex;
}

.fullscreen-close:hover {
    transform: translateY(-1px) scale(1.04);
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(226, 232, 240, 0.48);
}

.project-page-hero,
.project-page-section {
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 28px;
    background:
        radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.06), transparent 46%),
        rgba(15, 23, 42, 0.50);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.project-page-hero {
    display: grid;
    grid-template-columns: minmax(260px, 1.15fr) minmax(260px, 0.85fr);
    gap: 28px;
    min-height: min(620px, 70vh);
    padding: 32px;
    align-items: stretch;
}

.project-page-hero-media,
.project-page-wide-image {
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, 0.18);
    background-image:
        linear-gradient(135deg, rgba(2, 6, 23, 0.10), rgba(2, 6, 23, 0.34)),
        var(--project-hero-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: rgba(2, 6, 23, 0.45);
    box-shadow: inset 0 0 80px rgba(2, 6, 23, 0.38);
}

.project-page-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(18px, 4vw, 48px);
}

.project-page-kicker {
    margin-bottom: 10px;
    color: rgba(226, 232, 240, 0.74);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.project-page h2,
.project-page h3,
.project-page h4,
.project-page p {
    margin-top: 0;
}

.project-page h2,
.project-page h3,
.project-page h4 {
    color: #f8fafc;
    font-family: var(--font-display);
    line-height: 1.05;
}

.project-page h2 {
    margin-bottom: 18px;
    font-size: clamp(3rem, 6vw, 6.3rem);
    letter-spacing: 0.02em;
}

.project-page h3 {
    margin-bottom: 16px;
    font-size: clamp(2.1rem, 3.6vw, 3.6rem);
}

.project-page h4 {
    margin-bottom: 10px;
    font-size: 1.7rem;
}

.project-page p {
    color: rgba(226, 232, 240, 0.86);
    font-size: clamp(1rem, 1.4vw, 1.24rem);
    line-height: 1.75;
}

.project-page-section {
    margin-top: 28px;
    padding: clamp(24px, 4vw, 52px);
}

.project-page-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
    gap: 26px;
    align-items: start;
}

.project-page-mini-card {
    padding: 24px;
    border: 1px solid rgba(226, 232, 240, 0.16);
    border-radius: 24px;
    background: rgba(2, 6, 23, 0.42);
}

.project-page-logo {
    width: 82px;
    height: 82px;
    margin-bottom: 18px;
    background-image: var(--project-logo-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.project-page-links .links-container {
    margin-top: 24px;
    height: auto;
}

.project-page-wide-image {
    min-height: clamp(280px, 55vh, 640px);
    margin-top: 22px;
}

.project-panel-toggle {
    position: absolute;
    z-index: 10015;
    right: 22px;
    bottom: 22px;
    min-height: 42px;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(226, 232, 240, 0.30);
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.76);
    color: #f8fafc;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.project-panel-toggle:hover {
    transform: translateY(-1px);
    background: rgba(15, 23, 42, 0.94);
}

@media (max-width: 1200px) {
    .fullscreen .project-page {
        width: 100%;
        right: 0;
        bottom: var(--mobile-panel-height, 45vh);
        border-radius: 15px 15px 0 0;
        transition: bottom 80ms linear;
    }

    .fullscreen .project-page-content {
        /*padding: 96px 18px 32px 18px;*/
        padding: none;
    }

    .project-page-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 16px;
    }

    .project-page-hero-media {
        min-height: clamp(260px, 42vh, 520px);
    }

    .project-page-two-col {
        grid-template-columns: 1fr;
    }

    .fullscreen .cover {
        height: var(--mobile-panel-height, 45vh) !important;
        opacity: var(--mobile-panel-opacity, 1);
        transition: height 80ms linear, opacity 80ms linear;
    }

    .fullscreen .description {
        height: var(--mobile-panel-height, 45vh) !important;
        max-height: var(--mobile-panel-height, 45vh);
        opacity: var(--mobile-panel-opacity, 1);
        overflow-y: auto;
        transition: height 80ms linear, max-height 80ms linear, opacity 80ms linear;
    }

    .fullscreen.project-panel-hidden .cover,
    .fullscreen.project-panel-hidden .description {
        pointer-events: none;
    }

    .fullscreen.project-panel-hidden .type-container,
    .fullscreen.project-panel-hidden .category-container {
        opacity: 0;
        pointer-events: none;
    }

    .fullscreen.project-panel-control-visible .project-panel-toggle {
        display: flex;
    }

    .fullscreen-close {
        top: 18px;
        right: 18px;
    }
}

@media (max-width: 560px) {
    .fullscreen .project-page-content {
        /*padding: 92px 12px 28px 12px;*/
        padding: none;
    }

    .project-page-hero,
    .project-page-section {
        border-radius: 20px;
    }

    .project-page h2 {
        font-size: clamp(2.4rem, 14vw, 4.5rem);
    }

    .project-page h3 {
        font-size: clamp(1.8rem, 10vw, 3rem);
    }

    .project-page-section {
        margin-top: 16px;
        padding: 20px;
    }

    .project-page-wide-image {
        min-height: 240px;
    }
}

@media (max-width: 1200px) {
    .fullscreen-close {
        right: 88px;
    }
}

/* =========================================================
   PATCH: responsive header/filter layout + status filters
   ========================================================= */

.header {
    height: auto;
    min-height: 200px;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 46vw);
    grid-template-rows: auto auto;
    column-gap: 28px;
    row-gap: 6px;
    align-content: start;
    padding: 16px 38px 18px 38px;
}

.header h1 {
    grid-column: 1;
    grid-row: 1;
    line-height: 0.95;
    margin: 0 0 4px 0;
}

.header p {
    grid-column: 1;
    grid-row: 2;
    line-height: 1.35;
    margin: 0;
}

.header .filter_button {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    position: relative;
    bottom: auto;
    z-index: 20000;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
}

.header .filter_button .filterui {
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
}

.header .filter_button .filterui-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.header .filter_button .filterui-right {
    flex: 0 0 auto;
}

.header .filter_button .filtergroup {
    flex: 0 0 auto;
    gap: 6px;
}

.header .filter_button .filtergroup-title {
    font-size: 0.82rem;
}

.header .filter_button .filteroptions {
    gap: 5px;
}

.header .filter_button .filterbtn {
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
    border-radius: 12px;
}

.header .filter_button .filterbtn-text {
    color: rgba(226, 232, 240, 0.92);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.header .filter_button .filterbtn.is-active .filterbtn-text {
    color: #f8fafc;
}

@media (max-width: 980px) {
    .header {
        min-height: 210px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px 14px 16px;
    }

    .header h1 {
        font-size: clamp(2.15rem, 10vw, 3rem);
    }

    .header p {
        max-width: none;
        font-size: 0.95rem;
        line-height: 1.28;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .header .filter_button {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

    .header .filter_button .filterui {
        width: max-content;
        min-width: 100%;
        flex-wrap: nowrap;
        align-items: center;
        padding: 7px 8px;
        border-radius: 14px;
    }

    .header .filter_button .filterui-left {
        overflow: visible;
        flex: 0 0 auto;
        gap: 8px;
    }

    .header .filter_button .filterui-right {
        display: none;
    }

    .header .filter_button .filtergroup {
        gap: 5px;
    }

    .header .filter_button .filtergroup-title {
        font-size: 0.74rem;
    }

    .header .filter_button .filterbtn {
        min-width: 34px;
        min-height: 34px;
        padding: 5px 7px;
    }

    .header .filter_button .type-icon,
    .header .filter_button .category-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 560px) {
    .header {
        min-height: 204px;
        gap: 7px;
    }

    .header .filter_button .filtergroup-title {
        display: none;
    }

    .header .filter_button .filterui {
        gap: 8px;
    }

    .header .filter_button .filterbtn .filterbtn-label,
    .header .filter_button .filterbtn-text {
        font-size: 0.68rem;
        letter-spacing: 0.04em;
    }
}

/* =========================================================
   PATCH: status icons on cards + in filters
   - Uses data-status on each .card and auto-generated markup from layout.js
   - Expected icon files:
     img/StatusIcon/alpha.svg
     img/StatusIcon/beta.svg
     img/StatusIcon/released.svg
   ========================================================= */

.status-container {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 42px;
    height: 30px;
    gap: 6px;
    transition: var(--transition);
}

.status-icon {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transition: var(--transition);
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.65));
}

.status-icon:hover {
    transform: translateY(-2px) scale(1.05);
}

.status-alpha {
    background-image: url("img/StatusIcon/alpha.svg");
}

.status-beta {
    background-image: url("img/StatusIcon/beta.svg");
}

.status-released {
    background-image: url("img/StatusIcon/released.svg");
}

/* Tooltip support for status icons, matching type/category icons. */
.status-icon::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: 125%;
    transform: translateX(-50%);
    padding: 6px 10px;
    font-size: 0.75rem;
    white-space: nowrap;
    color: #e5e7eb;
    background: rgba(15, 23, 42, 0.96);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10000;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.8);
}

.status-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 115%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(15, 23, 42, 0.96);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10000;
}

.status-icon:hover::after,
.status-icon:hover::before {
    opacity: 1;
}

.status-icon:hover::after {
    transform: translate(-50%, -2px);
}

/* Fullscreen placement: status becomes part of the information panel. */
.fullscreen .status-container {
    top: 100px;
    bottom: auto;
    left: calc(100% - var(--sidebar-width) + 155px);
    width: 60px;
    height: 40px;
}

.fullscreen .status-icon {
    width: 40px;
    height: 40px;
}

/* When the mobile info panel auto-hides, hide the status icon with it. */
.fullscreen.project-panel-hidden .status-container {
    opacity: 0;
    pointer-events: none;
}

/* Filter UI support for status icons. */
.header .filter_button .status-icon {
    cursor: inherit;
    transition: var(--transition);
}

.header .filter_button .status-icon:hover {
    transform: none;
}

.header .filter_button .filterbtn:not(.is-active) .status-icon {
    opacity: 0.45;
    filter: grayscale(1) brightness(0.9) drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}

.header .filter_button .filterbtn.is-active .status-icon {
    opacity: 1;
    filter:
        saturate(1.35) brightness(1.10)
        drop-shadow(0 2px 6px rgba(0,0,0,0.55))
        drop-shadow(0 0 16px rgba(var(--accent), 0.45));
}

@media (max-width: 1200px) {
    .fullscreen .status-container {
        top: auto;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 32px;
    }

    .fullscreen .status-icon {
        width: 28px;
        height: 28px;
        margin-right: 0;
    }
}

@media (max-width: 980px) {
    .header .filter_button .status-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 500px) {
    .status-container {
        opacity: 0;
    }

    .fullscreen .status-container {
        opacity: 1;
    }
}

#coming-soon-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.96);

    padding: 1.4rem 2.2rem;
    min-width: 220px;

    border-radius: 1.2rem;
    background: rgba(20, 20, 20, 0.94);
    color: white;

    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;

    opacity: 0;
    pointer-events: none;

    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;

    z-index: 99999;
}

#coming-soon-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* =========================================================
   PATCH: safer mobile fullscreen project view
   - Keeps desktop layout unchanged.
   - Mobile fullscreen cards use a small viewport-aware inset.
   - Close/info controls are fixed to the visible safe area.
   ========================================================= */

@supports (height: 100dvh) {
    :root {
        --app-viewport-height: 100dvh;
    }
}

@media (max-width: 1200px) {
    .card-grid.fullscreen-mode {
        width: 100vw !important;
        padding: 0 !important;
        overflow: visible;
    }

    .fullscreen {
        border-radius: clamp(12px, 3vw, 18px);
    }

    .card.fullscreen,
    .card.fullscreen:hover,
    .card.fullscreen:active {
        transform: translate(var(--tx), var(--ty)) scale(1);
    }

    .fullscreen .project-page {
        max-height: calc(var(--app-viewport-height, 100vh) - var(--mobile-panel-height, 45vh));
        scroll-padding-top: 64px;
        scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
    }

    .fullscreen .description {
        padding-bottom: 18px;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .fullscreen .fullscreen-close {
        position: fixed;
        top: 10px;
        right: 10px;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        right: calc(env(safe-area-inset-right, 0px) + 10px);
        width: 44px;
        height: 44px;
        touch-action: manipulation;
    }

    .fullscreen .project-panel-toggle {
        position: fixed;
        right: 10px;
        bottom: 10px;
        right: calc(env(safe-area-inset-right, 0px) + 10px);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
}

@media (max-width: 560px) {
    .fullscreen .project-page {
        border-radius: 12px 12px 0 0;
    }

    .fullscreen .description {
        padding: 18px 12px 14px 12px;
        padding: 18px 12px calc(14px + env(safe-area-inset-bottom, 0px)) 12px;
        font-size: 1rem;
        line-height: 1.45;
    }

    .fullscreen .description-header {
        font-size: 1.45rem;
        margin-bottom: 8px;
    }

    .fullscreen .links-container {
        height: auto;
        margin-top: 18px;
        padding-top: 16px;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
    }

    .fullscreen .link-open {
        height: 48px;
        padding: 8px 18px;
        font-size: 0.72rem;
    }

    .fullscreen .link-open .logo-link {
        width: 30px;
        height: 30px;
    }

    .fullscreen .link-icon {
        width: 36px;
        height: 36px;
    }
}

/* =========================================================
   PATCH v2: mobile fullscreen scroll lock + collision-proof controls
   - Prevents the outer grid scroller from staying scrolled down while a
     fullscreen card is open.
   - Keeps the info toggle out of the bottom info/link area.
   - Makes the Open button and link icons wrap as a real mobile layout.
   ========================================================= */

.card-grid-container.fullscreen-scroll-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.card-grid-container.fullscreen-scroll-lock .project-page {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@media (max-width: 1200px) {
    .fullscreen .description {
        /* Reserve room for the bottom meta icons so project link icons do not
           sit underneath category/type/status controls. */
        padding-bottom: 78px;
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .fullscreen.project-panel-control-visible:not(.project-panel-hidden) .project-panel-toggle {
        /* When the info panel is open, keep the toggle just above the panel
           instead of over the Open/GitHub/mail link row. */
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--fullscreen-gap, 0px) + var(--mobile-panel-height, 45vh) + 10px);
        right: calc(env(safe-area-inset-right, 0px) + var(--fullscreen-gap, 0px) + 10px);
        max-width: min(180px, calc(100vw - 80px));
        white-space: nowrap;
    }

    .fullscreen.project-panel-hidden .project-panel-toggle {
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--fullscreen-gap, 0px) + 10px);
    }

    .fullscreen .description .links-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
        align-items: center;
        justify-items: start;
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .fullscreen .description .link-open {
        max-width: 100%;
        min-width: 0;
        margin-right: 0;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    .fullscreen .description .additional-link {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 430px) {
    .fullscreen .description .links-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .fullscreen .description .link-open {
        width: 100%;
    }

    .fullscreen .description .additional-link {
        justify-content: flex-start;
    }
}

@media (max-width: 360px) {
    .fullscreen .description {
        padding-bottom: 70px;
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    .fullscreen .description .link-open {
        height: 44px;
        padding: 7px 14px;
        font-size: 0.68rem;
    }

    .fullscreen .description .link-icon {
        width: 32px;
        height: 32px;
    }

    .fullscreen .project-panel-toggle {
        min-height: 40px;
        padding: 0 12px;
        font-size: 0.78rem;
    }
}

@media (max-width: 560px) {
    .fullscreen .type-container,
    .fullscreen .category-container,
    .fullscreen .status-container {
        display: none;
    }
}

/* =========================================================
   PATCH v3: mobile metadata bar + scroll affordances
   - Moves fullscreen metadata into the mobile description panel flow.
   - Shrinks description typography on small screens.
   - Adds a temporary scroll-down hint and a subtle Show info pulse.
   ========================================================= */

.project-meta-bar,
.project-scroll-hint {
    display: none;
}

@media (max-width: 1200px) {
    .fullscreen .type-container,
    .fullscreen .category-container,
    .fullscreen .status-container {
        display: none !important;
    }

    .fullscreen .description {
        --description-pad-x: clamp(10px, 3vw, 16px);
        --description-pad-top: clamp(10px, 2.6vw, 14px);

        padding: var(--description-pad-top) var(--description-pad-x) calc(16px + env(safe-area-inset-bottom, 0px)) var(--description-pad-x) !important;
        font-size: clamp(0.88rem, 2.4vw, 1.04rem);
        line-height: 1.42;
        text-align: left;
        text-justify: auto;
    }

    .fullscreen .description p {
        margin-top: 0;
        margin-bottom: 0.75rem;
        font-size: inherit;
        line-height: inherit;
    }

    .fullscreen .description-header {
        margin-bottom: 8px;
        padding-bottom: 5px;
        font-size: clamp(1.18rem, 4.0vw, 1.5rem);
        line-height: 1.05;
    }

    .fullscreen .description .project-meta-bar {
        position: sticky;
        top: 0;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 40px;
        margin: calc(-1 * var(--description-pad-top)) calc(-1 * var(--description-pad-x)) 10px calc(-1 * var(--description-pad-x));
        padding: 7px var(--description-pad-x);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        border-bottom: 1px solid rgba(226, 232, 240, 0.18);
        background:
            radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.07), transparent 55%),
            rgba(2, 6, 23, 0.76);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        scrollbar-width: none;
    }

    .fullscreen .description .project-meta-bar::-webkit-scrollbar {
        display: none;
    }

    .fullscreen .description .project-meta-bar[hidden] {
        display: none !important;
    }

    .fullscreen .description .project-meta-group,
    .fullscreen .description .project-meta-icons {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }

    .fullscreen .description .project-meta-group {
        flex: 0 0 auto;
        min-height: 28px;
        padding: 3px 7px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.56);
    }

    .fullscreen .description .project-meta-category {
        max-width: 48%;
    }

    .fullscreen .description .project-meta-label {
        color: rgba(226, 232, 240, 0.72);
        font-family: var(--font-mono);
        font-size: 0.6rem;
        letter-spacing: 0.1em;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .fullscreen .description .project-meta-bar .type-icon,
    .fullscreen .description .project-meta-bar .category-icon,
    .fullscreen .description .project-meta-bar .status-icon {
        display: inline-block !important;
        width: 24px;
        height: 24px;
        min-width: 24px;
        margin: 0;
        opacity: 1 !important;
        cursor: default;
        pointer-events: none;
        transform: none !important;
        filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.65));
    }

    .fullscreen .description .project-meta-bar .type-icon::before,
    .fullscreen .description .project-meta-bar .type-icon::after,
    .fullscreen .description .project-meta-bar .category-icon::before,
    .fullscreen .description .project-meta-bar .category-icon::after,
    .fullscreen .description .project-meta-bar .status-icon::before,
    .fullscreen .description .project-meta-bar .status-icon::after {
        display: none !important;
    }

    .fullscreen .description .links-container {
        margin-top: 10px;
        padding-top: 10px;
    }

    .project-scroll-hint {
        position: fixed;
        z-index: 10012;
        left: 50%;
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--fullscreen-gap, 0px) + var(--mobile-panel-height, 45vh) + 14px);
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(226, 232, 240, 0.30);
        border-radius: 999px;
        background: rgba(2, 6, 23, 0.72);
        color: #f8fafc;
        font-family: var(--font-sans);
        font-size: 1.35rem;
        line-height: 1;
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 8px) scale(0.96);
        transition:
            opacity 180ms ease,
            transform 180ms ease,
            bottom 90ms linear;
        touch-action: manipulation;
    }

    .fullscreen .project-scroll-hint {
        display: flex;
    }

    .fullscreen.project-panel-hidden .project-scroll-hint {
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--fullscreen-gap, 0px) + 18px);
    }

    .fullscreen.project-scroll-hint-visible .project-scroll-hint {
        opacity: 0.94;
        pointer-events: auto;
        transform: translate(-50%, 0) scale(1);
        animation: project-scroll-hint-float 1200ms ease-in-out infinite;
    }

    .project-panel-toggle {
        overflow: visible;
    }

    .project-panel-toggle.project-panel-toggle-attention {
        animation: project-panel-toggle-attention 1700ms ease-out 1;
    }

    .project-panel-toggle.project-panel-toggle-attention::after {
        content: "";
        position: absolute;
        inset: -7px;
        border: 1px solid rgba(var(--col), 0.62);
        border-radius: 999px;
        opacity: 0;
        pointer-events: none;
        animation: project-panel-toggle-ring 1700ms ease-out 1;
    }
}

@media (max-width: 430px) {
    .fullscreen .description {
        font-size: clamp(0.82rem, 3.55vw, 0.94rem);
        line-height: 1.34;
    }

    .fullscreen .description-header {
        margin-bottom: 6px;
        font-size: clamp(1.05rem, 5.1vw, 1.28rem);
    }

    .fullscreen .description .project-meta-bar {
        min-height: 36px;
        gap: 6px;
        margin-bottom: 8px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .fullscreen .description .project-meta-group {
        gap: 5px;
        min-height: 26px;
        padding: 3px 6px;
    }

    .fullscreen .description .project-meta-label {
        display: none;
    }

    .fullscreen .description .project-meta-bar .type-icon,
    .fullscreen .description .project-meta-bar .category-icon,
    .fullscreen .description .project-meta-bar .status-icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    .fullscreen .description .links-container {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding-top: 8px;
    }

    .fullscreen .description .link-open {
        width: auto;
        height: 40px;
        min-width: 0;
        padding: 6px 12px;
        overflow: hidden;
        font-size: 0.64rem;
        white-space: nowrap;
    }

    .fullscreen .description .link-open .logo-link {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .fullscreen .description .additional-link {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 7px;
    }

    .fullscreen .description .link-icon {
        width: 30px;
        height: 30px;
    }

    .project-scroll-hint {
        width: 38px;
        height: 38px;
        font-size: 1.18rem;
    }
}

@media (max-width: 340px) {
    .fullscreen .description {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .fullscreen .description .project-meta-bar .type-icon,
    .fullscreen .description .project-meta-bar .category-icon,
    .fullscreen .description .project-meta-bar .status-icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .fullscreen .description .project-meta-group {
        gap: 4px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .fullscreen .description .link-open {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.6rem;
    }

    .fullscreen .description .link-icon {
        width: 28px;
        height: 28px;
    }
}

@keyframes project-scroll-hint-float {
    0%, 100% {
        transform: translate(-50%, 0) scale(1);
    }
    50% {
        transform: translate(-50%, 5px) scale(1);
    }
}

@keyframes project-panel-toggle-attention {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
    }
    18% {
        transform: translateY(-1px) scale(1.035);
        box-shadow:
            0 14px 36px rgba(0, 0, 0, 0.38),
            0 0 0 2px rgba(var(--col), 0.30),
            0 0 26px rgba(var(--col), 0.34);
    }
    42% {
        transform: translateY(0) scale(1);
    }
    66% {
        transform: translateY(-1px) scale(1.025);
        box-shadow:
            0 14px 36px rgba(0, 0, 0, 0.38),
            0 0 0 1px rgba(var(--col), 0.22),
            0 0 20px rgba(var(--col), 0.26);
    }
}

@keyframes project-panel-toggle-ring {
    0% {
        opacity: 0.85;
        transform: scale(0.92);
    }
    100% {
        opacity: 0;
        transform: scale(1.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fullscreen.project-scroll-hint-visible .project-scroll-hint,
    .project-panel-toggle.project-panel-toggle-attention,
    .project-panel-toggle.project-panel-toggle-attention::after {
        animation: none !important;
    }
}

@media (max-height: 560px) and (max-width: 1200px) {
    .fullscreen .description {
        font-size: clamp(0.82rem, 1.75vw, 0.95rem);
        line-height: 1.32;
    }

    .fullscreen .description-header {
        margin-bottom: 6px;
        font-size: clamp(1.05rem, 2.6vw, 1.28rem);
    }

    .fullscreen .description .project-meta-bar {
        min-height: 36px;
        margin-bottom: 8px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .fullscreen .description .project-meta-label {
        display: none;
    }

    .fullscreen .description .project-meta-group {
        min-height: 26px;
        padding: 3px 6px;
    }

    .fullscreen .description .project-meta-bar .type-icon,
    .fullscreen .description .project-meta-bar .category-icon,
    .fullscreen .description .project-meta-bar .status-icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    .fullscreen .description .links-container {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding-top: 8px;
    }

    .fullscreen .description .link-open {
        width: auto;
        height: 40px;
        min-width: 0;
        padding: 6px 12px;
        overflow: hidden;
        font-size: 0.64rem;
        white-space: nowrap;
    }

    .fullscreen .description .link-open .logo-link {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .fullscreen .description .additional-link {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 7px;
    }

    .fullscreen .description .link-icon {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 1200px) {
    .fullscreen .description .links-container {
        height: auto;
        min-height: 0;
    }
}


/* =========================================================
   PATCH v4: denser mobile grid
   - Keeps desktop grid sizing unchanged.
   - On narrow screens, gives the grid at least three columns so a 2-wide
     project card can sit next to a 1-wide card instead of becoming a huge
     near-full-width tile.
   ========================================================= */

@media (max-width: 1200px) {
    .card-grid {
        width: 100%;
        padding: 0;
    }

    .card-grid:not(.fullscreen-mode) .card {
        border-width: 2px;
        border-radius: 14px;
        box-shadow:
            0 8px 26px rgba(15, 23, 42, 0.62),
            0 0 0 1px rgba(148, 163, 184, 0.20);
    }

    .card-grid:not(.fullscreen-mode) .card .contain,
    .card-grid:not(.fullscreen-mode) .card .background-img {
        border-radius: 14px;
    }

    .card-grid:not(.fullscreen-mode) .card .title {
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        height: auto;
        max-height: 2.2em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: clamp(0.72rem, 3.2vw, 1.05rem);
        line-height: 1.02;
        letter-spacing: 0.045em;
        white-space: normal;
    }

    .card-grid:not(.fullscreen-mode) .card[data-size="1"] .title {
        font-size: clamp(0.62rem, 2.9vw, 0.82rem);
        line-height: 1;
    }

    .card-grid:not(.fullscreen-mode) .card[data-size="1"] .logo {
        top: calc(var(--card-size) * 0.34);
        left: calc(var(--card-size) * 0.31);
        width: calc(var(--card-size) * 0.38);
        height: calc(var(--card-size) * 0.38);
    }

    .card-grid:not(.fullscreen-mode) .card[data-size="2"] .logo {
        top: calc((var(--card-size) * 2) * 0.28);
        left: calc((var(--card-size) * 2) * 0.31);
        width: calc((var(--card-size) * 2) * 0.38);
        height: calc((var(--card-size) * 2) * 0.38);
    }
}

@media (max-width: 340px) {
    .card-grid:not(.fullscreen-mode) .card .title {
        top: 8px;
        left: 8px;
        width: calc(100% - 16px);
    }

    .card-grid:not(.fullscreen-mode) .card[data-size="1"] .title {
        font-size: 0.58rem;
    }
}