/* ═══════════════════════════════════════════════
   CARPENTER CREEK LISTENING MAP — STYLESHEET
   ═══════════════════════════════════════════════
   
   QUICK-TWEAK VALUES (search for "TWEAK:" comments):
   - Torch size, warmth, dimming
   - Pin popup glass effect
   - Creek path glow
   - Fact zone glow
   - Movement speed is in app.js
   ═══════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#06110d}
body{font-family:'Source Sans 3',sans-serif;color:#d4ede3}

/* ── INTRO ── */
#intro{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;transition:opacity 1s ease}
#intro.hidden{opacity:0;pointer-events:none}
#bgVideo{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:0;opacity:0;transition:opacity 1.5s ease}
#bgVideo.ready{opacity:1}
#intro::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,14,10,0.52) 0%,rgba(4,14,10,0.74) 100%);z-index:1;pointer-events:none}
#pulseCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0.5}
.intro-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.intro-eyebrow{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:#7aaa90;margin-bottom:1.75rem}
.intro-rule{width:36px;height:0.5px;background:rgba(122,170,144,0.4);margin:0 auto 2rem}
.intro-title{font-family:'Playfair Display',serif;font-size:clamp(32px,5.5vw,58px);font-weight:400;color:#e8f5ef;line-height:1.18;margin-bottom:1.1rem}
.intro-title em{font-style:italic;color:#9FE1CB}
.intro-body{font-size:14px;color:#8ab8a0;line-height:1.75;max-width:480px;margin-bottom:0.6rem}
.intro-credit{font-size:11px;color:rgba(90,138,114,0.7);margin-bottom:2.75rem}
.intro-btn{display:inline-block;padding:0.75rem 2.25rem;border:0.5px solid rgba(159,225,203,0.4);border-radius:2px;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:#9FE1CB;cursor:pointer;transition:all 0.25s;background:rgba(29,158,117,0.08)}
.intro-btn:hover{background:rgba(29,158,117,0.2);border-color:#9FE1CB;color:#e8f5ef}

/* ── MAIN ── */
#main{position:fixed;inset:0;opacity:0;transition:opacity 0.8s ease 0.2s;pointer-events:none}
#main.visible{opacity:1;pointer-events:all;cursor:none}

#mapWorld{position:absolute;top:0;left:0;will-change:transform;z-index:3;transform-origin:0 0}
#mapImg{display:block;filter:brightness(0.20) saturate(0.85);transition:filter 2s ease}
#mapImg.bright{filter:brightness(0.78) saturate(0.85)}

/* markers layer is drawn via torch canvas — DOM element hidden */
#markersLayer{display:none}

/* ── LOGOS (fixed bottom-left) ── */
#mapLogos{
  position:fixed;bottom:1.5rem;left:1.5rem;z-index:16;
  height:56px;width:auto;
  opacity:0.8;pointer-events:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,0.5));
  transition:opacity 0.4s ease;
}

.map-vignette{position:fixed;inset:0;background:radial-gradient(ellipse 75% 65% at 50% 50%,transparent 25%,rgba(4,12,8,0.28) 60%,rgba(4,12,8,0.65) 100%);pointer-events:none;z-index:4}

.edge{position:fixed;z-index:6;pointer-events:all}
#eTop{top:0;left:0;right:0;height:15%}
#eBottom{bottom:0;left:0;right:0;height:15%}
#eLeft{top:0;left:0;bottom:0;width:12%}
#eRight{top:0;right:0;bottom:0;width:12%}

#torchCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* ── HEADER ── */
.map-header{position:fixed;top:0;left:0;right:0;z-index:18;padding:1.25rem 1.75rem;display:flex;align-items:center;gap:14px;background:linear-gradient(to bottom,rgba(4,12,8,0.65) 0%,transparent 100%);pointer-events:none}
.map-title{font-family:'Playfair Display',serif;font-size:17px;font-weight:400;color:#d4ede3}
.map-divider{width:0.5px;height:14px;background:rgba(159,225,203,0.2)}
.map-sub{font-size:10px;color:#5a8a72;letter-spacing:0.14em;text-transform:uppercase}
.map-hint{margin-left:auto;font-size:11px;color:#3a6050;font-style:italic;transition:opacity 0.6s}

/* ── FIELD RECORDING CAPTION ── */
#fieldCaption{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  z-index:10;
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#5a8a72;
  padding:0.4rem 1.2rem;
  background:rgba(6,16,11,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:0.5px solid rgba(90,138,114,0.15);border-radius:2px;
  opacity:0;transition:opacity 0.8s ease;pointer-events:none;
  white-space:nowrap;
}
#fieldCaption.visible{opacity:1}

/* ── MEDIA SPLIT (VIDEO + SPECTROGRAM) ── */
.popup-media-split{display:flex;flex-direction:column;position:relative}
.popup-photo{overflow:hidden;flex-shrink:1;min-height:0}
.popup-photo img,.popup-photo video{width:100%;height:100%;object-fit:cover;display:block}
#popWaveform{width:100%;display:block;background:#0a0214;flex-shrink:0}

/* drag handle between video and spectrogram */
.split-handle{
  height:10px;cursor:row-resize;display:flex;align-items:center;justify-content:center;
  background:rgba(10,2,20,0.7);position:relative;z-index:2;flex-shrink:0;
  transition:background 0.2s ease
}
.split-handle:hover{background:rgba(159,225,203,0.12)}
.split-grip{
  width:40px;height:3px;border-radius:2px;
  background:rgba(159,225,203,0.3);transition:background 0.2s ease
}
.split-handle:hover .split-grip{background:rgba(159,225,203,0.6)}

/* ── MUTE BUTTON ── */
#muteBtn{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:18;
  width:40px;height:40px;border-radius:50%;
  /* TWEAK: mute button glass effect */
  background:rgba(120,160,140,0.12);
  border:0.5px solid rgba(159,225,203,0.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#7aaa90;font-size:16px;
  cursor:pointer;pointer-events:all;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.25s ease;
}
#muteBtn:hover{background:rgba(120,160,140,0.22);border-color:rgba(159,225,203,0.4);color:#9FE1CB}
#muteBtn.muted{color:#3a5548}

/* ── ZOOM CONTROLS ── */
#zoomControls{
  position:fixed;bottom:1.5rem;right:4.5rem;z-index:18;
  display:flex;gap:6px;pointer-events:all;
}
.zoom-btn{
  width:40px;height:40px;border-radius:50%;
  background:rgba(120,160,140,0.12);
  border:0.5px solid rgba(159,225,203,0.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#7aaa90;font-size:20px;font-weight:300;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.25s ease;
}
.zoom-btn:hover{background:rgba(120,160,140,0.22);border-color:rgba(159,225,203,0.4);color:#9FE1CB}

/* ── PINS (minimal dot style with radiating pulse) ── */
#pinSvg{position:absolute;top:0;left:0;pointer-events:all}
.pin-g{cursor:none;opacity:0;transition:opacity 0.4s ease}
.pin-g.revealed{opacity:1}
.pin-g .pin-inner{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1),opacity 0.5s ease;opacity:0}
.pin-g.revealed .pin-inner{transform:scale(1);opacity:1}
.pin-g.revealed .pin-inner:hover{transform:scale(1.5)}
.pin-glow{transform-box:fill-box;transform-origin:center;transition:opacity 0.3s ease}
.pin-g.revealed .pin-glow{animation:pin-arrive 1.2s ease-out}
.pin-g:hover .pin-glow{opacity:0.3}
.pin-dot{transition:fill 0.2s ease;filter:drop-shadow(0 0 4px rgba(94,196,224,0.6))}
.pin-g:hover .pin-dot{fill:#D4EEF6}
.pin-g.revealed .pin-dot{animation:pin-breathe 2.5s ease-in-out infinite}
@keyframes pin-arrive{0%{opacity:0.8;transform:scale(2.5)}50%{opacity:0.3;transform:scale(3)}100%{opacity:0.1;transform:scale(1)}}
@keyframes pin-breathe{0%,100%{filter:drop-shadow(0 0 5px rgba(94,196,224,0.5))}50%{filter:drop-shadow(0 0 14px rgba(94,196,224,1))}}

/* Radiating pulse rings — continuous broadcast signal */
.pin-pulse{transform-box:fill-box;transform-origin:center;opacity:0}
.pin-g.revealed .pin-pulse-1{animation:pin-radiate 3s ease-out infinite}
.pin-g.revealed .pin-pulse-2{animation:pin-radiate 3s ease-out 1.5s infinite}
@keyframes pin-radiate{0%{transform:scale(1);opacity:1;stroke-width:2.5}40%{opacity:0.5}100%{transform:scale(8);opacity:0;stroke-width:0.5}}

/* ── CUSTOM CURSOR ── */
#cursor{position:fixed;width:40px;height:40px;pointer-events:none;z-index:20;transform:translate(-50%,-50%)}
#cursor svg{width:100%;height:100%;overflow:visible}
#cursor .c-glow{fill:none;stroke:rgba(159,225,203,0.15);stroke-width:6;filter:blur(3px);transition:all 0.25s ease}
#cursor .c-ring{stroke:rgba(159,225,203,0.85);stroke-width:1.2;fill:none;transition:all 0.18s ease}
#cursor .c-dot{fill:rgba(159,225,203,0.9);stroke:none;transition:all 0.18s ease}
#cursor .c-cross{stroke:rgba(159,225,203,0.6);stroke-width:1;transition:all 0.18s ease}
#cursor.on-pin .c-glow{stroke:rgba(255,235,160,0.25);stroke-width:8}
#cursor.on-pin .c-ring{stroke:rgba(255,235,160,0.95);stroke-width:1.8}
#cursor.on-pin .c-dot{fill:rgba(255,235,160,0.95)}
#cursor.on-pin .c-cross{stroke:rgba(255,235,160,0.7)}
#cursor.panning .c-glow{stroke:rgba(159,225,203,0.08)}
#cursor.panning .c-ring{stroke:rgba(159,225,203,0.5);stroke-width:0.9}

/* ── CREEK PATH (hidden — coordinates still used for fact zones) ── */
#creekPath,#creekGlow{display:none}

/* ── LANDMARK LABELS (on the creek path) ── */
.landmark{position:absolute;pointer-events:none;z-index:3;opacity:0;transition:opacity 1.2s ease}
.landmark-name{font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(159,225,203,0.55);white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,0.8)}
.landmark-dot{width:3px;height:3px;border-radius:50%;background:rgba(159,225,203,0.4);margin:0 auto 3px}
.landmark.faded{opacity:0.15}

/* ── POPUP OVERLAY (dims map behind popup) ── */
.popup-overlay{position:fixed;inset:0;background:rgba(4,12,8,0.55);z-index:249;opacity:0;transition:opacity 0.4s ease;pointer-events:none}
.popup-overlay.visible{opacity:1}

/* ── POPUP (frosted glass) ── */
.popup{
  position:fixed;
  width:1040px;
  /* TWEAK: popup glass — Sample F: near-clear with sharper border */
  background:rgba(20,40,30,0.25);
  border:0.5px solid rgba(159,225,203,0.18);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 0.5px rgba(159,225,203,0.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  overflow:hidden;z-index:250;
  transform-origin:center center;
  transform:translate(-50%,-50%) scale(0.92);
  opacity:0;
  transition:opacity 0.35s ease,transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none;
}
.popup.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all}
.popup-header{padding:1.4rem 2rem 1rem;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:0.5px solid rgba(255,255,255,0.06)}
.popup-name{font-family:'Playfair Display',serif;font-size:28px;color:#e8f5ef;font-weight:400;line-height:1.3}
.popup-seg{font-size:10px;color:rgba(159,225,203,0.5);letter-spacing:0.1em;text-transform:uppercase;margin-top:5px}
.popup-desc{font-size:18px;color:#9fc5b0;line-height:1.7;padding:1.4rem 2rem 0.8rem}
.popup-footer{display:flex;justify-content:space-between;align-items:baseline;padding:0 2rem 1.4rem}
.popup-recorded{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(159,225,203,0.45);font-style:italic;padding:0}
.popup-coords{font-size:10px;letter-spacing:0.08em;color:rgba(159,225,203,0.35);font-family:'Source Code Pro','Courier New',monospace}

.popup-stem{display:none}

/* ── FACT ZONES (discoverable glowing segments) ── */
.fact-zone{fill:transparent;stroke:transparent;stroke-width:30;cursor:none;transition:stroke 0.4s ease,filter 0.4s ease}
.fact-zone:hover{stroke:rgba(159,225,203,0.08);filter:drop-shadow(0 0 12px rgba(159,225,203,0.15))}
.fact-zone.active{stroke:rgba(159,225,203,0.12);filter:drop-shadow(0 0 18px rgba(159,225,203,0.25))}

/* ── FACT CARD (frosted glass, matches popup) ── */
.fact-pulse{
  position:fixed;z-index:12;
  max-width:360px;
  padding:0.75rem 1.15rem;
  /* TWEAK: fact card glass — matches popup (Sample F) */
  background:rgba(20,40,30,0.25);
  border:0.5px solid rgba(159,225,203,0.18);
  border-radius:10px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font-size:13px;color:#c8e8d8;line-height:1.65;
  font-style:italic;
  opacity:0;transform:translateY(8px);
  transition:opacity 0.5s ease,transform 0.5s ease;
  pointer-events:none;
}
.fact-pulse.visible{opacity:1;transform:translateY(0)}

/* ── AUDIO HINT ── */
#audioHint{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  z-index:10;
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#5a8a72;
  padding:0.5rem 1.5rem;
  border:0.5px solid rgba(90,138,114,0.25);border-radius:2px;
  background:rgba(6,16,11,0.7);backdrop-filter:blur(6px);
  opacity:0;transition:opacity 0.6s ease;pointer-events:none;
}
#audioHint.visible{opacity:1}

/* ── REVEAL PROMPT ── */
#revealPrompt{
  position:fixed;bottom:50%;left:50%;transform:translate(-50%,50%);
  z-index:201;text-align:center;
  padding:1.5rem 2.5rem;
  background:transparent;
  border-radius:8px;
  opacity:0;transition:opacity 0.8s ease;pointer-events:none;
}
#revealPrompt.visible{opacity:1}
#revealPrompt .rp-text{font-family:'Playfair Display',serif;font-size:clamp(18px,2.8vw,26px);color:#c8e8d8;font-style:italic;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,0.5)}
#revealPrompt .rp-hint{font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:#5a8a72;margin-top:1rem}

/* ── RECON (end-of-creek) ── */
.recon-overlay{position:fixed;inset:0;background:rgba(4,12,8,0.7);z-index:300;opacity:0;transition:opacity 1s ease;pointer-events:none}
.recon-overlay.visible{opacity:1;pointer-events:all}

.recon-prompt{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:301;text-align:center;
  max-width:520px;padding:3rem;
  opacity:0;transition:opacity 0.8s ease 0.3s;pointer-events:none;
}
.recon-prompt.visible{opacity:1}
.recon-prompt .recon-btn{pointer-events:all}
.recon-eyebrow{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:#7aaa90;margin-bottom:1.5rem}
.recon-text{font-family:'Playfair Display',serif;font-size:clamp(18px,2.8vw,24px);color:#d4ede3;font-style:italic;line-height:1.6;margin-bottom:2rem;text-shadow:0 1px 6px rgba(0,0,0,0.5)}
.recon-btn{
  display:inline-block;padding:0.75rem 2.25rem;
  border:0.5px solid rgba(159,225,203,0.4);border-radius:2px;
  font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
  color:#9FE1CB;cursor:pointer;
  transition:all 0.25s;background:rgba(29,158,117,0.08);
  font-family:'Source Sans 3',sans-serif;
}
.recon-btn:hover{background:rgba(29,158,117,0.2);border-color:#9FE1CB;color:#e8f5ef}

.recon-video-wrap{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.95);
  z-index:302;
  width:80vw;max-width:1200px;
  opacity:0;transition:opacity 0.4s ease,transform 0.4s ease;pointer-events:none;
}
.recon-video-wrap.visible{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all}
.recon-video-inner{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;border:0.5px solid rgba(159,225,203,0.18);box-shadow:0 20px 80px rgba(0,0,0,0.7)}
.recon-video-inner iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.recon-close{
  position:absolute;top:-40px;right:0;z-index:303;
  width:36px;height:36px;border-radius:50%;border:0.5px solid rgba(159,225,203,0.25);
  background:rgba(6,16,11,0.7);color:#9FE1CB;font-size:20px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.recon-close:hover{background:rgba(29,158,117,0.2);border-color:#9FE1CB;color:#e8f5ef}

.recon-cta{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:301;text-align:center;
  opacity:0;transition:opacity 0.6s ease 0.3s;pointer-events:none;
}
.recon-cta.visible{opacity:1}
.recon-cta .recon-btn{font-size:14px;padding:1rem 3rem;text-decoration:none;pointer-events:none}
.recon-cta.visible .recon-btn{pointer-events:all}