/* =========================================================
   LEERER DUNST - theme layer (patch 2)

   Loaded AFTER style.css by includes/header.php. It only adds and overrides;
   style.css is untouched. It is not loaded on the ARG terminal page, which
   keeps exactly the look it had. To switch the whole layer off, remove its
   <link> in includes/header.php.

   Tuning knobs: --type-boost (text size), --bracket (frame corner length).
========================================================= */

:root {
    /* Per-release colour. Used for glows, borders, corner brackets and
       heading rules ONLY; text always stays phosphor green, so contrast never
       depends on a cover. Defaults reproduce the original greens exactly. */
    --accent: var(--primary-color);
    --accent-dim: var(--secondary-color);
    --accent-glow: rgba(0, 255, 65, 0.55);

    --type-boost: 1;            /* e.g. 1.15 if VT323 looks small once installed */
}

/* =========================================================
   1. TYPE SCALE
   Before: h1/h2/h3 all got the same glow and dashed underline, so nothing
   led. Now the wordmark and release titles are loud, section headings are
   calm, and small labels are tracked out.
========================================================= */
body {
    font-size: calc(1.1em * var(--type-boost));
}

h1, h2, h3, h4 {
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;   /* long unbroken labels must wrap, not clip, on narrow phones */
}

/* Wordmark / hero: the loudest thing on the page. */
.hero-section h1 {
    font-size: clamp(2.4rem, 9vw, 4.2rem);
    letter-spacing: 0.08em;
    line-height: 1.05;
    margin-bottom: 0.2em;
    padding-bottom: 0.25em;
    border-bottom: 0;
    background: linear-gradient(90deg, var(--accent), transparent 85%) left bottom / 100% 1px no-repeat;
}
.retro-header .site-title-text {
    letter-spacing: 0.06em;
}

/* Page titles: the dashed rule becomes a rule that fades out. */
h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.05rem);
    line-height: 1.2;
    padding-bottom: 0.35em;
    border-bottom: 0;
    background: linear-gradient(90deg, var(--accent), transparent 85%) left bottom / 100% 1px no-repeat;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.45);
}

/* Section / entry headings: quieter. */
h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    border-bottom: 0;
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.35);
}

/* Small labels. */
h4 {
    font-size: 1rem;
    letter-spacing: 0.12em;
}
.post-date,
.release-info {
    letter-spacing: 0.04em;
}
.post-date {
    font-size: 0.9em;
}
.album-title {
    font-size: 1.2rem;
    letter-spacing: 0.03em;
}

/* Comfortable line length for running text. */
.post-content,
.contact-info,
.content-wrapper > p {
    max-width: 72ch;
}

/* =========================================================
   2. PER-RELEASE ACCENT
   The colour table is generated from the cover art at the bottom of this
   file. Everything below just consumes --accent / --accent-dim / --accent-glow.
========================================================= */
.content-wrapper {
    border-color: var(--accent-dim);
    box-shadow:
        0 0 10px var(--accent-dim),
        0 0 20px var(--accent-dim) inset;
}

/* Gallery covers pick up their colour at rest and light up on hover. */
.album-card-link img.retro-frame {
    border-color: var(--accent);
    box-shadow: 0 0 5px var(--accent);
    transition: box-shadow 0.25s ease;
}
.album-card-link:hover img.retro-frame,
.album-card-link:focus-visible img.retro-frame {
    box-shadow: 0 0 5px var(--accent), 0 0 18px var(--accent-glow);
}

/* The release page frames the cover with a larger glow. */
.album-detail-view img.retro-frame {
    border-color: var(--accent);
    box-shadow: 0 0 5px var(--accent), 0 0 26px var(--accent-glow);
}

/* =========================================================
   3. EFFECTS ON EVENTS INSTEAD OF ALL THE TIME
   Idle state stays calm (faint flicker, slow glow). The bigger effects are
   triggered: power-on (first visit of a session), an occasional tracking
   pass and wordmark flicker (see assets/js/effects.js), and a glitch on hover.
   prefers-reduced-motion is already handled in style.css (animation: none).
========================================================= */

/* Idle: slower, softer panel glow, tinted by the release. */
.content-wrapper::after {
    box-shadow: 0 0 15px var(--accent-glow);
    animation: vhs-glow 4s ease-in-out infinite alternate;
}

/* Idle: no constant tracking bar or wordmark flicker. (The heartbeat on
   .flicker-text is a deliberate motif and is left as it was.) */
