/*
 * ============================================================
 * BACKGROUND: INTERACTIVE GERMAN PATTERN GRID
 * The full-screen mouse-proximity effect layer.
 * ============================================================
 */

/* No backdrop-filter here (removed) — this was a `position: fixed`,
   full-VIEWPORT (100vw x 100vh) blur layer mounted for the entire time the
   page is open, on top of a `background-color: transparent`. A full-screen
   backdrop-filter is the single most expensive shape this property can
   take: the compositor has to blur the entire framebuffer on every frame
   it recomposites, continuously, for as long as the page is loaded — one
   of the two biggest sources of the stutter/CPU-GPU spikes reported on
   integrated-graphics laptops (the other was the hero character's own
   backdrop, fixed in sections.css). With a transparent background there
   was nothing here for the blur to visibly soften in the first place
   (it blurs whatever's painted BEHIND this layer, not the grid items that
   are its own children — see .pattern-wrapper below), so removing it
   costs no visible difference while eliminating a continuous full-screen
   compositor cost entirely. */
.mouse-grid-bg {
    position: fixed;
    /* `inset: 0` instead of `width: 100vw; height: 100vh` — `vw` is defined
       as 1% of the viewport width INCLUDING the vertical scrollbar's own
       width, which on a page tall enough to have one makes this fixed
       layer a few pixels wider than the actual visible viewport, adding a
       small horizontal scroll capability to the whole page (its own
       `overflow: hidden` only clips its children, not its own box). `inset:
       0` pins all four edges to the real viewport instead, avoiding the
       scrollbar-width mismatch entirely. */
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: transparent;
    overflow: hidden;
}

/* Each flag / text item wrapper */
.pattern-wrapper {
    position: absolute;
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* German flag element */
.de-flag {
    background: linear-gradient(
        to bottom,
        #1D1D1F 33.3%,
        #E3000F 33.3%, #E3000F 66.6%,
        #FFCE00 66.6%
    );
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 1.5px;
    filter: grayscale(100%) contrast(40%) brightness(130%);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: filter 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease, opacity 0.45s ease;
    will-change: opacity, filter;
}
.de-flag.hovered {
    filter: grayscale(0%) saturate(150%) contrast(110%) brightness(100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    border-color: rgba(255, 255, 255, 0.8);
}

/* German text / symbol element */
.de-text {
    font-family: var(--font-display-fa), var(--font-body);
    font-weight: 700;
    color: var(--ink);
    transition: color 0.45s ease, opacity 0.45s ease, text-shadow 0.45s ease;
    will-change: opacity, color;
}
.de-text.hovered {
    color: var(--accent-gold);
    text-shadow: 0 2px 10px rgba(93, 13, 24, 0.3);
}