/* Themed banners for project detail pages (work.html?type=projects&id=...).
   Each banner has fixed colors so it looks the same in light and dark mode; the rest of the page keeps the site theme. */

body[data-page="detail"] { overflow-x: clip; }
.proj-hero { position: relative; }
.proj-art { display: none; }

body[data-project] .proj-hero {
    --gutter: 16px;
    isolation: isolate;
    overflow: hidden;
    margin: 0 calc(50% - 50vw) 40px;
    padding: 52px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 56px;
    background: var(--ph-bg);
    color: var(--ph-ink);
}
@media (min-width: 720px) { body[data-project] .proj-hero { --gutter: 32px; padding-top: 64px; padding-bottom: 68px; } }
body[data-project] .proj-art { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
body[data-project] .proj-hero .back { color: var(--ph-muted); }
body[data-project] .proj-hero .back:hover { color: var(--ph-accent); }
body[data-project] .proj-hero h1 { font-family: var(--ph-font, var(--display)); color: var(--ph-title, var(--ph-ink)); }
body[data-project] .proj-hero .lede { color: var(--ph-muted); }
body[data-project] .proj-hero .btn { border-color: var(--ph-line); color: var(--ph-ink); background: transparent; }
body[data-project] .proj-hero .btn:hover { border-color: var(--ph-accent); color: var(--ph-accent); }
body[data-project] .proj-hero .btn.solid { background: var(--ph-accent); border-color: var(--ph-accent); color: var(--ph-accent-ink); }
body[data-project] .proj-hero .btn.solid:hover { filter: brightness(1.08); color: var(--ph-accent-ink); }
body[data-project] .meta-grid { border-top-color: var(--accent); }

/* ---------- LeKwarta: basketball arena ---------- */
body[data-project="lekwarta"] { --accent: #6b35a8; --accent-ink: #fff; }
body[data-project="lekwarta"] .proj-hero {
    --ph-bg: #120a1c; --ph-ink: #f5efe0; --ph-muted: #c9b8e6; --ph-line: #4a3466;
    --ph-accent: #fdb927; --ph-accent-ink: #1a1026; --ph-title: #fdb927;
    --ph-font: 'Roboto Condensed', 'Inter', sans-serif;
}
body[data-project="lekwarta"] .proj-hero h1 { text-transform: uppercase; font-weight: 700; letter-spacing: .01em; }
body[data-project="lekwarta"] .proj-art {
    background:
        radial-gradient(circle at 80% 50%, transparent 0 86px, rgba(253,185,39,.4) 87px 89px, transparent 90px 150px, rgba(253,185,39,.18) 151px 152px, transparent 153px),
        linear-gradient(90deg, transparent calc(80% - 1px), rgba(253,185,39,.4) calc(80% - 1px) calc(80% + 1px), transparent calc(80% + 1px)),
        radial-gradient(ellipse at 100% 50%, rgba(123,69,184,.55), transparent 60%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 64px);
}

/* ---------- Malayan Reserves: parking lot ---------- */
body[data-project="malayan-reserves"] { --accent: #1449b8; --accent-ink: #fff; }
body[data-project="malayan-reserves"] .proj-hero {
    --ph-bg: #2c3139; --ph-ink: #ffffff; --ph-muted: #c7ccd4; --ph-line: #5b626d;
    --ph-accent: #ffc72c; --ph-accent-ink: #0b1f4d;
}
body[data-project="malayan-reserves"] .proj-hero h1::before {
    content: "P" / ""; display: inline-grid; place-items: center; width: .95em; height: .95em; margin-right: .28em;
    background: #1449b8; color: #fff; border-radius: .14em; font-size: .78em; vertical-align: .1em; font-weight: 700;
}
body[data-project="malayan-reserves"] .proj-art {
    background:
        repeating-linear-gradient(90deg, #ffc72c 0 46px, transparent 46px 80px) left 0 bottom 28px / 100% 4px no-repeat,
        repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 3px, transparent 3px 96px) right 0 top 0 / 46% 64px no-repeat,
        linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) right 0 top 64px / 46% 3px no-repeat,
        radial-gradient(ellipse at 88% 10%, rgba(255,199,44,.14), transparent 55%),
        radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0 / 7px 7px;
}

/* ---------- Network Labs: router terminal ---------- */
body[data-project="network-labs"] { --accent: #0d9488; --accent-ink: #fff; }
body[data-project="network-labs"] .proj-hero {
    --ph-bg: #0b1220; --ph-ink: #e2e8f0; --ph-muted: #94a3b8; --ph-line: #334155;
    --ph-accent: #2dd4bf; --ph-accent-ink: #042f2e; --ph-font: 'JetBrains Mono', ui-monospace, monospace;
}
body[data-project="network-labs"] .proj-hero h1 { font-weight: 700; letter-spacing: -.02em; }
body[data-project="network-labs"] .proj-hero h1::before { content: "R1#" / ""; color: #2dd4bf; margin-right: .35em; font-weight: 500; }
body[data-project="network-labs"] .proj-hero h1::after {
    content: ""; display: inline-block; width: .5em; height: .9em; margin-left: .15em; vertical-align: -.08em;
    background: #2dd4bf; animation: blink 1.1s steps(1) infinite;
}
body[data-project="network-labs"] .proj-art {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='280' viewBox='0 0 560 280'%3E%3Cg stroke='%232dd4bf' stroke-opacity='.45' stroke-width='1.5' fill='none'%3E%3Cpath d='M70 210 L190 130 L310 180 L430 80 L500 170 M190 130 L250 50 M310 180 L370 245 M430 80 L520 40'/%3E%3C/g%3E%3Cg stroke='%232dd4bf' stroke-opacity='.25' stroke-width='1' stroke-dasharray='4 5' fill='none'%3E%3Cpath d='M250 50 L430 80 M70 210 L310 180'/%3E%3C/g%3E%3Cg fill='%230b1220' stroke='%232dd4bf' stroke-width='2'%3E%3Ccircle cx='70' cy='210' r='9'/%3E%3Ccircle cx='190' cy='130' r='13'/%3E%3Ccircle cx='310' cy='180' r='13'/%3E%3Ccircle cx='430' cy='80' r='13'/%3E%3Ccircle cx='500' cy='170' r='9'/%3E%3Ccircle cx='250' cy='50' r='9'/%3E%3Ccircle cx='370' cy='245' r='9'/%3E%3Ccircle cx='520' cy='40' r='7'/%3E%3C/g%3E%3Cg fill='%232dd4bf'%3E%3Ccircle cx='190' cy='130' r='4'/%3E%3Ccircle cx='310' cy='180' r='4'/%3E%3Ccircle cx='430' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E") right 4% center / min(560px, 60%) auto no-repeat,
        radial-gradient(rgba(148,163,184,.22) 1.2px, transparent 1.4px) 0 0 / 24px 24px;
}

/* ---------- Pong Reimagined: neon arcade ---------- */
body[data-project="pong-reimagined"] { --accent: #c026d3; --accent-ink: #fff; }
body[data-project="pong-reimagined"] .proj-hero {
    --ph-bg: #0b0618; --ph-ink: #f5f3ff; --ph-muted: #c4b5fd; --ph-line: #4c1d95;
    --ph-accent: #22d3ee; --ph-accent-ink: #04121a; --ph-font: 'Press Start 2P', monospace;
}
body[data-project="pong-reimagined"] .proj-hero h1 {
    font-size: clamp(22px, 4.2vw, 40px); line-height: 1.45; letter-spacing: 0; font-weight: 400;
    text-shadow: 3px 3px 0 #ff2e88, 0 0 18px rgba(255,46,136,.45);
}
body[data-project="pong-reimagined"] .proj-art {
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(180deg, rgba(255,255,255,.4) 0 12px, transparent 12px 24px) 78% 0 / 4px 100% no-repeat,
        linear-gradient(#22d3ee, #22d3ee) 64% 40% / 8px 56px no-repeat,
        linear-gradient(#ff2e88, #ff2e88) 93% 62% / 8px 56px no-repeat,
        radial-gradient(ellipse at 80% 120%, rgba(255,46,136,.35), transparent 55%);
}
body[data-project="pong-reimagined"] .proj-art::after {
    content: ""; position: absolute; width: 12px; height: 12px; background: #fff; box-shadow: 0 0 12px #fff;
    left: 66%; top: 30%; animation: pong-ball 3.2s linear infinite alternate;
}
@keyframes pong-ball {
    0% { left: 65%; top: 28%; } 25% { left: 78%; top: 70%; } 50% { left: 91%; top: 46%; }
    75% { left: 80%; top: 18%; } 100% { left: 66%; top: 58%; }
}

/* ---------- CLIR Book A Seat: library shelf ---------- */
body[data-project="clir-book-a-seat"] { --accent: #b8141d; --accent-ink: #fff; }
body[data-project="clir-book-a-seat"] .proj-hero {
    --ph-bg: #14214d; --ph-ink: #ffffff; --ph-muted: #c8cfe6; --ph-line: #3a4a85;
    --ph-accent: #e4202b; --ph-accent-ink: #ffffff; --ph-font: 'Libre Baskerville', Georgia, serif;
    padding-bottom: 104px;
}
body[data-project="clir-book-a-seat"] .proj-hero h1 { font-weight: 700; letter-spacing: -.01em; }
body[data-project="clir-book-a-seat"] .proj-art {
    background:
        linear-gradient(#8a5a35, #6b4426) left 0 bottom 0 / 100% 10px no-repeat,
        repeating-linear-gradient(90deg,
            #e4202b 0 16px, transparent 16px 19px, #f4d58d 19px 29px, transparent 29px 31px, #2f6f4f 31px 49px,
            transparent 49px 52px, #f4f5f9 52px 60px, transparent 60px 62px, #7c5cd6 62px 76px, transparent 76px 79px,
            #e98a3a 79px 91px, transparent 91px 93px, #4b6fd6 93px 111px, transparent 111px 118px)
            left 0 bottom 10px / 100% 46px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 140px, rgba(255,255,255,.04) 140px 141px),
        radial-gradient(ellipse at 85% 0%, rgba(228,32,43,.25), transparent 55%);
}

/* ---------- Cipher Lab: ciphertext terminal ---------- */
body[data-project="cipher-lab"] { --accent: #15803d; --accent-ink: #fff; }
body[data-project="cipher-lab"] .proj-hero {
    --ph-bg: #050807; --ph-ink: #dcfce7; --ph-muted: #86efac; --ph-line: #14532d;
    --ph-accent: #4ade80; --ph-accent-ink: #052e16; --ph-font: 'JetBrains Mono', ui-monospace, monospace; --ph-title: #4ade80;
}
body[data-project="cipher-lab"] .proj-hero h1 { font-weight: 700; letter-spacing: -.02em; text-shadow: 0 0 18px rgba(74,222,128,.35); }
body[data-project="cipher-lab"] .proj-art {
    background:
        linear-gradient(90deg, rgba(5,8,7,.92) 0%, rgba(5,8,7,.75) 45%, rgba(5,8,7,.15) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='280' viewBox='0 0 900 280'%3E%3Cg font-family='monospace' font-size='15' fill='%234ade80' fill-opacity='.13' letter-spacing='3'%3E%3Ctext x='0' y='22'%3E8IX4 A4Q M489 ZJOJ7Y EKC BR4Y1 2IXGCI NQ1T06 W80OVB KU8GN SHE44 WE0%3C/text%3E%3Ctext x='0' y='52'%3EBS10 CCY 9R6PC AEG8C 0SQJ VUX YY37 9G6R1P 1Q7T9 A0UBY DV3W R5BDB%3C/text%3E%3Ctext x='0' y='82'%3EQ3TUL LUXQT GBIT6O PUL1G UVO KFVN2R HC7M LRVFW 0S7R W0S00C JMA461 C37S%3C/text%3E%3Ctext x='0' y='112'%3EOESHP C6M DA4HK6 PB780 HVI 84DWO H8HK RIA5 DRPR77 D4UADI HDE CF665U%3C/text%3E%3Ctext x='0' y='142'%3EUEWY TXQMV1 I9A FLCX38 C1DX5U 03BPN8 E1O1I UX9 H3H7Y U8G 4JP C7FGYL%3C/text%3E%3Ctext x='0' y='172'%3EVHB 4ST C67 G9G9 9UL PLP ZQXZW9 FY6P0K 74JZJK 547 LIRMJ6 O8S0R%3C/text%3E%3Ctext x='0' y='202'%3ETBR4 MLXPU4 04N3 4EZ 3OP NQP QILC KCUL1 FHF SCW2V BVV Y5EN5Z%3C/text%3E%3Ctext x='0' y='232'%3E8UHR 1H2 G7XX2 QGV87 56W SLJ X3HG V09T 34TL GL9 WGRRYD C46R%3C/text%3E%3Ctext x='0' y='262'%3E6WVZ 8EW5HJ GHHLM ZIJZM8 LMQX B20YU 57T4B AGO5 73MM C62H JI3FD XO6%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0 / 900px auto repeat;
}

/* ---------- Dark-mode accents (links and buttons below the banner) ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body[data-project="lekwarta"] { --accent: #c39af5; --accent-ink: #1a1026; }
    :root:not([data-theme="light"]) body[data-project="malayan-reserves"] { --accent: #6b9bff; --accent-ink: #0b1f4d; }
    :root:not([data-theme="light"]) body[data-project="network-labs"] { --accent: #2dd4bf; --accent-ink: #042f2e; }
    :root:not([data-theme="light"]) body[data-project="pong-reimagined"] { --accent: #f472b6; --accent-ink: #2a0718; }
    :root:not([data-theme="light"]) body[data-project="clir-book-a-seat"] { --accent: #f87171; --accent-ink: #2a0606; }
    :root:not([data-theme="light"]) body[data-project="cipher-lab"] { --accent: #4ade80; --accent-ink: #052e16; }
}
:root[data-theme="dark"] body[data-project="lekwarta"] { --accent: #c39af5; --accent-ink: #1a1026; }
:root[data-theme="dark"] body[data-project="malayan-reserves"] { --accent: #6b9bff; --accent-ink: #0b1f4d; }
:root[data-theme="dark"] body[data-project="network-labs"] { --accent: #2dd4bf; --accent-ink: #042f2e; }
:root[data-theme="dark"] body[data-project="pong-reimagined"] { --accent: #f472b6; --accent-ink: #2a0718; }
:root[data-theme="dark"] body[data-project="clir-book-a-seat"] { --accent: #f87171; --accent-ink: #2a0606; }
:root[data-theme="dark"] body[data-project="cipher-lab"] { --accent: #4ade80; --accent-ink: #052e16; }

@media (max-width: 720px) {
    body[data-project="network-labs"] .proj-art { background-size: 90% auto, 24px 24px; background-position: right -40px bottom -30px, 0 0; opacity: .6; }
    body[data-project="lekwarta"] .proj-art, body[data-project="pong-reimagined"] .proj-art { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
    body[data-project="pong-reimagined"] .proj-art::after { animation: none; }
    body[data-project="network-labs"] .proj-hero h1::after { animation: none; }
}