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

   Visual language, distinct from the other two practices:
     Offensive — attack paths converging on a target (2D, outside-in)
     Defensive — telemetry converging on operations (cyclical)
     Cloud     — SPACE. Depth, layers, and a camera travelling
                 through an architecture.

   The depth is CSS 3D transforms and SVG only. No WebGL, no
   Three.js: a scene graph would cost more than it adds here,
   and perspective + translateZ already gives real depth.

   Motion discipline: transforms and opacity only, one moving
   idea per section, and nothing rotates continuously.
   ============================================================ */

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

/* ============================================================
   HERO — CLOUD ARCHITECTURE
   ============================================================ */
.cld-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center; }
.cld-stage{ position:relative; width:100%; max-width:520px; margin:0 auto; perspective:1100px; }
.cld-stage-inner{
  position:relative; transform-style:preserve-3d;
  transform:rotateX(var(--hrx,16deg)) rotateZ(var(--hrz,-8deg));
  transition:transform .5s var(--ease);
}
.cld-svg{ width:100%; height:auto; overflow:visible; }
.cld-ring{ fill:none; stroke:var(--line2); stroke-width:1; }
.cld-ring.dashed{ stroke:var(--line); stroke-dasharray:3 7; }
.cld-spoke{ stroke:rgba(140,165,225,.3); stroke-width:1; }
.cld-node{ fill:var(--panel2); stroke:var(--line2); stroke-width:1; }
.cld-node-dot{ fill:var(--cyan); opacity:.85; }
.cld-core{ fill:url(#cldCore); stroke:rgba(124,92,250,.55); stroke-width:1.2; }
.cld-link{ stroke:rgba(79,216,234,.4); stroke-width:1; stroke-dasharray:4 6; animation:cldFlow 4s linear infinite; }
@keyframes cldFlow{ to{ stroke-dashoffset:-20; } }
.cld-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;
}
.cld-core-label{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; width:118px; }
.cld-core-label span{ display:block; font-family:var(--mono); font-size:7.5px; letter-spacing:2px; color:var(--fog); }
.cld-core-label b{ display:block; font-family:var(--display); font-size:12.5px; font-weight:700; color:var(--white); }
@media (max-width:1000px){ .cld-hero-grid{ grid-template-columns:1fr; gap:var(--s5); } .cld-stage{ max-width:420px; order:-1; } }
@media (max-width:420px){ .cld-stage{ max-width:300px; } .cld-label{ font-size:7px; padding:3px 7px; letter-spacing:.9px; } }

/* ============================================================
   01 — DEPTH TRAVEL
   A sticky viewport the page scrolls "through": layers sit at
   different Z and pass the camera one at a time.
   The scroll length comes from the outer rail's height, so the
   sticky element never traps the scroll.
   ============================================================ */
.travel{ position:relative; }
.travel-rail{ height:420vh; }                 /* the scroll budget for the sequence */
.travel-view{
  position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center;
  perspective:1000px; overflow:hidden;
}
.travel-scene{ position:relative; transform-style:preserve-3d; width:min(460px,84vw); height:300px; }
.travel-layer{
  position:absolute; inset:0; border-radius:var(--r-lg);
  border:1px solid var(--line2); background:linear-gradient(155deg, rgba(13,20,36,.9), rgba(6,9,17,.78));
  display:flex; flex-direction:column; justify-content:center; gap:9px; padding:26px 28px;
  transform:translateZ(var(--tz,0px)) scale(var(--ts,1));
  opacity:var(--to,0); box-shadow:0 30px 90px rgba(0,0,0,.6);
  will-change:transform,opacity;
}
.travel-layer::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.45;
  background-image:
    linear-gradient(to right, rgba(140,165,225,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,165,225,.08) 1px, transparent 1px);
  background-size:30px 30px;
}
.travel-k{ font-family:var(--mono); font-size:9px; letter-spacing:2.4px; color:var(--acc); position:relative; }
.travel-t{ font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-.5px; position:relative; }
.travel-d{ font-size:13px; color:var(--fog); line-height:1.6; position:relative; max-width:330px; }
.travel-b{
  position:relative; margin-top:6px; font-family:var(--mono); font-size:8px; letter-spacing:1.4px;
  color:var(--warn); border-top:1px dashed rgba(245,180,78,.3); padding-top:9px;
}
/* progress readout, so the sequence never feels like a stuck page */
.travel-hud{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  display:flex; gap:7px; align-items:center;
}
.travel-hud i{ width:22px; height:2px; border-radius:2px; background:var(--line2); transition:background .3s; }
.travel-hud i.on{ background:var(--acc); box-shadow:0 0 8px var(--acc); }
.travel-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: no sticky camera. The same layers become a plain
   vertical flow — the story survives, the scroll hijack does not. */
