/* ==========================================================================
   2B Entertainment — Drip Text
   Reusable dripping-font effect (stencil + gothic + wildstyle variants)
   Usage:
     <span data-drip="stencil">FONT</span>
     <span data-drip="gothic">Dystopian-Wildstyle-Graffiti</span>
     <span data-drip="wildstyle">JenniisDriPPtees</span>
   Optional:
     data-drip-color="cream|white|neon|cyan|gold"  (default: cream)
     data-drip-density="sparse|dense"              (default: dense)
     data-drip-palette="graffiti|pastel|warm"      (default: graffiti, wildstyle only)
   ========================================================================== */

[data-drip] {
  --drip-color: #efe6d2;
  --drip-pad: 0.45em;
  display: inline-block;
  position: relative;
  color: var(--drip-color);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-bottom: var(--drip-pad);
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Drip overlay — mask-based, inherits currentColor */
[data-drip]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--drip-pad);
  background-color: currentColor;
  -webkit-mask-image: var(--drip-mask);
  mask-image: var(--drip-mask);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 400px 100%;
  mask-size: 400px 100%;
  -webkit-mask-position: top left;
  mask-position: top left;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18));
}

/* ---------- Variants ---------- */

[data-drip="stencil"] {
  font-family: "Black Ops One", "Bungee", "Stalinist One", "Russo One",
    "Impact", system-ui, sans-serif;
  font-size: clamp(2.8rem, 9vw, 7rem);
  letter-spacing: 0.04em;
}

[data-drip="gothic"] {
  font-family: "New Rocker", "UnifrakturCook", "Fruktur", "Grenze Gotisch",
    "Pirata One", "MedievalSharp", serif;
  font-size: clamp(1.8rem, 5.5vw, 4.2rem);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  font-weight: 400;
}

[data-drip="wildstyle"] {
  --drip-color: #ffffff;
  --drip-pad: 0.7em;
  font-family: "Permanent Marker", "Stick No Bills", "Bangers",
    "Rubik Marker Hatch", "Rubik Mono One", cursive, sans-serif;
  font-size: clamp(2.4rem, 8vw, 6rem);
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    0 0 0 #000;
  padding-bottom: var(--drip-pad);
}

[data-drip="wildstyle"] .drip-letter {
  display: inline-block;
  color: var(--letter-color, var(--drip-color));
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    0 0 0 #000, 0 0 14px rgba(0, 0, 0, 0.5);
  position: relative;
}

/* Splatter dots around wildstyle text */
[data-drip="wildstyle"][data-drip-splatter]::before {
  content: "";
  position: absolute;
  inset: -0.4em -0.2em -0.2em -0.2em;
  background-color: currentColor;
  -webkit-mask-image: var(--drip-splatter);
  mask-image: var(--drip-splatter);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
  opacity: 0.85;
}

[data-drip-density="sparse"]::after {
  -webkit-mask-size: 700px 100%;
  mask-size: 700px 100%;
}

/* ---------- Colors ---------- */

