/* ===================================================================
   PROJECT 100 — Connect ("Find Me Everywhere") component
   Shared, site-wide styling for the single Connect partial that every
   page mounts via assets/js/connect.js. This file + the partial +
   the loader script are the WHOLE component — no page owns any part
   of it, so it never needs to be hand-copied into a page again.
   =================================================================== */
/* Layout only — color comes from each page's own .eyebrow/.btn rules,
   which already exist site-wide (every page uses .eyebrow elsewhere
   too), so this component never fights a page's own accent color. */
.connect-section{ padding:52px 0 60px; border-top:1px solid var(--border); }
.connect-section .wrap{ max-width:1120px; margin:0 auto; padding:0 20px; }
.connect-section .sec-head{ text-align:center; max-width:520px; margin:0 auto 30px; }
.connect-section .eyebrow{ justify-content:center; width:100%; }
.connect-section h2{ margin:0; }
.connect-section p{ margin:0; }

.link-ticker{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%); }
.link-ticker-track{ display:flex; align-items:center; gap:10px; width:max-content; padding:2px 4px; animation:tickerScroll 26s linear infinite; }
.link-ticker:hover .link-ticker-track, .link-ticker:focus-within .link-ticker-track{ animation-play-state:paused; }
@keyframes tickerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .link-ticker-track{ animation:none; overflow-x:auto; -webkit-overflow-scrolling:touch; } .link-ticker{ -webkit-mask-image:none; mask-image:none; } }

.tick-btn{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; white-space:nowrap; padding:9px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text); text-decoration:none; font-family:'Oswald',sans-serif; font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; transition:border-color .15s ease, transform .12s ease; }
.tick-btn .ic{ flex:0 0 auto; width:16px; height:16px; color:var(--text-dim); }
.tick-btn .ic svg{ width:100%; height:100%; }
.tick-btn:active{ transform:scale(.96); }
@media (hover:hover){ .tick-btn:hover{ border-color:var(--text-dim); } }
.tick-btn.primary{ background:var(--red, #e6273f); border-color:var(--red-dim, #a91d30); color:#fff; }
.tick-btn.primary .ic{ color:#fff; }
/* per-page accent override — set via a class on the mount point, e.g.
   <section class="connect-section connect-theme-purple" data-connect-mount>
   for a page (like Ninja CREAMi) whose own accent isn't the site red */
.connect-theme-purple .tick-btn.primary{ background:var(--purple); border-color:var(--purple); color:#1a1030; }
.connect-theme-purple .tick-btn.primary .ic{ color:#1a1030; }

/* quiet skeleton shown for the instant before the partial loads, so the
   section never flashes as a hard empty gap while fetch() resolves */
.connect-section:empty{ min-height:1px; }
.connect-section[data-connect-mount]:not(:has(.wrap)){ opacity:0; }
.connect-section[data-connect-loaded]{ opacity:1; transition:opacity .25s ease; }

@media (max-width:640px){
  .connect-section{ padding:28px 0 34px; }
  .connect-section .wrap{ padding:0 14px; }
  .connect-section .sec-head{ margin-bottom:20px; }
}