/* ============================================================
   BEN LAMMERS — Synthetic Noir
   Shared design system: glass, grain, duotone, type, motion
   ============================================================ */

:root{
  --bg:#0A0A0A;
  --primary:#c0c1ff;
  --primary-deep:#8083ff;
  --secondary:#ddb7ff;
  --cyan:#4cd7f6;
  --ink:#e9e7e4;
  --muted:#8b8995;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
::selection{ background:rgba(192,193,255,.28); color:#fff; }

/* keyboard focus — visible on the near-black canvas (cyan = 11.65:1) */
:where(a,button,input,textarea,[tabindex],[role="button"]):focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px;
}
:focus:not(:focus-visible){ outline:none; }

/* skip link */
.skip-link{ position:fixed; top:10px; left:10px; z-index:400; transform:translateY(-150%); transition:transform .25s var(--ease); }
.skip-link:focus{ transform:none; }

/* Fraunces display defaults — editorial, soft, high-end */
.font-display{ font-optical-sizing:auto; font-variation-settings:"SOFT" 0,"WONK" 0; }
.italic-accent{ font-style:italic; font-variation-settings:"SOFT" 40,"WONK" 1; }

/* ---------- Grain + ambient ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:1; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(128,131,255,.10) 0%, transparent 60%);
  transition:opacity .6s var(--ease); opacity:0; will-change:transform;
}

/* ---------- Glass ---------- */
.glass{
  background:rgba(18,18,18,.62);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
}
.glass-2{
  background:rgba(23,23,23,.78);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line);
}
.glass-hover{ transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease); }
.glass-hover:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.hairline{ border:1px solid var(--line); }

/* gradient hairline edge (light catching glass) */
.edge-lit{ position:relative; }
.edge-lit::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,0) 35%, rgba(76,215,246,.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:'Geist',monospace; font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--primary);
}
.mono-label{ font-family:'Geist',monospace; letter-spacing:.14em; text-transform:uppercase; }
.section-index{
  font-family:'Geist',monospace; font-size:12px; letter-spacing:.2em;
  color:var(--muted);
}
.text-balance{ text-wrap:balance; }

/* fluid display sizes */
.d-hero{ font-size:clamp(2.7rem, 9.2vw, 8.4rem); line-height:.92; letter-spacing:-.045em; overflow-wrap:break-word; }
.d-xl{ font-size:clamp(2.4rem, 5.5vw, 4.6rem); line-height:.98; letter-spacing:-.03em; }
.d-lg{ font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.02; letter-spacing:-.025em; }

/* underline shimmer for nav/links */
.link-u{ position:relative; }
.link-u::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.link-u:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:'Geist',monospace; font-size:13px; letter-spacing:.06em; font-weight:500;
  padding:13px 22px; border-radius:999px; transition:all .3s var(--ease); white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:#0a0a0a; }
.btn-primary:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 12px 40px -12px rgba(192,193,255,.5); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.04); }
.btn-glow{ background:linear-gradient(120deg,var(--primary-deep),var(--secondary)); color:#0a0a0a; }
.btn-glow:hover{ box-shadow:0 14px 44px -10px rgba(128,131,255,.6); transform:translateY(-2px); }

/* chips */
.chip{
  display:inline-flex; align-items:center; gap:7px; font-family:'Geist',monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:7px 13px;
  border-radius:999px; border:1px solid var(--line); color:var(--ink);
}
.pip{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }

/* ---------- Image treatment ---------- */
.shot{ position:relative; overflow:hidden; background:#141414; }
.shot img, .shot video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease), filter .6s var(--ease); }
.shot::after{ /* subtle darkening + violet lift for cohesion */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,.05) 0%, rgba(10,10,10,.55) 100%);
  mix-blend-mode:multiply;
}
.duotone img, .duotone video{ filter:grayscale(.15) contrast(1.03) brightness(.97); }
.duotone:hover img, .duotone:hover video{ filter:grayscale(0) contrast(1.02) brightness(1); }
/* hero media: keep parallax snappy (don't ease the transform) + full color */
[data-hero-img] img, [data-hero-img] video{ transition:filter .6s var(--ease); }

