/* Cyberpunk meets solarpunk: HUD details (mono labels, chamfered cards, corner brackets,
   scanlines) warmed up with solar gold. Loaded after main.css and world.css on the home page. */

:root {
    --mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
    --gold: #ffd84a;
    --cyan: #5ef6ff;
    --chamfer: 14px;
}

/* -------------------------
   Screen texture: faint scanlines and a soft vignette
-------------------------- */

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
        radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
}

/* -------------------------
   HUD labels
-------------------------- */

.kicker {
    display: block;
    margin-bottom: 14px;
    font: 500 12px/1.2 var(--mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lime);
    text-shadow: 0 0 10px rgba(198, 230, 65, 0.6);
}

.kicker::after {
    content: "_";
    margin-left: 4px;
    animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
    50% { opacity: 0; }
}

/* Logo: the terminal wordmark. Now and then (and on hover) it glitches like the rest of the world */
.logo {
    gap: 10px;
    text-decoration: none;
}

.logo-hex {
    width: 18px;
    height: 21px;
    filter: drop-shadow(0 0 6px rgba(198, 230, 65, 0.7));
}

.logo-word {
    font: 500 15px/1 var(--mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--lime);
    text-shadow: 0 0 12px rgba(198, 230, 65, 0.6);
    position: relative;
    display: inline-block;
}

/* Two colour ghosts of the word, hidden until a glitch tears them apart */
.logo-word::before,
.logo-word::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    text-shadow: none;
    pointer-events: none;
}

