/* ============================================================
   TMG SECURITY — APPLICATION & PRODUCT SECURITY PRACTICE
   Loaded with tmg-home.css (tokens, header, footer) and
   tmg-services.css (shared service furniture).

   Visual language, distinct from the other three:
     Offensive  — attack paths converging on a target
     Defensive  — telemetry converging on operations (cyclical)
     Cloud      — vertical depth; a camera descending through layers
     Application— HORIZONTAL. A pipeline the camera travels ALONG,
                  left to right, the way software actually moves.

   That axis is the differentiator. Cloud descends; Application
   advances. Plus code panels, a split-and-merge, and an
   architecture that assembles itself in stages.

   CSS 3D and SVG only — no WebGL, no animation library.
   ============================================================ */

.app{ --acc:var(--cyan); --acc-soft:rgba(79,216,234,.13); --acc-line:rgba(79,216,234,.42); }
.app.accent-cyan  { --acc:var(--cyan);  --acc-soft:rgba(79,216,234,.13); --acc-line:rgba(79,216,234,.42); }
.app.accent-violet{ --acc:#9B85FF;      --acc-soft:rgba(124,92,250,.15); --acc-line:rgba(124,92,250,.45); }
.app.accent-hyper { --acc:var(--hyper); --acc-soft:rgba(255,79,216,.12); --acc-line:rgba(255,79,216,.42); }

/* ============================================================
   HERO — PRODUCT LIFECYCLE
   ============================================================ */
.app-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:center; }
.prod-stage{ position:relative; width:100%; max-width:500px; margin:0 auto; }
.prod-svg{ width:100%; height:auto; overflow:visible; }
.prod-ring{ fill:none; stroke:var(--line2); stroke-width:1; }
.prod-ring.dashed{ stroke:var(--line); stroke-dasharray:3 7; }
.prod-orbit{ fill:none; stroke:rgba(79,216,234,.34); stroke-width:1.2; stroke-dasharray:7 9; animation:prodOrbit 9s linear infinite; }
@keyframes prodOrbit{ to{ stroke-dashoffset:-160; } }
.prod-node{ fill:var(--panel2); stroke:var(--line2); stroke-width:1; }
.prod-node.check{ fill:rgba(79,216,234,.16); stroke:var(--cyan); }
.prod-core{ fill:url(#appCore); stroke:rgba(79,216,234,.5); stroke-width:1.2; }
.prod-label{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:8px; letter-spacing:1.3px; color:var(--ice);
  background:rgba(4,6,12,.9); border:1px solid var(--line2); border-radius:11px;
  padding:4px 9px; white-space:nowrap; pointer-events:none;
}
.prod-label.check{ border-color:rgba(79,216,234,.45); color:var(--cyan); }
.prod-core-label{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; width:120px; }
.prod-core-label span{ display:block; font-family:var(--mono); font-size:7.5px; letter-spacing:2px; color:var(--fog); }
.prod-core-label b{ display:block; font-family:var(--display); font-size:13px; font-weight:700; color:var(--white); line-height:1.25; }
@media (max-width:1000px){ .app-hero-grid{ grid-template-columns:1fr; gap:var(--s5); } .prod-stage{ max-width:400px; order:-1; } }
@media (max-width:420px){ .prod-stage{ max-width:300px; } .prod-label{ font-size:7px; padding:3px 7px; letter-spacing:.9px; } }

/* ============================================================
   01 — PIPELINE CAMERA  (the signature component)
   A sticky viewport; the pipeline slides HORIZONTALLY past the
   camera as the page is scrolled. Cloud descends, this advances.
   ============================================================ */
.pipe3d{ position:relative; }
.pipe3d-rail{ height:400vh; }
.pipe3d-view{
  position:sticky; top:0; height:100vh; display:flex; align-items:center;
  perspective:1200px; overflow:hidden;
}
.pipe3d-track{
  display:flex; align-items:center; gap:70px; padding:0 50vw;
  transform:translate3d(var(--px,0px),0,0);
  will-change:transform;
}
.pipe3d-stage{
  flex:none; width:280px; transform-style:preserve-3d;
  transition:opacity .35s var(--ease);
}
.pipe3d-card{
  border:1px solid var(--line2); border-radius:var(--r-lg); padding:24px 22px;
  background:linear-gradient(155deg, rgba(13,20,36,.92), rgba(6,9,17,.8));
  box-shadow:0 26px 70px rgba(0,0,0,.55);
  transform:rotateY(var(--ry,0deg)) scale(var(--sc,.86));
  opacity:var(--op,.3); transition:border-color .4s;
  will-change:transform,opacity;
}
.pipe3d-stage.on .pipe3d-card{ border-color:var(--acc-line); }
.pipe3d-n{ font-family:var(--hud); font-size:11px; font-weight:700; letter-spacing:1.5px; color:var(--acc); }
.pipe3d-t{ font-family:var(--display); font-size:23px; font-weight:700; margin:10px 0 8px; letter-spacing:-.4px; }
.pipe3d-d{ font-size:12.5px; color:var(--fog); line-height:1.6; }
.pipe3d-chk{
  margin-top:15px; padding-top:13px; border-top:1px dashed var(--line2);
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.4px; color:var(--acc);
}
/* connector between stages */
.pipe3d-link{ flex:none; width:70px; height:1px; background:var(--line3); position:relative; }
.pipe3d-link::after{
  content:''; position:absolute; right:-4px; top:-3px; width:6px; height:6px;
  border-top:1px solid var(--acc); border-right:1px solid var(--acc); transform:rotate(45deg); opacity:.6;
}
.pipe3d-hud{ position:absolute; left:50%; bottom:36px; transform:translateX(-50%); display:flex; gap:7px; }
.pipe3d-hud i{ width:20px; height:2px; border-radius:2px; background:var(--line2); transition:background .3s; }
.pipe3d-hud i.on{ background:var(--acc); box-shadow:0 0 8px var(--acc); }
.pipe3d-cap{
  position:absolute; left:50%; top:26px; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--fog); white-space:nowrap;
}

/* Mobile: the pipeline becomes a vertical list. No sticky, no
   horizontal travel — the lifecycle still reads top to bottom. */
@media (max-width:820px){
  .pipe3d-rail{ height:auto; }
  .pipe3d-view{ position:static; height:auto; perspective:none; overflow:visible; }
  .pipe3d-track{ flex-direction:column; gap:9px; padding:0; transform:none !important; align-items:stretch; }
  .pipe3d-stage{ width:100%; }
  .pipe3d-card{ transform:none !important; opacity:1 !important; box-shadow:none; padding:18px 16px; }
  .pipe3d-t{ font-size:18px; }
  .pipe3d-link{ width:1px; height:16px; margin:0 auto; }
  .pipe3d-link::after{ right:-3px; top:auto; bottom:-4px; transform:rotate(135deg); }
  .pipe3d-hud,.pipe3d-cap{ display:none; }
}

/* ============================================================
   02 — SOFTWARE STACK EXPLOSION
   Eight layers fan apart with security markers appearing in the
   gaps. Cloud's explode stacks in Z; this one fans and annotates.
   ============================================================ */
.stackx{ position:relative; perspective:1500px; padding:var(--s6) 0; overflow:hidden; }
.stackx-inner{
  position:relative; transform-style:preserve-3d; height:430px;
  transform:rotateX(var(--srx,50deg)) rotateZ(var(--srz,-14deg));
}
.stackx-layer{
  position:absolute; left:50%; top:50%; width:min(420px,74vw); height:104px;
  margin:-52px 0 0 max(-210px,-37vw);
  border:1px solid var(--line2); border-radius:var(--r-md);
  background:linear-gradient(150deg, rgba(13,20,36,.94), rgba(6,9,17,.82));
  transform:translateZ(var(--sz,0px));
  display:flex; align-items:center; justify-content:space-between; padding:13px 18px;
  box-shadow:0 16px 44px rgba(0,0,0,.5); transition:border-color .5s, box-shadow .5s;
  will-change:transform;
}
.stackx-layer.lit{ border-color:var(--acc-line); box-shadow:0 16px 54px var(--acc-soft); }
.stackx-n{ font-family:var(--hud); font-size:10px; font-weight:700; color:var(--acc); opacity:.7; flex:none; }
.stackx-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; color:var(--ice); flex:1; margin-left:14px; }
.stackx-mark{
  font-family:var(--mono); font-size:7.5px; letter-spacing:1.1px; color:var(--fog);
  border:1px solid var(--line2); border-radius:9px; padding:3px 8px; flex:none;
  opacity:0; transition:opacity .5s;
}
.stackx-layer.lit .stackx-mark{ opacity:1; border-color:var(--acc-line); color:var(--acc); }
.stackx-cap{ text-align:center; font-family:var(--mono); font-size:9px; letter-spacing:1.7px; color:var(--fog); margin-top:var(--s4); }
@media (max-width:640px){ .stackx{ perspective:900px; } .stackx-inner{ height:340px; } .stackx-layer{ height:82px; margin-top:-41px; padding:10px 13px; } .stackx-mark{ display:none; } }

