body {
    font-family: 'Inter', sans-serif;
}

.architectural-grid {
    background-image:
      linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 80px 80px;
}

.satellite {
    transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: absolute;
}

/* Resting Positions & Opacity */
.satellite-1 { top: 38%; left: 28%; opacity: 0.25; }
.satellite-2 { top: 20%; right: 15%; opacity: 0.3; }
.satellite-3 { top: 49%; left: 32%; opacity: 0.25; }
.satellite-4 { top: 40%; right: 28%; opacity: 0.25; }
.satellite-5 { bottom: 38%; left: 30%; opacity: 0.25; }
.satellite-6 { top: 46%; right: 30%; opacity: 0.3; }
.satellite-7 { bottom: 43%; left: 35%; opacity: 0.25; }
.satellite-8 { top: 36%; left: 49%; opacity: 0.3; }
.satellite-9 { top: 51%; right: 36%; opacity: 0.25; }
.satellite-10 { bottom: 42%; right: 38%; opacity: 0.25; }
.satellite-11 { top: 44%; left: 38%; opacity: 0.25; }

/* Hover combines with inline transform for parallax and scale */
.hero-container:hover .satellite-1 { top: 15%; left: 8%; opacity: 0.8; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.15); }
.hero-container:hover .satellite-2 { top: 12%; right: 8%; opacity: 0.9; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.3); }
.hero-container:hover .satellite-3 { top: 48%; left: 6%; opacity: 0.8; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.2); }
.hero-container:hover .satellite-4 { top: 18%; right: 8%; opacity: 0.8; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.25); }
.hero-container:hover .satellite-5 { bottom: 15%; left: 12%; opacity: 0.8; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.3); }
.hero-container:hover .satellite-6 { top: 35%; right: 12%; opacity: 0.9; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.4); }
.hero-container:hover .satellite-7 { bottom: 35%; left: 10%; opacity: 0.9; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.5); }
.hero-container:hover .satellite-8 { top: 8%; left: 48%; opacity: 0.9; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.4); }
.hero-container:hover .satellite-9 { top: 55%; right: 8%; opacity: 0.9; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.5); }
.hero-container:hover .satellite-10 { bottom: 8%; right: 15%; opacity: 0.8; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.3); }
.hero-container:hover .satellite-11 { top: 25%; left: 15%; opacity: 0.9; transform: translate(var(--translateX, 0), var(--translateY, 0)) scale(1.4); }


/* Keyframe animations */
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes float-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes subtle-rotate { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2deg); } }
@keyframes pulse-cursor { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; } }

/* Platform SVG Animations */
@keyframes dashFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100; }
}

@keyframes pulseGlow {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bubbleFloat {
  0% { transform: translateY(0px) scale(1); opacity: 0.8; }
  50% { transform: translateY(-5px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0px) scale(1); opacity: 0.8; }
}

@keyframes agentBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.05); }
}

@keyframes blueprintDraw {
    0% { stroke-dashoffset: 1000; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes blueprintGridFade {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes elementPopIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

#platform-svg #thought-bubble {
  animation: bubbleFloat 4s infinite ease-in-out;
  transform-origin: center center;
}
#platform-svg .thought-line {
  stroke-dasharray: 10 10;
  animation: dashFlow 3s infinite linear;
}
#platform-svg #conversation-rect, #platform-svg .conversation-text, #platform-svg #idea-connect-line {
  animation: fadeInUp 1s ease-out forwards;
  opacity: 0;
  transform: translateY(10px);
}
#platform-svg #conversation-rect { animation-delay: 1s; }
#platform-svg .conversation-text:nth-of-type(1) { animation-delay: 1.2s; }
#platform-svg .conversation-text:nth-of-type(2) { animation-delay: 1.4s; }
#platform-svg .conversation-text:nth-of-type(3) { animation-delay: 1.6s; }
#platform-svg #idea-connect-line { animation-delay: 1.8s; }


