/* ============================================================
   RASTRICK — Street Textures Enhancement Layer
   All textures use SVG data URIs — zero external file requests
   Layer on top of styles.css — modular, non-breaking
   ============================================================ */

/* ---- Film grain — light ---- */
.texture-grain {
  position: relative;
  isolation: isolate;
}

.texture-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* ---- Film grain — heavy ---- */
.texture-grain-heavy {
  position: relative;
  isolation: isolate;
}

.texture-grain-heavy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* ---- Halftone dots — standard ---- */
.texture-halftone {
  position: relative;
  isolation: isolate;
}

.texture-halftone::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px);
  background-size: 12px 12px;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* ---- Halftone dots — diagonal ---- */
.texture-halftone-diagonal {
  position: relative;
  isolation: isolate;
}

.texture-halftone-diagonal::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  transform: rotate(20deg) scale(1.2);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
}

/* ---- Scan lines ---- */
.texture-scanlines {
  position: relative;
  isolation: isolate;
}

.texture-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.25) 2px,
    rgba(0, 0, 0, 0.25) 4px
  );
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

/* ---- Grid paper background ---- */
.bg-grid-paper {
  background-color: var(--bg-2);
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---- Grid paper — red tint ---- */
.bg-grid-red {
  background-color: var(--bg-2);
  background-image:
    linear-gradient(rgba(232,19,42,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,19,42,0.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
}

/* ---- Grid paper — yellow tint ---- */
.bg-grid-yellow {
  background-color: var(--bg-2);
  background-image:
    linear-gradient(rgba(247,199,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,199,0,0.06) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
}

/* ---- Torn paper top edge ---- */
.edge-torn-top {
  position: relative;
}

.edge-torn-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'%3E%3Cpath d='M0,18 L0,8 Q30,0 60,9 Q90,18 120,7 Q150,0 180,10 Q210,18 240,6 Q270,0 300,11 Q330,18 360,5 Q390,0 420,12 Q450,18 480,4 Q510,0 540,13 Q570,18 600,3 Q630,0 660,14 Q690,18 720,2 Q750,0 780,15 Q810,18 840,1 Q870,0 900,16 Q930,18 960,0 Q990,0 1020,17 Q1050,18 1080,2 Q1110,0 1140,18 Q1170,18 1200,8 L1200,18 Z' fill='%23050505'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* ---- Torn paper bottom edge ---- */
.edge-torn-bottom {
  position: relative;
}

.edge-torn-bottom::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 18' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,10 Q30,18 60,9 Q90,0 120,11 Q150,18 180,8 Q210,0 240,12 Q270,18 300,7 Q330,0 360,13 Q390,18 420,6 Q450,0 480,14 Q510,18 540,5 Q570,0 600,15 Q630,18 660,4 Q690,0 720,16 Q750,18 780,3 Q810,0 840,17 Q870,18 900,2 Q930,0 960,18 Q990,18 1020,1 Q1050,0 1080,16 Q1110,18 1140,0 Q1170,0 1200,10 L1200,0 Z' fill='%23050505'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* ---- Photocopy effect ---- */
.effect-photocopy {
  filter: contrast(1.4) brightness(0.9);
  position: relative;
  isolation: isolate;
}

.effect-photocopy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* ---- Paint drip decoration ---- */
.paint-drip {
  position: relative;
  overflow: visible;
}

.paint-drip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,10 Q20,40 40,8 Q60,0 80,15 Q100,40 120,5 Q140,0 160,20 Q180,40 200,6 Q220,0 240,18 Q260,40 280,4 Q300,0 320,22 Q340,40 360,3 Q380,0 400,12 L400,0 Z' fill='%23E8132A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}

.paint-drip-yellow::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,10 Q20,40 40,8 Q60,0 80,15 Q100,40 120,5 Q140,0 160,20 Q180,40 200,6 Q220,0 240,18 Q260,40 280,4 Q300,0 320,22 Q340,40 360,3 Q380,0 400,12 L400,0 Z' fill='%23F7C700'/%3E%3C/svg%3E");
}

.paint-drip-pink::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,10 Q20,40 40,8 Q60,0 80,15 Q100,40 120,5 Q140,0 160,20 Q180,40 200,6 Q220,0 240,18 Q260,40 280,4 Q300,0 320,22 Q340,40 360,3 Q380,0 400,12 L400,0 Z' fill='%23FF1A8C'/%3E%3C/svg%3E");
}

/* ---- Diagonal stripe background ---- */
.bg-stripe-dark {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.02) 8px,
    rgba(255,255,255,0.02) 16px
  );
}

.bg-stripe-accent {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(232,19,42,0.05) 10px,
    rgba(232,19,42,0.05) 20px
  );
}

/* ---- Noise vignette ---- */
.vignette {
  position: relative;
  isolation: isolate;
}

.vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

/* =============== MOBILE =============== */
@media (max-width: 720px) {
  /* Reduce texture intensity for performance */
  .texture-grain::before {
    opacity: 0.22;
  }

  .texture-grain-heavy::before {
    opacity: 0.35;
  }

  .texture-halftone::after,
  .texture-halftone-diagonal::after {
    opacity: 0.6;
  }

  .texture-scanlines::after {
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, 0.15) 3px,
      rgba(0, 0, 0, 0.15) 6px
    );
  }

  .paint-drip::after {
    height: 24px;
  }

  .edge-torn-top::before,
  .edge-torn-bottom::after {
    height: 12px;
  }
}