/* ============================================================
   03 — SAST / DAST SPLIT → MERGE
   ============================================================ */
.split{
  position:relative; perspective:1200px;
  /* rotateY under perspective magnifies the near edge, so a rotated column is
     wider than its layout box. Clip here rather than letting it push the page. */
  overflow:hidden; padding:2px;
}
.split-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); transform-style:preserve-3d; }
.split-side{
  border:1px solid var(--line2); border-radius:var(--r-lg); padding:var(--s5) var(--s4);
  background:linear-gradient(160deg, rgba(13,20,36,.8), rgba(6,9,17,.7));
  transform:translateX(var(--sx,0px)) rotateY(var(--sry,0deg));
  transition:border-color .5s; will-change:transform;
}
.split-side.sast{ --sry:4deg; }
.split-side.dast{ --sry:-4deg; }
.split-side.lit{ border-color:var(--acc-line); }
.split-k{ font-family:var(--hud); font-size:19px; font-weight:900; letter-spacing:1.4px; color:var(--cyan); }
.split-side.dast .split-k{ color:#B79CFF; }
.split-sub{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.6px; color:var(--fog); margin-top:6px; }
.split-flow{ display:flex; flex-direction:column; gap:7px; margin:var(--s4) 0 var(--s3); }
.split-flow span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.3px; padding:9px 13px;
  border-radius:10px; border:1px solid var(--line); color:var(--ice); background:var(--deep); text-align:center;
}
.split-note{ font-size:12px; color:var(--fog); line-height:1.55; }
.split-merge{
  margin-top:var(--s4); text-align:center; padding:22px;
  border:1px dashed var(--line2); border-radius:var(--r-lg);
  background:linear-gradient(120deg, rgba(79,216,234,.07), rgba(124,92,250,.09));
  opacity:var(--mo,.35); transform:scale(var(--ms,.96)); transition:opacity .5s, transform .5s var(--ease);
}
.split-merge b{ font-family:var(--display); font-size:19px; font-weight:700; display:block; }
.split-merge span{ font-size:12.5px; color:var(--fog); }
@media (max-width:760px){
  .split{ perspective:none; }
  .split-cols{ grid-template-columns:1fr; }
  .split-side{ transform:none !important; }
}