@media (max-width:820px){
  .travel-rail{ height:auto; }
  .travel-view{ position:static; height:auto; perspective:none; overflow:visible; padding:0; }
  .travel-scene{ width:100%; height:auto; display:flex; flex-direction:column; gap:10px; transform-style:flat; }
  .travel-layer{
    position:relative; inset:auto; transform:none !important; opacity:1 !important;
    box-shadow:none; padding:20px 18px;
  }
  .travel-hud,.travel-cap{ display:none; }
  .travel-t{ font-size:19px; }
}

/* ============================================================
   02 — MULTI-CLOUD ORBIT
   Three environments orbit a shared control plane. Scroll drives
   the orbit angle; it does not spin on its own.
   (Depth/orbit pattern after 21st.dev @moazamtrade/3d-orbit-gallery
   and @piyushxdev/3d-parallax-unfurling-gallery, rebuilt in CSS.)
   ============================================================ */
.orbit{
  position:relative; height:400px; perspective:1000px; margin:var(--s5) 0;
  /* the inner box is rotated in 3D; clip so its bounding box can't widen the column */
  overflow:hidden;
}
.orbit-inner{
  /* Sized and centred rather than inset:0. rotateZ on a full-width block
     rotates the whole column and overflows at mid widths; rotating a fixed
     440px box keeps the footprint predictable at every breakpoint. */
  position:absolute; top:50%; left:50%; width:440px; height:440px; margin:-220px 0 0 -220px;
  transform-style:preserve-3d;
  transform:rotateX(72deg) rotateZ(var(--orz,0deg));
}
.orbit-path{
  position:absolute; top:50%; left:50%; width:340px; height:340px; margin:-170px 0 0 -170px;
  border:1px dashed var(--line2); border-radius:50%;
}
.orbit-item{
  position:absolute; top:50%; left:50%; width:104px; margin:-26px 0 0 -52px;
  transform:rotate(var(--a,0deg)) translateX(170px) rotate(calc(-1 * var(--a,0deg))) rotateX(-72deg) rotateZ(calc(-1 * var(--orz,0deg)));
  transform-style:preserve-3d;
}
.orbit-card{
  border:1px solid var(--line2); border-radius:var(--r-md); background:var(--deep);
  padding:12px 10px; text-align:center; transition:border-color .4s, box-shadow .4s, transform .4s var(--ease);
}
.orbit-item.on .orbit-card{ border-color:var(--acc); box-shadow:0 0 22px var(--acc-soft); transform:translateY(-4px); }
.orbit-k{ font-family:var(--hud); font-size:13px; font-weight:700; letter-spacing:1px; color:var(--ice); }
.orbit-n{ font-family:var(--mono); font-size:7.5px; letter-spacing:1.2px; color:var(--fog); margin-top:5px; }
.orbit-hub{
  position:absolute; top:50%; left:50%; width:150px; height:150px; margin:-75px 0 0 -75px;
  border-radius:50%; transform:rotateX(-72deg) rotateZ(calc(-1 * var(--orz,0deg)));
  background:radial-gradient(circle at 38% 32%, rgba(124,92,250,.4), rgba(8,12,24,.96) 70%);
  border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;
}
.orbit-hub span{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.6px; color:var(--ice); line-height:1.7; }
.orbit-shared{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:var(--s4); }
.orbit-shared span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:1.4px; padding:9px 16px; border-radius:18px;
  border:1px solid var(--line); color:var(--ice); background:var(--panel2);
}
@media (max-width:820px){
  /* flatten to a row of environments — an orbit at phone width is unreadable */
  .orbit{ height:auto; perspective:none; }
  .orbit-inner{ position:relative; inset:auto; transform:none !important; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .orbit-path{ display:none; }
  .orbit-item{ position:relative; top:auto; left:auto; width:auto; margin:0; transform:none !important; }
  .orbit-hub{ position:relative; top:auto; left:auto; margin:12px auto 0; transform:none !important; width:100%; height:auto; border-radius:var(--r-md); padding:16px; }
}
@media (max-width:380px){ .orbit-inner{ grid-template-columns:1fr; } }

/* ============================================================
   03 — CONTAINER EXPLOSION
   Layers separate in Z as the section is scrolled, then settle.
   ============================================================ */
.explode{ position:relative; perspective:1300px; padding:var(--s6) 0; overflow:hidden; }
.explode-inner{
  position:relative; transform-style:preserve-3d; height:400px;
  transform:rotateX(var(--erx,54deg)) rotateZ(var(--erz,-18deg));
}
.explode-layer{
  position:absolute; left:50%; top:50%; width:min(400px,74vw); height:118px;
  margin:-59px 0 0 max(-200px,-37vw);
  border:1px solid var(--line2); border-radius:var(--r-md);
  background:linear-gradient(150deg, rgba(13,20,36,.92), rgba(6,9,17,.8));
  transform:translateZ(var(--ez,0px));
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.5); transition:border-color .5s, box-shadow .5s;
  will-change:transform;
}
.explode-layer.lit{ border-color:var(--acc-line); box-shadow:0 18px 60px var(--acc-soft); }
.explode-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.9px; color:var(--ice); }
.explode-n{ font-family:var(--mono); font-size:8px; letter-spacing:1.2px; color:var(--fog); text-align:right; max-width:52%; }
.explode-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){ .explode{ perspective:820px; } .explode-inner{ height:320px; } .explode-layer{ height:92px; margin-top:-46px; padding:11px 14px; } }
@media (prefers-reduced-motion:reduce){
  .explode{ perspective:none; }
  .explode-inner{ transform:none !important; height:auto; display:flex; flex-direction:column; gap:8px; }
  .explode-layer{ position:relative; left:auto; top:auto; margin:0; width:100%; height:auto; transform:none !important; box-shadow:none; }
  .cld-link{ animation:none; }
  .cld-stage-inner,.orbit-inner{ transform:none !important; }
}

