/* ==========================================================================
   Memphis Bundle — CSS Effects
   Vanilla Breeze · Memphis Group (1981–88)
   Decorative effects using the Memphis pattern system.
   Opt-in via data-effect attributes or automatic on VB elements.
   ========================================================================== */

@layer bundle-effects {

  /* ------------------------------------------------------------------
     data-effect~="memphis-zigzag" — Zigzag pattern band
     16px band with zigzag pattern + bold black borders
     ------------------------------------------------------------------ */

  [data-effect~="memphis-zigzag"] {
    height: 16px;
    background: var(--m-pat-zigzag-b);
    background-size: 32px 16px;
    border-block: 2.5px solid var(--m-black);
  }

  [data-effect~="memphis-zigzag"][data-color="yellow"] {
    background: var(--m-pat-zigzag-y);
    background-size: 32px 16px;
  }


  /* ------------------------------------------------------------------
     data-effect~="memphis-dots" — Polka dot pattern band
     24px band with dots pattern + borders
     ------------------------------------------------------------------ */

  [data-effect~="memphis-dots"] {
    height: 24px;
    background: var(--m-pat-dots-r);
    background-color: var(--m-cream);
    border-block: 2.5px solid var(--m-black);
  }

  [data-effect~="memphis-dots"][data-color="yellow"] {
    background: var(--m-pat-dots-y);
    background-color: var(--m-cream);
  }

  [data-effect~="memphis-dots"][data-color="blue"] {
    background: var(--m-pat-dots-b);
    background-color: var(--m-cream);
  }


  /* ------------------------------------------------------------------
     data-effect~="memphis-stripe" — Diagonal stripe band
     12px band with diagonal stripes + borders
     ------------------------------------------------------------------ */

  [data-effect~="memphis-stripe"] {
    height: 12px;
    background: var(--m-pat-stripe-b);
    border-block: 2.5px solid var(--m-black);
  }

  [data-effect~="memphis-stripe"][data-color="pink"] {
    background: var(--m-pat-stripe-p);
  }

  [data-effect~="memphis-stripe"][data-color="teal"] {
    background: var(--m-pat-stripe-t);
  }


  /* ------------------------------------------------------------------
     data-effect~="memphis-confetti" — Confetti pattern overlay
     Multicolour dots scattered over the background
     ------------------------------------------------------------------ */

  [data-effect~="memphis-confetti"] {
    position: relative;
  }

  [data-effect~="memphis-confetti"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--m-pat-confetti);
    background-color: transparent;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
  }

  [data-effect~="memphis-confetti"] > * {
    position: relative;
    z-index: 1;
  }


  /* ------------------------------------------------------------------
     data-effect~="memphis-squiggle" — Squiggle pattern background
     ------------------------------------------------------------------ */

  [data-effect~="memphis-squiggle"] {
    position: relative;
  }

  [data-effect~="memphis-squiggle"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--m-pat-squiggle-bk);
    background-size: 40px 20px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
  }

  [data-effect~="memphis-squiggle"] > * {
    position: relative;
    z-index: 1;
  }


  /* ------------------------------------------------------------------
     Pattern-fill button variants (when Memphis theme active)
     ------------------------------------------------------------------ */

  [data-theme~="memphis"] button[data-variant="stripe"],
  [data-theme~="memphis"] .button[data-variant="stripe"] {
    background: var(--m-pat-stripe-y);
    background-color: var(--m-cream);
    color: var(--m-black);
  }

  [data-theme~="memphis"] button[data-variant="dots"],
  [data-theme~="memphis"] .button[data-variant="dots"] {
    background: var(--m-pat-dots-b);
    background-color: var(--m-cream);
    color: var(--m-black);
  }

  [data-theme~="memphis"] button[data-variant="check"],
  [data-theme~="memphis"] .button[data-variant="check"] {
    background: var(--m-pat-check-y);
    color: var(--m-black);
  }

  [data-theme~="memphis"] button[data-variant="yellow"],
  [data-theme~="memphis"] .button[data-variant="yellow"] {
    background: var(--m-yellow);
    color: var(--m-black);
  }

  [data-theme~="memphis"] button[data-variant="blue"],
  [data-theme~="memphis"] .button[data-variant="blue"] {
    background: var(--m-blue);
    color: var(--m-white);
  }

  [data-theme~="memphis"] button[data-variant="teal"],
  [data-theme~="memphis"] .button[data-variant="teal"] {
    background: var(--m-teal);
    color: var(--m-black);
  }

  [data-theme~="memphis"] button[data-variant="pink"],
  [data-theme~="memphis"] .button[data-variant="pink"] {
    background: var(--m-pink);
    color: var(--m-white);
  }

  [data-theme~="memphis"] button[data-variant="mint"],
  [data-theme~="memphis"] .button[data-variant="mint"] {
    background: var(--m-mint);
    color: var(--m-black);
  }


  /* ------------------------------------------------------------------
     Card face pattern backgrounds (when Memphis theme active)
     ------------------------------------------------------------------ */

  [data-theme~="memphis"] .card [data-pattern="stripe"] {
    background: var(--m-pat-stripe-y);
    background-color: var(--m-cream);
  }

  [data-theme~="memphis"] .card [data-pattern="dots"] {
    background: var(--m-pat-dots-r);
    background-color: var(--m-cream);
  }

  [data-theme~="memphis"] .card [data-pattern="check"] {
    background: var(--m-pat-check-y);
  }

  [data-theme~="memphis"] .card [data-pattern="squiggle"] {
    background: var(--m-pat-squiggle-r);
    background-color: var(--m-cream);
    background-size: 40px 20px;
  }

  [data-theme~="memphis"] .card [data-pattern="confetti"] {
    background: var(--m-pat-confetti);
    background-color: var(--m-cream);
  }

  [data-theme~="memphis"] .card [data-pattern="cross"] {
    background: var(--m-pat-cross);
    background-color: var(--m-cream);
  }


  /* ------------------------------------------------------------------
     Reduced motion
     ------------------------------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    [data-effect~="memphis-confetti"]::before,
    [data-effect~="memphis-squiggle"]::before {
      animation: none;
    }
  }


  /* ------------------------------------------------------------------
     Print — hide decorative effects
     ------------------------------------------------------------------ */

  @media print {
    [data-effect~="memphis-zigzag"],
    [data-effect~="memphis-dots"],
    [data-effect~="memphis-stripe"] {
      display: none !important;
    }

    [data-effect~="memphis-confetti"]::before,
    [data-effect~="memphis-squiggle"]::before {
      display: none !important;
    }
  }

}