/* ============================================================
   04 — THREAT MODEL ARCHITECTURE
   The architecture assembles in stages: components, then trust
   boundaries, then data flows, then threats, then mitigations.
   ============================================================ */
.tmodel{ border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s4);
  background:linear-gradient(180deg, rgba(13,20,36,.55), rgba(6,9,17,.55)); }
.tmodel-svg{ width:100%; height:auto; overflow:visible; display:block; }
.tm-node{ fill:var(--panel2); stroke:var(--line2); stroke-width:1.2; opacity:0; transition:opacity .5s, stroke .5s; }
.tmodel.s1 .tm-node{ opacity:1; }
.tm-lbl{ font-family:var(--mono); font-size:8px; letter-spacing:1.1px; fill:var(--ice); opacity:0; transition:opacity .5s; }
.tmodel.s1 .tm-lbl{ opacity:1; }
.tm-bound{
  fill:none; stroke:var(--warn); stroke-width:1; stroke-dasharray:5 5; rx:12;
  opacity:0; transition:opacity .6s;
}
.tmodel.s2 .tm-bound{ opacity:.72; }
.tm-bound-lbl{ font-family:var(--mono); font-size:7px; letter-spacing:1.2px; fill:var(--warn); opacity:0; transition:opacity .6s; }
.tmodel.s2 .tm-bound-lbl{ opacity:1; }
.tm-flow{
  fill:none; stroke:rgba(79,216,234,.5); stroke-width:1.4;
  stroke-dasharray:var(--len,140); stroke-dashoffset:var(--len,140);
  transition:stroke-dashoffset 1s var(--ease);
}
.tmodel.s3 .tm-flow{ stroke-dashoffset:0; }
.tm-threat{ opacity:0; transition:opacity .5s; }
.tmodel.s4 .tm-threat{ opacity:1; }
.tm-threat circle{ fill:rgba(255,79,216,.16); stroke:var(--hyper); stroke-width:1.1; }
.tm-threat text{ font-family:var(--mono); font-size:7px; fill:var(--hyper); }
.tm-mit{ opacity:0; transition:opacity .5s; }
.tmodel.s5 .tm-mit{ opacity:1; }
.tm-mit rect{ fill:rgba(63,224,176,.12); stroke:rgba(63,224,176,.5); stroke-width:1; rx:7; }
.tm-mit text{ font-family:var(--mono); font-size:7px; fill:var(--ok); }
.tmodel-steps{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:var(--s4); }
.tmodel-step{
  font-family:var(--mono); font-size:9px; letter-spacing:1.4px; padding:8px 14px; border-radius:16px;
  border:1px solid var(--line2); color:var(--fog); transition:border-color .4s, color .4s;
}
.tmodel-step.on{ border-color:var(--acc); color:var(--white); }
.tmodel-note{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--fog); text-align:center; margin-top:var(--s3); }

