/* ════════════════════════════════════════════════════════════════
   Wildlife Connects — papercraft.css
   Layered cut-paper diorama system. Built around real SVG layers,
   watercolor washes, paper texture and warm physical shadows.

   Composition rules:
   - Every "paper" element gets a fiber texture and a layered shadow.
   - Color palette per scene is RESTRICTED to ~7 paper hues.
   - Backgrounds are watercolor blooms, never flat.
   - Shadows are warm-tinted (60,40,20), never pure black.
   ════════════════════════════════════════════════════════════════ */

/* ─── Paper hue palette ─────────────────────────────────────── */
:root {
  /* Cardstock — warm cream + manila + kraft family */
  --paper-cream:      #F2EAD8;
  --paper-cream-2:    #E8DCC2;
  --paper-manila:     #DCC499;
  --paper-manila-2:   #C9AB7A;
  --paper-kraft:      #A8855A;
  --paper-kraft-2:    #8B6A41;
  --paper-bark:       #5A4226;
  --paper-bark-2:     #3F2E1A;

  /* Foliage — deep evergreens through sage */
  --paper-pine-dk:    #1F2E22;
  --paper-pine:       #2D4530;
  --paper-pine-md:    #3F5E40;
  --paper-pine-lt:    #5A7A57;
  --paper-sage:       #8A9F7E;
  --paper-sage-pale:  #B6C0A6;

  /* Sky / atmosphere — desert dawn through cool dusk */
  --paper-sky-dawn:   #F5DCB6;
  --paper-sky-mid:    #E8C599;
  --paper-sky-warm:   #D9A87A;
  --paper-sky-blue:   #B8C8C9;
  --paper-sky-mist:   #D4DDD0;

  /* Stone & rock — ochre desert through cool grey */
  --paper-ochre:      #C68A4E;
  --paper-rust:       #A55A33;
  --paper-rust-dk:    #7E3F26;
  --paper-stone:      #9C8A75;
  --paper-stone-dk:   #6F5F4D;

  /* Accent / signal */
  --paper-amber:      #C4722A;
  --paper-amber-pale: #E8B080;
  --paper-water:      #6B8E96;
  --paper-water-dk:   #3F5C66;
}

/* ─── Reusable paper texture filter ─────────────────────────── */
/* Apply via background-image on any paper layer for fiber texture */
.paper-fibers {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='600' height='600' filter='url(%23f)' opacity='0.18'/></svg>");
  background-blend-mode: multiply;
}

/* Stronger grain for foreground / hero artwork */
.paper-grain-strong {
  position: relative;
}
.paper-grain-strong::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='400' height='400' filter='url(%23f)' opacity='0.13'/></svg>");
  mix-blend-mode: multiply;
  z-index: 100;
}