body::after {
    animation: none;
}
.retro-header .site-title-text,
.retro-footer .footer-title {
    animation: none;
}

/* Occasional tracking pass: class toggled by effects.js. */
html.tracking-pass body::after {
    animation: tracking-pass 1.5s ease-out 1 both;
}
@keyframes tracking-pass {
    0%   { opacity: 0;    transform: translateY(-4vh); }
    12%  { opacity: 0.22; }
    60%  { opacity: 0.12; }
    100% { opacity: 0;    transform: translateY(104vh); }
}

/* Occasional wordmark flicker. */
.retro-header .site-title-text.is-flickering {
    animation: flicker-burst 0.8s steps(1, end) 1;
}
@keyframes flicker-burst {
    0%   { opacity: 1; }
    10%  { opacity: 0.35; }
    18%  { opacity: 1; }
    30%  { opacity: 0.5; }
    38%  { opacity: 0.9; }
    52%  { opacity: 0.25; }
    60%  { opacity: 1; }
    100% { opacity: 1; }
}

/* Power-on, once per browser session (class set by a tiny script in the head). */
html.power-on .retro-header,
html.power-on .retro-footer {
    animation: power-flicker 0.9s steps(1, end) 1 both;
}
html.power-on .content-wrapper {
    transform-origin: 50% 12%;
    animation: crt-on 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 1 both;
}
@keyframes power-flicker {
    0%   { opacity: 0; }
    15%  { opacity: 0.7; }
    22%  { opacity: 0.1; }
    40%  { opacity: 0.9; }
    52%  { opacity: 0.4; }
    70%  { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes crt-on {
    0%   { opacity: 0; transform: scale(0.6, 0.004); }
    30%  { opacity: 1; transform: scale(1, 0.004); }
    60%  { transform: scale(1, 1.04); }
    100% { transform: scale(1, 1); }
}

/* Glitch on hover: nav links jitter, covers slice. One shot per hover. */
.retro-header nav a:not(.retro-button) {
    display: inline-block;
}
.retro-header nav a:not(.retro-button):hover {
    animation: glitch-jitter 0.26s steps(1, end) 1;
}
@keyframes glitch-jitter {
    0%   { transform: translateX(2px); }
    35%  { transform: translateX(-2px); }
    70%  { transform: translateX(1px); }
    100% { transform: none; }
}
.album-card-link:hover .album-cover-gallery img {
    animation: glitch-slice 0.3s steps(1, end) 1;
}
@keyframes glitch-slice {
    0%   { clip-path: inset(0 0 0 0);     transform: translate(0, 0); }
    20%  { clip-path: inset(12% 0 58% 0); transform: translate(-3px, 0); }
    40%  { clip-path: inset(52% 0 18% 0); transform: translate(3px, 0); }
    60%  { clip-path: inset(30% 0 40% 0); transform: translate(-2px, 0); }
    80%  { clip-path: inset(0 0 0 0);     transform: translate(1px, 0); }
    100% { clip-path: inset(0 0 0 0);     transform: translate(0, 0); }
}

/* Page-to-page transition (cross-document View Transitions; browsers
   without support simply navigate as before). */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
    ::view-transition-old(root) {
        animation: vt-out 0.16s ease-in both;
    }
    ::view-transition-new(root) {
        animation: vt-in 0.3s ease-out both;
    }
}
@keyframes vt-out {
    to { opacity: 0; filter: brightness(1.6); }
}
@keyframes vt-in {
    from { opacity: 0; filter: brightness(1.6); }
}

/* =========================================================
   4. SURFACE
========================================================= */

/* A faint phosphor haze high on the screen plus a fixed layer of static
   grain, behind everything. Pure black was flat next to the glow. The grain
   is generated at the bottom of this file. */
html::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    background:
        var(--grain),
        radial-gradient(ellipse 75% 55% at 50% 10%, rgba(0, 255, 65, 0.065), transparent 72%);
}