/* ============================================================
   CODE PANEL  (after 21st.dev @skyleen77/animate-code-block:
   lines type in as the panel enters view)
   ============================================================ */
.codep{ border:1px solid var(--line2); border-radius:var(--r-md); overflow:hidden; background:rgba(8,12,24,.9); }
.codep-hd{ display:flex; align-items:center; gap:8px; padding:11px 15px; border-bottom:1px solid var(--line); background:var(--panel2); }
.codep-hd .dotb{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.14); }
.codep-hd .lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--fog); margin-left:6px; }
.codep-body{ font-family:var(--mono); font-size:11px; line-height:1.95; padding:16px 18px; overflow-x:auto; }
.codep-line{ white-space:pre; opacity:0; }
.codep-line.in{ animation:codeIn .28s var(--ease) forwards; }
@keyframes codeIn{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
.c-cmt{ color:var(--fog); font-style:italic; }
.c-kw{ color:var(--cyan); }
.c-txt{ color:var(--ice); }
.c-ok{ color:var(--ok); }
.c-warn{ color:var(--warn); }
.c-crit{ color:var(--crit); }
.codep-foot{ padding:10px 15px; border-top:1px solid var(--line); }

/* ============================================================
   SHIFT COMPARISON — late discovery vs security throughout
   ============================================================ */
.shiftc{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.shiftc-col{ border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s4); background:var(--deep); }
.shiftc-col.late{ border-color:rgba(255,90,110,.24); }
.shiftc-col.through{ border-color:rgba(63,224,176,.24); }
.shiftc-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.8px; margin-bottom:var(--s4); }
.shiftc-col.late .shiftc-k{ color:var(--crit); }
.shiftc-col.through .shiftc-k{ color:var(--ok); }
.shiftc-rail{ display:flex; flex-direction:column; gap:6px; }
.shiftc-item{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px; padding:11px 14px;
  border-radius:9px; border:1px solid var(--line); color:var(--fog); background:var(--panel2);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.shiftc-item.found{ border-color:rgba(255,90,110,.4); color:var(--crit); }
.shiftc-item .chk{ font-size:8px; letter-spacing:1px; color:var(--ok); }
.shiftc-note{ font-size:12px; color:var(--fog); margin-top:var(--s3); line-height:1.55; }
@media (max-width:760px){ .shiftc{ grid-template-columns:1fr; } }

/* three-card capability grid */
.cap3-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cap3{ display:flex; flex-direction:column; gap:9px; padding:28px 26px; --spot-color:var(--acc-soft); }
.cap3-n{ font-family:var(--hud); font-size:11px; font-weight:700; letter-spacing:1.4px; color:var(--acc); }
.cap3-ic{ color:var(--acc); display:flex; margin:4px 0 2px; }
.cap3-t{ font-family:var(--display); font-size:18px; font-weight:600; line-height:1.25; }
.cap3-s{ font-family:var(--display); font-size:13.5px; color:var(--ice); }
.cap3-d{ font-size:12.8px; color:var(--fog); line-height:1.6; }
.cap3-list{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.cap3-list span{ font-family:var(--mono); font-size:8px; letter-spacing:.9px; padding:4px 9px; border-radius:11px; border:1px solid var(--line2); color:var(--ice); }
.cap3-go{ margin-top:auto; padding-top:15px; font-family:var(--mono); font-size:9.5px; letter-spacing:1.4px; color:var(--acc); }
@media (max-width:1000px){ .cap3-grid{ grid-template-columns:1fr; } }

/* lifecycle stage rail with checkpoints */
.lstage{ display:flex; align-items:stretch; gap:0; }
.lstage-step{ flex:1 1 0; min-width:0; padding:0 4px; text-align:center; }
.lstage-box{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep); padding:16px 11px; height:100%;
  transition:border-color .5s var(--ease), background .5s, transform .5s var(--ease);
}
.lstage-step.lit .lstage-box{ border-color:var(--acc-line); background:var(--panel); transform:translateY(-4px); }
.lstage-k{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.4px; color:var(--ice); display:block; }
.lstage-c{ font-family:var(--mono); font-size:7.5px; letter-spacing:1px; color:var(--acc); display:block; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line2); }
@media (max-width:820px){ .lstage{ flex-direction:column; gap:8px; } .lstage-step{ text-align:left; } .lstage-c{ border-top:0; padding-top:4px; } }