.logo-word::before { color: #ff3ea5; }
.logo-word::after { color: #5ef6ff; }

.logo:hover .logo-word,
.logo.is-glitch .logo-word,
body.is-system-error .logo-word {
    animation: logo-jolt 0.6s steps(1) infinite;
}

.logo:hover .logo-word::before,
.logo.is-glitch .logo-word::before,
body.is-system-error .logo-word::before {
    animation: logo-tear-a 0.6s steps(1) infinite;
}

.logo:hover .logo-word::after,
.logo.is-glitch .logo-word::after,
body.is-system-error .logo-word::after {
    animation: logo-tear-b 0.6s steps(1) infinite;
}

.logo:hover .logo-hex,
.logo.is-glitch .logo-hex {
    animation: logo-jolt 0.6s steps(1) infinite reverse;
}

@keyframes logo-jolt {
    0% { transform: translate(0); }
    20% { transform: translate(-1px, 1px) skewX(-6deg); }
    40% { transform: translate(2px, 0); }
    60% { transform: translate(0, -1px) skewX(4deg); }
    80% { transform: translate(-2px, 0); }
}

@keyframes logo-tear-a {
    0% { opacity: 0.9; transform: translate(-3px, 0); clip-path: inset(0 0 62% 0); }
    25% { opacity: 0.9; transform: translate(4px, 0); clip-path: inset(38% 0 30% 0); }
    50% { opacity: 0; }
    75% { opacity: 0.9; transform: translate(-2px, 0); clip-path: inset(70% 0 0 0); }
}

@keyframes logo-tear-b {
    0% { opacity: 0; }
    25% { opacity: 0.85; transform: translate(3px, 0); clip-path: inset(60% 0 8% 0); }
    50% { opacity: 0.85; transform: translate(-4px, 0); clip-path: inset(0 0 55% 0); }
    75% { opacity: 0.85; transform: translate(2px, 0); clip-path: inset(30% 0 40% 0); }
}

/* Small lime text needs a dark backing to stay readable over the bright sky and mountains */
header.ui .logo,
header.ui .site-nav {
    padding: 6px 10px;
    background: rgba(11, 5, 32, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(198, 230, 65, 0.14);
}

@media (max-width: 820px) {
    /* The phone menu is its own dark panel (main.css); keep only the logo's backing */
    header.ui .site-nav {
        padding: 8px;
        border: 0;
    }
}

/* The menu and the scroll hint speak the same terminal voice */
.site-nav a,
.hint {
    font: 500 12px/1.2 var(--mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lime);
    text-shadow: 0 0 10px rgba(198, 230, 65, 0.6);
}

.site-nav a {
    position: relative;
    padding: 8px 10px;
}

/* Menu links glitch on hover, like the logo */
.site-nav a::before,
.site-nav a::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    padding: inherit;
    opacity: 0;
    text-shadow: none;
    pointer-events: none;
}

.site-nav a::before { color: #ff3ea5; }
.site-nav a::after { color: #5ef6ff; }

.site-nav a:hover,
.site-nav a:focus-visible {
    animation: logo-jolt 0.6s steps(1) infinite;
}

.site-nav a:hover::before,
.site-nav a:focus-visible::before {
    animation: logo-tear-a 0.6s steps(1) infinite;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
    animation: logo-tear-b 0.6s steps(1) infinite;
}

.hint {
    opacity: 0.85;
}

/* Headlines: a hint of colour split, like a display slightly out of register */
.zone h1,
.zone-title {
    text-shadow: -1px 0 rgba(255, 60, 170, 0.45), 1px 0 rgba(94, 246, 255, 0.45);
}

/* Mono is only for the HUD: layer labels and the depth gauge. Everything else reads in DM Sans. */
.depth-label {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* -------------------------
   Cards: chamfered glass with neon corner brackets
-------------------------- */

body.is-dark .resource,
body.is-dark .detail-card {
    border: 1px solid rgba(198, 230, 65, 0.22);
    border-radius: 0;
    clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
        rgba(10, 6, 24, 0.35);
}

body.is-dark .resource::before,
body.is-dark .resource::after,
body.is-dark .detail-card::before,
body.is-dark .detail-card::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease;
}

body.is-dark .resource::before,
body.is-dark .detail-card::before {
    top: 6px;
    right: 6px;
    border-top: 2px solid var(--lime);
    border-right: 2px solid var(--lime);
}

body.is-dark .resource::after,
body.is-dark .detail-card::after {
    bottom: 6px;
    left: 6px;
    border-bottom: 2px solid var(--lime);
    border-left: 2px solid var(--lime);
}

body.is-dark .detail-card {
    position: relative;
}

/* Hover: sunlight runs through the glass */
body.is-dark .resource:hover {
    border-color: rgba(255, 216, 74, 0.6);
    background:
        linear-gradient(120deg, rgba(255, 216, 74, 0.16), rgba(198, 230, 65, 0.06) 45%, rgba(94, 246, 255, 0.1)),
        rgba(10, 6, 24, 0.45);
}

body.is-dark .resource:hover::before,
body.is-dark .resource:hover::after {
    width: 28px;
    height: 28px;
    border-color: var(--gold);
}


/* Card text follows the page's type scale: left-aligned like everything else, the title in the
   heading font (Fraunces, like "Contact") over a 14px muted line */
.resource {
    display: block;
    text-align: left;
    font: inherit;
    text-decoration: none;
}

.resource-title,
.detail-title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48;
}

.resource-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.resource-meta {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
}

/* Card text is <span> (button cards may only hold phrasing content), laid out as blocks */
.resource-title,
.resource-meta {
    display: block;
}

/* The chamfer clip-path cuts off anything outside the card, so draw the focus ring inside it */
body.is-dark .resource:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: -5px;
}

/* A card with an app icon: icon on the left, title and line beside it */
.resource.has-icon {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 16px;
    align-items: center;
    text-align: left;
}

.resource.has-icon .resource-icon {
    grid-row: span 2;
    width: 64px;
    height: 64px;
}

/* "Coming soon" as a quiet outlined label */
.resource-meta .pin.is-soon {
    display: inline-block;
    padding: 5px 8px 4px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: none;
}

/* truffy's own wordmark: rounded, lower case, pink dot */
.truffy-mark {
    font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.truffy-mark span {
    color: #ff6fa0;
}

/* External link: a small lime arrow in a square, beside the card title */
.resource-title .ext {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    vertical-align: 2px;
    border: 1px solid rgba(198, 230, 65, 0.7);
    border-radius: 3px;
    color: var(--lime);
    box-shadow: 0 0 8px rgba(198, 230, 65, 0.25);
    transition: background 0.2s ease, color 0.2s ease;
}

.resource-title .ext svg {
    width: 10px;
    height: 10px;
}

.resource:hover .resource-title .ext {
    background: var(--lime);
    color: #1a1030;
}

/* Pinned posts carry a small HUD tag */
.resource-meta .pin {
    margin-right: 8px;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lime);
    text-shadow: 0 0 8px rgba(198, 230, 65, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .kicker::after,
    .logo .logo-word,
    .logo .logo-word::before,
    .logo .logo-word::after,
    .logo .logo-hex,
    .site-nav a,
    .site-nav a::before,
    .site-nav a::after {
        animation: none !important;
    }
}