/* product-themes.css — shared product block styling across gangdev.co
 * Used by: /updates/, / (home), and any page showing product cards.
 * Server path: /var/www/gangdev/shared/css/product-themes.css
 * Include via: <link rel="stylesheet" href="https://gangdev.co/shared/css/product-themes.css">
 * or @import url("/shared/css/product-themes.css");
 */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("https://gangdev.co/src/fonts/BricolageGrotesque.ttf");
    font-weight: 200 800;
    font-display: swap;
}

/* ===== PRODUCT BLOCKS — base structure ===== */
.productBlock {
    margin-bottom: 24px;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.productBlock[data-href] {
    cursor: pointer;
}

/* No scale here. A transform grows the painted box without reserving layout
   for it, and an expanded block runs to 8000px, so 1.02 put 160px of card on
   top of whatever came next. A lift reads the same and costs no height. */
.productBlock[data-href]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.productBlock[data-href]:active {
    transform: translateY(0);
}

.productBanner {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.productBanner .productIcon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.productBanner .productName {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.productBanner .productTag {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: auto;
    align-self: center;
}

.productBanner .productVersion {
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-family: inherit;
    opacity: 0.7;
}

/* Product description (used on home page — no change list) */
.productDesc {
    padding: 10px 18px 14px;
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Change list (used on updates page) — collapsed by default, expands on
   click via .expanded (added by JS), not hover, so it doesn't fight with
   navigating via the product name link. */
.changeList {
    list-style: none;
    margin: 0;
    padding: 0 18px;
    display: grid;
    gap: 6px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}
/* Fallback ceiling only. updates/script.js sets max-height to the list's
   measured scrollHeight so the transition animates the real distance and
   nothing is ever cut off; a fixed 600px hid most of every long entry. */
.productBlock.expanded .changeList {
    max-height: 6000px;
    padding: 14px 18px;
    opacity: 1;
}

.expandHint {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.productBlock.expanded .expandHint { opacity: 0.9; transform: rotate(90deg); }
.productBlock { cursor: pointer; }
.productBanner .productName { position: relative; z-index: 2; cursor: pointer; }
.productBanner .productName:hover { text-decoration: underline; }

.changeList li {
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.changeList li:last-child { border-bottom: none; }

.changeList code {
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: "JetBrains Mono", monospace;
}

/* Tags.
   feat, fix and infra take the product's own colour, one line per theme below.
   security does not, on purpose: it is a house concern rather than a product
   one, so it wears the house magenta and looks the same wherever it turns up.

   It is also the only solid chip. Every other tag is a tinted background with
   coloured text, which needs a per-theme pair because four of these cards are
   dark and two are light; a solid fill carries its own contrast and reads the
   same on all of them, at 5.1 against white text, so there is one rule here
   instead of seven and nothing to forget when a theme is added. Standing out
   is the point for this one anyway.

   Magenta rather than amber because amber is already lafter's and creodin's
   feat and dcops' fix. */
.tag.security {
    background: #c9316b;
    color: #ffffff;
}
.tag {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
    font-family: inherit;
}

/* ===== GANGDEV THEME ===== */
.theme-gangdev {
    background: #2B5C6E;
    border: 1px solid rgba(168,216,234,0.15);
}
.theme-gangdev .productName { color: #fff; }
.theme-gangdev .productTag { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }
.theme-gangdev .productIcon { box-shadow: 0 0 0 1px rgba(255,255,255,0.2); }
.theme-gangdev .productVersion { color: #a8d8ea; }
.theme-gangdev .productDesc { color: rgba(255,255,255,0.8); font-family: "Nunito", sans-serif; }
.theme-gangdev .changeList { background: #234E5E; }
.theme-gangdev .changeList li { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.08); font-family: "Nunito", sans-serif; }
.theme-gangdev .changeList code { background: rgba(0,0,0,0.2); color: #a8d8ea; }
.theme-gangdev .tag.feat { background: rgba(255,255,255,0.12); color: #a8d8ea; }
.theme-gangdev .tag.fix { background: rgba(255,180,180,0.15); color: #ffb4b4; }
.theme-gangdev .tag.infra { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }

/* ===== CRUST THEME ===== */
.theme-crust {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,255,136,0.15);
}
.theme-crust .productBanner {
    position: relative;
    z-index: 2;
    background: rgba(26, 26, 46, 0.6);
}
.theme-crust .productName {
    font-size: 1.6rem;
    color: #00ff88;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}
.theme-crust .productTag { background: rgba(0,255,136,0.1); color: #00ff88; border: 1px solid rgba(0,255,136,0.25); }
.theme-crust .productVersion { color: #00ff88; text-shadow: 0 0 6px rgba(0,255,136,0.3); font-family: "VT323", monospace; font-size: 0.85rem; }
.theme-crust .productDesc { position: relative; z-index: 2; color: rgba(200,255,220,0.85); font-family: "VT323", monospace; font-size: 0.95rem; letter-spacing: 0.5px; background: rgba(26, 26, 46, 0.6); }
.theme-crust .changeList {
    position: relative;
    z-index: 2;
    background: rgba(26, 26, 46, 0.6);
}
.theme-crust .changeList li {
    color: rgba(200, 255, 220, 0.9);
    border-color: rgba(0, 255, 136, 0.1);
    font-family: "VT323", monospace;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
}
.theme-crust .changeList code { background: rgba(0,255,136,0.1); color: #00ff88; font-family: "VT323", monospace; }
.theme-crust .tag.feat { background: rgba(0,255,136,0.12); color: #00ff88; }
.theme-crust .tag.fix { background: rgba(255,100,100,0.15); color: #ff8888; }
.theme-crust .tag.infra { background: rgba(0,255,136,0.06); color: rgba(0,255,136,0.6); }
.theme-crust .crustMapBg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url('https://gangdev.co/updates/crust-map.png') center/cover no-repeat #1a1a2e;
    image-rendering: pixelated;
    opacity: 0.6;
}

/* ===== CANDOR THEME ===== */
.theme-candor {
    background:
        radial-gradient(400px 200px at 15% 20%, rgba(185,219,242,0.6), transparent 60%),
        radial-gradient(400px 200px at 85% 80%, rgba(230,160,106,0.3), transparent 65%),
        linear-gradient(180deg, #f8fbff 0%, #fff6ee 100%);
    border: 1px solid #d7e2ed;
}
.theme-candor .productName { color: #7b3f22; }
.theme-candor .productTag { background: rgba(185,219,242,0.5); color: #2a3b52; border: 1px solid rgba(185,219,242,0.8); }
.theme-candor .productIcon { border-radius: 0; width: 28px; height: 28px; }
.theme-candor .productVersion { color: #7b3f22; font-family: "Comfortaa", sans-serif; }
.theme-candor .productDesc { color: #3d2a1a; font-family: "Comfortaa", sans-serif; }
.theme-candor .changeList { background: transparent; }
.theme-candor .changeList li { color: #3d2a1a; border-color: rgba(123,63,34,0.1); font-family: "Comfortaa", sans-serif; font-size: 0.82rem; }
.theme-candor .changeList code { background: rgba(123,63,34,0.08); color: #5a2d10; }
.theme-candor .tag.feat { background: rgba(123,63,34,0.1); color: #7b3f22; }
.theme-candor .tag.fix { background: rgba(180,80,80,0.1); color: #8b3030; }
.theme-candor .tag.infra { background: rgba(42,59,82,0.08); color: #2a3b52; }

/* ===== DCOPS THEME ===== */
.theme-dcops {
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    border: 1px solid rgba(11,18,32,0.14);
}
.theme-dcops .productName {
    font-weight: 800;
    letter-spacing: 1px;
}
.theme-dcops .dc { color: #4a0f1a; }
.theme-dcops .ops {
    font-weight: 700;
    background: linear-gradient(180deg, #eddc9a 0%, #bfa14a 52%, #8a6f24 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-dcops .productTag { background: rgba(11,18,32,0.05); color: rgba(11,18,32,0.55); border: 1px solid rgba(11,18,32,0.14); }
.theme-dcops .productVersion { color: #4a0f1a; font-family: "JetBrains Mono", monospace; }
.theme-dcops .productDesc { color: #0b1220; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.theme-dcops .changeList { background: transparent; }
.theme-dcops .changeList li {
    color: #0b1220;
    border-color: rgba(11,18,32,0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
}
.theme-dcops .changeList code { background: rgba(11,18,32,0.05); color: #4a0f1a; font-family: "JetBrains Mono", monospace; }
.theme-dcops .tag.feat { background: rgba(74,15,26,0.08); color: #4a0f1a; }
.theme-dcops .tag.fix { background: rgba(191,161,74,0.12); color: #8a6f24; }
.theme-dcops .tag.infra { background: rgba(11,18,32,0.05); color: rgba(11,18,32,0.5); }

/* ===== LAFTER THEME ===== */
.theme-lafter {
    background:
        radial-gradient(350px 180px at 20% 25%, rgba(139,26,26,0.3), transparent 65%),
        radial-gradient(350px 180px at 80% 75%, rgba(201,168,76,0.2), transparent 70%),
        linear-gradient(180deg, #0c0808 0%, #140d0d 100%);
    border: 1px solid rgba(201,168,76,0.15);
}
.theme-lafter .productBanner {
    border-bottom: 1px solid rgba(201,168,76,0.1);
}
.theme-lafter .productName {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #ffffff 0%, #f0e6dc 40%, #ffe8d6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-lafter .brandLafterA {
    background: linear-gradient(140deg, #c9a84c 0%, #f0b840 50%, #d4a030 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; font-family: inherit;
    display: inline-block;
    animation: laugh-pulse 3.5s ease-in-out infinite;
    animation-delay: 1s;
    -webkit-text-fill-color: transparent;
    will-change: transform, opacity;
}
.theme-lafter .productTag { background: rgba(201,168,76,0.12); color: #c9a84c; border: 1px solid rgba(201,168,76,0.25); }
.theme-lafter .productVersion { color: #c9a84c; font-family: "Indie Flower", cursive; font-size: 0.75rem; }
.theme-lafter .productDesc { color: #e8e0e0; font-family: "Nothing You Could Do", cursive; font-size: 0.9rem; }
.theme-lafter .changeList { background: transparent; }
.theme-lafter .changeList li {
    color: #e8e0e0;
    border-color: rgba(201,168,76,0.1);
    font-family: "Nothing You Could Do", cursive;
    font-size: 0.95rem;
    -webkit-text-stroke: 0.3px currentColor;
}
.theme-lafter .changeList code { background: rgba(201,168,76,0.1); color: #c9a84c; font-family: "JetBrains Mono", monospace; -webkit-text-stroke: 0; }
.theme-lafter .tag.feat { background: rgba(201,168,76,0.12); color: #c9a84c; }
.theme-lafter .tag.fix { background: rgba(255,100,100,0.12); color: #ff9999; }
.theme-lafter .tag.infra { background: rgba(201,168,76,0.06); color: rgba(201,168,76,0.6); }

/* ===== INSPECTRE THEME ===== */
.theme-inspectre {
    background:
        radial-gradient(350px 180px at 25% 25%, rgba(107,107,255,0.25), transparent 65%),
        radial-gradient(350px 180px at 75% 75%, rgba(176,124,255,0.2), transparent 70%),
        linear-gradient(180deg, #0b0b12 0%, #07070c 100%);
    border: 1px solid rgba(107,107,255,0.15);
}
.theme-inspectre .productName {
    font-weight: 800;
    text-transform: lowercase;
    background: linear-gradient(135deg, #6b6bff, #b07cff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-inspectre .productIcon { border-radius: 0; width: 24px; height: 24px; }
.theme-inspectre .productTag { background: rgba(107,107,255,0.12); color: #9d8fff; border: 1px solid rgba(107,107,255,0.25); }
.theme-inspectre .productVersion { color: #9d8fff; font-family: "JetBrains Mono", monospace; }
.theme-inspectre .productDesc { color: rgba(238,240,255,0.85); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82rem; }
.theme-inspectre .changeList { background: transparent; }
.theme-inspectre .changeList li {
    color: rgba(238,240,255,0.85);
    border-color: rgba(107,107,255,0.1);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.82rem;
    font-weight: 500;
}
.theme-inspectre .changeList code { background: rgba(107,107,255,0.1); color: #9d8fff; font-family: "JetBrains Mono", monospace; }
.theme-inspectre .tag.feat { background: rgba(107,107,255,0.12); color: #9d8fff; }
.theme-inspectre .tag.fix { background: rgba(255,100,100,0.12); color: #ff9999; }
.theme-inspectre .tag.infra { background: rgba(107,107,255,0.06); color: rgba(157,143,255,0.6); }

/* ===== CREODIN THEME ===== */
.theme-creodin {
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(63,174,92,0.14), transparent 70%),
        url('https://creodin.com/src/img/hero-ridge.svg'),
        linear-gradient(180deg, #0d3d20 0%, #08200f 100%);
    background-size: cover, cover, cover;
    background-position: center, center, center;
    border: 1px solid rgba(201,146,47,0.18);
}
.theme-creodin .productName {
    font-weight: 700;
    color: #eafbef;
}
.theme-creodin .productTag { background: rgba(201,146,47,0.12); color: #c9922f; border: 1px solid rgba(201,146,47,0.25); }
.theme-creodin .productVersion { color: #c9922f; font-family: "JetBrains Mono", monospace; }
.theme-creodin .productDesc { color: rgba(234,251,239,0.75); font-size: 0.82rem; font-family: "Bricolage Grotesque", -apple-system, sans-serif; }
.theme-creodin .changeList { background: transparent; }
.theme-creodin .changeList li {
    color: rgba(234,251,239,0.85);
    border-color: rgba(201,146,47,0.1);
    font-size: 0.82rem;
}
.theme-creodin .changeList code { background: rgba(201,146,47,0.1); color: #c9922f; font-family: "JetBrains Mono", monospace; }
.theme-creodin .tag.feat { background: rgba(201,146,47,0.12); color: #c9922f; }
.theme-creodin .tag.fix { background: rgba(224,90,90,0.12); color: #e07a7a; }
.theme-creodin .tag.infra { background: rgba(201,146,47,0.06); color: rgba(201,146,47,0.6); }

/* ===== LAUGH-PULSE KEYFRAME (Lafter "a") ===== */
@keyframes laugh-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    10% { transform: scale(1.15) translateY(-2px); opacity: 1; }
    12.6% { transform: scale(1); opacity: 0.85; }
    17.9% { transform: scale(1.1) translateY(-1.5px); opacity: 1; }
    20.5% { transform: scale(1); opacity: 0.8; }
    25.4% { transform: scale(1.06) translateY(-1px); opacity: 0.95; }
    27.8% { transform: scale(1); opacity: 0.75; }
    32.1% { transform: scale(1.03) translateY(-0.5px); opacity: 0.9; }
    34% { transform: scale(1); opacity: 0.7; }
    40% { transform: scale(1); opacity: 1; }
}