/* ecosystem trio */
.eco3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.eco3-card{ padding:26px 22px; text-align:center; display:flex; flex-direction:column; gap:9px; }
.eco3-k{ font-family:var(--mono); font-size:9px; letter-spacing:1.8px; }
.eco3-card.a .eco3-k{ color:var(--cyan); }
.eco3-card.b .eco3-k{ color:#9B85FF; }
.eco3-card.c .eco3-k{ color:var(--hyper); }
.eco3-t{ font-family:var(--display); font-size:16px; font-weight:600; }
.eco3-d{ font-size:12.5px; color:var(--fog); line-height:1.55; }
.eco3-go{ margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:9px; letter-spacing:1.3px; color:var(--ice); }
.eco3-centre{
  grid-column:1/-1; margin-top:var(--s3); text-align:center; padding:26px;
  border:1px dashed var(--line2); border-radius:var(--r-lg);
  background:linear-gradient(120deg, rgba(79,216,234,.07), rgba(124,92,250,.09), rgba(255,79,216,.05));
}
.eco3-centre b{ font-family:var(--display); font-size:19px; font-weight:700; display:block; }
.eco3-centre span{ font-size:12.5px; color:var(--fog); }
@media (max-width:820px){ .eco3{ grid-template-columns:1fr; } }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .prod-orbit{ animation:none; }
  .pipe3d-rail{ height:auto; }
  .pipe3d-view{ position:static; height:auto; perspective:none; overflow:visible; }
  .pipe3d-track{ flex-direction:column; gap:9px; padding:0; transform:none !important; align-items:stretch; }
  .pipe3d-stage{ width:100%; }
  .pipe3d-card{ transform:none !important; opacity:1 !important; }
  .pipe3d-link{ width:1px; height:16px; margin:0 auto; }
  .stackx{ perspective:none; }
  .stackx-inner{ transform:none !important; height:auto; display:flex; flex-direction:column; gap:8px; }
  .stackx-layer{ position:relative; left:auto; top:auto; margin:0; width:100%; height:auto; transform:none !important; box-shadow:none; }
  .split{ perspective:none; }
  .split-side{ transform:none !important; }
  .split-merge{ opacity:1 !important; transform:none !important; }
  .codep-line{ opacity:1; animation:none; }
}