/*
====================================================================
 SYNTHETIC KIDS — VISUAL ENHANCEMENTS (v1)
====================================================================
 This file is ADDITIVE and fully OPTIONAL. style.css is untouched.

 TO REVERT EVERYTHING:
   Delete the ONE line in functions.php that enqueues
   'synthetic-enhance' and this whole file stops applying.
   (Search functions.php for: synthetic-enhance)

 TO REVERT JUST ONE PIECE:
   Each block below is numbered and independent. Delete or comment
   out any single block; the others keep working.

 DESIGN CONSTRAINTS THIS FILE RESPECTS:
   - No new animations. Everything here is static paint.
   - No new network requests (no images, no fonts).
   - Nothing that hurts readability.
   - Weak-phone performance is IMPROVED, not worsened (see block 1).
====================================================================
*/


/* ==================================================================
   1. PERFORMANCE — drop backdrop-filter on small screens
   ------------------------------------------------------------------
   backdrop-filter: blur() is the single most expensive CSS property
   on a weak GPU: the browser must sample and blur everything behind
   the element every frame. style.css applies it to THREE things:
       #audio-player-container   (fixed, always on screen)
       .member-id-card           (x7 — one per member)
       #back-to-top              (fixed)
   Seven blurred cards plus a fixed player, all sitting over a
   playing background video, is what makes scrolling stutter on a
   budget phone.

   Against a dark background the blur is barely perceptible, so on
   mobile we swap it for a slightly more opaque solid fill. Desktop
   keeps the real glass effect.

   NOTE: this affects SCROLL SMOOTHNESS, not page load. On bad
   service the 28MB background video is the load bottleneck, not CSS.
   ================================================================== */
@media (max-width: 768px) {
    #audio-player-container,
    #back-to-top {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(18, 18, 20, 0.92);
    }

    .member-id-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}


/* ==================================================================
   2. SECTION HEADERS — terminal corner brackets
   ------------------------------------------------------------------
   Frames each "// STATUS::ABOUT //" label in [ ] brackets, so the
   headers read like fields in a terminal readout rather than plain
   headings. Pure pseudo-elements: no markup change, no requests.
   ================================================================== */
.section-header h2,
.section-header h3 {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
}

.section-header h2::before,
.section-header h3::before {
    content: '[';
    color: var(--accent-pink);
    font-weight: 400;
    opacity: 0.65;
}

.section-header h2::after,
.section-header h3::after {
    content: ']';
    color: var(--accent-pink);
    font-weight: 400;
    opacity: 0.65;
}


/* ==================================================================
   3. CONTENT SECTIONS — evidence-photo corner ticks
   ------------------------------------------------------------------
   Small pink marks at the four corners of each panel, like a
   surveillance still or an evidence crop. Uses two pseudo-elements
   with corner-only borders, so it costs nothing to paint.

   .content-section already has position:relative in style.css, so
   these anchor correctly (verified).
   ================================================================== */
.content-section::before,
.content-section::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    opacity: 0.55;
}

/* top-left + top-right */
.content-section::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--accent-pink);
    border-left: 2px solid var(--accent-pink);
}

/* bottom-right + bottom-left */
.content-section::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--accent-pink);
    border-right: 2px solid var(--accent-pink);
}


/* ==================================================================
   4. CONTENT SECTIONS — faint scanline texture
   ------------------------------------------------------------------
   A CRT/monitor texture using a repeating gradient. Deliberately
   very low contrast so body text stays fully legible.

   Why a gradient and not an image: no extra HTTP request, and it
   scales to any panel size. Why static and not animated: a moving
   scanline is a readability and battery cost for no real gain.

   Applied to the panel BACKGROUND (layered over the existing fill),
   not as an overlay element, so it cannot intercept clicks.
   ================================================================== */
.content-section {
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.016) 0px,
        rgba(255, 255, 255, 0.016) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* Keep the texture off the member cards — they already carry a
   gradient fill and a border treatment, so adding lines there reads
   as noise rather than texture. */


/* ==================================================================
   5. TRACK LIST — clearer active/current row
   ------------------------------------------------------------------
   The playing track is currently indicated only by the small EQ
   bars. This adds a solid pink left edge and a faint tint so the
   current row is obvious at a glance while scrolling. Static.
   ================================================================== */
.track-item.active {
    border-left-color: var(--accent-pink);
    background-color: rgba(255, 0, 160, 0.06);
}


/* ==================================================================
   6. SUBTLE DEPTH on the section panels
   ------------------------------------------------------------------
   style.css uses box-shadow: 0 5px 20px rgba(0,0,0,0.2). Adding a
   1px inner highlight along the top edge reads as a lit surface and
   separates the panel from the video behind it. One extra shadow
   layer — negligible cost, no blur.
   ================================================================== */
.content-section {
    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


/* ==================================================================
   7. REDUCED MOTION / HIGH CONTRAST safety
   ------------------------------------------------------------------
   Nothing here animates, so reduced-motion needs no handling. But if
   the user forces high contrast, drop the decorative texture so text
   contrast is never reduced by it.
   ================================================================== */
@media (prefers-contrast: more) {
    .content-section {
        background-image: none;
    }
    .content-section::before,
    .content-section::after {
        opacity: 1;
    }
}