/* ============================================================
   EXEMPTION.LAND — Hero Background Textures
   CSS-only animated textures for each page type.
   Agricultural × Land Surveying aesthetic.
   ============================================================ */

/* ── Base Layer ──────────────────────────────────────────────── */
.hero__texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Accessibility: disable all texture animations */
@media (prefers-reduced-motion: reduce) {
  .hero__texture,
  .hero__texture::before,
  .hero__texture::after {
    animation: none !important;
  }
}

/* ────────────────────────────────────────────────────────────── *
   1. TOPO — Topographic contour rings (homepage)
   Concentric elliptical contour lines drifting slowly,
   evoking land survey topographic maps.
 * ────────────────────────────────────────────────────────────── */
.hero__texture--topo {
  background:
    repeating-radial-gradient(
      ellipse at 25% 55%,
      transparent 0px, transparent 44px,
      rgba(141,180,142,0.10) 45px,
      rgba(141,180,142,0.10) 46px,
      transparent 47px, transparent 90px
    ),
    repeating-radial-gradient(
      ellipse at 72% 38%,
      transparent 0px, transparent 60px,
      rgba(107,143,113,0.08) 61px,
      rgba(107,143,113,0.08) 62px,
      transparent 63px, transparent 122px
    ),
    repeating-radial-gradient(
      ellipse at 50% 75%,
      transparent 0px, transparent 32px,
      rgba(58,92,65,0.07) 33px,
      rgba(58,92,65,0.07) 34px,
      transparent 35px, transparent 68px
    );
  animation: topo-drift 30s linear infinite;
}

@keyframes topo-drift {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 60px -120px, -40px -80px, 30px -100px; }
}

/* ────────────────────────────────────────────────────────────── *
   2. MEADOW — Floating particles (ag/service pages)
   Gentle, organic particles reminiscent of pollen or
   seeds drifting across a meadow.
 * ────────────────────────────────────────────────────────────── */
.hero__texture--meadow {
  background-image:
    radial-gradient(circle 3px at 15% 20%, rgba(141,180,142,0.10) 0%, transparent 100%),
    radial-gradient(circle 2px at 40% 65%, rgba(107,143,113,0.08) 0%, transparent 100%),
    radial-gradient(circle 4px at 70% 30%, rgba(58,92,65,0.07) 0%, transparent 100%),
    radial-gradient(circle 2px at 85% 75%, rgba(141,180,142,0.09) 0%, transparent 100%),
    radial-gradient(circle 3px at 55% 45%, rgba(197,148,58,0.06) 0%, transparent 100%),
    radial-gradient(circle 2px at 25% 80%, rgba(107,143,113,0.07) 0%, transparent 100%),
    radial-gradient(circle 3px at 90% 15%, rgba(141,180,142,0.08) 0%, transparent 100%),
    radial-gradient(circle 2px at 10% 55%, rgba(58,92,65,0.06) 0%, transparent 100%),
    radial-gradient(circle 4px at 60% 85%, rgba(107,143,113,0.07) 0%, transparent 100%),
    radial-gradient(circle 3px at 35% 10%, rgba(141,180,142,0.09) 0%, transparent 100%);
  background-size: 100% 100%;
  animation: meadow-float 20s ease-in-out infinite;
}

.hero__texture--meadow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 2px at 20% 40%, rgba(141,180,142,0.08) 0%, transparent 100%),
    radial-gradient(circle 3px at 50% 20%, rgba(107,143,113,0.06) 0%, transparent 100%),
    radial-gradient(circle 2px at 75% 60%, rgba(58,92,65,0.09) 0%, transparent 100%),
    radial-gradient(circle 4px at 30% 90%, rgba(197,148,58,0.05) 0%, transparent 100%),
    radial-gradient(circle 2px at 80% 45%, rgba(141,180,142,0.07) 0%, transparent 100%),
    radial-gradient(circle 3px at 45% 70%, rgba(107,143,113,0.08) 0%, transparent 100%);
  background-size: 100% 100%;
  animation: meadow-float-alt 25s ease-in-out infinite;
}

@keyframes meadow-float {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(15px, -10px); }
  50%  { transform: translate(-8px, 12px); }
  75%  { transform: translate(10px, 5px); }
  100% { transform: translate(0, 0); }
}

@keyframes meadow-float-alt {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-12px, 8px); }
  66%  { transform: translate(10px, -6px); }
  100% { transform: translate(0, 0); }
}

/* ────────────────────────────────────────────────────────────── *
   3. STRATA — Horizontal geological layers (county pages)
   Thin bands at varying opacities that shift horizontally,
   referencing soil composition cross-sections.
 * ────────────────────────────────────────────────────────────── */
.hero__texture--strata {
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 18px,
      rgba(160,82,45,0.05) 18px,
      rgba(160,82,45,0.05) 20px,
      transparent 20px,
      transparent 52px,
      rgba(107,143,113,0.04) 52px,
      rgba(107,143,113,0.04) 53px,
      transparent 53px,
      transparent 80px,
      rgba(197,148,58,0.035) 80px,
      rgba(197,148,58,0.035) 82px,
      transparent 82px,
      transparent 110px,
      rgba(58,92,65,0.045) 110px,
      rgba(58,92,65,0.045) 111px,
      transparent 111px,
      transparent 150px
    );
  animation: strata-shift 25s ease-in-out infinite alternate;
}