[data-drip-color="cream"] { --drip-color: #efe6d2; }
[data-drip-color="white"] { --drip-color: #ffffff; }
[data-drip-color="neon"]  { --drip-color: #ff3dbd; text-shadow: 0 0 14px rgba(255, 61, 189, 0.55), 0 2px 0 rgba(0, 0, 0, 0.35); }
[data-drip-color="cyan"]  { --drip-color: #62e6ff; text-shadow: 0 0 14px rgba(98, 230, 255, 0.55), 0 2px 0 rgba(0, 0, 0, 0.35); }
[data-drip-color="gold"]  { --drip-color: #ffd57a; text-shadow: 0 0 14px rgba(255, 213, 122, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35); }

/* ---------- Mask (drip pattern) ----------
   ~22 teardrop shapes of varying lengths and widths, hanging from a
   4px top bar. viewBox 0 0 400 100, preserveAspectRatio="none" so
   mask stretches to container width; drips scale horizontally. */
:root {
  --drip-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'><g fill='white'><rect x='0' y='0' width='400' height='4'/><path d='M8,4 L8,28 Q8,38 11,38 Q14,38 14,28 L14,4 Z'/><path d='M22,4 L22,55 Q22,68 25,68 Q28,68 28,55 L28,4 Z'/><path d='M40,4 L40,18 Q40,24 43,24 Q46,24 46,18 L46,4 Z'/><path d='M55,4 L55,42 Q55,52 59,52 Q63,52 63,42 L63,4 Z'/><path d='M72,4 L72,30 Q72,38 75,38 Q78,38 78,30 L78,4 Z'/><path d='M90,4 L90,68 Q90,82 94,82 Q98,82 98,68 L98,4 Z'/><path d='M108,4 L108,22 Q108,28 111,28 Q114,28 114,22 L114,4 Z'/><path d='M125,4 L125,48 Q125,60 128,60 Q131,60 131,48 L131,4 Z'/><path d='M145,4 L145,35 Q145,44 148,44 Q151,44 151,35 L151,4 Z'/><path d='M162,4 L162,60 Q162,72 165,72 Q168,72 168,60 L168,4 Z'/><path d='M180,4 L180,18 Q180,24 183,24 Q186,24 186,18 L186,4 Z'/><path d='M198,4 L198,40 Q198,50 201,50 Q204,50 204,40 L204,4 Z'/><path d='M215,4 L215,55 Q215,66 218,66 Q221,66 221,55 L221,4 Z'/><path d='M235,4 L235,28 Q235,36 238,36 Q241,36 241,28 L241,4 Z'/><path d='M250,4 L250,72 Q250,86 253,86 Q256,86 256,72 L256,4 Z'/><path d='M270,4 L270,38 Q270,48 273,48 Q276,48 276,38 L276,4 Z'/><path d='M288,4 L288,22 Q288,28 291,28 Q294,28 294,22 L294,4 Z'/><path d='M305,4 L305,48 Q305,60 308,60 Q311,60 311,48 L311,4 Z'/><path d='M322,4 L322,32 Q322,40 325,40 Q328,40 328,32 L328,4 Z'/><path d='M340,4 L340,60 Q340,72 343,72 Q346,72 346,60 L346,4 Z'/><path d='M358,4 L358,25 Q358,32 361,32 Q364,32 364,25 L364,4 Z'/><path d='M375,4 L375,42 Q375,52 378,52 Q381,52 381,42 L381,4 Z'/><path d='M390,4 L390,18 Q390,24 393,24 Q396,24 396,18 L396,4 Z'/></g></svg>");

  /* Splatter mask — random circles + tiny drips scattered around the text */
  --drip-splatter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220' preserveAspectRatio='none'><g fill='white'><circle cx='18' cy='30' r='3'/><circle cx='42' cy='65' r='2'/><circle cx='60' cy='18' r='4'/><circle cx='90' cy='90' r='2.5'/><circle cx='110' cy='45' r='1.5'/><circle cx='135' cy='25' r='3.5'/><circle cx='170' cy='110' r='2'/><circle cx='200' cy='70' r='3'/><circle cx='230' cy='30' r='1.5'/><circle cx='255' cy='95' r='2.5'/><circle cx='290' cy='50' r='4'/><circle cx='320' cy='115' r='2'/><circle cx='350' cy='30' r='3'/><circle cx='380' cy='85' r='2'/><circle cx='410' cy='60' r='3.5'/><circle cx='440' cy='105' r='2.5'/><circle cx='470' cy='40' r='2'/><circle cx='500' cy='90' r='3'/><circle cx='530' cy='55' r='1.5'/><circle cx='560' cy='25' r='3.5'/><circle cx='585' cy='100' r='2'/><path d='M75,5 L75,15 Q75,20 77,20 Q79,20 79,15 L79,5 Z'/><path d='M295,200 L295,210 Q295,215 297,215 Q299,215 299,210 L299,200 Z'/><path d='M460,200 L460,208 Q460,213 462,213 Q464,213 464,208 L464,200 Z'/><path d='M155,200 L155,210 Q155,215 157,215 Q159,215 159,210 L159,200 Z'/></g></svg>");
}