/* ============================================================
   04 — INFRASTRUCTURE MAP
   Nodes illuminate and connections draw themselves in.
   ============================================================ */
.imap{ position:relative; 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)); }
.imap-svg{ width:100%; height:auto; display:block; overflow:visible; }
.imap-edge{
  fill:none; stroke:rgba(140,165,225,.34); stroke-width:1;
  stroke-dasharray:var(--len,200); stroke-dashoffset:var(--len,200);
  transition:stroke-dashoffset 1.1s var(--ease), stroke .6s;
}
.imap.on .imap-edge{ stroke-dashoffset:0; }
.imap.on .imap-edge.key{ stroke:var(--acc-line); }
.imap-node{ fill:var(--panel2); stroke:var(--line2); stroke-width:1.2; transition:stroke .5s, fill .5s; }
.imap-node.lit{ stroke:var(--acc); fill:rgba(79,216,234,.14); }
.imap-lbl{ font-family:var(--mono); font-size:8px; letter-spacing:1.2px; fill:var(--fog); transition:fill .5s; }
.imap-lbl.lit{ fill:var(--ice); }
.imap-states{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:var(--s4); }
.imap-state{
  font-family:var(--mono); font-size:9px; letter-spacing:1.6px; padding:8px 15px; border-radius:16px;
  border:1px solid var(--line2); color:var(--fog); transition:border-color .4s, color .4s;
}
.imap-state.on{ border-color:var(--acc); color:var(--white); }
.imap-states i{ color:var(--line3); font-style:normal; align-self:center; }

/* ============================================================
   TRANSFORMATION RAIL — on-premise → multi-cloud
   ============================================================ */
.shift{ display:flex; align-items:stretch; gap:0; }
.shift-step{ flex:1 1 0; min-width:0; position:relative; padding:0 4px; }
.shift-box{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep);
  padding:16px 12px; text-align:center; height:100%;
  transition:border-color .5s var(--ease), background .5s, transform .5s var(--ease);
}
.shift-step.lit .shift-box{ border-color:var(--acc-line); background:var(--panel); transform:translateY(-4px); }
.shift-k{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.3px; color:var(--ice); display:block; }
.shift-n{ font-family:var(--mono); font-size:7.5px; letter-spacing:1px; color:var(--fog); display:block; margin-top:7px; }
@media (max-width:820px){ .shift{ flex-direction:column; gap:8px; } .shift-box{ text-align:left; } }

/* ============================================================
   IDENTITY LADDER + ACCESS GRAPH
   ============================================================ */
.ladder{ display:flex; flex-direction:column; gap:9px; }
.ladder-row{
  display:flex; align-items:center; gap:15px; padding:15px 18px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--deep);
  transition:border-color .45s, background .45s, transform .45s var(--ease);
}
.ladder-row.lit{ border-color:var(--acc-line); background:var(--panel); transform:translateX(5px); }
.ladder-k{ font-family:var(--mono); font-size:9px; letter-spacing:1.6px; color:var(--acc); width:104px; flex:none; }
.ladder-d{ font-size:12.5px; color:var(--fog); }
.ladder-tier{
  margin-left:auto; flex:none; font-family:var(--mono); font-size:7.5px; letter-spacing:1.2px;
  padding:4px 9px; border-radius:10px; border:1px solid var(--line2); color:var(--ice);
}
.ladder-tier.crit{ color:var(--hyper); border-color:rgba(255,79,216,.4); }
@media (max-width:600px){ .ladder-row{ flex-wrap:wrap; gap:8px; } .ladder-k{ width:auto; } .ladder-tier{ margin-left:0; } }