/* ---- video / reels ---- */
.reel{ position:relative; overflow:hidden; background:#0e0e0e; }
.reel video{ width:100%; height:100%; object-fit:cover; display:block; }
/* play / reel affordances on video work tiles */
.work-card .badge-reel, .reel .badge-reel, .proof .badge-reel{
  position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  font-family:'Geist',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px; background:rgba(10,10,10,.55); backdrop-filter:blur(6px);
  border:1px solid var(--line-strong); color:var(--ink);
}
.badge-reel .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.play-fab{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; z-index:2; border-radius:50%;
  display:grid; place-items:center; background:rgba(10,10,10,.4); backdrop-filter:blur(6px);
  border:1px solid var(--line-strong); color:#fff; opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
}
.work-card:hover .play-fab{ opacity:1; }
@media (hover:none){ .work-card .play-fab{ opacity:1; } }

/* lightbox media (image OR vertical video) */
.lightbox video{ max-width:min(92vw,460px); max-height:86vh; object-fit:contain; border:1px solid var(--line-strong); border-radius:10px; background:#000; }
.lb-photo,.lb-video{ display:none; }
.lightbox.is-photo .lb-photo{ display:block; }
.lightbox.is-video .lb-video{ display:block; }

/* ---------- Marquee ---------- */
.marquee-mask{ -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; width:max-content; }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.08s } [data-reveal-d="2"]{ transition-delay:.16s }
[data-reveal-d="3"]{ transition-delay:.24s } [data-reveal-d="4"]{ transition-delay:.32s }
[data-reveal-d="5"]{ transition-delay:.40s } [data-reveal-d="6"]{ transition-delay:.48s }

/* line clip reveal for big headlines */
.clip-line{ overflow:hidden; display:block; }
.clip-line > span{ display:block; transform:translateY(105%); transition:transform 1.05s var(--ease); }
.in .clip-line > span, [data-reveal].in .clip-line > span, .clip-line.in > span{ transform:none; }

/* ---------- Portfolio ---------- */
.work-card{ position:relative; overflow:hidden; cursor:pointer; }
.work-card .meta{ position:absolute; inset:auto 0 0 0; padding:18px 20px; transform:translateY(8px); opacity:0; transition:all .5s var(--ease);
  background:linear-gradient(180deg,transparent,rgba(8,8,8,.86)); }
.work-card:hover .meta{ transform:none; opacity:1; }
.work-card:hover img{ transform:scale(1.06); }
.work-card .corner{ position:absolute; top:14px; right:14px; opacity:0; transform:translateY(-6px) rotate(-8deg); transition:all .5s var(--ease); }
.work-card:hover .corner{ opacity:1; transform:none; }
.filter-chip{ transition:all .3s var(--ease); cursor:pointer; }
@media (hover:none){ .filter-chip{ min-height:44px; } }
.filter-chip[aria-pressed="true"]{ background:var(--ink); color:#0a0a0a; border-color:var(--ink); }
.is-hidden{ display:none !important; }

/* ---------- Stepper / process ---------- */
.step-rail{ background:rgba(255,255,255,.1); }
.step-fill{ background:linear-gradient(90deg,var(--primary),var(--cyan)); box-shadow:0 0 18px rgba(192,193,255,.4); }

/* ai/studio pulse — varied so it doesn't read as the same blob pasted repeatedly */
.pulse-orb{ background:radial-gradient(circle,var(--cyan) 0%,transparent 70%); opacity:.14; animation:pulseorb 5s infinite ease-in-out; }
.pulse-orb.v-violet{ background:radial-gradient(circle,var(--primary-deep) 0%,transparent 70%); }
.pulse-orb.v-magenta{ background:radial-gradient(circle,var(--secondary) 0%,transparent 72%); }
@keyframes pulseorb{ 0%,100%{ transform:scale(1); opacity:.12 } 50%{ transform:scale(1.25); opacity:.28 } }

/* touch: hover-only overlays must be visible without hover */
@media (hover:none){
  .work-card .meta{ opacity:1; transform:none; }
  .work-card .corner{ opacity:1; transform:none; }
  .proof .acts{ opacity:1; }
}

/* chart scaffolding + tooltip */
.chart-wrap{ position:relative; }
.chart-grid{ position:absolute; inset:16px; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; }
.chart-grid span{ height:1px; width:100%; background:rgba(255,255,255,.05); }
.chart-tip{ position:absolute; z-index:5; transform:translate(-50%,-130%); background:rgba(23,23,23,.95); border:1px solid var(--line-strong);
  border-radius:8px; padding:4px 8px; font-family:'Geist',monospace; font-size:11px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .2s; }
.chart-tip.show{ opacity:1; }

/* day×hour "best time" heatmap (DOM grid; see assets/js/charts.js heatmap()) */
.bl-heat{ display:flex; flex-direction:column; gap:3px; }
.bl-heat-row{ display:grid; grid-template-columns:30px repeat(24,1fr); gap:3px; align-items:center; }
.bl-heat-day{ font-family:'Geist',monospace; font-size:9px; color:var(--muted); text-align:right; padding-right:4px; }
.bl-heat-h{ font-family:'Geist',monospace; font-size:8px; color:var(--muted); text-align:center; height:10px; line-height:10px; }
.bl-heat-c{ aspect-ratio:1; border-radius:3px; transition:transform .15s var(--ease); }
.bl-heat-c[title]:hover{ transform:scale(1.35); outline:1px solid rgba(255,255,255,.25); }
.bl-heat-peak{ box-shadow:0 0 8px rgba(76,215,246,.7); }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:24px;
  background:rgba(6,6,6,.9); backdrop-filter:blur(8px); }
.lightbox.open{ display:grid; }
.lightbox img{ max-width:min(92vw,1100px); max-height:86vh; object-fit:contain; border:1px solid var(--line-strong); }

/* ---------- Counters / charts ---------- */
.bar{ transition:height 1.1s var(--ease); }

/* scrollbar */
.scrollbar-hide::-webkit-scrollbar{ display:none; }
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
::-webkit-scrollbar{ width:9px; height:9px } ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:9px } ::-webkit-scrollbar-track{ background:transparent }