/* Corner brackets instead of a uniform glowing box. */
.content-wrapper::before,
:is(section, div, form, article).retro-frame:not(.message-box)::before {
    content: "";
    position: absolute;
    top: -1px; right: -1px; bottom: -1px; left: -1px;
    pointer-events: none;
    background:
        linear-gradient(var(--accent), var(--accent)) top left / var(--b) 2px,
        linear-gradient(var(--accent), var(--accent)) top left / 2px var(--b),
        linear-gradient(var(--accent), var(--accent)) top right / var(--b) 2px,
        linear-gradient(var(--accent), var(--accent)) top right / 2px var(--b),
        linear-gradient(var(--accent), var(--accent)) bottom left / var(--b) 2px,
        linear-gradient(var(--accent), var(--accent)) bottom left / 2px var(--b),
        linear-gradient(var(--accent), var(--accent)) bottom right / var(--b) 2px,
        linear-gradient(var(--accent), var(--accent)) bottom right / 2px var(--b);
    background-repeat: no-repeat;
}
.content-wrapper::before {
    --b: 24px;
}
:is(section, div, form, article).retro-frame:not(.message-box) {
    position: relative;
}
:is(section, div, form, article).retro-frame:not(.message-box)::before {
    --b: 12px;
}

/* The header and footer rules used to be 900px wide, the panel 942px. Now
   all three share one width and one inner edge. */
.retro-header-inner {
    max-width: 942px;
    padding-left: 21px;
    padding-right: 21px;
}
.retro-footer-inner {
    box-sizing: border-box;
    max-width: 942px;
    padding-left: 21px;
    padding-right: 21px;
}

/* =========================================================
   GENERATED: grain texture and per-release accents
   Accents were measured from the cover art (dominant vivid hue, lifted to a
   consistent lightness). Low-colour covers (Emptiness, Final Rest, Heartbeat,
   Minduta) deliberately keep the phosphor green. To add a release, copy a
   block and change the cover file name; without one it stays green.
========================================================= */
:root {
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 1  0 0 0 0 0.25  0.15 0 0 0 -0.055'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.album-card-link:has(img[src*="/FEMA."]),
.content-wrapper:has(.album-detail-view img[src*="/FEMA."]) {
    --accent: #4e5ada;
    --accent-dim: #2b3278;
    --accent-glow: rgba(78, 90, 218, 0.55);
}

.album-card-link:has(img[src*="/Flosvirus."]),
.content-wrapper:has(.album-detail-view img[src*="/Flosvirus."]) {
    --accent: #a0db4d;
    --accent-dim: #58782a;
    --accent-glow: rgba(160, 219, 77, 0.55);
}

.album-card-link:has(img[src*="/KillYou."]),
.content-wrapper:has(.album-detail-view img[src*="/KillYou."]) {
    --accent: #e55042;
    --accent-dim: #7e2c24;
    --accent-glow: rgba(229, 80, 66, 0.55);
}

.album-card-link:has(img[src*="/KillYouStayDead."]),
.content-wrapper:has(.album-detail-view img[src*="/KillYouStayDead."]) {
    --accent: #df5649;
    --accent-dim: #7b2f28;
    --accent-glow: rgba(223, 86, 73, 0.55);
}

.album-card-link:has(img[src*="/Meadow."]),
.content-wrapper:has(.album-detail-view img[src*="/Meadow."]) {
    --accent: #2e83fa;
    --accent-dim: #19488a;
    --accent-glow: rgba(46, 131, 250, 0.55);
}

.album-card-link:has(img[src*="/Noted."]),
.content-wrapper:has(.album-detail-view img[src*="/Noted."]) {
    --accent: #fa3f2e;
    --accent-dim: #8a2319;
    --accent-glow: rgba(250, 63, 46, 0.55);
}

.album-card-link:has(img[src*="/Stonebreak."]),
.content-wrapper:has(.album-detail-view img[src*="/Stonebreak."]) {
    --accent: #e45244;
    --accent-dim: #7d2d25;
    --accent-glow: rgba(228, 82, 68, 0.55);
}

.album-card-link:has(img[src*="/Stonebreak23."]),
.content-wrapper:has(.album-detail-view img[src*="/Stonebreak23."]) {
    --accent: #e35244;
    --accent-dim: #7d2d25;
    --accent-glow: rgba(227, 82, 68, 0.55);
}

.album-card-link:has(img[src*="/TheDeadRise."]),
.content-wrapper:has(.album-detail-view img[src*="/TheDeadRise."]) {
    --accent: #f13747;
    --accent-dim: #851e27;
    --accent-glow: rgba(241, 55, 71, 0.55);
}

.album-card-link:has(img[src*="/WarningSign."]),
.content-wrapper:has(.album-detail-view img[src*="/WarningSign."]) {
    --accent: #32c5f6;
    --accent-dim: #1c6c87;
    --accent-glow: rgba(50, 197, 246, 0.55);
}