.graph-wrap{ border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s4); background:var(--deep); }
.graph-svg{ width:100%; height:auto; overflow:visible; }
.graph-edge{ fill:none; stroke:rgba(140,165,225,.3); stroke-width:1.2; transition:stroke .5s, stroke-width .5s; }
.graph-wrap.on .graph-edge.path{ stroke:var(--acc); stroke-width:2; }
.graph-node{ fill:var(--panel2); stroke:var(--line2); stroke-width:1.2; transition:stroke .5s, fill .5s; }
.graph-wrap.on .graph-node.path{ stroke:var(--acc); fill:rgba(79,216,234,.13); }
.graph-lbl{ font-family:var(--mono); font-size:8px; letter-spacing:1.1px; fill:var(--ice); }
.graph-note{ font-family:var(--mono); font-size:9px; letter-spacing:1.5px; color:var(--fog); margin-top:var(--s3); text-align:center; }

/* ============================================================
   RULE TABLE (firewall review) — illustrative only
   ============================================================ */
.rules{ border:1px solid var(--line2); border-radius:var(--r-md); overflow:hidden; background:var(--panel); }
.rules-hd{ display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--panel2); }
.rules-hd .lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.7px; color:var(--fog); }
.rules-scroll{ overflow-x:auto; }
.rules table{ width:100%; border-collapse:collapse; min-width:560px; }
.rules th{
  font-family:var(--mono); font-size:8px; letter-spacing:1.5px; color:var(--fog); text-align:left;
  padding:11px 14px; border-bottom:1px solid var(--line); font-weight:500; white-space:nowrap;
}
.rules td{ font-family:var(--mono); font-size:10.5px; color:var(--ice); padding:11px 14px; border-bottom:1px solid rgba(140,165,225,.07); white-space:nowrap; }
.rules tr:last-child td{ border-bottom:0; }
.rule-status{ font-size:8px; letter-spacing:1.2px; padding:3px 8px; border-radius:9px; border:1px solid var(--line2); }
.rule-status.expected{ color:var(--ok); border-color:rgba(63,224,176,.34); }
.rule-status.review{ color:var(--warn); border-color:rgba(245,180,78,.34); }
.rule-status.flag{ color:var(--crit); border-color:rgba(255,90,110,.34); }
.rules-foot{ padding:11px 16px; border-top:1px solid var(--line); }

/* ============================================================
   ECOSYSTEM — offensive / cloud / defensive
   ============================================================ */
.eco3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:stretch; }
.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.off .eco3-k{ color:var(--cyan); }
.eco3-card.cld .eco3-k{ color:#9B85FF; }
.eco3-card.def .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; } }

/* four-card capability grid */
.cap4-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cap4{ display:flex; flex-direction:column; gap:9px; padding:28px 26px; --spot-color:var(--acc-soft); }
.cap4-n{ font-family:var(--hud); font-size:11px; font-weight:700; letter-spacing:1.4px; color:var(--acc); }
.cap4-ic{ color:var(--acc); display:flex; margin:4px 0 2px; }
.cap4-t{ font-family:var(--display); font-size:18px; font-weight:600; line-height:1.25; }
.cap4-s{ font-family:var(--display); font-size:13.5px; color:var(--ice); }
.cap4-d{ font-size:12.8px; color:var(--fog); line-height:1.6; }
.cap4-list{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.cap4-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); }
.cap4-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:820px){ .cap4-grid{ grid-template-columns:1fr; } }

/* editorial chain: configuration → exposure → access → impact */
.chain{ display:flex; align-items:stretch; gap:0; }
.chain-step{ flex:1 1 0; min-width:0; text-align:center; padding:0 5px; }
.chain-box{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep); padding:18px 14px; height:100%;
  transition:border-color .45s, background .45s; }
.chain-step.lit .chain-box{ border-color:var(--acc-line); background:var(--panel); }
.chain-k{ font-family:var(--mono); font-size:9.5px; letter-spacing:1.6px; color:var(--acc); display:block; }
.chain-d{ font-size:11.5px; color:var(--fog); display:block; margin-top:8px; line-height:1.5; }
@media (max-width:760px){ .chain{ flex-direction:column; gap:8px; } .chain-step{ text-align:left; } }