/* nav scrolled state */
.nav-shell{ transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s; border-bottom:1px solid transparent; }
.nav-shell.scrolled{ background:rgba(10,10,10,.72); backdrop-filter:blur(16px); border-bottom-color:var(--line); }

/* portal sidebar nav */
.nav-link{ transition:background .25s var(--ease), color .25s var(--ease); }
.nav-link:hover{ background:rgba(255,255,255,.05); color:var(--ink); }
.nav-link.active{ background:linear-gradient(120deg,rgba(128,131,255,.22),rgba(221,183,255,.12)); color:#fff; border:1px solid rgba(192,193,255,.25); }

/* proof tile */
.proof{ position:relative; overflow:hidden; cursor:pointer; }
.proof .acts{ position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; padding:10px;
  background:linear-gradient(180deg,transparent 50%,rgba(6,6,6,.7)); opacity:0; transition:opacity .35s var(--ease); pointer-events:none; }
.proof:hover .acts{ opacity:1; }
.proof .acts button{ pointer-events:auto; }
.proof .heart.on{ color:#ffb4ab; }
/* full-tile opener button (keeps heart/download as valid flat siblings, not nested in a role=button) */
.proof-open{ position:absolute; inset:0; z-index:1; background:transparent; border:0; cursor:pointer; }
.proof .badge-reel, .proof > .chip{ pointer-events:none; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); z-index:300;
  opacity:0; transition:all .4s var(--ease); pointer-events:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* command palette */
.cmdk{ position:fixed; inset:0; z-index:250; display:none; padding:14vh 16px 0; justify-content:center; background:rgba(6,6,6,.7); backdrop-filter:blur(6px); }
.cmdk.open{ display:flex; }

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; } .clip-line>span{ transform:none; }
}

/* ============================================================
   ANALYTICS COMPONENTS  (client portal + master dashboard)
   metric dropdown · sortable table · toggle-chip legend
   ============================================================ */

/* metric dropdown — the "specific inquiry" picker (Zernio-style) */
.mdd{ position:relative; }
.mdd-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:196px; padding:6px;
  border-radius:14px; background:rgba(20,20,23,.97); border:1px solid var(--line-strong);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.mdd-item{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border-radius:9px;
  font-size:14px; color:var(--ink); cursor:pointer; text-align:left; background:none; border:0; }
.mdd-item:hover{ background:rgba(255,255,255,.06); }
.mdd-item .ck{ margin-left:auto; color:var(--primary); opacity:0; }
.mdd-item.sel{ background:rgba(192,193,255,.08); }
.mdd-item.sel .ck{ opacity:1; }

/* sortable data table */
.tbl{ border-collapse:collapse; }
.tbl th, .tbl td{ padding:11px 12px; border-bottom:1px solid var(--line); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl th{ font-family:'Geist',monospace; font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.tbl td:first-child, .tbl th:first-child{ text-align:left; }
.tbl tbody tr{ transition:background .2s var(--ease); }
.tbl tbody tr:hover{ background:rgba(255,255,255,.025); }
th.sortable{ cursor:pointer; user-select:none; }
th.sortable:hover{ color:var(--ink); }
th.sortable .ar{ opacity:.3; font-size:10px; }
th.sortable.asc .ar, th.sortable.desc .ar{ opacity:1; color:var(--primary); }

/* toggle-chip legend (engagement-over-time) */
.chip-toggle{ cursor:pointer; opacity:.4; transition:opacity .14s var(--ease), border-color .14s var(--ease); }
.chip-toggle.on{ opacity:1; }
.chip-toggle:hover{ border-color:var(--line-strong); }
.chip-sw{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }