/* ══════════════════════════════════════════════════
   PORTFOLIO MAP EDITION
   Uses existing theme vars: --dark --bg --pu-a --pu-b --teal --e
   Append/enqueue this after main.css
══════════════════════════════════════════════════ */

.pfm-main{ background:var(--dark); }

/* ══════════════════════════════════════
   1. HERO
══════════════════════════════════════ */
.pfm-hero{
  position:relative; height:100vh; min-height:720px;
  background:#050508;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; text-align:center;
}
.pfm-hero__stars{
  position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5) 0%, transparent 60%),
    radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,.4) 0%, transparent 60%),
    radial-gradient(1px 1px at 80% 55%, rgba(255,255,255,.5) 0%, transparent 60%),
    radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,.35) 0%, transparent 60%),
    radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,.45) 0%, transparent 60%),
    radial-gradient(1px 1px at 10% 85%, rgba(255,255,255,.3) 0%, transparent 60%),
    radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,.4) 0%, transparent 60%);
  background-size:100% 100%;
  opacity:.8;
}
.pfm-hero__meta{
  position:absolute; top:44px; z-index:3;
  display:flex; flex-direction:column;
  font-family:'Space Mono',monospace;
}
.pfm-hero__meta--left{ left:48px; align-items:flex-start; }
.pfm-hero__meta--right{ right:48px; align-items:flex-end; }
.pfm-hero__meta-label{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(244,242,247,.4); margin-bottom:6px; }
.pfm-hero__meta-value{ font-size:16px; color:var(--pu-a); font-weight:700; }

.pfm-hero__rule{ position:relative; z-index:2; width:min(900px,80%); height:1px; background:rgba(244,242,247,.15); margin:18px 0; }