/* Watercolor wash — three-color soft bloom for narrative backgrounds */
.watercolor-wash {
  background:
    radial-gradient(ellipse 60% 70% at 18% 30%, rgba(180, 200, 175, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 82% 25%, rgba(232, 178, 130, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 85%, rgba(245, 220, 182, 0.6) 0%, transparent 60%),
    linear-gradient(180deg, #F5EFE2 0%, #EFE5D2 100%);
}
.watercolor-wash--cool {
  background:
    radial-gradient(ellipse 60% 70% at 25% 25%, rgba(160, 180, 165, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 80% 75%, rgba(110, 140, 145, 0.4) 0%, transparent 55%),
    linear-gradient(180deg, #EAEFE5 0%, #DDE5DC 100%);
}
.watercolor-wash--warm {
  background:
    radial-gradient(ellipse 60% 70% at 30% 30%, rgba(232, 178, 130, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 78% 72%, rgba(196, 114, 42, 0.32) 0%, transparent 55%),
    linear-gradient(180deg, #F5E5D2 0%, #ECCFA8 100%);
}

/* Watercolor blob — used to anchor floating elements on a wash */
.watercolor-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  pointer-events: none;
}

/* ─── Diorama frame ─────────────────────────────────────────── */
.diorama {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.diorama svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* SVG-internal classes for paper layers */
.diorama svg .pf {
  /* paper feel — soft shadow on each cut layer */
  filter: drop-shadow(0 2px 2px rgba(60,40,20,0.18));
}
.diorama svg .pf-lg {
  filter: drop-shadow(0 6px 8px rgba(60,40,20,0.2));
}
.diorama svg .pf-sm {
  filter: drop-shadow(0 1px 1.5px rgba(60,40,20,0.14));
}

/* Pin / map-tag overlay for diorama captions */
.dio-tag {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper-cream);
  border: 1px solid rgba(60,40,20,0.18);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font: 600 11px/14px var(--font-sans);
  color: var(--wc-forest-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(60,40,20,0.18), 0 1px 2px rgba(60,40,20,0.1);
  z-index: 5;
}
.dio-tag .pin {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--paper-amber);
  box-shadow: 0 0 0 2px rgba(196,114,42,0.18);
}

/* Scene caption strip — bottom of a full-bleed scene */
.scene-caption {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(4px);
  padding: 10px 18px;
  border-radius: 999px;
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-forest-dark);
  z-index: 5;
  box-shadow: 0 8px 20px rgba(60,40,20,0.18);
}

/* Cut-paper headline — letters appear cut from cream cardstock */
.cut-paper {
  position: relative;
  display: inline-block;
  color: var(--paper-cream);
  text-shadow:
    1px 1px 0 rgba(60,40,20,0.10),
    2px 4px 6px rgba(60,40,20,0.30),
    0 0 0.5px rgba(60,40,20,0.5);
}
.cut-paper--forest {
  color: var(--paper-pine-dk);
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.10),
    2px 3px 5px rgba(0,0,0,0.22);
}

/* Tape strip — utility for "stuck on paper" labels */
.tape {
  position: absolute;
  width: 64px; height: 18px;
  background: rgba(220, 196, 153, 0.7);
  border-left: 1px dashed rgba(60,40,20,0.18);
  border-right: 1px dashed rgba(60,40,20,0.18);
  box-shadow: 0 2px 4px rgba(60,40,20,0.1);
  transform: rotate(-3deg);
  z-index: 6;
}

/* ─── Edge — a torn / deckle-edge bottom ────────────────────── */
.deckle-bottom {
  position: relative;
  --deckle-color: var(--wc-cream);
}
.deckle-bottom::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 24px;
  background: var(--deckle-color);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'><path d='M0,24 L1200,24 L1200,18 C1180,12 1160,16 1140,12 C1120,8 1100,16 1080,14 C1060,12 1040,18 1020,16 C1000,14 980,8 960,12 C940,16 920,12 900,14 C880,16 860,10 840,14 C820,18 800,12 780,16 C760,20 740,14 720,16 C700,18 680,10 660,14 C640,18 620,14 600,12 C580,10 560,16 540,18 C520,20 500,14 480,12 C460,10 440,16 420,18 C400,20 380,12 360,14 C340,16 320,10 300,14 C280,18 260,12 240,16 C220,20 200,14 180,12 C160,10 140,16 120,18 C100,20 80,12 60,14 C40,16 20,18 0,20 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'><path d='M0,24 L1200,24 L1200,18 C1180,12 1160,16 1140,12 C1120,8 1100,16 1080,14 C1060,12 1040,18 1020,16 C1000,14 980,8 960,12 C940,16 920,12 900,14 C880,16 860,10 840,14 C820,18 800,12 780,16 C760,20 740,14 720,16 C700,18 680,10 660,14 C640,18 620,14 600,12 C580,10 560,16 540,18 C520,20 500,14 480,12 C460,10 440,16 420,18 C400,20 380,12 360,14 C340,16 320,10 300,14 C280,18 260,12 240,16 C220,20 200,14 180,12 C160,10 140,16 120,18 C100,20 80,12 60,14 C40,16 20,18 0,20 Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

/* ─── Scene-level layout helpers ───────────────────────────── */

/* Full-bleed hero diorama — fills the viewport width */
.scene--full {
  position: relative;
  width: 100%;
  height: clamp(560px, 78vh, 820px);
  overflow: hidden;
}

/* Half scene — used for segment cards */
.scene--card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
}

/* ─── Cardstock label ──────────────────────────────────────── */
/* A small paper card stuck onto a scene */
.label-card {
  position: relative;
  background: var(--paper-cream);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23f)' opacity='0.14'/></svg>");
  background-blend-mode: multiply;
  border: 1px solid rgba(60,40,20,0.12);
  box-shadow:
    0 1px 1px rgba(60,40,20,0.1),
    0 8px 18px rgba(60,40,20,0.18);
  padding: 14px 18px;
}