.hero__texture--strata::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 35px,
      rgba(141,180,142,0.03) 35px,
      rgba(141,180,142,0.03) 37px,
      transparent 37px,
      transparent 95px,
      rgba(160,82,45,0.025) 95px,
      rgba(160,82,45,0.025) 96px,
      transparent 96px,
      transparent 140px
    );
  animation: strata-shift-alt 20s ease-in-out infinite alternate;
}

@keyframes strata-shift {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

@keyframes strata-shift-alt {
  0%   { background-position: 0 0; }
  100% { background-position: -30px 0; }
}

/* ────────────────────────────────────────────────────────────── *
   4. CANOPY — Overlapping leaf shapes (timber/wildlife)
   Organic overlapping ellipses evoking a forest canopy seen
   from below, with dappled light filtering through.
 * ────────────────────────────────────────────────────────────── */
.hero__texture--canopy {
  background-image:
    radial-gradient(ellipse 120px 80px at 20% 30%, rgba(58,92,65,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 100px 140px at 60% 20%, rgba(107,143,113,0.05) 0%, transparent 100%),
    radial-gradient(ellipse 140px 90px at 80% 60%, rgba(58,92,65,0.04) 0%, transparent 100%),
    radial-gradient(ellipse 90px 120px at 35% 70%, rgba(141,180,142,0.05) 0%, transparent 100%),
    radial-gradient(ellipse 110px 70px at 75% 85%, rgba(107,143,113,0.04) 0%, transparent 100%),
    radial-gradient(ellipse 80px 100px at 10% 80%, rgba(58,92,65,0.03) 0%, transparent 100%);
  background-size: 100% 100%;
  animation: canopy-sway 18s ease-in-out infinite;
}

.hero__texture--canopy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 100px 60px at 45% 50%, rgba(141,180,142,0.05) 0%, transparent 100%),
    radial-gradient(ellipse 130px 100px at 15% 55%, rgba(58,92,65,0.04) 0%, transparent 100%),
    radial-gradient(ellipse 70px 110px at 85% 35%, rgba(107,143,113,0.05) 0%, transparent 100%);
  background-size: 100% 100%;
  animation: canopy-sway-alt 22s ease-in-out infinite;
}

@keyframes canopy-sway {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(8px, -5px) scale(1.02); }
  66%  { transform: translate(-6px, 8px) scale(0.98); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes canopy-sway-alt {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-10px, 6px); }
  100% { transform: translate(0, 0); }
}

/* ────────────────────────────────────────────────────────────── *
   5. HONEYCOMB — Hex grid with pulse (beekeeping)
   Hexagonal grid pattern with an organic pulsing glow.
 * ────────────────────────────────────────────────────────────── */
.hero__texture--honeycomb {
  background-image:
    linear-gradient(30deg,  rgba(197,148,58,0.04) 12%, transparent 12.5%, transparent 87%, rgba(197,148,58,0.04) 87.5%),
    linear-gradient(150deg, rgba(197,148,58,0.04) 12%, transparent 12.5%, transparent 87%, rgba(197,148,58,0.04) 87.5%),
    linear-gradient(30deg,  rgba(197,148,58,0.04) 12%, transparent 12.5%, transparent 87%, rgba(197,148,58,0.04) 87.5%),
    linear-gradient(150deg, rgba(197,148,58,0.04) 12%, transparent 12.5%, transparent 87%, rgba(197,148,58,0.04) 87.5%),
    linear-gradient(60deg,  rgba(212,165,116,0.03) 25%, transparent 25.5%, transparent 75%, rgba(212,165,116,0.03) 75%),
    linear-gradient(60deg,  rgba(212,165,116,0.03) 25%, transparent 25.5%, transparent 75%, rgba(212,165,116,0.03) 75%);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

.hero__texture--honeycomb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 600px 400px at 50% 50%,
    rgba(197,148,58,0.08) 0%,
    transparent 70%
  );
  animation: honeycomb-pulse 5s ease-in-out infinite;
}

@keyframes honeycomb-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.1); }
}

/* ────────────────────────────────────────────────────────────── *
   6. DOTS — Dot-matrix radial pulse (pricing/about)
   Evenly spaced dots with a breathing radial highlight.
 * ────────────────────────────────────────────────────────────── */
.hero__texture--dots {
  background-image:
    radial-gradient(circle 1.5px at center, rgba(141,180,142,0.08) 0%, transparent 100%);
  background-size: 28px 28px;
}

.hero__texture--dots::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 500px 400px at 40% 50%,
    rgba(107,143,113,0.08) 0%,
    transparent 70%
  );
  animation: dots-pulse 6s ease-in-out infinite;
}

@keyframes dots-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.15); }
}

/* ────────────────────────────────────────────────────────────── *
   7. BLUEPRINT — Engineering grid (eligibility)
   Technical blueprint-style grid with crosshair intersections,
   evoking property survey blueprints.
 * ────────────────────────────────────────────────────────────── */
.hero__texture--blueprint {
  background-image:
    linear-gradient(rgba(107,143,113,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,143,113,0.04) 1px, transparent 1px),
    linear-gradient(rgba(107,143,113,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,143,113,0.025) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

.hero__texture--blueprint::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 4px at 0 0, rgba(141,180,142,0.10) 0%, transparent 100%);
  background-size: 100px 100px;
  animation: blueprint-glow 6s ease-in-out infinite alternate;
}

@keyframes blueprint-glow {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}