#platform-svg #workspace-canvas {
    animation: pulseGlow 5s infinite ease-in-out;
    transform-origin: center center;
}
#platform-svg #canvas-title-text { animation: fadeInUp 1s ease-out forwards 2s; opacity: 0; }

#platform-svg .arch-box, #platform-svg .flow-dot, #platform-svg .flow-path, #platform-svg .preview-element {
    animation: elementPopIn 0.8s ease-out forwards;
    opacity: 0;
    transform-origin: center center;
}
#platform-svg rect.arch-box:nth-of-type(1) { animation-delay: 2.2s; }
#platform-svg text.arch-box:nth-of-type(1) { animation-delay: 2.2s; }
#platform-svg rect.arch-box:nth-of-type(2) { animation-delay: 2.3s; }
#platform-svg text.arch-box:nth-of-type(2) { animation-delay: 2.3s; }
#platform-svg rect.arch-box:nth-of-type(3) { animation-delay: 2.4s; }
#platform-svg text.arch-box:nth-of-type(3) { animation-delay: 2.4s; }

#platform-svg .flow-dot:nth-of-type(1) { animation-delay: 2.5s; }
#platform-svg .flow-dot:nth-of-type(2) { animation-delay: 2.6s; }
#platform-svg .flow-dot:nth-of-type(3) { animation-delay: 2.7s; }
#platform-svg .flow-path {
    stroke-dasharray: 50 50;
    animation: dashFlow 2s infinite linear, elementPopIn 0.8s ease-out forwards;
    animation-delay: 2.8s, 2.8s;
}
#platform-svg .preview-element:nth-of-type(1) { animation-delay: 2.9s; }
#platform-svg .preview-element:nth-of-type(2) { animation-delay: 3s; }
#platform-svg .preview-element:nth-of-type(3) { animation-delay: 3.1s; }
#platform-svg .preview-element:nth-of-type(4) { animation-delay: 3.2s; }
#platform-svg .preview-element:nth-of-type(5) { animation-delay: 3.3s; }


#platform-svg #ai-brain-circle {
  animation: pulseGlow 3s infinite ease-in-out;
  transform-origin: center center;
  animation-delay: 3.5s;
}
#platform-svg .ai-brain-path {
    animation: pulseGlow 3s infinite ease-in-out;
    transform-origin: center center;
    animation-delay: 3.6s;
}
#platform-svg .agent-arm {
    stroke-dasharray: 20 20;
    animation: dashFlow 2s infinite linear, elementPopIn 0.8s ease-out forwards;
    opacity: 0;
    animation-delay: 3.8s, 3.8s;
}
#platform-svg .agent-orb {
    animation: agentBounce 1.5s infinite ease-in-out forwards, elementPopIn 0.8s ease-out forwards;
    transform-origin: center center;
    opacity: 0;
    animation-delay: 3.9s, 3.9s;
}
#platform-svg .agent-icon {
    animation: elementPopIn 0.8s ease-out forwards;
    opacity: 0;
    animation-delay: 4s;
}

#platform-svg .main-flow-line {
    stroke-dasharray: 20 20;
    animation: dashFlow 4s infinite linear;
    animation-delay: 4.5s;
}

#platform-svg #blueprint-base, #platform-svg #blueprint-top, #platform-svg #blueprint-front-page {
    stroke-dasharray: 1000;
    animation: blueprintDraw 2s ease-out forwards;
    opacity: 0; 
    animation-delay: 5s;
}
#platform-svg #blueprint-top { animation-delay: 5.1s; }
#platform-svg #blueprint-front-page { animation-delay: 5.2s; }

#platform-svg .blueprint-grid-line {
    opacity: 0;
    animation: blueprintGridFade 1s ease-out forwards;
    animation-delay: 6s;
}
#platform-svg #blueprint-title-text {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
    animation-delay: 6.2s;
}