/* ==========================================================================
   CSC Innovations — SOCIAL layer ("The Feed Wall")
   Loads AFTER site.css on social.html. Vibe: a bright, alive feed — a scrolling
   marquee of real posts and per-brand feed mockups. Same Midnight system,
   retinted to a warm coral/magenta so the feed page reads loud and social.
   ========================================================================== */

/* ==========================================================================
   PER-PAGE THEME — "Coral Feed"
   ========================================================================== */
body.page-social{
  /* COLOR v2 — Coral Feed, hotter (red-tinted base, clean coral; pink pop kept) */
  --bg:#170F11; --bg-2:#110B0C; --surface:#251A1C; --surface-2:#332329; --panel:#3A1422;
  --accent:#FF7E72; --accent-deep:#DB465A; --accent-glow:#FFB0A0; --on-accent:#2A0B0A;
  --accent-12:rgba(255,126,114,.12); --accent-18:rgba(255,126,114,.18);
  --line:rgba(255,237,233,.11); --line-strong:rgba(255,237,233,.20);
  --text:#FDEFEC; --text-muted:rgba(253,239,236,.76); --text-faint:rgba(253,239,236,.56);
  --sh-forest:0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,126,114,.16);
  --soc-pop:#FF8FB0;
  background:var(--bg);
}
/* Knot = PAGE COLOR (client's ask): mark falls back to site.css var(--accent*)
   → coral in nav + footer + hero. No emerald pin. */

/* pink-pop em + eyebrow; hero atmosphere gets a pink lower wash under the coral */
.page-social .page-hero h1 em{color:var(--soc-pop);}
.page-social .page-hero .eyebrow{color:var(--soc-pop);}
.page-social .page-hero .eyebrow::before{background:var(--soc-pop);}
.page-social .ph-wash{background:
  radial-gradient(115% 130% at 90% -12%,var(--accent-18),transparent 56%),
  radial-gradient(90% 85% at 6% 112%,rgba(255,143,176,.16),transparent 60%);}

/* featured tier glows a touch brighter on this page */
.page-social .tier.featured{box-shadow:var(--sh-3),0 0 0 1px color-mix(in srgb,var(--soc-pop) 50%,transparent);}

/* ---- Marquee of real posts (the "feed never stops" signature) ---------- */
.feed-marquee{position:relative;overflow:hidden;padding-block:var(--s2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.feed-track{display:flex;gap:var(--s3);width:max-content;will-change:transform;
  animation:marq 46s linear infinite;}
.feed-marquee:hover .feed-track{animation-play-state:paused;}
.feed-track .tile{flex:0 0 auto;width:210px;height:210px;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-2);background:var(--surface);}
.feed-track .tile img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .feed-track{animation:none;width:auto;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;padding-bottom:var(--s2);}
}

/* ---- Per-brand feed mockups -------------------------------------------- */
.feed-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s5);}
@media (max-width:900px){.feed-wall{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.feed-wall{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}}
.feed-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);}
.feed-card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--line-strong);}
.feed-card .fc-head{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line);}
.feed-card .fc-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 auto;border:1px solid var(--line-strong);}
.feed-card .fc-avatar img{width:100%;height:100%;object-fit:cover;}
.feed-card .fc-name{font-family:var(--serif);font-weight:600;font-size:16px;color:var(--text);line-height:1.1;}
.feed-card .fc-name small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--soc-pop);text-transform:uppercase;margin-top:3px;}
.feed-card .fc-cover img{width:100%;display:block;border-bottom:1px solid var(--line);}
.feed-card .fc-posts{display:grid;grid-template-columns:1fr 1fr 1fr;}
.feed-card .fc-posts img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.feed-card .fc-foot{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);}
.feed-card .fc-foot .heart{color:var(--soc-pop);}

/* ---- (G) premium showcase stack — "this is what good social design looks like" */
.showcase-stack{display:grid;gap:clamp(26px,4vw,48px);max-width:980px;margin-inline:auto;}
.showcase{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-strong);
  box-shadow:var(--sh-3);background:#0a0607;position:relative;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);}
.showcase:hover{transform:translateY(-5px);box-shadow:var(--sh-forest);border-color:color-mix(in srgb,var(--soc-pop) 40%,var(--line-strong));}
.showcase img{width:100%;display:block;}
.showcase figcaption{padding:var(--s3) var(--s4);font-size:var(--fs-sm);color:var(--text-muted);
  border-top:1px solid var(--line);background:var(--surface);line-height:1.55;}
.showcase .sc-k{display:block;font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soc-pop);margin-bottom:6px;}

/* the "more samples" strip keeps the gallery look but brighter caption */
.page-social .gallery img{border-color:var(--line);}
.page-social .figure-cap{color:var(--text-faint);}

/* closing callout — warm coral on plum */
.page-social .callout{background:linear-gradient(135deg,#4a1622,#1d0c11);
  border-color:color-mix(in srgb,var(--soc-pop) 34%,transparent);
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,126,114,.16);}

/* ---- HERO focal — phone frame with a real-kit feed that slowly drifts ---- */
.page-social .ph-phone{position:relative;width:min(290px,76%);aspect-ratio:9/18.6;margin-inline:auto;
  border-radius:42px;background:#170d0e;padding:10px;
  box-shadow:var(--sh-3),0 0 0 1px var(--line-strong),inset 0 0 0 1px rgba(255,255,255,.04);}
.page-social .ph-phone .screen{position:relative;height:100%;border-radius:32px;overflow:hidden;background:var(--surface);}
/* (G) ONE complete branded profile-feed, full-bleed — no more mid-scroll half-cut posts.
   Top-anchored so the cover + profile header always read. */
.page-social .ph-phone .phone-feed{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
/* gentle float of the whole phone (idle) lives on .ph-focal so flair.js's pointer-tilt
   on .ph-phone is untouched — see below. Slow Ken-Burns adds life without scrolling. */
@media (prefers-reduced-motion:no-preference){@media (pointer:fine){
  .page-social .ph-focal{animation:phoneFloat 7.5s var(--ease) infinite;}
  .page-social .ph-phone .phone-feed{animation:phoneKen 30s var(--ease) infinite;transform-origin:center top;}
}}
@keyframes phoneFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes phoneKen{0%,100%{transform:scale(1.005);}50%{transform:scale(1.035);}}
@media (max-width:920px){.page-social .ph-phone{width:min(260px,66vw);}}