/* ============================================================
   ivoschi — Card Texture Drop-in (v1)
   Append AFTER the main styles.css. Adds texture treatments to:

   - .card             (homepage showcase)         → Diagonal Hatching
   - .lp-block         (MidiBro / NoteWarp blocks) → Brushed / Streaks
   - .album-card       (Music release covers)      → Paper Texture
   - .streaming-link   (Music platform pills)      → Diagonal Hatching

   Each treatment uses pseudo-elements layered over the existing card,
   so the underlying gradient/border styles are preserved and only the
   texture skin is added on top. No HTML changes required.
   ============================================================ */


/* ============================================================
   1) HOMEPAGE SHOWCASE CARDS — Diagonal Hatching (V3)
   ------------------------------------------------------------
   The main styles.css already adds gradient borders + halo via
   .card::before / .card::after. We re-use ::before for the hatch
   layer, but keep the existing gradient via a separate ::after-like
   layer wired through a wrapping pattern. Simpler: replace ::before
   on .showcase .card so it carries the hatch instead of the gradient
   border, since you preferred V3 (Hatching) over the current Halo.

   Rule of thumb: this drop-in OVERRIDES the v2 Halo treatment on the
   homepage cards. If you want the Halo back, remove this block.
   ============================================================ */
.showcase .card {
  /* keep existing gradient background, just add hatch on top */
}
.showcase .card::before {
  /* override the gradient-border ::before from styles.css */
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.045) 0 1px,
    transparent 1px 8px
  );
  padding: 0;
  -webkit-mask: none;
          mask: none;
  -webkit-mask-composite: source-over;
          mask-composite: add;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  transition: background-image .3s ease, opacity .3s ease;
}
.showcase .card:hover::before {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--accent) 35%, transparent) 0 1px,
    transparent 1px 8px
  );
}
/* keep media + body above the hatch layer */
.showcase .card > * { position: relative; z-index: 2; }


/* ============================================================
   2) LP BLOCKS (MidiBro / NoteWarp) — Brushed / Streaks (V8)
   ------------------------------------------------------------
   Numbered blocks on subpages. Existing styles.css gives them a
   gradient-border ::before + halo ::after; we override ::before
   with horizontal brushed streaks and add a soft diagonal sheen.
   ============================================================ */
.lp-block {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.lp-block::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.035) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.18) 0 2px,
      transparent 2px 9px
    );
  padding: 0;
  -webkit-mask: none;
          mask: none;
  opacity: 1;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  transition: opacity .3s ease;
}
/* diagonal sheen highlight (replaces the halo ::after) */
.lp-block::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    rgba(255,255,255,0.05) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255,255,255,0.025) 100%);
  filter: none;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}
.lp-block:hover::before { opacity: 1; }
.lp-block:hover::after  { opacity: 1; }
.lp-block > * { position: relative; z-index: 2; }
/* keep the lp-counter from styles.css visible (it's on .lp-block__label::before) */


/* ============================================================
   3) ALBUM CARDS (Music) — Paper Texture (V5)
   ------------------------------------------------------------
   Texture sits on the BODY only (the cover art stays clean).
   We layer a noise SVG + soft radial highlights inside the card,
   constrained to the bottom area where the album info lives.
   ============================================================ */
.album-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.album-card::before {
  /* kill the gradient-border halo; replace with paper grain on body region */
  content: '';
  position: absolute;
  /* constrain to the body area below the square cover.
     The cover is aspect-ratio 1/1 of the full card width;
     the body is everything below it. */
  left: 0; right: 0; bottom: 0; top: auto;
  height: 30%;
  border-radius: 0 0 var(--radius) var(--radius);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.03) 0%, transparent 60%);
  -webkit-mask: none;
          mask: none;
  padding: 0;
  opacity: 1;
  pointer-events: none;
  z-index: 3;
  transition: opacity .3s ease;
}
.album-card::after {
  /* SVG noise grain */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  border-radius: 0 0 var(--radius) var(--radius);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  filter: none;
  inset: auto 0 0 0;
  pointer-events: none;
  z-index: 3;
}
/* make sure the album info sits above the texture */
.album-info { position: relative; z-index: 4; }


/* ============================================================
   4) STREAMING LINKS (Music) — Diagonal Hatching (V3)
   ------------------------------------------------------------
   Pill-shaped links to Spotify / Apple Music / etc.
   Adds subtle hatch lines inside the pill, with accent tint on hover.
   ============================================================ */
.streaming-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.streaming-link::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.05) 0 1px,
    transparent 1px 8px
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  transition: background-image .25s ease;
}
.streaming-link:hover::before {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--accent) 40%, transparent) 0 1px,
    transparent 1px 8px
  );
}
.streaming-link > * { position: relative; z-index: 2; }
/* the link text itself isn't wrapped in a span — make sure its
   text node sits above by giving the link a stacking context */
.streaming-link { z-index: 0; }


/* ============================================================
   GENRE TAGS — light hatch to match (optional, very subtle)
   ============================================================ */
.genre-tag {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.genre-tag::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.03) 0 1px,
    transparent 1px 8px
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}