/* website-v5 supplemental stylesheet.
   Adds the Automation and Intelligence exploded-glass visuals and the new
   destination/lab-CTA styling. Does not touch /website-v3 or /website-v4 assets. */

/* ---------- shared sizing (matches .systems-architecture proportions) ---------- */
.automation-architecture,
.intelligence-architecture {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 340 / 300;
  overflow: visible;
}

/* ================= AUTOMATION: connected glass workflow stages ================= */
.automation-architecture .auto-platform { stroke: #6eada9; stroke-width: 1; fill: url(#auto-platform-glass); }
.automation-architecture .auto-platform-side { stroke: #416160; stroke-width: 1; fill: url(#auto-platform-edge); }
.automation-architecture .auto-loop-guide { fill: none; stroke: #3d6b68; stroke-width: 1; stroke-opacity: .5; }
.automation-architecture .auto-loop-flow {
  fill: none; stroke: #55e4c9; stroke-width: 1.6; stroke-dasharray: 6 16;
  animation: sos-v5-flow 2.6s linear infinite;
}
.automation-architecture .auto-stage-glow { animation: sos-v5-stage-pulse 3.4s ease-in-out infinite; }
.automation-architecture .auto-stage-glow:nth-child(2) { animation-delay: -.85s; }
.automation-architecture .auto-stage-glow:nth-child(3) { animation-delay: -1.7s; }
.automation-architecture .auto-stage-glow:nth-child(4) { animation-delay: -2.55s; }
.automation-architecture .auto-hub { animation: sos-v5-core-light 2.4s ease-in-out infinite; }
.automation-architecture .auto-port { fill: #9bf8e4; filter: url(#auto-glow); }
.automation-architecture .auto-packet {
  offset-path: path("M170 66 C 246 66 282 108 282 150 C 282 192 246 234 170 234 C 94 234 58 192 58 150 C 58 108 94 66 170 66 Z");
  offset-rotate: 0deg;
  offset-anchor: 50% 50%;
  animation: sos-v5-packet 3.2s linear infinite;
  fill: #d6fff5;
  filter: url(#auto-glow);
}
.automation-architecture .auto-packet:nth-child(2) { animation-delay: -1.07s; }
.automation-architecture .auto-packet:nth-child(3) { animation-delay: -2.13s; }

/* ================= INTELLIGENCE: layered knowledge nodes + decision core ================= */
.intelligence-architecture .intel-platform { stroke: #6eada9; stroke-width: 1; fill: url(#intel-platform-glass); }
.intelligence-architecture .intel-platform-side { stroke: #416160; stroke-width: 1; fill: url(#intel-platform-edge); }
.intelligence-architecture .intel-node { animation: sos-v5-node-drift 5.5s ease-in-out infinite; }
.intelligence-architecture .intel-node--b { animation-delay: -1.8s; }
.intelligence-architecture .intel-node--c { animation-delay: -3.6s; }
.intelligence-architecture .intel-beam {
  fill: none; stroke: #55e4c9; stroke-width: 1.3; stroke-dasharray: 4 12;
  animation: sos-v5-flow 2.2s linear infinite;
}
.intelligence-architecture .intel-core-glow { animation: sos-v5-core-light 3s ease-in-out infinite; }
.intelligence-architecture .intel-dot { fill: #78ccbc; }

/* ---------- shared keyframes ---------- */
@keyframes sos-v5-flow { to { stroke-dashoffset: -88; } }
@keyframes sos-v5-stage-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes sos-v5-core-light { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes sos-v5-node-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sos-v5-packet { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---------- motion lifecycle: paused state (offscreen / hidden / motion-toggle) ---------- */
.automation-architecture[data-motion='paused'] *,
.intelligence-architecture[data-motion='paused'] * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .automation-architecture *,
  .intelligence-architecture * {
    animation: none !important;
  }
}

/* ================= Systems Lab CTA (single CTA, no placeholder styling) ================= */
.lab__bullets .tbd { all: unset; }

/* ================= Destination pages: contact / revenue-blind-spot / founders ================= */
.dest-main { padding-block: 64px 96px; }
.dest-wrap { max-width: 760px; margin-inline: auto; padding-inline: 24px; }
.dest-eyebrow { color: #5eead4; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.dest-h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 0 0 18px; color: #e9eef6; }
.dest-lede { color: #b7c7cf; font-size: 1.05rem; line-height: 1.6; margin: 0 0 32px; }

.dest-card {
  background: linear-gradient(180deg, #12262b99, #081217e6);
  border: 1px solid #2c4b4c;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 24px;
}

.dest-form label { display: block; font-size: .85rem; color: #9fb8bd; margin: 16px 0 6px; }
.dest-form label:first-child { margin-top: 0; }
.dest-form input,
.dest-form textarea {
  width: 100%;
  background: #061013;
  border: 1px solid #2c4b4c;
  border-radius: 8px;
  color: #e9eef6;
  font: inherit;
  padding: 10px 12px;
  box-sizing: border-box;
}
.dest-form textarea { min-height: 96px; resize: vertical; }
.dest-form .dest-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.dest-preview {
  background: #061013;
  border: 1px solid #2c4b4c;
  border-radius: 8px;
  padding: 16px;
  white-space: pre-wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .88rem;
  color: #cfe6e2;
  margin-top: 16px;
}

.dest-note { color: #8aa2a8; font-size: .82rem; margin-top: 14px; }
.dest-note--burgundy { color: #d99; }

.dest-dims { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 28px 0; }
.dest-dim { background: #0c1c20b3; border: 1px solid #29433f; border-radius: 12px; padding: 18px; }
.dest-dim h3 { margin: 0 0 8px; font-size: 1rem; color: #e9eef6; }
.dest-dim p { margin: 0; color: #a9c0c5; font-size: .92rem; line-height: 1.5; }

.dest-people { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 28px 0; }
.dest-person { background: #0c1c20b3; border: 1px solid #29433f; border-radius: 12px; padding: 22px; }
.dest-person h3 { margin: 0 0 4px; color: #e9eef6; }
.dest-person p { margin: 0; color: #a9c0c5; }

.dest-status { min-height: 1.2em; color: #5eead4; font-size: .88rem; margin-top: 10px; }

/* ---------- Automation art v2 (hub + packets, 3:2) ---------- */
.automation-architecture { aspect-ratio: 480 / 320; }

/* ---------- Websites art v2 (browser frame + scan, 3:2) ---------- */
.websites-architecture { width: 100%; max-width: 500px; aspect-ratio: 480 / 320; overflow: visible; }
.websites-architecture[data-motion='paused'] * { animation-play-state: paused !important; }

/* ---------- AI Agents art v2 (agent core + particles, 3:2) ---------- */
.intelligence-architecture { aspect-ratio: 480 / 320; }