/* Every mockup page carried its own copy of all three of these.
   Written by studio/build-mockup.ps1 - do not edit this file. Change the
   block on the page it is lifted from and rebuild. */

/* ---- fonts ------------------------------------------------------- */
/* Self-hosted, replacing fonts.googleapis.com. Every family these
     pages request - Montserrat, Bebas Neue, Rajdhani - is covered. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/bebasneue-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/bebasneue-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/rajdhani-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/rajdhani-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/rajdhani-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/rajdhani-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---- csm-tearfx -------------------------------------------------- */
[data-tear]:hover { animation: csGlitch 0.7s steps(1,end) infinite !important; cursor: default; }
/* After the rule above, not before: the ticker items carry both attributes and
   the two selectors weigh the same, so this only wins on order. */
[data-tearsplit]:hover { animation: none !important; }
[data-tearsplit]:hover [data-tearword] { animation: csGlitch 0.7s steps(1,end) infinite !important; }

/* The figures - the stats card and the credentials strip under it, on both the
   home and lore pages - never carried data-tear, so they had no hover at all
   and there was nothing for the rules above to change.
   On the cell rather than the number, so a figure and the word beneath it move
   as one thing. :has(> [data-count]) because the design gives those cells no
   attribute to hook and they are bare <div>s otherwise indistinguishable from
   any other wrapper - the count is the only thing that identifies them.
   :not(a) because the artist cards carry data-count as well, and the grid is a
   wrapper whose direct children are exactly those cards - so the bare selector
   matched the grid itself and glitched all 159 at once on any hover inside it.
   Every real figure is a bare <div>; a link is always a card.
   Safe to clip: checked, no cell contains a link. */
:has(> [data-count]:not(a)):hover { animation: csGlitch 0.7s steps(1,end) infinite !important; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  [data-tear]:hover, [data-tearsplit]:hover [data-tearword],
  :has(> [data-count]:not(a)):hover { animation: none !important; }
}

/* ---- csm-navmenu ------------------------------------------------- */
[data-navmenu] { position:relative; display:flex; align-items:center; padding-bottom:22px; margin-bottom:-22px; }
  [data-navpanel] { position:absolute; left:50%; top:100%; transform:translateX(-50%); z-index:60;
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.15s ease; }
  [data-navmenu]:hover > [data-navpanel], [data-navmenu]:focus-within > [data-navpanel] {
    opacity:1; visibility:visible; pointer-events:auto; }
  [data-navplate] { display:block; min-width:168px; background:#fff; padding:2px;
    filter:drop-shadow(4px 5px 0 rgba(0,0,0,0.5)); }
  [data-navplate] > span { display:block; background-color:#0a0a0a;
    background-image:repeating-linear-gradient(180deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 5px),
      linear-gradient(215deg,rgba(var(--csm-a-rgb),0.32),transparent 68%);
    background-repeat:repeat,no-repeat; }
  [data-navitem] { display:block; padding:9px 15px; border-left:3px solid transparent;
    font-family:'Bebas Neue',Montserrat,sans-serif; font-size:15px; letter-spacing:0.13em;
    text-transform:uppercase; color:rgba(255,255,255,0.82); text-decoration:none; white-space:nowrap; }
  [data-navitem] + [data-navitem] { border-top:1px solid rgba(255,255,255,0.13); }
  [data-navitem]:hover, [data-navitem]:focus-visible { color:#fff; border-left-color:var(--csm-a);
    background:linear-gradient(90deg,rgba(var(--csm-a-rgb),0.3),transparent 80%); outline:none; }
  [data-navitem][aria-current="page"] { color:#fff; border-left-color:var(--csm-a); }
  /* The same glitch the nav links above them run, and split the same way:
     filters on the <a>, the transform and the clip-path on the span inside
     it. Put together on the link itself the clip takes the hit area with it
     and the item needs two clicks - which is the bug GLITCH-SPEC.md's
     literal reading caused on the buttons. The moving span also gives up the
     pointer, so the <a> keeps the whole padded row. */
  [data-navitem]:hover { animation: csGlitchShadow 0.7s steps(1,end) infinite; }
  [data-navitem]:hover > .cs-gl-t { animation: csGlitchMove 0.7s steps(1,end) infinite;
    pointer-events:none; }
  @media (prefers-reduced-motion: reduce) { [data-navpanel] { transition:none; }
    [data-navitem]:hover, [data-navitem]:hover > .cs-gl-t { animation:none !important; } }