/* ==========================================================================
   CSC Innovations — WORK layer ("The Gallery")
   Loads AFTER site.css on work.html. Vibe: a curated case-study gallery —
   tilted browser-framed brand work, a mono numbered index on the tier demos,
   editorial captions. Cohesive Midnight-Emerald DNA.
   ========================================================================== */
body.page-work{--wk-accent:var(--accent);}

/* The three tiers are a real sequence (Starter → Studio → Signature) and each is a
   different INDUSTRY, so each doorway gets its own signal color on the kind/price
   label + plate tick — instantly distinct, instantly readable. The shared "01/02/03"
   number was removed: it overrode .poster::after and stole the legibility scrim, and
   the kind label already sequences them. (B) */
.page-work .tier-demos .poster.gp1 .kind{color:#F5A742;}      /* Apex · roofing → safety amber */
.page-work .tier-demos .poster.gp2 .kind{color:#A6B6FF;}      /* Atlas · architecture → blueprint periwinkle */
.page-work .tier-demos .poster.gp3 .kind{color:#F2A488;}      /* Ferro · fine dining → warm copper-rose */

/* ---- Brand-work gallery (real generated lockups in browser frames) ----- */
.work-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:var(--s5);}
@media (max-width:900px){.work-gallery{grid-template-columns:1fr;max-width:560px;margin-inline:auto;}}
.wk-item{display:flex;flex-direction:column;gap:var(--s2);}
.wk-frame{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-strong);
  box-shadow:var(--sh-3);background:#0c130f;
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);}
.wk-frame .bar{display:flex;align-items:center;gap:7px;padding:10px 13px;background:var(--surface);
  border-bottom:1px solid var(--line);}
.wk-frame .bar .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--line-strong);}
.wk-frame .bar .dot:nth-child(1){background:#ff5f57;}
.wk-frame .bar .dot:nth-child(2){background:#febc2e;}
.wk-frame .bar .dot:nth-child(3){background:#28c840;}
.wk-frame .bar .url{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--text-faint);
  background:var(--bg-2);padding:4px 11px;border-radius:var(--r-pill);flex:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.wk-frame .shot{display:block;width:100%;background:#fff;}
/* alternating tilt for a gallery-wall feel; straighten on hover */
.work-gallery .wk-item:nth-child(1) .wk-frame{transform:rotate(-1.4deg);}
.work-gallery .wk-item:nth-child(3) .wk-frame{transform:rotate(1.4deg);}
.work-gallery .wk-frame:hover{transform:rotate(0) translateY(-6px);box-shadow:var(--sh-forest);}
.wk-cap{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);}
.wk-cap .wk-name{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--text);letter-spacing:-.01em;}
.wk-cap .wk-kind{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.wk-note{font-size:var(--fs-sm);color:var(--text-muted);max-width:42ch;}

/* a single wide "application" mockup (the Ironside studio render) as a banner */
.wk-banner{margin-top:var(--s5);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-3);position:relative;}
.wk-banner img{width:100%;display:block;}
.wk-banner .wk-banner-cap{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(8,12,22,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.1);}

/* ==========================================================================
   PER-PAGE THEME — "Ink Gallery"
   Work steps off the emerald homepage into a cool indigo-ink gallery so the
   site never reads as one green wall. Same Midnight system, retinted entirely
   through tokens: the base shifts to a blue-black, the accent to periwinkle.
   ========================================================================== */
body.page-work{
  /* COLOR v2 — Ink Gallery, deepened (cool blue-violet, no longer dark-on-dark) */
  --bg:#0C0E1A; --bg-2:#080912; --surface:#171B2A; --surface-2:#222842; --panel:#16205A;
  --accent:#93A4FF; --accent-deep:#5B6BE5; --accent-glow:#C6CEFF; --on-accent:#080C20;
  --accent-12:rgba(147,164,255,.12); --accent-18:rgba(147,164,255,.18);
  --line:rgba(236,240,255,.11); --line-strong:rgba(236,240,255,.20);
  --text:#EEF1FB; --text-muted:rgba(238,241,251,.74); --text-faint:rgba(238,241,251,.55);
  --sh-forest:0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(147,164,255,.16);
  background:var(--bg);
}
/* Knot = PAGE COLOR (client's ask): the Dara mark falls back to site.css
   var(--accent*) so it takes this page's periwinkle in nav + footer + hero. */
/* (I) hero wash — periwinkle, lifted with an electric-violet lower bloom (neon-PNW). */
.page-work .ph-wash{background:
  radial-gradient(115% 130% at 90% -12%,var(--accent-18),transparent 56%),
  radial-gradient(58% 58% at 52% 40%,var(--accent-12),transparent 72%),
  radial-gradient(78% 88% at 6% 112%,rgba(167,139,250,.16),transparent 60%);}
body.page-work .callout{
  background:linear-gradient(135deg,#1c2350,#0c1026);border-color:rgba(140,158,255,.22);
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(140,158,255,.16);}
/* Real GPU screenshots of the actual demos + 3D build — the cards show the site. */
body.page-work .poster.gp1 .poster-art{background:#0f1626 url('img/work/apex.jpg') center top/cover;}     /* Apex Roofing */
body.page-work .poster.gp2 .poster-art{background:#0c1422 url('img/work/atlas.jpg') center top/cover;}    /* Atlas + Reed */
body.page-work .poster.gp3 .poster-art{background:#120e22 url('img/work/ferro.jpg') center top/cover;}    /* Ferro House */
body.page-work .poster.gp4 .poster-art{background:#0c1024 url('img/work/premier.jpg') center top/cover;}  /* Premier 3D */
body.page-work .poster.gp5 .poster-art{background:#10162e url('img/work/craft.jpg') center top/cover;}    /* CSC craft */

/* ---- HERO focal — tilted browser-frame collage (Studio + 3D builds) ----- */
.page-work .ph-collage{position:relative;width:100%;max-width:480px;aspect-ratio:1/.94;margin-inline:auto;}
.page-work .ph-collage .ph-device{position:absolute;width:82%;
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);}
.page-work .ph-collage .c1{top:0;left:0;transform:rotate(-3.2deg);z-index:1;}
.page-work .ph-collage .c2{bottom:0;right:0;transform:rotate(2.6deg);z-index:2;}
.page-work .ph-collage:hover .c1{transform:rotate(-1.6deg) translateY(-4px);box-shadow:var(--sh-forest);}
.page-work .ph-collage:hover .c2{transform:rotate(1.3deg) translateY(-4px);box-shadow:var(--sh-forest);}
@media (max-width:920px){.page-work .ph-collage{max-width:420px;aspect-ratio:1/1;}}

/* (D) idle counter-drift — the two frames breathe gently AGAINST each other; hover
   pauses the drift so the straighten interaction still reads. Off touch + reduced-motion. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .page-work .ph-collage .c1{animation:wkDriftA 11s var(--ease) infinite;}
  .page-work .ph-collage .c2{animation:wkDriftB 13s var(--ease) infinite;}
  .page-work .ph-collage:hover .c1,.page-work .ph-collage:hover .c2{animation-play-state:paused;}
}
@keyframes wkDriftA{0%,100%{transform:rotate(-3.2deg) translateY(0);}50%{transform:rotate(-2.3deg) translateY(-7px);}}
@keyframes wkDriftB{0%,100%{transform:rotate(2.6deg) translateY(0);}50%{transform:rotate(3.5deg) translateY(6px);}}