.pfm-hero__title{
  position:relative; z-index:2;
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(90px,15vw,240px);
  line-height:.86; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 0%,#cfc7dd 40%,#6d6480 70%,#332e40 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:8px;
}
.pfm-hero__title em{
  font-style:normal;
  background:linear-gradient(180deg,#e8d4ff 0%,var(--pu-a) 45%,var(--pu-b) 75%,#3a2f52 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.pfm-hero__sub{
  position:relative; z-index:2;
  font-size:clamp(14px,1.3vw,17px); line-height:1.7; color:rgba(244,242,247,.55);
  max-width:520px; margin:6px auto;
}
.pfm-hero__cta{
  position:relative; z-index:2; margin-top:20px;
  padding:16px 34px; border-radius:6px;
  background:rgba(244,242,247,.03); border:1px solid rgba(244,242,247,.18);
  color:rgba(244,242,247,.75); font-family:'Space Mono',monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:all .3s var(--e);
}
.pfm-hero__cta:hover{ border-color:var(--pu-a); color:#fff; background:rgba(201,168,232,.08); transform:translateY(-2px); }

.pfm-hero__horizon{
  position:absolute; bottom:-40%; left:50%; transform:translateX(-50%);
  width:160%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 50% 0%, #17141f 0%, #0a0910 55%, #050508 100%);
  box-shadow:0 -40px 120px rgba(201,168,232,.08);
  z-index:1;
}

@media(max-width:768px){
  .pfm-hero__meta{ top:28px; }
  .pfm-hero__meta--left{ left:20px; }
  .pfm-hero__meta--right{ right:20px; }
  .pfm-hero__title{ font-size:clamp(64px,20vw,110px); }
  .pfm-hero__sub{ max-width:88%; font-size:13px; }
}

/* ══════════════════════════════════════
   2. MAP
══════════════════════════════════════ */
.pfm-map-section{
  position:relative; height:100vh; min-height:620px;
  background:#0a0912; overflow:hidden;
}
.pfm-map-controls{
  position:fixed; top:24px; left:24px; z-index:9999;
  display:flex; gap:8px;
}
.pfm-ctrl-btn{
  width:40px; height:40px; border-radius:50%;
  background:rgba(20,18,30,.85); backdrop-filter:blur(10px);
  border:1px solid rgba(244,242,247,.16);
  color:rgba(244,242,247,.8); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .25s;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.pfm-ctrl-btn:hover{ background:rgba(201,168,232,.2); border-color:var(--pu-a); color:#fff; }

.pfm-map-hint{
  position:fixed; top:34px; left:50%; transform:translateX(-50%); z-index:9999;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,242,247,.55); pointer-events:none;
  background:rgba(20,18,30,.7); backdrop-filter:blur(8px);
  padding:6px 16px; border-radius:100px;
}
.pfm-ctrl-btn.is-on{ background:rgba(201,168,232,.25); border-color:var(--pu-a); color:#fff; }
.pfm-map-count{
  position:fixed; top:24px; right:24px; z-index:9999;
  font-family:'Space Mono',monospace; font-size:12px; color:rgba(244,242,247,.55);
  background:rgba(20,18,30,.85); backdrop-filter:blur(10px);
  padding:8px 16px; border-radius:100px; border:1px solid rgba(244,242,247,.14);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.pfm-map-count span{ color:var(--pu-a); font-weight:700; }

.pfm-map-viewport{
  position:absolute; inset:0; overflow:hidden;
  background:#0a0912;
}
#pfmMap{
  position:absolute; inset:0; width:100%; height:100%;
  background:#0a0912;
  filter:saturate(1.05) contrast(1.03);
}

/* ── Leaflet dark-theme overrides ── */
.leaflet-container{ background:#0a0912; font-family:'Space Mono',monospace; }
.leaflet-control-attribution{
  background:rgba(8,7,14,.7) !important; color:rgba(244,242,247,.4) !important;
  font-size:9px !important; backdrop-filter:blur(6px);
}
.leaflet-control-attribution a{ color:rgba(201,168,232,.7) !important; }
.leaflet-bar,.leaflet-control{ display:none; } /* using our own custom controls instead */

/* Leaflet divIcon wrapper reset — kill default marker chrome */
.leaflet-div-icon{ background:transparent; border:none; }

.pfm-leaflet-pin{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:44px; height:44px;
}
.pfm-pin__badge{
  position:relative; width:14px; height:14px; z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.pfm-pin__dot{
  width:9px; height:9px; border-radius:50%;
  box-shadow:0 0 14px currentColor, 0 0 3px rgba(255,255,255,.6);
  position:relative; z-index:3;
  transition:transform .25s var(--e);
}
.pfm-leaflet-pin:hover .pfm-pin__dot{ transform:scale(1.3); }
.pfm-pin__ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%; border:1px solid;
  opacity:.45; animation:pfmPinPulse 2.6s ease-in-out infinite; z-index:2;
}
@keyframes pfmPinPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(.75); opacity:.45; }
  50%{ transform:translate(-50%,-50%) scale(1.25); opacity:.1; }
}

.pfm-pin__label{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translate(-50%,-4px);
  white-space:nowrap; pointer-events:none; z-index:5;
  padding:4px 10px; border-radius:5px;
  background:rgba(8,7,14,.9); border:1px solid rgba(244,242,247,.14);
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(244,242,247,.85);
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.pfm-leaflet-pin:hover .pfm-pin__label{ opacity:1; transform:translate(-50%,0); }
.pfm-pin__badge{
  position:relative; width:14px; height:14px; z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.pfm-pin__dot{
  width:9px; height:9px; border-radius:50%;
  box-shadow:0 0 14px currentColor, 0 0 3px rgba(255,255,255,.6);
  position:relative; z-index:3;
  transition:transform .25s var(--e);
}
.pfm-leaflet-pin:hover .pfm-pin__dot{ transform:scale(1.3); }
.pfm-pin__ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%; border:1px solid;
  opacity:.45; animation:pfmPinPulse 2.6s ease-in-out infinite; z-index:2;
}
.pfm-leaflet-pin:hover{ z-index:9 !important; }

.pfm-pin__preview{
  position:absolute; bottom:calc(100% + 16px); left:50%; transform:translate(-50%,8px);
  width:220px; border-radius:12px; overflow:hidden;
  background:#12111c; border:1px solid rgba(244,242,247,.1);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .3s var(--e), transform .3s var(--e);
  z-index:10;
}
.pfm-leaflet-pin:hover .pfm-pin__preview{ opacity:1; transform:translate(-50%,0); }
.pfm-pin__preview-media{ position:relative; aspect-ratio:4/3; background:#1a1a2e; }
.pfm-pin__preview-media img,.pfm-pin__preview-grad{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pfm-pin__preview-body{ padding:12px 14px; display:flex; flex-direction:column; gap:5px; }
.pfm-pin__preview-industry{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,242,247,.4); }
.pfm-pin__preview-title{ font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:.01em; color:#fff; line-height:1; }
.pfm-pin__preview-result{ align-self:flex-start; margin-top:2px; padding:3px 10px; border-radius:100px; font-family:'Space Mono',monospace; font-size:9px; font-weight:700; color:#fff; }
/* Auto-tour: preview opens programmatically as the tour lands on each pin */
.pfm-leaflet-pin.is-tour-open{ z-index:9 !important; }
.pfm-leaflet-pin.is-tour-open .pfm-pin__preview{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.pfm-leaflet-pin.is-tour-open .pfm-pin__label{ opacity:1; transform:translate(-50%,0); }
/* Scrubber — "all clients" strip. Fixed to the actual screen edge, always
   visible, so it can never be clipped by a section shorter than the
   viewport (mobile browser chrome) or hidden behind another panel. */
.pfm-scrubber{
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  border-top:1px solid rgba(244,242,247,.08);
  background:rgba(10,9,18,.9); backdrop-filter:blur(10px);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.pfm-scrubber::-webkit-scrollbar{ display:none; }
.pfm-scrubber__track{ display:flex; min-width:max-content; }
.pfm-scrubber__item{
  display:inline-block; padding:16px 22px; border:none; border-right:1px solid rgba(244,242,247,.06);
  background:transparent; color:rgba(244,242,247,.35); text-decoration:none;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; transition:color .25s, background .25s;
}
.pfm-scrubber__item:hover,.pfm-scrubber__item.is-active{ color:#fff; background:rgba(201,168,232,.08); }

@media(max-width:900px){
  .pfm-map-hint{ font-size:9px; }
}

/* Touch devices: no hover, so preview only shows once JS marks a pin
   as tapped (first tap = preview, second tap = navigate) */
@media (hover: none){
  .pfm-leaflet-pin .pfm-pin__preview{ opacity:0; pointer-events:none; }
  .pfm-leaflet-pin.is-tapped .pfm-pin__preview{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }
  .pfm-leaflet-pin .pfm-pin__label{ opacity:0; }
  .pfm-leaflet-pin.is-tapped .pfm-pin__label{ opacity:1; }
}

@media(prefers-reduced-motion:reduce){
  .pfm-pin__ring{ animation:none; }
  .pfm-map-intro{ display:none; }
  .pfm-leaflet-pin{ opacity:1; transform:none; }
}

/* ══════════════════════════════════════
   STORY INTRO — smoke + title card, fires
   once when the map section enters view
══════════════════════════════════════ */
.pfm-map-intro{
  position:absolute; inset:0; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#050409;
  opacity:0; pointer-events:none;
  overflow:hidden;
}
.pfm-map-intro.is-active{
  opacity:1; pointer-events:auto;
  animation:pfmIntroFade 3.2s ease forwards;
}
@keyframes pfmIntroFade{
  0%{ opacity:0; }
  12%{ opacity:1; }
  72%{ opacity:1; }
  100%{ opacity:0; }
}
.pfm-map-intro__smoke{
  position:absolute; border-radius:50%; filter:blur(60px);
  opacity:.35; mix-blend-mode:screen;
}
.pfm-map-intro__smoke--1{ width:520px; height:420px; top:-10%; left:-10%; background:radial-gradient(circle,rgba(201,168,232,.5),transparent 70%); animation:pfmSmokeDrift1 7s ease-in-out infinite; }
.pfm-map-intro__smoke--2{ width:460px; height:460px; bottom:-15%; right:-5%; background:radial-gradient(circle,rgba(106,191,173,.4),transparent 70%); animation:pfmSmokeDrift2 9s ease-in-out infinite; }
.pfm-map-intro__smoke--3{ width:380px; height:380px; top:30%; left:40%; background:radial-gradient(circle,rgba(232,168,201,.35),transparent 70%); animation:pfmSmokeDrift1 11s ease-in-out infinite reverse; }
@keyframes pfmSmokeDrift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(60px,-30px) scale(1.15); } }
@keyframes pfmSmokeDrift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-50px,40px) scale(1.1); } }

.pfm-map-intro__eyebrow{
  position:relative; z-index:2;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(201,168,232,.6); margin-bottom:18px;
  opacity:0; animation:pfmIntroTextUp .9s .3s ease forwards;
}
.pfm-map-intro__title{
  position:relative; z-index:2; text-align:center;
  font-family:'Bebas Neue',sans-serif; font-size:clamp(48px,7vw,96px); line-height:.9; letter-spacing:-.01em;
  color:#fff; text-shadow:0 0 60px rgba(201,168,232,.25);
  opacity:0; animation:pfmIntroTextUp 1s .5s ease forwards;
}
@keyframes pfmIntroTextUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

/* Pins cascade in after the intro clears, instead of all popping at once */
.pfm-leaflet-pin{ opacity:0; transform:scale(.5); transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.pfm-leaflet-pin.is-revealed{ opacity:1; transform:scale(1); }

/* ══════════════════════════════════════
   LIST VIEW TOGGLE
══════════════════════════════════════ */
.pfm-ctrl-btn--list.is-on{ background:rgba(201,168,232,.2); border-color:var(--pu-a); color:#fff; }

.pfm-list-view{
  position:absolute; inset:0; z-index:35;
  background:#0a0912; overflow-y:auto;
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .35s ease, transform .35s ease;
}
.pfm-list-view.is-active{ opacity:1; pointer-events:auto; transform:translateY(0); }
.pfm-list-view__inner{ max-width:900px; margin:0 auto; padding:70px 24px 40px; }
.pfm-list-view__item{
  display:flex; align-items:center; gap:16px;
  padding:14px; border-radius:14px; text-decoration:none;
  border-bottom:1px solid rgba(244,242,247,.07);
  transition:background .25s;
}
.pfm-list-view__item:hover{ background:rgba(201,168,232,.06); }
.pfm-list-view__thumb{ position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; background:#1a1a2e; flex-shrink:0; }
.pfm-list-view__thumb img,.pfm-list-view__grad{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pfm-list-view__info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pfm-list-view__industry{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,242,247,.4); }
.pfm-list-view__title{ font-family:'Bebas Neue',sans-serif; font-size:22px; color:#fff; line-height:1; }
.pfm-list-view__result{ align-self:flex-start; margin-top:2px; padding:3px 10px; border-radius:100px; font-family:'Space Mono',monospace; font-size:9px; font-weight:700; color:#fff; }
.pfm-list-view__arrow{ color:rgba(244,242,247,.3); font-size:18px; flex-shrink:0; transition:transform .25s,color .25s; }
.pfm-list-view__item:hover .pfm-list-view__arrow{ color:var(--pu-a); transform:translate(3px,-3px); }

/* Hide site header on the portfolio page too */
.page-template-page-portfolio-php .site-header,
.page-template-page-portfolio-php #site-header{
  display:none !important;
}

/* ══════════════════════════════════════
   HIDE SITE FOOTER ON THIS PAGE
   WordPress automatically adds a body class matching the template
   filename (page-template-page-portfolio-php), so this targets the
   portfolio page specifically without touching footer.php.
══════════════════════════════════════ */
.page-template-page-portfolio-php #site-footer,
.page-template-page-portfolio-php .site-footer,
.page-template-page-portfolio-php footer#colophon{
  display:none !important;
}
.pfm-list-view__item:hover .pfm-list-view__arrow{ color:var(--pu-a); transform:translate(3px,-3px); }

@media (max-width: 640px) {
  /* Hide the instructional hint on mobile — it's the thing sitting in
     the middle colliding with everything else, and people already know
     to drag/tap without being told */
  .pfm-map-hint { display: none; }

  /* Shrink + tighten the control cluster so it doesn't reach across
     and overlap the client count on the right */
  .pfm-map-controls {
    top: 14px;
    left: 14px;
    gap: 6px;
  }
  .pfm-ctrl-btn {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  /* Client count badge — smaller, tucked to the corner */
  .pfm-map-count {
    top: 14px;
    right: 14px;
    font-size: 10px;
    padding: 6px 12px;
  }
}