/* ============================================================
   Goose — shared pixel-Goose personality (interior pages)
   Marquee, press-G flock, real-screenshot frame, pixel wink,
   city tie-in chip. Lifted verbatim from index.html so the look
   is byte-identical. Relies on each page's own inline dark tokens
   (--ink-2, --card-line, --body-text, --gold, --emerald,
    --emerald-bright, --shadow, --sage, --label-text, --porcelain).
   ============================================================ */

/* ---- cheeky marquee (modules + taglines) ---- */
.marquee{
  position:relative;z-index:5;
  background:var(--ink-2);
  border-top:1px solid var(--card-line);
  border-bottom:1px solid var(--card-line);
  padding:15px 0;overflow:hidden;
}
.marquee-track{display:flex;width:max-content;animation:marq 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{
  font-family:"Spline Sans Mono";font-weight:500;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--body-text);padding:0 10px;white-space:nowrap;display:flex;align-items:center;gap:22px;
}
.marquee-item.tagline{color:var(--gold);}
.marquee-item .sep{display:inline-flex;color:var(--emerald-bright);}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---- press-G flock ---- */
.flock{position:fixed;inset:0;z-index:5000;pointer-events:none;overflow:hidden;}
.flock .fg{position:absolute;left:0;top:0;will-change:transform;animation:flyX var(--d,2.8s) linear var(--dl,0s) both;}
.flock .fg svg{display:block;image-rendering:pixelated;filter:drop-shadow(2px 3px 0 var(--shadow));animation:flyBob .55s ease-in-out infinite alternate;}
@keyframes flyX{from{transform:translate(-100px,var(--y,30vh));}to{transform:translate(110vw,var(--y,30vh));}}
@keyframes flyBob{from{transform:translateY(-4px);}to{transform:translateY(4px);}}

/* ---- real product screenshot in the site's window chrome ----
   Use inside the existing .panel + .cock-bar pattern:
   <figure class="shot"><div class="cock-bar">…</div><img …></figure>  */
.shot{margin:0;}
.shot img{display:block;width:100%;height:auto;}
.shot-cap{margin-top:12px;font-family:"Spline Sans Mono";font-size:.76rem;letter-spacing:.06em;color:var(--label-text);}
.shot-cap b{color:var(--sage);font-weight:500;}

/* ---- pixel-goose wink (goose in shades) ---- */
.px-goose{display:inline-flex;align-items:center;gap:11px;}
.px-goose svg{image-rendering:pixelated;filter:drop-shadow(2px 3px 0 var(--shadow));}
.px-goose .px-say{font-family:"Spline Sans Mono";font-size:.78rem;letter-spacing:.03em;color:var(--label-text);font-style:italic;}

/* ---- city tie-in chip (module → its building) ---- */
.city-tie{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  padding:9px 15px;border:1px solid var(--card-line);border-radius:999px;
  background:var(--ink-2);font-family:"Spline Sans Mono";font-size:.78rem;
  letter-spacing:.03em;color:var(--body-text);transition:border-color .2s ease,color .2s ease;
}
.city-tie:hover{border-color:var(--emerald);color:var(--porcelain);}
.city-tie svg{width:14px;height:14px;}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none !important;}
  .flock{display:none !important;}
  .flock .fg,.flock .fg svg{animation:none !important;}
}

/* ===== "Who it's for" nav dropdown (shared) ===== */
.nav-dd{position:relative;display:inline-flex;align-items:center;}
.nav-dd-top{display:inline-flex;align-items:center;gap:5px;}
.nav-dd-caret{font-size:.72em;opacity:.75;transition:transform .15s ease;}
.nav-dd:hover .nav-dd-caret,.nav-dd:focus-within .nav-dd-caret{transform:translateY(2px);}
.nav-dd::after{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:14px;}
.nav-dd-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  display:flex;flex-direction:column;min-width:196px;gap:2px;
  background:color-mix(in oklch, var(--ink) 94%, var(--porcelain));
  border:1px solid var(--card-line);border-radius:12px;padding:8px;
  box-shadow:0 22px 44px -22px oklch(0.06 0.02 168 / .95), 0 2px 8px -4px oklch(0.06 0.02 168 / .7);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility 0s .16s;z-index:1200;
}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  transition:opacity .16s ease, transform .16s ease;
}
.nav-dd-menu a{
  font-family:"Hanken Grotesk";font-weight:500;font-size:14px;color:var(--body-text);
  padding:9px 12px;border-radius:8px;white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.nav-dd-menu a:hover{background:color-mix(in oklch,var(--emerald) 18%,transparent);color:var(--porcelain);}
@media (max-width:820px){.nav-dd{display:none;}}